/* === shell.css ===================================================
 * Chrome additions for oddstorm www — header (menu.ejs), mobile
 * drawer, search palette, popover dropdowns. ZERO impact on legacy
 * pages: only matches elements rendered by the chrome partials
 * (.hdr*, .drawer*, .cmdk*, .hdr-cta-*, .pill, .os-select-*).
 * (Renamed oddstorm-new.css → oddstorm-chrome.css → shell.css, 2026-06-11.)
 *
 * Load order (header.ejs):
 *   1. style.css (legacy, pristine; mix pages only)
 *   2. arbs-base.css (if tool page)
 *   3. /_design/css/design.css (OSDS canonical)
 *   4. shell.css (this file)
 *   5. surebets.css / tools.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/tools.css have TAG-only selectors
 *   (`nav *`, heading font overrides, `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 */
}

/* ---- Legacy-shell header background (mix / hybrid pages) -------------
 * OSDS default is a transparent backdrop-blur header that sits over a
 * theme-aware body. Legacy oddstorm-www pages (homepage, /prices,
 * /surebets/, /login, etc.) DON'T have a theme-aware body — their body
 * is the white legacy `style.css` body. Over that white surface the 70%
 * transparent OSDS header reads as a flat grey haze in light theme.
 *
 * Restore the original two-mode pattern that lived in the deleted
 * `oddstorm-chrome.css` fork: solid `--surface-container-low` on legacy
 * pages, transparent blur only when `body.os-modern` opts in.
 * Scoped here (not in OSDS) so other apps that ship a fully themed body
 * (catalog, oddstorm-auth, internal-catalog) keep the blurred default. */
body:not(.os-modern) .hdr {
    background: var(--surface-container-low);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* #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
   tools.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 (tools.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; pills+toggles stay
   ≤700px  : PHONE              — header collapses to brand + CTA + hamburger;
                                  drawer carries language, theme, nav
   ≤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; }
    /* Tablet keeps locale + theme in the header (room for them).
       OSDS catalog convention is to hide on ≤1000 — override. */
    .hdr-actions .locale-switcher-wrap { display: inline-flex; }
    .hdr-actions #theme-toggle { display: inline-flex; }
}
@media (max-width: 700px) {  /* Phone — header = brand + CTA + hamburger only */
    .hdr-actions #search-toggle,
    .hdr-actions .locale-switcher-wrap,
    .hdr-actions #theme-toggle { 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;
    white-space: nowrap;
}
.hdr-cta-primary > span { white-space: nowrap; }
.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;
}

/* ── Modern pages baseline (body.os-modern) ─────────────────────────
   Shared across every fully-ours page: theme-aware body, fixed glow
   backdrops, chrome z-index lift, smooth scroll. Page-specific CSS
   builds on top of this (e.g. legal.css, contact.css). */

/* Modern page baseline — everything any "ours" page should inherit
   without page-specific overrides. Browsers don't supply these out of
   the box, and legacy CSS isn't loaded here. */
body.os-modern {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  margin: 0; /* kill UA default 8px — without legacy style.css's global reset, body would push chrome down by 8px */
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Kill the default blue tap-highlight rectangle on mobile (Android
     Chrome especially). Our own :hover / :focus-visible / :active rules
     already provide proper feedback. */
  -webkit-tap-highlight-color: transparent;
}
body.os-modern a,
body.os-modern button,
body.os-modern input,
body.os-modern select,
body.os-modern textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Form controls don't inherit font / color from `body` by default —
   browsers force their own UA font. Pin them to the body's.

   color: inherit is SPLIT — applied to bare buttons, but NOT to OSDS
   `.btn` / `.pill` primitives. Without this guard, the unlayered
   `color: inherit` here bites OSDS `@layer components` `.btn-primary
   { color: var(--on-primary) }` (unlayered always wins over layered),
   turning Calculate / signup / pill labels into the body color. Burned
   2026-05-24 on /surebets/fixedcalculator Calculate button on light
   theme. */
body.os-modern input,
body.os-modern select,
body.os-modern textarea,
body.os-modern button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
body.os-modern input,
body.os-modern select,
body.os-modern textarea,
body.os-modern button:not(.btn):not(.pill) {
  color: inherit;
}

/* Sensible element defaults — replace whatever legacy `* {margin:0}`
   from style.css used to give us, but using box-sizing border-box. */
body.os-modern,
body.os-modern *,
body.os-modern *::before,
body.os-modern *::after { box-sizing: border-box; }

body.os-modern h1,
body.os-modern h2,
body.os-modern h3,
body.os-modern h4,
body.os-modern h5,
body.os-modern h6 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text);
  /* NO `margin: 0` or `line-height` here — page-level rules own
     spacing AND vertical rhythm. A baseline `line-height: 1.2`
     overrode `.osf-title { line-height: 1 }` and made footer section
     headings taller only on modern pages. */
}

/* Links + buttons: NO global rules here. Chrome (.hdr/.osf), legal
   (.olg-*), contact (.ocp-*), back-home (.os-back-home) and any
   future page-specific namespace owns its own a/button styling.
   A global `body.os-modern a {}` cascaded into the Sign-in CTA in the
   header and the Sign-in CTA in the footer, killing both. */

/* No global img/svg display reset — it overrode the chrome's
   `.theme-icon { display: none }` and showed all three theme icons
   at once. Page-specific rules size what they own. */

body.os-modern :focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Shared "← Back to home" pill — used at the bottom of every modern
   page (contact, terms, privacy, future). Discreet, theme-aware. */
.os-back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--shape-pill);
  transition: color var(--t-fast), background var(--t-fast);
}
.os-back-home:hover {
  color: var(--text);
  background: var(--surface-container);
  text-decoration: none;
}
.os-back-home-arrow { width: 14px; height: 14px; }

.os-back-home-wrap {
  display: flex;
  justify-content: center;
  padding: 0;
}

/* ── Modern responsive scale ───────────────────────────────────────
   Industry-standard breakpoints applied across modern pages.
   - <=480  : phone
   - 481-768: small tablet / phablet
   - 769-1024: tablet / small laptop
   - 1025-1440: desktop
   - >1440  : large desktop / ultra-wide (content stays clamped, padding grows)
*/

/* Wide-desktop typography breathing room. */
@media (min-width: 1441px) {
  body.os-modern { font-size: 16px; }
}

/* Ultra-wide: bigger side padding so content doesn't drown in width. */
@media (min-width: 1921px) {
  body.os-modern .olg,
  body.os-modern .ocp-page { padding-left: 64px; padding-right: 64px; }
}

/* Fixed glow backdrops — sit behind everything else without clipping
   ancestors (so sticky descendants like .olg-aside keep working). */
body.os-modern::before,
body.os-modern::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: blur(50px);
  opacity: 0.55;
}
body.os-modern::before {
  top: -180px;
  left: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--primary) 38%, transparent) 0%,
    color-mix(in srgb, var(--primary) 12%, transparent) 40%,
    transparent 70%);
}
body.os-modern::after {
  bottom: -220px;
  right: -220px;
  width: 820px;
  height: 820px;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--primary-soft) 32%, transparent) 0%,
    color-mix(in srgb, var(--primary-soft) 10%, transparent) 40%,
    transparent 70%);
}
html.light body.os-modern::before,
html.light body.os-modern::after {
  opacity: 0.4;
}

/* Mobile glows — pull centres closer to viewport so the bright core
   shows around (not behind) the full-width content card. Mirrors
   oddstorm-auth public/style.css behaviour. */
@media (max-width: 480px) {
  body.os-modern::before {
    top: -120px;
    left: -120px;
    width: 480px;
    height: 480px;
    opacity: 0.85;
  }
  body.os-modern::after {
    bottom: -140px;
    right: -120px;
    width: 520px;
    height: 520px;
    opacity: 0.85;
  }
  html.light body.os-modern::before,
  html.light body.os-modern::after { opacity: 0.6; }
}

/* scrollbar-gutter: stable reserves the scrollbar track even when the page
   doesn't overflow — so opening a modal <dialog> (which scroll-locks the
   body via position:fixed → removes the page scrollbar) no longer changes
   the viewport width → no horizontal shift of the centered dialog / page. */
html:has(body.os-modern) { scroll-behavior: smooth; scrollbar-gutter: stable; }

body.os-modern .hdr { z-index: 20; }
body.os-modern .osf { position: relative; z-index: 2; }

/* === Locale hint strip ============================================
 * Thin dismissible row under the header that invites the visitor to
 * switch to a URL in their browser-preferred locale. Server-rendered
 * with strings in the TARGET locale (i.e. a BG visitor on /about sees
 * Bulgarian text). Stays in normal document flow — NOT sticky — so the
 * header above + main below shift down together when the strip is
 * present, and on dismiss the JS removes the node entirely (no CLS
 * trick needed: the page just becomes 38px shorter).
 *
 * Visible on both mix (legacy 3-col) AND modern (os-modern) pages on
 * the i18n'd routes. Inherits design tokens for light/dark theme.
 * ================================================================ */
.os-locale-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #3aa269) 8%, var(--surface-container-low, #f0f4ed));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #3aa269) 20%, transparent);
  text-align: center;
}
.os-locale-hint__cta {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent, #3aa269) 50%, transparent);
  text-underline-offset: 3px;
  font-weight: 500;
}
.os-locale-hint__cta:hover,
.os-locale-hint__cta:focus-visible {
  color: var(--accent, #3aa269);
  text-decoration-color: currentColor;
}
.os-locale-hint__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, var(--text));
  cursor: pointer;
  flex: 0 0 auto;
}
.os-locale-hint__close:hover,
.os-locale-hint__close:focus-visible {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
}
/* Mobile: tighter padding, allow the message to wrap above the X. */
@media (max-width: 480px) {
  .os-locale-hint {
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
  }
}