/* Archetypes admin console. Tokens are the design handoff's (`design/Archetypes Admin Design Reference
   Handoff/tokens.css`, "values are authoritative") with ONE deliberate change: the three families are the
   app's own — Archivo (display), Albert Sans (body), JetBrains Mono (data) — per Mike, 2026-09-26.
   ⛔ The CSP is `default-src 'self'`: no inline styles, so every visual lives here. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo_wdth80.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/fonts/albert_sans_variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains_mono_variable.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

:root {
  --font-display: "Archivo", sans-serif;
  --font-body: "Albert Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --canvas: #FAF7F0; --panel: #FFFFFF; --inset: #FAF7F0; --track: #F1EFE8;
  --hairline: #E6E4DD; --hairline-strong: #D9D6CC;
  --ink: #191914; --ink-2: #57574F; --ink-3: #6E6E66;

  --gold: #B8863B; --gold-light: #E9C177; --gold-dark: #8A6224;
  --gold-link: #96682C; --gold-link-hover: #6B4423; --on-gold: #2C1B0E;
  --grad-gold: linear-gradient(135deg, #B8863B 0%, #E9C177 100%);
  --grad-pipeline: linear-gradient(90deg, #1F5C2E, #3E7A2E);

  --pos-bg: #E4F2E7; --pos-ink: #0E5E2E;
  --warn-bg: #FBEBD8; --warn-ink: #7A3F06;
  --neg-bg: #FAE6E3; --neg-ink: #8C332C;
  --delta-good: #12793B; --delta-bad: #A5560A;
  --dot-ok: #23C95B; --dot-warn: #FF9326;

  /* tier ramp — LOCKED, engine-semantic. fill = dots/bars, text = labels on white */
  --tier-lock: #08DD57; --tier-lock-text: #067F33;
  --tier-strong: #23C95B; --tier-strong-text: #12793B;
  --tier-favorable: #5DBE6A; --tier-favorable-text: #2E7D39;
  --tier-lean: #FF9326; --tier-lean-text: #A5560A;
  --tier-tossup: #79818A; --tier-tossup-text: #5B636B;

  --r-panel: 12px; --r-tile: 10px; --r-track: 2px; --r-pill: 999px;
  --page-pad: clamp(18px, 2.4vw, 30px); --gap: 20px;
  --slant: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

/* ⛔ Author `display` rules (#browse grid, .tabs flex) beat the UA's [hidden] rule, so without this a
   signed-out visitor saw the signed-in panels — found by rendering, 2026-09-25. */
[hidden] { display: none !important; }

body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 14px/1.5 var(--font-body);
       -webkit-font-smoothing: antialiased; }
a { color: var(--gold-link); text-decoration: none; } a:hover { color: var(--gold-link-hover); }
button { font: inherit; color: inherit; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.label { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.meta, .history, .grounding { color: var(--ink-2); font: 400 10px/1.5 var(--font-mono); letter-spacing: .06em; }

/* ── header ─────────────────────────────────────────────────────────────────────────────── */
header.app { position: sticky; top: 0; z-index: 10; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
       padding: 14px var(--page-pad) 8px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { display: block; flex: none; width: 26px; height: 26px; }
.wordmark { font: 700 15px/1 var(--font-display); letter-spacing: .22em; color: var(--gold); margin: 0; }
.console { font: 500 9px/1 var(--font-mono); letter-spacing: .16em; color: var(--ink-3); margin-top: 4px; }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--hairline-strong);
        border-radius: var(--r-pill); background: var(--panel); font: 500 9.5px/1 var(--font-mono); letter-spacing: .12em;
        white-space: nowrap; }
.chip:empty { display: none; }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--canvas);
          display: grid; place-items: center; font: 600 10px/1 var(--font-mono); letter-spacing: .08em; }
nav.sections { display: flex; gap: 26px; padding: 0 var(--page-pad); }
nav.sections button { background: none; border: 0; padding: 8px 0 10px; cursor: pointer; font: 400 14px/1 var(--font-body);
                      color: var(--ink-2); border-bottom: 2px solid transparent; }
nav.sections button[aria-current="page"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--gold); }

/* ── page ───────────────────────────────────────────────────────────────────────────────── */
main { padding: var(--page-pad); display: flex; flex-direction: column; gap: var(--gap); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font: 600 28px/1.06 var(--font-display); margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; }
select { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; padding: 8px 10px; border-radius: var(--r-pill);
         border: 1px solid var(--hairline-strong); background: var(--panel); color: var(--ink); }

.panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-panel); overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.panel-head h2 { font: 600 17px/1.2 var(--font-display); margin: 0; }
.panel-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); }
.panel-body { padding: 0 18px 16px; }
.panel-foot { border-top: 1px solid var(--hairline); padding: 12px 18px; font-size: 12px; color: var(--ink-2); background: var(--inset); }
.empty { padding: 14px 18px 18px; color: var(--ink-3); font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: 16px 18px; }
.kpi .value { font: 600 30px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; margin: 8px 0 4px; }
.kpi .context { font-size: 12.5px; color: var(--ink-2); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); align-items: start; }

/* The Overview stacks its blocks with the page gap — without this they touch (seen in the T8 render). */
#overview { display: flex; flex-direction: column; gap: var(--gap); }

/* library table */
table { width: 100%; border-collapse: collapse; }
thead th { background: var(--inset); text-align: left; padding: 9px 18px; border-top: 1px solid var(--hairline);
           border-bottom: 1px solid var(--hairline); font: 500 9px/1 var(--font-mono); letter-spacing: .16em;
           text-transform: uppercase; color: var(--ink-3); }
tbody td { padding: 12px 18px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; } tbody tr.clickable:hover { background: var(--inset); }
.title { font-size: 14px; } .sub { font: 400 9.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
table.library th:nth-child(3), table.library th:nth-child(4) { text-align: right; }
td.numcell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
td.mass { font-weight: 600; }

/* pills, dots, tiers — classes keyed on the wire's TierKey enum: lock · strong · fav · lean · toss.
   `toss` is the default look, so it needs no rule of its own. */
.pill, .badge { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
                font: 600 8.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pill-live, .badge-live { background: var(--pos-bg); color: var(--pos-ink); }
.pill-flagged, .badge-superseded { background: var(--warn-bg); color: var(--warn-ink); }
.pill-draft, .badge-draft { background: var(--track); color: var(--ink-2); }
.pill-failed { background: var(--neg-bg); color: var(--neg-ink); }
.badge-superseded { text-decoration: line-through; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tier-tossup); margin-right: 8px; vertical-align: middle; }
.tier { font: 600 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--tier-tossup-text); }
.tier-lock .dot { background: var(--tier-lock); } .tier-lock { color: var(--tier-lock-text); }
.tier-strong .dot { background: var(--tier-strong); } .tier-strong { color: var(--tier-strong-text); }
.tier-fav .dot { background: var(--tier-favorable); } .tier-fav { color: var(--tier-favorable-text); }
.tier-lean .dot { background: var(--tier-lean); } .tier-lean { color: var(--tier-lean-text); }
.filters { display: flex; gap: 6px; }
.filters button { border: 1px solid var(--hairline-strong); background: var(--panel); border-radius: var(--r-pill);
                  padding: 7px 14px; font: 600 9px/1 var(--font-mono); letter-spacing: .12em; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }

/* generation + audit lists */
.track { height: 8px; background: var(--track); border-radius: var(--r-track); overflow: hidden; margin: 6px 0 12px; }
.fill { height: 100%; background: var(--grad-pipeline); clip-path: var(--slant); width: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--inset); border: 1px solid var(--hairline); border-radius: var(--r-tile); padding: 12px 14px; }
.tile .num { font-size: 18px; font-weight: 500; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--hairline); }
.rows li .grow { flex: 1; min-width: 0; }
.rows li .time { font: 400 10px/1 var(--font-mono); color: var(--ink-3); width: 44px; flex: none; }
.review { border: 1px solid var(--hairline); border-radius: var(--r-tile); padding: 11px 14px; margin: 8px 0 0;
          display: flex; align-items: center; gap: 12px; }
.review .grow { flex: 1; min-width: 0; } .review .why { font: 500 9.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--warn-ink); }
.ev-publish { color: var(--pos-ink); } .ev-warn { color: var(--warn-ink); }

/* buttons */
.btn, .actions button, .history button, #email-form button, #code-form button, .tabs button {
  border: 1px solid var(--hairline-strong); background: var(--panel); border-radius: var(--r-pill); padding: 8px 14px;
  font: 600 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
/* `button.btn-gold` (0,1,1) ties `.actions button` and wins by coming later — `.btn-gold` alone (0,1,0)
   lost inside .actions, so Publish and Generate rendered white (seen in the T8 render). */
.btn-gold, button.btn-gold, #email-form button, #code-form button { background: var(--grad-gold); border-color: transparent; color: var(--on-gold); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, tr.clickable:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── sign-in ────────────────────────────────────────────────────────────────────────────── */
#signin { max-width: 380px; margin: 8vh auto 0; background: var(--panel); border: 1px solid var(--hairline);
          border-radius: var(--r-panel); padding: 26px; }
#signin h1 { font: 600 24px/1.1 var(--font-display); margin: 0 0 4px; }
#signin form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
#signin label { display: flex; flex-direction: column; gap: 6px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em;
                text-transform: uppercase; color: var(--ink-3); }
input[type=email], input[type=text], input:not([type]), #code, textarea {
  font: 400 14px/1.4 var(--font-body); color: var(--ink); background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-tile); padding: 10px 12px; box-sizing: border-box; width: 100%; }
#code { font-family: var(--font-mono); letter-spacing: .08em; }
#signin-msg { font-size: 12.5px; color: var(--ink-2); margin: 12px 0 0; }

/* ── scripts (browse) ───────────────────────────────────────────────────────────────────── */
#browse { display: grid; grid-template-columns: 180px 210px minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { #browse { grid-template-columns: minmax(0, 1fr); } }
#weeks, #games { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: 8px; }
#weeks button, #games button { display: block; width: 100%; text-align: left; margin: 0; padding: 9px 10px; border: 0;
  border-radius: 8px; background: none; cursor: pointer; font: 400 13.5px/1.2 var(--font-body); color: var(--ink); }
#weeks button { font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
#weeks button:hover, #games button:hover { background: var(--inset); }
#weeks button[aria-current="true"], #games button[aria-current="true"] { background: var(--inset); box-shadow: inset 2px 0 0 var(--gold); }
#weeks:empty::before, #games:empty::before { content: "Pick a week"; display: block; padding: 9px 10px;
  font: 500 9.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
#weeks:empty::before { content: "No weeks"; }
.tabs button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
#script { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: 18px 20px; min-width: 0; }
#script:empty { display: none; }
#script h2 { font: 600 22px/1.15 var(--font-display); margin: 0 0 12px; }
#script h3 { font: 600 16px/1.2 var(--font-display); margin: 18px 0 8px; }
#script h4 { font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.narrative { background: var(--inset); border: 1px solid var(--hairline); border-radius: var(--r-tile); padding: 14px 16px; margin: 12px 0; }
.narrative h3 { margin-top: 0; }
.narrative dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.narrative dt { font: 500 9.5px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
dd { margin: 0; overflow-wrap: anywhere; font: 400 12px/1.5 var(--font-mono); }
.field p { white-space: pre-wrap; margin: 0; line-height: 1.6; }
.violation, .overclaim { margin: 6px 0 0; padding-left: 18px; font: 500 10px/1.6 var(--font-mono); }
.violation li { color: var(--neg-ink); } .overclaim li { color: var(--warn-ink); }
.accuracy p { font: 400 10px/1.5 var(--font-mono); color: var(--ink-2); margin: 10px 0 0; }
.notice { color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-tile); padding: 8px 12px; font-size: 12.5px; }
.actions { display: flex; gap: 8px; margin: 10px 0; align-items: center; flex-wrap: wrap; }
.actions select { max-width: 280px; }
.fieldname { display: block; margin: 10px 0 6px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
textarea { min-height: 4.5em; }
textarea.prompt { min-height: 14em; font: 12px/1.45 var(--font-mono); }
.history { list-style: none; padding: 0; margin: 0; }
.history li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.history button { padding: 6px 12px; flex: none; }
.history li .label { flex: 1; min-width: 0; overflow-wrap: anywhere; text-transform: none; letter-spacing: .04em; color: var(--ink-2); font-size: 10px; }
.history input[type=checkbox] { accent-color: var(--gold); }
.diff { white-space: pre-wrap; margin: 0; line-height: 1.6; }
.del { background: var(--neg-bg); color: var(--neg-ink); text-decoration: line-through; }
.ins { background: var(--pos-bg); color: var(--pos-ink); }
.del + .ins { margin-left: 3px; }
.numbers-changed { font: 400 11px/1.6 var(--font-mono); }
pre.diff-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--inset); border: 1px solid var(--hairline);
                border-radius: var(--r-tile); padding: 10px 12px; font: 12px/1.45 var(--font-mono); }
pre.diff-text:empty { display: none; }

/* ── footer ─────────────────────────────────────────────────────────────────────────────── */
footer.app { margin: 0 var(--page-pad) var(--page-pad); background: var(--panel); border: 1px solid var(--hairline);
             border-radius: var(--r-panel); padding: 14px 18px; font: 400 10px/1.6 var(--font-mono); color: var(--ink-2); }
footer.app strong { color: var(--ink); font-weight: 600; letter-spacing: .08em; }

/* ── people ─────────────────────────────────────────────────────────────────────────────── */
#people { display: flex; flex-direction: column; gap: var(--gap); }
.people-panel { padding: 14px 18px; }
.people-add { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.people-add .field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.people-boxes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.check { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--font-mono); letter-spacing: .08em;
         text-transform: uppercase; color: var(--ink-2); }
.people-add button, .people-actions button { border: 1px solid var(--hairline-strong); background: var(--panel); border-radius: var(--r-pill);
  padding: 8px 14px; font: 600 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.people-add button.btn-gold { background: var(--grad-gold); border-color: transparent; color: var(--on-gold); }
table.people th.permcell, table.people td.permcell { text-align: center; padding-left: 8px; padding-right: 8px; }
table.people td .pill { margin-top: 6px; }
/* .panel is overflow:hidden (rounded corners), which clips a wide table at phone width; scroll inside it. */
.table-scroll { overflow-x: auto; }
.people-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }