/* ---------------------------------------------------------------------------
   SPORTSFLOW SITE THEME
   Loaded after each page's own styles, so it wins without editing generators.

   The library was built in its own palette — navy, cream, amber, serif display.
   sportsflow.ai is black and white with one blue, sans display, pill buttons,
   rounded cards. Set beside the site the library read as a different product.

   This file changes the CHROME to match the site and leaves the READING
   SURFACES alone: article prose, the station text, and the field-report covers
   keep Fraunces and Spectral, because that typography is the content's own
   identity and the site does not have a reading voice to match.

   EVERY VALUE THE DEVELOPER MIGHT TUNE IS IN :root BELOW.
--------------------------------------------------------------------------- */

:root {
  --sf-black:      #000000;   /* site chrome, meta theme-color */
  --sf-ink:        #0A0A0A;   /* headings on white */
  --sf-body:       #1F2430;   /* body copy */
  --sf-muted:      #6B7280;   /* secondary text */
  --sf-line:       #E5E7EB;   /* hairlines */
  --sf-line-soft:  #F1F3F5;
  --sf-paper:      #FFFFFF;   /* page background — the site is white */
  --sf-wash:       #F7F9FB;   /* card / panel fill */
  --sf-blue:       #1E9BF0;   /* the accent. Log In pill, active tab, links */
  --sf-blue-dark:  #0B7BC8;
  --sf-blue-wash:  #EAF5FE;
  --sf-amber:      #B4791F;   /* retained ONLY for the case-against rule */
  --sf-radius:     10px;
  --sf-radius-pill: 999px;
  --sf-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sf-read: 'Spectral', Georgia, serif;
}

/* ---------------------------------------------------------------- surfaces */
body { background: var(--sf-paper) !important; color: var(--sf-body) !important; }

/* the library's dark bands become the site's black, not navy */
header, .hd, .top, .chrome, #lib-nav {
  background: var(--sf-black) !important;
}
header .orb, .hd .orb, .top .orb, .hero .orb {
  background: radial-gradient(circle at 36% 34%,
    rgba(30,155,240,.55) 0%, rgba(30,155,240,.14) 46%, rgba(30,155,240,0) 72%) !important;
}

/* ------------------------------------------------------------- typography */
/* Site headings are sans. The library's serif display is kept only where the
   surface is a reading surface: article prose and station text. */
.hd h1, .top h1, header h1, .hero h1,
h2, h3, h4, .st-head h2, .card h3, a.card h3, .cert .held, .tr h2 {
  font-family: var(--sf-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  color: var(--sf-ink);
}
.hd h1, .top h1, header h1, .hero h1 { color: #fff !important; }
.hd h1 em, .top h1 em, header h1 em, .hero h1 em {
  font-style: normal !important; color: var(--sf-blue) !important;
}

/* site nav type: uppercase, tracked, small */
#lib-nav a, .tabs button, .docnav a, .chrome a {
  font-family: var(--sf-mono) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
}
#lib-nav a, .chrome a { color: rgba(255,255,255,.66) !important; }
#lib-nav a:hover, .chrome a:hover { color: #fff !important; }
#lib-nav a.brand { color: var(--sf-blue) !important; }
#lib-nav a.on, .chrome a.on { color: #fff !important; border-bottom-color: var(--sf-blue) !important; }
.tabs button.on { color: var(--sf-ink) !important; border-color: var(--sf-blue) !important; }

/* dek / lead lines stay in the reading serif — they are prose */
.dek, .cv-dek, .sub, .hd p, .top p, .hero p, .around {
  font-family: var(--sf-read) !important;
}

/* ------------------------------------------------------------------ accent */
a, .cite { color: var(--sf-ink); }
.cite { border-bottom-color: var(--sf-blue) !important; }
.axis h2, .step h2, .sec h3, h4, .rest h4, .xr h4, .pair .st,
.hit .term, .card .k, a.card .k, .st-head .term, .tr .code {
  color: var(--sf-blue) !important;
}

/* ------------------------------------------------------------- components */
/* cards and panels: white on a wash, rounded, hairline */
.card, a.card, .case, .frame, .cert, .note, .help, .ask-help, .std, .priv,
.reach, .ex, .gate, aside .card, .rest {
  border-radius: var(--sf-radius);
}
.card, a.card, .case, aside .card { border-color: var(--sf-line) !important; }
.note, .help, .ask-help, .std, .reach, .priv { background: var(--sf-wash) !important; }
.note, .help, .ask-help { border-color: var(--sf-line) !important; }
.std { border-left-color: var(--sf-blue) !important; }

/* the case-against and referral rules keep amber: they mean caution and the
   site's single blue cannot carry that distinction */
.guard, .priv, .caution, .cannot p, .reach.gap, .ex .exturn {
  border-left-color: var(--sf-amber) !important;
}

/* buttons: the site uses a filled blue pill */
button.go, .go, a.go, .more, .chips button, .opt {
  border-radius: var(--sf-radius-pill) !important;
}
button.go, a.go.primary {
  background: var(--sf-blue) !important; color: #fff !important; border: 0 !important;
  font-family: var(--sf-mono) !important; letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1.15rem !important;
}
button.go:hover { background: var(--sf-blue-dark) !important; }
.chips button { background: var(--sf-wash) !important; border-color: var(--sf-line) !important; }
.chips button:hover { border-color: var(--sf-blue) !important; color: var(--sf-ink) !important; }
.opt { border-radius: var(--sf-radius) !important; background: #fff !important;
       border-color: var(--sf-line) !important; }
.opt:hover { border-color: var(--sf-blue) !important; }
.opt.on { border-color: var(--sf-ink) !important; }

/* inputs */
input, textarea {
  border-radius: var(--sf-radius) !important;
  border-color: var(--sf-line) !important;
  font-family: var(--sf-sans) !important;
}
input:focus, textarea:focus { border-color: var(--sf-blue) !important; }

/* chat bubbles */
.turn.you .bub { background: var(--sf-black) !important; color: #fff !important;
                 border-radius: var(--sf-radius) !important; }
.turn.it .prose { font-family: var(--sf-read) !important; color: var(--sf-body) !important; }

/* the library sidebar */
nav { background: var(--sf-black) !important; }
nav .ring a { color: var(--sf-blue) !important; }
nav a { color: rgba(255,255,255,.72) !important; }
nav a:hover { color: #fff !important; }
nav a.off { color: rgba(255,255,255,.32) !important; }

/* tables */
th { border-bottom-color: var(--sf-ink) !important; color: var(--sf-muted) !important; }
td { border-bottom-color: var(--sf-line-soft) !important; }

/* evidence chips: the register stays legible, in the site's neutrals */
.cl .ev { border-radius: 3px !important; border-color: var(--sf-line) !important;
          color: var(--sf-muted) !important; }
.cl .ev.research { border-color: var(--sf-blue) !important; color: var(--sf-blue-dark) !important; }
.cl .ev.contested, .cl .ev.objection {
  border-color: var(--sf-amber) !important; color: var(--sf-amber) !important; }

/* attainment badges */
.b.att { border-color: #15803D !important; color: #15803D !important; }
.b.work { border-color: var(--sf-amber) !important; color: var(--sf-amber) !important; }
.b.lapse { border-color: #B91C1C !important; color: #B91C1C !important; }

/* footers and rules */
footer, .runfoot { border-top-color: var(--sf-line) !important; color: var(--sf-muted) !important; }
hr { border-top-color: var(--sf-line) !important; }

/* ------------------------------------------------------------ reading surface
   The corpus, the endings and the docs are long-form. Keep them white, keep the
   serif for prose, widen the measure slightly to match the site's roomier feel. */
.wrap, .in, .inner { max-width: 54rem; }
.turn.it .prose, .ex .exp, .case .s, .body p { font-size: 1.02rem; line-height: 1.68; }

@media (prefers-color-scheme: dark) {
  /* the site is light; the library follows it rather than inverting */
}