/* Recon console — desktop.
 *
 * recon-design-system §11: the strategy/console surface may be DENSER than the scout
 * interface, and must keep the same dark-forest identity. Denser is not the same as
 * cramped — the spacing rhythm (4/8/12/16/24/32/48) is unchanged, there are simply more
 * rows on screen because a lead is reading a table, not glancing at a phone between
 * matches.
 *
 * The scout app's constraint — eyes on field, not on screen — does not apply here. A lead
 * IS looking at the screen; that is the job.
 */

body.console { max-width: none; }

/* Rail + content. The mobile shell's narrow single column would waste a desktop screen,
   which is the whole reason this surface exists separately from the phone app. */
#c-main {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s8);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s6) var(--s6) var(--s12);
}
/* The shared stylesheet caps `main` at 520px for the phone. min-width:0 lets a wide table's
   own scrollbox bound it instead of forcing the grid track wider. */
#c-main > main { min-width: 0; max-width: none; margin: 0; padding: 0 0 var(--s12); }

/* The [hidden] guard that used to live here is now global, in styles.css. */

body.console section.auth, body.console #c-login, body.console #c-notlead {
  max-width: 420px; margin: 0 auto; padding: 0 var(--s4);
}

/* ---------------------------------------------------------------- left rail */
.rail { position: sticky; top: 56px; align-self: start; display: flex;
  flex-direction: column; gap: var(--s2); }

.rail .rl {
  text-align: left; background: transparent; border: 1px solid transparent;
  color: var(--text-2); font: 600 13px/1 Inter, sans-serif;
  padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer;
}
.rail .rl:hover { background: var(--surface); color: var(--text); }
.rail .rl.on { background: var(--surface); border-color: #1d4536; color: var(--green-hot); }

/* Not a button, not a link, not hoverable: this is a list of things that do not exist. */
.rl-todo { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--border); }
.rl-todo ul { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.rl-todo li { color: var(--text-3); font-size: 13px; padding: 5px 12px; }

/* ---------------------------------------------------------------- caveat */
/* Gold, because this is priority intel about the numbers themselves (§2). It is the most
   load-bearing sentence on the teams table and must not read as decoration. */
.caveat {
  background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.32);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  margin-bottom: var(--s4); font-size: 13px; color: var(--text-2); line-height: 1.55;
}
.caveat strong { color: var(--gold-soft); }

.chead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.chead .ctag {
  font: 700 10px/1 Inter, sans-serif; letter-spacing: 2px;
  color: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px; padding: 4px 8px;
}
.chead .spacer { flex: 1; }
.chead .sub { font-size: 13px; }

.panel { margin-bottom: var(--s12); }
.phead {
  display: flex; align-items: baseline; gap: var(--s4);
  margin-bottom: var(--s4); flex-wrap: wrap;
}
.phead h2 { margin: 0; }

/* ---------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font: 600 10px/1 Inter, sans-serif; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 var(--s3) var(--s2); border-bottom: 1px solid var(--border);
}
.tbl td {
  padding: var(--s3); border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface); }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl .right { text-align: right; }

/* A wide table must scroll inside its own box, never take the page with it. */
.scrollx { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md);
  background: #0b1813; }

/* Alliance stays a domain colour here exactly as on the phone (§2.1). */
/* nowrap: "BLUE 2" broken across two lines stops reading as one station label. */
.st-name { font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.st-name.red { color: var(--alliance-red); }
.st-name.blue { color: var(--alliance-blue); }

.pill.mini { font-size: 10px; padding: 3px 7px; }
.who { color: var(--text); }
.who.none { color: var(--text-3); }

.mrow { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4);
  flex-wrap: wrap; }
.mrow input { max-width: 240px; }

.btn.tiny {
  width: auto; min-height: 32px; padding: 0 12px; font-size: 12px; font-weight: 600;
  border-radius: 7px;
}

/* Gold for a lead-only control: this is authority, not an ordinary action (§2 GOLD means
   priority / emphasis). It appears only for people who actually hold the role — but the
   database is what enforces that, and the page says so. */
.btn.lead {
  border-color: var(--gold); color: var(--gold-soft); background: transparent;
}
.btn.lead:active { background: #201b0c; }

.readonly-note {
  border: 1px dashed var(--border); border-radius: var(--r-sm);
  padding: var(--s3); color: var(--text-3); font-size: 13px; margin-bottom: var(--s4);
}

/* ---------------------------------------------------------------- teams table */
.tbl th.s { cursor: pointer; user-select: none; }
.tbl th.s:hover { color: var(--text-2); }
.tbl th.s.asc::after  { content: ' \2191'; color: var(--green-hot); }
.tbl th.s.desc::after { content: ' \2193'; color: var(--green-hot); }

.tbl tr.pick { cursor: pointer; }
.tno { font: 700 15px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.dash { color: var(--text-3); }

/* The table lives in its own scrollbox, so a header or a figure may run past the edge —
   what it must never do is wrap "W–L–T" onto three lines to avoid that. */
.tbl th, .tbl td.num { white-space: nowrap; }

/* W–L–T reads as one figure, not three columns to mentally rejoin. */
.wlt { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.wlt .w { color: var(--green-hot); }
.wlt .sep { color: var(--text-3); }

.tdhead { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s4); }
.tdhead .n { font: 700 34px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tdhead .nick { font: 600 18px/1.2 Inter, sans-serif; color: var(--text); }
.tdhead .loc { font-size: 13px; color: var(--text-2); }

@media (max-width: 880px) {
  #c-main { grid-template-columns: minmax(0, 1fr); gap: var(--s4);
    padding: var(--s4) var(--s3) var(--s12); }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .rl-todo { display: none; }   /* a stacked list of absent features is noise on a phone */
  .chead { padding: var(--s3) var(--s4); }
  .chead .sub { display: none; }
}

/* ---------------------------------------------------------------- intel */
.askgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s4); }
@media (max-width: 720px) { .askgrid { grid-template-columns: 1fr; } }

/* No native select styling: the shared inputs are already dark-forest, and a default
   Windows dropdown in the middle of them reads as a different application. */
.console select {
  width: 100%; min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); padding: 0 var(--s3);
  font: 400 14px/1 Inter, sans-serif; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.console select:focus { outline: none; border-color: var(--emerald); }
.console #askPrompt { min-height: 44px; font-size: 14px; }
.console textarea { min-height: 56px; font-size: 14px; }
.console .label { display: block; margin-bottom: 6px; }

/* Priority is the one place gold earns its keep in this table (§7): urgent intel should be
   noticeable without turning the page into a warning. */
.prio { font: 700 10px/1 Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.prio.urgent   { color: var(--gold); }
.prio.elevated { color: var(--gold-soft); }
.prio.normal   { color: var(--text-3); }

.kindtag { font: 700 10px/1 Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap; }
.kindtag.q { color: var(--emerald); }

/* The tally. Counts only — never a verdict (§12). */
.tally { display: inline-flex; gap: var(--s3); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.tally b { font-weight: 700; }
.tally .y b { color: var(--green-hot); }
.tally .n b { color: var(--text); }
.tally .u b { color: var(--text-3); }

.evrow { border-bottom: 1px solid var(--border); padding: var(--s3) 0; }
.evrow:last-child { border-bottom: 0; }
.evrow .who { font-weight: 600; }
.evrow .note { color: var(--text-2); font-size: 13px; margin-top: 4px; }

/* ---------------------------------------------------------------- media review */
.mediafilter{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.mfilt{background:var(--surface);border:1px solid var(--border);border-radius:999px;
  color:var(--text-2);font:600 12px/1 Inter,sans-serif;padding:9px 14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.mfilt.on{border-color:var(--emerald);color:var(--green-hot);background:rgba(25,184,107,.10)}
.mfilt .n{font-variant-numeric:tabular-nums;color:var(--text-3);font-weight:500}
.mfilt.on .n{color:var(--green-hot)}

.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column}
/* Gold, because canonical is the published one — the same reason gold carries priority
   intel. Never green: green means active/current, and every one of these is current. */
.mcard.canonical{border-color:var(--gold)}

.mshot{position:relative;aspect-ratio:4/3;background:#0a1712;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.mshot img{width:100%;height:100%;object-fit:cover;display:block}
.mshot .nolink{color:var(--text-3);font:600 11px/1.6 Inter,sans-serif;letter-spacing:1px;
  text-align:center;text-transform:uppercase;padding:var(--s4)}
.mshot .nolink span{display:block;font-weight:400;letter-spacing:0;text-transform:none;
  font-size:12px;margin-top:4px}
.mtag{position:absolute;top:8px;left:8px;font:700 9px/1 Inter,sans-serif;letter-spacing:1px;
  text-transform:uppercase;padding:5px 8px;border-radius:4px}
/* A render is LABELLED, always. It is genuinely useful in a pit and genuinely not a
   photograph of the robot that will play. */
.mtag.render{background:rgba(212,175,55,.92);color:#1a1405}
.mtag.canon{background:var(--gold);color:#1a1405;left:auto;right:8px}

.mbody{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:6px;flex:1}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.mteam{font:700 20px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
.mstatus{font:600 10px/1 Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;
  padding:5px 8px;border-radius:999px;border:1px solid var(--border);color:var(--text-3)}
.mstatus.ok{color:var(--green-hot);border-color:#1d4536}
.mstatus.bad{color:#E0705F;border-color:#3f2622}
.mstatus.warn{color:var(--gold-soft);border-color:#3c3520}
.mstatus.muted{opacity:.6}

.mrow{display:flex;gap:var(--s3);font-size:12px;line-height:1.45}
.mrow .k{flex:0 0 84px;color:var(--text-3);font-weight:600;letter-spacing:.3px}
.mrow .v{flex:1;min-width:0;color:var(--text-2);overflow-wrap:anywhere}
.mrow .v.sub{color:var(--text-3)}

.macts{display:flex;gap:var(--s2);margin-top:auto;padding-top:var(--s3);flex-wrap:wrap}
.btn.tiny.ok{border-color:#1d4536;color:var(--green-hot)}
.btn.tiny.bad{border-color:#3f2622;color:#E0705F}
.btn.tiny.gold{border-color:var(--gold);color:var(--gold)}

/* ---------------------------------------------------------------- members */
.mrow{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.mrow.gone{opacity:.55}
.mwho{display:flex;align-items:center;gap:var(--s3)}
.mwho .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* An initial, not a fabricated avatar. profiles.avatar_path exists and nothing fills it yet,
   so a generated face would be an invention in the one place identity has to be literal. */
.mav{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--raised);border:1px solid var(--border);
  font:700 14px/1 Inter,sans-serif;color:var(--text-2);text-transform:uppercase}
.mname{font:600 15px/1.2 Inter,sans-serif;color:var(--text)}
.mname .you{font:600 9px/1 Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;
  color:var(--green-hot);border:1px solid #1d4536;border-radius:999px;padding:3px 6px;
  margin-left:6px;vertical-align:1px}
.mmail{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mjoined{font-size:11px;color:var(--text-3);flex:none;text-align:right}

.mroles{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--border)}
.rchip{border:1px solid var(--border);background:var(--bg);color:var(--text-3);
  border-radius:999px;padding:7px 12px;font:600 11px/1 Inter,sans-serif;letter-spacing:.5px;
  cursor:pointer;transition:color var(--t-instant) var(--e-out),
  border-color var(--t-instant) var(--e-out),background var(--t-instant) var(--e-out)}
.rchip[aria-pressed=true]{background:rgba(25,184,107,.14);border-color:#1d4536;
  color:var(--green-hot)}
/* Admin is gold, because it is the one chip that hands over the workspace. */
.rchip.adm[aria-pressed=true]{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.4);
  color:var(--gold)}
.rchip[disabled]{opacity:.4;cursor:not-allowed}

/* ---------------------------------------------------------------- audit */
.arow{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s3) 0;
  border-bottom:1px solid var(--border)}
.arow:last-child{border-bottom:0}
.arow .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.anm{font:600 14px/1.2 Inter,sans-serif;color:var(--text)}
.asub{font-size:12px;color:var(--text-2);line-height:1.5}
.awho{flex:none;text-align:right;font:600 12px/1.4 Inter,sans-serif;color:var(--text-2)}

/* ---------------------------------------------------------------- pit watch */
.pwtable{display:flex;flex-direction:column;gap:var(--s2)}
.pwline{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s4);
  align-items:start;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3) var(--s4);
  color:inherit;font:inherit;cursor:pointer;
  transition:border-color var(--t-instant) var(--e-out)}
.pwline:hover{border-color:#2c4a3c}
.pwline.resolved{opacity:.55}
.pwl-team{font:700 22px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--text)}
.pwl-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.pwl-cat{font:600 11px/1 Inter,sans-serif;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text-2)}
.pwl-sev{color:var(--gold-soft)}
.pwl-desc{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Recurrence is stated as a count and nothing more. Gold because it is priority information,
   not red: three reports is something to look at, not something that has gone wrong. */
.pwl-rep{font:600 12px/1 Inter,sans-serif;color:var(--gold-soft)}
.pwl-when{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;
  flex:none}
.pwl-st{font:600 10px/1 Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;border:1px solid var(--border);color:var(--text-3);
  display:inline-block}
.pwl-st.open{color:var(--gold);border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.09)}
.pwl-st.investigating,.pwl-st.monitoring{color:var(--gold-soft);border-color:#3c3520}
.pwl-st.resolved{color:var(--green-hot);border-color:#1d4536}

.pwhead{display:flex;flex-wrap:wrap;gap:var(--s8);margin-bottom:var(--s6);
  padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.pwhead-team{font:700 30px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;margin-top:6px}
.pwhead-v{font:600 15px/1.35 Inter,sans-serif;margin-top:8px;text-transform:capitalize}
.pwh3{font:700 11px/1 Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-3);margin:var(--s6) 0 var(--s3)}

.pwthread{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);
  padding:var(--s3) var(--s4)}
.pwu{padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.pwu:last-child{border-bottom:0}
.pwuw{display:block;font:600 12px/1.3 Inter,sans-serif;color:var(--text-3)}
.pwun{display:block;font-size:15px;line-height:1.55;color:var(--text);margin-top:4px}
.pwun em{color:var(--gold-soft);font-style:normal;font-weight:600}

.pwhist{display:flex;flex-direction:column;gap:var(--s2)}
.pwhistrow{display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);color:inherit;font:inherit;cursor:pointer;
  text-transform:capitalize}
.pwhistrow:hover{border-color:#2c4a3c}
.pwhistrow .sub{margin-left:auto;text-transform:none}

@media (max-width:760px){
  .pwline{grid-template-columns:54px minmax(0,1fr)}
  .pwl-when{grid-column:2;align-items:flex-start;text-align:left}
}

/* ---------------------------------------------------------------- member actions */
/* Rename / Remove / Restore / Delete, on the row they act on. Right-aligned and quiet: they
   are rarer than the role chips below them and must not compete with the name. */
.macts{display:flex;gap:6px;align-items:center;flex:none;margin-left:var(--s3)}
.macts .btn.tiny{width:auto;padding:0 10px}
.btn.tiny.danger{color:#F1736A;border-color:rgba(241,115,106,.42)}
.btn.tiny.danger:hover{background:rgba(241,115,106,.10)}

/* ---------------------------------------------------------------- delete a notice */
/* Separated from Post by a rule and a lot of space: it is the one control on this panel that
   cannot be undone, and it must not sit in the same visual group as the everyday one. */
.pwdelete{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--border)}
.pwdelete .sub{flex:1;min-width:220px;font-size:12px}

/* ---------------------------------------------------------------- resolve, in the thread */
.evresolve{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s6);padding:var(--s4);border-radius:var(--r-sm);
  background:rgba(212,175,55,.07);border:1px solid rgba(212,175,55,.28);
  color:var(--gold-soft);font-size:13px;line-height:1.5}
.evresolve span{flex:1;min-width:220px}
.evresolve .btn.tiny{width:auto;padding:0 14px;flex:none}
/* Settled is not urgent. Gold means "worth noticing" and a closed question is not. */
.evresolve.done{background:var(--surface);border-color:var(--border);color:var(--text-2)}

/* ---------------------------------------------------------------- missed matches */
.gapwho{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.gapscout{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:var(--raised);border:1px solid var(--border);font-size:13px}
.gapname{color:var(--text)}
/* Gold, not red. A missed match is a thing to notice and follow up, not a fault to accuse
   somebody of — a scout is usually missing because they were moved, not because they left. */
.gapn{color:var(--gold-soft);font-weight:700}

/* ---------------------------------------------------------------- rank by */
.rankrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:var(--s3) 0 var(--s4)}
.ranklbl{font:600 11px/1 Inter,sans-serif;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-3);margin-right:var(--s1)}
.rankchip{background:var(--raised);border:1px solid var(--border);border-radius:999px;
  color:var(--text-2);font:600 12px/1 Inter,sans-serif;padding:8px 13px;cursor:pointer;
  min-height:34px}
.rankchip:hover{color:var(--text)}
.rankchip.on{border-color:var(--emerald);color:var(--green-hot);background:#10221a}
.rankchip.clear{border-style:dashed}
/* The sample size, beside the number rather than under it — a metric without n is not
   shippable, and a second line per cell would double the height of the whole table. */
.nsm{display:inline-block;margin-left:6px;font-size:10px;color:var(--text-3);font-weight:400}

/* ---------------------------------------------------------------- comparisons */
.cmpchips{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0}
.cmpchip{display:inline-flex;align-items:center;gap:8px;background:var(--raised);
  border:1px solid var(--border);border-radius:999px;color:var(--text);cursor:pointer;
  font:600 13px/1 Inter,sans-serif;padding:8px 12px;min-height:34px}
.cmpchip span{color:var(--text-3);font-size:15px;line-height:1}
.cmpchip:hover span{color:var(--red)}
.cmptbl th[scope="row"]{text-align:left;color:var(--text-2);font-weight:500;white-space:nowrap}
.cmptbl td{text-align:right;font-variant-numeric:tabular-nums}
.cmpteam{text-align:right;font:700 15px/1 Inter,sans-serif;color:var(--text)}
/* Best in a row, marked only where "best" means something AND there is something to compare. */
.cmpbest{color:var(--green-hot);font-weight:700}
.cmpoff{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:4px;
  background:var(--raised);border:1px solid var(--border);
  font:600 9px/1.4 Inter,sans-serif;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-3);vertical-align:middle}

/* ---------------------------------------------------------------- pick list */
.pltable{display:flex;flex-direction:column;gap:6px}
.plrow{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.plpos{flex:none;width:30px;text-align:right;font:700 17px/1 Inter,sans-serif;color:var(--text-3)}
.plteam{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.plno{font:700 15px/1.2 Inter,sans-serif;color:var(--text)}
.plnick{font-size:12px;color:var(--text-2)}
.plwhy{font-size:13px;color:var(--text);margin-top:2px}
.plmetric{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.plstat{flex:none;font:600 10px/1 Inter,sans-serif;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-3);padding:5px 9px;border-radius:999px;border:1px solid var(--border)}
/* Gone is quiet, not alarming — it is simply no longer a choice. DNP is the deliberate one. */
.plrow.gone{opacity:.5}
.plstat.gone{color:var(--text-3)}
.plrow.dnp{border-color:rgba(217,80,63,.32)}
.plstat.dnp{color:var(--red);border-color:rgba(217,80,63,.32)}
.placts{display:flex;gap:6px;flex:none}
.placts .btn.tiny{width:auto;padding:0 10px;min-width:32px}

/* ---------------------------------------------------------------- exports */
.exrow{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.exrow .btn.tiny{width:auto;padding:0 14px;flex:none}

/* ================================================================ narrow screens
 *
 * These blocks style the SHARED comparison and pick list (compare.js, picklist.js), so they
 * apply to the console in a narrow window and to the strategy desk on a phone — the two
 * surfaces that mount those modules.
 */
@media (max-width: 700px) {
  /* The console header, same non-wrapping problem as the desk's: the Sign out button sat
     23px past the right edge. The console is a desktop tool and stays one — but a lead who
     opens it on a phone to check coverage should not find the chrome broken. */
  .chead { flex-wrap: wrap; row-gap: 6px; }
  .chead .spacer { display: none; }
  .chead #cEvent { flex: 1 1 100%; order: 5; }
  .chead #cWho { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* COMPARING ON A PHONE IS A SCROLL, and that is fine — what makes it usable is keeping the
     row label in view. Scrolling a table sideways until the numbers are orphaned from the
     word that says what they are is the failure this avoids. */
  .cmptbl th[scope="row"] {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    max-width: 128px; white-space: normal;
  }
  .cmptbl td, .cmptbl .cmpteam { min-width: 92px; }
  /* The scroll container needs a definite width of its own, or it has nothing to scroll
     relative to and simply grows to fit the table. */
  .scrollx { max-width: 100%; }
  /* The sample size drops below its number rather than beside it: at 92px "3.61 n=3" on one
     line either wraps badly or forces the column wider. */
  .nsm { display: block; margin-left: 0; }

  .cmpchip { min-height: 44px; }

  /* PICK LIST ROWS RESTACK. At 375px a row was 407px wide — rank, team, status and four
     controls do not fit on one line, and the controls were 33x32px, under the 44px minimum
     §14 requires. Two lines, full-size targets. */
  .plrow { flex-wrap: wrap; row-gap: var(--s3); }
  .plteam { flex: 1 1 auto; min-width: 0; }
  .placts { flex: 1 1 100%; gap: 8px; }
  .placts .btn.tiny { flex: 1; min-height: 44px; min-width: 44px; }
  /* Rank leads, status closes the line. With the status pulled first the rank number read
     as orphaned — "AVAILABLE 1" rather than "1 … available". */
  .plteam { flex: 1 1 60%; }

  /* The list picker, New and Delete each on a sensible line rather than three squeezed. */
  .mrow { flex-wrap: wrap; row-gap: var(--s3); }
  .mrow select, .mrow input { flex: 1 1 100%; max-width: none !important; }
  .mrow .btn.tiny { min-height: 44px; }

  .exrow { flex-wrap: wrap; row-gap: var(--s3); }
  .exrow .btn.tiny { flex: 1; min-height: 44px; }
  .rankchip { min-height: 44px; }
}