/* =====================================================================
   Components: every page is built from these classes and the tokens in
   tokens.css. Pages carry no <style> blocks and no style="" attributes;
   if a page needs something new, it's added here for every page.

   Shell        .app  > aside.nav  +  main.main
   Page         .page-head (title, sub, actions)  .toolbar (filters)  .field
   Containers   .card  details.section (collapsible)  .grid-2 / .grid-3  .stack
   Navigation   .tabs > .tab      .stepper > .step
   Tables       table.data (sticky header, th[data-sort], td.num, tr.detail)
   Labels       .chip (muted source/tier)  .chip.pos|warn|neg|draft  .meta (muted label)
                .conf (confidence bar)  .gap.pos|neg (value gap)
   States       .empty (what data would fill it)  .note  .rule-violation (the ONLY red text)
   Hero         .hero (Program Fit decision)
   Print        @media print + .print-header
   ===================================================================== */

/* Film assist: a value the assist suggested and the grader hasn't confirmed yet */
.suggested { outline: 1px dashed var(--warn); outline-offset: 1px; }

.value-curve { width: 100%; max-width: 520px; display: block; }
.value-curve .lbl { font: 12px var(--font-ui, inherit); fill: var(--ink-2); }
.value-curve .val { font: 12px var(--font-num); fill: var(--ink); }
.value-curve .bar.market { fill: var(--muted); }
.value-curve .bar.team { fill: var(--accent); }
.value-curve .bar.football { fill: var(--warn); }
.value-curve .range { stroke: var(--ink); stroke-width: 1.5; }
.disclaimer { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line);
              padding-top: var(--sp-1); }
.events .event-tag { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; padding: 4px 0;
                     border-bottom: 1px solid var(--line); }
.trend { width: 100%; max-width: 520px; display: block; }
.trend .lbl { font: 12px var(--font-ui, inherit); fill: var(--ink-2); }
.trend .val, .trend .tick { font: 11px var(--font-num); fill: var(--muted); }
.trend .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.trend .pt { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.ask-chart { margin: var(--sp-1) 0; } .ask-chart h3 { font-size: var(--fs-sm); margin: 0 0 4px; }
.followup { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.followup button { font: inherit; }
.opp-map { width: 100%; max-width: 640px; display: block; }
.opp-map .axis { stroke: var(--line); }
.opp-map .mid { stroke: var(--muted); stroke-dasharray: 4 4; }
.opp-map .diag { stroke: var(--ink-2); stroke-width: 1; opacity: .5; }
.opp-map .tick, .opp-map .axis-label { font: 11px var(--font-num); fill: var(--muted); }
.opp-map .quad { font: 600 12px var(--font-ui, inherit); fill: var(--ink-2); }
.opp-map .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.opp-map .dot.sleepers { fill: var(--pos, var(--accent)); }
.opp-map .dot.overpay-risk { fill: var(--warn); }
.opp-map .dot.pass { fill: var(--muted); }
.opp-map a:hover .dot { stroke: var(--ink); }
.drag-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); max-height: 220px; overflow: auto; }
.drag-item { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: var(--surface-2); cursor: grab; }
.drag-item:active, .drag-handle:active { cursor: grabbing; }
.drag-handle { cursor: grab; color: var(--muted); margin-right: 4px; user-select: none; }
.drop-zone { border: 2px dashed var(--line); border-radius: 8px; padding: var(--sp-2); text-align: center; color: var(--muted); }
.drop-zone.over { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dna-q { padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); }
.dna-q .chips { margin-top: 4px; }
.nav .nav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-1); }
.nav .nav-head { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--nav-muted); padding: 4px var(--sp-1) 0; }
.nav .nav-tools summary { cursor: pointer; color: var(--muted); padding: 6px var(--sp-1); font-size: var(--fs-sm); }
.nav .nav-tools a { padding-left: var(--sp-2); }
@media (max-width: 860px) { .nav .nav-group, .nav .nav-tools { flex-direction: row; display: flex; } .nav .nav-head { display: none; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: var(--fs-md)/var(--lh) var(--font-ui);
       -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-bold); }
h1 { font: var(--fw-bold) var(--fs-xl)/1.1 var(--font-fig); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-1); }
.prose, .prose p, .k-context, .empty p, .callout { max-width: var(--measure); }
kbd { font: var(--fs-xs) var(--font-code); border: 1px solid var(--line-strong); border-bottom-width: 2px;
      border-radius: var(--radius-sm); padding: 0 var(--sp-half); background: var(--surface-2); color: var(--ink-2); }
code { font: var(--fs-sm) var(--font-code); }
.num, .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.muted, .meta { color: var(--muted); }
.meta { font-size: var(--fs-xs); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.wrap { white-space: normal; }
.pre-line { white-space: pre-line; }   /* keeps a message's line breaks (a refused report lists each name) */
.spacer { flex: 1; }

/* --- shell ------------------------------------------------------------------ */
.app { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); min-height: 100vh; }
.nav { background: var(--nav-bg); color: var(--nav-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto;
       display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1); }
.nav .brand { font-weight: var(--fw-bold); color: var(--nav-active); padding: 0 var(--sp-1); }
.nav .brand .meta { color: var(--nav-muted); font-weight: normal; display: block; }
.nav .context { background: var(--nav-active-bg); border-radius: var(--radius); padding: var(--sp-1); display: grid;
                gap: var(--sp-half); }
.nav .context label { color: var(--nav-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.nav input, .nav select { width: 100%; background: var(--nav-bg); color: var(--nav-active); border-color: var(--nav-active-bg); }
.nav .links { display: flex; flex-direction: column; gap: 2px; }
.nav .links a { color: var(--nav-ink); padding: 6px var(--sp-1); border-radius: var(--radius-sm); display: flex;
                justify-content: space-between; align-items: center; text-decoration: none; }
.nav .links a:hover { background: var(--nav-active-bg); }
.nav .links a.active { background: var(--nav-active-bg); color: var(--nav-active); box-shadow: inset 2px 0 0 var(--accent); }
.nav .foot { margin-top: auto; color: var(--nav-muted); font-size: var(--fs-xs); padding: 0 var(--sp-1); display: grid;
             gap: var(--sp-half); }
.nav .foot button { background: transparent; color: var(--nav-ink); border-color: var(--nav-active-bg); }
.main { min-width: 0; padding: var(--sp-3) var(--sp-3) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; }
  /* phones: the nav is one scrolling strip of section links, so a page's own content (the Dashboard's hero
     tiles) comes first; search and Ask are on the pages themselves */
  .nav { padding: 6px var(--sp-1); gap: 0; }
  .app .nav .brand, .app .nav .search, .app .nav .ask-box, .app .nav .foot { display: none; }
  .nav .links { display: flex; flex-direction: row; gap: 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .nav .links a { flex: 0 0 auto; }
  .main { padding: var(--sp-2); }
}

/* --- search (global and pickers) ---------------------------------------------- */
.search { position: relative; }
.search .results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; min-width: 280px; z-index: 30;
                   background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
                   box-shadow: var(--overlay-shadow); max-height: 360px; overflow: auto; }
.search .results .item { padding: 6px var(--sp-1); cursor: pointer; display: flex; justify-content: space-between;
                         gap: var(--sp-1); }
.search .results .item:hover, .search .results .item.on { background: var(--accent-soft); }
.search .results .group { padding: var(--sp-half) var(--sp-1); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* --- page --------------------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
.page-head .titles { display: grid; gap: 2px; }
.page-head .sub { color: var(--muted); max-width: var(--measure); }
.page-head .actions { margin-left: auto; display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-1) var(--sp-2); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-half); min-width: 0; }
.field > select, .field > input, .field > textarea { max-width: 100%; }   /* a long option (a game's opponents) never widens the page */
.field > span { font-size: var(--fs-xs); color: var(--ink-2); font-weight: var(--fw-medium); }
.field.inline { display: flex; align-items: center; gap: var(--sp-1); }
.field.inline > span { font-size: var(--fs-md); font-weight: normal; }
input, select, textarea, button { font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 5px var(--sp-1); min-height: 30px; }
input[type="number"], input.num { font-family: var(--font-num); width: 96px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; padding: 0; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { width: 100%; min-height: 64px; }
input.wide { width: 100%; }
.btn, button { cursor: pointer; background: var(--surface); }
a.btn { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
        padding: 5px var(--sp-1); min-height: 30px; text-decoration: none; color: var(--ink); }
.btn:hover, button:hover { background: var(--surface-2); }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
                               font-weight: var(--fw-medium); }
.btn.primary:hover, button.primary:hover { filter: brightness(1.05); }
.btn.ghost, button.ghost { background: transparent; border-color: transparent; color: var(--ink); text-decoration: underline;
                           text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
.btn-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; }

/* --- containers ----------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-2); }
.card > h2, .card > h3, .card-title { margin-bottom: var(--sp-1); font: var(--fw-bold) var(--fs-lg)/1.2 var(--font-fig); color: var(--ink); }
.card.flush { padding: 0; overflow: hidden; }
.stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--sp-2); }
.layout-side { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--sp-2);
                align-items: start; }
@media (max-width: 1100px) { .layout-side { grid-template-columns: minmax(0, 1fr); } }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-2); }
details.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
details.section > summary { cursor: pointer; list-style: none; padding: var(--sp-1) var(--sp-2); display: flex;
                            align-items: center; gap: var(--sp-1); font-weight: var(--fw-bold); }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: "▸"; color: var(--muted); width: 12px; }
details.section[open] > summary::before { content: "▾"; }
details.section > summary { flex-wrap: wrap; }   /* a long label drops to its own line on a phone (QA 2026-10-16) */
details.section > summary .meta { font-weight: normal; margin-left: auto; min-width: 0; overflow-wrap: anywhere; }
details.section > .body { padding: 0 var(--sp-2) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
details.section > .body > p, details.section > .body > ul, details.section > .body > ol { max-width: var(--measure); }
details.section[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-half) var(--sp-2); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.list { margin: 0; padding-left: var(--sp-2); }
.list li { margin: 2px 0; }

/* --- tabs and stepper --------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.tabs > .tab { flex: none; }   /* a phone scrolls the tab strip, never the page (QA 2026-10-16) */
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ink-2);
       padding: var(--sp-1) var(--sp-2); min-height: 0; }
.tab:hover { background: transparent; color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: var(--fw-medium); }
.stepper { display: flex; align-items: center; gap: var(--sp-1); }
.step { display: inline-flex; align-items: baseline; gap: var(--sp-half); padding: 2px 0; color: var(--muted);
        font-size: var(--fs-sm); cursor: pointer; text-decoration: none; }
.step .n { font: 700 var(--fs-md) var(--font-num); }
.step.on { color: var(--ink); font-weight: var(--fw-bold); }
.step.done { color: var(--ink-2); }
.stepper .sep { color: var(--faint); }

/* --- tables: the product ----------------------------------------------------------------- */
.table-wrap { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--line); border-radius: var(--radius);
              background: var(--surface); }
.table-wrap.short { max-height: 420px; }
.table-wrap.auto { max-height: none; }
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 6px var(--sp-1); border-bottom: 1px solid var(--line); text-align: left;
                               vertical-align: top; white-space: nowrap; }
table.data thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--ink-2);
                      font-weight: var(--fw-bold); font-size: var(--fs-xs); }
table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { font-family: var(--font-ui); }
table.data td.num { font-family: var(--font-num); font-size: var(--fs-md); }
table.data th[data-sort] { cursor: pointer; user-select: none; }
table.data th[data-sort]:hover { color: var(--ink); }
table.data th[aria-sort="ascending"]::after { content: " ▲"; color: var(--accent); }
table.data th[aria-sort="descending"]::after { content: " ▼"; color: var(--accent); }
table.data tbody tr:hover > td { background: var(--surface-2); }
table.data tbody tr.selected > td { background: var(--accent-soft); }
table.data tbody tr.clickable { cursor: pointer; }
table.data td.wrap { white-space: normal; min-width: 220px; }
table.data td .sub { display: block; color: var(--muted); font-size: var(--fs-xs); font-family: var(--font-ui); }
table.data td.num .sub { font-family: var(--font-num); }
table.data tr.detail > td { background: var(--surface-2); white-space: normal; padding: var(--sp-1) var(--sp-2) var(--sp-2); }
table.data tr.detail:hover > td { background: var(--surface-2); }
table.data .expander { border: 0; background: transparent; min-height: 0; padding: 0 var(--sp-half); color: var(--muted); }
table.data tfoot td { color: var(--muted); font-size: var(--fs-xs); }
table.data.compact th, table.data.compact td { padding: 3px var(--sp-1); }
.table-foot { color: var(--muted); font-size: var(--fs-xs); padding: var(--sp-1) 0 0; }

/* --- labels on numbers -------------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 999px; font-size: var(--fs-xs);
        line-height: 18px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
        white-space: nowrap; font-family: var(--font-ui); vertical-align: middle; }
.chip.pos { color: var(--pos); background: var(--pos-soft); border-color: transparent; }
.chip.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.chip.neg { color: var(--neg); background: var(--neg-soft); border-color: transparent; }
.chip.accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.chip.draft { color: var(--warn); background: transparent; border-style: dashed; border-color: var(--warn); }
.chip button { border: 0; background: transparent; min-height: 0; padding: 0; color: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-half); }
/* Phone width: a long chip (a weight source, a basis) wraps inside the screen instead of widening the page (QA 2026-10-22). */
@media (max-width: 600px) { .chip { white-space: normal; max-width: 100%; border-radius: 9px; } }
.label { color: var(--muted); font-size: var(--fs-xs); }
/* Confidence: a small three-segment bar, never a word. */
.conf { display: inline-flex; gap: 2px; vertical-align: middle; }
.conf i { width: 6px; height: 10px; border-radius: 1px; background: var(--line-strong); display: block; }
.conf[data-level="low"] i:nth-child(-n+1) { background: var(--neg); }
.conf[data-level="medium"] i:nth-child(-n+2) { background: var(--warn); }
.conf[data-level="high"] i { background: var(--pos); }
.gap.pos { color: var(--pos); }
.gap.neg { color: var(--neg); }
.delta.pos { color: var(--pos); }
.delta.neg { color: var(--neg); }
.bar { display: inline-block; vertical-align: middle; width: 80px; height: 6px; background: var(--surface-3);
       border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); }
/* Fill widths for .bar (pages can't use style=""): UI.w(fraction) picks the nearest class. */
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* --- states -------------------------------------------------------------------------------- */
.empty { padding: var(--sp-4) var(--sp-2); text-align: center; color: var(--muted); border: 1px dashed var(--line-strong);
         border-radius: var(--radius); background: var(--surface); }
.empty p { margin: 0 auto; }
.empty strong { display: block; color: var(--ink-2); font-weight: var(--fw-medium); margin-bottom: var(--sp-half); }
.note { color: var(--muted); font-size: var(--fs-sm); max-width: var(--measure); }
.status { min-height: 18px; font-size: var(--fs-sm); color: var(--muted); }
.status.error, .rule-violation { color: var(--neg); }
.rule-violation { border-left: 3px solid var(--neg); background: var(--neg-soft); padding: var(--sp-half) var(--sp-1);
                  font-size: var(--fs-sm); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.callout { border-left: 3px solid var(--line-strong); background: var(--surface-2); padding: var(--sp-1) var(--sp-2);
           border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); }
.callout.warn { border-left-color: var(--warn); }   /* attention without alarm: the text stays neutral */
.callout.neg { border-left-color: var(--neg); }     /* e.g. a must-have miss: a scheme rule the player fails */

/* --- hero (Program Fit) -------------------------------------------------------------------- */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3);
        display: grid; grid-template-columns: minmax(220px, auto) 1fr; gap: var(--sp-3); align-items: start; }
.hero .decision { font: 700 var(--fs-hero)/1 var(--font-fig); }
.hero .decision.pos { color: var(--pos); }
.hero .decision.warn { color: var(--warn); }
.hero .decision.neg { color: var(--neg); }
.hero .who { color: var(--muted); margin-top: var(--sp-1); }
.hero .reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-lg); }
.hero .reasons li { padding-left: var(--sp-2); position: relative; }
.hero .reasons li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--muted); }
.hero .figures { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                 gap: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
/* Figures: the jersey-numeral face; the label beneath carries the same weight (founder, 2026-10-22: the uncertainty
   labels get the same weight as the figures) */
.figure .value { font: 700 var(--fs-2xl)/1 var(--font-fig); font-variant-numeric: tabular-nums; color: var(--ink); }
.figure .label { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.figure .label .meta, .figure .label .chip { font-size: var(--fs-sm); color: var(--ink-2); }
.fig .v { font: 700 var(--fs-2xl)/1 var(--font-fig); font-variant-numeric: tabular-nums; color: var(--ink); }
.fig .l { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

/* --- grading tiles and keys ------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-1); }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-1); cursor: pointer;
        background: var(--surface); min-height: 56px; }
.tile.selected { outline: 2px solid var(--accent); outline-offset: -1px; }
.tile.scored { background: var(--accent-soft); }
.tile.flag { border-color: var(--warn); }
.tile.needs-note { border-style: dashed; border-color: var(--warn); }
.tile .top { display: flex; justify-content: space-between; gap: var(--sp-half); align-items: baseline; }
.tile .score { font: 700 var(--fs-lg) var(--font-num); }
.tile .others { font-size: var(--fs-xs); color: var(--muted); }
.keys { display: flex; flex-wrap: wrap; gap: var(--sp-half); }
.keys button { min-width: 52px; font-family: var(--font-num); }
.keys button.on, .toggle.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.toggle { border-radius: 999px; padding: 2px var(--sp-1); font-size: var(--fs-sm); min-height: 24px; }
/* Grading: the trait tiles with the assignment panel beside them (stacked on narrow screens) */
.tiles-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: var(--sp-2); align-items: start; }
@media (max-width: 1100px) { .tiles-side { grid-template-columns: minmax(0, 1fr); } }
.assignment { background: var(--surface-2); border-radius: var(--radius); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.assignment h3 { margin: 0 0 var(--sp-half); font-size: var(--fs-sm); color: var(--ink-2); }
.assignment .rule { border-top: 1px solid var(--line); padding-top: var(--sp-half); margin-top: var(--sp-half); }
.assignment .rule-steps { margin: var(--sp-half) 0; padding-left: 1.2em; }
.assignment .rule-steps li { margin-bottom: 2px; }
.anchors { background: var(--surface-2); border-radius: var(--radius); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.anchors b { display: inline-block; min-width: 28px; font-family: var(--font-num); }

/* --- Dashboard ------------------------------------------------------------------------------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-2); }
.dash-tile { border: 0; border-radius: var(--radius); background: var(--surface); padding: var(--sp-2);
             display: grid; gap: var(--sp-1); align-content: start; color: inherit; text-decoration: none; }
a.dash-tile:hover, .dash-tile a.more:hover { background: var(--surface-2); }
.dash-tile h2 { margin: 0; font: var(--fw-bold) var(--fs-lg)/1.2 var(--font-fig); color: var(--ink); }
.dash-tile .big { font: 700 var(--fs-xl) var(--font-num); font-variant-numeric: tabular-nums; }
.dash-tile ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.dash-tile li { display: flex; justify-content: space-between; gap: var(--sp-1); }
.dash-tile .more { font-size: var(--fs-sm); }
.dash-ask { margin-top: var(--sp-3); }
.dash-section { margin-top: var(--sp-3); }
.page-head .founder[hidden] { display: none; }
.page-head .founder { display: inline-grid; gap: 2px; margin-right: var(--sp-1); }
.dash-section > h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); }
.dash-section > .meta { margin: -4px 0 var(--sp-1); }
.dash-tile .asof { font-size: var(--fs-xs); color: var(--faint); }
.dash-tile .row { display: flex; justify-content: space-between; gap: var(--sp-1); font-variant-numeric: tabular-nums; }
.dash-tile .neg { color: var(--neg); } .dash-tile .pos { color: var(--pos); } .dash-tile .warn { color: var(--warn); }
.spark { width: 100%; height: 56px; display: block; }
.spark .room { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark .committed { fill: none; stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 3 3; }
.spark text { font: 10px var(--font-num); fill: var(--muted); }
.bars { display: grid; gap: 4px; }
.bars .bar { display: grid; grid-template-columns: 44px 1fr 92px; gap: 6px; align-items: center; font-size: var(--fs-sm); }
.bars .track { width: 100%; height: 12px; display: block; border-radius: 2px; }
.bars .track .bg { fill: var(--surface-2); }
.bars .track .fill { fill: var(--accent); } .bars .track .fill.over { fill: var(--warn); }
.bars .track .mark { fill: var(--ink); }
.bars .val { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.alerts { display: grid; gap: 6px; }
.alert { display: grid; grid-template-columns: 8px 1fr auto; gap: var(--sp-1); align-items: center; padding: 8px 0;
         border-bottom: 1px solid var(--line); }
.alert .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.alert.high .dot { background: var(--neg); } .alert.medium .dot { background: var(--warn); }
.alert .kind { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-2); margin-right: 6px; }
.alert button { font-size: var(--fs-xs); }
.insights { margin: 0; padding-left: var(--sp-2); display: grid; gap: 6px; }
.insights a { text-decoration: underline dotted; font-variant-numeric: tabular-nums; }

/* --- Product header (every page) ------------------------------------------------------------ */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: calc(-1 * var(--sp-3))
          calc(-1 * var(--sp-3)) 0; padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--line);
          background: var(--surface); position: sticky; top: 0; z-index: 20; }
.topbar .product { font-weight: var(--fw-bold); color: var(--ink); text-decoration: none; display: grid; line-height: 1.1; }
.topbar .product .meta { font-weight: normal; font-size: var(--fs-xs); }
.topbar .tb-program { display: flex; gap: var(--sp-1); align-items: center; flex: 1 1 320px; min-width: 0; }
.topbar .tb-program .search { flex: 1 1 200px; min-width: 0; }
.topbar .tb-program input, .topbar .tb-program select { width: 100%; }
.topbar #ctxSeason { width: 90px; flex: 0 0 90px; }
.topbar .tb-window { flex: 0 1 auto; white-space: nowrap; font-size: var(--fs-xs); }   /* the pin's window, in words */
.topbar #ctxFounder { flex: 0 1 200px; }
.topbar .tb-status { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm);
                     font-variant-numeric: tabular-nums; margin-left: auto; }
.topbar .tb-alerts { text-decoration: none; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px;
                     padding: 2px 10px; }
.topbar .tb-alerts b { font-family: var(--font-num); }
.topbar .tb-alerts.has { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.topbar .tb-user button { padding: 0 var(--sp-1); min-height: 0; }
.login { max-width: 380px; margin: 10vh auto; padding: var(--sp-3); }
.login form { display: grid; gap: var(--sp-2); }
.login [hidden] { display: none; }
.login label { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--ink-2); }
.login .secret { font-family: var(--font-code); word-break: break-all; user-select: all; }
.login .err { color: var(--neg); min-height: 1.2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 860px) { .topbar { margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0; padding: var(--sp-1) var(--sp-2); }
                            .topbar .tb-status { margin-left: 0; flex-wrap: wrap; } }

/* --- Dashboard: rows and the card ------------------------------------------------------------- */
.dash-row { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.dash-row > h2 { grid-column: 1 / -1; margin: var(--sp-2) 0 0; font: var(--fw-bold) var(--fs-xl)/1.1 var(--font-fig); color: var(--ink); }
.dash-row.lead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row.two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.dash-row.three { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.target-bar { display: block; width: 100%; height: 8px; margin: 6px 0 4px; border: 0; border-radius: 4px;
  border-right: 2px solid var(--ink); background: var(--line); appearance: none; -webkit-appearance: none; }
.target-bar::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
.target-bar::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.target-bar::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.demo-banner { margin: 0 0 var(--sp-2); padding: 6px 12px; border: 1px solid var(--warn); border-radius: 6px;
  background: var(--warn-soft); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.fig-range { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); }
.kpi { border: 0; border-radius: var(--radius); background: var(--surface); padding: var(--sp-2);
       display: grid; gap: 6px; align-content: start; min-width: 0; overflow-wrap: anywhere; }
.kpi.hero-card { padding: var(--sp-3) var(--sp-2); }
.kpi .k-title { font-size: var(--fs-md); color: var(--ink-2); margin: 0; font-weight: var(--fw-bold); }
.kpi .k-figure { font: 700 var(--fs-xl)/1.1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi.hero-card .k-figure { font-size: var(--fs-2xl); }
.kpi .k-figure.neg { color: var(--neg); } .kpi .k-figure.warn { color: var(--warn); }
.kpi .k-delta { font: var(--fs-sm) var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); }
.kpi .k-delta.up { color: var(--pos); } .kpi .k-delta.down { color: var(--neg); }
.kpi .k-context { font-size: var(--fs-sm); color: var(--ink-2); }
.kpi .k-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--sp-1); font-size: var(--fs-xs);
               color: var(--faint); border-top: 1px solid var(--line); padding-top: 6px; margin-top: auto; }
.kpi .k-foot a { margin-left: auto; }
.kpi .k-foot a { white-space: nowrap; }
.kpi .k-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.kpi .k-body li { display: flex; justify-content: space-between; gap: var(--sp-1); font-size: var(--fs-sm); }
.kpi .k-body ol.insights { list-style: decimal; padding-left: var(--sp-2); display: grid; gap: 6px; }
.kpi .k-body ol.insights li { display: list-item; font-size: var(--fs-md); }
.kpi .k-body li.stack { display: grid; gap: 0; }
.kpi .k-empty { font-size: var(--fs-sm); color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
                padding: 6px 8px; }
.kpi.wide { grid-column: span 2; }
.spark { width: 100%; height: 40px; display: block; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark .line2 { fill: none; stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--accent-soft); stroke: none; }
.spark .dot { fill: var(--accent); }
.spark-none { font-size: var(--fs-xs); color: var(--faint); height: 40px; display: flex; align-items: flex-end; }

/* first load: skeleton tiles with real progress */
.skeleton .k-figure, .skeleton .k-line { background: var(--surface-2); border-radius: var(--radius-sm); color: transparent; }
.skeleton .k-figure { height: 26px; width: 60%; }
.skeleton .k-line { height: 10px; width: 90%; }
.skeleton .k-line.short { width: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton .k-figure, .skeleton .k-line { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
}
.load-progress { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }

@media (min-width: 1700px) { .dash-row.lead { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .dash-row.lead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .dash-row.two, .dash-row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .dash-row.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {   /* phones: one column; the hero tiles come first (they're first in the page) */
  .dash-row.lead, .dash-row.two, .dash-row.three, .dash-row.four, .dash-row.five { grid-template-columns: 1fr; }
  .kpi.wide { grid-column: auto; }
  .kpi.hero-card .k-figure { font-size: 24px; }
}

/* --- Ask: the nav box and the conversation page --------------------------------------------- */
.nav .ask-box { display: grid; gap: 4px; }
.nav .ask-box label { color: var(--nav-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.ask-form { display: grid; gap: var(--sp-1); }
.ask-form textarea { width: 100%; resize: vertical; font: inherit; }
.convo { display: grid; gap: var(--sp-2); }
.turn { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--sp-2);
        display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); min-width: 0; }
.convo, .turn .a { min-width: 0; }            /* a wide table scrolls inside the answer, not past the page (QA 2026-10-20) */
.turn .a h4 { margin: var(--sp-1) 0 4px; font-size: var(--fs-sm); }
.turn .q { font-weight: var(--fw-bold); }
.turn .a p { margin: 0 0 var(--sp-1); } .turn .a ul { margin: 0 0 var(--sp-1) var(--sp-2); padding: 0; }
.turn .a a.src { text-decoration: underline dotted; font-variant-numeric: tabular-nums; }
.toolcalls { margin: 0; padding-left: var(--sp-2); font-size: var(--fs-sm); }
.list a { display: block; padding: 3px 0; }
.list a.active { font-weight: var(--fw-bold); text-decoration-color: currentColor; }
.list a .meta { display: block; }

/* --- print: scouting report and need brief -------------------------------------------------- */
.print-header { display: none; }
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f3f4f6; --ink: #000; --ink-2: #222; --muted: #555; --line: #ccc; }
  body { background: #fff; font-size: 11px; }
  .app { display: block; }
  .nav, .toolbar, .tabs, .stepper, .no-print, .page-head .actions, button { display: none !important; }
  .main { padding: 0; }
  .print-header { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-2); border-bottom: 2px solid #000;
                  padding-bottom: var(--sp-1); margin-bottom: var(--sp-2); }
  .print-header .title { font-size: 16px; font-weight: 700; }
  .card, details.section { border: 0; padding: 0; break-inside: avoid; }
  .topbar, .skeleton, .dash-ask, .turf { display: none !important; }
  .kpi { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .kpi.hero-card { border-top: 2px solid #000; }
  .spark .line { stroke: #000; } .spark .line2 { stroke: #777; } .spark .area { fill: #eee; } .spark .dot { fill: #000; }
  .dash-row.lead { grid-template-columns: repeat(3, 1fr); }
  .dash-row.two, .dash-row.three, .dash-row.four { grid-template-columns: repeat(2, 1fr); }
  details.section > summary::before { content: ""; }
  .table-wrap { max-height: none; overflow: visible; border: 0; }
  table.data thead th { position: static; }
  a { color: #000; }
  @page { margin: 14mm; }
}

/* =====================================================================
   The film room (founder, 2026-10-22; second edition, docs/design/token-plan.md). Football in the structure, never as
   decoration: no footballs, helmets, mascots or photos. The field is the one memorable element and the only place
   the pylon accent appears; everything else is quiet.
   ===================================================================== */

/* The field behind the Dashboard, Program Fit and the Title page (UI.turf): goal line to goal line across the content,
   a yard line every five yards, and the goal lines at its two edges, the only pylon-orange in the app. */
body[data-page="dashboard"] .main, body[data-page="programs"] .main, body[data-page="title"] .main { position: relative; isolation: isolate; }
.turf { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-image: repeating-linear-gradient(90deg, var(--turf-line) 0 1px, transparent 1px calc(100% / 20)); }
.turf .goal { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--pylon); opacity: .85; }
.turf .goal.l { left: 0; } .turf .goal.r { right: 0; }

/* The Opportunity Map drawn as the same field: yard lines, numerals, goal lines and pylons, end zones at each end */
.opp-map .field-bg { fill: var(--surface); }
.opp-map .yard { stroke: var(--turf-line); stroke-width: 1; }
.opp-map .yd { font: 700 12px var(--font-fig); fill: var(--turf-num); }
.opp-map .goal { stroke: var(--pylon); stroke-width: 1.5; }
.opp-map .pylon { fill: var(--pylon); }
.opp-map .endzone { fill: var(--surface-2); }

/* Formation glyphs: the icons for scheme and role (offense circles, defense crosses) */
.glyph { display: inline-block; vertical-align: -3px; width: 38px; height: 16px; margin-right: 6px; color: var(--ink-2); }
.toggle.on .glyph, .keys button.on .glyph { color: currentColor; }
.glyph .o { fill: none; stroke: currentColor; stroke-width: 1.4; }
.glyph .x { stroke: currentColor; stroke-width: 1.4; }
.glyph .los { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 2; }

/* Position tiles as a depth chart: defense above the line of scrimmage, offense below, in formation. The bottom edge
   is the tile's standing against the title standard (the band colors). */
.depth-chart { display: grid; gap: var(--sp-1); }
.depth-chart .dc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); }
.depth-chart .los { border-top: 1px dashed var(--line-strong); margin: 2px 0; }
.depth-chart .pos { background: var(--surface); border-radius: var(--radius-sm); padding: 6px 10px; width: 150px;
                    max-width: 100%; min-width: 0; }
.depth-chart .pos .g { font: 700 var(--fs-lg)/1 var(--font-fig); }
.depth-chart .pos .who { font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; margin-top: 2px; }
.depth-chart .pos.thin { outline: 1px dashed var(--warn); outline-offset: -1px; }
.depth-chart .pos.below { box-shadow: inset 0 -3px 0 var(--neg); }
.depth-chart .pos.close { box-shadow: inset 0 -3px 0 var(--warn); }
.depth-chart .pos.at { box-shadow: inset 0 -3px 0 var(--pos); }

/* Clips framed like a coaches' film viewer: a black frame, and the play clock and down marker as the strip */
.film-frame { background: var(--film-bg); border-radius: var(--radius-sm); overflow: hidden; }
.film-frame .strip { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; padding: 6px 10px;
                     background: var(--film-strip); color: var(--film-ink); font: 600 var(--fs-md) var(--font-fig);
                     font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--film-line); }
.film-frame .body { padding: var(--sp-1) 10px; background: var(--surface); }

/* Motion only in response to an action, and none at all when the viewer asks for less */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Column legends: what each column on a board means, as a definition list */
.legend { margin: 0; display: grid; gap: 2px var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
          font-size: var(--fs-sm); color: var(--muted); }
.legend > div { display: flex; gap: var(--sp-1); min-width: 0; }
.legend dt { flex: 0 0 auto; color: var(--ink-2); font-weight: var(--fw-medium); }
.legend dd { margin: 0; min-width: 0; }
.list a { text-decoration: none; }
.list a:hover { text-decoration: underline; }