/* Atlas Sports Intelligence — design system
   Documented in docs/UI_SYSTEM.md. Wireframes in this directory are the
   reference implementation; nothing here ships to production yet.

   Two rules the rest of the system hangs off:
   1. Team colour is chrome, never data. A team accent may tint a header rule
      or a logo chip. It may never encode a value, because two cards have to be
      comparable and team colours are not a scale.
   2. Data colour is fixed and validated. One blue, one red, one neutral.
      Blue is Atlas / above the line, red is below, grey is the market. */

:root {
  color-scheme: light;

  /* Surfaces — bright by default. This product is not a terminal. */
  --bg:            #fbfaf8;
  --surface:       #ffffff;
  --surface-sunk:  #f4f3f0;
  --border:        #e6e4df;
  --border-strong: #d4d1ca;

  /* Ink — slate, not black */
  --ink:           #14181f;
  --ink-2:         #3d4652;
  --ink-3:         #6b7480;
  --ink-4:         #949ba5;

  /* Data — validated against #fbfaf8 (dataviz validator, light + dark:
     all checks pass, worst adjacent CVD ΔE 21.6) */
  --data-pos:      #2a78d6;
  --data-neg:      #e34948;
  --data-neutral:  #9aa1aa;
  --data-grid:     #e9e7e2;

  /* Status — reserved, never reused as a series colour.
     Always shipped with an icon and a label. */
  --good:          #0ca30c;
  --warning:       #fab219;
  --serious:       #ec835a;
  --critical:      #d03b3b;

  /* Team accent — set per card, defaults to slate */
  --team-home:     #3d4652;
  --team-away:     #9aa1aa;

  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 1px 2px rgba(20,24,31,.05), 0 6px 20px rgba(20,24,31,.05);
  --gutter:        16px;
  --max:           1080px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Dark is supported, never the default. The brief is explicit that this
   product is bright; dark exists so an OS setting does not produce a glaring
   page at night, and it is a restrained restatement, not a second identity. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14161a; --surface: #1b1e23; --surface-sunk: #22262c;
    --border: #2b3037; --border-strong: #3a4049;
    --ink: #f4f5f7; --ink-2: #c6ccd4; --ink-3: #9aa2ad; --ink-4: #737b86;
    --data-pos: #3987e5; --data-neg: #e66767; --data-neutral: #7b838d;
    --data-grid: #272b31;
    --team-home: #c6ccd4; --team-away: #737b86;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 11px var(--gutter);
  display: flex; align-items: center; gap: 18px;
}
.logo { font-size: 15.5px; font-weight: 680; letter-spacing: -.02em; }
.logo span { color: var(--ink-3); font-weight: 500; }
.nav-links { margin-left: auto; display: flex; gap: 16px; font-size: 14px; }
.nav-links a { color: var(--ink-3); text-decoration: none; font-weight: 520; }
.nav-links a[aria-current] { color: var(--ink); }

/* -------------------------------------------------------------- layout --- */

.stack > * + * { margin-top: 12px; }
.section { margin-top: 28px; }
.section-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin: 0; }
h2 {
  font-size: 11.5px; font-weight: 640; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
h3 { font-size: 15px; font-weight: 640; letter-spacing: -.01em; margin: 0; }
.sub { color: var(--ink-3); font-size: 13.5px; margin: 4px 0 0; }
.note { color: var(--ink-3); font-size: 12.5px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-pad { padding: 16px; }

/* Numbers are data. They get tabular figures everywhere, always. */
.num, table, .stat-value, .odds { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- header ---- */

.game-head { padding: 18px 16px 16px; position: relative; overflow: hidden; }
.game-head::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--team-away) 0 50%, var(--team-home) 50% 100%);
}
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.team { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team.home { text-align: right; align-items: flex-end; }
.team-name { font-size: 18px; font-weight: 670; letter-spacing: -.02em; }
.team-meta { font-size: 12px; color: var(--ink-3); }
.at { font-size: 12px; color: var(--ink-4); font-weight: 600; }
.chip {
  display: inline-block; width: 26px; height: 26px; border-radius: 7px;
  background: var(--team-away);
}
.team.home .chip { background: var(--team-home); }
.kick {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-3);
}
.kick b { color: var(--ink-2); font-weight: 580; }

/* --------------------------------------------------------------- grid ---- */

.grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 460px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 21px; }
  .rows { font-size: 13px; }
  h1 { font-size: 22px; }
}
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 0 24px; }
}

.stat { padding: 12px 14px; }
.stat-label {
  font-size: 10.5px; font-weight: 620; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat-value { font-size: 24px; font-weight: 680; letter-spacing: -.03em; margin: 3px 0 1px; }
.stat-note { font-size: 11.5px; color: var(--ink-3); }

/* --------------------------------------------------------------- rows ---- */

.table-scroll { overflow-x: auto; max-width: 100%; }
.rows { width: 100%; border-collapse: collapse; font-size: 14px; }
.rows th {
  font-size: 10.5px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); text-align: right; padding: 0 0 7px; font-weight: 620;
}
.rows th:first-child { text-align: left; }
.rows td { padding: 9px 0; border-top: 1px solid var(--border); text-align: right;
           white-space: nowrap; }
.rows td:first-child { text-align: left; color: var(--ink-2); }
.rows tr:first-child td { border-top: 1px solid var(--border-strong); }
.rows .lead { font-weight: 640; color: var(--ink); }
/* The model record: a game's name and scores wrap rather than push the misses off a phone. */
.record-table td:first-child { white-space: normal; }
.record-table td + td, .record-table th + th { padding-left: 12px; }

.move-up   { color: var(--data-pos); font-weight: 620; }
.move-down { color: var(--data-neg); font-weight: 620; }
.flat      { color: var(--ink-3); }

/* -------------------------------------------------------------- grade ---- */

.grade-wrap { display: flex; align-items: center; gap: 16px; padding: 16px; }
.grade {
  width: 74px; height: 74px; flex: none; border-radius: 18px;
  display: grid; place-items: center; font-size: 34px; font-weight: 720;
  letter-spacing: -.04em; border: 2px solid currentColor;
}
.grade small { display: block; font-size: 9.5px; letter-spacing: .1em; font-weight: 640; }
.grade.a { color: var(--good); }
.grade.b { color: var(--data-pos); }
.grade.c { color: var(--warning); }
.grade.d { color: var(--serious); }
.grade.f { color: var(--critical); }

.meter { margin-top: 8px; }
.meter-row { display: grid; grid-template-columns: 150px 1fr 50px; gap: 12px; align-items: center;
             font-size: 12.5px; padding: 4px 0; }
.meter-label { color: var(--ink-3); white-space: nowrap; }
/* display:block matters — an inline span ignores height and overflow, and the
   bar silently renders as a hairline. */
.meter-track { display: block; height: 8px; border-radius: 99px;
               background: var(--border); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 99px; background: var(--data-pos); }
.meter-val { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ drivers ---- */

.driver { padding: 11px 0; border-top: 1px solid var(--border); }
.driver:first-child { border-top: 0; }
.driver-head { display: flex; align-items: baseline; gap: 8px; }
.driver-name { font-size: 14px; font-weight: 620; }
.driver-edge { margin-left: auto; font-size: 12.5px; font-weight: 620; }
.driver-text { font-size: 13px; color: var(--ink-2); margin: 3px 0 7px; }
.bar { position: relative; height: 8px; background: var(--border); border-radius: 99px; }
.bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px;
              width: 1px; background: var(--border-strong); }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.bar-fill.pos { background: var(--data-pos); left: 50%; }
.bar-fill.neg { background: var(--data-neg); right: 50%; }
.bar-scale { display: flex; justify-content: space-between; font-size: 10.5px;
             color: var(--ink-4); margin-top: 4px; }

/* lang-lint: quoting */
/* A moneyline pair needs its own line on a phone; jamming two prices into a
   table cell is how a premium card starts looking like a betting slip. */
/* lang-lint: end */
.ml { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
      padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.ml-label { color: var(--ink-2); }
.ml-vals { font-variant-numeric: tabular-nums; font-weight: 620; }
.ml-sub { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }

/* -------------------------------------------------------------- badge ---- */

.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 620; padding: 3px 9px; border-radius: 99px;
  border: 1px solid currentColor;
}
.badge.good { color: var(--good); }
.badge.warn { color: var(--warning); }
.badge.crit { color: var(--critical); }
.badge.mute { color: var(--ink-3); }
.badge.free { color: var(--ink-3); }
.badge.premium { color: var(--data-pos); }

.disclosure {
  background: var(--surface-sunk); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
}
.disclosure b { color: var(--ink); }

/* ---------------------------------------------------------- game list ---- */

.game-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 14px;
  padding: 13px 14px; border-top: 1px solid var(--border); text-decoration: none;
  color: inherit;
}
.game-row:first-of-type { border-top: 0; }
.game-row:hover { background: var(--surface-sunk); }
.game-teams { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.game-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.game-right { text-align: right; display: flex; align-items: center; gap: 10px; }
.game-line { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.grade-pill {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; border: 1.5px solid currentColor;
}

.filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0; }
.filter {
  font-size: 13px; padding: 6px 13px; border-radius: 99px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); cursor: pointer;
}
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.search {
  width: 100%; padding: 11px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}

footer {
  margin: 48px 0 40px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-3);
}

/* ------------------------------------------------------------- charts ---- */

.plot { width: 100%; height: auto; display: block; }
.plot .grid { stroke: var(--data-grid); stroke-width: 1; }
.plot .axis { fill: var(--ink-4); font-size: 10px; font-family: var(--font); }
.plot .label { fill: var(--ink-2); font-size: 11px; font-family: var(--font); font-weight: 580; }
.plot .rule { stroke: var(--data-neutral); stroke-width: 1.5; stroke-dasharray: 4 4; }

/* ------------------------------------------------------------------------
   Site additions. The tokens, type scale and components above are the
   approved design system; everything below is plumbing the pages need.
   ------------------------------------------------------------------------ */

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--surface);
  color: var(--ink); padding: 10px 14px; border-radius: 0 0 8px 0; z-index: 40;
}
.skip:focus { left: 0; }

a.logo { text-decoration: none; color: inherit; }
.nav-links a:hover { color: var(--ink); }

.page-head { margin: 26px 0 4px; }
.top-gap { margin-top: 10px; }
.top-gap-sm { margin-top: 3px; }
.divided { border-top: 1px solid var(--border); }
.wide-gap { gap: 18px; }
.card-foot { margin-top: 22px; }
.board-summary { padding: 0; margin-top: 14px; }

h3 { margin: 0 0 6px; }

/* ---------------------------------------------------------- controls ---- */

.controls { margin: 18px 0 4px; }
.control-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
               margin-top: 9px; }
.select {
  font-size: 13px; font-family: inherit; padding: 6px 11px; border-radius: 99px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2);
}
.filters { margin: 0; }
.filter:hover { border-color: var(--ink-3); }
#count { margin: 9px 0 0; }

/* --------------------------------------------------------- game list ---- */

.game-list { overflow: hidden; }
.game-main { min-width: 0; }
.game-row { align-items: center; }
.game-row[hidden] { display: none; }
.game-numbers { text-align: right; }
.game-right { gap: 12px; }

.grade-pill.a { color: var(--good); }
.grade-pill.b { color: var(--data-pos); }
.grade-pill.c { color: var(--warning); }
.grade-pill.d { color: var(--serious); }
.grade-pill.f { color: var(--critical); }
.grade-pill.none { color: var(--ink-4); border-style: dashed; }

.rank { color: var(--ink-3); font-weight: 600; font-size: .82em; }

/* ---------------------------------------------------------- featured ---- */

.featured { display: grid; gap: 10px; grid-template-columns: 1fr; }
/* The home page's way from a sport's featured row to its full board. */
.more-link { margin: 12px 0 0; }
/* Three across needs about 780px: a tile cannot shrink below its widest
   number ("UMASS -21.5" does not wrap). Two across until there is room. */
@media (min-width: 560px) { .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) { .featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { text-decoration: none; color: inherit; display: block; }
.feature:hover { border-color: var(--border-strong); }
.feature-head { display: flex; align-items: center; justify-content: space-between; }
.feature-title { font-size: 17px; margin: 10px 0 2px; letter-spacing: -.02em; }
.feature-meta { margin: 0 0 12px; }
.feature-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
                border-top: 1px solid var(--border); padding-top: 10px; }
/* "MSST -6.5" is one value, and a value that wraps mid-number pushes the row
   below it out of line with the neighbouring cards. */
.feature-num { display: block; font-size: 17px; font-weight: 660;
               letter-spacing: -.02em; font-variant-numeric: tabular-nums;
               white-space: nowrap; }
/* Atlas's projected score: the product's headline number, so it reads as a
   scoreline in its own row rather than a fourth cell squeezed into three. */
.feature-score { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.feature-score .stat-label { display: block; margin-bottom: 2px; }
/* Each side stays whole ("TEX 28.1"); the line may break at the dash in a
   narrow three-column tile rather than push the page sideways. */
.feature-score-line { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: 17px; font-weight: 660;
                      letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.feature-score-line > span { white-space: nowrap; }
.feature-score-dash { color: var(--ink-3); font-weight: 500; }
.feature-foot { margin: 10px 0 0; }
/* The way into the full card. The whole tile is the link; the chip is where
   it says so, so nobody has to guess that a tile opens anything. */
.feature-end { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.feature-end > p { flex: 1 1 auto; min-width: 0; }
.details-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
                padding: 5px 11px; border-radius: 99px; border: 1px solid var(--border-strong);
                font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); }
.feature:hover .details-chip, .feature:focus-visible .details-chip {
  background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* The one-line version of the same three numbers, for a phone. A featured
   card that is 400px tall means a reader never reaches the board. */
.feature-line { display: none; }

/* "Game started": a fact about the clock, not about the numbers, so it is
   neutral ink rather than a data or status colour. games.js unhides it at
   kickoff; the [hidden] rule is restated because display: inline-flex would
   otherwise override the attribute. */
.started-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px;
                padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border-strong);
                background: var(--surface-sunk); color: var(--ink-2);
                font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
                vertical-align: 1px; }
.started-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                        background: var(--ink-3); }
.started-chip[hidden] { display: none; }

/* ------------------------------------------------------------ banner ---- */

.banner-low { border-color: var(--border-strong); }
.banner-row { display: flex; gap: 11px; align-items: flex-start; }
.banner-text { margin: 0; color: var(--ink-2); }
.nfl-strip { margin-top: 28px; }

/* -------------------------------------------------------------- team ---- */

.team-head { display: flex; align-items: center; gap: 13px; }
.chip.large { width: 38px; height: 38px; border-radius: 10px;
              background: var(--team-home); }
.team-head h1 { margin: 0; }

/* The NFL board's row of team pages: a logo and a short name, wrapping. */
.team-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.team-link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 0;
  color: inherit; text-decoration: none; }
.team-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-link:hover span, .team-link:focus-visible span { text-decoration: underline; }

/* ------------------------------------------------------------- prose ---- */

.prose p { margin: 0 0 11px; color: var(--ink-2); font-size: 14.5px; }
.prose p:last-child { margin-bottom: 0; }
.prose b { color: var(--ink); }
.prose table { margin: 4px 0 14px; }
.prose a, footer a, .note a { color: var(--ink-2); }

/* ------------------------------------------------------------ meters ---- */

.meter-fill.a { background: var(--good); }
.meter-fill.b { background: var(--data-pos); }
.meter-fill.c { background: var(--warning); }
.meter-fill.d { background: var(--serious); }
.meter-fill.f { background: var(--critical); }

/* ------------------------------------------------------------ footer ---- */

footer { display: grid; gap: 4px; }
.footer-note { color: var(--ink-4); }

:focus-visible { outline: 2px solid var(--data-pos); outline-offset: 2px; }

/* The wordmark's second half costs three lines on a 390px phone and says
   nothing the first half does not. */
@media (max-width: 420px) {
  .logo span { display: none; }
}

/* ========================================================================
   Refinement sprint: the card in three tiers.

   Tier 1 is the five-second view and is always visible. Tier 2 and 3 are
   native <details> — no JavaScript, no layout shift, open by keyboard, and
   the content is in the DOM for search and for a reader who prints the page.
   ======================================================================== */

/* ------------------------------------------------------------- hero ----- */

.hero { padding: 18px 16px 14px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--team-away) 0 50%, var(--team-home) 50% 100%);
}
.hero-teams {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: center;
}
.hero-team { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hero-team.home { flex-direction: row-reverse; text-align: right; }
.hero-names { min-width: 0; }
.hero-name {
  font-size: 19px; font-weight: 680; letter-spacing: -.025em;
  display: flex; align-items: baseline; gap: 6px;
}
.hero-team.home .hero-name { justify-content: flex-end; }
.hero-meta { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.hero-at { font-size: 11.5px; color: var(--ink-4); font-weight: 600; }
.hero-meta-row {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-3);
}
.hero-context span { white-space: nowrap; }
.hero-context { margin-top: 4px; font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.crest { width: 42px; height: 42px; object-fit: contain; flex: none; }
.crest.small { width: 30px; height: 30px; }
.crest.tiny { width: 20px; height: 20px; }
.crest-fallback {
  display: inline-block; border-radius: 9px; background: var(--team-away);
}
.hero-team.home .crest-fallback { background: var(--team-home); }

@media (min-width: 720px) {
  .hero { padding: 24px 22px 18px; }
  .hero-name { font-size: 24px; }
  .crest { width: 54px; height: 54px; }
}

/* ----------------------------------------------------------- answer ---- */

.answer { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 860px) { .answer { grid-template-columns: 1fr 340px; } }

.answer-nums {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 4px 0;
}
.answer-cell { padding: 12px 14px; }
.answer-cell + .answer-cell { border-left: 1px solid var(--border); }
.answer-value {
  font-size: 23px; font-weight: 700; letter-spacing: -.035em;
  margin: 4px 0 2px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 720px) { .answer-value { font-size: 27px; } }

/* Rule 4: the grade is the centrepiece. It is the largest thing on the card
   and it is the only element that uses a status colour. */
.grade-hero {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  border-width: 1.5px;
}
.grade-mark {
  flex: none; width: 92px; height: 92px; border-radius: 22px;
  display: grid; place-content: center; text-align: center;
  font-size: 44px; font-weight: 740; letter-spacing: -.05em; line-height: 1;
  border: 2.5px solid currentColor;
}
.grade-mark small {
  display: block; font-size: 11px; font-weight: 640; letter-spacing: .04em;
  margin-top: 5px;
}
.grade-mark small span { opacity: .55; }
.grade-hero.a { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.grade-hero.b { color: var(--data-pos); border-color: color-mix(in srgb, var(--data-pos) 40%, var(--border)); }
.grade-hero.c { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.grade-hero.d { color: var(--serious); border-color: color-mix(in srgb, var(--serious) 45%, var(--border)); }
.grade-hero.f { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); }
.grade-hero.none { color: var(--ink-4); }
.grade-words { min-width: 0; }
.grade-title {
  font-size: 16px; font-weight: 660; letter-spacing: -.015em; color: var(--ink);
}
.grade-line { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.grade-line.quiet { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
/* The disclaimer is the smallest thing in the block on purpose: it has to be
   present on every card and it is not what the reader came for. */
.grade-foot { font-size: 11px; color: var(--ink-4); margin: 8px 0 0; }
.grade-bar {
  height: 6px; border-radius: 99px; background: var(--border); overflow: hidden;
}
.grade-bar span { display: block; height: 100%; background: currentColor; }

/* -------------------------------------------------------------- why ---- */

.section.tight { margin-top: 20px; }
.why-list { list-style: none; margin: 0; padding: 4px 14px; }
.why-row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 11px;
  align-items: center; padding: 10px 0;
}
.why-row + .why-row { border-top: 1px solid var(--border); }
/* The mark is the favored team's crest, not a coloured dot: three identical
   dots read as three negatives, and colour alone may never carry meaning. */
.why-dot {
  width: 8px; height: 8px; border-radius: 99px; background: var(--ink-4);
  margin: 0 6px;
}
.why-name { font-size: 14.5px; font-weight: 600; }
.why-val {
  font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------------------------------------------------------- caution ---- */

.caution { border-left: 3px solid var(--ink-4); }
.caution.crit { border-left-color: var(--critical); }
.caution-list { margin: 0; padding-left: 18px; }
.caution-list li {
  font-size: 13.5px; color: var(--ink-2); margin: 0 0 7px; line-height: 1.45;
}
.caution-list li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- disclosure ---- */

.tier2 { margin-top: 26px; display: grid; gap: 8px; }
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.panel > summary {
  cursor: pointer; list-style: none; padding: 13px 15px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after {
  content: "+"; margin-left: auto; color: var(--ink-3); font-size: 17px;
  line-height: 1; font-weight: 500;
}
.panel[open] > summary::after { content: "−"; }
.panel[open] > summary { border-bottom: 1px solid var(--border); }
.panel > summary:hover { background: var(--surface-sunk); }
.panel-title { font-size: 14.5px; font-weight: 620; }
.panel-hint { font-size: 12.5px; color: var(--ink-3); }
.panel-body { padding: 14px 15px 16px; }
.panel-inner { padding: 0; }
.panel-body .grid-2 { gap: 16px; }
.panel-body h3 { margin-top: 0; }

/* ------------------------------------------------------------ board ---- */

.board-head { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 12px; }
.board-head h1 { font-size: 21px; }
.board-note { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
/* What the letter means, on the heading. A board grouped by grade reads as a
   ranking of what to look at first; this is the cheapest place to say it is
   not one. */
.section-caption { margin: -4px 0 9px; max-width: 62ch; }

/* Named `board-bar`, not `bar`: `.bar` is the driver meter track, and the two
   sharing a name meant the meter's centre tick was being drawn through the
   middle of the filter row. */
.board-bar {
  /* --nav-h is the menu's measured height (games.js), so the bar sits right
     under the menu however many rows it takes on this screen and font. */
  position: sticky; top: var(--nav-h, 45px); z-index: 10; margin: 0 -16px 12px;
  padding: 9px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.board-bar .search { flex: 1 1 190px; min-width: 0; padding: 7px 12px; font-size: 14px; }
.board-bar .select, .board-bar .filter { flex: none; padding: 7px 12px; font-size: 13px; }
/* The Tiles/List switch: one pill split in two, so it reads as a choice of
   view and not as two more grade filters. */
.bar-break { display: none; }
.view-toggle { flex: none; display: flex; border: 1px solid var(--border-strong); border-radius: 99px;
               overflow: hidden; background: var(--surface); }
.view-btn { border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
            font: inherit; font-size: 13px; padding: 7px 12px; }
.view-btn + .view-btn { border-left: 1px solid var(--border-strong); }
.view-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.game-row .crest { margin-right: 2px; }
.row-teams { display: flex; align-items: center; gap: 7px; min-width: 0; }
.row-crests { display: flex; align-items: center; gap: 3px; flex: none; }

/* ---------------------------------------------------- mobile hero ------ */

.wide-only { display: inline; }
.narrow-only { display: none; }

/* Below 560px the three-column hero squeezes a team name onto two lines and
   the eye has to work. Stacking reads like a scoreboard, which is what every
   phone-first sports product does and what a reader already knows. */
@media (max-width: 560px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }

  /* A tighter bar between phone and tablet; below 420px the menu takes its
     own row (end of file). */
  .nav-links { gap: 11px; font-size: 13px; }

  /* Head to head, not a stacked list. Two crests either side of "at" is the
     shape of a matchup, and a reader identifies the game from the marks
     before they read either name - which is the whole point of putting the
     marks there. The stacked version read as a table of two teams. */
  .hero-teams { grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
  .hero-team { flex-direction: column; align-items: center; text-align: center;
               gap: 8px; padding: 2px 0; }
  .hero-team.home { flex-direction: column; text-align: center; }
  .hero-team.home .hero-name { justify-content: center; }
  .hero-names { text-align: center; }
  .hero-at { display: block; align-self: start; padding-top: 18px;
             font-size: 12px; }
  .hero-name { font-size: 17px; justify-content: center; }
  .crest { width: 52px; height: 52px; }

  /* Two columns, not three: at 358px the name and the value were each taking
     two lines and the row read as four lines of nothing. Name over value,
     with the crest beside the name where it identifies the team. */
  .why-row { grid-template-columns: 20px 1fr; gap: 9px; align-items: center; }
  .why-val { grid-column: 2; text-align: left; margin-top: 1px; }

  .answer-cell { padding: 11px 9px; }
  /* "MIA −41.5" is the longest value this cell ever holds; at 17px it fits a
     390px phone without wrapping, and a wrapped number reads as two numbers. */
  .answer-value { font-size: 17px; letter-spacing: -.03em; }
  .stat-label { font-size: 9.5px; letter-spacing: .05em; }

  .grade-mark { width: 74px; height: 74px; font-size: 36px; border-radius: 18px; }
  .grade-hero { gap: 13px; padding: 14px; }
  .grade-title { font-size: 15px; }
}

/* Featured tiles are compact on a phone so the board is not pushed below the
   fold - rule 2 is that a reader who came for games sees games. */
@media (max-width: 720px) {
  .featured { grid-template-columns: 1fr; gap: 8px; }
  .feature { padding: 12px 13px; }
  .feature-title { font-size: 15.5px; margin: 8px 0 1px; }
  /* The crests carry the identity on a board row, but not at the cost of
     wrapping the team names underneath them. */
  /* The crests carry the identity on a board row, but not at the cost of
     wrapping the team names underneath them. The right-hand column is capped
     because its two numbers never wrap, so without a cap it takes whatever
     it wants and the title wraps to three lines instead. */
  .row-crests .crest { width: 25px; height: 25px; }
  .row-crests { gap: 1px; }
  .game-row { padding: 12px 11px; gap: 6px 9px; }
  .game-teams { font-size: 13.5px; }
  .game-meta { font-size: 11px; }
  .game-line { font-size: 12px; white-space: nowrap; }
  .game-right { gap: 7px; }
  .game-numbers { max-width: 108px; }
  .grade-pill { width: 27px; height: 27px; font-size: 13px; }
  /* A rank inline with the title pushed the title into the numbers. It is a
     badge about a team, so it sits with the crests. */
  .rank { font-size: .78em; }

  .feature-meta { margin-bottom: 9px; }
  .feature-score { margin-top: 9px; padding-top: 9px; }
  .feature-score-line { font-size: 15px; }
  .feature-nums, .feature-foot { display: none; }
  .feature-line {
    display: flex; align-items: baseline; gap: 8px; margin: 9px 0 0;
    padding-top: 9px; border-top: 1px solid var(--border);
    font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums;
  }
  .feature-line-diff { margin-left: auto; font-weight: 500; color: var(--ink-3); }
  /* On a phone the compact market line needs the tile's full width; the
     chip takes its own line under it, at the right. */
  .feature-end { flex-direction: column; align-items: stretch; gap: 0; }
  .feature-end .feature-actions { align-self: flex-end; margin-top: 9px; }
}

.crest.large { width: 46px; height: 46px; }

@media (max-width: 560px) {
  .board-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .board-head h1 { font-size: 19px; }
  .board-note { margin-left: 0; font-size: 12px; }
  /* The filter row does not scroll sideways on a phone. A horizontally
     scrolling strip hides its own right-hand end, and the grade filters were
     the half that stayed hidden. Two rows, nothing clipped. */
  .board-bar { top: var(--nav-h, 43px); gap: 6px; }
  .board-bar .search { flex: 3 1 150px; min-width: 0; }
  .board-bar .select { flex: 2 1 118px; min-width: 0; font-size: 12.5px; }
  .board-bar .filter { flex: 1 1 auto; font-size: 12.5px; padding: 7px 8px; }
  /* Row one is the search (and the conference list); row two is the grade
     filters and the Tiles/List switch - a forced break, so no button is ever
     left alone on a row and stretched across it. */
  .bar-break { display: block; flex: 0 0 100%; height: 0; }
  .view-btn { font-size: 12.5px; padding: 7px 9px; }
}
@media (max-width: 360px) {
  .board-bar { gap: 5px; }
  .board-bar .filter { font-size: 12px; padding: 7px 6px; }
  .view-btn { font-size: 12px; padding: 7px 7px; }
}

/* --------------------------------------------------------------- about --- */
/* The thirty-second page. It is the only surface in the product with a hero,
   because it is the only one whose job is to explain rather than to inform. */

.lede { margin: 26px 0 8px; max-width: 34em; }
.lede h1 { font-size: 30px; letter-spacing: -.03em; line-height: 1.15; }
.lede-text { font-size: 16px; color: var(--ink-2); margin: 12px 0 0;
             line-height: 1.55; }
.lede-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.button {
  display: inline-grid; place-items: center; min-height: 42px;
  padding: 0 18px; border-radius: 10px; background: var(--ink);
  color: var(--bg); font-size: 14.5px; font-weight: 620;
  text-decoration: none; border: 1px solid var(--ink);
}
.button.ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.button:hover { opacity: .92; }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 7px 0; font-size: 14px; color: var(--ink-2); }
.plain li + li { border-top: 1px solid var(--border); }

.steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 26px 1fr; gap: 12px;
        padding: 11px 0; align-items: start; }
.step + .step { border-top: 1px solid var(--border); }
.step-n {
  width: 26px; height: 26px; border-radius: 8px; display: grid;
  place-items: center; background: var(--surface-sunk);
  border: 1px solid var(--border); font-size: 12.5px; font-weight: 680;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.step b { font-size: 14.5px; }
.step .note { margin: 2px 0 0; }

@media (min-width: 720px) {
  .lede h1 { font-size: 38px; }
  .lede-text { font-size: 17.5px; }
}

/* ------------------------------------------------------------ new here --- */
/* A first-time visitor usually arrives on a card, from a link, and never sees
   the nav. One quiet line is enough to offer the explanation without costing
   a returning reader anything. */
.new-here {
  font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0;
  padding: 10px 13px; background: var(--surface-sunk);
  border: 1px solid var(--border); border-radius: 10px;
}
.new-here a { color: var(--ink-2); }
.board-new-here { margin: 0 0 12px; max-width: 62ch; }

/* ------------------------------------------------------------------ faq --- */
.faq h3 { font-size: 15px; margin: 18px 0 0; }
.faq h3:first-child { margin-top: 0; }
.faq p { font-size: 14px; color: var(--ink-2); margin: 5px 0 0; line-height: 1.55;
         max-width: 68ch; }

/* ----------------------------------------------------------- freshness --- */
/* Every visible timestamp in the product. Quiet by default: a reader should
   be able to find out how current something is without being told about it
   on every glance. */
.freshness {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  margin: 14px 0 0; font-size: 11.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.freshness b { font-weight: 620; color: var(--ink-3); }
.freshness a { color: var(--ink-4); margin-left: auto; }
.stamp { white-space: nowrap; }

/* ------------------------------------------------------------- status --- */
.status-list { padding: 2px 14px; }
.status-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  padding: 11px 0; align-items: baseline;
}
.status-row + .status-row { border-top: 1px solid var(--border); }
.status-label { font-size: 14px; font-weight: 600; }
.status-value { font-size: 13.5px; font-variant-numeric: tabular-nums;
                text-align: right; }
.status-note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }
.status-row.bad .status-value { color: var(--critical); font-weight: 640; }
.badge.warn { background: color-mix(in srgb, var(--warning) 18%, transparent);
              color: var(--ink); }

@media (min-width: 720px) {
  .status-row { grid-template-columns: 220px 1fr auto; }
  .status-note { grid-column: 2; text-align: left; }
  .status-value { grid-column: 3; }
}

/* ------------------------------------------------------ phone menu ---- */
/* Six entries do not fit beside the name on a phone: below 460px - every
   phone, the largest included - the menu takes its own full-width row, every
   entry visible, rather than running off the edge or hiding behind a scroll.
   Last in the file so it wins over the wider breakpoints above. */
/* Eight entries do not fit one row on a phone, and none may be hidden or
   scrolled out of sight: two rows of five. */
@media (max-width: 520px) {
  .logo span { display: none; }
  .nav-inner { flex-wrap: wrap; row-gap: 7px; column-gap: 10px; padding-top: 9px; padding-bottom: 9px; }
  .nav-links { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(5, auto);
               justify-content: space-between; column-gap: 8px; row-gap: 5px; font-size: 14px; }
}
@media (max-width: 340px) {
  .nav-links { font-size: 13px; column-gap: 4px; }
}

/* ----------------------------------------------------- tiles or list ---- */
/* Every game on a board is rendered twice, as a row and as a tile; only one
   shows. With no choice made, the width decides - tiles from 760px, where
   they sit three across, and the list below, where a tile per game would
   double the scroll. A reader's choice (html[data-view]) wins over both.
   Last in the file so these win over .featured's own display. */
.view-tiles { display: none; }
@media (min-width: 760px) {
  .view-list { display: none; }
  .view-tiles { display: grid; }
}
html[data-view="list"] .view-list { display: block; }
html[data-view="list"] .view-tiles { display: none; }
html[data-view="tiles"] .view-tiles { display: grid; }
html[data-view="tiles"] .view-list { display: none; }
.game-tile[hidden] { display: none; }

/* ----------------------------------------------------- menu and name ---- */
/* Eight menu entries and the full name share one row only above 760px.
   Below that the menu takes its own row; below 600px the name shortens to
   "Atlas"; below 520px the menu is two rows of four (the rules above). The
   sticky filter bar follows the menu's measured height (--nav-h). */
@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; row-gap: 6px; }
  .nav-links { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 600px) {
  .logo span { display: none; }
}
@media (max-width: 520px) {
  .board-bar { top: var(--nav-h, 95px); }
}

/* ------------------------------------------------ stretched links ---- */
/* A tile or row is a container, not a link: its title link stretches over
   the whole of it, so it still opens the card from anywhere, and the Follow
   button above that layer is a real button. */
.feature, .game-row { position: relative; }
.stretch { color: inherit; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 2px solid var(--data-pos); outline-offset: 2px; }
.feature:focus-within .details-chip { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ------------------------------------------------------------ follow ---- */
.follow { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
          padding: 5px 11px; border-radius: 99px; border: 1px solid var(--border-strong);
          background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px;
          font-weight: 600; cursor: pointer; }
.follow[hidden] { display: none; }
.follow:hover { border-color: var(--ink-3); color: var(--ink); }
.follow[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.follow-icon { font-size: 13px; line-height: 1; }
/* In a list row, the star alone: the row has no room for a word. */
.follow.compact { padding: 5px 8px; }
.follow.compact .follow-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
                               clip: rect(0 0 0 0); white-space: nowrap; }
.feature-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex: none; }
.feature-actions .details-chip { margin-top: 0; }
.hero-follow { display: flex; justify-content: flex-end; margin-top: 10px; }

/* -------------------------------------------------------- scoreboard ---- */
.scoreboard { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.score-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
             color: var(--ink-3); margin-bottom: 10px; }
.score-status { font-weight: 600; color: var(--ink-2); }
.score-card.is-live .score-status { color: var(--data-pos); }
.score-team { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 16px; font-weight: 600; }
.score-team + .score-team { border-top: 1px solid var(--border); }
.score-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-pts { flex: none; font-size: 22px; font-weight: 700; letter-spacing: -.02em;
             font-variant-numeric: tabular-nums; }
.score-card.is-final .score-team:not(.won) { color: var(--ink-3); }
.score-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.score-actions .details-chip { margin-top: 0; text-decoration: none; }
.score-actions .follow { margin-left: auto; }
#scores-empty[hidden] { display: none; }

/* ---------------------------------------------------------- matchup ---- */
/* Each offense against the defense it faces: the left team's figure, the
   label, the right team's figure. Three columns hold on a phone. */
.mu-group { margin-top: 16px; }
.mu-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: baseline;
           padding-bottom: 6px; border-bottom: 1px solid var(--border-strong);
           font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mu-head .right { text-align: right; }
.mu-vs { color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.mu-sub { font-size: 12px; color: var(--ink-3); padding: 6px 0 0; }
.mu-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px;
          align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mu-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2);
          display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mu-val.right { justify-content: flex-end; text-align: right; }
.mu-val.win { color: var(--ink); font-weight: 750; }
.mu-rank { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.mu-rank.r-top { color: var(--data-pos); }
.mu-rank.r-low { color: var(--data-neg); }
.mu-stat { text-align: center; font-size: 13px; color: var(--ink-2); display: flex; align-items: center;
           justify-content: center; gap: 6px; flex-wrap: wrap; }
.mu-edge { display: inline-flex; align-items: center; }
.crest.tiny { width: 18px; height: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* On a phone the rank sits under its figure, so the label gets the width
   and a row stays one or two lines. */
@media (max-width: 560px) {
  .mu-row { grid-template-columns: minmax(0, .85fr) minmax(0, 2fr) minmax(0, .85fr); gap: 6px; padding: 7px 0; }
  .mu-val { flex-direction: column; align-items: flex-start; gap: 0; font-size: 14.5px; }
  .mu-val.right { align-items: flex-end; }
  .mu-rank { font-size: 11px; }
  .mu-stat { font-size: 12.5px; gap: 4px; }
  .mu-head { font-size: 11px; letter-spacing: .04em; }
}

/* ------------------------------------------------------------ owner ---- */

.owner-form { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 10px; }
.owner-form[hidden] { display: none; }
.owner-form label { font-size: 13px; font-weight: 620; color: var(--ink-2); }
.owner-form input[type="password"] {
  flex: 1 1 220px; min-height: 42px; padding: 0 12px; font-size: 16px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.owner-table td { text-align: right; padding: 6px 0 6px 10px; border-top: 1px solid var(--border); }
.owner-table td:first-child, .owner-table td:nth-child(2),
.owner-table th:nth-child(2) { text-align: left; }
.owner-table td:nth-child(2) { padding-left: 10px; }
.owner-table td:first-child { white-space: normal; }    /* long names wrap rather than push the numbers off */
#owner-out select { margin: 6px 0 10px; min-height: 36px; font-size: 15px; }
.owner-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.owner-head .note { margin: 0; }
.owner-tabs {
  display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; border-bottom: 1px solid var(--border);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.owner-tabs::-webkit-scrollbar { display: none; }
.owner-tab {
  flex: 0 0 auto; min-height: 42px; padding: 0 14px; margin-bottom: -1px; font: inherit; font-size: 14px;
  font-weight: 620; color: var(--ink-3); background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.owner-tab:hover { color: var(--ink-2); }
.owner-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.owner-tab:focus-visible { outline: 2px solid var(--data-pos); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.owner-panel[hidden] { display: none; }
.owner-notes summary { cursor: pointer; font-size: 13px; font-weight: 620; color: var(--ink-2); }
.owner-fold summary { cursor: pointer; font-size: 14px; font-weight: 620; color: var(--ink-2); padding: 4px 0; }
.owner-sub { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.owner-table td { vertical-align: top; }
/* A stacked table on a phone: the first cell across the top, the rest two to a line, each under its column's name. */
@media (max-width: 640px) {
  table.owner-table.owner-stack thead { display: none; }
  table.owner-table.owner-stack tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--border);
  }
  table.owner-table.owner-stack td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.owner-table.owner-stack td:first-child { grid-column: 1 / -1; font-weight: 620; }
  table.owner-table.owner-stack td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: 1px; font-size: 10.5px; font-weight: 650;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4);
  }
}
.owner-notes p { margin: 8px 0 0; }

/* -------------------------------------------------------------- dfs ---- */

.dfs-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.dfs-chip {
  min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2);
}
.dfs-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dfs-table td, .dfs-record td { text-align: right; padding: 6px 0 6px 12px; border-top: 1px solid var(--border);
  white-space: nowrap; }
.dfs-table td:first-child, .dfs-record td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.dfs-table td:nth-child(2), .dfs-table td:nth-child(3), .dfs-table td:nth-child(4) { text-align: left; }
.dfs-table th:nth-child(2), .dfs-table th:nth-child(3), .dfs-table th:nth-child(4) { text-align: left;
  padding-left: 12px; }
.dfs-table th, .dfs-record th { padding-left: 12px; }
.dfs-table tr[hidden] { display: none; }
.dfs-status { font-size: 11px; font-weight: 650; color: var(--serious); margin-left: 4px; }
.dfs-more summary { cursor: pointer; font-weight: 620; color: var(--ink-2); }
.owner-slate { margin: 10px 0 4px; min-height: 40px; font-size: 15px; max-width: 100%; }