/* ============================================================================
   SCAN Central — dash.css
   The DASHBOARD layer, loaded after tokens.css by the five role pages:
   /player, /coach, /team, /parent, /admin.

   This is a different shape from app.css: wide, sidebar + topbar, tables,
   no floating tabbar. The two are never both required on one page, so the
   .topbar and .chip rules here are scoped under .shell to keep them apart if
   a page ever does load both.

   It imports nothing. tokens.css is loaded alongside it.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Shell — 240px sidebar over 900px, stacked topbar below
   ------------------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "brand topbar"
    "nav   page";
  min-height: 100dvh;
}

.brand-lockup { grid-area: brand; }
.topbar       { grid-area: topbar; }
.side-nav     { grid-area: nav; }
.page         { grid-area: page; }

/* ---------------------------------------------------------------------------
   Brand lockup
   ------------------------------------------------------------------------ */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--safe-top) + var(--sp-3)) var(--sp-4) var(--sp-3);
  background: var(--surface);
  border-bottom: var(--hair);
  border-right: var(--hair);
  min-height: var(--topbar-h);
  text-decoration: none;
  color: inherit;
}
.brand-lockup:hover { text-decoration: none; }

.brand-lockup img,
.brand-lockup svg {
  width: 30px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .5));
}

.brand-lockup .wm {
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
  line-height: 1.1;
  white-space: nowrap;
}
.brand-lockup .wm b { color: var(--cyan); font-weight: inherit; }

.brand-lockup .tag {
  display: block;
  font-size: var(--fs-micro);                     /* was 9px — see .nav-group above */
  font-weight: var(--fw-bold);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Topbar
   ------------------------------------------------------------------------ */
.shell .topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--safe-top) + var(--sp-2)) var(--sp-5) var(--sp-2);
  background: rgba(17, 19, 24, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hair);
  min-height: var(--topbar-h);
}

.topbar h1 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar .sub {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* THE TITLE BLOCK NEVER MAKES THE BAR TALLER THAN --topbar-h (build 222). The
   league dashboard now prints the league's name under the heading, and the two
   lines pushed the bar to 65px — 5px past the height the pinned tab row was
   told to sit under, so the row tucked itself behind the bar's bottom edge.
   Tight line-heights keep heading + sub inside the 60px bar on every screen. */
.tb-title { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tb-title h1  { line-height: 1.15; }
.tb-title .sub { line-height: 1.2; margin-top: 1px; }

.topbar .spacer,
.tb-spacer { flex: 1; }

.tb-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Hamburger — only visible when the sidebar has collapsed. */
.nav-toggle {
  display: none;
  width: var(--tap);
  height: var(--tap);
  place-items: center;
  border-radius: var(--r-btn);
  border: var(--hair);
  color: var(--text-primary);
}
.nav-toggle:hover { border-color: var(--cyan); color: var(--cyan); }

/* Bell + avatar (markup is shared with app.css; these are the wide variants) */
.bell-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-btn);
  border: var(--hair);
  color: var(--text-muted);
}
.bell-btn:hover { color: var(--cyan); border-color: var(--cyan); }

.bell-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #1B0A0A;
  font-size: var(--fs-micro);                     /* the platform's floor — see .nav-group */
  font-weight: var(--fw-black);
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--bg);
}
.bell-badge[hidden] { display: none; }

.menu-avatar {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.menu-avatar:hover { border-color: var(--cyan); }
.menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.menu-avatar span {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: var(--fs-small);
  color: var(--cyan);
}

/* ---------------------------------------------------------------------------
   Side navigation
   ------------------------------------------------------------------------ */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-6) + var(--safe-bottom));
  background: var(--surface);
  border-right: var(--hair);
  overflow-y: auto;
}

/* ELEVEN PIXELS IS THE FLOOR FOR A CAPTION (build 226, QA #31). These name
   the groups the whole menu is organised by — "Every day", "Scouting" — and
   at 10px they were the smallest text on every page of the platform, read by
   parents on a phone in a car park. */
.side-nav .nav-group {
  margin-top: var(--sp-4);
  padding: 0 var(--sp-3) var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.side-nav .nav-group:first-child { margin-top: 0; }

.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-btn);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side-nav a:hover {
  background: var(--surface-2);
  color: var(--text-primary);
  text-decoration: none;
}
/* THE BAR SAYS WHERE YOU ARE; THE TEXT STAYS TEXT (build 227, item 5).
   Cyan was doing six jobs at once — primary button, link, active menu item,
   active filter pill, callout accent, outline button — so on a page with five
   cyan things the one that was an ACTION had nothing to distinguish it. The
   menu keeps the cyan bar and the raised background, which is what a person
   actually reads as "you are here", and gives the colour back to the button. */
.side-nav a[aria-current="page"] {
  background: var(--cyan-soft);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  box-shadow: inset 3px 0 0 var(--cyan);
}

/* ── A JUMP IS NOT A PAGE, AND THE MENU SAYS SO (build 221) ───────────────
   Activities, Reflections, Messages, Consent and Privacy are places ON the
   dashboard, not destinations away from it. Listed flush with real pages,
   clicking one while already on the dashboard produced no navigation, no
   heading change and no visible movement — which reads as a dead link. The
   indent and the rule down the left say "this is inside the page above";
   the small grey line under the label says which page. */
.side-nav a.nav-jump {
  margin-left: var(--sp-5);
  padding-left: var(--sp-3);
  min-height: 34px;
  border-left: 2px solid var(--border);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
}
.side-nav a.nav-jump:hover { border-left-color: var(--border-strong); }
.side-nav a.nav-jump[aria-current="page"] {
  box-shadow: none;
  border-left-color: var(--cyan);
}
.side-nav a.nav-jump .nav-ic { width: 16px; height: 16px; opacity: .75; }
.side-nav .nav-jump-note {
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-med);
  color: var(--text-dim);
  letter-spacing: .01em;
}

/* ── "MORE": THE FOLD FOR WHAT IS NOT USED EVERY DAY (build 222) ──────────
   Looks like a menu item, because it sits among them and is tapped like one;
   the count says how much is under it, and the chevron says it opens. It is a
   <details>, so it works with no script and a screen reader hears "More,
   collapsed". It arrives open when it holds the page you are on. */
.side-nav .nav-more { margin-top: var(--sp-3); }
.side-nav .nav-more-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-btn);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  cursor: pointer;
  list-style: none;
  border-top: var(--hair);
  border-radius: 0 0 var(--r-btn) var(--r-btn);
}
.side-nav .nav-more-summary::-webkit-details-marker { display: none; }
.side-nav .nav-more-summary:hover { background: var(--surface-2); color: var(--text-primary); }
.side-nav .nav-more-summary .nav-ic { width: 20px; height: 20px; display: grid; place-items: center; }
.side-nav .nav-more-count {
  margin-left: auto;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  color: var(--text-dim);
  border: var(--hair);
  border-radius: var(--r-pill);
  padding: 0 7px;
  line-height: 18px;
}
.side-nav .nav-more-summary::after {
  content: "\203A";
  font-weight: var(--fw-bold);
  color: var(--text-dim);
  transform: rotate(90deg);
  transition: transform var(--dur) var(--ease);
}
.side-nav .nav-more[open] > .nav-more-summary::after { transform: rotate(-90deg); }
.side-nav .nav-more[open] > .nav-more-summary { color: var(--text-primary); }
.side-nav .nav-more .nav-group { margin-top: var(--sp-3); }
.side-nav .nav-ic {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------------------------------
   Page body
   ------------------------------------------------------------------------ */
.page {
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-8) + var(--safe-bottom));
  max-width: var(--page-max);
  width: 100%;
  min-width: 0;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.page-head h2 { font-size: var(--fs-h1); }
.page-head .sub { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-1); }

.section { margin-bottom: var(--sp-7); }
.section > h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}

/* ---------------------------------------------------------------------------
   Grid + cards
   ------------------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.grid.tight { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.grid.wide  { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.span-2 { grid-column: span 2; }

.card {
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  min-width: 0;
}
.card > h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-1);
}
.card > .csub {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.card.raised {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* ---------------------------------------------------------------------------
   KPI hero + stat tiles
   ------------------------------------------------------------------------ */
.kpi-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.stat-tile {
  position: relative;
  overflow: hidden;
  padding: var(--sp-5);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: var(--hair);
  border-radius: var(--r-card);
}
.stat-tile::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 90px;
  height: 90px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--cyan-soft), transparent 70%);
  pointer-events: none;
}

.stat-tile .lab {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-tile .val {
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: 1;
  margin-top: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.stat-tile .val small {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.stat-tile .delta {
  margin-top: var(--sp-2);
  min-height: 16px;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.stat-tile .delta.up   { color: var(--green); }
.stat-tile .delta.down { color: var(--red); }

.stat-tile .bar-mini {
  height: 5px;
  margin-top: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.stat-tile .bar-mini i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
  transition: width var(--dur-slow) var(--ease);
}

/* ---------------------------------------------------------------------------
   Score ring
   ------------------------------------------------------------------------ */
.ring {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}
.ring circle { transition: stroke-dashoffset var(--dur-slow) var(--ease); }
.ring .ring-track { stroke: var(--surface-3); }
.ring .ring-val   { stroke: var(--cyan); stroke-linecap: round; }
.ring .ring-num {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  fill: var(--text-primary);
}
.ring .ring-sub { fill: var(--text-muted); }

.ring-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  border: var(--hair);
  border-radius: var(--r-card);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.table caption {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Sortable headers. The button carries the click; aria-sort carries state. */
.table thead th.sortable { padding: 0; }
.table thead th.sortable > button {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
}
.table thead th.sortable > button:hover { color: var(--text-primary); }
.table thead th.sortable > button::after {
  content: "\2195";                 /* up-down arrow, the neutral state */
  margin-left: auto;
  opacity: .35;
  font-size: var(--fs-micro);
}
.table thead th[aria-sort="ascending"]  > button::after { content: "\2191"; opacity: 1; color: var(--cyan); }
.table thead th[aria-sort="descending"] > button::after { content: "\2193"; opacity: 1; color: var(--cyan); }

.table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(43, 48, 58, .6);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
}
.table .nowrap { white-space: nowrap; }

.table th:focus-visible,
.table td:focus-visible { box-shadow: var(--focus); }

/* ---------------------------------------------------------------------------
   Chips + badges (dashboard variants)
   ------------------------------------------------------------------------ */
.shell .chip,
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px var(--sp-3);
  border: var(--hair);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.chip.on,
.chip.active { border-color: var(--cyan); background: var(--cyan-soft); color: var(--cyan); }
.chip .lv {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.chip .lv.nodata { background: var(--text-dim); box-shadow: none; }
.chip b { color: var(--text-primary); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text-muted);
}
.badge.green  { background: var(--green-soft);  color: var(--green); }
.badge.amber  { background: var(--amber-soft);  color: var(--amber); }
.badge.orange { background: var(--orange-soft); color: var(--orange); }
.badge.red    { background: var(--red-soft);    color: var(--red); }
.badge.cyan   { background: var(--cyan-soft);   color: var(--cyan); }
.badge.gold   { background: var(--gold-soft);   color: var(--gold); }

/* Score band pills, driven by score_band()'s key. */
.badge.band-start      { background: rgba(248,113,113,.14); color: var(--band-start); }
.badge.band-developing { background: rgba(251,146,60,.14);  color: var(--band-developing); }
.badge.band-building   { background: rgba(232,255,58,.14);  color: var(--band-building); }
.badge.band-consistent { background: rgba(95,209,243,.14);  color: var(--band-consistent); }
.badge.band-advanced   { background: rgba(74,222,128,.14);  color: var(--band-advanced); }
.badge.band-mastered   { background: rgba(201,163,107,.16); color: var(--band-mastered); }
.badge.band-unscored   { background: var(--surface-3);      color: var(--band-unscored); }

/* ---------------------------------------------------------------------------
   Buttons (dashboard sizing)
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: var(--cyan);
  color: var(--on-cyan);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-black);
  text-decoration: none;
  transition: filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { filter: brightness(1.08); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost {
  background: transparent;
  border-color: var(--border-control);   /* no fill: the edge is the button */
  color: var(--text-primary);
}
.btn.ghost:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); filter: none; }
.btn.secondary {
  background: var(--surface-2);
  border-color: var(--border-control);
  color: var(--text-primary);
}
.btn.secondary:hover:not(:disabled) { border-color: var(--cyan); filter: none; }
/* FOUR WEIGHTS, ASSIGNED BY IMPORTANCE (build 227, item 5).
   Destructive is not the loudest thing on a page: on the Match Scout list a
   red Delete sat on every row while "Scout a new match" — the reason a coach
   opened the page — was a grey ghost in the corner. Delete is quiet and red;
   the FILLED red exists only on the confirm step, where it is the one button
   being pressed. */
.btn.danger {
  background: transparent;
  border-color: var(--border-control);
  color: var(--red);
}
.btn.danger:hover:not(:disabled) { border-color: var(--red); filter: none; }
.btn.danger.solid { background: var(--red); border-color: transparent; color: #2A0B0B; }
.btn.small { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-tiny); }

/* ---------------------------------------------------------------------------
   Form controls
   ------------------------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.field label {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-3);
  /* --hair-control, not --hair (build 227, item 4). This is the rule that drew
     the sign-in card's email and password boxes, and a 1.30:1 edge around a
     fill that is itself 1.14:1 against the card is not a field a person can
     see. Nothing else about the control changes. */
  border: var(--hair-control);
  border-radius: var(--r-btn);
  color: var(--text-primary);
  font-size: var(--fs-small);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}
.field .hint { font-size: var(--fs-tiny); color: var(--text-muted); }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.selwrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-3);
  background: var(--surface-2);
  border: var(--hair);
  border-radius: var(--r-btn);
}
.selwrap label {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.selwrap select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-weight: var(--fw-med);
  outline: none;
}
.selwrap select option { background: var(--surface-2); }

/* Toggle switch, used by the settings sheet. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
}
.switch-row .switch-label { font-size: var(--fs-small); font-weight: var(--fw-med); }
.switch-row .switch-hint  { font-size: var(--fs-tiny); color: var(--text-muted); }

.switch { position: relative; flex: 0 0 auto; width: 52px; height: 30px; }
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.switch .track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: var(--hair);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  pointer-events: none;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--text-muted);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.switch input:checked + .track { background: var(--cyan-soft); border-color: var(--cyan); }
.switch input:checked + .track::after { transform: translateX(22px); background: var(--cyan); }
.switch input:focus-visible + .track { box-shadow: var(--focus); }

/* ---------------------------------------------------------------------------
   Bottom sheet.

   Every old page hand-rolled this, five slightly different ways. One
   implementation now, opened and closed by SCAN.sheet.
   ------------------------------------------------------------------------ */
.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 10, 13, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sheet.open { display: flex; }

.sheet-panel {
  width: min(480px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
  background: var(--surface);
  border: var(--hair);
  border-bottom: none;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-lg);
  animation: sheet-up var(--dur) var(--ease);
}

@keyframes sheet-up {
  from { transform: translateY(34px); opacity: .4; }
  to   { transform: none; opacity: 1; }
}

.sheet-grip {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--border-strong);
}

.sheet-title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-black);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  margin-bottom: var(--sp-2);
  padding: var(--sp-3);
  text-align: left;
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r-btn);
  color: var(--text-primary);
  text-decoration: none;
}
.sheet-item:hover { border-color: var(--cyan); text-decoration: none; }
.sheet-item .si-ic { flex: 0 0 auto; width: 24px; text-align: center; font-size: var(--fs-h3); }
.sheet-item b { display: block; font-size: var(--fs-small); font-weight: var(--fw-black); }
.sheet-item .si-sub { display: block; font-size: var(--fs-tiny); color: var(--text-muted); }
.sheet-item.danger { border-color: rgba(248, 113, 113, .4); }
.sheet-item.danger b { color: var(--red); }

.sheet-section {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sheet-cancel {
  width: 100%;
  min-height: var(--tap);
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: transparent;
  border: var(--hair);
  border-radius: var(--r-btn);
  color: var(--text-primary);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-black);
}
.sheet-cancel:hover { border-color: var(--cyan); }

/* ---------------------------------------------------------------------------
   Modal — centred, for confirmations
   ------------------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(8, 10, 13, .74);
}
.modal.open { display: flex; }

.modal-panel {
  width: min(520px, 100%);
  max-height: 86dvh;
  overflow-y: auto;
  padding: var(--sp-5);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--dur) var(--ease);
}
@keyframes modal-in {
  from { transform: scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.modal-head h3 { font-size: var(--fs-h2); }

.modal-close {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: var(--r-btn);
  color: var(--text-muted);
  font-size: var(--fs-h2);
  line-height: 1;
}
.modal-close:hover { color: var(--text-primary); background: var(--surface-3); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------------ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface);
}
.empty-state .es-ic {
  font-size: var(--fs-display);
  line-height: 1;
  opacity: .7;
}
.empty-state h3 { font-size: var(--fs-h3); }
.empty-state p {
  max-width: 44ch;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Skeleton loaders
   ------------------------------------------------------------------------ */
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 400% 100%;
  animation: skeleton-slide 1.4s linear infinite;
  color: transparent;
  user-select: none;
}
.skeleton.line  { height: 12px; margin-bottom: var(--sp-2); }
.skeleton.title { height: 20px; width: 52%; margin-bottom: var(--sp-3); }
.skeleton.tile  { height: 120px; border-radius: var(--r-card); }
.skeleton.row   { height: 44px; margin-bottom: var(--sp-2); border-radius: var(--r-btn); }

@keyframes skeleton-slide {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ---------------------------------------------------------------------------
   Toasts — the aria-live region lives here on dashboards too
   ------------------------------------------------------------------------ */
.toast-wrap {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(var(--sp-5) + var(--safe-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(380px, calc(100vw - var(--sp-7)));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--cyan);
  border-left-width: 4px;
  border-radius: var(--r-btn);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  box-shadow: var(--shadow);
  animation: toast-slide var(--dur) var(--ease);
  transition: opacity var(--dur-slow) var(--ease);
}
.toast.success { border-color: var(--green); }
.toast.warn    { border-color: var(--orange); }
.toast.error   { border-color: var(--red); }
.toast.info    { border-color: var(--cyan); }

@keyframes toast-slide {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Misc dashboard pieces
   ------------------------------------------------------------------------ */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border: var(--hair);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-btn);
  background: var(--surface-2);
  font-size: var(--fs-small);
}
.banner.warn  { border-left-color: var(--amber); }
.banner.error { border-left-color: var(--red); }
.banner.ok    { border-left-color: var(--green); }

.muted { color: var(--text-muted); }
.tiny  { font-size: var(--fs-tiny); }
.num   { font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row   { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.right { margin-left: auto; }

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--surface-3);
}

/* ---------------------------------------------------------------------------
   COLLAPSE — under 900px the sidebar becomes a slide-in drawer and the
   brand lockup joins the topbar row.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "page";
  }

  .brand-lockup {
    display: none;                 /* the topbar carries its own copy */
  }

  .nav-toggle { display: grid; }

  .side-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-sheet);
    width: min(300px, 84vw);
    padding-top: calc(var(--safe-top) + var(--sp-5));
    border-right: var(--hair);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
  }
  .side-nav.open { transform: none; }

  /* Scrim, drawn by the nav itself so no extra markup is needed.
     cursor:pointer is not decoration on a phone: iOS Safari only promises a
     click for a tap on an element it considers clickable, and a cursor is one
     of the two things that make it one (the other, a listener on the element
     itself, is in scan.js). Tapping here closes the menu, and on a phone
     there is no cursor for this to change. */
  .side-nav.open::before {
    content: "";
    position: fixed;
    inset: 0 0 0 min(300px, 84vw);
    background: rgba(8, 10, 13, .6);
    cursor: pointer;
  }

  .page { padding: var(--sp-5) var(--sp-4) calc(var(--sp-8) + var(--safe-bottom)); }
  .shell .topbar { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .toast-wrap { right: var(--sp-4); left: var(--sp-4); width: auto; }
  .span-2 { grid-column: auto; }
}

@media (max-width: 560px) {
  .kpi-hero { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
  .stat-tile { padding: var(--sp-4); }
  .stat-tile .val { font-size: var(--fs-h1); }
  .card { padding: var(--sp-4); }
  .topbar h1 { font-size: var(--fs-h3); }

  /* On a phone the two-line wordmark and a long page title ("Family view")
     were fighting over the same row and the title lost — screenshots showed
     them overlapping. The shield alone carries the brand at this width; the
     page title is what the person actually needs, and it truncates with an
     ellipsis instead of colliding when it is still too long. */
  .brand-mini .wm { display: none; }
  .tb-title { min-width: 0; }
  .topbar .tb-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── THE PHONE TOP BAR (build 222) ────────────────────────────────────────
   At 390px everything in this row was flex-shrinking at once: the burger
   was 27px of a 44px tap target, the shield 14px of a 26px image, and the
   title had 78–109px — so a player was told they were on "My SC…". The
   menu is behind the burger here, so the title is the ONLY cue to where you
   are, and it was the thing being cut. Now: the tap targets and the shield
   never shrink (they are the accessibility floor and the brand), the row's
   own padding and gaps tighten, and the TITLE takes whatever is left —
   about 116px — with a shorter spelling of the same room swapped in where
   the long one cannot fit (see SCAN_PAGE_SHORT). Nothing is clipped. */
.topbar h1 .tb-short { display: none; }
@media (max-width: 480px) {
  .shell .topbar { padding-left: var(--sp-3); padding-right: var(--sp-3); gap: var(--sp-2); }
  .shell .topbar .nav-toggle,
  .shell .topbar .tb-right { flex: 0 0 auto; }
  /* THE SHIELD STEPS ASIDE ON A PHONE. With the burger, three 44px buttons
     and the row's own spacing, the title had 100px left beside a 26px shield
     — and "Player report", "Upload video" and "League settings" all clipped
     even at 16px. Without it the title has 134px, and the shorter spellings
     below are needed for five rooms instead of eighteen. The brand is the
     app icon on a phone, and the wordmark on every wider screen; the title
     is the one thing on this row a person cannot do without. */
  .shell .topbar .brand-mini { display: none; }
  .shell .topbar .tb-title { flex: 1 1 auto; min-width: 0; }
  .topbar h1 { font-size: var(--fs-body); }
  .topbar h1 .tb-long  { display: none; }
  .topbar h1 .tb-short { display: inline; }
}

/* The drawer must not animate for players who asked for stillness; the
   body.rm / prefers-reduced-motion rules in tokens.css already neutralise the
   duration, and the drawer stays usable because it is transform-only. */

/* ---------------------------------------------------------------------------
   Compact brand mark inside the topbar.

   The sidebar's .brand-lockup disappears under 900px, so the topbar carries a
   small copy. Rendering both (rather than moving one with JS) keeps the markup
   static and the logo a single <img> reference either way.
   ------------------------------------------------------------------------ */
.brand-mini {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
}
.brand-mini:hover { text-decoration: none; }
.brand-mini img { width: 26px; height: auto; }
.brand-mini .wm {
  font-family: var(--font-head);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
}
.brand-mini .wm b { color: var(--cyan); font-weight: inherit; }

@media (max-width: 900px) {
  .brand-mini { display: flex; }
}

/* The sign-in / reset / forgot cards and choose-view share this centred
   layout. They have no shell, so they set body.auth-page. */
body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + var(--sp-6)) var(--sp-5) calc(var(--safe-bottom) + var(--sp-6));
}

.auth-card {
  width: min(430px, 100%);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: var(--hair);
  border-radius: var(--r-sheet);
  box-shadow: var(--shadow-lg);
}
.auth-card.wide { width: min(780px, 100%); }

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  text-align: center;
}
.auth-brand img { width: 72px; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
.auth-brand .wm {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
}
.auth-brand .wm b { color: var(--cyan); font-weight: inherit; }
.auth-brand .tag {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.auth-card h1 { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.auth-card .sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.auth-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.auth-tabs button {
  flex: 1;
  min-height: var(--tap);
  border: var(--hair);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-black);
}
.auth-tabs button[aria-selected="true"] {
  color: var(--cyan);
  border-color: var(--cyan);
  background: var(--cyan-soft);
}

.auth-msg {
  min-height: 20px;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
}
.auth-msg.err { color: var(--red); }
.auth-msg.ok  { color: var(--green); }

.auth-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--hair);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* Role cards on choose-view.php */
.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.view-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  min-height: 112px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.view-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  text-decoration: none;
}
.view-card .vc-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-btn);
  background: var(--cyan-soft);
  color: var(--cyan);
}
.view-card .vc-name {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
}
.view-card .vc-desc {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Tiny branded error documents (403/404/500) reuse .auth-card. */
.err-code {
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  color: var(--cyan);
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Icon sizing is intrinsic, not contextual.

   These marks are <svg viewBox="0 0 24 24"> with no width/height attribute.
   An SVG like that has no intrinsic size, so with no CSS box the browser
   falls back to the replaced-element default and paints it at the full
   container width. Scoping the only size rule to `.side-nav .nav-ic` meant
   the same icon rendered at 20px in the sidebar and 1280px anywhere else.
   Size it wherever it appears.
--------------------------------------------------------------------------- */
.nav-ic,
.vc-ic > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}
.vc-ic > svg { width: 28px; height: 28px; }

/* Tab strips scroll rather than clip. The admin console has 11 sections, which
   overflow 1280px — previously the last two were simply cut off at the edge
   with nothing to show more existed. */
.tabs, [role="tablist"] {
  --tabs-fade: 1;
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--sp-6);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.tabs::-webkit-scrollbar, [role="tablist"]::-webkit-scrollbar { height: 0; }
.tabs > *, [role="tablist"] > * { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   `hidden` must actually hide.

   The UA stylesheet's [hidden]{display:none} has the lowest possible
   specificity, so ANY rule that sets display on the same element beats it —
   and .panel.form sets display:grid. The result was that every panel marked
   hidden in the markup (add a team, add a person, coaching staff, squad,
   assign to squad) rendered permanently open on the admin console.

   Nothing should have to remember this, so it is enforced once, here.
   A panel that genuinely needs to override it can set display on a class that
   is only applied when it is open.
--------------------------------------------------------------------------- */
[hidden] { display: none !important; }


/* ---------------------------------------------------------------------------
   THE TUCKED SIDEBAR

   A page that needs the whole screen sets .nav-tucked on the shell (see
   head.php's $pageShellClass). The camera is the reason it exists: a
   viewfinder in a 900px column beside a nav is a viewfinder nobody can frame a
   pitch in, and framing is the one step of a recording that cannot be fixed
   afterwards.

   Nothing is taken away — the nav becomes the same drawer it already is on a
   phone, opened by the same button with the same handler. The declarations
   below deliberately mirror the ones in the max-width:899px block above; if
   you change one, change the other. (They cannot share a rule: one is inside a
   media query and one is not.)
   ------------------------------------------------------------------------ */
/* ABOVE 900px ONLY. Below it the sidebar is already a drawer and the shell is
   already one column — and this block, sitting later in the file, was
   overriding that single column with a two-column grid whose second area no
   longer existed. The page area collapsed to nothing: the camera stage
   measured 32 pixels wide on a phone, which is the width of its own negative
   margins and nothing else. A rule that only makes sense on a wide screen
   belongs behind a wide-screen query. */
@media (min-width: 901px) {
.shell.nav-tucked { grid-template-columns: 0 minmax(0, 1fr); }
.shell.nav-tucked .brand-lockup { display: none; }
.shell.nav-tucked .nav-toggle { display: grid; }
.shell.nav-tucked .side-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: var(--z-sheet);
  width: min(300px, 84vw);
  padding-top: calc(var(--safe-top) + var(--sp-5));
  box-shadow: var(--shadow-lg);
  transform: translateX(-102%);
  transition: transform var(--dur) var(--ease);
}
.shell.nav-tucked .side-nav.open { transform: none; }
.shell.nav-tucked .side-nav.open::before {
  content: "";
  position: fixed;
  inset: 0 0 0 min(300px, 84vw);
  background: rgba(8, 10, 13, .6);
  cursor: pointer;                 /* it closes the menu — see the note above */
}
}

/* The group says where its jumps land, once (design review, item 16). */
.side-nav .nav-group .nav-group-on {
  text-transform: none; letter-spacing: 0; font-weight: var(--fw-body);
  color: var(--text-dim);
}

/* The sign-in card's one line, and its utility row (design review, item 8). */
.auth-newhere {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--hair);
  font-size: var(--fs-small);
}
.auth-newhere a { font-weight: var(--fw-bold); }
.auth-newhere span { display: block; color: var(--text-muted); font-size: var(--fs-tiny); margin-top: 2px; }
.auth-foot.auth-links { justify-content: flex-start; gap: var(--sp-4); }
.auth-fine {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  line-height: var(--lh-body);
}

/* THE FIRST SQUAD, for a coach with nobody to ask (build 230, item 19). */
.firstsquad { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); max-width: 420px; }
.firstsquad label { font-size: var(--fs-small); font-weight: var(--fw-med); }
.firstsquad input, .firstsquad select { width: 100%; }
.firstsquad button { margin-top: var(--sp-2); justify-self: start; }
.firstsquad .fs-msg { margin: 0; font-size: var(--fs-small); color: var(--text-muted); min-height: 1.2em; }

/* A join code, read down a phone (build 230, item 19). */
.jc-code {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  letter-spacing: .12em;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--cyan);
}
tr.dim td { opacity: .55; }

/* ===========================================================================
   THE PLAYER HOME, REORDERED (build 231, design review item 20).
   =========================================================================== */

/* The identity header with the ring taken out of it. */
.p-player .hero-slim { display: block; padding: var(--sp-4) var(--sp-5); min-height: 0; }
.p-player .hero-slim .hero-who { text-align: left; }
.p-player .hero-slim .hero-who h2 { margin: 0; }
.p-player .hero-slim .sub { margin-top: var(--sp-1); }

/* The ring in its own section, beside what the platform has to say about it. */
.p-player .indexwrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
}
.p-player .indexsay { flex: 1 1 260px; min-width: 0; }
.p-player .indexsay .hero-note { margin: 0 0 var(--sp-2); }
.p-player #indexArrived { color: var(--cyan); }

/* What a scout said last, and the card that stands in for it. */
.p-player .card.latest .eyebrow,
.p-player .card .eyebrow {
  font-size: var(--fs-tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}
.p-player .card.latest b { display: block; font-size: var(--fs-h2); margin: var(--sp-1) 0; }
.p-player .card.latest .when { color: var(--text-muted); font-size: var(--fs-small); }
.p-player .card.latest .by { color: var(--text-muted); font-size: var(--fs-small); margin: var(--sp-3) 0 0; }
.p-player .card.latest .thin { color: var(--text-muted); font-size: var(--fs-small); margin: var(--sp-2) 0 0; }
.p-player .card.latest .latest-go { margin: var(--sp-4) 0 0; }
.p-player .card.firstrun { border-left: 3px solid var(--cyan); }
.p-player .card.firstrun b { display: block; font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.p-player .card.firstrun p { color: var(--text-muted); line-height: var(--lh-body); margin: 0; }
.p-player .card.firstrun .firstrun-go { margin-top: var(--sp-4); }

/* The tools, as a row rather than three sales cards. */
.doors.doors-compact { gap: var(--sp-3); }
.doors.doors-compact .door { padding: var(--sp-4); }
.doors.doors-compact .door .icon { width: 32px; height: 32px; }
.doors.doors-compact .door b { font-size: var(--fs-body); }

/* WAITING ON YOU (build 231, design review item 21). Three counts, in the
   order a coach can act on them, above everything that is merely coming. */
.waitrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.waitchip {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  border: var(--hair);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-decoration: none;
}
.waitchip:hover { border-color: var(--cyan); text-decoration: none; }
.waitchip b { font-family: var(--font-head); font-size: var(--fs-h2); color: var(--cyan); }
.waitchip span { color: var(--text-muted); font-size: var(--fs-small); }

/* The squad, capped (build 231, items 6 and 21). */
.rostermore {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.rostermore span { color: var(--text-muted); font-size: var(--fs-small); }

/* THE PARENT'S THREE QUESTIONS (build 231, design review item 22). */
.p-parent .card.nextup .eyebrow,
.p-parent .card .eyebrow {
  font-size: var(--fs-tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}
.p-parent .card.nextup { border-left: 3px solid var(--cyan); }
.p-parent .card.nextup b { display: block; font-size: var(--fs-h2); margin: var(--sp-1) 0; }
.p-parent .card.nextup .when { margin: 0; color: var(--text-primary); }
.p-parent .card.nextup .where { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.p-parent .card.nextup .nextup-go { margin: var(--sp-4) 0 0; }