/* === oddstorm-new.css ============================================
 * All new chrome additions for oddstorm www — new header (menu.ejs),
 * mobile drawer, search palette, popover dropdowns. ZERO impact on
 * legacy pages: only matches elements rendered by the new partials
 * (.hdr*, .drawer*, .cmdk*, .hdr-cta-*, .pill, .os-select-*).
 *
 * Load order (header.ejs):
 *   1. bootstrap.css (if tool page)
 *   2. style.css (legacy, pristine)
 *   3. home.css
 *   4. oddstorm-chrome.css (OSDS subset, no globals, no .btn)
 *   5. oddstorm-new.css (this file)
 *   6. surebets.css / main_new.css (if tool page)
 * ================================================================== */

/* === CHROME ISOLATION ============================================
 * Two-layer defense against legacy CSS leaking into our chrome:
 *
 * LAYER 1 — Markup hygiene (in menu.ejs / drawer.ejs):
 *   No <nav>, <h1>-<h6>, <p> tags in chrome. Use <div>+role/class.
 *   Legacy style.css/home.css/main_new.css have TAG-only selectors
 *   (`nav *`, `h1,h2,h3 { font-family: Gudea }`, `p { 12px }`) that
 *   match by element name and would hit any matching tag inside our
 *   chrome regardless of class. Avoid the tags → selectors don't match.
 *
 * LAYER 2 — Typography baseline at each root (below):
 *   body has `font: 62.5%/1.3em Arial` (10px). Any descendant without
 *   an explicit font-size inherits 10px. Re-state font defaults on
 *   each chrome island root so inheritance starts from a sane Nunito
 *   14px, not body 10px. Descendants with class-specific font-sizes
 *   (drawer-nav-link, hdr-nav-link, etc.) still win normally.
 *
 * `<a>` elements still match Bootstrap `a:focus/a:hover { underline }`
 * and `a { color }` — handled with targeted overrides below. */
.hdr, .drawer, .cmdk, #search-palette {
    font-family: var(--font-body, 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}
/* Children get our family by default — protects spans/buttons that
   don't carry their own font-family rule. */
.hdr *, .drawer *, .cmdk *, #search-palette * {
    font-family: inherit;
}

/* ---- Header layout overrides for surebets-family tool pages ----- */
body.full-width-hdr .hdr-inner { max-width: none; }
body.full-width-hdr .hdr {
    position: relative;
    z-index: 100;        /* above notification popup (z-index 2);
                            BELOW Bootstrap dropdown-menu (z-index 1000)
                            so tournament/teams tooltip renders OVER it */
}

/* #wrapper-header is our SHIM for tool JS — legacy CSS gives it
   background: #333 + height: 70px. We need the height (JS reads it)
   but want the dark colour HIDDEN so the OSDS .hdr surface inside is
   the only visible chrome. Transparent override + keep height.

   Also: legacy common/common.js pins inline `width: 1345px` (or
   `viewport - 30`) on #wrapper-header to match the wide tool table.
   That pushes our new responsive chrome (which must collapse to
   viewport at ≤1000px) completely off-screen on the right. Override
   width back to viewport — the table inside .wrapper keeps overflowing
   independently. !important is required to defeat jQuery's inline style. */
body.full-width-hdr #wrapper-header {
    background: transparent;
    width: 100% !important;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Welcome / general notification popup is fixed at top: 0 in legacy
   main_new.css → overlaps with our 70px header. Push exactly to header
   bottom (no gap). */
body.full-width-hdr .notification-wrapper {
    top: 70px;
}

/* Drop the legacy 8px padding-top on .side-panel (main_new.css). */
body.full-width-hdr .side-panel {
    padding-top: 0;
}

/* ---- Nav sizing ---- prevent .hdr-nav from stretching across the row
   when .hdr-inner (flex space-between) has lots of free space. Default
   flex item is auto-sized but some browsers grow flex children — pin
   to content width. */
.hdr-nav { flex: 0 0 auto; }

/* ---- Responsive — OSDS breakpoints (21-responsive-mobile.md) ----
   ≥1000px : DESKTOP            — full top nav + user pill + Get App
   701-1000: TABLET             — drawer takes over nav; user pill hidden
   ≤700px  : PHONE              — pill labels hidden, Sign in shrinks
   ≤380px  : COMPACT PHONE      — brand text hidden, tighter gap */
@media (max-width: 1000px) {  /* Tablet + Phone */
    .hdr-nav { display: none; }
    .hdr-menu-btn { display: inline-flex; }
    .hdr-actions .user-menu { display: none; }
    .hdr-actions .hdr-download,
    .hdr-actions a[href="/download/"] { display: none; }
    /* OSDS website-shell hides #locale-switcher-mount + #theme-toggle on
       ≤1000 (catalog convention — drawer carries them). Our matrix
       keeps both visible in the header. Override OSDS. */
    .hdr-actions #locale-switcher-mount { display: inline-flex; }
    .hdr-actions #theme-toggle { display: inline-flex; }
}
@media (max-width: 700px) {  /* Phone */
    .hdr-actions .locale-switcher-label,
    .hdr-actions .pill.locale-switcher .os-select-chevron {
        display: none;
    }
    .hdr-cta-primary { padding: 8px 14px; font-size: 13px; min-width: 0; }
}
@media (max-width: 380px) {  /* Compact phone */
    .hdr-brand .hdr-title { display: none; }
    .hdr-inner { gap: 4px; padding: 0 12px; }
    .hdr-cta-primary { padding: 8px 10px; }
}

/* ---- Primary CTA (Sign in / Get OddStorm App) ------------------- */
/* Namespaced class — does NOT use .btn / .btn-primary, so legacy
   Bootstrap variant buttons stay untouched. */
.hdr-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--shape-pill, 9999px);
    background: var(--brand-gradient, linear-gradient(135deg, #58872a 0%, #79b247 100%));
    color: var(--on-primary, #fff);
    font-family: var(--font-body, 'Nunito', sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--elev-1);
    transition: box-shadow var(--t-fast, 120ms ease), transform var(--t-fast, 120ms ease);
    min-width: 84px;
    justify-content: center;
}
.hdr-cta-primary:hover,
.hdr-cta-primary:focus {
    color: var(--on-primary, #fff);
    text-decoration: none;
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}
.hdr-cta-primary svg { width: 16px; height: 16px; }

/* ---- Nav-group hover dropdowns (PreMatch / InPlay / etc.) ------- */
.hdr-nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.hdr-nav-menu.os-select-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px) scaleY(0.96);
    margin: 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-fast),
                visibility var(--t-fast),
                transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    z-index: 50;
}
.hdr-nav-group:hover .hdr-nav-menu.os-select-menu,
.hdr-nav-group:focus-within .hdr-nav-menu.os-select-menu,
.hdr-nav-group.is-open .hdr-nav-menu.os-select-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scaleY(1);
}
.hdr-nav-menu .os-select-option { padding: 0; }
.hdr-nav-menu .os-select-option a {
    display: block;
    padding: 9px 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--shape-xs);
}
.hdr-nav-menu .os-select-option a:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    text-decoration: none;
}
.hdr-nav-menu .os-select-option a.is-active,
.hdr-nav-menu .os-select-option a.is-active:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-soft);
    font-weight: 700;
}

/* ---- Locale switcher popover: smooth open/close ----------------- */
/* OSDS locale-switcher.js uses native popover API + showPopover() →
   browser sets display:none ↔ block discretely. Without allow-discrete
   transitions + @starting-style, the from-frame (opacity:0, scaleY 0.94)
   never paints — element pops in immediately. Match PreMatch/InPlay
   dropdown feel. */
.os-select-menu.locale-menu {
    transition: transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                opacity var(--dur-short, 160ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)),
                overlay var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete,
                display var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete;
}
@starting-style {
    .os-select-menu.locale-menu:popover-open {
        opacity: 0;
        transform: scaleY(0.94) translateY(-4px);
    }
}

/* ---- Locale switcher pill (catalog-style) ----------------------- */
.pill.locale-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: var(--shape-pill);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--t-fast), background-color var(--t-fast);
}
.pill.locale-switcher:hover {
    color: var(--text);
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.pill.locale-switcher svg { width: 18px; height: 18px; }
.pill.locale-switcher .locale-chevron { width: 14px; height: 14px; opacity: 0.7; }
.pill.locale-switcher .locale-code { letter-spacing: 0.3px; }

/* ---- User menu pill (logged in) --------------------------------- */
.hdr-actions .pill.user-switcher {
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-muted);
    font-family: inherit;
    max-width: 200px;
}
.hdr-actions .pill.user-switcher:hover {
    color: var(--text);
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.hdr-actions .pill.user-switcher .ic { width: 16px; height: 16px; }
.hdr-actions .pill.user-switcher .os-select-chevron { width: 14px; height: 14px; opacity: 0.7; }
.user-switcher-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 120px;
}
.user-menu { position: relative; }
.user-menu-popover {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    margin: 0;
    list-style: none;
    background: var(--surface-container-high);
    border: 1px solid var(--border-strong);
    border-radius: var(--shape-md);
    box-shadow: var(--elev-3);
    padding: 6px;
    min-width: 200px;
    z-index: 50;
    /* Closed state — match hdr-nav-menu (PreMatch/InPlay) open animation:
       opacity + transform with spring ease. JS toggles data-open. */
    transform-origin: top right;
    transform: translateY(-4px) scaleY(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-fast),
                visibility var(--t-fast),
                transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.user-menu-popover[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scaleY(1);
}
.user-menu-popover .os-select-option { padding: 0; }
.user-menu-popover .os-select-option a {
    display: block;
    padding: 9px 12px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    border-radius: var(--shape-xs);
}
.user-menu-popover .os-select-option a:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    text-decoration: none;
}

/* ---- Search palette (Cmd+K) ------------------------------------- */
.cmdk[hidden] { display: none; }
.cmdk {
    position: fixed; inset: 0; z-index: 100;
    border: none; padding: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: none; max-height: none; width: 100vw; height: 100vh;
    margin: 0;
}
.cmdk::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cmdk-panel {
    position: absolute;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%) scale(0.96);
    width: min(640px, 92vw);
    height: 540px;
    max-height: 76vh;
    background: var(--surface-container-high);
    border: 1px solid var(--border-strong);
    border-radius: var(--shape-lg);
    box-shadow: var(--elev-3);
    overflow: hidden;
    opacity: 0;
    animation: cmdk-in var(--dur-medium) var(--ease-spring) forwards;
}
@keyframes cmdk-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.cmdk-input-wrap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface-container-high);
}
.cmdk-search-ic {
    width: 18px; height: 18px;
    margin-left: 20px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.cmdk-input {
    width: 100%;
    border: none; outline: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body); font-size: 18px;
    padding: 18px 16px 18px 12px;
}
.cmdk-input::placeholder { color: var(--text-dim); }
.cmdk-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted);
    padding: 8px;
    margin-right: 12px;
    border-radius: var(--shape-pill);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color var(--t-fast), background var(--t-fast);
}
.cmdk-close:hover { color: var(--text); background: color-mix(in srgb, currentColor 8%, transparent); }
.cmdk-close svg { width: 18px; height: 18px; }
.cmdk-body {
    position: absolute;
    top: 60px;
    bottom: 44px;
    left: 0; right: 0;
    overflow-y: auto;
    padding: 8px 0 12px;
    transition: opacity var(--t-fast);
}
.cmdk-body.is-busy { opacity: 0.55; pointer-events: none; }
.cmdk-input-wrap::after {
    content: '';
    position: absolute;
    right: 56px; top: 50%;
    width: 16px; height: 16px;
    margin-top: -8px;
    border: 2px solid var(--text-dim);
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--t-fast);
    pointer-events: none;
}
.cmdk-input-wrap:has(+ .cmdk-body.is-busy)::after {
    opacity: 1;
    animation: cmdk-spin 700ms linear infinite;
}
@keyframes cmdk-spin { to { transform: rotate(360deg); } }
.cmdk-section { margin: 8px 0 0; }
.cmdk-section-title {
    margin: 0;
    padding: 4px 20px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}
.cmdk-row mark {
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}
.cmdk-vs {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 0.85em;
    padding: 0 4px;
}
.cmdk-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.cmdk-empty.cmdk-hint { padding: 12px 20px; font-size: 12px; }
.cmdk-empty a { color: var(--primary); margin-left: 4px; }
.cmdk-foot {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 44px;
    display: flex; align-items: center; gap: 16px; justify-content: flex-end;
    padding: 0 20px;
    border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-dim);
    background: var(--surface-container-high);
    box-sizing: border-box;
}
.cmdk-foot kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--surface-container);
    border: 1px solid var(--border);
    border-radius: var(--shape-xs);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    margin: 0 4px;
}
body.cmdk-open { overflow: hidden; }

/* ---- Drawer pinned layout: head / scroll / prefs ---------------- */
/* Tool pages load Bootstrap which sets `* { box-sizing: border-box }`,
   marketing pages don't. Without border-box, drawer-inner's
   `height: 100%` + padding overflows the viewport (Theme row clipped).
   Force border-box across the drawer subtree for consistency. */
.drawer, .drawer * { box-sizing: border-box; }

/* Override chrome.css base: it scrolled the WHOLE inner. We want only
   the middle to scroll so Preferences stay pinned at the bottom. */
.drawer .drawer-inner {
    overflow: hidden;          /* only .drawer-scroll scrolls */
}
.drawer-head  { flex: 0 0 auto; }
.drawer-scroll {
    flex: 1 1 auto;
    min-height: 0;             /* required for flex child to scroll */
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -16px;           /* bleed scrollbar to drawer edge */
    padding: 0 16px;
}
.drawer-prefs {
    flex: 0 0 auto;
    /* the inner .drawer-section already carries border-top + spacing */
}
/* Suppress drawer-section's own border on the first child of prefs to
   avoid double divider against drawer-scroll's bottom edge. */
.drawer-prefs > .drawer-section { margin-top: 8px; }

/* ---- Drawer collapsible sections (Account / PreMatch / InPlay) -- */
/* Smooth expand/collapse via grid-template-rows 0fr → 1fr trick.
   <details> can't transition height; grid can. Section toggles via
   data-open attribute (footer.ejs JS). */
.drawer-collapsible { padding-top: 16px; }
.drawer-collapsible-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 0 12px 8px;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.drawer-collapsible-trigger:hover .drawer-section-title-inline {
    color: var(--text);
}
.drawer-section-title-inline {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    transition: color var(--t-fast);
}
.drawer-chev {
    width: 16px; height: 16px;
    color: var(--text-dim);
    transition: transform var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
    flex-shrink: 0;
}
.drawer-collapsible[data-open="true"] > .drawer-collapsible-trigger .drawer-chev {
    transform: rotate(180deg);
}
.drawer-collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
}
.drawer-collapsible[data-open="true"] > .drawer-collapsible-content {
    grid-template-rows: 1fr;
}
.drawer-collapsible-inner {
    overflow: hidden;
    min-height: 0;
}
.drawer-collapsible-inner > .drawer-nav { padding-top: 4px; }

/* ---- Drawer Sign in CTA full-width --------------------------------- */
.drawer-cta { display: flex; }
.drawer-signin {
    width: 100%;
    justify-content: center;
}
.drawer-section.drawer-section-first {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* ---- Suppress Bootstrap a:focus blue ring on chrome links ------ */
/* Bootstrap injects `outline: 5px auto -webkit-focus-ring-color` on
   every `<a>:focus` (loaded on tool pages). Suppress on all chrome
   links — hover/active states + magic-line indicator already provide
   visual feedback. */
.hdr a,
.hdr a:focus,
.hdr a:focus-visible,
.hdr button:focus,
.hdr button:focus-visible,
.drawer a,
.drawer a:focus,
.drawer a:focus-visible,
.drawer button:focus,
.drawer button:focus-visible {
    outline: none;
}

/* ---- Brand link: suppress Bootstrap focus underline + outline --- */
/* Bootstrap (loaded on tool pages) injects on `<a>`:
     a:hover/a:focus { text-decoration: underline; color: #23527c; }
     a:focus { outline: 5px auto -webkit-focus-ring-color; } (= blue ring)
   The blue ring + underline + blue text wrap the brand whenever it gets
   focus (auto-focus on dialog.showModal(), or after click). Suppress
   across header AND drawer-head — same component, same rule. */
.hdr-brand,
.hdr-brand:focus,
.hdr-brand:focus-visible,
.hdr-brand:hover,
.hdr-brand:active,
.drawer-head .hdr-brand,
.drawer-head .hdr-brand:focus,
.drawer-head .hdr-brand:focus-visible,
.drawer-head .hdr-brand:hover,
.drawer-head .hdr-brand:active {
    text-decoration: none;
    outline: none;
    color: var(--text);
}

/* ---- Disabled state for chrome triggers (prod uiLocked) -------- */
.hdr-icon-btn[disabled],
.pill[disabled],
.hdr-cta-primary[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* ---- Text-decoration overrides (Bootstrap a:hover + a:focus inject underline) --- */
.hdr-nav-link,
.hdr-nav-link:hover,
.hdr-nav-link:focus,
.hdr-nav-link:focus-visible,
.hdr-nav-link:active,
.hdr-nav-menu a,
.hdr-nav-menu a:hover,
.hdr-nav-menu a:focus,
.hdr-nav-menu a:focus-visible,
.hdr-brand,
.hdr-brand:hover,
.drawer-nav-link,
.drawer-nav-link:hover,
.drawer-nav-link:focus,
.drawer-nav-link:focus-visible {
    text-decoration: none;
}