/* ============================================================================
   amd-scouting.css — the look of the scouting room

   WHY THIS FILE EXISTS

   Scout Mode and the Tape Room were built inside the player card, so their
   markup and their styling grew up in the same file. On 2026-09-24 the
   behaviour moved out into v2/shared/amd-scouting.js and the rooms became a
   section of their own, and the styling had to follow it — a shared engine
   that renders class names only one page defines is an engine that works in
   exactly one place, which is not shared at all.

   So every rule the engine's own markup asks for lives here, and nowhere
   else. The card no longer carries any of them.

   WHAT IS NOT HERE. Tokens. Sizes, weights, spacing, radii and colours all
   come from amd-rules.css, which any page loading this file must load first.
   Two families of local colour survive that rule and both are deliberate:
   the dark working surface of the Tape Room (--dk, --on-dk, --gold-lt, all
   rulebook tokens) and a handful of result colours inside it, which are the
   won / even / lost reading on a play and carry meaning rather than taste.
   ========================================================================== */

/* The textarea the written sections are typed into. It is .sc-notes and not
   .notes on purpose: the player card has a .notes of its own for the pick
   note, and two pages sharing a class name they each define separately is a
   collision waiting for whichever one loads second. */
.sc-notes{width:100%;min-height:160px;border:1px solid var(--line);background:var(--panel2);border-radius:var(--r-md);padding:var(--s4);font-size:var(--t-small);line-height:1.6;color:var(--ink);outline:none;resize:vertical;font-family:var(--font-text)}
.sc-notes:focus{border-color:var(--ring-focus);box-shadow:0 0 0 3px rgba(255,102,0,.12)}
.sc-notes::placeholder{color:var(--muted)}
.sc-field{margin-bottom:var(--s4)}
.sc-field:last-of-type{margin-bottom:var(--s1)}
.sc-field-l{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-tiny);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.6px;color:var(--accent-ink);margin-bottom:var(--s2)}
.ai-btn{display:inline-flex;align-items:center;gap:var(--s1);border:1px solid var(--ring);background:var(--panel);color:var(--soft);border-radius:var(--r-pill);padding:var(--s1) var(--s3);font-size:var(--t-micro);font-weight:var(--w-bold);letter-spacing:.3px;cursor:pointer;text-transform:none;font-family:var(--font-text)}
.ai-btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.ai-btn svg{width:11px;height:11px}
.ai-btn.busy{opacity:.5;pointer-events:none}
.sc-empty{text-align:center;padding:var(--s4) 0 var(--s2);color:var(--muted);font-size:var(--t-small)}
.sc-rep-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.sc-toggle{display:flex;background:var(--tint);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}
.sc-toggle button{border:none;background:transparent;color:var(--soft);font-size:var(--t-small);font-weight:var(--w-bold);padding:var(--s2) var(--s3);border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-text)}
.sc-toggle button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm)}
.sc-rep-acts{display:flex;gap:var(--s2);flex-wrap:wrap}
.sc-read{margin-bottom:var(--s4)}
.sc-read-t{font-size:var(--t-small);line-height:1.65;color:var(--soft);white-space:pre-wrap;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:var(--s3) var(--s3)}
.muted-note{font-size:var(--t-tiny);color:var(--muted);margin-top:var(--s3)}
#tapeWrap{--gold:var(--gold-lt);position:fixed;inset:0;z-index:360;display:none;flex-direction:column;
  background:var(--dk);color:var(--on-dk)}
#tapeWrap.show{display:flex}
#tapeWrap :focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}
.tp-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--gold-lt)}
.tp-title{font-family:var(--font-display);font-variation-settings:"wdth" var(--wd-tight);
  font-size:var(--t-h3);font-weight:var(--w-bold);letter-spacing:.3px;text-transform:uppercase}
.tp-title span{display:block;font-size:var(--t-tiny);font-weight:var(--w-normal);
  font-variation-settings:"wdth" var(--wd-normal);text-transform:none;letter-spacing:0;color:var(--on-dk-soft)}
.tp-x{background:none;border:none;color:var(--on-dk-soft);cursor:pointer;padding:var(--s3);
  min-width:var(--tap,44px);min-height:var(--tap,44px);display:grid;place-items:center}
.tp-x svg{width:22px;height:22px}
.tp-x:hover{color:var(--on-dk)}
.tp-bar{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s3) var(--s5);border-bottom:1px solid rgba(255,255,255,.09);font-size:var(--t-small)}
.tp-b-l b{font-weight:var(--w-bold)}
.tp-b-l span{display:block;font-size:var(--t-tiny);color:var(--on-dk-soft)}
.tp-b-r{margin-left:auto;text-align:right;font-size:var(--t-tiny);color:var(--on-dk-soft)}
.tp-b-r span{display:block;font-size:var(--t-small);font-weight:var(--w-bold);color:var(--on-dk)}
.tp-filters{display:flex;gap:var(--s2)}
.tp-f{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);min-height:var(--tap,44px);border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--on-dk-soft);cursor:pointer;
  font-family:var(--font-text);font-size:var(--t-tiny);font-weight:var(--w-bold)}
.tp-f i{font-style:normal;font-family:var(--font-text);
  font-variation-settings:"wdth" var(--wd-data);font-variant-numeric:tabular-nums;opacity:.7}
.tp-f:hover{color:var(--on-dk);border-color:rgba(255,255,255,.3)}
.tp-f.on{background:var(--accent-cta);border-color:var(--accent-cta);color:#fff}
.tp-f.on i{opacity:.85}
.tp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;flex:1;min-height:0}
.tp-list{overflow-y:auto;padding:var(--s3) var(--s4) var(--s8);scroll-behavior:smooth}
.tp-row{display:grid;grid-template-columns:58px minmax(0,1fr) 44px;gap:var(--s3);align-items:start;
  padding:var(--s3);border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;
  width:100%;text-align:left;background:none;color:inherit;font:inherit}
.tp-row:hover{background:rgba(255,255,255,.04)}
.tp-row.on{background:rgba(255,255,255,.08);border-color:var(--gold-lt)}
.tp-row.star{box-shadow:inset 3px 0 0 var(--accent)}
.tp-r-k{font-family:var(--font-text);font-variation-settings:"wdth" var(--wd-data);
  font-variant-numeric:tabular-nums;font-size:var(--t-tiny);color:var(--on-dk-soft);line-height:1.4}
.tp-q{display:block;font-weight:var(--w-bold);color:var(--gold-lt)}
.tp-r-sit{font-size:var(--t-tiny);font-weight:var(--w-bold);color:var(--on-dk-soft);
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.tp-warn{color:var(--gold-lt);font-weight:var(--w-bold)}
.tp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tp-listwrap{overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.tp-listwrap .tp-list{overflow:visible;flex:0 0 auto}
.tp-link{width:6px;height:6px;border-radius:var(--r-pill);background:var(--accent);flex:0 0 auto}
.tp-flag{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.4px;
  padding:1px var(--s2);border-radius:var(--r-xs);background:rgba(255,255,255,.1)}
.tp-r-tx{font-size:var(--t-small);line-height:1.45;margin-top:2px}
.tp-r-mk{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.tp-chip{font-size:var(--t-micro);font-weight:var(--w-bold);padding:2px var(--s2);
  border-radius:var(--r-xs);background:rgba(255,255,255,.12)}
.tp-res{font-size:var(--t-micro);font-weight:var(--w-bold);padding:2px var(--s2);border-radius:var(--r-xs)}
.tp-res-w{background:rgba(16,185,129,.22);color:#7ee6bd}
.tp-res-e{background:rgba(255,255,255,.12);color:var(--on-dk-soft)}
.tp-res-l{background:rgba(220,38,38,.22);color:#ff9b91}
.tp-hasnote{font-size:var(--t-micro);color:var(--on-dk-soft)}
.tp-r-g{font-family:var(--font-text);font-variation-settings:"wdth" var(--wd-data);
  font-variant-numeric:tabular-nums;font-size:var(--t-small);font-weight:var(--w-bold);
  text-align:right;color:var(--on-dk-soft)}
.tp-r-g.tp-pos{color:#7ee6bd}
.tp-r-g.tp-neg{color:#ff9b91}
.tp-dock{border-left:1px solid rgba(255,255,255,.09);padding:var(--s4);overflow-y:auto;background:var(--dk2)}
.tp-d-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.tp-d-sit{font-size:var(--t-small);font-weight:var(--w-bold);color:var(--gold-lt)}
.tp-starbtn{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);min-height:var(--tap,44px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);background:transparent;
  color:var(--on-dk);cursor:pointer;font-family:var(--font-text);font-size:var(--t-tiny);font-weight:var(--w-bold)}
.tp-starbtn svg{width:15px;height:15px}
.tp-starbtn.on{background:var(--accent-cta);border-color:var(--accent-cta);color:#fff}
.tp-d-tx{font-size:var(--t-small);line-height:1.55;color:var(--on-dk-soft);margin:var(--s3) 0 var(--s4)}
.tp-d-hint{font-size:var(--t-tiny);color:var(--on-dk-soft);line-height:1.55;
  padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.09)}
.tp-d-l{font-size:var(--t-micro);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.5px;
  color:var(--on-dk-soft);margin:var(--s4) 0 var(--s2)}
.tp-tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tp-tag{padding:var(--s3);min-height:var(--tap,44px);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);
  background:transparent;color:var(--on-dk-soft);cursor:pointer;
  font-family:var(--font-text);font-size:var(--t-tiny);font-weight:var(--w-bold);text-align:left}
.tp-tag:hover{color:var(--on-dk);border-color:rgba(255,255,255,.34)}
.tp-tag.on{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--dk)}
.tp-results{display:flex;gap:var(--s2)}
.tp-rb{flex:1;padding:var(--s3);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);
  background:transparent;color:var(--on-dk-soft);cursor:pointer;
  font-family:var(--font-text);font-size:var(--t-small);font-weight:var(--w-bold)}
.tp-rb-w.on{background:rgba(16,185,129,.24);border-color:#7ee6bd;color:#7ee6bd}
.tp-rb-e.on{background:rgba(255,255,255,.14);border-color:var(--on-dk-soft);color:var(--on-dk)}
.tp-rb-l.on{background:rgba(220,38,38,.24);border-color:#ff9b91;color:#ff9b91}
.tp-note{width:100%;min-height:92px;padding:var(--s3);border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.24);color:var(--on-dk);
  font-family:var(--font-text);font-size:var(--t-input);line-height:1.5;resize:vertical}
.tp-note::placeholder{color:var(--on-dk-soft)}
.tp-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s5);border-top:1px solid rgba(255,255,255,.09)}
.tp-keys{font-size:var(--t-tiny);color:var(--on-dk-soft)}
.tp-keys summary{cursor:pointer;font-weight:var(--w-bold)}
.tp-keys kbd{display:inline-block;min-width:18px;text-align:center;padding:1px var(--s2);margin-right:4px;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-xs);
  font-family:var(--font-text);font-size:var(--t-micro);color:var(--on-dk)}
.tp-keys div{margin-top:var(--s2);line-height:1.9;max-width:64ch}
.tp-done{padding:var(--s3) var(--s5);border:none;border-radius:var(--r-sm);background:#c44700;color:#fff;
  font-family:var(--font-text);font-size:var(--t-small);font-weight:var(--w-bold);cursor:pointer}
.tp-done:hover{background:#a83c00}
.tp-msg{padding:var(--s7) var(--s5);max-width:56ch;color:var(--on-dk-soft);font-size:var(--t-small);line-height:1.6}
.tp-msg b{display:block;color:var(--on-dk);font-size:var(--t-lead);margin-bottom:var(--s3)}
.tp-msg-sm{padding:var(--s5) 0;font-size:var(--t-small)}
/* The prospects a charted game does cover, offered where the reader was told
   theirs is not. Buttons rather than a sentence, because the answer to "not
   him" is a man you can be reading in one press. */
.tp-ready{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.tp-ready-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:var(--s3) var(--s4);min-height:var(--tap);border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:var(--on-dk);font-family:var(--font-text);font-size:var(--t-small);
  font-weight:var(--w-bold);text-align:left;cursor:pointer}
.tp-ready-b:hover{border-color:var(--gold-lt);color:var(--gold-lt)}
.tp-ready-b span{font-weight:var(--w-normal);font-size:var(--t-tiny);color:var(--on-dk-soft)}
#tapeGrade{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;
  background:rgba(8,14,24,.92);padding:var(--s5)}
#tapeGrade.show{display:flex}
.tp-gr{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--dk2);border:1px solid var(--gold-lt);border-radius:var(--r-lg);padding:var(--s6)}
.tp-gr-x{position:absolute;top:var(--s3);right:var(--s3);background:none;border:none;
  color:var(--on-dk-soft);cursor:pointer;min-width:var(--tap,44px);min-height:var(--tap,44px);
  display:grid;place-items:center}
.tp-gr-x svg{width:18px;height:18px}
.tp-gr-h{font-size:var(--t-h3);font-weight:var(--w-bold);padding-right:var(--s6)}
.tp-gr-s{font-size:var(--t-small);color:var(--on-dk-soft);margin:var(--s2) 0 var(--s5);line-height:1.55}
.tp-gr-s b{color:var(--on-dk)}
.tp-gr-steps{display:flex;flex-direction:column;gap:var(--s2)}
.tp-gr-b{text-align:left;padding:var(--s3) var(--s4);border-radius:var(--r-md);cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--on-dk);font-family:var(--font-text)}
.tp-gr-b b{display:block;font-size:var(--t-base);font-weight:var(--w-bold)}
.tp-gr-b span{display:block;font-size:var(--t-tiny);color:var(--on-dk-soft);margin-top:2px;line-height:1.45}
.tp-gr-b:hover{border-color:rgba(255,255,255,.4)}
.tp-gr-b.on{border-color:var(--accent);background:rgba(255,102,0,.14)}
.tp-gr-ne{width:100%;margin-top:var(--s4);padding:var(--s3);border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--on-dk-soft);cursor:pointer;
  font-family:var(--font-text);font-size:var(--t-small);font-weight:var(--w-bold)}
.tv-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.tv-h-l{font-size:var(--t-base);font-weight:var(--w-bold);color:var(--ink)}
.tv-h-l span{font-size:var(--t-tiny);font-weight:var(--w-normal);color:var(--muted);margin-left:var(--s2)}
.tv-open{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);
  border:none;border-radius:var(--r-sm);background:#c44700;color:#fff;cursor:pointer;
  font-family:var(--font-text);font-size:var(--t-small);font-weight:var(--w-bold)}
.tv-open svg{width:16px;height:16px}
.tv-open:hover{background:#a83c00}
.tv-rows{margin-top:var(--s4);display:flex;flex-direction:column}
.tv-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--s4);align-items:center;
  padding:var(--s3) 0;border-top:1px solid var(--line2);width:100%;text-align:left;
  background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;color:inherit;
  cursor:pointer;min-height:var(--tap,44px)}
.tv-row:hover{background:var(--tint)}
.tv-opp b{font-size:var(--t-small);font-weight:var(--w-bold);color:var(--ink)}
.tv-opp span{font-size:var(--t-tiny);color:var(--muted);margin-left:var(--s2)}
.tv-ev{font-size:var(--t-tiny);color:var(--muted)}
.tv-g{font-size:var(--t-small);font-weight:var(--w-bold)}
.tv-none{font-size:var(--t-small);color:var(--muted);line-height:1.55;margin:var(--s3) 0 0;max-width:62ch}
/* ── THE ROOM AS A COLUMN ───────────────────────────────────────────────────
   `tp-inline` is the Scouting section's posture: the tape room is one of two
   columns on a normal page rather than a sheet over the top of one. Everything
   that made it an overlay comes off — the fixed position, the full viewport,
   the display:none it waits behind — and what is left is the same room in a
   box. The engine reads the class too (tapeInline), so the behaviour and the
   look agree about which one it is.

   The list and its dock stack here whatever the window is doing. The stacking
   rule below is on viewport width, which is the wrong measurement for a pane
   that is half of a 1400px screen: the window says "wide", the column is
   560px, and a 380px dock beside a play list leaves neither of them readable. */
#tapeWrap.tp-inline{position:static;display:flex;height:auto;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.09);overflow:hidden;margin-top:var(--s4)}
.tp-inline .tp-body{min-height:0}
.tp-inline .tp-grid{grid-template-columns:1fr;grid-template-rows:auto auto}
.tp-inline .tp-list{max-height:52vh}
.tp-inline .tp-dock{border-left:none;border-top:1px solid rgba(255,255,255,.09)}
.tp-inline .tp-bar{gap:var(--s3)}
.tp-inline .tp-b-r{margin-left:0;text-align:left;width:100%}
.tp-inline .tp-foot{flex-wrap:wrap;gap:var(--s3)}
.tp-inline #tapeGrade{position:fixed;inset:0}

@media(max-width:900px) {
.tp-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.tp-dock{border-left:none;border-top:1px solid rgba(255,255,255,.09);max-height:46vh}
.tp-bar{gap:var(--s3)}
.tp-b-r{margin-left:0;text-align:left;width:100%}
}
.fx-sum{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;font-size:var(--t-small);
  color:var(--soft);padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line2)}
.fx-t-main b{font-family:var(--font-text);font-variation-settings:"wdth" var(--wd-data);
  font-variant-numeric:tabular-nums;font-size:var(--t-lead);font-weight:var(--w-bold);color:var(--ink)}
.fx-t-ne{margin-left:auto;font-size:var(--t-tiny);color:var(--muted)}
.fx-t-none{color:var(--muted)}
.fx-legend{margin:0 0 var(--s5)}
.fx-legend summary{font-size:var(--t-small);font-weight:var(--w-bold);color:var(--soft);cursor:pointer}
.fx-legend summary:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px;border-radius:var(--r-xs)}
.fx-legend p{font-size:var(--t-tiny);color:var(--muted);line-height:1.55;margin:var(--s3) 0;max-width:62ch}
.fx-legend p b{color:var(--soft)}
.fx-legend-rows{display:flex;flex-direction:column;gap:var(--s2)}
.fx-legend-rows div{display:grid;grid-template-columns:132px 1fr;gap:var(--s3);align-items:baseline;
  font-size:var(--t-tiny);line-height:1.5;padding-bottom:var(--s2);border-bottom:1px solid var(--line2)}
.fx-legend-rows b{font-weight:var(--w-bold)}
.fx-legend-rows span{color:var(--muted)}
@media(max-width:520px) {
.fx-legend-rows div{grid-template-columns:1fr;gap:2px}
}
.fx-list{display:flex;flex-direction:column;gap:var(--s4)}
.fx-row{min-width:0}
.fx-row+.fx-row{border-top:1px solid var(--line2);padding-top:var(--s4)}
.fx-head{display:flex;align-items:baseline;gap:var(--s3);width:100%;text-align:left;
  background:none;border:0;padding:var(--s2) 0;font:inherit;color:inherit;cursor:pointer;
  min-height:var(--tap,44px)}
.fx-head:hover .fx-name{color:var(--accent-ink)}
.fx-name{font-size:var(--t-base);font-weight:var(--w-bold);color:var(--ink)}
.fx-val{margin-left:auto;font-size:var(--t-small);font-weight:var(--w-bold);color:var(--ink);white-space:nowrap}
.fx-val.is-ne{color:var(--muted);font-weight:var(--w-normal)}
.fx-v1, .fx-v2{color:var(--bad-ink)}
.fx-v3{color:var(--mid-ink)}
.fx-v4, .fx-v5, .fx-v6{color:var(--good-ink)}
.fx-cite{display:flex;align-items:baseline;gap:var(--s3);width:100%;text-align:left;
  background:none;border:0;padding:0 0 var(--s2);font:inherit;cursor:pointer;
  font-size:var(--t-tiny);color:var(--muted)}
.fx-cite b{font-weight:var(--w-bold);color:var(--soft)}
.fx-cite-x{margin-left:auto;font-style:normal;font-weight:var(--w-bold);color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:2px}
.fx-cite-none{display:block;cursor:default;padding-bottom:var(--s2)}
.fx-meter{display:flex;align-items:stretch;gap:2px;height:8px;margin:var(--s1) 0 var(--s1)}
.fx-m-c{flex:1 1 0;border-radius:2px;background:var(--line)}
.fx-m-c.on{background:var(--muted)}
.fx-m-c.fx-mv1, .fx-m-c.fx-mv2{background:var(--bad-ink)}
.fx-m-c.fx-mv3{background:var(--mid-ink)}
.fx-m-c.fx-mv4, .fx-m-c.fx-mv5, .fx-m-c.fx-mv6{background:var(--good-ink)}
.fx-m-line{flex:0 0 2px;background:var(--ink);border-radius:1px;margin:-3px var(--s1)}
.fx-m-key{display:flex;justify-content:space-between;gap:var(--s2);
  font-size:var(--t-micro);color:var(--muted);letter-spacing:.3px}
.fx-m-key b{font-weight:var(--w-bold);color:var(--soft)}
.fx-whyread{font-size:var(--t-tiny);color:var(--soft);line-height:1.5;margin-top:var(--s2);
  padding-left:var(--s3);border-left:2px solid var(--line)}
.fx-cited{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.fx-cp{padding:var(--s3);border-radius:var(--r-md);background:var(--tint)}
.fx-cp-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-size:var(--t-micro);font-weight:var(--w-bold);color:var(--muted);letter-spacing:.3px}
.fx-cp-o{color:var(--soft)}
.fx-cp-t{font-size:var(--t-tiny);color:var(--ink);line-height:1.5;margin-top:var(--s1)}
.fx-cp-none{color:var(--muted)}
.fx-cp-n{font-size:var(--t-tiny);color:var(--soft);line-height:1.5;margin-top:var(--s2);
  padding-left:var(--s3);border-left:2px solid var(--accent)}
.fx-cited .tp-res{font-size:var(--t-micro);font-weight:var(--w-bold);padding:1px var(--s2);border-radius:var(--r-xs)}
.fx-cited .tp-res-w{background:var(--good);color:var(--good-ink)}
.fx-cited .tp-res-e{background:var(--low);color:var(--low-ink)}
.fx-cited .tp-res-l{background:var(--bad);color:var(--bad-ink)}
.fx-edit{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line2)}
.fx-open{background:var(--tint);border-radius:var(--r-md);padding:var(--s3);
  margin-left:calc(var(--s3) * -1);margin-right:calc(var(--s3) * -1)}
.fx-def{font-size:var(--t-tiny);color:var(--muted);line-height:1.5;margin:var(--s1) 0 var(--s3);max-width:62ch}
.fx-scale{display:flex;align-items:stretch;gap:var(--s1)}
.fx-grp{display:flex;gap:var(--s1);flex:1 1 0;min-width:0}
.fx-b{flex:1 1 0;min-width:0;padding:var(--s2) var(--s1);border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);cursor:pointer;
  font-family:var(--font-text);font-size:var(--t-tiny);font-weight:var(--w-bold);color:var(--soft);
  line-height:1.25;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.fx-b:hover{border-color:var(--muted);color:var(--ink)}
.fx-b:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px}
.fx-b1.on, .fx-b2.on{background:var(--bad);border-color:var(--bad-ink);color:var(--bad-ink)}
.fx-b3.on{background:var(--mid);border-color:var(--mid-ink);color:var(--mid-ink)}
.fx-b4.on, .fx-b5.on, .fx-b6.on{background:var(--good);border-color:var(--good-ink);color:var(--good-ink)}
.fx-line{flex:0 0 auto;width:2px;border-radius:1px;background:var(--ink);margin:0 var(--s1)}
.fx-line span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fx-ev{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--tint);
  font-size:var(--t-tiny);color:var(--muted)}
.fx-ev b{font-weight:var(--w-bold);color:var(--soft)}
.fx-why{width:100%;margin-top:var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--panel);color:var(--ink);
  font-family:var(--font-text);font-size:var(--t-input)}
.fx-why::placeholder{color:var(--muted)}
.fx-why:focus-visible{outline:2px solid var(--ring-focus);outline-offset:1px}

/* ── THE TWO CONTROLS UNDER A GRADE ──────────────────────────────────────────
   .fx-clear had NO RULE AT ALL. Measured on the live page: background
   rgb(239,239,239), a 1.8px outset black border, black Arial at 13px, square
   corners, 21px tall — the browser's default button, sitting in a dark panel
   built entirely from tokens. Justin: "the back to didnt see enough button
   looks awful." It was not styled badly; it was never styled.

   Both of these are quiet on purpose. Clearing a grade and writing a note are
   secondary to the six words above them, and the rulebook allows one primary
   button per screen — which in this section is not either of these. */
.fx-addwhy,.fx-clear{margin-top:var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
  font-family:var(--font-text);font-size:var(--t-tiny);font-weight:var(--w-bold);
  color:var(--soft);cursor:pointer;min-height:var(--tap);
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.fx-addwhy:hover,.fx-clear:hover{color:var(--ink);border-color:var(--muted)}
.fx-addwhy:focus-visible,.fx-clear:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px}
/* The note comes first and the clear sits apart from it, so the destructive
   one is never the button under the thumb by accident. */
.fx-addwhy{margin-right:var(--s2)}
.fx-clear{border-color:transparent;color:var(--muted)}
.fx-clear:hover{color:var(--bad-ink);border-color:var(--line)}

/* ── AND AN UNGRADED ROW SAYS WHAT IT WANTS ──────────────────────────────────
   The right-hand slot used to read "Didn't see enough" on every untouched
   factor — the same slot, the same weight, as a real grade. Seven rows that
   all look answered. It now reads "Not graded yet" in the muted colour, with
   this word beside it so the row also says it can be opened. */
/* Muted, not orange: seven rows each shouting GRADE would spend the accent on
   the least important word on the screen. It warms up when the row is hovered
   or focused, which is when it is about to be used. (And no opacity — a live
   subtree dimmed that way is a contrast the gate cannot reason about, which
   this project has a check for.) */
.fx-open-hint{font-size:var(--t-micro);font-weight:var(--w-bold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);flex:none;margin-left:var(--s2)}
.fx-head:hover .fx-open-hint,.fx-head:focus-visible .fx-open-hint{color:var(--accent-ink)}
.fx-row.fx-open .fx-open-hint{display:none}
/* var(--font-display), per the rulebook: headlines and section titles are
   Hubot Sans and everything else is Mona Sans. Inside Scout Mode this heading
   sat among the page's own headings and nobody noticed; in the Scouting
   section it is one of four section titles on a column and it was the only
   one set in the text face. */
.fx-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;font-size:var(--t-h3);
  font-family:var(--font-display);font-stretch:var(--wd-tight);
  font-weight:var(--w-bold);color:var(--ink);margin:0 0 var(--s4)}
.fx-h span{font-size:var(--t-tiny);font-weight:var(--w-normal);color:var(--muted)}
.fx-ret-b{margin-top:var(--s3)}
.fx-ret-l{font-size:var(--t-tiny);font-weight:var(--w-bold);text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);margin-bottom:var(--s1)}
.fx-ret-t{font-size:var(--t-small);color:var(--soft);line-height:1.6;white-space:pre-wrap;
  padding:var(--s3);background:var(--tint);border-radius:var(--r-md)}
.fx-legacy{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line2)}
.fx-legacy summary{font-size:var(--t-small);font-weight:var(--w-bold);color:var(--soft);cursor:pointer}
.fx-legacy summary:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px;border-radius:var(--r-xs)}
.fx-legacy p{font-size:var(--t-tiny);color:var(--muted);line-height:1.55;margin:var(--s2) 0 var(--s3);max-width:62ch}
.fx-legacy-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2) var(--s4)}
.fx-legacy-rows div{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--t-tiny);
  color:var(--muted);padding:var(--s1) 0;border-bottom:1px solid var(--line2)}
.fx-legacy-rows b{font-family:var(--font-text);font-variation-settings:"wdth" var(--wd-data);
  font-variant-numeric:tabular-nums;color:var(--soft)}
.vd-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.vd-g label{display:block;font-size:var(--t-small);font-weight:var(--w-bold);color:var(--ink);margin-bottom:var(--s1)}
.vd-g label span{display:block;font-size:var(--t-tiny);font-weight:var(--w-normal);color:var(--muted)}
.vd-g select{width:100%;margin-top:var(--s2);padding:var(--s3);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--panel);color:var(--ink);
  font-family:var(--font-text);font-size:var(--t-input);font-weight:var(--w-bold)}
/* Nothing chosen yet: same box, quieter voice. The bold full-ink treatment
   above belongs to a grade somebody actually gave. */
.vd-g select.is-empty{color:var(--muted);font-weight:var(--w-normal)}
.vd-g select:focus-visible{outline:2px solid var(--ring-focus);outline-offset:1px}
.vd-note{font-size:var(--t-tiny);color:var(--muted);line-height:1.55;margin:var(--s3) 0 var(--s5);max-width:62ch}
.vd-l{margin-bottom:var(--s4)}
.vd-l label{display:block;font-size:var(--t-small);font-weight:var(--w-bold);color:var(--ink);margin-bottom:var(--s2)}
.vd-l input{width:100%;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);color:var(--ink);font-family:var(--font-text);font-size:var(--t-input)}
.vd-l input::placeholder{color:var(--muted)}
.vd-l input:focus-visible{outline:2px solid var(--ring-focus);outline-offset:1px}
.bm-t{font-size:var(--t-base);font-weight:var(--w-bold);color:var(--ink)}
.bm-l{font-size:var(--t-small);color:var(--soft);line-height:1.55;margin-top:var(--s1)}
.bm-act{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.bm-rk{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-small);font-weight:var(--w-bold);color:var(--ink)}
.bm-rk input{width:76px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink);font-family:var(--font-text);
  font-variation-settings:"wdth" var(--wd-data);font-variant-numeric:tabular-nums;font-size:var(--t-input);font-weight:var(--w-bold)}
.bm-rk input:focus-visible{outline:2px solid var(--ring-focus);outline-offset:1px}
.bm-go{padding:var(--s2) var(--s5);border:none;border-radius:var(--r-sm);background:#c44700;color:#fff;
  font-family:var(--font-text);font-size:var(--t-small);font-weight:var(--w-bold);cursor:pointer}
.bm-go:hover{background:#a83c00}
.bm-go:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px}
.bm-no{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--soft);font-family:var(--font-text);font-size:var(--t-small);
  font-weight:var(--w-bold);cursor:pointer}
.bm-no:hover{color:var(--ink);border-color:var(--muted)}
.bm-no:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px}
@media(max-width:640px) {
.vd-row{grid-template-columns:1fr}
.fx-t-ne{margin-left:0;width:100%}
.fx-scale{flex-direction:column;gap:var(--s2)}
.fx-line{width:auto;height:2px;margin:var(--s1) 0}
.fx-b{padding:var(--s3) var(--s1);font-size:var(--t-small)}
}
.call-receipt, .draft-receipt, .hero{--gold:var(--gold-lt)}

/* ── A FINGER IS 44px, AND THESE WERE NOT ────────────────────────────────────
   Measured on the live Scouting section at 390px on 2026-09-24. Six "Rewrite
   as scout" buttons at 127x24, the games-watched button at 34, and both
   disclosure summaries around 20 — every one of them a control a reader is
   meant to press on a phone while a game is on the other screen, which is the
   least forgiving thing a thumb does.

   Real height, not a hit-area pseudo-element: each of these has a stacked
   neighbour (a field label, the next factor, the play list) and an oversized
   invisible box would take the tap meant for it. Desktop keeps the tighter
   sizes, because a pointer does not need the room. */
@media (hover:none),(pointer:coarse){
  .ai-btn{min-height:var(--tap);padding-left:var(--s3);padding-right:var(--s3)}
  .tv-open{min-height:var(--tap)}
  .tp-keys summary,.fx-legend summary{min-height:var(--tap);display:flex;align-items:center}
  /* ── THE SIX WORDS ARE THE SECTION'S ONE REAL ACTION ───────────────────
     Measured at 375x812 on 2026-09-25: 112x42. Two pixels under this
     project's own --tap, on the control the whole room exists to let you
     press, tapped with a thumb while a game runs on another screen.

     And the rule that made them 42 rather than 32 is keyed on
     max-width:640px — on how WIDE the screen is, not on whether it is
     touched. A tablet at 800px has fingers and got the 32px version. This
     block asks the right question, so both are answered here. */
  .fx-b{min-height:var(--tap)}
  /* Matching the two secondary controls under a grade, which already carry
     it in their own rule — repeated here so a future edit to that rule
     cannot quietly drop it on touch. */
  .fx-addwhy,.fx-clear{min-height:var(--tap)}
}