/* Mental Game platform chrome.
   Same tokens as the course pages so the application and the content
   read as one product. */

:root{
  /* Tell the BROWSER which way round it is, not just our own stylesheet.
     Without this the user agent renders every control it draws itself --
     inputs, selects, textareas, scrollbars, the canvas behind the page --
     in its light theme, whatever our tokens say. That is how the note
     thread's box ended up a white slab on six dark pages: the rule set
     width and font and nothing else, so the colours came from a browser
     that had been told the page was light.

     It is a floor, not a substitute. Anything we style still has to name
     its own colours; this only decides what an UNstyled control looks
     like, and the answer should never be "the opposite of the page". */
  color-scheme: light;

  --paper:#f7f9f5;
  --raised:#ffffff;
  --sunk:#eef1ec;
  --ink:#16221f;
  --ink-soft:#3a4a44;
  --ink-mute:#6b7a72;
  --line:#d9e0d8;
  --line-soft:#e7ebe4;

  --accent:#2f7c50;
  --accent-bg:#e9f2ed;
  --accent-ink:#0f2e1c;

  --danger:#b3392c;
  --danger-bg:#f4e9e7;
  --amber-bg:#f7edda; --amber-ink:#6b4a12;
  --on-accent:#ffffff;

  --shadow:0 1px 2px rgba(22,34,31,.05), 0 10px 26px -16px rgba(22,34,31,.22);
  --radius:12px;

  --display:'Bricolage Grotesque','Georgia',serif;
  --body:'Karla','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#131a17; --raised:#1a2320; --sunk:#101613;
    --ink:#eef3ef; --ink-soft:#c3cec7; --ink-mute:#8a988f;
    --line:#2c3733; --line-soft:#212b27;
    --accent:#4dc480; --accent-bg:#1e2f25; --accent-ink:#c5decf;
    --danger:#df7266; --danger-bg:#2a1d1b;
    --amber-bg:#33281a; --amber-ink:#e8c88a;
    --on-accent:#10201a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#131a17; --raised:#1a2320; --sunk:#101613;
  --ink:#eef3ef; --ink-soft:#c3cec7; --ink-mute:#8a988f;
  --line:#2c3733; --line-soft:#212b27;
  --accent:#4dc480; --accent-bg:#1e2f25; --accent-ink:#c5decf;
  --danger:#df7266; --danger-bg:#2a1d1b;
  --amber-bg:#33281a; --amber-ink:#e8c88a;
  --on-accent:#10201a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -16px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }

/* [hidden] MEANS HIDDEN.
   The browser's own rule for it is a user-agent rule, so ANY class of
   ours that sets display beats it -- and every one of our scripts hides
   things by setting el.hidden. That is a control still on screen doing
   nothing, which is what the game plan's pass switch was, and it had
   already been patched one selector at a time in three stylesheets
   (.gp-badge[hidden], .tabpanel[hidden], .sk-signrow[hidden]) without
   anyone naming the cause. This is the cause, fixed once.

   !important because the whole point is to outrank a display rule that
   is more specific than it is. Nothing in the platform wants an element
   carrying [hidden] to be visible; a thing that must show is shown by
   removing the attribute. */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px; background:var(--paper); border-bottom:1px solid var(--line);
}
.brand{
  display:flex; flex-direction:column; gap:1px;
  font-family:var(--display); font-weight:800; font-size:16px;
  color:var(--ink); text-decoration:none;
}
.brand small{
  font-family:var(--mono); font-weight:500; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute);
}
.topbar-right{ display:flex; align-items:center; gap:14px; }
.who{ font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); }
.linkbtn{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-mute);
  background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;
}
.linkbtn:hover{ color:var(--ink); }

/* ---------- layout ---------- */
/* --- one reading column, and the bands that sit above it -------------
   The page is a centred column. The trail and the athlete strip are
   bands: they span the viewport so their background reaches both edges,
   but what they SAY belongs to the page, and has to start where the page
   starts.
   It did not. `.ac-in` carried a flat `padding:14px 28px` and `.crumbs`
   the same, so on a 1280px screen the athlete's name began at x=28 and
   the heading directly beneath it at x=288 -- a quarter of the screen
   apart, on the coaching screens a coach opens all day. Three left
   margins were in play at once: 28 for the bands, 100 for `.page-wide`,
   288 for `.page`.
   So the width is a token now, set once from whichever column the page
   below actually uses, and read by everything that has to line up with
   it. Add a page, pick its width class, and its bands follow -- there is
   no second list to keep in step.
   `:has()` is doing the reading. Where it is not supported the token
   keeps its default and the bands line up with `.page`, which is what
   forty-three of the sixty-seven templates use: worse than the fix, far
   better than today. */
:root{ --band-w:760px; }
body:has(main.page-wide){ --band-w:1080px; }
body:has(main.page-narrow){ --band-w:440px; }

.page{ max-width:760px; margin:0 auto; padding:24px 28px 80px; }
.page-narrow{ max-width:440px; margin:0 auto; padding:64px 28px 80px; }
/* A side-by-side diff needs room: at the reading width of .page the two
   columns come out as ribbons a few words wide. */
.page-wide{ max-width:1080px; margin:0 auto; padding:24px 28px 80px; }
/* The diff wants the width; prose still wants a line you can read. */
.page-wide > h1, .page-wide > .dek{ max-width:62ch; }

h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(24px,4vw,32px); line-height:1.1;
  letter-spacing:-.01em; text-wrap:balance; margin:0 0 8px; color:var(--ink);
}
h2{ font-family:var(--display); font-weight:700; font-size:19px; margin:34px 0 12px; color:var(--ink); }
p{ margin:0 0 14px; color:var(--ink-soft); font-size:15px; max-width:66ch; }
.dek{ color:var(--ink-soft); font-size:15.5px; margin-bottom:16px; }

/* ---------- cards ---------- */
.card{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);
}
.card + .card{ margin-top:14px; }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
label{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
}
/* A question over a box reads as a sentence, in the page's own type
   (D112, site-wide; D102 did it on three screens by scope). */
label.lq{ font-family:var(--body); font-size:14.5px; font-weight:600;
  letter-spacing:normal; text-transform:none; color:var(--ink-soft); }
input[type="text"], input[type="email"], input[type="password"]{
  font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:9px; padding:11px 13px; width:100%;
}
input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-bg); }
.hint{ font-size:12.5px; color:var(--ink-mute); margin:0; }

.btn{
  font-family:var(--body); font-weight:700; font-size:15px;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink);
  border-radius:999px; padding:11px 22px; cursor:pointer; width:100%;
}
.btn:hover{ opacity:.9; }

.alert{
  border-radius:9px; padding:11px 14px; margin-bottom:18px;
  font-size:14px; border:1px solid;
  color:var(--danger); background:var(--danger-bg);
  border-color:color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ---------- dashboard bits ---------- */
.badge{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-bg);
  border-radius:999px; padding:4px 11px; margin-right:6px;
}
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14.5px; }
.kv dt{ font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); padding-top:3px; }
.kv dd{ margin:0; color:var(--ink); }

.perm-list{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.perm-list li{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);
  padding:6px 0; border-top:1px solid var(--line-soft);
}
.perm-list li:first-child{ border-top:none; }
.perm-list .pk{ color:var(--ink-mute); }

.phase-note{
  margin-top:26px; padding:16px 20px;
  background:var(--sunk); border:1px dashed var(--line);
  border-radius:var(--radius); font-size:14px; color:var(--ink-soft);
}
.phase-note strong{ color:var(--ink); }
.phase-note ul{ margin:8px 0 0; padding-left:20px; }
.phase-note li{ margin-bottom:4px; }

footer.site{
  border-top:1px solid var(--line); margin-top:60px; padding:20px 28px 40px;
  font-family:var(--mono); font-size:11px; color:var(--ink-mute); text-align:center;
}

/* ---------- course navigation (phase 2) ---------- */
.topbar-nav{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--ink-mute); text-decoration:none;
}
.topbar-nav:hover{ color:var(--ink); text-decoration:underline; }

.pillar-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0 8px; }
@media (max-width:680px){ .pillar-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .pillar-cards{ grid-template-columns:1fr; } }
.pcard{
  display:block; text-decoration:none; padding:16px 16px 18px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card-bg, var(--raised));
  transition:transform .12s ease, box-shadow .12s ease;
}
.pcard:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.pcard-dot{ display:block; width:10px; height:10px; border-radius:50%;
  margin-bottom:10px; background:var(--card-accent, var(--ink)); }
.pcard-name{ font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:3px; }
.pcard-fw{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; }
.pcard-level{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute);
}

.level-list{ display:grid; gap:10px; margin:8px 0 4px; }
.level-row{
  display:grid; grid-template-columns:38px 1fr auto; gap:16px; align-items:center;
  padding:16px 18px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--raised);
}
a.level-row:hover{ border-color:var(--accent); }
.level-row.is-locked{ background:var(--sunk); border-style:dashed; opacity:.72; }
.level-n{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; font-weight:600;
  background:var(--accent-bg); color:var(--accent-ink);
}
.level-row.is-locked .level-n{ background:var(--line-soft); color:var(--ink-mute); }
.level-name{ font-family:var(--display); font-weight:800; font-size:16px; color:var(--ink); }
.level-fw{ font-size:13.5px; color:var(--ink-soft); margin-top:1px; }
.level-desc{ font-size:12.5px; color:var(--ink-mute); margin-top:3px; }
.level-state{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
}
.level-state.is-open{ color:var(--accent); }

.ws-note{
  font-size:13.5px; color:var(--ink-mute); font-style:italic;
  margin:0 0 16px; padding-left:12px; border-left:2px solid var(--line);
}

.btn-inline{
  display:inline-block; font-weight:700; font-size:14.5px; text-decoration:none;
  color:var(--paper); background:var(--ink); border-radius:999px; padding:10px 20px;
}
.btn-inline:hover{ opacity:.9; }

/* ---------- the assessment (phase 3) ---------- */
.scale-key{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:20px 0 24px;
  font-family:var(--mono); font-size:11.5px; text-align:center; color:var(--ink-mute);
}
.scale-key > div{
  padding:10px 6px; background:var(--raised);
  border:1px solid var(--line); border-radius:10px;
}
.scale-key b{ display:block; color:var(--ink); font-size:13px; }
.scale-key span{ display:block; margin-top:3px; font-size:10.5px; }

.q-pillar{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px 6px; margin:0 0 18px; background:var(--raised);
}
.q-pillar legend{
  display:flex; align-items:center; gap:9px; padding:0 6px;
  font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink);
}
.q-dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); flex:none; }
.q-lead{ color:var(--ink-mute); font-size:13.5px; margin:6px 0 14px; }

.q-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:13px 0; border-top:1px solid var(--line-soft);
}
.q-row:first-of-type{ border-top:none; }
.q-statement{ flex:1 1 320px; font-size:14.5px; color:var(--ink); margin:0; max-width:none; }
.q-scale{ display:flex; gap:14px; flex:none; }
.q-opt{ display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
.q-opt input{ width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }
.q-opt span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }

.q-actions{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:10px 0 40px; padding:14px 18px;
  position:sticky; bottom:14px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:999px; box-shadow:var(--shadow);
}
.q-progress{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); }
.q-progress.is-complete{ color:var(--accent); font-weight:600; }
.btn-auto{ width:auto; }

/* ---------- results ---------- */
.result-table{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:8px 0 4px; }
.result-row{
  display:grid; grid-template-columns:1.5fr 0.7fr 1.6fr; gap:16px; align-items:start;
  padding:13px 18px; border-top:1px solid var(--line-soft); background:var(--raised);
  font-size:14.5px;
}
.result-row:first-child{ border-top:none; }
.result-row.is-head{
  background:var(--sunk); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
}
.result-pillar{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink); }
.result-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none; }
.result-score{ font-family:var(--mono); }
.result-score .of{ color:var(--ink-mute); font-size:12px; }
.result-level{ font-weight:600; }
/* A band above what the athlete has open. Muted rather than alarming:
   it is a description of where they are working, not a fault. */
.result-level.is-above{ color:var(--ink-mute); }
.result-note{ font-size:12.5px; color:var(--ink-mute); margin-top:4px; }
.n{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- profile ---------- */
.saved-note{
  background:var(--accent-bg); color:var(--accent-ink);
  border-radius:9px; padding:10px 14px; margin-bottom:18px; font-size:14px;
}
.due-card{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:18px 22px; margin:6px 0 10px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.due-card.is-attention{ border-left:3px solid var(--accent); }

/* Assessments already sat, on a dashboard where nothing is due. Quiet by
   design -- being up to date is not a task, but it is not a reason for
   the scores to vanish either. */
.td-sat{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.td-sat-one{
  display:flex; flex-wrap:wrap; gap:1px 8px; align-items:baseline;
  padding:7px 11px; text-decoration:none; color:inherit;
  border:1px solid var(--line-soft); border-left:3px solid var(--role, var(--line));
  border-radius:8px; background:var(--raised);
}
.td-sat-one:hover{ background:var(--sunk); border-color:var(--role, var(--line)); }
.td-sat-n{ font-weight:650; font-size:.86rem; }
.td-sat-s{ font-weight:700; }
.td-sat-of{ font-weight:400; font-size:.74rem; color:var(--ink-mute); }
.td-sat-w{ font-size:.76rem; color:var(--ink-mute); }
.due-state{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink); }
.due-detail{ font-size:13.5px; color:var(--ink-soft); margin-top:3px; max-width:56ch; }

.pillar-rows{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.prow{
  display:grid; grid-template-columns:1.3fr 0.8fr 1fr 1fr; gap:16px; align-items:center;
  padding:13px 18px; border-top:1px solid var(--line-soft); background:var(--raised);
}
.prow:first-child{ border-top:none; }
@media (max-width:700px){
  .prow{ grid-template-columns:1fr 1fr; row-gap:10px; }
}
.prow-name{ display:flex; align-items:center; gap:9px; font-size:14.5px; }
.prow-name a{ color:var(--ink); text-decoration:none; font-weight:600; }
.prow-name a:hover{ text-decoration:underline; }
.prow-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none; }
.prow-score{ font-family:var(--mono); font-size:14px; color:var(--ink); }
.prow-score .of{ color:var(--ink-mute); font-size:11.5px; }
.prow-score .ps-none{ color:var(--ink-mute); }
.delta{ margin-left:8px; font-size:11.5px; }
.delta.up{ color:#2f7c50; }
.delta.down{ color:#b3392c; }
.delta.flat{ color:var(--ink-mute); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .delta.up{ color:#4dc480; }
  :root:not([data-theme="light"]) .delta.down{ color:#df7266; }
}

/* sparkline: one series per pillar, fixed 6-30 y-scale so the nine
   small multiples are comparable at a glance. */
.prow-trend svg{ display:block; overflow:visible; }
.spark-base{ stroke:var(--line); stroke-width:1; }
.spark-line{
  fill:none; stroke:var(--spark-l); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.spark-end{ fill:var(--spark-l); stroke:var(--raised); stroke-width:2; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .spark-line{ stroke:var(--spark-d); }
  :root:not([data-theme="light"]) .spark-end{ fill:var(--spark-d); }
}
:root[data-theme="dark"] .spark-line{ stroke:var(--spark-d); }
:root[data-theme="dark"] .spark-end{ fill:var(--spark-d); }
.trend-none{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }

.prow-level select{
  font-family:var(--body); font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; width:100%; max-width:170px;
}
.prow-unlocked{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); margin-top:4px; }
.prow-fixed{ font-size:13.5px; color:var(--ink-soft); }
.sr-label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); margin:8px 0; }
table.history{ border-collapse:collapse; width:100%; font-size:13.5px; min-width:560px; }
table.history th{
  text-align:left; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
  background:var(--sunk); padding:9px 12px; border-bottom:1px solid var(--line);
}
table.history td{
  padding:10px 12px; border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
table.history tr:last-child td{ border-bottom:none; }

/* ======================================================================
   PHASE 4 -- The Playbook
   Everything below styles the athlete's own writing. It uses the same
   tokens as the rest of the app, so it flips with the theme for free.
   ====================================================================== */

/* --- utilities the Playbook pages need outside the course stylesheet -- */

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tablewrap{ overflow-x:auto; margin:14px 0; }
.btn-quiet{
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line);
}
.btn-quiet:hover{ border-color:var(--ink-mute); color:var(--ink); }
.linkbtn.danger{ color:var(--danger); }

.page .breadcrumb{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:.84rem; color:var(--ink-mute); margin-bottom:18px;
}
.page .breadcrumb .sep{ opacity:.5; }

.err-ways{ display:flex; gap:18px; flex-wrap:wrap; }

/* The trail (Phase 36). A strip under the top bar, sharing its gutter,
   because it is a second row of navigation rather than page content --
   and because inside the page column it would change width between
   .page and .page-wide, which is how the old hand-written ones ended up
   looking different on the board than everywhere else. */
.crumbs{
  /* No side padding here: the band spans, its CONTENTS align with the
     page. The 28px moves inside, onto the list, so the first crumb sits
     exactly under the heading it belongs to. */
  padding:9px 0; background:var(--sunk);
  border-bottom:1px solid var(--line-soft);
}
.crumbs ol{
  max-width:var(--band-w); margin:0 auto; padding:0 28px;
  list-style:none;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-mute);
}
.crumbs li{ display:flex; gap:8px; align-items:center; }
/* The separator is drawn, not typed: an "/" in the markup would be read
   out between every step by a screen reader. */
.crumbs li + li::before{ content:"/"; opacity:.45; }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.crumbs [aria-current="page"]{ color:var(--ink); font-weight:600; }
@media (max-width:620px){
  /* The gutter lives on the list, not the band -- see the note above. */
  .crumbs{ padding:8px 0; }
  .crumbs ol{ padding:0 18px; }
  /* On a phone a four-step trail wraps to three lines and pushes the
     heading off the screen. The last two steps are the ones that locate
     you; the top bar still holds the rest. */
  .crumbs li:not(:nth-last-child(-n+2)){ display:none; }
  .crumbs li:nth-last-child(2):not(:first-child)::before{ content:"…"; opacity:.45; }
}
@media print{ .crumbs{ display:none; } }

.pb-meter{
  display:block; height:4px; border-radius:99px;
  background:var(--sunk); overflow:hidden;
}
.pb-meter > span{
  display:block; height:100%; background:var(--accent); border-radius:99px;
}

/* --- the controls themselves ---------------------------------------- */

.pb-in{
  font:inherit; font-weight:600;
  color:var(--ink); background:var(--raised);
  border:0; border-bottom:2px solid var(--accent);
  border-radius:3px 3px 0 0;
  padding:2px 6px; min-width:8ch;
  transition:background .12s, border-color .12s;
}
.pb-in:hover{ background:var(--accent-bg); }
.pb-in:focus{ outline:none; background:var(--accent-bg); border-bottom-color:var(--ink); }
.pb-in.is-bad{ border-bottom-color:var(--danger); background:var(--danger-bg); }

textarea.pb-in{
  display:inline-block; vertical-align:bottom;
  width:min(100%, 40ch); resize:vertical;
  line-height:1.5; overflow:hidden;
}
/* Commitment blanks sit inside a sentence, so they stay narrow enough
   for the sentence to survive around them. */
textarea.pb-roomy-sm{ width:min(100%, 24ch); }
.pb-cell{ width:100%; min-width:6ch; font-weight:500; }
.pb-num{ width:5.5ch; text-align:center; }
.pb-outof{ color:var(--ink-mute); font-size:.85em; margin-left:6px; }

.pb-p{ margin:10px 0; line-height:2.1; }
.pb-list{ margin:10px 0; padding-left:20px; }
.pb-list li{ margin:9px 0; line-height:2.1; }

.pb-error{
  display:block; margin-top:4px;
  font-size:.8rem; color:var(--danger); font-weight:600;
}

.pb-written{
  font-weight:600; color:var(--ink);
  border-bottom:2px solid var(--accent); padding:0 3px;
}
.pb-unfilled{ color:var(--ink-mute); }
.pb-unfilled-block{ color:var(--ink-mute); font-style:italic; margin:10px 0; }

/* --- tables: rating grids, audits, logs ------------------------------ */

.pb-table, .pb-log{
  width:100%; border-collapse:collapse; font-size:.92rem;
  min-width:440px;
}
.pb-table th, .pb-table td, .pb-log th, .pb-log td{
  padding:9px 10px; border-bottom:1px solid var(--line-soft);
  text-align:left; vertical-align:middle;
}
.pb-table thead th, .pb-log thead th{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--sunk);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.pb-statement{ font-weight:500; color:var(--ink); max-width:34ch; }

.pb-radio{ text-align:center; width:3.2rem; padding:6px 4px; }
.pb-radio label{
  display:grid; place-items:center; gap:3px; cursor:pointer;
  padding:5px 0; border-radius:7px;
}
.pb-radio label:hover{ background:var(--accent-bg); }
.pb-radio input{ margin:0; accent-color:var(--accent); }
.pb-radio span{ font-family:var(--mono); font-size:.72rem; color:var(--ink-mute); }
.pb-radio input:checked + span{ color:var(--accent); font-weight:600; }
.pb-rating-read, .pb-score-read{
  font-family:var(--mono); font-weight:600; color:var(--accent);
  white-space:nowrap;
}

.pb-logwrap{ margin:14px 0; }
.pb-log-x{ width:2.4rem; text-align:center; }
.pb-rowx{
  border:0; background:transparent; cursor:pointer;
  color:var(--ink-mute); font-size:1.1rem; line-height:1;
  padding:2px 6px; border-radius:5px;
}
.pb-rowx:hover{ color:var(--danger); background:var(--danger-bg); }
.pb-addrow{
  font:inherit; font-size:.85rem; font-weight:600;
  color:var(--accent); background:transparent;
  border:1px dashed var(--line); border-radius:8px;
  padding:7px 14px; cursor:pointer;
}
.pb-addrow:hover{ border-color:var(--accent); background:var(--accent-bg); }

/* --- worksheet chrome on the module page ----------------------------- */

.ws-head{
  display:flex; gap:20px; justify-content:space-between;
  align-items:flex-start; flex-wrap:wrap; margin-bottom:8px;
}
.ws-status{
  display:flex; align-items:baseline; gap:6px;
  font-size:.85rem; color:var(--ink-mute); white-space:nowrap;
}
.ws-count{ font-family:var(--mono); font-weight:600; color:var(--ink); font-size:1.05rem; }
.ws-saved{ font-size:.78rem; font-weight:600; min-width:6.5ch; }
.ws-saved.is-saving{ color:var(--ink-mute); }
.ws-saved.is-ok{ color:var(--accent); }
.ws-saved.is-error{ color:var(--danger); }

.ws-trends{
  margin:22px 0 6px; padding:16px 18px;
  background:var(--sunk); border-radius:var(--radius);
}
.ws-trend-note{ font-size:.88rem; color:var(--ink-mute); margin:6px 0 14px; }
.ws-trend-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.ws-trend{
  background:var(--raised); border:1px solid var(--line-soft);
  border-radius:9px; padding:10px 12px;
}
.ws-trend-label{
  font-size:.78rem; color:var(--ink-soft); line-height:1.35;
  min-height:2.7em; margin-bottom:6px;
}
.ws-spark{ display:block; width:100%; height:24px; overflow:visible; }
.ws-spark polyline{
  fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ws-spark-end{
  stroke:var(--accent); stroke-width:6; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.ws-trend-now{ display:flex; align-items:baseline; gap:5px; margin-top:6px; }
.ws-trend-now b{ font-family:var(--mono); font-size:1.05rem; }
.ws-trend-now span{ font-size:.78rem; color:var(--ink-mute); }
.ws-delta{ font-family:var(--mono); font-size:.75rem; font-weight:600; }
.ws-delta.up{ color:var(--accent); }
.ws-delta.down{ color:var(--danger); }

.ws-complete{
  display:flex; gap:20px; justify-content:space-between; align-items:center;
  flex-wrap:wrap; margin-top:26px; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--raised);
}
.ws-complete.is-done{ background:var(--accent-bg); border-color:var(--accent); }
.ws-complete-title{ font-family:var(--display); font-weight:700; font-size:1.05rem; }
.ws-complete p{ margin:5px 0 0; font-size:.9rem; color:var(--ink-soft); max-width:58ch; }

/* --- the Playbook index ---------------------------------------------- */

.pb-stats{
  display:flex; gap:14px; flex-wrap:wrap; align-items:stretch;
  margin:26px 0 30px;
}
.pb-stat{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 18px; min-width:150px;
}
.pb-stat-n{ font-family:var(--mono); font-size:1.7rem; font-weight:600; }
.pb-stat-n span{ font-size:.9rem; color:var(--ink-mute); margin-left:4px; }
.pb-stat-l{
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:3px;
}
.pb-stat-links{
  display:flex; flex-direction:column; gap:5px; justify-content:center;
  flex:1 1 220px; font-size:.9rem; font-weight:600;
}

.pb-pillars{ display:flex; flex-direction:column; gap:16px; }
.pb-pillar{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px 18px;
}
.pb-pillar-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.pb-pillar-head h2{ font-size:1.08rem; margin:0; flex:1; }
.pb-pillar-count{
  font-family:var(--mono); font-size:.75rem; color:var(--ink-mute);
}
.pb-dot{
  width:10px; height:10px; border-radius:99px;
  background:var(--accent); flex:none;
}
/* Four levels, so four columns where there is room -- a pillar reads as
   one run from Beginner to Elite, not three and a leftover. */
.pb-modules{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.pb-module{
  display:flex; flex-direction:column; gap:5px;
  padding:11px 13px; border-radius:9px; text-decoration:none;
  border:1px solid var(--line-soft); background:var(--paper);
  color:var(--ink);
}
/* `a.`, because the grid holds two kinds of tile now: an open module,
   which is a link, and a level nobody has opened, which is a div. A hover
   state on something that does not move is the same promise the link
   itself was making. */
a.pb-module:hover{ border-color:var(--accent); background:var(--accent-bg); }
.pb-module.is-filed{ border-color:var(--accent); }
/* Not open yet. Dashed rather than greyed out, and still in the pillar's
   colour: this is the only place an athlete is told the level exists, so
   it is drawn as something coming rather than something denied. */
.pb-module.is-shut{
  border-style:dashed; background:transparent;
  justify-content:flex-start; gap:5px;
}
.pb-module.is-shut .pb-heading{ color:var(--ink-soft); font-weight:600; }
.pb-module.is-shut .pb-progress{ color:var(--ink-mute); }
.pb-shut-note{
  margin:18px 0 0; font-size:.86rem; color:var(--ink-mute); max-width:62ch;
}
.pb-level{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pb-heading{ font-size:.9rem; font-weight:600; line-height:1.35; }
.pb-progress{ font-family:var(--mono); font-size:.72rem; color:var(--ink-mute); }
/* --ink, not the pillar's accent. `--accent` is set inline on this tile
   from the pillar's LIGHT palette, which is right for the dot and the
   border and wrong for text: on the dark ground Courage reads 2.98:1 and
   Goals 2.75:1. The tile already carries the hue where contrast is not
   the question being asked. */
.pb-module.is-filed .pb-progress{ color:var(--ink); font-weight:600; }

/* --- collections: field cards, commitments --------------------------- */

.pb-collection-actions{ margin:20px 0 24px; }
.pb-card{
  background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:16px 20px 18px; margin-bottom:14px;
}
.pb-card-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.pb-card-head h2{ font-size:1.05rem; margin:2px 0 0; }
.pb-card-head .pb-dot{ margin-top:6px; }
.pb-card-eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pb-card-edit{ margin-left:auto; font-size:.82rem; font-weight:600; white-space:nowrap; }
.pb-entry{ padding:9px 0; border-bottom:1px solid var(--line-soft); }
.pb-entry:last-child{ border-bottom:0; }
.pb-entry-anchor{ font-size:.8rem; color:var(--ink-mute); margin-bottom:3px; }
.pb-entry-value{ font-weight:600; white-space:pre-wrap; }

.pb-contract{
  border:1px solid var(--accent); background:var(--accent-bg);
  border-radius:var(--radius); padding:20px 22px; margin:22px 0 26px;
}
.pb-contract h2{ margin:6px 0 8px; }
.pb-contract p{ margin:0; color:var(--ink-soft); max-width:62ch; }
.pb-contract-progress{ margin:22px 0 26px; }
.pb-contract-progress p{ font-size:.88rem; color:var(--ink-mute); margin:8px 0 0; }

.pb-empty{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:28px 24px; text-align:center; color:var(--ink-mute);
  display:flex; flex-direction:column; gap:14px; align-items:center;
  margin:24px 0;
}

/* --- sharing ---------------------------------------------------------- */

.pb-share-current, .pb-share-new{ margin:30px 0; }
.pb-share-current h2, .pb-share-new h2{ font-size:1.15rem; margin:0 0 12px; }
.pb-share-none{ color:var(--ink-mute); font-size:.92rem; }
.pb-share-rows{ display:flex; flex-direction:column; gap:8px; }
.pb-share-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:9px; padding:12px 16px;
}
.pb-share-who{ font-weight:600; }
.pb-share-scope{ font-size:.82rem; color:var(--ink-mute); margin-top:2px; }

.pb-share-form{ display:flex; flex-direction:column; gap:18px; max-width:52ch; }
.pb-share-form > button{ align-self:flex-start; }
.pb-scope{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:12px;
}
.pb-scope legend{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); padding:0 6px;
}
/* These options are <label> elements, and the global label rule sets
   mono uppercase for form field names. That is right for "Share with"
   and wrong for a sentence, so it is undone here. */
.pb-scope-opt{
  display:grid; grid-template-columns:auto 1fr; gap:6px 10px;
  align-items:center;
  font-family:var(--body); font-size:15px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.pb-scope-opt select{ grid-column:2; }
.pb-scope-title{ font-weight:600; }
.pb-scope-note{ grid-column:2; font-size:.82rem; color:var(--ink-mute); }

.pb-shared-in{ margin:24px 0; }
.pb-shared-rows, .pb-shared-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.pb-shared-row, .pb-shared-module{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--raised); border:1px solid var(--line);
  border-radius:9px; padding:12px 16px; color:var(--ink);
}
.pb-shared-row:hover, .pb-shared-module:hover{ border-color:var(--accent); }
.pb-shared-who{ font-weight:600; }
.pb-shared-scope{ margin-left:auto; font-size:.82rem; color:var(--ink-mute); }
.pb-shared-body{ display:flex; flex-direction:column; gap:2px; flex:1; }
.pb-shared-heading{ font-weight:600; font-size:.95rem; }

/* --- print view ------------------------------------------------------- */

.pb-print-bar{
  display:flex; gap:18px; justify-content:space-between; align-items:center;
  flex-wrap:wrap; background:var(--sunk); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:26px; font-size:.9rem;
}
.pb-print-bar-actions{ display:flex; gap:14px; align-items:center; }
.pb-print-head{ margin-bottom:30px; }
.pb-print-module{
  border-top:2px solid var(--accent); padding-top:16px; margin-bottom:34px;
  break-inside:auto; page-break-inside:auto;
}
.pb-print-module-head{ margin-bottom:14px; }
.pb-print-module-head h2{ margin:4px 0 0; font-size:1.25rem; }
.pb-filed-tag{
  display:inline-block; margin-top:6px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-bg); border-radius:99px; padding:3px 10px;
}

@media print{
  .topbar, footer.site, .no-print, .pb-card-edit{ display:none !important; }
  body{ background:#fff; color:#000; }
  .page{ max-width:none; padding:0; }
  .pb-print-module{ page-break-before:auto; }
  .pb-print-module-head, .ws-group-title{ page-break-after:avoid; }
  a{ color:#000; text-decoration:none; }
}

@media (max-width:640px){
  .ws-complete{ flex-direction:column; align-items:stretch; }
  .pb-stat-links{ flex:1 1 100%; }
}

/* ======================================================================
   PHASE 5 -- Administration, roles, squads, logs, coach views
   ====================================================================== */

.admin-nav{
  display:flex; gap:4px; flex-wrap:wrap;
  margin-bottom:26px; padding-bottom:2px;
  border-bottom:1px solid var(--line);
}
/* Seven tabs from Phase 16 (Criteria joined them), and .page is 760px
   wide -- at the old 14px padding the last one wrapped onto a line of
   its own. Tightened rather than widened: the reading measure is worth
   more than four pixels of tab. */
.admin-nav a{
  padding:8px 10px; border-radius:8px 8px 0 0;
  font-size:.9rem; font-weight:600; text-decoration:none;
  color:var(--ink-mute); border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.admin-nav a:hover{ color:var(--ink); background:var(--sunk); }
.admin-nav a.is-here{ color:var(--accent); border-bottom-color:var(--accent); }

.alert.is-ok{
  background:var(--accent-bg); color:var(--accent-ink);
  border:1px solid var(--accent);
}

/* --- tiles ------------------------------------------------------------ */

.admin-tiles{
  display:grid; gap:12px; margin:26px 0 32px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.admin-tile{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px;
}
.admin-tile:hover{ border-color:var(--accent); }
.admin-tile-n{ font-family:var(--mono); font-size:1.9rem; font-weight:600; line-height:1; }
.admin-tile-l{
  font-family:var(--display); font-size:1.1rem; font-weight:700; margin-top:6px;
}
.admin-tile p{ font-size:.88rem; color:var(--ink-mute); margin:8px 0 0; }

/* --- tables ----------------------------------------------------------- */

.admin-table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:620px; }
.admin-table th, .admin-table td{
  text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--line-soft); vertical-align:top;
}
.admin-table thead th{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  background:var(--sunk); border-bottom:1px solid var(--line); white-space:nowrap;
}
.admin-table tr:last-child td{ border-bottom:0; }
.admin-empty{ color:var(--ink-mute); text-align:center; padding:26px 14px; }
.mono{ font-family:var(--mono); font-size:.85em; }

.tag{
  display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; margin-right:5px;
  background:var(--sunk); color:var(--ink-mute); white-space:nowrap;
}
.tag-active{ background:var(--accent-bg); color:var(--accent); }
.tag-disabled{ background:var(--danger-bg); color:var(--danger); }
.tag-invited{ background:var(--sunk); color:var(--ink-soft); }
.tag-minor{ background:var(--danger-bg); color:var(--danger); }

/* --- forms ------------------------------------------------------------ */

.admin-filter{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 18px;
}
.admin-filter input[type="text"]{ width:auto; min-width:220px; }

.admin-form-block{
  margin:32px 0; padding:20px 22px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius);
}
.admin-form-block h2{ font-size:1.15rem; margin:0 0 6px; }
.admin-form{ display:flex; flex-direction:column; gap:14px; max-width:56ch; }
.admin-form-wide{ max-width:none; }
.admin-form > button{ align-self:flex-start; }
.admin-cols{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  align-items:start;
}
.admin-cols .admin-form-block{ margin:0; }
.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* The parent-link panel on an account page (Phase 44). One list of who
   this account may read, and one row to add another. */
.admin-list{ list-style:none; margin:0 0 14px; padding:0;
             display:flex; flex-direction:column; gap:1px;
             border:1px solid var(--line); border-radius:9px;
             overflow:hidden; }
.admin-list > li{ display:flex; align-items:center; justify-content:space-between;
                  gap:12px; flex-wrap:wrap; padding:9px 13px;
                  background:var(--raised);
                  border-top:1px solid var(--line-soft); }
.admin-list > li:first-child{ border-top:none; }
.admin-list .hint{ display:block; margin:2px 0 0; }
.admin-inline{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.admin-inline label{ display:flex; flex-direction:column; gap:4px; }
.admin-inline select, .admin-inline input[type="text"]{
  font-family:var(--body); font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; min-width:180px;
}
.danger-block{ border-color:var(--danger); }
.danger-block h2{ color:var(--danger); }

.checkline{
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--body); font-size:.93rem; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink);
  padding:5px 0; cursor:pointer;
}
.checkline input{ margin:0; accent-color:var(--accent); flex:none; }
.checkline b{ font-weight:600; }
.checkline .hint{ font-size:.82rem; }

.perm-group{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px 14px; margin:0;
}
.perm-group legend{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  padding:0 6px;
}
.admin-details{ margin-top:14px; }
/* The other side of a people picker. A squad's coach column can still add
   an athlete and the other way round, without either list being the
   ninety-name one. Inside a fieldset it needs a line to sit under. */
.perm-group .admin-details{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft);
}
.admin-details summary{
  cursor:pointer; font-size:.86rem; font-weight:600; color:var(--ink-mute);
}
.plain-list{ list-style:none; margin:0; padding:0; }
.plain-list li{ padding:7px 0; border-bottom:1px solid var(--line-soft); }
.plain-list li:last-child{ border-bottom:0; }

/* --- roles and squads ------------------------------------------------- */

.role-cards, .squad-cards{
  display:grid; gap:12px; margin:24px 0;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.role-card, .squad-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
}
.role-card:hover, .squad-card:hover{ border-color:var(--accent); }
.role-card-head{ display:flex; align-items:center; gap:8px; }
.role-card h2, .squad-card h2{ font-size:1.05rem; margin:0; }
.role-card p, .squad-card p{ font-size:.86rem; color:var(--ink-mute); margin:7px 0 0; }
.role-card-foot, .squad-card-foot{
  display:flex; gap:14px; margin-top:12px;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-mute);
}

/* --- logs -------------------------------------------------------------- */

.log-tabs{ display:flex; gap:6px; margin:20px 0 16px; }
.log-tabs a{
  padding:7px 14px; border-radius:99px; font-size:.86rem; font-weight:600;
  text-decoration:none; color:var(--ink-mute); border:1px solid var(--line);
}
.log-tabs a.is-here{
  color:var(--accent); border-color:var(--accent); background:var(--accent-bg);
}

/* ======================================================================
   PHASE 6 -- Level approval
   ====================================================================== */

.nav-badge{
  display:inline-block; min-width:18px; padding:1px 6px;
  border-radius:99px; background:var(--accent); color:var(--paper);
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  text-align:center; vertical-align:1px;
}


/* --- the account block on the profile -------------------------------- */

.account-grid{
  display:grid; gap:16px; margin:16px 0 40px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.account-grid .card{ margin:0; }
.account-grid h3{
  font-family:var(--display); font-size:1.05rem; font-weight:700; margin:0 0 14px;
}
.account-grid .field:last-of-type{ margin-bottom:20px; }

/* ======================================================================
   Tabs
   The tablist is hidden until tabs.js marks the container `is-tabbed`,
   so with scripting off the page stays one long readable list rather
   than a row of buttons that do nothing.
   ====================================================================== */

.tabs > .tablist{ display:none; }
.tabs.is-tabbed > .tablist{
  display:flex; gap:2px; flex-wrap:wrap;
  margin:30px 0 4px; padding-bottom:2px;
  border-bottom:1px solid var(--line);
}

.tablist [role="tab"]{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-size:.95rem; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--ink-mute); background:transparent;
  border:0; border-bottom:2px solid transparent;
  padding:11px 16px; margin-bottom:-1px;
  border-radius:8px 8px 0 0; cursor:pointer;
  transition:color .12s, background .12s;
}
.tablist [role="tab"]:hover{ color:var(--ink); background:var(--sunk); }
.tablist [role="tab"][aria-selected="true"]{
  color:var(--accent); border-bottom-color:var(--accent);
}
.tablist [role="tab"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px;
}

.tab-badge, .tab-count{
  display:inline-block; min-width:19px; padding:1px 7px;
  border-radius:99px; font-family:var(--mono); font-size:.68rem;
  font-weight:600; text-align:center;
}
/* Something is waiting on somebody else -- worth the accent. */
.tab-badge{ background:var(--accent); color:var(--paper); }
/* Just a count, not a call to action. */
.tab-count{ background:var(--sunk); color:var(--ink-mute); }
[aria-selected="true"] .tab-count{ background:var(--accent-bg); color:var(--accent); }

.tabs.is-tabbed > .tabpanel{ padding-top:22px; }
.tabs.is-tabbed > .tabpanel[hidden]{ display:none; }
.tabpanel:focus{ outline:none; }
.tabpanel > h2:first-child{ margin-top:0; }

/* Un-tabbed fallback: keep the old vertical rhythm between sections. */
.tabs:not(.is-tabbed) > .tabpanel{ margin-top:34px; }

@media (max-width:560px){
  .tablist [role="tab"]{ padding:10px 12px; font-size:.9rem; }
}

/* ======================================================================
   Worksheet history and diffs
   ====================================================================== */

.ws-history-link{ font-size:.82rem; font-weight:600; margin-right:12px; }

.pb-module-wrap{ display:flex; flex-direction:column; }
.pb-module-wrap .pb-module{ flex:1; }
.pb-module-history{
  align-self:flex-start; margin-top:5px; padding:3px 9px;
  font-size:.74rem; font-weight:600; text-decoration:none;
  color:var(--ink-mute); border:1px solid var(--line-soft); border-radius:99px;
}
.pb-module-history:hover{ color:var(--accent); border-color:var(--accent); }

/* --- picking two versions -------------------------------------------- */

.ver-picker{
  display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; margin:24px 0 26px;
}
.ver-picker label{
  display:flex; flex-direction:column; gap:5px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.ver-picker select{ min-width:16rem; }
.ver-arrow{ padding-bottom:10px; color:var(--ink-mute); }

.ver-layout{
  display:grid; gap:24px; align-items:start;
  grid-template-columns:minmax(230px, 300px) minmax(0, 1fr);
}
@media (max-width:820px){ .ver-layout{ grid-template-columns:1fr; } }

/* --- the timeline ----------------------------------------------------- */

.ver-timeline ol{ list-style:none; margin:12px 0 0; padding:0; }
.ver-timeline li{
  position:relative; padding:12px 0 12px 20px;
  border-left:2px solid var(--line);
}
.ver-timeline li::before{
  content:""; position:absolute; left:-6px; top:18px;
  width:10px; height:10px; border-radius:99px;
  background:var(--paper); border:2px solid var(--line);
}
.ver-timeline li.is-a::before,
.ver-timeline li.is-b::before{ border-color:var(--accent); background:var(--accent); }
.ver-timeline li.is-a, .ver-timeline li.is-b{ border-left-color:var(--accent); }

.ver-when{ display:flex; align-items:baseline; gap:8px; }
.ver-when b{ font-family:var(--mono); font-size:.74rem; color:var(--ink-mute); }
.ver-when a{ font-weight:600; font-size:.92rem; }
.ver-what{ font-size:.8rem; color:var(--ink-mute); margin-top:3px; }
.ver-sections{ margin-top:6px; display:flex; gap:4px; flex-wrap:wrap; }
.ver-sections .tag{ font-size:.6rem; padding:2px 7px; }
.ver-filed{
  margin-top:6px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}

/* --- the difference --------------------------------------------------- */

.ver-diff h2{ margin:0 0 4px; font-size:1.2rem; }
.ver-group{ margin:24px 0; }
.ver-group-title{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  padding-bottom:6px; border-bottom:1px solid var(--line); margin-bottom:4px;
}

.ver-change{ padding:14px 0; border-bottom:1px solid var(--line-soft); }
.ver-change:last-child{ border-bottom:0; }
.ver-anchor{ font-size:.86rem; color:var(--ink-soft); margin-bottom:8px; }
/* Two blanks in one sentence would otherwise print the same label twice. */
.ver-anchor-note{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:var(--surface-2, #eef1f5); color:var(--ink-soft);
  font-size:.72rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}

.ver-pair{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .ver-pair{ grid-template-columns:1fr; } }

.ver-side{ border-radius:9px; padding:11px 13px; }
.ver-side-old{ background:var(--danger-bg); }
.ver-side-new{ background:var(--accent-bg); }
.ver-side-label{
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px;
}
.ver-side-old .ver-side-label{ color:var(--danger); }
.ver-side-new .ver-side-label{ color:var(--accent); }
.ver-text{ font-size:.94rem; line-height:1.6; white-space:pre-wrap; word-break:break-word; }

/* The words that actually moved. */
.ver-text del{
  background:var(--danger-bg); color:var(--danger);
  text-decoration:line-through; text-decoration-thickness:1px;
  padding:0 2px; border-radius:3px;
}
.ver-text ins{
  background:var(--accent-bg); color:var(--accent-ink);
  text-decoration:none; font-weight:600;
  padding:0 2px; border-radius:3px;
}

.ver-numbers{ display:flex; align-items:baseline; gap:10px; font-family:var(--mono); }
.ver-was{ color:var(--ink-mute); text-decoration:line-through; }
.ver-now{ font-size:1.15rem; font-weight:600; }
.ver-now.up{ color:var(--accent); }
.ver-now.down{ color:var(--danger); }

.ver-banner{
  background:var(--sunk); border-radius:var(--radius);
  padding:12px 16px; margin-bottom:22px;
  font-size:.9rem; color:var(--ink-soft);
}

/* ======================================================================
   ROLES -- scoring the profile per discipline
   The accents live on the elements as --role / --role-dark, set inline
   from disciplines.py, so one place owns the colour and the theme flip
   still works for free.
   ====================================================================== */

.role-accent{ color:var(--role); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .role-accent{ color:var(--role-dark); }
}
:root[data-theme="dark"] .role-accent{ color:var(--role-dark); }

/* --- the frame above a sitting --------------------------------------- */
.role-band{
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 20px; margin:0 0 24px;
  background:var(--role-bg); border:1px solid var(--line);
  border-left:4px solid var(--role); border-radius:var(--radius);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .role-band{
    background:var(--role-bg-dark); border-left-color:var(--role-dark); }
}
:root[data-theme="dark"] .role-band{
  background:var(--role-bg-dark); border-left-color:var(--role-dark); }
.role-band-body{ flex:1 1 auto; }
.role-band-title{
  font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink);
  margin-bottom:3px;
}
.role-band-framing{ font-size:14px; color:var(--ink-soft); margin:0; max-width:52ch; }
.role-band-switch{
  flex:none; font-family:var(--mono); font-size:11px; color:var(--ink-mute);
  text-decoration:underline;
}
.role-band-switch:hover{ color:var(--ink); }

/* --- picking which role answers -------------------------------------- */
.role-choices{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.role-choice{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 18px 16px; text-decoration:none;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.role-choice:hover{ border-color:var(--role); }
.role-choice.is-due{ border-left:3px solid var(--role); }
.role-choice-top{ display:flex; align-items:center; gap:9px; }
.role-choice-dot{ width:11px; height:11px; border-radius:50%; background:var(--role); flex:none; }
.role-choice-name{ font-family:var(--display); font-weight:800; font-size:16px; color:var(--ink); }
.role-choice-state{ font-size:14px; color:var(--ink); font-weight:600; }
.role-choice.is-due .role-choice-state{ color:var(--role); }
.role-choice-when{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.role-choice-go{ margin-top:6px; font-size:13.5px; font-weight:700; color:var(--accent); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .role-choice-dot{ background:var(--role-dark); }
  :root:not([data-theme="light"]) .role-choice.is-due{ border-left-color:var(--role-dark); }
  :root:not([data-theme="light"]) .role-choice.is-due .role-choice-state{ color:var(--role-dark); }
}
:root[data-theme="dark"] .role-choice-dot{ background:var(--role-dark); }
:root[data-theme="dark"] .role-choice.is-due{ border-left-color:var(--role-dark); }
:root[data-theme="dark"] .role-choice.is-due .role-choice-state{ color:var(--role-dark); }

/* --- setting which roles you play ------------------------------------ */
.role-picker{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin:4px 0 16px; }
.role-option{
  /* A whole card inside a <label>: without these the site's label style
     (monospace capitals) takes the role's name and its sentence. */
  font-family:var(--body); font-weight:400; letter-spacing:normal; text-transform:none;
  display:flex; flex-direction:column; gap:7px; cursor:pointer;
  padding:16px 16px 14px; background:var(--raised);
  border:1px solid var(--line); border-radius:var(--radius);
}
.role-option:hover{ border-color:var(--role); }
.role-option-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.role-option-name{ display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:800; font-size:15.5px; color:var(--ink); }
.role-option-dot{ width:11px; height:11px; border-radius:50%; background:var(--role); flex:none; }
.role-option input{ width:19px; height:19px; accent-color:var(--role); cursor:pointer; flex:none; }
.role-option-note{ font-size:13px; color:var(--ink-soft); margin:0; }

/* The stream select inside a role card. Its own row under the note so
   it reads as a follow-up question about that role rather than a
   second role, and `display:block` on the span so the label and the
   select stack on a phone. */
/* A stream chip sits beside the role chips and has to read as a
   narrower thing than a role, not a fourth one -- so it borrows the
   chip shape and drops to the muted ink rather than taking a colour of
   its own. Colour is never the only signal here: the word itself
   ("Pace", "Spin") is the label. */
.gr-stream-chip{ color:var(--ink-mute); border-style:dashed; }

/* The one-line explanation of what the stream filter is keeping off
   the page. Quieter than the standing line above it. */
.gr-stream-line{ font-size:13px; color:var(--ink-soft); margin-top:-6px; }

.role-option-stream{ display:block; margin-top:10px; font-size:13px;
  font-family:var(--body); font-weight:600; letter-spacing:normal; text-transform:none;
  color:var(--ink-soft); cursor:pointer; }
.role-option-stream span{ display:block; margin-bottom:4px; }
.role-option-stream select{ width:100%; padding:7px 9px; font:inherit;
  font-size:13px; font-weight:400; color:var(--ink); background:var(--raised);
  border:1px solid var(--line); border-radius:7px; cursor:pointer; }
.role-option-state{ font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:auto; }
.role-option.is-on{ border-color:var(--role); background:var(--role-bg); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .role-option-dot{ background:var(--role-dark); }
  :root:not([data-theme="light"]) .role-option.is-on{
    border-color:var(--role-dark); background:var(--role-bg-dark); }
}
:root[data-theme="dark"] .role-option-dot{ background:var(--role-dark); }
:root[data-theme="dark"] .role-option.is-on{
  border-color:var(--role-dark); background:var(--role-bg-dark); }

/* --- the spread strip -------------------------------------------------
   One 6-30 track, one dot per role. The distance between the dots IS the
   finding, so the axis is fixed rather than fitted to the data -- a
   self-scaled track would make a two-point wobble look like a chasm.
   Every dot is also labelled with its role and score below, so colour is
   never the only thing carrying the meaning. */
.spread{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.spread-track{ position:relative; height:9px; }
.spread-rule{ position:absolute; left:0; right:0; top:4px; height:1px; background:var(--line); }
.spread-dot{
  position:absolute; top:0; width:9px; height:9px; border-radius:50%;
  margin-left:-4.5px; border:1.5px solid var(--raised); background:var(--role);
}
.spread-dot.is-driving{ width:11px; height:11px; top:-1px; margin-left:-5.5px; }
.spread-keys{ display:flex; flex-wrap:wrap; gap:4px 11px;
  font-family:var(--mono); font-size:10px; color:var(--ink-mute); }
.spread-key{ display:flex; align-items:center; gap:4px; white-space:nowrap; }
.spread-chip{ width:7px; height:7px; border-radius:50%; background:var(--role); flex:none; }
.spread-key b{ color:var(--ink); font-weight:600; }
.spread-key.is-driving b{ color:var(--ink); }
.spread-single{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .spread-dot,
  :root:not([data-theme="light"]) .spread-chip{ background:var(--role-dark); }
}
:root[data-theme="dark"] .spread-dot,
:root[data-theme="dark"] .spread-chip{ background:var(--role-dark); }

.gap-flag{
  display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:99px;
  background:var(--sunk); color:var(--ink-soft); white-space:nowrap;
}
.drives{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:3px;
}

/* --- the gap callout, where the whole idea earns its keep ------------- */
.gap-card{
  padding:18px 20px; margin:0 0 20px;
  background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--role); border-radius:var(--radius); box-shadow:var(--shadow);
}
.gap-card p{ margin:0; font-size:14.5px; color:var(--ink-soft); max-width:62ch; }
.gap-card b{ color:var(--ink); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gap-card{ border-left-color:var(--role-dark); }
}
:root[data-theme="dark"] .gap-card{ border-left-color:var(--role-dark); }

/* --- per-role clocks on the dashboard -------------------------------- */
.role-clocks{ border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--raised); margin:6px 0 10px; }
.clock{ display:grid; grid-template-columns:1.1fr 1fr auto; gap:16px; align-items:center;
  padding:13px 18px; border-top:1px solid var(--line-soft); }
.clock:first-child{ border-top:none; }
.clock-name{ display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; }
.clock-dot{ width:10px; height:10px; border-radius:50%; background:var(--role); flex:none; }
.clock-when{ font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); }
.clock-when.is-due{ color:var(--accent); }
@media (max-width:640px){ .clock{ grid-template-columns:1fr; row-gap:6px; } }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .clock-dot{ background:var(--role-dark); }
}
:root[data-theme="dark"] .clock-dot{ background:var(--role-dark); }
.btn-small{ font-size:13px; padding:7px 15px; }
.because{ font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--ink-mute); margin-top:3px; }
.because b{ color:var(--ink); font-weight:600; }

/* ======================================================================
   Journal (Phase 13)
   ====================================================================== */

.jr-streak{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow);
}
.jr-streak-n b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:44px; line-height:1; color:var(--accent);
}
.jr-streak-n span{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px;
}
.jr-streak-mid{ min-width:210px; }
.jr-kv{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); }
.jr-kv b{ color:var(--ink); font-size:14px; }
.jr-kv-note{ margin-top:7px; }
.jr-days{ display:flex; gap:4px; margin-top:6px; }
.jr-sq{
  width:15px; height:15px; border-radius:4px;
  background:var(--sunk); border:1px solid var(--line-soft);
}
.jr-sq.on{ background:var(--accent); border-color:var(--accent); }
.jr-sq.today{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }
.jr-streak-side{ margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:4px; }

.jr-notice{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  background:var(--accent-bg); border:1px solid rgba(47,124,80,.28);
  border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--accent-ink);
}
.jr-eye{ font-family:var(--mono); font-weight:600; font-size:11px; opacity:.75; padding-top:1px; }

.jr-types{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:620px){ .jr-types{ grid-template-columns:1fr; } }
.jr-type{
  display:block; background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow); text-decoration:none;
}
.jr-type:hover{ border-color:var(--ink-mute); border-left-color:var(--accent); }
.jr-type.wide{
  grid-column:1 / -1; border-left-color:var(--accent);
  background:linear-gradient(90deg,var(--accent-bg),var(--raised) 55%);
}
.jr-type-top{ display:flex; align-items:baseline; gap:8px; }
.jr-type h3{ margin:0; font-family:var(--display); font-size:15px; color:var(--ink); }
.jr-cadence{
  margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-mute);
}
.jr-type p{ margin:5px 0 0; font-size:13.2px; color:var(--ink-mute); line-height:1.45; }
.jr-go{
  display:inline-block; margin-top:9px; font-family:var(--mono); font-size:11px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
}

.jr-entries{ display:flex; flex-direction:column; gap:10px; }
.jr-entry{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 17px;
}
.jr-entry header{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.jr-entry-t{ font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; }
.jr-entry-t:hover{ text-decoration:underline; }
.jr-vs{ font-size:13px; color:var(--ink-soft); }
/* The kind, beside the title rather than instead of it. Quiet, because
   it is the same six words over and over and the title is the part
   worth reading. */
.jr-kindtag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-mute);
  border:1px solid var(--line-soft); border-radius:5px; padding:1px 6px;
}
.jr-when{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.jr-snip{ margin:6px 0 0; font-size:13.5px; color:var(--ink-mute); line-height:1.5; }
.jr-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.jr-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft);
}
.jr-dot{ width:7px; height:7px; border-radius:50%; background:var(--k); flex:none; }
.jr-imp-count{
  margin-top:8px; font-family:var(--mono); font-size:10.5px; color:var(--accent);
}
.jr-empty{
  background:var(--raised); border:1px dashed var(--line);
  border-radius:var(--radius); padding:22px; text-align:center;
}
.jr-empty p{ margin:0 auto 14px; max-width:52ch; }

.jr-triage, .jr-kept{
  background:var(--raised); border:1px dashed var(--line);
  border-radius:var(--radius); padding:4px 6px;
}
.jr-kept{ border-style:solid; }
.jr-tri, .jr-keep{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:11px 12px; border-bottom:1px solid var(--line-soft);
}
.jr-tri:last-child, .jr-keep:last-child{ border-bottom:none; }
.jr-tri-q, .jr-keep-t{ flex:1; min-width:200px; font-size:14px; color:var(--ink); }
.jr-tri-q small, .jr-keep-t small{
  display:block; font-family:var(--mono); font-size:10.5px;
  color:var(--ink-mute); margin-top:3px;
}
.jr-tri form, .jr-keep form{ display:inline; }

/* --- composing ----------------------------------------------------- */
.jr-form h2{ margin-top:30px; }
.jr-fixture{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px 16px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
}
@media (max-width:620px){ .jr-fixture{ grid-template-columns:1fr; } }
.jr-fixture .field{ margin-bottom:0; }

/* The check-in (rebuilt 2 Sep 2026).
   It worked -- it stored and read back correctly -- and it did not feel
   like it did, which for a control is the same thing. Three faults, all
   of them about feel:

   * the targets were 24x24, well under the ~44px everybody's guidelines
     ask for. On a phone after a match, three of those side by side means
     missing more often than hitting;
   * nothing responded to hover or press. A near-miss looked exactly like
     a broken button, so the honest read was "this is not working";
   * "+ o -" was a legend you had to hover to decode, and a lowercase o
     reads as a typo before it reads as "middling".

   Words now, in segmented-control shape, with a state for every stage of
   a press. Poor is amber and never red: a bad night's sleep is honest
   data, not a fault -- the same rule written beside `.ac-said`. */
.jr-checkin{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 16px;
}
@media (max-width:560px){ .jr-checkin{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:380px){ .jr-checkin{ grid-template-columns:1fr; } }

/* The fieldset carries no border of its own. Six bordered cards, each
   holding three more bordered pills, was twenty-four borders to ask one
   question six times -- and at six across the word "Poor" was wider than
   the box drawn around it. The name is a label above; the three answers
   are one control, not three buttons. */
.jr-ci{ border:0; padding:0; margin:0; min-width:0; }
.jr-ci legend{
  display:block; padding:0; margin:0 0 5px;
  font-family:var(--body); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-soft);
}
.jr-ci-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line); border-radius:9px; overflow:hidden;
  background:var(--raised);
}
.jr-ci-opt{ display:block; min-width:0; }
.jr-ci-opt input{ position:absolute; opacity:0; width:0; height:0; }
.jr-ci-opt span{
  display:flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 6px; white-space:nowrap;
  border-left:1px solid var(--line);
  font-family:var(--body); font-size:13.5px; font-weight:500;
  letter-spacing:0; text-transform:none;
  color:var(--ink-soft); cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.jr-ci-opt:first-child span{ border-left:0; }
.jr-ci-opt span:hover{ background:var(--sunk); color:var(--ink); }
/* A joined control cannot nudge one segment downward without looking
   broken, so the press reads as a darker ground instead. */
.jr-ci-opt span:active{ background:var(--line-soft); }
.jr-ci-opt input:checked + span{
  background:var(--accent); color:var(--on-accent); font-weight:600;
}
/* `--line` rather than `--sunk`: the neutral answer wants a fill a shade
   away from the card in whichever direction the theme is going. --sunk is
   nearly black on the dark theme and reads as a hole, not a choice. */
.jr-ci-2 input:checked + span{ background:var(--line); color:var(--ink); }
/* Poor is amber, not red: an honest answer about a bad night is data, not
   a mistake, and a form that scolds gets a nicer answer than a true one. */
.jr-ci-3 input:checked + span{
  background:var(--amber-bg); color:var(--amber-ink); font-weight:600;
}
.jr-ci-opt input:focus-visible + span{ outline:2px solid var(--accent);
                                       outline-offset:-2px; }
@media (prefers-reduced-motion: reduce){
  .jr-ci-opt span{ transition:none; }
}

.jr-questions{ display:flex; flex-direction:column; gap:16px; }
.jr-q label{ display:block; }
.jr-hint{ margin:3px 0 6px; font-size:12.5px; color:var(--ink-mute); }
.jr-q-key{
  border-left:3px solid var(--accent); padding-left:14px;
  background:linear-gradient(90deg,var(--accent-bg),transparent 60%);
  border-radius:0 8px 8px 0; padding-top:10px; padding-bottom:2px;
}
.jr-form textarea{
  width:100%; font-family:var(--body); font-size:15px; line-height:1.6;
  color:var(--ink); background:var(--raised); border:1px solid var(--line);
  border-radius:9px; padding:11px 13px; resize:vertical;
}
.jr-form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.jr-bank{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
}
.jr-fam + .jr-fam{ margin-top:13px; padding-top:13px; border-top:1px solid var(--line-soft); }
.jr-fam-l{
  display:flex; align-items:center; gap:7px; margin-bottom:7px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute);
}
.jr-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.jr-chip input{ position:absolute; opacity:0; width:0; height:0; }
.jr-chip span{
  display:inline-block; font-size:12.5px; padding:5px 10px; border-radius:7px;
  border:1px solid var(--line); background:var(--raised);
  color:var(--ink-soft); cursor:pointer;
}
.jr-chip input:checked + span{
  background:var(--k); border-color:var(--k); color:#fff; font-weight:600;
}
.jr-chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

.jr-imp{
  background:var(--accent-bg); border:1px solid rgba(47,124,80,.35);
  border-radius:var(--radius); padding:16px 18px;
}
.jr-imp p{ margin:0 0 12px; font-size:13.2px; color:var(--accent-ink); }
.jr-impbox{
  display:block; width:100%; font-family:var(--body); font-size:14px;
  color:var(--ink); background:var(--raised); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px;
}
.jr-impbox + .jr-impbox{ margin-top:8px; }
.jr-actions{ display:flex; align-items:center; gap:10px; margin-top:22px; }

/* --- reading ------------------------------------------------------- */
.jr-fixread{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 18px; margin-bottom:14px;
}
.jr-fixread-l{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:2px;
}
.jr-fixread span:last-child{ font-size:14px; color:var(--ink); }
.jr-ciread{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.jr-ci-pill{
  font-family:var(--mono); font-size:11px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-mute);
}
.jr-ci-good{ border-color:rgba(47,124,80,.4); color:var(--accent); }
.jr-ci-mid{ color:var(--ink-soft); }
/* Amber, not red -- the rule written twice above, on the control that
   collects this answer (`.jr-ci-3`) and beside `.ac-said`. It was applied
   to the way in and not the way out: the athlete answered "Poor" on an
   amber button and their coach read it back as a red one. Same fact, and
   the second reading turned an honest answer about a bad night into
   something that looked like a fault on the page a coach opens to talk
   to them about it. */
.jr-ci-bad{ border-color:var(--amber-ink); color:var(--amber-ink); }
.jr-body{
  font-size:15.5px; line-height:1.75; color:var(--ink);
  white-space:pre-wrap; background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
}
.jr-read{ margin-bottom:16px; }
.jr-read h3{ font-family:var(--display); font-size:15px; margin:0 0 6px; color:var(--ink); }
.jr-read-a{ font-size:15px; line-height:1.7; color:var(--ink-soft); white-space:pre-wrap; }
.jr-read-key{
  border-left:3px solid var(--accent); padding:12px 0 12px 16px;
  background:linear-gradient(90deg,var(--accent-bg),transparent 55%);
  border-radius:0 8px 8px 0;
}
.jr-read-key .jr-read-a{ color:var(--ink); }
.jr-implist{ margin:0; padding-left:18px; }
.jr-implist li{ font-size:14.5px; color:var(--ink); line-height:1.6; margin-bottom:8px; }
.jr-status{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); margin-left:8px;
}
.jr-status-kept{ color:var(--accent); }

/* Revising an entry (9 Sep 2026). Amber for "this was changed", never
   red: a revision is ordinary and allowed, and red would read as an
   accusation of the athlete who made it. */
.jr-revised-late{
  background:var(--amber-bg); color:var(--amber-ink);
  border:1px solid rgba(107,74,18,.22); border-radius:10px;
  padding:10px 14px; font-size:13.5px; margin:0 0 18px;
}
.jr-revise{ margin:22px 0 6px; font-size:14px; }
.jr-revise .hint{ display:inline; margin-left:4px; }
.jr-history{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--raised); padding:0 14px; margin:14px 0 24px;
}
.jr-history > summary{
  cursor:pointer; padding:12px 0; font-size:13.5px; color:var(--ink-soft);
  font-weight:600;
}
.jr-history[open] > summary{ border-bottom:1px solid var(--line-soft); }
.jr-was{ padding:16px 0; border-bottom:1px solid var(--line-soft); }
.jr-was:last-child{ border-bottom:0; }
.jr-was-when{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-mute); margin:0 0 10px;
}
.jr-was .jr-read h3{ font-size:13.5px; color:var(--ink-soft); }
.jr-impsent{ margin:0 0 8px; padding-left:18px; }
.jr-impsent li{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:6px; }

/* The filter row, and the span of days beside it. 17 Sep 2026. */
.jr-filters{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.jr-dates{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:0 0 18px; }
.jr-dates label{
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute);
}
.jr-dates input{
  font:inherit; font-size:14px; padding:7px 10px; border-radius:7px;
  border:1px solid var(--line); background:var(--raised); color:var(--ink);
}
.jr-clear{ font-size:12.5px; color:var(--ink-mute); padding-bottom:8px; }

/* One entry: back to the list it was opened from, and the two beside it. */
/* Where one entry sits: the way back to the list, and the entries
   either side. NOT `.jr-nav` / `.jr-step` -- those are the compose
   wizard's step sections and its Back/Next row, further down this file,
   and sharing the names put a pill border on the wizard and wrapped its
   buttons onto two lines. */
.jr-where{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  justify-content:space-between; margin:0 0 14px;
}
.jr-where-back{ font-size:13px; color:var(--ink-soft); text-decoration:none; }
.jr-where-back:hover{ color:var(--ink); }
.jr-where-note{ color:var(--ink-mute); font-size:12px; }
.jr-where-steps{ display:flex; gap:7px; }
.jr-where-step{
  font-size:12.5px; padding:6px 12px; border-radius:7px;
  border:1px solid var(--line); background:var(--raised);
  color:var(--ink-soft); text-decoration:none; white-space:nowrap;
}
.jr-where-step:hover{ color:var(--ink); }
.jr-fl{
  font-size:12.5px; padding:6px 12px; border-radius:7px;
  border:1px solid var(--line); background:var(--raised);
  color:var(--ink-soft); text-decoration:none;
}
.jr-fl.on{ background:var(--sunk); color:var(--ink); font-weight:600; }


/* The nav has grown a module at a time; below tablet width it wraps
   instead of pushing the page sideways. Added in Phase 13, when the
   Journal link took it past a phone viewport. */
@media (max-width:760px){
  .topbar{ flex-wrap:wrap; row-gap:8px; padding:12px 18px; }
  .topbar-right{ flex-wrap:wrap; row-gap:6px; gap:12px; width:100%; }
  .brand{ flex:1 0 auto; }
}
@media (max-width:420px){
  .topbar-right{ gap:10px; }
  .who{ width:100%; order:9; }
}

/* The fourteen-day strip is the widest fixed thing on the journal home. */
@media (max-width:520px){
  .jr-streak{ gap:16px; }
  .jr-streak-side{ margin-left:0; text-align:left; width:100%; display:flex; gap:16px; }
  .jr-sq{ width:13px; height:13px; }
  .jr-streak-mid{ min-width:0; }
}


/* The platform's global `label` rule is mono, uppercase and letter-spaced,
   which is right for "EMAIL" and wrong for a sentence or a habit name.
   These three places opt out. */
.jr-q label{
  font-family:var(--display); font-size:15.5px; font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--ink); line-height:1.35;
}
.jr-chip{ display:inline-block; }
.jr-chip span{
  font-family:var(--body); font-size:12.5px; font-weight:400;
  letter-spacing:0; text-transform:none;
}
.jr-chip input:checked + span{ font-weight:600; }
.jr-fixture label{ font-size:9.5px; }

/* ======================================================================
   The improvements board (Phase 14)
   ====================================================================== */

.bd-bar{ margin-bottom:14px; }
.bd-waiting{
  font-family:var(--mono); font-size:11.5px; color:#8a5f10;
  border:1px solid rgba(201,138,31,.45); background:rgba(201,138,31,.09);
  padding:6px 12px; border-radius:7px;
}
/* The athlete switcher (Phase 36). Sits on a coach's own board and on
   every athlete board they open, so moving between four athletes is one
   control rather than a trip back to the roster. */
.bd-switch{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--sunk); margin-bottom:16px;
}
.bd-then{ margin:0 0 16px; display:flex; gap:8px; flex-wrap:wrap;
          align-items:baseline; font-size:13.5px; }
.bd-switch label{ font-size:12.5px; color:var(--ink-mute); margin:0; }
.bd-switch select{ min-width:26ch; max-width:100%; }
.bd-roster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
            gap:16px; margin-top:22px; }
.bd-roster section{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.bd-roster h2{ margin:0 0 8px; font-size:15px; }
.bd-roster ul{ list-style:none; margin:0; padding:0;
               display:flex; flex-direction:column; gap:8px; }
.bd-roster li{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }

/* Dragging (Phase 36). The card that is claiming to have moved is drawn
   in the column it claims, dashed and faded -- present, but visibly not
   counted. That is the whole reconciliation between Trello's promise
   (where the card is, is where it is) and this board's rule (a forward
   move is agreed, not taken). */
.bd-card.claimed{
  border-style:dashed; opacity:.72;
  background:repeating-linear-gradient(135deg,
    transparent 0 7px, rgba(127,127,127,.06) 7px 14px);
}
.bd-card.is-dragging{ opacity:.28; }
.bd-card.is-sending{ opacity:.5; pointer-events:none; }
.bd-card.is-lifted{ outline:2px solid var(--accent); outline-offset:2px; }
.bd-ghost{
  position:fixed; z-index:60; pointer-events:none; margin:0;
  transform:rotate(1.5deg); box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.bd-col.is-over{ outline:2px dashed var(--accent); outline-offset:-2px; }
body.bd-dragging{ cursor:grabbing; user-select:none; }
body.bd-dragging .bd-card{ cursor:grabbing; }
.bd-away{ margin:2px 0 0; font-size:11.5px; line-height:1.4;
          color:var(--ink-mute); font-style:italic; }
.bd-say{ min-height:1.2em; margin:10px 0 0; font-size:13px; color:var(--ink-mute); }
.bd-say.is-bad{ color:var(--danger); font-weight:600; }
.bd-legend kbd{
  font-family:var(--mono); font-size:11px; padding:1px 5px;
  border:1px solid var(--line); border-radius:4px; background:var(--sunk);
}
@media (prefers-reduced-motion: reduce){
  .bd-ghost{ transform:none; }
}

/* Then and now (Phase 36). Built to be printed: a coach sitting with an
   athlete and a parent wants something on the table, not a screen being
   turned round. */
.hs-pick{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
          padding:14px 16px; border:1px solid var(--line); border-radius:10px;
          background:var(--sunk); margin:18px 0; }
.hs-pick .field{ margin:0; }
.hs-pick label{ font-size:12px; color:var(--ink-mute); }
.hs-pick .hint{ margin-left:auto; }
.hs-tally{ display:flex; gap:26px; align-items:center; flex-wrap:wrap;
           padding:15px 18px; border:1px solid var(--line); border-radius:10px;
           font-size:13px; margin-bottom:18px; }
.hs-tally b{ font-size:22px; margin-right:6px;
             font-variant-numeric:tabular-nums; }
.hs-tally b.ok{ color:var(--accent); }
.hs-tally b.dim{ color:var(--ink-mute); }
.hs-claim{ border:1px solid var(--warn, var(--line)); border-radius:10px;
           padding:15px 18px; margin-bottom:20px; background:var(--sunk); }
.hs-claim ul{ margin:9px 0 0; padding-left:18px; }
.hs-claim li{ font-size:13.5px; margin-bottom:4px; }
.hs-moves{ display:flex; flex-direction:column; gap:1px;
           border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.hs-move{ display:grid; grid-template-columns:1fr 230px 76px; gap:14px;
          align-items:baseline; padding:11px 16px; background:var(--paper);
          border-bottom:1px solid var(--line-soft); }
.hs-move:last-child{ border-bottom:none; }
.hs-t{ font-size:14.5px; font-weight:600; }
.hs-arrow{ font-size:12.5px; color:var(--ink-mute);
           font-family:var(--mono); }
.hs-kind{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
          font-family:var(--mono); text-align:right; }
.hs-move.forward .hs-kind{ color:var(--accent); }
.hs-move.arrived .hs-kind{ color:var(--ink-mute); }
.hs-move.backward .hs-kind{ color:var(--warn-ink, var(--ink-mute)); }
.hs-boards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.hs-mini{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.hs-mini h3{ margin:0 0 10px; font-size:14px; }
.hs-cols{ display:flex; flex-direction:column; gap:10px; }
.hs-cols section{ display:flex; flex-direction:column; gap:5px; }
.hs-cols header{ display:flex; justify-content:space-between; align-items:baseline;
                 font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
                 font-family:var(--mono); color:var(--ink-mute);
                 border-bottom:1px solid var(--line-soft); padding-bottom:3px; }
.hs-card{ display:block; font-size:12.5px; color:var(--ink-soft);
          padding:4px 8px; background:var(--sunk); border-radius:6px; }
.hs-card small{ display:block; font-size:10.5px; color:var(--ink-mute); }
.hs-none{ font-size:12px; color:var(--ink-mute); opacity:.6; }
.hs-held{ display:flex; gap:8px; flex-wrap:wrap; }
.hs-held .hs-card{ display:inline-block; }
@media (max-width:820px){
  .hs-boards{ grid-template-columns:1fr; }
  .hs-move{ grid-template-columns:1fr; gap:3px; }
  .hs-kind{ text-align:left; }
}
@media print{
  .topbar, .site, .hs-pick, .hs-back{ display:none; }
  .hs-boards{ grid-template-columns:1fr 1fr; }
  .page-wide{ padding:0; max-width:none; }
}

/* Five stages, and they are a FLOW: queue, learning, strengthening,
   mastering, mastered. Below 1080px this became a two-by-two-plus-one
   grid, which is the one arrangement that destroys the reading -- a card
   moving from mastering to mastered went up and left instead of right --
   and 1080px is a laptop window that is not maximised. It is the same
   call the skills board got wrong at 1000px.
   So the columns get a floor and the board scrolls sideways rather than
   folding. At 937px the five fit in 848 with no scroll at all; below
   700px there is no width left to scroll into and one column, in stage
   order, is the honest answer. */
/* How to work a board, said above it. Quiet, one line, and the second
   half -- the keyboard route -- set apart so the sentence people read is
   the short one. */
/* The catalogue's own house-style flag. Amber, not red: a title written
   before the convention existed is not an error, and the whole point of
   the marker is that a person decides. */
.gr-style-note{
  margin:14px 0 0; font-size:13px; color:var(--amber-ink);
  background:var(--amber-bg); border-radius:999px; padding:7px 14px;
  display:inline-block;
}
.gr-style-flag{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--amber-ink);
  background:var(--amber-bg); border-radius:999px; padding:1px 8px;
  margin-left:8px; white-space:nowrap;
}

/* The graduation gate, said as a sentence rather than worn as a label.
   It replaced a chip reading "Working towards Beginner" -- see the note
   in pathway_board.html. Plain weight, because a gate is information and
   not a verdict. */
/* The Waiting page's destination rows. Same shape as the queue on the
   coach's front door: who, what, and the answer on the right. */
.wt-list{ list-style:none; margin:0; padding:0;
          display:flex; flex-direction:column; gap:1px; }
.wt-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 15px; background:var(--raised);
  border:1px solid var(--line-soft); border-radius:var(--radius);
}
.wt-b{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:220px; }
.wt-who{ font-weight:600; }
.wt-what{ font-size:13.5px; color:var(--ink-soft); }

.sk-gate{ font-size:13.5px; color:var(--ink-soft); }
.sk-gate b{ color:var(--ink); }

.sk-how{
  margin:0 0 10px; font-size:12.5px; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
}
.sk-how > span{ color:var(--ink-mute); }
.sk-how kbd{
  font-family:var(--mono); font-size:11px; border:1px solid var(--line);
  border-radius:4px; padding:0 4px; background:var(--raised);
}

.bd-board{ display:grid; grid-template-columns:repeat(5,minmax(158px,1fr));
           gap:12px; align-items:start; overflow-x:auto; }
@media (max-width:700px){
  .bd-board{ grid-template-columns:1fr; overflow-x:visible; }
}
.bd-col{
  background:var(--sunk); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:11px 10px 12px;
}
.bd-col.done{ background:var(--accent-bg); border-color:rgba(47,124,80,.3); }
.bd-col header{ display:flex; align-items:center; gap:8px; padding:2px 4px 0; }
.bd-col h2{ margin:0; font-family:var(--display); font-size:14px; color:var(--ink); }
.bd-n{
  margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-mute);
  background:var(--raised); border:1px solid var(--line); border-radius:999px; padding:1px 8px;
}
/* A stage at or over what it may hold. The count turns, rather than
   something new appearing beside it: a reader already looks at that
   number, and a second badge would be a second place to look. */
.bd-n.is-full{
  color:var(--danger); background:var(--danger-bg); font-weight:600;
  border-color:color-mix(in srgb, var(--danger) 30%, transparent);
}
/* One pip per card the stage may hold. Filled left to right, so "nearly
   full" reads without counting -- which a fraction cannot do at a glance,
   and this column is scanned rather than read. Decorative: the fraction
   above it is the accessible version, and this carries aria-hidden. */
.bd-wip{ display:flex; gap:2px; margin:6px 4px 0; }
.bd-wip i{ height:3px; flex:1; border-radius:2px; background:var(--line); }
.bd-wip i.on{ background:var(--accent); }
.bd-wip.is-full i.on{ background:var(--danger); }
/* Says what to do next. Never what the rule is. */
.bd-full{
  margin:7px 4px 0; padding:6px 9px; font-size:11.5px; line-height:1.4;
  color:var(--danger); background:var(--danger-bg); border-radius:8px;
}
.bd-x{ margin:5px 4px 10px; font-size:11.5px; color:var(--ink-mute); line-height:1.4; }

.bd-card{
  display:block; background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--k); border-radius:9px; padding:10px 11px;
  text-decoration:none; box-shadow:0 1px 2px rgba(22,34,31,.05);
}
.bd-card + .bd-card{ margin-top:8px; }

/* ---------- quick add ----------
   Noticing something should cost one field and one keystroke, so this
   sits at the foot of the Queue column, where the cards it makes land.
   Stacked rather than side by side: the column is about 200px wide and
   an input beside a button wraps into a mess at that width. */
.bd-quick{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.bd-quick input{
  width:100%; min-width:0; padding:9px 11px; font:inherit; font-size:14px;
  color:var(--ink); background:var(--paper, #fff);
  border:1px solid var(--line); border-radius:8px;
}
.bd-quick input::placeholder{ color:var(--ink-mute); }
.bd-quick-go{
  padding:8px 12px; font:inherit; font-size:13px; font-weight:600;
  color:var(--on-accent, #fff); background:var(--accent); border:1px solid var(--accent);
  border-radius:8px; cursor:pointer;
}
.bd-quick-go:hover{ filter:brightness(1.08); }
.bd-quick + .bd-add{ margin-top:8px; font-size:12.5px; }

/* ---------- filling in a card after a quick add ---------- */
.cd-edit{ margin:26px 0 0; border-top:1px solid var(--line); padding-top:18px; }
.cd-edit > summary{
  cursor:pointer; font-size:14px; font-weight:600; color:var(--accent);
  list-style:none; padding:2px 0;
}
.cd-edit > summary::-webkit-details-marker{ display:none; }
.cd-edit > summary::before{ content:"+ "; font-family:var(--mono); }
.cd-edit[open] > summary::before{ content:"\2013 "; }
.cd-edit form{ margin-top:16px; }
.cd-edit .field{ margin-bottom:16px; }
.cd-edit label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.cd-edit input[type="text"], .cd-edit textarea, .cd-edit select{
  width:100%; padding:9px 12px; font:inherit; font-size:14.5px;
  color:var(--ink); background:var(--paper, #fff);
  border:1px solid var(--line); border-radius:7px;
}
.bd-card:hover{ border-color:var(--ink-mute); border-left-color:var(--k); }
.bd-t{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.bd-m{ display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.bd-mini{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; border:1px solid var(--line); color:var(--ink-mute);
}
.bd-mini.role{ color:#fff; border:none; }
.bd-card.waiting{ border-color:var(--con-line,rgba(201,138,31,.7)); box-shadow:0 0 0 3px rgba(201,138,31,.1); }
.bd-wait{
  display:block; margin-top:8px; padding-top:7px;
  border-top:1px dashed rgba(201,138,31,.5);
  font-family:var(--mono); font-size:10px; letter-spacing:.03em;
  text-transform:uppercase; font-weight:600; color:#8a5f10;
}
/* Amber, for the reason written beside `.jr-ci-3` and `.ac-said`. A card
   nobody has logged against in a fortnight is a card wanting attention,
   not an error, and it was drawn in `--danger` with a matching red key in
   the legend -- so a board with three quiet cards on it looked like a
   board with three things wrong with it. */
.bd-card.quiet{ border-color:var(--amber-ink); }
.bd-quiet{
  display:block; margin-top:8px; font-family:var(--mono); font-size:10px; color:var(--danger);
}
.bd-add{
  display:block; width:100%; margin-top:9px; text-align:center; font-family:var(--body);
  font-size:12.5px; color:var(--ink-mute); border:1px dashed var(--line);
  background:transparent; border-radius:9px; padding:8px; cursor:pointer;
}
.bd-add:hover{ color:var(--ink); border-color:var(--ink-mute); }

.bd-legend{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:20px;
  font-size:12px; color:var(--ink-mute); align-items:center;
}
.bd-key{ width:22px; height:11px; border-radius:3px; display:inline-block; vertical-align:-1px;
         margin-right:5px; border:1px solid var(--line); }
.bd-key.waiting{ border-color:rgba(201,138,31,.7); background:rgba(201,138,31,.12); }
.bd-key.quiet{ border-color:var(--amber-ink); background:var(--amber-bg); }

.bd-notes{ background:var(--raised); border:1px solid var(--line); border-radius:var(--radius); }
.bd-note{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 15px; border-bottom:1px solid var(--line-soft); margin:0;
}
.bd-note:last-child{ border-bottom:none; }
.bd-note-t{ flex:1; min-width:220px; font-size:14px; color:var(--ink); }
.bd-note-t small{ display:block; font-family:var(--mono); font-size:10.5px;
                  color:var(--ink-mute); margin-top:3px; }

.bd-form{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);
}
.bd-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .bd-two{ grid-template-columns:1fr; } }
.bd-form textarea, .bd-form input[type=text], .bd-form select{
  width:100%; font-family:var(--body); font-size:14.5px; color:var(--ink);
  background:var(--raised); border:1px solid var(--line); border-radius:9px;
  padding:10px 12px;
}
.bd-form textarea{ resize:vertical; line-height:1.55; }
.bd-hint{ margin:5px 0 0; font-size:12.5px; color:var(--ink-mute); }

/* --- one card ------------------------------------------------------- */
.cd-head{ border-left:3px solid var(--k); padding-left:16px; margin-bottom:18px; }
.cd-head h1{ font-size:27px; margin-bottom:9px; }
.cd-tags{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.cd-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink-mute);
}
.cd-tag.solid{ color:#fff; border:none; }

/* Where it is, what is waiting on somebody, and what moves it -- one
   panel in Phase 36c, because they are one question. They used to be a
   ladder, a banner and an <h2> section with a form each, spread down the
   page, so the answer was never in one place. */
.cd-where{
  background:var(--raised); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:22px;
  display:flex; flex-direction:column; gap:15px;
}
.cd-stages{ display:flex; list-style:none; margin:0; padding:2px 0 0; }
.cd-st{ flex:1; text-align:center; position:relative; }
.cd-st::before{
  content:""; position:absolute; top:5px; left:-50%; width:100%; height:2px;
  background:var(--line);
}
.cd-st:first-child::before{ display:none; }
.cd-st.done::before, .cd-st.here::before{ background:var(--accent); }
.cd-dot{
  position:relative; z-index:1; display:block; width:11px; height:11px; border-radius:50%;
  background:var(--sunk); border:2px solid var(--line); margin:0 auto 7px;
}
.cd-st.done .cd-dot{ background:var(--accent); border-color:var(--accent); }
.cd-st.here .cd-dot{
  background:var(--raised); border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg); width:13px; height:13px;
}
.cd-lab{
  position:relative; z-index:1; font-family:var(--mono); font-size:10px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute);
}
.cd-st.here .cd-lab{ color:var(--ink); font-weight:600; }

.cd-waiting{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  background:rgba(201,138,31,.07); border:1px solid rgba(201,138,31,.4);
  border-radius:10px; padding:14px 16px; margin:0;
}
.cd-waiting-t{ flex:1; min-width:240px; font-size:13.8px; color:var(--ink); }
.cd-waiting-t small{ display:block; font-family:var(--mono); font-size:10.5px;
                     color:var(--ink-mute); margin-top:4px; }
.cd-evidence{
  margin-top:10px; padding-left:12px; border-left:2px solid rgba(201,138,31,.4);
  font-size:14px; color:var(--ink-soft); line-height:1.6;
}
.cd-resolve{ display:flex; gap:8px; flex-wrap:wrap; width:100%; }
.cd-resolve input[type=text]{
  flex:1; min-width:200px; font-family:var(--body); font-size:13.5px;
  border:1px solid var(--line); border-radius:9px; padding:8px 11px;
  background:var(--raised); color:var(--ink);
}
.btn-danger{ border-color:var(--line); background:var(--raised); color:var(--danger); }

.cd-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cd-desc{ margin-bottom:20px; }
@media (max-width:620px){ .cd-two{ grid-template-columns:1fr; } }
.cd-box{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow);
}
.cd-lab-s{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:5px;
}
.cd-box p{ margin:0; font-size:14px; line-height:1.6; }
.cd-source{
  margin-top:11px; font-family:var(--mono); font-size:11px; color:var(--ink-mute);
  background:var(--sunk); border:1px solid var(--line-soft);
  border-radius:8px; padding:9px 13px; line-height:1.6;
}
.cd-quote{ font-family:var(--body); font-size:13.5px; color:var(--ink-soft); }

.cd-moves{ display:flex; flex-direction:column; gap:12px; }
.cd-moves form{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
}
.cd-moves input[type=text]{
  flex:1; min-width:200px; font-family:var(--body); font-size:13.5px;
  border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  background:var(--raised); color:var(--ink);
}
.cd-ask{
  display:block; background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.cd-ask label{
  font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:0;
  text-transform:none; color:var(--ink); display:block; margin-bottom:7px;
}
.cd-ask textarea{
  width:100%; font-family:var(--body); font-size:14.5px; line-height:1.55;
  border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  background:var(--raised); color:var(--ink); resize:vertical; margin-bottom:11px;
}
.cd-ask-open{ background:var(--raised); border:1px solid var(--line);
              border-radius:var(--radius); box-shadow:var(--shadow); }
.cd-ask-open > summary{ cursor:pointer; list-style:none; padding:13px 18px;
                        font-family:var(--display); font-weight:700; font-size:15px; }
.cd-ask-open > summary::-webkit-details-marker{ display:none; }
.cd-ask-open > summary::after{ content:" +"; color:var(--accent); }
.cd-ask-open[open] > summary::after{ content:" \2212"; }
.cd-ask-open[open] > summary{ padding-bottom:0; }
.cd-ask{ box-shadow:none; border:none; background:none; padding:13px 18px; }
.cd-honest{ margin:0; font-size:12.8px; color:var(--ink-mute); line-height:1.55; max-width:70ch; }

.cd-thread{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--raised); overflow:hidden;
}
.cd-composer{ display:flex; gap:11px; align-items:flex-end; padding:15px 17px;
              background:var(--sunk); border-bottom:1px solid var(--line); }
.cd-composer textarea{
  flex:1; font-family:var(--body); font-size:14.5px; line-height:1.55;
  border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  background:var(--raised); color:var(--ink); resize:vertical;
}
.cd-item{ padding:14px 17px; border-bottom:1px solid var(--line-soft); }
.cd-item:last-child{ border-bottom:none; }
.cd-item.sys{ background:var(--sunk); }
.cd-item.mine{ background:var(--raised); }
.cd-who{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.cd-who b{ font-size:13.5px; color:var(--ink); }
.cd-role{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-mute); border:1px solid var(--line); border-radius:999px; padding:1px 7px;
}
.cd-when{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }
.cd-body{ margin-top:6px; font-size:14px; color:var(--ink-soft); line-height:1.6;
          white-space:pre-wrap; }
.cd-item.sys .cd-body{ font-size:13px; color:var(--ink-mute); }
.cd-reply{ margin-top:8px; padding-left:12px; border-left:2px solid var(--line); }

/* A tick, a move, an ask. In the record and in order, but not a
   sentence somebody sat down and wrote -- so one line each, and the
   writing stops being buried under the platform's own bookkeeping. */
.cd-note{
  /* max-width:none, because the global `p` rule caps a paragraph at 66ch
     for readability -- right for prose, and here it left the row's own
     background stopping two thirds of the way across the thread. */
  margin:0; max-width:none; padding:8px 17px; font-size:12.8px; line-height:1.55;
  color:var(--ink-mute); background:var(--sunk);
  border-bottom:1px solid var(--line-soft);
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.cd-note:last-child{ border-bottom:none; }
.cd-note b{ color:var(--ink-soft); font-weight:600; }
.cd-note .cd-when{ margin-left:0; flex-shrink:0; min-width:5.5em; }
.cd-note.back b{ color:var(--ink); }
.cd-said{ display:block; width:100%; max-width:none; padding-left:12px; margin-top:2px;
          border-left:2px solid var(--line); color:var(--ink-soft);
          font-family:var(--body); font-size:13.5px; }
.cd-said.reply{ border-left-color:var(--accent); }


/* --- the coach's queue ---------------------------------------------- */
.ci-req{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
  margin-bottom:12px;
}
.ci-req header{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.ci-who{ font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; }
.ci-who:hover{ text-decoration:underline; }
.ci-sub{ font-size:13.5px; color:var(--ink-mute); }
.ci-age{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }
.ci-age.old{ color:var(--danger); }
.ci-card{
  display:block; margin-top:12px; padding:11px 13px; border-left:3px solid var(--k);
  background:var(--sunk); border-radius:0 9px 9px 0; text-decoration:none;
}
.ci-card-t{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.ci-card-m{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.ci-mini{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-mute); background:var(--raised);
}
.ci-move{
  display:flex; align-items:center; gap:9px; margin-top:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
}
.ci-stg{ padding:4px 10px; border-radius:7px; border:1px solid var(--line); color:var(--ink-mute); }
.ci-stg.to{ border-color:var(--accent); background:var(--accent-bg);
            color:var(--accent-ink); font-weight:600; }
.ci-arrow{ color:var(--ink-mute); }
.ci-ev{
  margin:12px 0 0; padding:0 0 0 13px; border-left:2px solid var(--line);
  font-size:14px; color:var(--ink-soft); line-height:1.6;
}
.ci-ev-l{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:4px;
}
.ci-facts{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap;
           font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.ci-facts b{ color:var(--ink); font-size:13px; }
.ci-facts .old, .ci-facts .old b{ color:var(--danger); }
.ci-actions{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft);
}
.ci-actions input[type=text]{
  flex:1; min-width:200px; font-family:var(--body); font-size:13.5px;
  border:1px solid var(--line); border-radius:9px; padding:8px 11px;
  background:var(--raised); color:var(--ink);
}
.ci-quiet{ background:var(--raised); border:1px solid var(--line);
           border-radius:var(--radius); overflow:hidden; }
.ci-qr{ display:flex; align-items:center; gap:12px; padding:12px 16px;
        border-bottom:1px solid var(--line-soft); }
.ci-qr:last-child{ border-bottom:none; }
.ci-qr-t{ flex:1; font-size:14px; color:var(--ink); text-decoration:none; }
.ci-qr-t:hover{ text-decoration:underline; }
.ci-qr-t small{ display:block; font-family:var(--mono); font-size:10.5px;
                color:var(--ink-mute); margin-top:2px; }
.ci-days{ font-family:var(--mono); font-size:11px; color:var(--danger); white-space:nowrap; }

.cd-composer .btn, .cd-resolve .btn, .cd-moves .btn,
.ci-actions .btn, .bd-note .btn{ width:auto; flex:none; white-space:nowrap; }
.cd-composer textarea, .cd-resolve input[type=text],
.cd-moves input[type=text], .ci-actions input[type=text]{ min-width:0; }
.cd-ask .btn{ width:auto; }

/* ---------- admin: how it behaves (Phase 14a) ---------- */
.set-changed{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute);
              margin:8px 0 0 !important; }
.set-group{ margin-bottom:28px; }
.set-group h2{ margin:0 0 12px; }
.set-row{
  background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:11px;
}
.set-row.is-changed{ border-left-color:var(--accent); }
.set-head{ display:flex; align-items:baseline; gap:9px; }
.set-row label{
  font-family:var(--display); font-size:15px; font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.set-flag{
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(47,124,80,.4); border-radius:999px; padding:1px 7px;
}
.set-help{ margin:5px 0 10px; font-size:13.2px; color:var(--ink-mute); line-height:1.55; max-width:76ch; }
.set-in{
  width:100%; font-family:var(--body); font-size:14.5px; line-height:1.55;
  color:var(--ink); background:var(--raised); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; resize:vertical;
}
.set-in-n{ width:120px; font-family:var(--mono); }
.set-check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; }
.set-check span{ font-family:var(--body); font-size:14px; font-weight:400;
                 letter-spacing:0; text-transform:none; color:var(--ink-soft); }
.set-choices{ display:flex; flex-direction:column; gap:7px; }
.set-choice{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; padding:10px 13px;
}
.set-choice.on{ border-color:var(--accent); background:var(--accent-bg); }
.set-choice span{ font-family:var(--body); font-size:13.8px; font-weight:400;
                  letter-spacing:0; text-transform:none; color:var(--ink); line-height:1.5; }
.set-warn{
  margin:11px 0 0; padding:11px 14px; border-radius:9px;
  background:rgba(201,138,31,.08); border:1px solid rgba(201,138,31,.4);
  font-size:13.2px; color:var(--ink-soft); line-height:1.6; max-width:76ch;
}
.set-warn b{ color:var(--ink); }
.set-was{ margin:9px 0 0; font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.set-was span{ color:var(--ink-soft); }
.set-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
.set-actions .btn{ width:auto; }

/* ======================================================================
   Non-negotiables (Phase 15)
   ====================================================================== */

.nn-why{ background:var(--raised); border:1px solid var(--line);
         border-left:3px solid var(--exc-line,#8a6a1f); border-radius:var(--radius);
         padding:16px 19px; box-shadow:var(--shadow); margin-bottom:18px; }
.nn-why p{ margin:0; font-size:14.5px; line-height:1.65; }

.nn-today{ background:var(--raised); border:1px solid var(--line);
           border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.nn-today-h{ display:flex; align-items:center; gap:11px; flex-wrap:wrap;
             padding:13px 18px; background:var(--sunk); border-bottom:1px solid var(--line); }
.nn-date{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); }
.nn-kind{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.07em;
          text-transform:uppercase; padding:3px 10px; border-radius:999px;
          border:1px solid var(--line); color:var(--ink-mute); background:var(--raised); }
.nn-kind-training{ border-color:rgba(47,124,80,.4); color:var(--accent); }
.nn-kind-match{ border-color:rgba(201,138,31,.5); color:#8a5f10; }
.nn-count{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--ink-mute); }
.nn-count b{ color:var(--accent); font-size:15px; }
.nn-today-h .btn{ width:auto; }

.nn-daybar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
            padding:11px 18px; border-bottom:1px solid var(--line-soft); }
.nn-daybar-l{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.07em;
              text-transform:uppercase; color:var(--ink-mute); }
.nn-daybtn{ font-family:var(--body); font-size:12.5px; padding:5px 12px; border-radius:7px;
            border:1px solid var(--line); background:var(--raised); color:var(--ink-soft);
            cursor:pointer; }
.nn-daybtn.on{ background:var(--sunk); color:var(--ink); font-weight:600;
               border-color:var(--ink-mute); }
.nn-daynote{ margin-left:auto; font-size:12px; color:var(--ink-mute); }

.nn-grp{ padding-bottom:2px; }
.nn-grp-l{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.09em;
           text-transform:uppercase; color:var(--ink-mute); padding:12px 18px 5px; }
.nn-na{ color:var(--line); font-weight:400; letter-spacing:.04em; }
.nn-row{ display:flex; align-items:center; gap:13px; padding:11px 18px;
         border-top:1px solid var(--line-soft); }
.nn-row.na{ opacity:.55; }
.nn-row form{ display:flex; }
.nn-box{ width:21px; height:21px; border-radius:6px; border:1.5px solid var(--line);
         flex:none; display:flex; align-items:center; justify-content:center;
         font-size:12px; color:transparent; background:var(--raised); cursor:pointer;
         padding:0; }
.nn-box.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent, #fff); }
.nn-box.off{ border-style:dashed; cursor:default; }
.nn-t{ flex:1; min-width:0; font-size:14.5px; color:var(--ink); }
.nn-t small{ display:block; font-family:var(--mono); font-size:10.5px;
             color:var(--ink-mute); margin-top:3px; }
.nn-b{ color:#8a5f10; }
.nn-c{ color:var(--gol,#4a5b9c); }
.nn-row.done .nn-t{ color:var(--ink-soft); }
.nn-state{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.06em;
           text-transform:uppercase; padding:1px 7px; border-radius:999px;
           margin-left:8px; white-space:nowrap; }
.nn-state.build{ color:#8a5f10; border:1px solid rgba(201,138,31,.5); }
.nn-state.hold{ color:var(--accent); border:1px solid rgba(47,124,80,.4); }
.nn-hold{ display:flex; align-items:center; gap:9px; flex:none; }
.nn-bar{ width:54px; height:6px; border-radius:3px; background:var(--sunk);
         overflow:hidden; display:block; }
.nn-bar i{ display:block; height:100%; border-radius:3px; background:var(--accent); }
.nn-pc{ font-family:var(--mono); font-size:11.5px; color:var(--ink-mute);
        width:34px; text-align:right; }
.nn-row.drift .nn-bar i{ background:var(--danger); }
.nn-row.drift .nn-pc{ color:var(--danger); font-weight:600; }
.nn-new{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); }

.nn-cap{ display:flex; align-items:flex-start; gap:10px; margin-top:12px;
         padding:12px 15px; border:1px dashed var(--line); border-radius:10px;
         font-size:13.2px; color:var(--ink-mute); line-height:1.55; }
.nn-cap b{ color:var(--ink); }
.nn-cap-l{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.07em;
           text-transform:uppercase; padding-top:2px; }

.nn-drift{ border:1px solid rgba(179,57,44,.35); background:var(--danger-bg);
           border-radius:var(--radius); padding:16px 19px; }
.nn-drift > p{ font-size:13.5px; margin:0 0 13px; color:var(--ink-soft); }
.nn-dcard{ background:var(--raised); border:1px solid var(--line);
           border-radius:10px; padding:13px 15px; }
.nn-dcard + .nn-dcard{ margin-top:9px; }
.nn-dcard-t{ font-size:14.5px; font-weight:600; color:var(--ink); }
.nn-dcard-m{ display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
.nn-mini{ font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
          text-transform:uppercase; padding:2px 8px; border-radius:999px;
          border:1px solid var(--line); color:var(--ink-mute); text-decoration:none; }
.nn-mini.bad{ color:var(--danger); border-color:rgba(179,57,44,.4); }
.nn-mini.coach{ color:var(--gol,#4a5b9c); border-color:rgba(74,91,156,.4); }
.nn-dcard-a{ display:flex; align-items:center; gap:11px; margin-top:12px; flex-wrap:wrap; }
.nn-dcard-a .btn{ width:auto; }

.nn-season{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
            background:var(--raised); border:1px solid var(--line);
            border-radius:var(--radius); padding:16px 19px; box-shadow:var(--shadow);
            text-decoration:none; }
.nn-season:hover{ border-color:var(--ink-mute); }
.nn-season-n{ font-family:var(--display); font-weight:800; font-size:34px;
              color:var(--ink); line-height:1; }
.nn-season-t{ flex:1; min-width:240px; font-size:14px; color:var(--ink-soft); line-height:1.55; }
.nn-season-t b{ color:var(--ink); }
.nn-season-go{ font-family:var(--mono); font-size:11px; font-weight:600;
               letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
               white-space:nowrap; }
.nn-empty{ background:var(--raised); border:1px dashed var(--line);
           border-radius:var(--radius); padding:24px; text-align:center; }
.nn-empty p{ max-width:56ch; margin:0 auto 14px; }
.nn-empty .btn{ width:auto; }

/* --- the edit sheet ------------------------------------------------- */
.nn-slots{ display:flex; align-items:center; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.nn-slots-l{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.07em;
             text-transform:uppercase; color:var(--ink-mute); margin-right:4px; }
.nn-slot{ width:13px; height:13px; border-radius:3px; background:transparent;
          border:1px dashed var(--line); }
.nn-slot.on{ background:var(--accent); border:1px solid var(--accent); }
.nn-slots-n{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); margin-left:6px; }

.nn-sheet{ background:var(--raised); border:1px solid var(--line);
           border-radius:var(--radius); box-shadow:var(--shadow); padding:4px 0 12px; }
.nn-erow{ display:flex; gap:14px; align-items:flex-start; padding:13px 18px;
          border-top:1px solid var(--line-soft); }
.nn-erow-main{ flex:1; min-width:0; }
.nn-erow-side{ display:flex; flex-direction:column; gap:8px; flex:none; width:150px; }
.nn-erow-side .btn{ width:100%; }
.nn-in{ width:100%; font-family:var(--body); font-size:14px; line-height:1.55;
        color:var(--ink); background:var(--raised); border:1px solid var(--line);
        border-radius:9px; padding:9px 11px; resize:vertical; }
.nn-in-t{ font-size:14.5px; font-weight:600; }
.nn-in-s{ font-size:13px; padding:8px 10px; }
.nn-src{ display:flex; gap:6px; margin:7px 0 9px; flex-wrap:wrap; }
.nn-keep-l{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:600;
            letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute);
            margin-bottom:5px; }
.nn-remove{ display:flex; align-items:center; gap:11px; padding:0 18px 4px 18px; }
.nn-remove .muted{ font-size:12px; }
.nn-locked{ margin:0; padding:0 18px 6px; font-size:12.5px; color:var(--ink-mute); }

.nn-cands{ background:var(--raised); border:1px solid var(--line);
           border-radius:var(--radius); padding:14px 18px 16px; margin-bottom:14px; }
.nn-cands-l{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.09em;
             text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px; }
.nn-cand{ display:flex; align-items:center; gap:11px; flex-wrap:wrap;
          border:1px solid var(--line); border-radius:9px; padding:10px 13px; }
.nn-cand + .nn-cand{ margin-top:8px; }
.nn-cand-t{ flex:1; min-width:200px; font-size:14px; color:var(--ink); }
.nn-cand-t small{ display:block; font-family:var(--mono); font-size:10px;
                  color:var(--ink-mute); margin-top:3px; }
.nn-cand .nn-in-s{ width:auto; }
.nn-cand .btn{ width:auto; }
.nn-new{ background:var(--raised); border:1px solid var(--line);
         border-radius:var(--radius); padding:18px 20px; }
.nn-new-a{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.nn-new-a .nn-in-s{ width:auto; }
.nn-new-a .btn{ width:auto; }

.nn-rules{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:680px){ .nn-rules{ grid-template-columns:1fr; }
  .nn-erow{ flex-direction:column; } .nn-erow-side{ width:100%; flex-direction:row; } }
.nn-rule{ background:var(--raised); border:1px solid var(--line);
          border-radius:var(--radius); padding:16px 18px; }
.nn-rule h3{ display:flex; align-items:center; gap:8px; margin:0 0 9px; font-size:14.5px; }
.nn-rule ul{ margin:0; padding-left:17px; }
.nn-rule li{ font-size:13.2px; color:var(--ink-soft); line-height:1.55; margin-bottom:6px; }

.nn-log{ background:var(--raised); border:1px solid var(--line);
         border-radius:var(--radius); overflow:hidden; }
.nn-lg{ display:flex; align-items:center; gap:12px; padding:11px 16px;
        border-bottom:1px solid var(--line-soft); }
.nn-lg:last-child{ border-bottom:none; }
.nn-lg-t{ flex:1; font-size:13.5px; color:var(--ink-soft); }
.nn-lg-t b{ color:var(--ink); }
.nn-lg-w{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); white-space:nowrap; }

/* --- the season ----------------------------------------------------- */
.nn-fig{ margin:0; background:var(--raised); border:1px solid var(--line);
         border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px 16px; }
.nn-fig figcaption{ margin-bottom:4px; }
.nn-fig-t{ display:block; font-family:var(--display); font-weight:700; font-size:16px;
           color:var(--ink); }
.nn-fig-s{ display:block; font-size:13px; color:var(--ink-mute); margin-top:3px;
           line-height:1.5; }
.nn-chart{ width:100%; height:220px; display:block; margin-top:14px; overflow:visible; }
.nn-rug{ width:100%; height:46px; display:block; }
.nn-g{ stroke:var(--line-soft); stroke-width:1; }
.nn-ax{ font-family:var(--mono); font-size:9.5px; fill:var(--ink-mute); }
.nn-line{ fill:none; stroke:var(--accent); stroke-width:2;
          stroke-linejoin:round; stroke-linecap:round; }
.nn-dot{ fill:var(--accent); }
.nn-rugbar{ fill:var(--ink-mute); opacity:.3; }
.nn-rug-l{ display:flex; align-items:center; gap:7px; margin-top:-4px;
           font-family:var(--mono); font-size:10px; letter-spacing:.05em;
           text-transform:uppercase; color:var(--ink-mute); }
.nn-rug-l i{ width:9px; height:12px; background:var(--ink-mute); opacity:.3;
             display:inline-block; }
.nn-read{ display:flex; gap:11px; margin-top:16px; padding-top:15px;
          border-top:1px solid var(--line-soft); }
.nn-read-k{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.07em;
            text-transform:uppercase; color:var(--danger); padding-top:2px; white-space:nowrap; }
.nn-read p{ margin:0; font-size:14px; line-height:1.6; }

.nn-sms{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:620px){ .nn-sms{ grid-template-columns:1fr; } }
.nn-sm{ background:var(--raised); border:1px solid var(--line);
        border-radius:var(--radius); padding:13px 15px; }
.nn-sm.drift{ border-color:rgba(179,57,44,.4);
              background:linear-gradient(180deg,var(--danger-bg),var(--raised) 60%); }
.nn-sm-h{ display:flex; align-items:baseline; gap:9px; }
.nn-sm-n{ flex:1; font-size:13px; color:var(--ink); font-weight:500; line-height:1.3; }
.nn-sm-p{ font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:600; }
.nn-sm.drift .nn-sm-p{ color:var(--danger); }
.nn-sm-bar{ height:6px; border-radius:3px; background:var(--sunk);
            overflow:hidden; margin:10px 0 7px; }
.nn-sm-bar i{ display:block; height:100%; border-radius:3px; background:var(--accent); }
.nn-sm.drift .nn-sm-bar i{ background:var(--danger); }
.nn-sm-f{ font-family:var(--mono); font-size:10px; letter-spacing:.04em;
          text-transform:uppercase; color:var(--ink-mute); }
.nn-sm.drift .nn-sm-f b{ color:var(--danger); }
.nn-worth{ display:flex; gap:9px; margin-top:16px; font-size:13px;
           color:var(--ink-mute); line-height:1.55; }
.nn-worth .mono{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
                 white-space:nowrap; padding-top:2px; }
.cd-tag.cd-drift{ color:var(--danger); border-color:rgba(179,57,44,.45); }

/* A call-out in the platform's accent, for a consequence somebody should
   read rather than skim. `.phase-note` is the quiet grey equivalent. */
.note{
  display:flex; gap:9px; align-items:flex-start;
  background:var(--accent-bg); border:1px solid rgba(47,124,80,.28);
  border-radius:10px; padding:12px 15px;
  font-size:13.5px; color:var(--accent-ink); line-height:1.6;
}
.note .ico{
  font-family:var(--mono); font-weight:600; font-size:11px;
  opacity:.7; padding-top:2px; white-space:nowrap;
}
.note b{ color:var(--accent-ink); }
/* An anchor styled as a button should not also be underlined. */
.btn{ text-decoration:none; }
.nn-rug-l{ margin-top:4px; }

/* ====================================================================
   Graduation (Phase 16)

   Domain colour is the only categorical encoding on these screens, and
   it is always accompanied by the domain's name in text, so nothing
   here depends on colour alone. Level is ORDINAL and therefore never
   wears a domain hue -- it gets the neutral ink ramp.

   Both palettes were run through the dataviz validator against the real
   surfaces (#f7f9f5 and #131a17): lightness band, chroma floor,
   adjacent-pair CVD separation and contrast all pass.
   ==================================================================== */

/* `.btn-sm` was used from Phase 15 onwards without ever being defined,
   so every "small" button on the daily list has been rendering at full
   size. Defined here rather than in a separate fix because it is one
   rule and splitting it across two releases helps nobody. */
.btn-sm{ font-size:13px; padding:7px 15px; width:auto; }

.gr-note{
  background:var(--sunk); border:1px solid var(--line-soft);
  border-radius:9px; padding:10px 13px; margin-bottom:18px;
  font-size:13.5px; color:var(--ink-soft);
}

/* --- the role cards ------------------------------------------------- */
.gr-roles{ display:grid; gap:14px; margin-bottom:26px;
           grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.gr-role{
  display:block; background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
  text-decoration:none; color:inherit;
}
.gr-role:hover{ border-color:var(--ink-mute); }
.gr-role-h{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:10px; }
.gr-role-n{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink); }
.gr-level{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-bg);
  border-radius:999px; padding:3px 10px;
}
.gr-role-m{ font-size:13px; color:var(--ink-soft); margin-top:8px; }
.gr-role-m b{ color:var(--ink); }
.gr-role-m.muted{ color:var(--ink-mute); }

.gr-meter{ display:block; height:5px; border-radius:99px;
           background:var(--sunk); overflow:hidden; }
.gr-meter i{ display:block; height:100%; background:var(--accent); }
.gr-meter.big{ height:8px; margin-top:12px; }

.gr-steps{ display:flex; gap:5px; margin-top:11px; }
.gr-step{
  width:19px; height:19px; border-radius:5px; display:grid; place-items:center;
  font-family:var(--mono); font-size:10px; font-weight:600;
  color:var(--ink-mute); background:var(--sunk); border:1px solid var(--line-soft);
}
.gr-step.on{ color:var(--paper); background:var(--ink); border-color:var(--ink); }

.gr-tag{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; border-radius:999px; padding:3px 9px;
  color:var(--ink-mute); background:var(--sunk); border:1px solid var(--line-soft);
}
.gr-tag.done{ color:var(--accent-ink); background:var(--accent-bg);
              border-color:color-mix(in srgb, var(--accent) 32%, transparent); }
.gr-tag.wait, .gr-tag.here{ color:var(--ink); background:var(--sunk); }
.gr-tag.auto{ color:var(--ink-soft); background:var(--sunk); }

/* --- the five domains ----------------------------------------------- */
.gr-domains{ display:grid; gap:12px; margin-bottom:24px;
             grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.gr-domain{
  border:1px solid var(--line); border-left:3px solid var(--dc);
  border-radius:9px; padding:12px 14px; background:var(--raised);
}
.gr-domain-n{ font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:4px; }
.gr-domain p{ font-size:13px; margin:0; color:var(--ink-soft); }
.gr-dom-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--dc); flex:none;
}

.gr-cat-link{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:22px;
  background:var(--raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 19px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink-soft);
  font-size:14px;
}
.gr-cat-link:hover{ border-color:var(--ink-mute); }
.gr-cat-l{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink); }
.gr-cat-go{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em;
            text-transform:uppercase; color:var(--accent); white-space:nowrap; }

/* --- one role's ladder ---------------------------------------------- */
.gr-ladder{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }
.gr-rung{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; border-radius:999px;
  padding:6px 13px; color:var(--ink-mute); background:var(--sunk);
  border:1px solid var(--line-soft);
}
.gr-rung:hover{ color:var(--ink); }
.gr-rung.done{ color:var(--accent-ink); background:var(--accent-bg); }
.gr-rung.on{ color:var(--paper); background:var(--ink); border-color:var(--ink); }
.gr-rung.locked{ opacity:.45; }

.gr-pending{
  background:var(--raised); border:1px solid var(--line); border-left:3px solid var(--ink);
  border-radius:9px; padding:14px 17px; margin-bottom:20px;
}
.gr-pending p{ margin:0 0 10px; }
.gr-pending .btn{ width:auto; }

.gr-summary{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  background:var(--raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 19px; box-shadow:var(--shadow); margin-bottom:26px;
}
.gr-summary-n{ font-family:var(--display); font-weight:800; font-size:34px;
               color:var(--ink); line-height:1; }
.gr-summary-n small{ font-size:18px; color:var(--ink-mute); font-weight:700; }
.gr-summary-t{ flex:1; min-width:240px; font-size:14px; color:var(--ink-soft);
               line-height:1.55; }
.gr-summary-t b{ color:var(--ink); }
.gr-summary .gr-meter{ flex-basis:100%; }

/* --- a domain block and its criteria -------------------------------- */
.gr-dom{ margin-bottom:26px; }
.gr-dom-h{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.gr-dom-h h2{ margin:0; font-size:17px; }
.gr-dom-c{ font-family:var(--mono); font-size:11px; color:var(--ink-mute);
           margin-left:auto; }

.gr-crit{
  display:flex; gap:12px; align-items:flex-start; padding:13px 16px;
  background:var(--raised); border:1px solid var(--line-soft);
  border-left:3px solid var(--dc); border-radius:9px; margin-bottom:8px;
}
.gr-crit.met{ background:var(--sunk); }
.gr-tick{
  width:21px; height:21px; border-radius:6px; flex:none; display:grid;
  place-items:center; font-size:12px; color:transparent;
  background:transparent; border:1.5px solid var(--line);
}
.gr-tick.on{ color:var(--paper); background:var(--accent); border-color:var(--accent); }
.gr-crit-b{ flex:1; min-width:0; }
.gr-crit-t{ font-size:14.5px; font-weight:600; color:var(--ink);
            display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.gr-crit-d{ font-size:13px; color:var(--ink-soft); margin:5px 0 0; max-width:70ch; }

.gr-role-chip{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); background:var(--sunk);
  border:1px solid var(--line-soft); border-radius:4px; padding:2px 6px;
}
.gr-src{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
}

.gr-note-w{ display:block; font-size:13.5px; color:var(--ink); font-style:italic; }
.gr-note-m{ display:block; font-family:var(--mono); font-size:10.5px;
            color:var(--ink-mute); margin-top:3px; }
.gr-crit .gr-note{ background:transparent; border:none; border-left:2px solid var(--line);
                   border-radius:0; padding:2px 0 2px 11px; margin:9px 0 0; }

.gr-auto{
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-top:8px;
  font-size:12.5px; color:var(--ink-mute);
}
.gr-auto.on{ color:var(--ink-soft); }

.gr-acts{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.gr-sign, .gr-inline{ display:flex; gap:7px; align-items:center; flex-wrap:wrap;
                      flex:1; min-width:0; }
.gr-sign input[type=text], .gr-inline input[type=text], .gr-sign select{
  font-family:var(--body); font-size:13px; padding:7px 10px;
  border:1px solid var(--line); border-radius:7px;
  background:var(--paper); color:var(--ink);
}
.gr-what{ flex:1; min-width:200px; }
.gr-ref{ width:150px; }
.gr-reason{ flex:1; min-width:180px; }
.gr-acts .btn{ width:auto; }
.gr-hist{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
          text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; }

/* --- graduating ----------------------------------------------------- */
.gr-grad{
  background:var(--raised); border:1px dashed var(--line);
  border-radius:var(--radius); padding:18px 20px;
}
.gr-grad.ready{ border-style:solid; border-left:3px solid var(--accent); }
.gr-grad textarea{
  width:100%; font-family:var(--body); font-size:14px; padding:9px 11px;
  border:1px solid var(--line); border-radius:8px; margin:5px 0 11px;
  background:var(--paper); color:var(--ink);
}
.gr-grad .btn{ width:auto; }

.gr-hist-list{ display:grid; gap:8px; }
.gr-hist-row{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding:11px 15px; background:var(--raised); border:1px solid var(--line-soft);
  border-radius:9px;
}
.gr-hist-row.revoked{ opacity:.62; }
.gr-hist-l{ font-family:var(--display); font-weight:800; font-size:15px; color:var(--ink); }
.gr-hist-m{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }
.gr-hist-n{ flex-basis:100%; font-size:13px; color:var(--ink-soft); font-style:italic; }

.gr-crit-head{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }

/* --- the public catalogue ------------------------------------------- */
.gr-cat-lvl{ margin-bottom:30px; }
.gr-cat-h{ display:flex; gap:10px; align-items:baseline; }
.gr-cat-dom{ border-left:3px solid var(--dc); padding-left:14px; margin:14px 0 18px; }
.gr-cat-dn{ display:flex; gap:8px; align-items:center; font-weight:700;
            font-size:14.5px; color:var(--ink); margin-bottom:7px; }
.gr-cat-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.gr-cat-list li{ font-size:13.5px; color:var(--ink-soft); }
.gr-cat-list li b{ color:var(--ink); font-weight:600; margin-right:6px; }
/* Scoped to the detail line on purpose. A bare `li span` rule also
   caught the role chips beside the title and stretched each one into a
   full-width bar -- the same class of bug as the global `label` rule
   that mangled fifty habit names in Phase 13. */
.gr-cat-list li .gr-cat-d{ display:block; margin-top:2px; }

/* --- the authoring screen ------------------------------------------- */
.gr-matrix{ border-collapse:collapse; width:100%; margin:14px 0; font-size:13.5px; }
.gr-matrix th, .gr-matrix td{
  border:1px solid var(--line-soft); padding:8px 11px; text-align:center;
}
.gr-matrix thead th{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
}
.gr-matrix thead th .gr-dom-dot{ margin-right:5px; vertical-align:middle; }
.gr-matrix tbody th{ text-align:left; font-weight:600; color:var(--ink); }
.gr-matrix td{ font-family:var(--mono); color:var(--ink); }
.gr-matrix td.is-empty{ color:var(--danger); background:var(--danger-bg); }
.gr-matrix-t{ font-weight:700; background:var(--sunk); }

.gr-filter{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:14px 0 18px; }
.gr-filter label{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute);
}
.gr-filter select{
  font-family:var(--body); font-size:13px; padding:6px 9px;
  border:1px solid var(--line); border-radius:7px;
  background:var(--paper); color:var(--ink);
}
/* A label and the control it names travel together. Without this the
   row wraps between them on a phone and every label sits above the
   WRONG select -- which is worse than no label at all. */
.gr-filter-f{ display:flex; gap:7px; align-items:center; }
.gr-filter .btn{ width:auto; }

.gr-admin-list{ display:grid; gap:7px; }
.gr-admin-row{
  display:flex; gap:11px; align-items:flex-start; padding:11px 15px;
  background:var(--raised); border:1px solid var(--line-soft);
  border-left:3px solid var(--dc); border-radius:9px;
}
.gr-admin-row.retired{ opacity:.6; }
.gr-admin-row .gr-dom-dot{ margin-top:5px; }
.gr-admin-b{ flex:1; min-width:0; }
.gr-admin-t{ font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; }
.gr-admin-t:hover{ text-decoration:underline; }
.gr-admin-m{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:4px;
             font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); }

.gr-seed{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 19px; margin-top:14px;
}
.gr-seed .btn{ width:auto; }
.gr-seed details{ margin-top:14px; }
.gr-seed summary{ font-size:13px; color:var(--ink-mute); cursor:pointer; }

/* The domain hue arrives on the element as TWO inline custom properties
   -- `--dcl` (light) and `--dcd` (dark) -- and `--dc` is resolved from
   them here. Setting `--dc` inline and overriding it in a media query
   would not work: an inline custom property beats any stylesheet rule
   for the same element, so the dark step would never win. */
.gr-domain, .gr-dom, .gr-cat-dom, .gr-admin-row, .gr-crit-head,
.gr-matrix thead th{ --dc:var(--dcl); }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.gr-domain, .gr-dom, .gr-cat-dom,
    .gr-admin-row, .gr-crit-head, .gr-matrix thead th){ --dc:var(--dcd); }
}
:root[data-theme="dark"] :is(.gr-domain, .gr-dom, .gr-cat-dom,
  .gr-admin-row, .gr-crit-head, .gr-matrix thead th){ --dc:var(--dcd); }

@media (max-width:640px){
  .gr-sign, .gr-inline{ flex-direction:column; align-items:stretch; }
  .gr-ref{ width:100%; }
  .gr-acts .btn{ width:100%; }
}

.gr-undo{ flex:1; min-width:0; }
.gr-undo summary{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); cursor:pointer;
}
.gr-undo summary:hover{ color:var(--ink); }
.gr-undo .gr-inline{ margin-top:8px; }

/* --- the Excellence Scale band, said once per level ----------------- */
.gr-band{
  background:var(--sunk); border:1px solid var(--line-soft);
  border-left:3px solid var(--accent); border-radius:9px;
  padding:12px 15px; margin-bottom:20px;
}
.gr-band-h{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:5px; }
.gr-band-n{ font-family:var(--display); font-weight:800; font-size:15px; color:var(--ink); }
.gr-band-pts, .gr-band-comp{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute);
}
.gr-band p{ margin:0; font-size:13.5px; color:var(--ink-soft); max-width:74ch; }

/* --- which rungs are written, on an authoring row ------------------- */
.gr-rungs{ display:flex; gap:4px; align-items:center; margin-top:6px; }
.gr-rung-dot{
  width:17px; height:17px; border-radius:4px; display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; font-weight:600;
  color:var(--ink-mute); background:transparent; border:1px dashed var(--line);
}
.gr-rung-dot.on{ color:var(--paper); background:var(--accent);
                 border:1px solid var(--accent); }
.gr-rungs-n{ font-family:var(--mono); font-size:10px; color:var(--ink-mute);
             margin-left:5px; }

/* --- the five-rung authoring form ----------------------------------- */
.gr-rung-edit{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 17px; margin-bottom:14px; background:var(--raised);
}
.gr-rung-h{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.gr-rung-n{ font-family:var(--display); font-weight:800; font-size:16px; color:var(--ink); }
.gr-rung-pts, .gr-rung-comp{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute);
}
.gr-rung-asks{ font-size:13px; color:var(--ink-mute); margin:5px 0 12px; max-width:74ch; }
.gr-rung-auto summary{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute); cursor:pointer;
}
.gr-rung-auto summary:hover{ color:var(--ink); }

/* --- one skill's whole ladder, on its history screen ---------------- */
.gr-ladder-list{ display:grid; gap:7px; margin-bottom:8px; }
.gr-ladder-row{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding:11px 15px; background:var(--raised);
  border:1px solid var(--line-soft); border-radius:9px;
}
.gr-ladder-row.unwritten{ background:transparent; border-style:dashed; }
.gr-ladder-l{ font-family:var(--display); font-weight:800; font-size:14.5px;
              color:var(--ink); min-width:104px; }
.gr-ladder-p{ font-family:var(--mono); font-size:10px; color:var(--ink-mute); }
.gr-ladder-t{ flex:1; min-width:240px; font-size:13.5px; color:var(--ink-soft); }

/* ======================================================================
   Progress — work rate
   ====================================================================== */

.pr-head, .pr-streak{
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px 22px; margin-bottom:16px;
}
.pr-total, .pr-streak-n{ display:flex; align-items:baseline; gap:8px; flex:none; }
.pr-n{ font-family:var(--display); font-weight:800; font-size:44px; line-height:1;
       color:var(--ink); font-variant-numeric:tabular-nums; }
.pr-streak-n .pr-n{ font-size:32px; }
.pr-u{ font-family:var(--mono); font-size:10px; letter-spacing:.06em;
       text-transform:uppercase; color:var(--ink-mute); }
.pr-head-b{ flex:1; min-width:240px; }
.pr-month{ margin:0; font-weight:600; color:var(--ink); }
.pr-vs{ margin:4px 0 0; font-size:13.5px; color:var(--ink-soft); }

/* The fortnight strip. Fourteen cells, and an empty one is drawn as an
   outline rather than left blank -- "nothing yet" and "not part of the
   picture" have to look different. */
.pr-strip{ display:flex; gap:4px; flex:1; min-width:200px; }
.pr-cell{ flex:1; height:26px; border-radius:5px;
          background:transparent; border:1px solid var(--line); }
.pr-cell.on{ background:var(--accent); border-color:var(--accent); }
.pr-cell.now{ outline:2px solid var(--accent); outline-offset:2px; }

.pr-parts{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(288px, 1fr)); }
.pr-part{ background:var(--raised); border:1px solid var(--line-soft);
          border-radius:var(--radius); padding:15px 17px; }
.pr-part-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pr-part-n{ font-family:var(--display); font-weight:700; font-size:15.5px; color:var(--ink); }
.pr-part-p{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--ink);
            font-variant-numeric:tabular-nums; }
/* One hue, one axis: these four are parts of one number, not four
   series, so they share the accent and differ only in length. */
.pr-bar{ height:6px; border-radius:3px; background:var(--sunk); margin:9px 0 10px;
         overflow:hidden; }
.pr-bar span{ display:block; height:100%; min-width:6px;
              background:var(--accent); border-radius:3px; }
.pr-part-d{ margin:0; font-size:13.5px; color:var(--ink); }
.pr-part-a{ margin:6px 0 0; font-size:12.5px; color:var(--ink-mute); line-height:1.55; }
.pr-foot{ margin-top:18px; }

@media (max-width: 520px){
  .pr-head, .pr-streak{ padding:16px 17px; }
  .pr-n{ font-size:36px; }
  .pr-cell{ height:22px; }
}

/* ---- Badges -----------------------------------------------------------
   An unearned badge is drawn, not hidden: it is the invitation, and a
   wall that only shows what you already have cannot tell you what to do
   next. Earned is a filled dot and full-strength ink; unearned is an
   outline and muted ink. Never colour alone -- the dot changes shape as
   well as fill, and the title attribute says what it asks for. */
.bdg-count{ font-size:15px; color:var(--ink); }
.bdg-wrap{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 18px; }
.bdg{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 9px;
     border:1px solid var(--line); border-radius:999px; background:transparent;
     font-size:13px; color:var(--ink-mute); cursor:default; }
.bdg-dot{ width:8px; height:8px; border-radius:50%; flex:none;
         border:1.5px solid var(--ink-mute); background:transparent; }
.bdg.on{ background:var(--raised); border-color:var(--dc, var(--accent)); color:var(--ink); }
.bdg.on .bdg-dot{ background:var(--dc, var(--accent)); border-color:var(--dc, var(--accent)); }
.bdg.bdg-m{ border-style:dashed; }
.bdg.bdg-m.on{ border-style:solid; }
.bdg-n{ white-space:nowrap; }

/* --dcl / --dcd are set inline per pillar; --dc resolves per theme,
   because an inline custom property beats a stylesheet rule. */
.bdg-group{ --dc:var(--dcl); margin-bottom:20px; }
.bdg-group-h{ display:flex; align-items:center; gap:9px; margin-bottom:2px; }
.bdg-group-n{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); }
.bdg-group-c{ font-family:var(--mono); font-size:10px; letter-spacing:.06em;
             text-transform:uppercase; color:var(--ink-mute); }
.bdg-recent{ margin-top:4px; }
.bdg-foot{ margin-top:20px; }

/* ---- The squad table --------------------------------------------------
   Top three named, the rest faded. Faded is opacity plus an em-dash in
   place of the name, so the row is still a row -- an athlete can see how
   many people are above them and how far, which is the point, without
   the table becoming a public ranking of everybody's month. */
.lb{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:4px; }
.lb-row{ display:flex; align-items:center; gap:14px; padding:11px 16px;
         background:var(--raised); border:1px solid var(--line-soft);
         border-radius:9px; }
.lb-row.faded{ opacity:.5; background:transparent; }
.lb-row.me{ border-color:var(--accent); background:var(--accent-bg); opacity:1; }
.lb-place{ font-family:var(--mono); font-size:12px; color:var(--ink-mute);
           min-width:22px; font-variant-numeric:tabular-nums; }
.lb-name{ flex:1; font-weight:600; color:var(--ink); }
.lb-you{ font-family:var(--mono); font-size:10px; letter-spacing:.06em;
         text-transform:uppercase; color:var(--accent-ink); }
.lb-total{ font-family:var(--display); font-weight:800; font-size:18px;
           color:var(--ink); font-variant-numeric:tabular-nums; }

.lb-mine{ background:var(--raised); border:1px solid var(--line);
          border-radius:var(--radius); box-shadow:var(--shadow);
          padding:20px 22px; margin-bottom:16px; }
.lb-mine-h{ display:flex; gap:22px; align-items:center; flex-wrap:wrap;
            margin-bottom:14px; }
.lb-gap{ margin:0; flex:1; min-width:230px; font-size:13.5px; color:var(--ink-soft); }
.lb-foot{ margin-top:20px; }

/* ---- The access record ------------------------------------------------ */
.ac-list{ display:grid; gap:5px; margin:12px 0 0; }
.ac-row{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
         padding:9px 14px; background:var(--raised);
         border:1px solid var(--line-soft); border-radius:8px; font-size:13.5px; }
.ac-who{ font-weight:600; color:var(--ink); }
.ac-what{ color:var(--ink-soft); flex:1; min-width:170px; }
.ac-when{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }

@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.bdg-group, .nr){ --dc:var(--dcd); } }
:root[data-theme="dark"] :is(.bdg-group, .nr){ --dc:var(--dcd); }

/* ---- Nearly there (Phase 19) ------------------------------------------
   Things within reach. Drawn as invitations, not alerts: no red, no
   warning triangle, no countdown. The accent is the PILLAR's when the
   item belongs to one, so a habit that is one card from a badge wears
   the same hue it wears in the journal and on the wall.

   The mark on the left says which kind it is without relying on colour
   -- a filled dot for a badge in reach, a ring for a full set, a bar
   for a run -- because three shades of the same accent is exactly the
   distinction a colourblind reader loses. */
.nr-list{ display:grid; gap:9px; margin:10px 0 22px; }
.nr{
  --dc:var(--dcl);
  display:flex; align-items:flex-start; gap:13px;
  background:var(--raised); border:1px solid var(--line-soft);
  border-left:3px solid var(--dc, var(--accent));
  border-radius:var(--radius); padding:14px 16px;
}
.nr-b{ flex:1; min-width:0; }
.nr-w{ margin:0; font-weight:600; font-size:15px; color:var(--ink); }
.nr-m{ margin:4px 0 0; font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.nr-go{ flex:none; margin-top:1px; }

.nr-mark{ flex:none; width:12px; height:12px; margin-top:4px; }
/* One move from a badge: a filled dot, the same shape the earned badges
   on the wall below wear. */
.nr-badge .nr-mark{ border-radius:50%; background:var(--dc, var(--accent)); }
/* A full set one habit short: a ring — the shape of an UNearned badge,
   because that is exactly what it still is. */
.nr-set .nr-mark{ border-radius:50%; background:transparent;
                  border:2.5px solid var(--dc, var(--accent)); }
/* A run: a bar, which is what a run looks like in the strip above. */
.nr-run .nr-mark{ height:6px; margin-top:7px; border-radius:3px;
                  background:var(--accent); }

/* ---- Personal bests (Phase 19) ----------------------------------------
   A record being set RIGHT NOW is the only emphasis on the block, and it
   is a border plus the word "Now" rather than colour alone. A record
   never set is drawn flat and dimmed rather than hidden: "nothing yet"
   is a true and useful thing for a new athlete to read. */
/* Four records, so the grid has to break 2x2 rather than 3+1 -- an
   orphan on its own row reads as a fifth thing that failed to load.
   240px is the width at which the page column fits exactly two. */
.pb-grid{ display:grid; gap:12px; margin:10px 0 4px;
          grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.pb{ background:var(--raised); border:1px solid var(--line-soft);
     border-radius:var(--radius); padding:15px 17px; }
.pb.is-live{ border-color:var(--accent); box-shadow:var(--shadow); }
.pb.is-empty{ background:transparent; }
.pb-h{ display:flex; align-items:baseline; gap:7px; }
.pb-n{ font-family:var(--display); font-weight:800; font-size:32px; line-height:1;
       color:var(--ink); font-variant-numeric:tabular-nums; }
.pb.is-empty .pb-n{ color:var(--ink-mute); }
.pb-u{ font-family:var(--mono); font-size:10px; letter-spacing:.06em;
       text-transform:uppercase; color:var(--ink-mute); }
.pb-l{ margin:8px 0 0; font-family:var(--display); font-weight:700;
       font-size:15px; color:var(--ink); }
.pb-w{ margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); }
.pb-d{ margin:8px 0 0; font-size:12.5px; color:var(--ink-mute); line-height:1.55; }

.pr-out{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }

@media (max-width: 520px){
  .lb-row{ padding:10px 13px; gap:10px; }
  .lb-mine{ padding:16px 17px; }
}

/* ======================================================================
   The front door
   ====================================================================== */

.td-today, .td-block, .td-said{ margin-bottom:26px; }
.td-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.td-h h2{ margin-bottom:6px; }
.td-count{ font-family:var(--mono); font-size:10px; letter-spacing:.06em;
           text-transform:uppercase; color:var(--ink-mute); }

.td-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.td-row{ display:flex; align-items:center; gap:13px; padding:13px 17px;
         background:var(--raised); border:1px solid var(--line);
         border-radius:10px; }
/* Done is stated, not just implied by colour: the tick is a character,
   the detail says "done", and the button changes from an action to a
   quiet link. Three signals, none of them hue alone. */
.td-row.done{ background:transparent; border-color:var(--line-soft); }
.td-tick{ width:22px; height:22px; flex:none; border-radius:50%;
          border:1.5px solid var(--line); display:flex; align-items:center;
          justify-content:center; font-size:12px; color:var(--ink-mute); }
.td-row.done .td-tick{ background:var(--accent); border-color:var(--accent);
                       color:var(--on-accent, #fff); }
.td-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.td-n{ font-weight:600; color:var(--ink); }
.td-row.done .td-n{ color:var(--ink-soft); font-weight:500; }
.td-d{ font-size:13px; color:var(--ink-mute); }
.td-go{ font-size:13px; color:var(--ink-mute); text-decoration:none; flex:none; }
.td-go:hover{ color:var(--ink); text-decoration:underline; }
.td-skip{ display:inline; margin:0; flex:none; }
.td-skip button.td-go{ background:none; border:0; padding:0 0 0 10px; cursor:pointer; font:inherit; font-size:13px; }
.td-row .btn{ width:auto; flex:none; }
.td-row.waiting .td-tick{ letter-spacing:1px; }
.td-row.nudge{ background:transparent; border-style:dashed; }
/* The one row on this page that came from a person. It is marked by a
   left edge in the accent rather than by a colour wash: the page already
   uses tinted backgrounds for state (done, quiet, waiting), and a fourth
   tint would read as a fourth state rather than a different source. */
.td-row.said{ border-left:3px solid var(--accent); }
.td-row.said .td-tick{ border-color:transparent; font-size:30px;
                       line-height:0; padding-top:9px; color:var(--accent);
                       font-family:Georgia, 'Times New Roman', serif; }

.td-stand{ display:grid; gap:10px; margin-top:10px;
           grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.td-card{ display:block; padding:16px 18px; background:var(--raised);
          border:1px solid var(--line); border-radius:10px;
          text-decoration:none; }
.td-card:hover{ border-color:var(--ink-mute); }
.td-card-n{ display:block; font-family:var(--display); font-weight:800;
            font-size:30px; line-height:1; color:var(--ink);
            font-variant-numeric:tabular-nums; }
.td-card-n span{ font-size:18px; color:var(--ink-mute); font-weight:700; }
.td-card-l{ display:block; margin-top:6px; font-size:13px; color:var(--ink-soft);
            line-height:1.45; }

/* The Daily Nine's row (16 Sep 2026). The sheet's own strip, one square
   per pillar in the pillar's colour: held is filled, off is a ring, not
   called is empty. Three shapes, so the day reads with the hue taken
   away. The hue is set inline as --k / --k-dark and picked per theme
   here, the pattern the journal's log blocks use. */
.td-row.nine{ align-items:flex-start; }
.td-row.nine .td-tick{ margin-top:2px; }
/* Not called is a faint wash of the pillar's own colour (16 Sep, after
   staging): all-grey squares carried none of the nine pillars, and the
   row read as a progress bar rather than a day. The plain line colour
   stays as the fallback for a browser without color-mix. */
.nine-strip{ display:flex; gap:4px; margin:5px 0 3px; }
.nine-strip .sq, .nine-key .sq{ width:15px; height:15px; border-radius:4px; flex:none;
  background:var(--line);
  background:color-mix(in srgb, var(--k) 24%, var(--raised)); }
.nine-strip .sq.held, .nine-key .sq.held{ background:var(--k); }
.nine-strip .sq.off, .nine-key .sq.off{ background:transparent; box-shadow:inset 0 0 0 2.5px var(--k); }
.td-run{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
         text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }
.td-run i{ font-style:normal; color:var(--accent); }
.nine-key{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:9px;
           font-size:12px; color:var(--ink-mute); }
.nine-key > span{ display:inline-flex; align-items:center; gap:6px; }
.nine-key .sq{ width:11px; height:11px; border-radius:3px; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.nine-strip, .nine-key) .sq{ background:color-mix(in srgb, var(--k-dark) 24%, var(--raised)); }
  :root:not([data-theme="light"]) :is(.nine-strip, .nine-key) .sq.held{ background:var(--k-dark); }
  :root:not([data-theme="light"]) :is(.nine-strip, .nine-key) .sq.off{ background:transparent; box-shadow:inset 0 0 0 2.5px var(--k-dark); }
}
:root[data-theme="dark"] :is(.nine-strip, .nine-key) .sq{ background:color-mix(in srgb, var(--k-dark) 24%, var(--raised)); }
:root[data-theme="dark"] :is(.nine-strip, .nine-key) .sq.held{ background:var(--k-dark); }
:root[data-theme="dark"] :is(.nine-strip, .nine-key) .sq.off{ background:transparent; box-shadow:inset 0 0 0 2.5px var(--k-dark); }

/* `.td-links` drew the "Everything else" block until 16 Sep 2026, when
   the block went: every link in it was in the bar already. */

@media (max-width: 520px){
  .td-row{ padding:12px 14px; gap:10px; flex-wrap:wrap; }
  .td-b{ min-width:120px; }
}

/* ======================================================================
   The top navigation
   ====================================================================== */

/* Each menu is a <details>. The summary is the visible item in the bar;
   the panel hangs off it. `position:relative` on the details is what
   anchors the panel, so nothing here depends on the bar's own layout. */
.topbar{ position:relative; }
.navm{ position:relative; }
.navm-t{
  list-style:none; cursor:pointer; user-select:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--ink-soft); padding:5px 2px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.navm-t::-webkit-details-marker{ display:none; }   /* Safari's own triangle */
/* The caret is ours, and it turns when the menu opens -- the one visual
   cue that this item has more behind it. */
.navm-t::after{
  content:""; width:0; height:0; margin-left:1px;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.55;
  transition:transform .12s ease;
}
.navm[open] > .navm-t::after{ transform:rotate(180deg); }
.navm-t:hover{ color:var(--ink); }
.navm[open] > .navm-t{ color:var(--ink); }
/* You-are-here is an underline on the group, not a colour: the bar is
   already mono and quiet, and a coloured word in it reads as a link
   state rather than a location. */
.navm.here > .navm-t{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }
.navm-t:focus-visible{ outline:2px solid var(--accent); outline-offset:2px;
                       border-radius:4px; }

.navm-d{
  position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  min-width:186px; padding:6px; display:grid; gap:1px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow);
}
.navm-d-r{ left:auto; right:0; }
.navm-i{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 11px; border-radius:7px; font-size:14px; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap;
}
.navm-i:hover{ background:var(--sunk); color:var(--ink); text-decoration:none; }
.navm-i.here{ color:var(--ink); font-weight:600; background:var(--accent-bg); }
/* The sign-out button is a form submit, so it has to be talked back into
   looking like the links above it. */
.navm-out{
  width:100%; border:none; background:transparent; cursor:pointer;
  font:inherit; font-size:14px; text-align:left; color:var(--ink-mute);
}
.navm-d form{ margin:0; }
.navm-out:hover{ background:var(--sunk); color:var(--ink); }

@media (max-width: 720px){
  /* Narrow screens anchor the panel to the BAR, not to the item.
     Anchoring to the item means a menu that has wrapped onto a second
     row opens off the side of the screen -- which is exactly what the
     account menu did once a coach had five of them. Spanning the bar
     cannot be clipped, wherever the summary ended up. */
  .navm{ position:static; }
  .navm-d, .navm-d-r{
    left:14px; right:14px; min-width:0;
    top:calc(100% + 6px);
  }
}

/* ---------- the notice, the ask, and the one shut door (Phase 28) ---------- */
.jr-notice{
  background:var(--sunk); border-radius:9px; padding:12px 15px;
  font-size:13.5px; color:var(--ink-soft); margin:0 0 20px; max-width:70ch;
}
.jr-ask{
  background:var(--accent-bg); border:1px solid var(--line);
  border-radius:9px; padding:14px 16px;
  display:flex; flex-direction:column; gap:8px;
}
.jr-ask-opt{
  display:flex; gap:10px; align-items:center;
  font-family:var(--body); font-size:14.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.jr-ask .hint{ margin-top:4px; max-width:56ch; }

.pb-private{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.pb-private-btn{
  font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:99px;
  padding:7px 15px; cursor:pointer; align-self:flex-start;
}
.pb-private-btn:hover{ border-color:var(--ink-mute); color:var(--ink); }
.pb-private.on .pb-private-btn{
  border-color:var(--accent); color:var(--accent-ink); background:var(--accent-bg);
}
.pb-private .hint{ max-width:62ch; }

/* ----------------------------------------------------------------------
   Sub-improvements (Phase 35)
   The specifics inside a broader improvement. A skill tag sits beside the
   athlete's own sentence; "no skill yet" is the commonest value and is
   drawn quietly rather than as a warning, because it is not one.
   ---------------------------------------------------------------------- */
.cd-subprog{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
             margin:-4px 0 12px; }
.cd-subbar{ width:180px; height:7px; border-radius:99px; background:var(--sunk);
            overflow:hidden; display:inline-block; }
.cd-subbar > span{ display:block; height:100%; background:var(--accent);
                   border-radius:99px; }
.cd-subs{ list-style:none; margin:0 0 14px; padding:0;
          border:1px solid var(--line); border-radius:10px; overflow:hidden; }
/* A grid, not a flex row. Flex-wrap put "Make its own" and "Remove" on a
   second line for some rows and inline for others, so five rows had four
   different shapes. */
.cd-sub{ display:grid; grid-template-columns:19px 1fr auto auto; gap:6px 12px;
         align-items:baseline; padding:10px 14px;
         border-bottom:1px solid var(--line-soft); }
.cd-sub > form:first-child{ display:flex; }
.cd-sub:last-child{ border-bottom:none; }
.cd-sub.done .cd-subt{ color:var(--ink-mute); text-decoration:line-through; }
.cd-tick{ width:19px; height:19px; margin-top:2px; border:1.5px solid var(--ink-mute);
          border-radius:5px; background:var(--raised); flex-shrink:0;
          font-size:12px; line-height:1; color:#fff; cursor:pointer; padding:0; }
.cd-tick.on{ background:var(--accent); border-color:var(--accent); }
.cd-subt{ font-size:14px; line-height:1.5; }
.cd-skill{ background:var(--accent-bg); color:var(--accent-ink); }
/* Who wrote a line the athlete did not. Quiet, and never on their own
   rows -- the same answer the card above gives for a coach-created card:
   the verb is allowed and the authorship is stated. */
.cd-byline{ background:var(--sunk); color:var(--ink-mute); font-weight:600; }
.cd-subnone{ margin:0 0 10px; }

/* Improvement-card work tagged to this same skill. A window onto the
   board, not a second place to tick: the card is where that work lives.
   Drawn rather than hidden, because two lists that never mention each
   other is the failure mode of having both. */
.gr-cardwork{
  margin:14px 0 4px; padding:12px 14px;
  border:1px dashed var(--line); border-radius:10px; background:var(--sunk);
}
.gr-cw-list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.gr-cw{ display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; }
.gr-cw.done .gr-cw-t{ text-decoration:line-through; color:var(--ink-mute); }
.gr-cw-t{ flex:1 1 12rem; }
.gr-cw-a{ font-size:.8rem; }
.cd-noskill{ background:transparent; color:var(--ink-mute);
             border:1px dashed var(--line); }
.cd-subwhen{ font-size:11.5px; color:var(--ink-mute); min-width:3.6em;
             text-align:right; }
/* Present, but quiet until wanted. Always reachable by keyboard: hiding
   them behind :hover alone would put "Make its own" out of reach of
   anybody not using a mouse. */
.cd-subacts{ display:flex; gap:10px; align-items:baseline;
             opacity:0; transition:opacity .12s ease; }
.cd-sub:hover .cd-subacts, .cd-sub:focus-within .cd-subacts{ opacity:1; }
@media (hover: none){ .cd-subacts{ opacity:1; } }

.cd-subacts form{ display:inline; }
.linkish{ background:none; border:none; padding:0; font-size:12.5px;
          font-weight:600; color:var(--accent); cursor:pointer;
          font-family:inherit; }
.linkish.quiet{ color:var(--ink-mute); font-weight:400; }
.cd-subadd{ display:flex; gap:9px; align-items:center; flex-wrap:wrap;
            margin-bottom:6px; }
.cd-subadd input[type=text]{ flex-grow:1; min-width:22ch; }

/* the shelf beside the board */
.bd-shelf{ margin-top:26px; border:1px dashed var(--line); border-radius:12px;
           padding:16px 18px; }
.bd-shelf h2{ margin:0 0 4px; }
.bd-shelfgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
               gap:10px; margin-top:12px; }
.bd-shelfcard{ border:1px solid var(--line); border-radius:9px; padding:10px 12px;
               background:var(--raised); display:flex; flex-direction:column; gap:6px; }
.bd-shelfcard .bd-t{ font-size:13.5px; font-weight:600; }
.bd-shelfcard form{ margin-top:2px; }


/* ----------------------------------------------------------------------
   The athlete strip (Phase 1 of the role redesign).

   Full width, directly under the trail, on every page about one athlete.
   It is the identity of the page rather than part of it: a coach should
   never be unsure whose screen they are on, and should never have to go
   back to a roster to reach the next thing about the same person.

   Deliberately quieter than the top bar and louder than the trail -- it
   sits between them in the hierarchy, which is exactly where it sits on
   the screen.
   ------------------------------------------------------------------- */
.ac{ background:var(--paper); border-bottom:1px solid var(--line); }
.ac-in{ max-width:var(--band-w); margin:0 auto; padding:14px 28px 0; }
.ac-who{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
         margin-bottom:11px; }
/* `h1, h2`: the athlete strip's name is an h2 -- the page beneath it has
   its own h1 -- and the coach's front door, which has no page beneath it,
   makes the same bar carry its h1. One appearance, whichever element the
   page needs. */
.ac-who h1, .ac-who h2{ margin:0; font-size:1.22rem; letter-spacing:-.01em;
                        font-weight:700; }
.ac-who h1 a, .ac-who h2 a{ color:inherit; text-decoration:none; }
.ac-who h1 a:hover, .ac-who h2 a:hover{ text-decoration:underline;
                                        text-underline-offset:3px; }
/* The eyebrow sits above the name rather than beside it, so the row keeps
   reading as one line of facts. */
.ac-who .ac-eyebrow{ flex-basis:100%; margin-bottom:2px; }
.ac-sq{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
        text-transform:uppercase; color:var(--ink-mute); }
/* The waiting line. Amber rather than red: work to do is not a fault, and
   a page that looks like an error teaches people to dread opening it. */
.ac-said{ font-size:.85rem; color:var(--warn-ink, #6b4a12);
          background:var(--warn-soft, #f6ecdb); border-radius:999px;
          padding:2px 11px; }

.ac-tabs{ display:flex; gap:2px; flex-wrap:wrap; }
.ac-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px 9px; font-size:.9rem; text-decoration:none;
  color:var(--ink-soft); border-bottom:2px solid transparent;
  border-radius:6px 6px 0 0;
}
.ac-tab:hover{ background:var(--sunk); color:var(--ink); }
.ac-tab.here{ color:var(--ink); font-weight:600;
              border-bottom-color:var(--accent); background:var(--raised); }
.ac-n{ font-family:var(--mono); font-size:.68rem; line-height:1;
       padding:3px 6px; border-radius:999px;
       background:var(--warn-ink, #6b4a12); color:var(--paper); }
.ac-tab.here .ac-n{ background:var(--accent); }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ac-said{ background:#2e2617; color:#e7c98d; }
  :root:not([data-theme="light"]) .ac-n{ background:#e7c98d; color:#2e2617; }
}
:root[data-theme="dark"] .ac-said{ background:#2e2617; color:#e7c98d; }
:root[data-theme="dark"] .ac-n{ background:#e7c98d; color:#2e2617; }

@media (max-width:720px){
  .ac-in{ padding:12px 18px 0; }
  /* Six tabs will not fit. Scrolled rather than wrapped: two rows of tabs
     above every page eats the screen an athlete's board needs. */
  .ac-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .ac-tabs::-webkit-scrollbar{ display:none; }
  .ac-tab{ white-space:nowrap; }
}

/* ----------------------------------------------------------------------
   Athletes, and Waiting (Phase 2 of the role redesign).

   Two destinations replacing four. The roster is grouped by squad because
   a coach thinks in squads -- that is what the Squads page was for -- and
   the first thing on every row is what is waiting on YOU for that person,
   which is the thing that decides who you open and was on none of the
   three pages this replaces.
   ------------------------------------------------------------------- */
.at-views{ display:flex; gap:4px; margin:18px 0 26px; }
.at-views a{
  font-size:.88rem; text-decoration:none; color:var(--ink-soft);
  padding:6px 13px; border-radius:999px; border:1px solid var(--line);
}
.at-views a:hover{ border-color:var(--ink-mute); color:var(--ink); }
.at-views a.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.at-squad{ margin:0 0 30px; }
.at-squad-h{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
.at-squad-h h2{ margin:0; font-size:1.06rem; }
.at-n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
       text-transform:uppercase; color:var(--ink-mute); }

.at-list{ border:1px solid var(--line); border-radius:12px; overflow:hidden;
          background:var(--raised); }
.at-row{
  display:grid; gap:3px 16px; padding:13px 18px; text-decoration:none;
  color:inherit; border-bottom:1px solid var(--line-soft);
}
.at-row:last-child{ border-bottom:none; }
.at-row:hover{ background:var(--sunk); }
@media(min-width:860px){
  .at-row{ grid-template-columns:minmax(160px,1.1fr) minmax(0,1.6fr) auto auto;
           align-items:center; }
}
/* A left edge rather than a background: the row still has to be readable,
   and a coloured row with six athletes in it is a traffic light, not a
   list. */
.at-row.needs{ box-shadow:inset 3px 0 0 var(--warn-ink, #6b4a12); }
.at-row.quiet:not(.needs){ box-shadow:inset 3px 0 0 var(--line); }
.at-name{ font-weight:600; display:flex; align-items:center; gap:8px; }
.at-said{ font-size:.88rem; color:var(--ink-soft); }
.at-row.needs .at-said{ color:var(--warn-ink, #6b4a12); font-weight:500; }
.at-more{ font-family:var(--mono); font-size:.72rem; color:var(--ink-mute);
          white-space:nowrap; }

/* A fortnight, one box a day. Somebody who has quietly stopped turning up
   is the thing this page exists to make visible. */
.at-strip{ display:inline-flex; gap:2px; }
.at-strip i{ width:7px; height:14px; border-radius:2px;
             background:var(--line-soft); }
.at-strip i.on{ background:var(--accent); }

.wt-part{ margin:0 0 38px; }
.wt-h{ font-size:1.1rem; margin:0 0 4px;
       padding-bottom:8px; border-bottom:1px solid var(--line); }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .at-row.needs{ box-shadow:inset 3px 0 0 #e7c98d; }
  :root:not([data-theme="light"]) .at-row.needs .at-said{ color:#e7c98d; }
}
:root[data-theme="dark"] .at-row.needs{ box-shadow:inset 3px 0 0 #e7c98d; }
:root[data-theme="dark"] .at-row.needs .at-said{ color:#e7c98d; }

/* Visible to a screen reader, to nothing else. A textarea whose only
   label is its placeholder is unlabelled the moment somebody starts
   typing -- the placeholder disappears and the field goes anonymous. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ----------------------------------------------------------------------
   The conversation (Phase 3).

   The card thread's shape, applied to everything else a coach could
   previously only read. Under the thing it is about, never beside it: a
   panel to the right reads as commentary ON somebody, and this is a reply
   TO what they wrote.

   The athlete's own notes sit on the other side, the way a thread reads
   anywhere else. There is deliberately no read receipt -- "have they seen
   it yet" is a question that changes how people write.
   ------------------------------------------------------------------- */
.nt{ margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.nt-h{ font-size:1.12rem; margin:0 0 14px; }

.nt-list{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:14px; }
.nt-one{
  background:var(--raised); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; max-width:64ch;
}
/* Your own words, pulled to the right. Same trick the card thread uses,
   so somebody who has read one recognises the other. */
.nt-one.mine{ margin-left:auto; background:var(--accent-soft, var(--sunk));
              border-color:var(--line-soft); }
.nt-by{ display:flex; gap:10px; align-items:baseline; margin-bottom:5px; }
.nt-by b{ font-size:.92rem; }
.nt-by span{ font-family:var(--mono); font-size:.7rem; color:var(--ink-mute); }
.nt-body{ white-space:pre-wrap; font-size:.96rem; line-height:1.6;
          max-width:none; }

.nt-say{ max-width:64ch; }
/* Explicit, because this box is drawn on two pages with different form
   styling. `.btn` is full-width inside the review pane's stylesheet and
   auto elsewhere, and a Send button that spans the whole column reads as
   the primary action of the page rather than the end of a sentence. */
/* The colours are stated, not inherited. Without them the box took the
   user agent's own white-on-black -- a white slab on every dark page the
   thread is drawn on, which is six of them. It survived because nothing
   in the suite can see a colour and nobody had shot this screen in dark.
   Same tokens as `.jr-form textarea`; the thread and the journal are the
   same act of writing. */
.nt-say textarea{ width:100%; font:inherit; font-size:.96rem;
                  line-height:1.6;
                  color:var(--ink); background:var(--raised);
                  border:1px solid var(--line); border-radius:9px;
                  padding:11px 13px; resize:vertical; }
.nt-say textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.nt-acts{ display:flex; gap:14px; align-items:center; flex-wrap:wrap;
          margin-top:9px; }
.nt-acts .btn{ width:auto; flex:none; }
.nt-acts .hint{ margin:0; flex:1; min-width:0; }

/* Drawn inside a pane that already has its own rule above it. */
.nt-tight{ margin-top:26px; padding-top:20px; }

@media (max-width:620px){ .nt-one, .nt-one.mine{ max-width:none; margin-left:0; } }


/* A card somebody else put on this board. Marked, never hidden, and
   never a warning colour: a coach adding work is a normal act, and the
   tag exists so it is never a silent one. */
.cd-tag.cd-added{ border-style:dashed; }


/* ======================================================================
   The assessment result: what they actually said

   The scores were here from Phase 3; the answers behind them were not,
   which is the wrong way round for a coach. A disclosure per pillar,
   because 54 statements on one page is a document rather than a screen,
   and the pillar is the unit somebody arrives following.
   ====================================================================== */
.ar-said{ margin:34px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.ar-said > .dek{ max-width:70ch; }

.ar-p{ border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
       background:var(--raised); }
.ar-p > summary{
  display:flex; align-items:baseline; gap:12px; cursor:pointer;
  padding:12px 16px 12px 19px; list-style:none; border-radius:10px;
  border-left:3px solid var(--k, var(--line));
}
.ar-p > summary::-webkit-details-marker{ display:none; }
.ar-p > summary:hover{ background:var(--sunk); }
.ar-p > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.ar-p-n{ font-weight:600; flex:1; min-width:0; }
.ar-p-s{ font-variant-numeric:tabular-nums; font-weight:600; }
.ar-p-of{ color:var(--ink-mute); font-weight:400; font-size:.8em; }
.ar-p-b{ font-size:12px; color:var(--ink-mute); min-width:9ch; text-align:right; }
/* Not a warning colour. A low answer is the athlete being useful about
   themselves, and colouring it like a fault would teach them not to. */
.ar-p-low{ font-size:11px; color:var(--ink-mute); font-family:var(--mono);
           border:1px dashed var(--line); border-radius:999px; padding:2px 8px; }

.ar-list{ list-style:none; margin:0; padding:4px 16px 14px 19px; display:grid; gap:1px; }
.ar-row{ display:flex; gap:18px; align-items:baseline; padding:9px 0;
         border-top:1px solid var(--line-soft); }
.ar-row:first-child{ border-top:none; }
.ar-q{ flex:1; min-width:0; font-size:.94rem; line-height:1.5; }
.ar-a{ flex:none; display:flex; align-items:center; gap:9px; width:19ch; }
.ar-dots{ display:flex; gap:3px; }
.ar-dots i{ width:7px; height:7px; border-radius:50%; background:var(--sunk);
            border:1px solid var(--line); }
.ar-dots i.on{ background:var(--ink-soft); border-color:var(--ink-soft); }
.ar-row.low .ar-dots i.on{ background:var(--accent); border-color:var(--accent); }
.ar-lab{ font-size:12px; color:var(--ink-mute); }
.ar-row.low .ar-q{ font-weight:600; }
.ar-scale{ margin-top:14px; max-width:76ch; }

@media (max-width:700px){
  .ar-row{ flex-direction:column; gap:6px; }
  .ar-a{ width:auto; }
  .ar-p-b{ display:none; }
}


/* A heading inside the account menu. A coach's own journal, board and
   pathway live there, and without a word saying so they read as
   coaching tools. */
.navm-h{ display:block; padding:9px 14px 4px; font-family:var(--mono);
         font-size:10px; letter-spacing:.07em; text-transform:uppercase;
         color:var(--ink-mute); border-top:1px solid var(--line-soft);
         margin-top:4px; }
.navm-d > .navm-h:first-child{ border-top:none; margin-top:0; }

/* ======================================================================
   The coach's front door (Phase 41)

   Athletes answers WHO and Waiting answers WHAT; this answers what a
   coach should have noticed. The tab strip reuses `.ac-tabs` from the
   athlete chrome deliberately -- a coach already learned that control on
   an athlete's page, and teaching it twice in two shapes is how a bar
   stops being read.

   No red anywhere on this page. The rule is already written next to
   `.ac-said`: work to do is not a fault, and a page that looks like an
   error teaches people to dread opening it. The nine-day item is amber,
   the same amber.
   ====================================================================== */
.cf-head{ margin-bottom:22px; }
.cf-fact{ font-size:13.5px; color:var(--ink-mute); }
.cf-sec{ margin:0 0 26px; }
.cf-sec h2{ font-family:var(--display); font-size:1.02rem; font-weight:700;
            margin:0 0 3px; }
.cf-sec .hint{ margin-bottom:12px; max-width:66ch; }

/* the queue, oldest first. A list, not cards: the rail carries the age. */
.cf-queue{ list-style:none; margin:0; padding:0;
           display:flex; flex-direction:column; gap:1px;
           background:var(--line-soft); border-radius:8px; overflow:hidden; }
.cf-queue li{ display:grid; grid-template-columns:74px 1fr auto;
              align-items:baseline; gap:14px; padding:11px 14px;
              background:var(--raised); border-left:3px solid transparent; }
.cf-queue li.warm{ border-left-color:var(--warn-ink, #6b4a12); }
.cf-queue li.old{ border-left-color:var(--warn-ink, #6b4a12);
                  background:var(--warn-soft, #f6ecdb); }
.cf-age{ font-family:var(--mono); font-size:12.5px; white-space:nowrap;
         color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.cf-queue li.warm .cf-age, .cf-queue li.old .cf-age{
         color:var(--warn-ink, #6b4a12); font-weight:500; }
.cf-who{ font-weight:700; }
.cf-what{ display:block; font-size:13.5px; color:var(--ink-soft); }
.cf-act{ font-size:13px; white-space:nowrap; }

/* the two lists nobody asked for */
.cf-pair{ display:grid; gap:26px;
          grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.cf-notes{ list-style:none; margin:0; padding:0;
           display:flex; flex-direction:column; gap:11px; }
.cf-notes li{ display:grid; grid-template-columns:9px 1fr; gap:11px;
              align-items:start; }
.cf-dot{ width:9px; height:9px; border-radius:50%; margin-top:6px;
         background:var(--ink-mute); }
.cf-dot.watch{ background:var(--warn-ink, #6b4a12); }
.cf-dot.good{ background:var(--accent); }
.cf-line{ display:block; font-size:13.5px; color:var(--ink-soft); }
.cf-notes a{ font-size:13px; }

/* the week */
.cf-tiles{ display:flex; flex-wrap:wrap; gap:10px; }
.cf-tile{ flex:1 1 160px; padding:12px 14px; border:1px solid var(--line);
          border-radius:10px; background:var(--sunk); }
.cf-n{ font-family:var(--display); font-weight:800; font-size:20px;
       font-variant-numeric:tabular-nums; }
.cf-n small{ font-size:13px; font-weight:600; color:var(--ink-mute); }
.cf-l{ display:block; font-size:12.5px; color:var(--ink-mute); margin-top:1px; }
.cf-squads{ list-style:none; margin:0; padding:0;
            display:flex; flex-direction:column; gap:9px; }
.cf-squads li{ display:grid; grid-template-columns:170px 1fr 54px; gap:12px;
               align-items:center; font-size:13.5px; }
.cf-sq-n{ font-weight:700; }
.cf-bar{ height:9px; border-radius:999px; background:var(--sunk);
         overflow:hidden; }
.cf-bar span{ display:block; height:100%; background:var(--accent);
              border-radius:999px; }
.cf-pc{ font-family:var(--mono); font-size:12px; color:var(--ink-mute);
        text-align:right; font-variant-numeric:tabular-nums; }
.cf-scroll{ overflow-x:auto; }
.cf-fort{ width:100%; border-collapse:collapse; font-size:13.5px;
          min-width:420px; }
.cf-fort th{ text-align:left; font-family:var(--mono); font-weight:400;
             font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
             color:var(--ink-mute); padding:0 0 7px;
             border-bottom:1px solid var(--line); }
.cf-fort td{ padding:7px 0; border-bottom:1px solid var(--line-soft);
             vertical-align:middle; }
.cf-fort td:first-child{ font-weight:600; padding-right:16px; white-space:nowrap; }
.cf-fort tr.is-quiet td:first-child a{ color:var(--warn-ink, #6b4a12); }
.cf-strip{ display:grid; grid-template-columns:repeat(14, 1fr); gap:2px;
           max-width:190px; height:14px; }
.cf-strip i{ display:block; border-radius:2px; background:var(--sunk); }
.cf-strip i.on{ background:var(--accent); }

/* what changed */
.cf-day{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
         text-transform:uppercase; color:var(--ink-mute); margin:18px 0 8px; }
.cf-feed{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.cf-feed .ac-row.flagged{ border-color:var(--warn-ink, #6b4a12);
                          background:var(--warn-soft, #f6ecdb); }
.cf-mark{ display:flex; align-items:center; gap:12px; margin:22px 0 10px;
          font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
          text-transform:uppercase; color:var(--ink-mute); }
.cf-mark::before, .cf-mark::after{ content:""; flex:1 1 auto; height:1px;
          background:var(--line); }
.cf-seen .ac-row{ opacity:.62; }

.cf-foot{ display:flex; flex-wrap:wrap; gap:16px; margin:22px 0 0;
          padding-top:16px; border-top:1px solid var(--line-soft);
          font-size:13.5px; }

@media (max-width:560px){
  .cf-queue li{ grid-template-columns:1fr; gap:3px; }
  .cf-queue li .cf-act{ justify-self:start; }
  .cf-squads li{ grid-template-columns:1fr 50px; }
  .cf-bar{ grid-column:1 / -1; }
}

/* ======================================================================
   The skill log (Phase 42)

   A table somebody types down, not fifty-nine forms opened one at a
   time. The first version put each skill's form in a <details>; four
   skills was four page loads, which is the difference between a log kept
   every day and a log kept when somebody remembers.

   Two rows of tabs, because a ladder of fifty-nine skills has to be cut
   twice before it is drawn -- by role, then by domain. Both carry
   counts. Neither hides anything.

   Below 700px the table stops being a table: each row becomes a card
   with the column name in front of each field, because four number
   inputs across a phone is a form nobody fills in.
   ====================================================================== */
.lg-tabs{ display:flex; gap:2px; flex-wrap:wrap; }
.lg-ladders{ margin:0 0 4px; }
.lg-doms{ margin:0 0 20px; border-bottom:1px solid var(--line); }
.lg-tab{ display:inline-flex; align-items:center; gap:7px;
         padding:7px 13px 8px; font-size:.9rem; text-decoration:none;
         color:var(--ink-soft); border-bottom:2px solid transparent;
         border-radius:6px 6px 0 0; }
.lg-tab:hover{ background:var(--sunk); color:var(--ink); }
.lg-tab.here{ color:var(--ink); font-weight:600; background:var(--raised);
              border-bottom-color:var(--accent); }
.lg-n{ font-family:var(--mono); font-size:.68rem; line-height:1;
       padding:3px 6px; border-radius:999px; background:var(--sunk);
       color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.lg-tab.here .lg-n{ background:var(--accent-bg); color:var(--accent-ink); }

.lg-tablewrap{ overflow-x:auto; }
.lg-table{ width:100%; border-collapse:collapse; font-size:14px; }
.lg-table th{ text-align:left; font-family:var(--mono); font-weight:400;
              font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
              color:var(--ink-mute); padding:0 10px 8px 0;
              border-bottom:1px solid var(--line); white-space:nowrap; }
.lg-table td{ padding:6px 10px 6px 0; border-bottom:1px solid var(--line-soft);
              vertical-align:middle; }
.lg-table tr:hover td{ background:var(--sunk); }
.lg-c-skill{ min-width:190px; }
.lg-c-skill a{ color:var(--ink); text-decoration:none; font-weight:600; }
.lg-c-skill a:hover{ text-decoration:underline; text-underline-offset:3px; }
.lg-table input{ font-family:var(--body); font-size:14px; color:var(--ink);
                 background:var(--paper); border:1px solid var(--line);
                 border-radius:7px; padding:6px 9px; width:100%; }
.lg-table input:focus{ border-color:var(--accent); outline:none;
                       box-shadow:0 0 0 3px var(--accent-bg); }
.lg-c-num{ width:88px; }
.lg-c-num input{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.lg-c-note{ width:34%; min-width:150px; }
.lg-c-today{ white-space:nowrap; font-size:12.5px; }
.lg-has{ color:var(--accent); font-family:var(--mono); font-size:11.5px;
         font-variant-numeric:tabular-nums; }
.lg-nil{ color:var(--ink-mute); }

/* Sticky, so a long domain does not mean scrolling to the bottom to save.
   Solid, with a rule above it, because the first version faded to
   transparent over the top 38% and the button then sat -- opaque, black,
   unexplained -- directly on top of a table row, hiding its Whole and
   Part boxes with half the row showing through around it. On the batting
   log that was "Strike Rotation with Turn" at 1280px and "Front Foot
   Drive" at 430px: a skill an athlete could not see to fill in.
   A docked bar overlapping the rows above it is a bar. A shape floating
   over a form with the form visible through its edges is a bug, and
   reads as one. Same behaviour, and it stops looking broken. */
.lg-save{ position:sticky; bottom:0; z-index:2; display:flex;
          align-items:center; gap:14px; flex-wrap:wrap;
          padding:12px 0; margin-top:2px;
          background:var(--paper); border-top:1px solid var(--line-soft); }
.lg-save .btn{ width:auto; }
/* And nothing the keyboard lands on ends up underneath it: tabbing down
   the column scrolls the next input clear of the bar rather than to the
   exact bottom edge, where the bar is. */
html:has(.lg-save){ scroll-padding-bottom:84px; }
.lg-foot{ margin-top:26px; padding-top:16px;
          border-top:1px solid var(--line-soft); max-width:70ch; }

@media (max-width:700px){
  .lg-table thead{ position:absolute; width:1px; height:1px; overflow:hidden;
                   clip:rect(0 0 0 0); white-space:nowrap; }
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table td{ display:block;
                   width:auto; }
  .lg-table tr{ background:var(--raised); border:1px solid var(--line-soft);
                border-radius:9px; padding:10px 12px; margin-bottom:8px; }
  .lg-table td{ border:0; padding:4px 0; display:grid;
                grid-template-columns:112px 1fr; align-items:center; gap:10px; }
  .lg-table td::before{ content:attr(data-h); font-family:var(--mono);
                font-size:10px; letter-spacing:.06em; text-transform:uppercase;
                color:var(--ink-mute); }
  .lg-c-skill::before{ display:none; }
  .lg-c-skill{ display:block; font-size:15px; margin-bottom:4px; }
  .lg-c-num, .lg-c-note{ width:auto; }
}

/* one skill's record */
.lg-spans{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; }
.lg-span{ flex:1 1 150px; padding:12px 14px; border:1px solid var(--line);
          border-radius:10px; background:var(--sunk); }
.lg-span-n{ font-family:var(--display); font-weight:800; font-size:22px;
            font-variant-numeric:tabular-nums; display:block; }
.lg-span-l{ display:block; font-size:12.5px; color:var(--ink-mute); }
.lg-span-p{ display:block; font-family:var(--mono); font-size:11px;
            color:var(--ink-mute); margin-top:3px;
            font-variant-numeric:tabular-nums; }
.lg-strip{ display:grid; grid-template-columns:repeat(14, 1fr); gap:3px;
           max-width:280px; height:18px; margin-bottom:8px; }
.lg-strip i{ display:block; border-radius:2px; background:var(--sunk); }
.lg-strip i.on{ background:var(--accent); }
.lg-strip i.half{ background:var(--accent); opacity:.42; }
.lg-standard{ max-width:66ch; margin:0 0 8px; color:var(--ink-soft); }
.lg-group{ margin:0 0 26px; }
.lg-group h2{ font-family:var(--display); font-size:1.02rem; font-weight:700;
              margin:0 0 3px; }

/* logging one skill, from its own page */
.lg-one{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 12px; }
.lg-one label{ display:flex; flex-direction:column; gap:4px; font-size:12px;
               color:var(--ink-mute); }
.lg-one input{ font-family:var(--body); font-size:14px; color:var(--ink);
               background:var(--paper); border:1px solid var(--line);
               border-radius:8px; padding:7px 10px; width:110px; }
.lg-one .lg-one-note{ flex:1 1 220px; }
.lg-one .lg-one-note input{ width:100%; }
.lg-opt{ font-family:var(--mono); font-size:10px; letter-spacing:.05em;
         text-transform:uppercase; }

/* A skill on the daily list is held by doing the reps, so its box shows
   the number it is at rather than a control nobody should press. */
.nn-box.nn-reps{ font-family:var(--mono); font-size:12px; font-weight:500;
                 font-variant-numeric:tabular-nums; }
.nn-add-skill{ margin:32px 0 0; padding-top:20px;
               border-top:1px solid var(--line); }
.nn-add-skill h2{ font-family:var(--display); font-size:1.02rem;
                  font-weight:700; margin:0 0 4px; }
.nn-add-skill .hint{ max-width:66ch; margin-bottom:14px; }
.nn-skillform{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.nn-skillform label{ display:flex; flex-direction:column; gap:4px;
                     font-size:12px; color:var(--ink-mute); }
.nn-skillform select, .nn-skillform input{
  font-family:var(--body); font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; }
.nn-skillform input{ width:110px; }
.nn-skillform .btn{ width:auto; }

/* Nine pillars where fifty habits used to be (2 Sep 2026). One row of
   chips rather than nine groups of them, because the whole point of the
   change is that the question fits on a screen and gets answered.

   The same chip as the habit bank, only bigger: nine of them are the
   whole question now rather than a label on a group, and a chip somebody
   taps on a phone after a match wants a target you can hit without
   looking. Selecting fills it with the pillar's own colour -- an
   always-on dot said nothing about whether you had picked it. */
.jr-pillars{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.jr-pillars .jr-chip span{
  font-size:14px; padding:10px 15px; border-radius:999px;
  min-height:22px; display:inline-flex; align-items:center;
}
.jr-pillars .jr-chip input:checked + span{ box-shadow:0 1px 2px rgba(22,34,31,.14); }

/* One more line, for the session that needs one. Quiet by default: it is
   an escape hatch, not a prompt to fill four boxes. */
.jr-add{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  font-family:var(--body); font-size:13px; color:var(--accent-ink);
  background:transparent; border:1px dashed rgba(47,124,80,.45);
  border-radius:9px; padding:8px 13px; cursor:pointer;
}
.jr-add:hover{ background:var(--raised); border-style:solid; }
.jr-add:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.jr-add span{ font-size:15px; line-height:1; }

/* ----------------------------------------------------------------------
   What a coach has seen of a pillar.

   On the Review page beside the assessment scores, because self-report
   and observation are two readings of the same six statements and are
   worth little apart. Borrows `.gr-note`, `.gr-sign` and `.gr-tag` from
   the skills board on purpose: it is the same act, signed the same way,
   and it should not look like a different one. */
.rv-pdot{ width:8px; height:8px; border-radius:50%; background:var(--pc, var(--line));
          display:inline-block; margin-right:6px; flex-shrink:0; }
.rv-obs{ display:flex; flex-direction:column; gap:12px; margin:14px 0 4px; }
.rv-ob{ border:1px solid var(--line); border-radius:10px; padding:12px 14px;
        border-left:3px solid var(--line); }
.rv-ob.met{ border-left-color:var(--accent); }
.rv-ob-h{ display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; }
.rv-ob-t{ font-size:14px; font-weight:600; line-height:1.35; }
.rv-ob-none{ font-family:var(--mono); font-size:10px; letter-spacing:.04em;
             text-transform:uppercase; color:var(--ink-mute); }
.rv-ob-asks{ margin:8px 0 0; font-size:12.5px; line-height:1.55;
             color:var(--ink-mute); }
.rv-ob-asks b{ color:var(--ink-soft); }
.rv-ob .gr-sign{ margin-top:9px; }
/* The board says this in `skills.css`; one class is not worth pulling a
   second stylesheet onto this page, so it is said again here. */
.rv-ob-broken{ display:inline-block; font-family:var(--mono); font-size:9.5px;
               letter-spacing:.04em; text-transform:uppercase;
               color:var(--danger); border:1px solid var(--danger);
               border-radius:99px; padding:0 7px; }

/* ---------- the assessment, at the top of the course ------------------
 *
 * 4 Sep 2026. The only link to it was one phrase in a paragraph BELOW the
 * nine pillar cards, so an athlete looking for it read past the whole
 * course to find it -- and the platform knew, per discipline, which one
 * was waiting.
 *
 * One row per discipline because that is how it is taken: retaking
 * batting does not reset bowling.
 */
.as-panel{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--raised); box-shadow:var(--shadow);
  padding:16px 18px; margin:0 0 26px;
}
/* Accent, never alarm: a discipline that has not been sat is not a
   failure, it is a thing to go and do. Amber never red. */
.as-panel.is-due{ border-left:3px solid var(--accent); }
.as-panel-h{
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline;
  margin-bottom:12px;
}
.as-panel-h span{ color:var(--ink-mute); font-size:.85rem; }
.as-roles{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
/* No longer a link. The tile holds two different acts -- open what you
   scored, or go and sit another -- and a card that is itself one big
   anchor can only offer one of them. It offered the wrong one: every
   tile went to "take it again" and nothing on this page opened a result. */
.as-role{
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; color:inherit;
  border:1px solid var(--line); border-left:3px solid var(--role, var(--line));
  border-radius:10px; background:var(--paper);
}
.as-role.is-due{ background:var(--accent-bg); border-color:transparent;
  border-left-color:var(--role, var(--accent)); }
.as-role-h{ display:flex; flex-wrap:wrap; gap:1px 10px; align-items:baseline; }
.as-role-n{ font-weight:700; }
.as-role-s{ font-size:.85rem; color:var(--ink-mute); }
.as-role.is-due .as-role-s{ color:var(--accent-ink); font-weight:600; }
.as-role-w{ font-size:.78rem; color:var(--ink-mute); margin:0; }

/* What they scored, and it opens. */
.as-role-sits{ display:grid; gap:5px; }
.as-sit{
  display:flex; flex-wrap:wrap; gap:1px 8px; align-items:baseline;
  padding:7px 10px; border:1px solid var(--line-soft); border-radius:8px;
  background:var(--raised); text-decoration:none; color:inherit;
}
.as-sit:hover{ border-color:var(--role, var(--line)); background:var(--sunk); }
.as-sit-score{ font-weight:700; font-size:1.05rem; }
.as-sit-of{ font-weight:400; font-size:.76rem; color:var(--ink-mute); }
.as-sit-when{ font-size:.78rem; color:var(--ink-mute); margin-left:auto; }

/* What they would do next, said as one line rather than as the whole
   card, so it cannot swallow the scores above it. */
.as-role-go{
  font-size:.8rem; font-weight:600; text-decoration:none;
  color:var(--role, var(--ink)); margin-top:auto;
}
.as-role-go:hover{ text-decoration:underline; }
/* The role accent is a LIGHT-palette colour. On the dark tile it was a
   burnt orange on near-black -- 2.6:1, under every threshold there is.
   `--role-dark` is the pair the rest of the app already carries
   (`.role-accent`, `.role-choice-dot`); this line and the two templates
   that set it were simply never joined up. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .as-role-go{ color:var(--role-dark, var(--ink)); }
}
:root[data-theme="dark"] .as-role-go{ color:var(--role-dark, var(--ink)); }
.as-panel-f{ margin:12px 0 0; }

/* The pillar cards paint their own background, so they need the dark
   palette as well as the light one. Without it a dark-mode reader got a
   light tile with light text on it and nine invisible pillar names --
   the cards carried only `--card-bg` from the light palette while `--ink`
   flipped underneath them. The pair `.role-choice` already carries. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pcard{ background:var(--card-bg-dark, var(--raised)); }
  :root:not([data-theme="light"]) .pcard-dot{ background:var(--card-accent-dark, var(--ink)); }
}
:root[data-theme="dark"] .pcard{ background:var(--card-bg-dark, var(--raised)); }
:root[data-theme="dark"] .pcard-dot{ background:var(--card-accent-dark, var(--ink)); }




/* The improvement's own description, under its title. Full width above
   the plan/helpers pair, because it is what the card IS and those are
   what happens next. */
.cd-desc-main{
  margin:10px 0 0; font-size:1.02rem; line-height:1.55; color:var(--ink);
  white-space:pre-wrap;
}
/* The way in when the card is still just a title -- the quick-add box on
   the board makes a lot of those. */
.cd-say-more{ margin:10px 0 0; font-size:.86rem; color:var(--ink-mute); }


/* Sittings that belong to no discipline tile -- taken whole-game, or
   before the athlete had a role. Their own work, and it was drawn
   nowhere at all until 9 Sep 2026. */
.as-earlier{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);
}


/* "What you have submitted" -- one row per thing the athlete filed. */
.sb-list{ display:grid; gap:8px; margin:10px 0 0; }
.sb-row{
  display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
  justify-content:space-between;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--raised); text-decoration:none; color:inherit;
}
.sb-row:hover{ border-color:var(--ink-mute); }
.sb-what{ display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; }
.sb-when{ font-size:.82rem; color:var(--ink-mute); }
.sb-score{ font-weight:700; }
.sb-of{ font-weight:400; font-size:.76rem; color:var(--ink-mute); }
.sb-stage{ font-size:.8rem; color:var(--ink-mute); }

/* ----------------------------------------------------------------------
   Course access (9 Sep 2026). Nine pillars, a level each, set by a coach.
   The pillar's own colour on the left edge, the same as everywhere else
   the nine appear -- a coach who has learnt the colours should not have
   to read the names again here.
   ------------------------------------------------------------------- */
.ca-list{ display:grid; gap:10px; }
.ca-row{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--k, var(--line)); border-radius:var(--radius);
  padding:12px 15px;
}
.ca-what{ display:flex; flex-direction:column; gap:2px; min-width:190px; }
.ca-what b{ font-size:14.5px; color:var(--ink); }
.ca-levels{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.ca-opt input{ position:absolute; opacity:0; pointer-events:none; }
.ca-opt span{
  display:inline-block; font-size:12.5px; padding:6px 12px; border-radius:7px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  cursor:pointer;
}
/* --on-accent, never a literal white. `#fff` on `var(--accent)` inverts
   in the dark theme -- the accent lightens to #4dc480 and white on it is
   2.21:1. Caught by dark_audit.py on the course-level screen, which had
   carried this since it was written and only failed once every athlete
   had a level checked on it. */
.ca-opt input:checked + span{
  background:var(--k, var(--accent)); border-color:var(--k, var(--accent));
  color:var(--on-accent); font-weight:600;
}
.ca-opt input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:620px){
  .ca-levels{ margin-left:0; }
}
.rv-access{ margin:14px 0 4px; font-size:14px; }
.rv-access .hint{ display:inline; margin-left:4px; }

/* ======================================================================
   Unsaved drafts (app/static/draft.js)

   Amber, not red: having a draft is ordinary and allowed, and nothing
   has gone wrong. The bar is inserted as the FIRST child of whatever
   form it belongs to, and forms here are variously blocks, flex rows
   and grids -- so it claims a full row in all three rather than
   becoming a grid cell or a flex sibling of the inputs.
   ====================================================================== */

.dft{
  grid-column:1 / -1; flex-basis:100%; width:100%; box-sizing:border-box;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-radius:9px; padding:10px 13px; margin:0 0 16px;
  font-size:14px;
  color:var(--amber-ink); background:var(--amber-bg);
  border:1px solid color-mix(in srgb, var(--amber-ink) 24%, transparent);
}
.dft-t{ flex:1 1 auto; min-width:min(100%, 22ch); }
.dft-a{ display:flex; gap:8px; flex:0 0 auto; margin-left:auto; }
.dft-b, .dft-x{
  font-family:var(--body); font-size:13.5px; font-weight:700;
  border-radius:999px; padding:6px 15px; cursor:pointer; width:auto;
  white-space:nowrap;
}
.dft-b{
  color:var(--paper); background:var(--amber-ink);
  border:1px solid var(--amber-ink);
}
.dft-x{
  color:var(--amber-ink); background:transparent;
  border:1px solid color-mix(in srgb, var(--amber-ink) 34%, transparent);
  font-weight:500;
}
.dft-b:hover{ opacity:.9; }
.dft-x:hover{ border-color:var(--amber-ink); }
.dft-b:focus-visible, .dft-x:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px;
}

/* The quiet line under a long form -- opt-in with data-draft-note. */
.dft-note{
  grid-column:1 / -1; flex-basis:100%; width:100%;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-mute); margin:10px 0 0;
}

/* ======================================================================
   Answering a plan -- drawn on the plan board AND on the Waiting queue,
   which loads no skills stylesheet, so these belong here.
   ====================================================================== */

/* Wraps, because it now holds a box as well as two buttons -- and a
   flex row that cannot wrap squashes whatever is widest, which on this
   card is the box somebody is meant to type a sentence into. The draft
   bar taught this the expensive way on 10 Sep. */
.pl-answer{ display:flex; flex-wrap:wrap; gap:6px; margin-top:3px;
            align-items:center; }
.pl-say{
  flex:1 1 14ch; min-width:0;
  font-family:var(--body); font-size:12.5px;
  color:var(--ink); background:var(--raised);
  border:1px solid var(--line); border-radius:8px; padding:6px 9px;
}
.pl-say::placeholder{ color:var(--ink-mute); }
.pl-answer-b{ display:flex; gap:6px; flex:0 0 auto; }

/* The two sets of words on a plan: what was asked for, and the answer.
   Neither was drawn anywhere until 10 Sep -- `skill_focus.note` was
   written by three functions and read by none. */
.pl-why{
  margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-soft);
}
.pl-why b, .pl-answered b{ color:var(--ink); font-weight:600; }
.pl-answered{
  margin:6px 0 0; font-size:12.5px; line-height:1.45;
  color:var(--accent-ink); background:var(--accent-bg);
  border-radius:8px; padding:7px 10px;
}
/* Amber, never red: a declined destination is an ordinary answer and
   the skill stays on the board -- see roadmap.decline. */
.pl-answered.is-no{ color:var(--amber-ink); background:var(--amber-bg); }
.pl-answered.is-no b{ color:var(--amber-ink); }

/* ----------------------------------------------------------------------
   The bridge from a module to the tracker it teaches (10 Sep 2026).

   Lives in platform.css rather than instruments.css because the module
   page does not load the instruments sheet -- it is a course page that
   happens to carry one strip belonging to the Playbook.
   ---------------------------------------------------------------------- */
.ws-instruments{ display:grid; gap:9px; margin:0 0 20px; }
.ws-inst{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; text-decoration:none; color:inherit;
  background:var(--raised); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--radius);
  padding:12px 15px;
}
.ws-inst:hover{ background:var(--sunk); }
.ws-inst-main{ flex:1 1 240px; min-width:0; display:block; }
.ws-inst-main b{ display:block; font:700 1rem/1.3 var(--display); color:var(--ink); }
.ws-inst-main span{ display:block; font-size:.87rem; color:var(--ink-soft); margin-top:2px; }
.ws-inst-end{
  flex:0 0 auto; font:600 .8rem/1.2 var(--body); color:var(--accent);
  white-space:nowrap;
}

/* The course-level screen, after 10 Sep 2026: one decision at the top,
   and the nine rows below it are a READING of what that level opens
   rather than nine more controls. */
.ca-one{ margin-left:0; gap:8px; }
.ca-one .ca-opt span{ padding:11px 18px; font-size:15px; }
.ca-state{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--sunk); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:14px 16px; margin:16px 0 20px;
}
.ca-state-n{
  font-family:var(--display); font-weight:700; font-size:1.6rem; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ca-state-n span{ font-size:1rem; color:var(--ink-mute); font-weight:600; }
.ca-state-say{ flex:1 1 240px; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
.ca-row.read{ background:var(--raised); }
.ca-filed{ margin-left:auto; }

/* The Daily Nine, pinned at the top of the daily list. */
.dn-pin{
  display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit;
  background:var(--raised); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--radius);
  padding:13px 16px; margin-bottom:18px;
}
.dn-pin:hover{ background:var(--sunk); }
.dn-pin-tick{
  flex:0 0 auto; width:24px; height:24px; border-radius:7px; display:grid;
  place-items:center; border:1.5px solid var(--line); color:var(--on-accent);
  font-size:14px;
}
.dn-pin.is-done .dn-pin-tick{ background:var(--accent); border-color:var(--accent); }
.dn-pin-main{ flex:1 1 auto; min-width:0; }
.dn-pin-main b{ display:block; font-size:15px; color:var(--ink); }
.dn-pin-main span{ display:block; font-size:12.5px; color:var(--ink-mute); margin-top:2px; }
.dn-pin-n{
  flex:0 0 auto; font-family:var(--mono); font-weight:600; font-size:1.15rem;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.dn-pin-n span{ font-size:.8rem; color:var(--ink-mute); }

/* The printed Playbook entry carries the module's quick reference and its
   tool diagram, so a page read a year later with the course closed still
   means something. Both are the same for every athlete; the words around
   them are theirs. */
.pb-print-ref{ margin:10px 0 4px; }
.pb-print-fig{ margin:12px 0; text-align:center; page-break-inside:avoid; }
/* The diagrams are navy-and-green artwork on white. On a dark screen they
   need their own light panel or they sit in a glowing box; on paper the
   panel is invisible. Same treatment the module page gives them. */
.pb-print-fig img{ max-width:min(100%,420px); height:auto; background:#fff;
                   border:1px solid var(--line); border-radius:8px; padding:10px; }
@media print{ .pb-print-fig img{ border:0; padding:0; } }

/* ---------- worksheet tables on a phone ----------
   `.pb-table`/`.pb-log` carry min-width:440px inside a `.tablewrap` that
   scrolls sideways. On a 390px screen the container is about 300-334px,
   so 106-140px of EVERY worksheet table sat off-screen behind a scroll
   with no affordance -- on the 1-5 rating tables that means options 4
   and 5 were simply not visible. It never showed up in the phone audit
   because the PAGE does not scroll sideways; only the box does, which is
   the quiet version of the same fault.

   Under 560px the table stops being a table: each row becomes a block,
   each value carries its column name from data-label, and a rating row
   puts its five circles in a row under the statement, where all five
   fit comfortably. */
@media (max-width: 560px){
  .pb-table, .pb-log{ min-width:0; display:block; font-size:15px; }
  .pb-table thead, .pb-log thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .pb-table tbody, .pb-log tbody,
  .pb-table tr, .pb-log tr{ display:block; }
  .pb-table tr, .pb-log tr{
    border:1px solid var(--line); border-radius:var(--radius);
    padding:12px 14px; margin:0 0 10px;
  }
  .pb-table td, .pb-table th,
  .pb-log td, .pb-log th{
    display:block; border:0; padding:0; text-align:left;
    max-width:none;
  }
  .pb-table td + td, .pb-log td + td{ margin-top:8px; }
  .pb-table td[data-label]::before, .pb-log td[data-label]::before{
    content:attr(data-label);
    display:block; font-family:var(--mono); font-size:10px;
    letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-mute); margin-bottom:3px;
  }
  /* The row's first cell IS the heading of that little card -- the term,
     the step, the statement -- so it does not need a label saying so. */
  /* Only for a REFERENCE table, where the first cell is the row's
     heading -- the term, the step -- and a label saying "TERM" above it
     is noise. A log's first cell is a box like all the others and needs
     its label as much as they do. */
  .pb-table td:first-child::before{ display:none; }
  .pb-table td:first-child{ font-weight:600; font-size:16px; margin-bottom:8px; }
  /* The statement, then its five circles as one row beneath it. */
  .pb-table th.pb-statement{
    font-weight:600; margin-bottom:10px; line-height:1.45;
  }
  .pb-table .pb-radio{
    display:inline-block; width:auto; min-width:52px; padding:0;
    margin:0 4px 0 0; text-align:center;
  }
  .pb-table .pb-radio label{ padding:6px 4px; }

  /* A log row is a stack of labelled boxes; its remove button belongs at
     the foot of the card, not above a phantom column. */
  .pb-log td[data-label=""]::before{ display:none; }
  .pb-log td.pb-log-x{ margin-top:10px; text-align:right; }
  .pb-log .pb-cell{ width:100%; }
}

/* ----------------------------------------------------------------------
   Handing one permission to one person
   ----------------------------------------------------------------------
   The grant card, drawn by the register at /attendance/people and by the
   Match Situation Library at /library/access. It lived in attendance.css
   until both wanted it. */
.reg-grant{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem 1.1rem; margin:0 0 1rem;
}
.reg-grant > header{
  display:flex; flex-wrap:wrap; gap:.3rem .8rem; align-items:baseline;
}
.reg-grant h2{ margin:0; font-size:1.1rem; }
.checkline.is-role{ opacity:.72; }


/* ---- The journal redesign, 16 Sep 2026 ------------------------------
   Two clocks, the evidence taps, the log questions, and words shown
   back. Every colour is a token; the per-pillar hue on a log block is
   set inline as --k / --k-dark and picked per theme here, the pattern
   recut.css uses for the Field Card. */
.jr-q-label{ display:block; font-family:var(--display); font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.35; }
.jr-followup label{ font-family:var(--display); font-size:16px; text-transform:none; letter-spacing:0; color:var(--ink); }
/* A box is a floor, never a ceiling -- 22 Sep 2026. Every box an athlete
   writes into grows with what is written: `rows` is where it STARTS, not
   how far it goes (journal_grow.js). The questions asked as a line are
   one-row textareas for it, which is why the `input[type=text]` rule
   that stood here had nothing left to style. With no script every box
   scrolls and drags open, so nothing anybody types is ever lost. */
.jr-line textarea{ width:100%; }
.jr-evidence{ display:grid; grid-template-columns:1fr; gap:10px; margin:6px 0 4px; }
.jr-ev{ border:0; padding:0; margin:0; min-width:0; }
.jr-ev legend{ font-weight:600; font-size:14px; padding:0; margin-bottom:5px; }
.jr-ev-pill{ background:var(--sunk); color:var(--ink-soft); }
.jr-logq{
  border:1px solid var(--line); border-left:4px solid var(--k);
  border-radius:10px; padding:8px 12px; margin:0 0 10px; background:var(--raised);
}
.jr-logq summary{ cursor:pointer; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.jr-logq summary b{ font-family:var(--display); font-size:15px; }
.jr-logq-called{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.jr-logq-called em{ font-style:normal; font-weight:600; color:var(--k); }
.jr-logq .jr-q{ margin-top:10px; }
.jr-past{ background:var(--sunk); border-radius:10px; padding:10px 12px; margin:6px 0 10px; font-size:14px; }
.jr-past-item + .jr-past-item{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft); }
.jr-past-when{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.jr-past p{ margin:2px 0 0; }
.jr-followup{
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:14px 0;
  background:var(--raised);
}
.jr-followup textarea{ width:100%; }
.jr-followup .jr-actions{ margin-top:10px; }
.jr-filed{ font-size:13.5px; color:var(--ink-mute); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jr-logq{ border-left-color:var(--k-dark); }
  :root:not([data-theme="light"]) .jr-logq-called em{ color:var(--k-dark); }
}
:root[data-theme="dark"] .jr-logq{ border-left-color:var(--k-dark); }
:root[data-theme="dark"] .jr-logq-called em{ color:var(--k-dark); }


/* ---- The journal, reimagined (16 Sep 2026) ---------------------------
   Three screens, the Replay cards, the adds, the home hero. Tokens only;
   the Replay's three colours are the accent, the amber and Composure's
   blue, chosen once here. */
.jr-write h1,.jr-home h1{ margin:2px 0 0; }
.jr-write .dek,.jr-home .dek{ margin:3px 0 14px; }
.jr-progress{ display:flex; gap:6px; margin:0 0 14px; }
.jr-progress span{ height:4px; flex:1; border-radius:2px; background:var(--line-soft); }
.jr-progress span.on{ background:var(--accent); }
.jr-progress span.done{ background:var(--accent); opacity:.45; }
.jr-step{ max-width:640px; }
.jr-days{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 14px; }
.jr-day{
  display:block; border:1px solid var(--line); background:var(--raised); border-radius:12px;
  padding:12px 10px; text-decoration:none; color:var(--ink); min-width:0;
}
.jr-day b{ display:block; font-family:var(--display); font-size:15px; }
.jr-day small{ display:block; font-size:12px; color:var(--ink-mute); margin-top:2px; }
.jr-day.on{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent-ink); }
.jr-day.on small{ color:var(--accent-ink); opacity:.8; }
.jr-fixture-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:620px){ .jr-fixture-3{ grid-template-columns:1fr; } }
.jr-rep{
  border:1px solid var(--line); border-left:5px solid var(--c, var(--ink-soft)); border-radius:14px;
  padding:12px 14px; margin:0 0 10px; background:var(--raised);
}
.jr-rep-high{ --c:var(--accent); }
.jr-rep-rewind{ --c:var(--amber-ink); }
.jr-rep-turn{ --c:#2b6f83; }
.jr-rep-tomorrow,.jr-rep-next{ --c:var(--ink-soft); }
.jr-rep-lab{ font-family:var(--display); font-weight:800; font-size:16px; color:var(--c, var(--ink)); }
.jr-rep-ask{ font-size:13px; color:var(--ink-soft); margin:1px 0 8px; }
.jr-rep textarea,.jr-rep input[type=text]{ width:100%; }
.jr-rep-read .jr-read-a{ margin-top:4px; }
.jr-opt{ display:block;
  border:1px dashed var(--line); border-radius:12px; padding:10px 12px; margin:0 0 10px;
  background:var(--paper);
}
.jr-opt[open]{ border-style:solid; background:var(--raised); }
.jr-opt summary{ cursor:pointer; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; list-style:none; }
.jr-opt summary::-webkit-details-marker{ display:none; }
.jr-opt summary b{ font-family:var(--display); font-size:15px; white-space:nowrap; }
.jr-opt-why{ font-size:12.5px; color:var(--ink-mute); flex:1 1 60%; }
.jr-opt-count{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--accent); font-weight:600; }
.jr-opt-count + .jr-opt-plus{ margin-left:0; }
/* The sign says what a tap will do: + opens, − closes. The text is
   drawn here so the two states can never disagree with the block. */
.jr-opt-plus{ margin-left:auto; font-family:var(--mono); font-size:14px; line-height:1; color:var(--accent); font-weight:600; width:1.2em; text-align:center; }
.jr-opt-plus::before{ content:"+"; }
.jr-opt[open] > summary .jr-opt-plus::before{ content:"\2212"; }
.jr-opt[open] > summary{ padding-bottom:8px; border-bottom:1px solid var(--line-soft); }
.jr-pick > summary::before{ content:"+ "; color:var(--accent); font-family:var(--mono); }
.jr-pick[open] > summary::before{ content:"\2212 "; }
.jr-opt-body{ margin-top:10px; }
.jr-opt-body .jr-impbox{ margin-bottom:6px; }
.jr-nudge{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
.jr-nudge b{ font-family:var(--display); font-size:15px; }
.jr-go{ margin-left:auto; color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; }
.jr-logq-h{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 8px; align-items:baseline; margin-bottom:6px; }
.jr-logq-h b{ font-family:var(--display); font-size:14px; }
.jr-pick{ display:block; border-left:3px solid var(--k); padding-left:10px; margin:0 0 8px; }
.jr-pick summary{ cursor:pointer; font-weight:700; }
.jr-pick-p{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); margin-left:6px; }
.jr-pick .jr-logq{ margin-top:8px; }
.jr-nav{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; }
.jr-notice-quiet{ font-size:13px; color:var(--ink-mute); margin-top:18px; }
.jr-quote{ font-size:13px; color:var(--ink-mute); font-style:italic; margin:4px 0 8px; }
.jr-hero{ background:var(--accent-bg); color:var(--accent-ink); border-radius:16px; padding:16px; margin:0 0 12px; }
.jr-hero .eyebrow{ color:var(--accent-ink); opacity:.75; }
.jr-hero h1{ color:var(--accent-ink); font-size:24px; margin:2px 0 10px; }
.jr-hero .jr-days{ margin-bottom:8px; max-width:560px; }
.jr-hero .jr-day{ background:var(--raised); color:var(--ink); }
.jr-hero .jr-day small{ color:var(--ink-mute); }
.jr-season{ font-size:13.5px; margin:4px 0 0; }
.jr-season a{ color:var(--accent-ink); font-weight:600; }
.jr-nine{
  display:flex; align-items:center; gap:8px; font-size:13.5px; padding:9px 12px; margin:0 0 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--raised); color:var(--ink-soft); text-decoration:none;
}
.jr-nine-dot{ width:10px; height:10px; border-radius:50%; background:var(--amber-ink); flex:0 0 auto; }
.jr-nine.done .jr-nine-dot{ background:var(--accent); }
.jr-strip{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.jr-strip b{ font-family:var(--display); font-size:20px; color:var(--ink); }
.jr-dots{ display:flex; gap:3px; }
.jr-dots i{ width:9px; height:9px; border-radius:3px; background:var(--line); display:block; }
.jr-dots i.on{ background:var(--accent); }
.jr-recent{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.jr-recent a{
  flex:0 0 auto; border:1px solid var(--line); border-radius:10px; padding:8px 10px; text-decoration:none;
  color:var(--ink); background:var(--raised); min-width:130px; max-width:180px;
}
.jr-recent a b{ display:block; font-family:var(--display); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jr-recent a small{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); margin-top:2px; }
.jr-recent a.more{ border-style:dashed; color:var(--accent); font-weight:700; display:flex; align-items:center; justify-content:center; }
.jr-noticed{ margin:14px 0 6px; font-size:13.5px; color:var(--ink-soft); }
.jr-triage{ list-style:none; margin:0; padding:0; }
.jr-triage li{ padding:8px 0; border-top:1px solid var(--line-soft); }
.jr-triage li:first-child{ border-top:0; }
.jr-triage-d{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.jr-triage-f{ display:flex; gap:6px; margin-top:6px; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jr-rep-turn{ --c:#49adcb; }
  :root:not([data-theme="light"]) .jr-pick{ border-left-color:var(--k-dark); }
}
:root[data-theme="dark"] .jr-rep-turn{ --c:#49adcb; }
:root[data-theme="dark"] .jr-pick{ border-left-color:var(--k-dark); }

/* Who may use it -- the areas, listed once above the people. A definition
   list rather than repeated prose in every card: forty coaches would
   otherwise carry forty copies of the same three paragraphs. */
.ac-areas { margin: 18px 0 26px; max-width: 78ch; }
.ac-areas dt { font-weight: 600; margin-top: 10px; }
.ac-areas dd { margin: 2px 0 0; color: var(--ink-mute); font-size: 12.5px; }

/* One athlete's access page: the read-only shapes of the two panels that
   are somebody else's decision. A plain list, because a disabled control
   looks like something that is about to become enabled. */
.ca-plain { list-style: none; padding: 0; margin: 0 0 10px; }
.ca-plain li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.ca-plain li:last-child { border-bottom: 0; }

/* Selects on the access screens. There is no base `select` rule on this
   platform -- every one is styled by its own container -- so a new one
   renders as the user agent's own widget beside inputs that are not.
   The same shape of fault as `.nt-say textarea` taking the user agent's
   white-on-black: invisible to the suite, obvious on the screen. */
.ca-lane select, .gpc-bowler select {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; padding: 11px 13px; width: 100%;
}
.gpc-bowler select { width: auto; min-width: 22ch; }
.ca-lane select:focus-visible, .gpc-bowler select:focus-visible {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* "Save the Level" broke across two lines beside Cancel at 390px. A flex
   row cannot be made to wrap by its child -- the wrap goes on the row.
   Scoped to this page rather than put on `.jr-actions`, which the
   journal also uses and which is not this work's to change. */
.ac-actions { flex-wrap: wrap; }
@media (max-width: 460px) {
  .ac-actions > .btn { width: 100%; }
}

/* The Level, squad by squad. One row per athlete: who they are and how
   far through, then the control, then the way to the rest of what they
   are on. The row wraps rather than squashing -- a flex row cannot be
   made to wrap by its child. */
.lv-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.lv-row.is-eligible { border-left: 3px solid var(--accent); padding-left: 12px; }
.lv-who { flex: 1 1 22ch; min-width: 0; }
.lv-state { display: block; font-size: 12.5px; color: var(--ink-mute); }
.lv-of { color: var(--ink-mute); }
.lv-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lv-form select, .lv-form input[type="text"] {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; width: auto;
}
.lv-form input[type="text"] { min-width: 24ch; flex: 1 1 24ch; }
.lv-form select:focus-visible, .lv-form input:focus-visible {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-bg);
}
.lv-saved { font-size: 12.5px; color: var(--accent); }
/* Amber, never red, is for states that are ordinary and allowed. This is
   a refusal, so it is the one that may shout. */
.lv-error { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--danger); }
.lv-more { font-size: 12.5px; white-space: nowrap; }
.lv-saveall { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 18px; }
.lv-saveall .btn { width: auto; }
@media (max-width: 560px) {
  .lv-form { width: 100%; }
  .lv-form select, .lv-form input[type="text"] { flex: 1 1 100%; width: 100%; }
}

/* Athlete types (2 Oct 2026). The admin grid is the programs grid's
   table with a column per type; the athlete's page draws what the type
   gives in faint ticks and an exception in solid ones, so an exception
   reads AS an exception. */
.at-grid th[scope="row"] { font-weight: 500; white-space: normal; text-align: left; }
.at-grid .at-group th { background: var(--sunk); font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); padding: 6px 10px; }
.at-grid .at-count { display: block; font-weight: 400; font-size: 11.5px; }
.at-grid .at-flag { display: block; font-size: 11.5px; }
.at-grid .at-who { display: block; font-weight: 400; font-size: 11px;
  max-width: 14ch; white-space: normal; color: var(--ink-mute); }
.at-tick { display: inline-flex; padding: 6px; cursor: pointer; }
.at-tick input { margin: 0; accent-color: var(--accent); width: 18px; height: 18px; }
.at-grid td { text-align: center; }
.at-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px;
  color: var(--ink-soft); margin: 4px 0 10px; }
.at-legend span { display: inline-flex; gap: 6px; align-items: center; }
.at-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid var(--line); background: var(--paper); }
.at-key.at-inherit { background: var(--accent-bg); border-color: var(--accent-bg); }
.at-key.at-on { background: var(--accent); border-color: var(--accent); }
.at-key.at-off { border-color: var(--danger); }
.at-line.is-inherit input { opacity: .55; }
.at-line.is-off { border-left: 3px solid var(--danger); padding-left: 8px; }
.at-line.is-on { border-left: 3px solid var(--accent); padding-left: 8px; }
.at-tag-off { background: var(--danger-bg); color: var(--danger); }