/*
 * SportsGods — shared component patterns.
 *
 * Augments css/theme.css (token layer) with reusable component classes
 * that pages can opt in to via class names. Existing inline <style>
 * blocks are NOT modified by this file; new rules use distinct class
 * names so legacy markup keeps working unchanged.
 *
 * Inspired by Cursor's design language — multi-layer elevation, tight
 * tabular numerals, restrained accent usage. Tokens are pulled from
 * theme.css so light/dark mode automatically tracks.
 */

/* ── Elevated content card ──
   Cursor-style elevation: multi-layer drop shadow + a hairline ring
   that reads as a 1px border on any background. Use sparingly — one
   or two per page section, for the moments that should "float". */
.elevated-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  padding: var(--card-padding);
}

/* ── Subtle card ──
   Low-elevation surface for nested content (cards inside cards, list
   rows that need to feel "lifted off" without competing with the
   primary card). Use as the default container for non-hero content. */
.subtle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
}

/* ── Outlined accent button ──
   Cursor's primary-CTA pattern: transparent fill, accent border, accent
   text. Reads as "important" without screaming. Pairs with .btn-primary
   from index.html when used together. */
.btn-outlined {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .95rem;
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
  text-decoration: none;
  transition: background-color .15s, color .15s, transform .15s;
}
.btn-outlined:hover {
  background: var(--green-dim);
  transform: translateY(-1px);
}

/* ── Eyebrow label ──
   Tight all-caps mono label — used above section titles. Tabular nums
   prevent date/version strings from reflowing on update. */
.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.eyebrow-accent { color: var(--green); }

/* ── Refined heading rhythm ──
   Tightens letter-spacing and turns on stylistic-set + tabular-num
   features for any element that gets the .heading-tight class. Opt-in
   so existing h1/h2 don't shift unintentionally. */
.heading-tight {
  letter-spacing: -.04em;
  font-feature-settings: "ss01", "cv11", "tnum";
}

/* ── Section frame ──
   Optional convenience wrapper that applies the canonical max-width and
   the new section-gap rhythm. Equivalent to the .section pattern that
   already exists inline in several pages, but reads tokens instead of
   hard-coding 72px / 1100px. */
.section-frame {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--section-gap) 24px;
}

/* Visually-hidden text for screen readers. Lifted from games.html /
   games-detail.html so any page linking components.css gets it. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ──────────────────────────────────────────────────────────
   Shared skeleton primitives — lifted from games.html so the
   lines page (and any future page) can use the same loading
   pattern without forking the CSS. Page-specific row shapes
   (e.g., .sk-matchup width, .sk-prop-row layout) stay inline
   in each page since they describe that page's card layout.

   Per CLAUDE.md "Loading states — skeleton cards": ONE pattern
   across the site, no third variant. */
.sg-loading-eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;margin:-8px auto 16px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase}
.sg-loading-eyebrow .pulse-dot{width:6px;height:6px;border-radius:99px;background:var(--green);box-shadow:0 0 0 0 var(--green);animation:sgSkeletonPulse 1.4s ease-out infinite}
.sg-loading-eyebrow .tape{font-weight:500;color:var(--text-2);letter-spacing:.04em}
@keyframes sgSkeletonPulse{
  0%{box-shadow:0 0 0 0 rgba(24,169,87,.45)}
  70%{box-shadow:0 0 0 8px rgba(24,169,87,0)}
  100%{box-shadow:0 0 0 0 rgba(24,169,87,0)}
}
.skeleton-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.skeleton-card .sk-head{display:flex;justify-content:space-between;align-items:center}
.skeleton-row{height:10px;border-radius:6px;background:var(--surface-2)}
.skeleton-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);transform:translateX(-100%);animation:sgSkeletonShimmer 1.6s linear infinite}
[data-theme="light"] .skeleton-card::after{background:linear-gradient(90deg,transparent 0%,rgba(15,20,40,.04) 50%,transparent 100%)}
@keyframes sgSkeletonShimmer{
  100%{transform:translateX(100%)}
}
@media (prefers-reduced-motion: reduce){
  .sg-loading-eyebrow .pulse-dot{animation:none;box-shadow:0 0 0 3px rgba(24,169,87,.25)}
  .skeleton-card::after{animation:none;opacity:.5}
}

/* Reduced-motion already handled in theme.css — these transitions are
   automatically neutralized for users who've opted out. */

/* ──────────────────────────────────────────────────────────
   Shared MOBILE spacing normalizer (added 2026-06-17).
   Every page hardcodes its own gutters + header padding in its inline
   <style>. On a 375px phone the 24px content gutter wastes ~16px of
   usable width, and the 48–56px page-header top padding eats the fold,
   so pages read as cramped-yet-empty. These rules give ONE consistent,
   less-crowded phone layout. They use !important to win over the
   per-page inline blocks (which come later in source order at equal
   specificity) and are scoped to max-width:768px so the desktop/tablet
   layouts are completely untouched. */
@media (max-width: 768px) {
  /* Reclaim horizontal room: 24px → 16px gutters on the content frame. */
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  /* Tame oversized hero/header top padding so content starts higher and
     the page doesn't open with a wall of empty space above the fold. */
  .page-header { padding-top: 32px !important; padding-bottom: 16px !important; }
}

/* ══════════════════════════════════════════════════════════
   Cross-page navigation smoothing (added 2026-07-09).

   Tab clicks are full page loads, and the header used to visibly
   "settle" after every paint: js/shared.js injected the nav sizing
   overrides, the Analytics/Deep Dive tabs, the theme toggle, the
   Log-in link, the tier lock icons, and (for demo users) 40px of
   demo-banner body padding — all AFTER first render, so the whole
   top of the page jumped on every navigation. This block makes the
   nav's FINAL state static CSS, and an inline <head> snippet on
   every page stamps the last-known auth/tier/demo state onto <html>
   (html[data-sg-auth] / [data-sg-tier] / [data-sg-demo], cached in
   localStorage sg_nav_state by applyDynamicNav) BEFORE first paint.

   --sg-nav-static is the handshake: shared.js skips its runtime
   injection of the same rules (installNavCenteringCss /
   installMobileDrawerCss) when it sees this flag, so these rules
   are the single source of truth once this file is loaded. If you
   edit nav sizing here, you're editing the only copy that runs on
   pages that load components.css ≥v3.
   ══════════════════════════════════════════════════════════ */
:root { --sg-nav-static: 1; }

/* Correct background from the very first frame (kills any flash of
   unstyled backdrop between page loads), and a stable scrollbar
   gutter so pages that scroll vs. don't scroll stop shifting the
   centered layout sideways on classic-scrollbar platforms. */
html { background: var(--bg); scrollbar-gutter: stable; }

/* Same-origin cross-document view transitions: the browser holds the
   old page's pixels and cross-fades to the new page instead of
   flashing blank between tab clicks. Progressive enhancement —
   Chrome/Edge 126+, Safari 18.2+; unsupported browsers ignore it. */
@view-transition { navigation: auto; }
/* The header and demo banner are identical from page to page, so give
   them their own named transition groups: they pair with themselves
   across the navigation and read as persistent chrome (SPA feel)
   while only the content underneath cross-fades. */
.top-nav { view-transition-name: sg-top-nav; }
#sgDemoBanner { view-transition-name: sg-demo-banner; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Nav sizing — static mirror of shared.js installNavCenteringCss.
   Keep byte-equivalent with the JS fallback (still used by pages that
   load shared.js without this stylesheet). */
.top-nav-inner .nav-links { gap: 2px !important; flex-wrap: nowrap !important; }
.top-nav-inner .nav-links a { white-space: nowrap !important; }
@media (min-width: 1300px) {
  .top-nav-inner > .nav-links {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    margin: 0 10px;
  }
  .top-nav-inner .nav-links a { padding: 7px 8px !important; font-size: .82rem !important; }
}
.nav-links a .nav-lock-ico { margin-left: 5px; opacity: .5; vertical-align: -1px; flex: 0 0 auto; }
.nav-links a:hover .nav-lock-ico, .nav-links a.active .nav-lock-ico { opacity: .85; }

/* ── Theme toggle — pages now ship the button statically so it doesn't
   pop in beside the CTA. Mirrors the inline styles shared.js applies
   when it has to create the button on legacy pages. min-width keeps
   the sun↔moon glyph swap from nudging the CTA. */
#sgThemeToggle {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; font-size: .95rem; line-height: 1;
  color: var(--text); margin-left: auto; margin-right: 8px;
  font-family: inherit; flex-shrink: 0; min-width: 37px; text-align: center;
}

/* ── "Log in" link — static mirror of shared.js injectLoginCta. */
.nav-login {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 8px 14px; margin-right: 6px;
  border-radius: 8px; font-size: .85rem; font-weight: 600;
  color: var(--text-2); text-decoration: none;
  border: 1px solid var(--border); background: transparent;
  transition: all .15s;
}
.nav-login:hover, .nav-login:focus-visible { color: var(--text); border-color: var(--border-hover); background: var(--surface); }
@media (max-width: 1299px) { .nav-login { padding: 7px 11px; margin-right: 4px; } }

/* ── Pre-paint nav state. The inline head snippet stamps these attrs
   from the sg_nav_state cache before first paint; applyDynamicNav
   reconciles them (and rewrites the cache) once JS runs, so a stale
   cache self-corrects within one page view. */
html[data-sg-auth="in"] #navCta { display: none; }
html[data-sg-auth="in"] #navLogin { display: none; }
html[data-sg-auth="in"] #navAccount { display: revert; }
html[data-sg-tier="premium"] .nav-links a[href="/pricing.html"],
html[data-sg-tier="pro"] .nav-links a[href="/pricing.html"],
html[data-sg-tier="sharp"] .nav-links a[href="/pricing.html"],
html[data-sg-tier="genius"] .nav-links a[href="/pricing.html"] { display: none; }

/* Demo banner space is reserved from the first frame instead of the
   page jumping down 40px when renderDemoBanner runs. Values mirror
   body.sg-demo-shown in shared.js installDemoBannerCss — keep in sync. */
html[data-sg-demo="1"] body { padding-top: 40px; }
html[data-sg-demo="1"] .top-nav { top: 40px; }
@media (max-width: 768px) {
  /* Mobile banner is a corner pill — no top offset (mirror of the
     sg-demo-shown mobile rules). */
  html[data-sg-demo="1"] body { padding-top: 0; }
  html[data-sg-demo="1"] .top-nav { top: 0; }
}

/* ── Mobile drawer — static mirror of shared.js installMobileDrawerCss
   (verbatim), so the hamburger no longer pops in post-paint on the
   769–1299px range and the drawer styling is ready before JS runs. */
.nav-drawer-close{display:none}
.nav-scrim{display:none}
.sg-theme-drawer-item{display:none}   /* shown only inside the drawer range below */
@media (max-width: 1299px) {
  html, body{overflow-x:clip}
  .hamburger{
    display:flex !important;
    min-width:44px !important; min-height:44px !important;
    align-items:center !important; justify-content:center !important;
  }
  #sgThemeToggle{ display:none !important; }
  .sg-theme-drawer-item{
    display:flex !important; align-items:center; gap:10px;
    width:100%; margin-top:8px; padding:14px 16px !important;
    background:transparent; border:none; border-top:1px solid var(--border);
    border-radius:10px !important; color:var(--text) !important;
    font:inherit; font-size:1rem !important; text-align:left; cursor:pointer;
  }
  .sg-theme-drawer-item:hover{ background:var(--surface-2) !important; }
  .nav-links{
    position:fixed !important; top:0 !important; right:0 !important;
    left:auto !important; bottom:0 !important;
    width:min(320px, 86vw) !important;
    height:100vh !important; height:100dvh !important;
    background:var(--bg) !important; backdrop-filter:none !important;
    z-index:1001 !important;
    padding:64px 16px 24px !important;
    border-left:1px solid var(--border) !important;
    border-bottom:none !important;
    box-shadow:-12px 0 32px rgba(0,0,0,.35) !important;
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; gap:4px !important;
    overflow-y:auto !important;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
  }
  body.sg-nav-locked .top-nav{z-index:1002 !important}
  .nav-links.open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .25s ease, visibility 0s linear 0s;
  }
  .nav-links a{
    padding:14px 16px !important; font-size:1rem !important;
    border-radius:10px !important; text-align:left !important;
    color:var(--text) !important; white-space:normal !important;
  }
  .nav-links a:hover, .nav-links a.active{
    background:var(--surface-2) !important;
  }
  .nav-drawer-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:12px; right:12px;
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--border); background:var(--surface);
    color:var(--text); font-size:1.5rem; line-height:1;
    cursor:pointer; padding:0;
  }
  .nav-drawer-close:hover{background:var(--surface-2);border-color:var(--border-hover)}
  .nav-scrim{
    display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.55); z-index:1000;
    opacity:0; pointer-events:none;
    transition:opacity .2s;
  }
  .nav-scrim.open{opacity:1; pointer-events:auto}
  body.sg-nav-locked{overflow:hidden}
}