/* CRO Accelerator platform — a product-app shell on the CRO Collective brand.
   HERO: the Week Timeline card at the top of the workspace. Three steps (Released → Live session → Due) with a
   progress fill that grows to "now" in the learner's own time zone, and the week's standing chip beside it.
   Shell: fixed navy sidebar, slim top bar, scrolling workspace of white cards on a cool canvas; on phones the
   sidebar becomes a bottom tab bar. Brand: artwork/brand/design-tokens.json. Fonts: Montserrat (headings),
   Public Sans (UI and reading), JetBrains Mono (clocks and chips). */

:root {
  --navy: #02033C;
  --navy-2: #0B1250;
  --ink: #0F1A3A;
  --atlantic: #033E8A;
  --azure: #1075FB;
  --azure-soft: #E8F0FF;
  --cyan: #00CCF5;
  --cyan-soft: #DDF8FE;
  --text: #0F1A3A;
  --text-2: #4A5273;
  --text-3: #646B86;   /* 5.3:1 on white, so the mono labels pass AA */
  --canvas: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #F8F9FC;
  --line: #E3E7F0;
  --line-2: #CFD5E3;
  --success: #0B6B50;   /* 6.5:1 on white */
  --success-soft: #E2F6EE;
  --warning: #7A5A00;
  --warning-soft: #FFF4D6;
  --danger: #B5123D;    /* 6.4:1 on white */
  --danger-soft: #FDE8ED;

  --display: "Montserrat", "Public Sans", system-ui, sans-serif;
  --ui: "Public Sans", "Montserrat", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --sidebar: 248px;
  --topbar: 56px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(2, 3, 60, .05), 0 8px 24px -18px rgba(2, 3, 60, .25);
  --shadow-hover: 0 2px 4px rgba(2, 3, 60, .06), 0 16px 32px -20px rgba(2, 3, 60, .35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { font-family: var(--ui); color: var(--text); background: var(--canvas); -webkit-text-size-adjust: 100%; }
/* The sticky top bar's height, for everything the browser scrolls into view: an anchor's target, a focused control,
   the first invalid field on a refused submit (Pilot, 2026-10-10: 14 of 137 Tab stops sat under the chrome at 390).
   Targets add their own 16px scroll-margin; the phone adds the tab bar below and, on the pre-work, the step bar above. */
html { scroll-padding-top: var(--topbar); }
:where(input, select, textarea, button, summary) { scroll-margin-block: 16px; } /* clear of the chrome, not flush under it */
body { margin: 0; font-size: 15px; line-height: 1.5; }
a { color: var(--atlantic); text-decoration: none; } /* atlantic on light surfaces (9.8:1); azure is for fills and indicators */
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 12px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }
.hidden { display: none !important; }
.muted { color: var(--text-2); font-weight: 400; }

/* ── App shell ───────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 8px;
  background: var(--navy); color: #fff; padding: 18px 14px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--azure), var(--cyan)); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: -.04em; color: var(--navy); flex: 0 0 auto; }
.brand .names { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8FB4FF; margin: 0 0 2px; font-weight: 400; }
.brand .program { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.nav-title { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8C98C4; padding: 10px 10px 4px; }
.site-nav { display: flex; flex-direction: column; gap: 2px; }
.site-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #C9D3EE; font-weight: 500; font-size: 14px;
  position: relative; white-space: nowrap; transition: background 140ms var(--ease), color 140ms var(--ease);
}
.site-nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.site-nav a[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.site-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cyan); }
.site-nav svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.who { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-family: var(--mono); font-size: 10.5px; color: #AAB6D8; min-height: 40px; overflow-wrap: anywhere; line-height: 1.35; }
.who::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); flex: 0 0 auto; }
.who:empty { display: none; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar); display: flex; align-items: center; gap: 16px; padding: 0 28px;
  background: rgba(244, 246, 251, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs strong { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: var(--line-2); }
.topbar .spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.chip.ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.chip.ok::before { background: var(--success); }
.chip.warn { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.chip.warn::before { background: var(--warning); }
.chip.live { background: var(--cyan-soft); border-color: transparent; color: var(--atlantic); }
.chip.live::before { background: var(--cyan); }
.waiver-banner { background: var(--warning-soft); color: #5C4500; font-family: var(--mono); font-size: 11.5px; padding: 7px 28px; border-bottom: 1px solid #F1E2AE; }

main { padding: 24px 28px 48px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 4px 0 20px; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--text); letter-spacing: -.015em; line-height: 1.2; margin: 0; }
h1 { font-weight: 700; font-size: 26px; }
h2 { font-weight: 700; font-size: 17px; }
h3 { font-weight: 600; font-size: 15px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; font-weight: 400; }
.lede { font-size: 15px; color: var(--text-2); max-width: 70ch; margin: 6px 0 0; }
.label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 400; }

/* ── Workspace grid and cards ────────────────────────────────────────── */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1080px) { .workspace { grid-template-columns: minmax(0, 1fr) 320px; } .rail { position: sticky; top: calc(var(--topbar) + 20px); } }
.col, .rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.workspace.full { grid-template-columns: minmax(0, 1fr); } /* pages with no rail (staff) take the whole width */
.card, .panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px;
  transition: box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.card:hover { box-shadow: var(--shadow-hover); }
.panel { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2 { font-size: 15px; }
.card p { margin: 8px 0; color: var(--text-2); }
.card p:first-of-type { margin-top: 0; }
.panel h2 { margin-bottom: 8px; }
.panel p { color: var(--text-2); margin: 6px 0 12px; }

/* ── Week timeline (the hero card) ───────────────────────────────────── */
.timeline { padding: 18px 22px 20px; }
.clock { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 22px; }
.clock::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 3px; border-radius: 3px; background: var(--line); }
.clock .fill { position: absolute; left: 6px; top: 6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--azure), var(--cyan)); width: var(--progress, 0%); max-width: calc(100% - 12px); transform-origin: left; animation: grow 900ms var(--ease) both; }
.clock .fill.off { display: none; }
.moment { position: relative; min-width: 0; }
.moment::before { content: ""; position: absolute; left: 0; top: -22px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-2); }
.moment.past::before { border-color: var(--azure); background: var(--azure); }
.moment.past strong { color: var(--text-2); }
.moment.past .sub { color: var(--text-3); }
.clock.all-past .fill { background: var(--azure); }
.moment.now::before { border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.moment .label { margin-bottom: 4px; }
.moment strong { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text); line-height: 1.25; }
.moment .sub { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.needle { display: none; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Next action and status ──────────────────────────────────────────── */
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; border-left: 4px solid var(--cyan); }
.next .label { margin-bottom: 4px; }
.next .what { font-family: var(--display); font-weight: 700; font-size: 17px; }
.next .muted { display: block; font-size: 13.5px; margin-top: 2px; }
.cta {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  background: var(--atlantic); color: #fff; font-family: var(--ui); font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
  box-shadow: 0 1px 2px rgba(3, 62, 138, .3);
}
.cta::after { content: "→"; transition: transform 140ms var(--ease); }
.cta:hover { background: var(--navy); text-decoration: none; color: #fff; }
.cta:hover::after { transform: translateX(2px); }
.cta:active { transform: translateY(1px); }
.cta .muted { color: #D6E4FF; font-weight: 500; }
.cta[disabled] { background: var(--line-2); box-shadow: none; cursor: not-allowed; }
.cta[disabled]::after { content: none; }
.cta.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
.cta.ghost:hover { background: var(--surface-2); }

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat strong { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--text); line-height: 1.25; }
.stat .muted { font-size: 13px; }
.rail-list { list-style: none; margin: 4px 0 0; padding: 0; }
.rail-list li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rail-list li:first-child { border-top: 0; padding-top: 2px; }
.rail-list .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--atlantic); padding-top: 3px; }
.rail-list time { font-weight: 600; color: var(--text); }
.rail-list .muted { display: block; font-size: 12.5px; }

/* ── Forms, the gate ─────────────────────────────────────────────────── */
fieldset { border: 0; padding: 0; margin: 16px 0 0; }
legend { font-family: var(--display); font-weight: 600; color: var(--text); font-size: 13.5px; margin-bottom: 6px; }
.checklist { display: flex; flex-direction: column; gap: 2px; }
/* margin: 0 beats the generic `form label { margin: 12px 0 }` below, which was adding 24px of dead space per item;
   the row gap (box-to-duration) is 2px and only the column gap (box-to-text) is 12px (owner, 2026-10-08: "too much
   white space between items"). */
.checklist label {
  display: grid; grid-template-columns: 20px 1fr; gap: 2px 12px; align-items: start; margin: 0; padding: 7px 10px; border-radius: 8px; font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer;
  transition: background 120ms var(--ease);
}
.checklist label:hover { background: var(--surface-2); }
.checklist input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azure); border-radius: 5px; }
/* The label is a 2-column grid (box, text); the duration span is its own grid item, so it must be pinned to
   column 2 or it lands under the checkbox and overlaps a wrapped line (seen at 21:41 on items 6 and 1). */
.checklist .muted { font-family: var(--mono); font-size: 11px; margin: 0; grid-column: 2; display: block; white-space: nowrap; color: var(--text-3); }
form label { display: block; font-weight: 600; margin: 12px 0; color: var(--text); font-size: 13.5px; }
textarea, input[type="file"] {
  display: block; width: 100%; margin-top: 6px; font-family: var(--ui); font-size: 14.5px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-weight: 400; color: var(--text); background: var(--surface); transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
input[type="file"] { font-family: var(--mono); font-size: 12.5px; padding: 8px 10px; background: var(--surface-2); }
textarea:focus { border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); outline: none; }
.form-status { min-height: 1.4em; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.form-status.error { color: var(--danger); }
.form-status.ok { color: var(--success); }
.recorded { border-left: 3px solid var(--success); background: var(--success-soft); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 13.5px; margin-top: 12px; }
.recorded strong { color: var(--success); }
#gate .cta { margin-top: 8px; }

/* ── Threads (chat-shaped) ───────────────────────────────────────────── */
.thread .post-form label { font-size: 13px; }
.thread .post-form textarea { min-height: 72px; }
.thread .post-form .cta { margin-top: 10px; }
.posts { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; }
.post { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.post.staff { background: var(--cyan-soft); border-color: #BFEFFA; }
.post.mine { background: var(--azure-soft); border-color: #CFE0FF; }
.post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.post-meta strong { color: var(--text); font-weight: 600; font-size: 13px; }
.post-meta time { font-family: var(--mono); font-size: 11px; }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--navy); color: var(--cyan); padding: 2px 6px; border-radius: 999px; }
.post-body { font-size: 14.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
/* Staff moderation (ISC-183): a hidden post stays in the staff view, dashed and dimmed, with the warning tag. */
.post.post-hidden { border-style: dashed; border-color: var(--warning); background: var(--warning-soft); }
.post.post-hidden .post-body { color: var(--text-3); }
.tag.tag-hidden { background: var(--warning); color: var(--warning-soft); }
.post-meta .post-mod { margin-left: auto; padding: 0 6px; font-size: 12px; }
.posts .muted { font-size: 13.5px; padding: 6px 2px; }
.post-form .form-status { margin-left: 12px; }

/* ── Reader (a document view inside the workspace) ───────────────────── */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1180px) { .doc-layout { grid-template-columns: minmax(0, 1fr) 260px; } .doc-layout .toc { position: sticky; top: calc(var(--topbar) + 20px); order: 2; } }
.doc { width: 100%; max-width: 100%; font-size: 16px; line-height: 1.65; color: var(--text); } /* full workspace column width so cards, offline panels, tables, and instruments fill the main area cleanly */
/* The reading measure (ISC-388): the card stays full width and the prose in it wraps at about 68ch, the article's own
   paragraphs, lists and quotes and the same blocks one level down in the stepper's section.step. Headings are not
   capped: ch scales with the heading's own font, so 68ch on a 20px h2 would end its border-top mid-card; h2 and h3 and
   their divider lines span the card like the tables do. Tables, instruments, offline panels and the gate panels are not
   prose blocks and keep the column's width; a child with its own cap (.tool .help) keeps it. */
.doc > p, .doc > ul, .doc > ol, .doc > blockquote,
.doc > section.step > p, .doc > section.step > ul, .doc > section.step > ol, .doc > section.step > blockquote { max-width: 68ch; }
.doc > .eyebrow { margin-bottom: 10px; }
.doc h1 { font-size: 28px; margin: 4px 0 18px; }
.doc h2 { font-size: 20px; margin: 40px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 16px; margin: 26px 0 6px; }
.doc p { margin: 0 0 14px; }
.doc li { margin: 4px 0; }
.doc strong { font-weight: 600; }
.doc table { border-collapse: collapse; width: 100%; margin: 18px 0 24px; font-size: 13.5px; display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.doc th, .doc td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.4; }
.doc th { background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.doc tr:last-child td { border-bottom: 0; }
.doc blockquote { border-left: 3px solid var(--azure); background: var(--azure-soft); margin: 20px 0; padding: 10px 16px; border-radius: 0 10px 10px 0; color: var(--ink); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.doc code { font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.exhibit { margin: 22px 0; }
.exhibit img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; display: block; background: var(--surface); }
.exhibit figcaption { font-family: var(--ui); font-size: 13px; color: var(--text-2); margin-top: 8px; }
/* Figures are centred and the pre-work's hero spans the column; a phone never honours a narrower author width (ISC-101). */
.doc figure.exhibit { margin: 20px auto; }
.doc figure.exhibit.hero { max-width: 100%; }
@media (max-width: 720px) { .doc figure.exhibit { max-width: 100% !important; } }
/* Callouts (ISC-102): a note explains, an instruction tells the learner what to do; two looks, not one. */
.doc blockquote.callout.instruction { border-left-color: var(--navy); background: var(--surface-2); color: var(--text); }
.doc blockquote.callout.instruction strong:first-child { color: var(--navy); }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; font-size: 13.5px; }
.toc h2 { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; border: 0; padding: 0; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { padding: 0; margin: 0; }
.toc a { display: block; color: var(--text-2); padding: 6px 8px; border-radius: 6px; font-weight: 500; }
.toc a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

/* ── Footer and tab bar ──────────────────────────────────────────────── */
.site-footer { color: var(--text-3); font-family: var(--mono); font-size: 11px; padding: 18px 28px 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.tabbar { display: none; }

@media (max-width: 880px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar { padding: 0 16px; gap: 10px; min-width: 0; max-width: 100%; }
  .topbar .brand-sm { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .topbar .brand-sm .mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--azure), var(--cyan)); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--navy); flex: 0 0 auto; }
  main { padding: 16px 16px 92px; }
  .waiver-banner { padding: 7px 16px; }
  .clock { grid-template-columns: 1fr; gap: 14px; padding-top: 0; padding-left: 22px; }
  .clock::before, .clock .fill { left: 6px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; }
  .clock .fill { height: var(--progress, 0%); width: 3px; max-height: calc(100% - 12px); max-width: none; transform-origin: top; background: linear-gradient(180deg, var(--azure), var(--cyan)); animation-name: growY; }
  .moment::before { left: -22px; top: 2px; }
  .site-footer { padding: 16px 16px 100px; }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); min-width: 0; max-width: 100%;
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: 10.5px; font-weight: 600; color: var(--text-3); border-radius: 8px; min-height: 44px; min-width: 0; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--atlantic); }
  .crumbs { display: none; }
  .tabbar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .checklist .muted { white-space: normal; }
  h1 { font-size: 22px; }
  .next { grid-template-columns: minmax(0, 1fr); }
  .next .cta { justify-self: start; }
}
@media (min-width: 881px) { .topbar .brand-sm { display: none; } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── Pass 2: state in the chrome ─────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head { align-items: flex-start; }
.page-title { min-width: 0; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 420px; }
.page-meta .meta-note { flex-basis: 100%; font-size: 12.5px; }
.page-meta .meta-note:empty { display: none; }
h1 { font-size: 24px; }
.lede { font-size: 14.5px; margin-top: 4px; }

.chip.skeleton { color: transparent; background: linear-gradient(90deg, var(--line) 0%, var(--surface-2) 50%, var(--line) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-color: transparent; }
.chip.skeleton::before { opacity: 0; }
.posts .skeleton { color: var(--text-3); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 2px 0 14px; }
.bar > span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--azure), var(--cyan)); transition: width 320ms var(--ease); }
.bar.dark { background: rgba(255,255,255,.14); margin: 8px 0 0; height: 4px; }
.bar.dark > span { background: linear-gradient(90deg, var(--cyan), #8FB4FF); }
.cohort { padding: 4px 10px 10px; }
.cohort-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: #C9D3EE; font-weight: 500; white-space: nowrap; }
.cohort-row .mono { font-family: var(--mono); font-size: 10.5px; color: #8FB4FF; letter-spacing: .04em; }

.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--azure), var(--cyan)); color: var(--navy); font-family: var(--display); font-weight: 800; font-size: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; border: 0; padding: 0; cursor: pointer; line-height: 1; } /* a button in the topbar: the phone's way to the name card (ISC-136) */
.avatar:empty { visibility: hidden; }
.who-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.who::before { content: none; }
.who { padding: 0; min-height: 0; }

.checklist label.done { color: var(--text-2); }
.checklist label.done::after { content: none; }
#gate .bar { margin: -4px 0 12px; }

.thread .posts { margin: 8px 0 14px; max-height: 480px; overflow: auto; padding-right: 4px; }
.post { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.post .avatar { margin-top: 2px; }
.post .avatar.staff { background: var(--navy); color: var(--cyan); }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; border-top: 1px solid var(--line); padding-top: 12px; }
.composer textarea { margin: 0; min-height: 44px; resize: vertical; }
.composer .cta { margin: 0 !important; }
.composer .form-status { grid-column: 1 / -1; margin: 0; }
.thread .post-form label { margin: 0; }

.reading-bar { position: sticky; top: var(--topbar); z-index: 15; height: 3px; margin: -24px -28px 20px; background: transparent; }
.reading-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azure), var(--cyan)); transform-origin: left; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.doc-meta .eyebrow { margin: 0; }
.toc a.active { background: var(--azure-soft); color: var(--atlantic); font-weight: 600; }
/* The week card's step rows (DESIGN-journey.md § 1): a label, the heading's minutes, a right-aligned chip the runtime
   paints; a long chip wraps under the label at phone width rather than clipping. */
.step-list { list-style: none; margin: 10px 0 14px; padding: 0; }
.step-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; min-width: 0; }
.step-list li:first-child { border-top: 0; padding-top: 2px; }
.step-list li a { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.step-list li .muted { font-family: var(--mono); font-size: 11px; white-space: nowrap; color: var(--text-3); }
.step-list li .chip { margin-left: auto; flex: 0 0 auto; max-width: 100%; }
.step-list li[data-step="gate"] { border-top: 2px solid var(--line-2); }
.step-list li .chip.video-mark { margin-left: 0; height: 22px; font-size: 10.5px; } /* the posted state beside a tools chip (F03) */
/* The course's Scoring section after a tool the platform scores (§ 4): closed by default, one click away. */
details.scoring-note { margin: 14px 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
details.scoring-note summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
details.scoring-note summary:hover { color: var(--text); }
details.scoring-note[open] summary { margin-bottom: 10px; }
details.scoring-note > :last-child { margin-bottom: 4px; }
.next-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.next-step .what { font-family: var(--display); font-weight: 700; font-size: 16px; }

.card { animation: card-in 420ms var(--ease) both; }
.col > .card:nth-child(2), .rail > .card:nth-child(1) { animation-delay: 60ms; }
.col > .card:nth-child(3), .rail > .card:nth-child(2) { animation-delay: 120ms; }
.col > .card:nth-child(4), .rail > .card:nth-child(3) { animation-delay: 180ms; }
@keyframes card-in { from { transform: translateY(8px); } to { transform: none; } }

@media (max-width: 880px) {
  .page-meta { max-width: none; }
  .reading-bar { margin: -16px -16px 16px; }
  .topbar .avatar.sm { display: grid; }
  .composer { grid-template-columns: minmax(0, 1fr); }
  .composer .cta { justify-self: end; }
}
@media (min-width: 881px) { .topbar .avatar.sm { display: none; } }
/* The account menu under the header's avatar (owner's call, 2026-10-25). At 880px and below, where the sidebar is
   hidden, the avatar is a 44px target round its 26px initial (the gradient clipped to the content box); the -9px margin
   keeps its footprint at 26px, so the top bar lays out as before and does not wrap at 320. It opens a menu dropping
   from the top bar's right edge: the name and address, then Change name, Sign out and Sign out of every device, each a
   44px row. At 881px and up neither shows. */
.account-menu { display: none; }
@media (max-width: 880px) {
  .topbar .avatar.sm { width: 44px; height: 44px; padding: 9px; margin: -9px; background-clip: content-box; }
  .topbar .avatar.sm:focus-visible { border-radius: 50%; }
  .account-menu:not([hidden]) {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 6px); right: 8px; z-index: 25;
    width: 264px; max-width: calc(100vw - 16px); padding: 6px; /* one width, so a failed note wraps inside it */
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover);
    animation: menu-in 160ms var(--ease) both;
  }
  .account-who { margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; color: var(--text-2); overflow-wrap: anywhere; }
  .account-who strong { display: block; font-weight: 600; font-size: 14px; color: var(--text); }
  .account-who span { display: block; font-family: var(--mono); font-size: 11px; }
  .account-item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; font: 600 14px var(--ui); color: var(--atlantic); text-align: left; cursor: pointer; }
  .account-item:hover, .account-item:focus-visible { background: var(--azure-soft); }
  .account-item[disabled] { color: var(--text-3); cursor: not-allowed; }
  .account-menu .signout-note { margin: 2px 10px 6px; color: var(--danger); } /* on white, not the sidebar's navy */
}
@keyframes menu-in { from { transform: translateY(-4px); } to { transform: none; } }

/* F34 20px root font-size phone pass (ISA.md:1304): at 320px and 390px with 20px text, the header, brand, avatar and
   7-column tab bar stay within the viewport with zero sideways scroll, no clipped avatar and no wordmark-over-mark overlap. */
@media (max-width: 420px) {
  .topbar, .app-header { height: auto; min-height: var(--topbar); flex-wrap: wrap; padding: 6px 10px; gap: 6px 8px; min-width: 0; max-width: 100%; }
  .brand, .topbar .brand-sm { min-width: 0; max-width: 100%; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
  .brand .mark, .topbar .brand-sm .mark { flex: 0 0 auto; }
  .topbar .chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; font-size: 10px; }
  .avatar.sm, .topbar .avatar.sm, .avatar-btn { flex: 0 0 auto; min-width: 0; max-width: 100%; }
  .tabbar, .tab-bar { grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); min-width: 0; max-width: 100%; }
  .tabbar a, .tab-bar a { min-width: 0; max-width: 100%; padding: 4px 1px; gap: 2px; font-size: 9.5px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; overflow: hidden; }
  .tabbar a span, .tab-bar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar svg, .tab-bar svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .video-card, .session-recording .video-card { min-width: 0; max-width: 100%; }
  .video-card:not(.ready) .video-frame { aspect-ratio: auto; }
  .video-card:not(.ready) .video-empty { position: static; padding: 16px 18px; flex-wrap: wrap; min-width: 0; overflow-wrap: break-word; white-space: normal; }
  /* The page head's chips wrap rather than push the page sideways: at 320 the standing chip ("Standing: 0% (0/2 weeks ·
     80% required)", nowrap) was 308.6px in a 288px column and scrolled the whole page 5px (render 2026-10-23). */
  .page-meta { min-width: 0; max-width: 100%; }
  .page-meta .chip { max-width: 100%; height: auto; min-height: 26px; padding-top: 3px; padding-bottom: 3px; white-space: normal; }
}

/* ── Week video (ISC-50) ─────────────────────────────────────────────── */
.video-card { margin: 14px 0 22px; min-width: 0; max-width: 100%; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy); border: 1px solid var(--line); }
.video-frame video { display: block; width: 100%; height: 100%; background: #000; }
.video-empty { position: absolute; inset: 0; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 24px 28px; min-width: 0; overflow-wrap: break-word; white-space: normal; color: #E6ECFA; background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.video-empty .label { color: #8FB4FF; min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: normal; }
.video-empty strong { font-family: var(--display); font-size: 18px; color: #fff; min-width: 0; overflow-wrap: break-word; white-space: normal; }
.video-empty .muted { color: #C9D3EE; font-size: 14px; max-width: 46ch; min-width: 0; overflow-wrap: break-word; white-space: normal; }
/* F34: an ended recording's note is text, not a player, so the frame takes the note's height and never cuts it off
   (in the 16:9 box it lost 3 of 8 lines at 320 px). */
.video-frame.ended { aspect-ratio: auto; }
.video-frame.ended .video-expired { position: static; }

/* ── Session recording + staff uploader (ISC-55, ISC-56) ─────────────── */
.session-recording .video-card { margin: 4px 0 0; }
.upload-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: end; margin: 8px 0 12px; }
.upload-form label { margin: 0; }
.upload-form select { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.upload-form input[type="file"] { margin-top: 6px; }
@media (max-width: 880px) { .upload-form { grid-template-columns: minmax(0, 1fr); } }

/* ── The assessment card (E1: Weeks 11, 15, 17 and 18) ───────────────── */
/* site/src/02 puts it in the main column after the "This week" card, in the cards' own pattern: a card-head with the
   heading and the server's status chip (wrapping under the heading at phone width), a meta line, then Stage 1's start
   row and runner. The card spans the column; the prose in it wraps at a reading measure, as the reader's does (ISC-388):
   the attestation at 60ch, and each prompt, its options and the answer box on one shared measure (42rem, about 68ch of
   the prompt) so their right edges line up. The dividers between questions span the card. */
.assessment-window { margin: 20px 0; --stage1-measure: 42rem; }
.assessment-window .card-head { flex-wrap: wrap; row-gap: 8px; }
.assessment-window .card-head h2 { min-width: 0; overflow-wrap: anywhere; }
.assessment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 13.5px; color: var(--text-2); }
.card p.assessment-meta { margin: 0; color: var(--text-2); }
.stage1-controls { margin-top: 16px; min-width: 0; }
.stage1-start { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.stage1-attest { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; flex: 0 1 60ch; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer; }
.stage1-attest input, .stage1-option input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azure); cursor: pointer; }
.stage1-controls > .form-status { margin: 10px 0 0; }
.stage1-controls > .form-status:empty { margin: 0; min-height: 0; }
.stage1-reauth { margin: 12px 0 0; } /* MW-10: Sign in again, under the server's sentence */
.stage1-form { counter-reset: stage1q; }
/* The legend floats so it lays out as a block inside the fieldset rather than on its border, and the divider above
   each question stays a plain line. */
.stage1-q { counter-increment: stage1q; min-width: 0; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.stage1-q legend { float: left; width: 100%; max-width: var(--stage1-measure); padding: 0; margin: 0 0 12px; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--text); }
.stage1-q legend::before { content: counter(stage1q) ". "; color: var(--text-3); }
.stage1-q legend + * { clear: both; }
.stage1-options { display: flex; flex-direction: column; gap: 8px; max-width: var(--stage1-measure); }
.stage1-option {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 10px 12px; min-width: 0;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-weight: 400; font-size: 14.5px; line-height: 1.45; color: var(--text); cursor: pointer;
  overflow-wrap: anywhere; transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.stage1-option:hover { background: var(--surface-2); }
.stage1-option:has(input:checked) { border-color: var(--azure); background: var(--azure-soft); }
.stage1-option:has(input:disabled) { cursor: default; }
.stage1-q textarea { max-width: var(--stage1-measure); min-height: 128px; margin-top: 0; resize: vertical; }
/* The generic textarea:focus trades the outline for a border colour and a 1.1:1 ring; the exam's answer box keeps the
   same azure outline as Start, the radios and Submit (button:focus-visible, input:focus-visible above). */
.assessment-window textarea:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.stage1-submit { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
/* A spent Start or a sent Submit stays legible: 6.2:1, where white on --line-2 reads 1.5:1. */
.assessment-window .cta[disabled] { background: var(--line); color: var(--text-2); }
@media (max-width: 420px) {
  .stage1-start { padding: 12px; }
  .stage1-option { padding: 10px; }
}

/* ── Staff table (ISC-53) ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
/* Article tables (ISC-98): the wrapper scrolls, with shadows at whichever edge still has columns beyond it, so a
   clipped column reads as "more to the right" instead of as the end of the table. The table itself lays out
   naturally inside; headers never break mid-word. */
.doc .table-wrap {
  margin: 18px 0 24px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(2, 3, 60, 0.14), rgba(2, 3, 60, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(2, 3, 60, 0.14), rgba(2, 3, 60, 0)) 100% 0;
  background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.doc .table-wrap table { display: table; margin: 0; border: 0; overflow: visible; min-width: 100%; background: transparent; }
/* A flex item's min-width is its content's; pinned to 0 so a wide table can never widen the column instead of
   scrolling inside its wrapper. (The 19px sideways scroll seen at 390 on 2026-10-08 was the gate button's label, not
   a table; this rule is the guard, not that fix.) */
.doc-layout > .col, .doc .table-wrap { min-width: 0; max-width: 100%; } /* not .doc itself: its max-width is the measure */
.doc .table-wrap th { white-space: nowrap; }
/* Activity tags as chips in headings (ISC-97) and the pre-work's links into the week page's gate (ISC-95). */
.doc h2 .chip.tag, .doc h3 .chip.tag { vertical-align: middle; margin-right: 10px; height: 22px; font-size: 10.5px; background: var(--azure-soft); border-color: transparent; color: var(--azure); }
.doc h2 .chip.tag::before, .doc h3 .chip.tag::before { background: var(--azure); }
.doc .record-link { margin: 4px 0 28px; font-size: 14px; }
.doc .record-link a { color: var(--azure); font-weight: 600; text-decoration: none; }
.doc .record-link a:hover { text-decoration: underline; }
.doc .record-link a.cta { display: inline-flex; color: #fff; white-space: normal; max-width: 100%; }
/* F31: the reading line that names the Module Reader (compiler/build.ts readingPanels), the reading step's main action:
   the course's sentence and the button that opens the reader, on a light panel with the .next card's cyan rule. Under
   560px the button takes the panel's width under the sentence, and its label may wrap rather than widen the page. */
.doc .reading-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 6px 0 18px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: var(--radius-sm); }
.doc .reading-panel > p { flex: 1 1 18rem; min-width: 0; margin: 0; color: var(--text); text-wrap: balance; } /* beside the button: plain wrapping split "Module / N" on 8 of 12 lines */
.doc .reading-panel > .cta { flex: 0 0 auto; max-width: 100%; }
@media (max-width: 560px) {
  .doc .reading-panel { padding: 12px; }
  .doc .reading-panel > p { text-wrap: pretty; } /* full width here: balance split "Module / N" on 10 of 12 lines at 320 */
  .doc .reading-panel > .cta { flex: 1 1 100%; justify-content: center; height: auto; min-height: 40px; padding: 0 12px; white-space: normal; text-align: center; } /* one line down to 320 */
}
.doc .live-gate { margin: 12px 0 10px; }
.staff-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.staff-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 400; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.staff-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); }
.staff-table .who-cell strong, .staff-table .who-cell .muted, .staff-table .gate-cell .muted { display: block; }
.staff-table .who-cell .muted, .staff-table .gate-cell .muted { font-size: 12px; margin-top: 4px; }
.staff-table .chip { height: 22px; }
.staff-table a { word-break: break-all; }
.staff-table td:nth-child(6) { min-width: 300px; } /* Commitments (Learner, Pathway, Terms, Gate, Instruments, Commitments, Files) */
.staff-table td:nth-child(7) { min-width: 140px; } /* Files */
.staff-table .instruments-cell { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.staff-table .inst-group { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.staff-table .inst-group + .inst-group { padding-top: 6px; border-top: 1px dashed var(--line); }
.staff-table .inst-phase { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); line-height: 1.2; }
.staff-table .instruments-cell .chip { height: auto; min-height: 22px; padding: 3px 10px; white-space: normal; text-align: left; }
/* A document hand-in under its exercise's chip (P-2): the newest, then the earlier versions folded. */
.staff-table .ins-handin { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.staff-table .handins { list-style: none; margin: 0; padding: 0 0 0 10px; font-size: 12.5px; line-height: 1.45; }
.staff-table .handins li { margin: 2px 0; overflow-wrap: anywhere; }
.staff-table .handins .muted { font-size: 12px; }
.staff-table .handins-earlier { padding-left: 10px; font-size: 12.5px; }
.staff-table .handins-earlier summary { cursor: pointer; color: var(--atlantic); font-weight: 600; }
/* Instruments (DESIGN-instruments.md): the week's "Your tools" card and the tool pages. */
.tool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tool-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.tool-list li:first-child { border-top: 0; }
.tool-list li a { font-weight: 600; }
.tool-list .chip { margin-left: auto; }
.tool { padding-bottom: 20px; }
.tool .tool-section { border: 0; padding: 0; margin: 0 0 28px; }
.tool .tool-section > legend { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--navy); padding: 0; margin: 0 0 6px; }
.tool .tool-section > .muted { margin: 0 0 14px; font-size: 14px; }
.tool .item-id { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-right: 6px; }
.tool .likert { border: 0; padding: 12px 0; margin: 0; border-top: 1px solid var(--line); }
.tool .likert > legend { font-weight: 600; font-size: 15px; padding: 0; margin: 0 0 8px; color: var(--text); }
.likert-scale { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; } /* --cols: the scale points (plus N/A), set by the page */
.likert-scale label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: center; font-size: 12px; color: var(--text-2); background: var(--surface); }
.likert-scale label:hover { background: var(--surface-2); }
.likert-scale label:has(input:checked) { border-color: var(--azure); background: var(--azure-soft); color: var(--text); }
.likert-scale input { margin: 0; accent-color: var(--azure); }
.likert-scale .num { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); }
.scale-legend { margin: 0 0 20px; }
.scale-legend table { font-size: 13px; }
.tool .dimension { border: 0; padding: 14px 0; margin: 0; border-top: 1px solid var(--line); }
.tool .dimension > legend { font-weight: 600; font-size: 15px; padding: 0; margin: 0 0 4px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.tool .key-question { margin: 0 0 10px; color: var(--text-2); font-style: italic; }
.tool .field { display: block; font: 600 13px var(--ui); color: var(--text); margin: 10px 0 0; }
.tool .field .muted { font-weight: 400; }
.tool select, .tool input.text-input, .tool input[type="number"], .tool input[type="text"] { display: block; width: 100%; max-width: 480px; margin-top: 6px; font-family: var(--ui); font-size: 14.5px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
/* A11Y-1: the border-and-ring focus style is for text-like controls only (:where keeps it at 0,2,1). A native radio or
   checkbox paints no border colour and the --azure-soft ring is 1.15:1 on white, so they keep a real outline: --azure is
   4.2:1 on --surface, 4.0:1 on --surface-2, 3.9:1 on --canvas and 3.7:1 on a checked likert label (--azure-soft). */
.tool select:focus, .tool input:where(:not([type="radio"]):not([type="checkbox"])):focus { border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); outline: none; }
.tool input[type="radio"]:focus-visible, .tool input[type="checkbox"]:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.tool textarea { margin-top: 6px; }
.tool .anchor { font-size: 13px; margin: 6px 0 0; max-width: 70ch; }
/* F29: every level of a readiness dimension, closed by default, in the anchor's voice (summary as details.scoring-note). */
.tool .levels { font-size: 13px; margin: 8px 0 0; max-width: 70ch; color: var(--text-2); }
.tool .levels summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.tool .levels summary:hover { color: var(--text); }
.tool .levels[open] summary { margin-bottom: 8px; }
.tool .levels-list { margin: 0; padding-left: 1.4em; }
.tool .levels-list li { margin: 0 0 8px; line-height: 1.5; }
.tool .levels-list strong { color: var(--text); }
.tool .counter { font-family: var(--mono); font-size: 11px; margin: 4px 0 0; }
.tool .counter.ok { color: var(--success); }
.tool .help { font-size: 13px; margin: 4px 0 10px; max-width: 70ch; }
.tool .choices { border: 0; padding: 10px 0 0; margin: 0; }
.tool .choices > legend { font: 600 13px var(--ui); color: var(--text); padding: 0; }
.tool .choices label, .tool .quiz-item .options label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.tool .choices label:hover, .tool .quiz-item .options label:hover { background: var(--surface-2); }
.tool .choices input, .tool .quiz-item .options input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azure); flex: none; }
.tool .quiz-item { border: 0; padding: 14px 0; margin: 0; border-top: 1px solid var(--line); }
.tool .quiz-item > legend { font-weight: 600; font-size: 15px; padding: 0; margin: 0 0 8px; color: var(--text); }
.tool .quiz-item .options { display: flex; flex-direction: column; gap: 2px; }
.tool-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.tool-report .big { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--navy); margin: 0 0 10px; }
.tool-report h3 { font-size: 13.5px; margin: 14px 0 6px; color: var(--text); }
.tool-report ul { margin: 0 0 8px 18px; padding: 0; color: var(--text-2); font-size: 14px; }
.tool-report .warn-text { color: var(--danger); font-weight: 600; }
.tool-report .table-wrap { margin: 10px 0; }
.tool-report .table-wrap table { font-size: 13.5px; }
/* Pre-work tools (ISA F13, ISC-112): grid rows, worksheet tables with repeating rows, the self-check's reveal. The
   self-check's answer and mark blocks set no display, so their hidden attribute holds. */
.tool table, .tool-report table { border-collapse: collapse; width: 100%; }
.tool th, .tool td, .tool-report th, .tool-report td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.4; }
.tool thead th, .tool-report thead th { font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.tool .table-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); max-width: 100%; }
.likert-scale label.na { border-style: dashed; }
.tool .grid-row { border: 0; padding: 14px 0; margin: 0; border-top: 1px solid var(--line); }
.tool .grid-row > legend { font-weight: 600; font-size: 15px; padding: 0; margin: 0 0 4px; color: var(--text); }
.tool .grid-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.tool .form-field { margin: 14px 0 0; }
.tool .form-field > .field, .tool .form-field .check { margin: 0; }
.tool .form-field .check { display: flex; align-items: flex-start; gap: 10px; }
.tool .form-field > .help { margin: 2px 0 0; }
.tool .with-unit { display: flex; align-items: center; gap: 8px; max-width: 480px; margin-top: 6px; }
.tool .with-unit input { margin-top: 0; }
.tool .unit { font: 12px var(--mono); color: var(--text-2); }
.tool .prefill { color: var(--text-2); }
.tool .form-block { margin: 0 0 28px; }
.tool .block-title { font-size: 15px; margin: 0 0 8px; }
.tool .form-table { font-size: 13.5px; }
.tool .form-table input, .tool .form-table select, .tool .form-table textarea { margin-top: 0; min-width: 140px; max-width: none; font-size: 14px; padding: 7px 9px; }
.tool .form-table textarea { min-width: 220px; }
.tool .form-table input[type="checkbox"] { min-width: 0; width: 18px; height: 18px; accent-color: var(--azure); }
.tool .form-table .row-label { font-weight: 600; color: var(--text); min-width: 120px; }
.tool .form-table label.inline { display: inline-flex; gap: 6px; margin: 0 10px 0 0; font-weight: 400; }
@media (max-width: 480px) {
  .tool .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tool .form-table input, .tool .form-table select, .tool .form-table textarea { min-width: 96px; max-width: 100%; }
  .tool .form-table textarea { min-width: 140px; }
  .tool .form-table .row-label { min-width: 80px; }
  input[type="file"], .handin-add input[type="file"], .upload-form input[type="file"] { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* A checklist (a table whose only column is a checkbox column, F17 § 5): the box first, the concept in body size and
   case, the course's row number muted after it; rows wrap at phone width with no sideways scroll. */
.tool .tool-checklist { list-style: none; margin: 4px 0 0; padding: 0; }
.tool .tool-checklist li { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tool .tool-checklist li:first-child { border-top: 0; }
.tool .tool-checklist label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 12px; align-items: start; margin: 0; padding: 9px 8px; border-radius: 8px; font-size: 14.5px; font-weight: 400; line-height: 1.45; color: var(--text); text-transform: none; cursor: pointer; }
.tool .tool-checklist label:hover { background: var(--surface-2); }
.tool .tool-checklist input[type="checkbox"] { width: 20px; height: 20px; min-width: 0; margin: 2px 0 0; accent-color: var(--azure); }
.tool .tool-checklist .text { min-width: 0; overflow-wrap: anywhere; }
.tool .tool-checklist .field-help { grid-column: 2; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.tool .tool-checklist .prefill { grid-column: 1; font-size: 12px; color: var(--text-2); }
/* A choice matrix (ISC-364; Atelier's design note scratch/design/radio/note.md and its mock's first style block): a
   fixed table whose block names a group of columns is drawn by compiler/toolpages.ts choiceBlock as one fieldset per
   printed row, a hidden legend naming it, the Decision cell, then one radio per group column labelled by the column's
   name. Desk: a matrix under an aria-hidden header row that carries the counts. Narrower than 620px (the exercises
   page's article column, a phone): a card per decision with the column names on the options; narrower than 280px, one
   option per line. The switch keys on the width the matrix is given (a container query), not on the viewport; without
   container queries (before Chrome 105, Safari 16, Firefox 110, the floor of the likert scale's :has()) the matrix
   stands at every width. State changes are instant: nothing here moves or fades. */
.mx-wrap { container: mx / inline-size; }
.mx { --mx-cols: 4; margin: 2px 0 0; }
.mx-head { display: grid; grid-template-columns: minmax(200px, 2.2fr) repeat(var(--mx-cols), minmax(88px, 1fr)); gap: 0 4px; padding: 0 0 8px; border-bottom: 1px solid var(--line-2); }
.mx-h { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 4px; font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: center; line-height: 1.35; }
.mx-h.mx-h-decision { align-items: flex-start; text-align: left; padding-left: 0; }
.mx-count { font: 600 13px var(--mono); letter-spacing: 0; color: var(--text); }
.mx-count.low { color: var(--text-3); }
.mx-row { border: 0; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.mx-row:first-of-type { border-top: 0; }
.mx-row:focus-within { background: var(--surface-2); }
.mx-cells { display: grid; grid-template-columns: minmax(200px, 2.2fr) repeat(var(--mx-cols), minmax(88px, 1fr)); gap: 0 4px; align-items: center; }
.mx-decision { min-width: 0; padding: 10px 8px 10px 0; }
.mx-decision .prefill { display: block; font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; }
.mx-decision .field-help { margin: 2px 0 0; font: 11px var(--mono); color: var(--text-3); }
.tool .mx-decision input.text-input { max-width: none; margin-top: 0; }
.mx-opt { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 4px; border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.mx-opt:hover { background: var(--azure-soft); }
.mx-opt input[type="radio"] { width: 20px; height: 20px; min-width: 0; margin: 0; accent-color: var(--azure); flex: none; }
.mx-opt-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mx-opt:has(input:checked) { background: var(--azure-soft); }
.mx-flag { margin: 4px 0 0; font: 600 11.5px var(--mono); color: var(--danger); }
.mx-held { margin: 4px 0 0; font: 11.5px var(--mono); color: var(--text-2); overflow-wrap: anywhere; }
.mx-row.needs { box-shadow: inset 3px 0 0 var(--danger); }
.mx-row.needs .mx-decision { padding-left: 10px; }
.mx-tally-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } /* read, not seen, while the header row carries the counts */
.form-status a.mx-jump { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-status a.mx-jump:hover, .form-status a.mx-jump:focus-visible { background: var(--danger-soft); }
.tool .mx-decision .text-input[disabled], .mx-opt input[disabled] { opacity: .55; cursor: not-allowed; }
@container mx (max-width: 620px) {
  .mx-head { display: none; }
  .mx-tally-line { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0 0 10px; font: 11.5px var(--mono); color: var(--text-2); line-height: 1.5; }
  .mx-row { padding: 12px 0; }
  .mx-row:focus-within { background: transparent; }
  .mx-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
  .mx-decision { grid-column: 1 / -1; padding: 0 0 4px; }
  .mx-opt { justify-content: flex-start; gap: 9px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; line-height: 1.3; text-align: left; }
  .mx-opt-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; min-width: 0; }
  .mx-opt:has(input:checked) { border-color: var(--azure); background: var(--azure-soft); }
  .mx-opt input[type="radio"] { width: 18px; height: 18px; }
  .mx-row.needs { box-shadow: none; border-left: 3px solid var(--danger); padding-left: 10px; }
  .mx-row.needs .mx-decision { padding-left: 0; }
}
@container mx (max-width: 280px) { .mx-cells { grid-template-columns: minmax(0, 1fr); } .mx-opt { font-size: 12.5px; } }
.repeat-actions { margin: 10px 0 0; }
.tool .selfcheck-item { padding: 14px 0; border-top: 1px solid var(--line); }
.selfcheck .answer { border-left: 3px solid var(--azure); background: var(--azure-soft); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 10px 0 0; font-size: 14px; }
.selfcheck .answer p { margin: 4px 0 0; color: var(--ink); }
.selfcheck .mark { border: 0; padding: 0; margin: 10px 0 0; }
.selfcheck .mark legend { font: 600 13px var(--ui); padding: 0; margin: 0 0 4px; }
.selfcheck .mark label { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 0 0; font-weight: 400; font-size: 14px; }
.tool-actions .done-when { font-size: 13px; flex: 1 1 240px; }
@media (max-width: 720px) {
  .likert-scale { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 4px; }
  .likert-scale.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 1-7 plus N/A wraps to two rows on a phone */
  .likert-scale label { padding: 6px 2px; font-size: 10.5px; }
  .tool-list .chip { margin-left: 0; }
}
.commit { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; max-width: 52ch; }
.commit dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: 2px; }
.commit dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Calendar (ISC-62, ISC-63): an agenda grouped by week. The kind sits in a chip, the when in mono; past events dim,
   cancelled ones strike through, a moved one shows its original time. Staff get an inline editor per event. */
.cal-week { margin: 0 0 20px; }
.cal-week h2 { font-size: 13px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
.cal-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cal-event { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.cal-when { display: flex; flex-direction: column; gap: 2px; }
.cal-when .when { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.cal-event .was, .moment .was { font-family: var(--mono); font-size: 11px; color: var(--warning); }
.cal-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cal-what strong { font-weight: 600; }
.cal-what .muted { flex-basis: 100%; font-size: 13.5px; }
.chip.kind { height: 22px; }
.kind-session .chip.kind { background: var(--cyan-soft); border-color: transparent; color: var(--atlantic); }
.kind-session .chip.kind::before { background: var(--cyan); }
.kind-due .chip.kind, .kind-exam .chip.kind, .kind-defense .chip.kind { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.kind-due .chip.kind::before, .kind-exam .chip.kind::before, .kind-defense .chip.kind::before { background: var(--warning); }
.kind-release .chip.kind { background: var(--azure-soft); border-color: transparent; color: var(--atlantic); }
.kind-release .chip.kind::before { background: var(--azure); }
.cal-event.past { opacity: .62; }
.cal-event.cancelled .cal-what strong, .cal-event.cancelled .when { text-decoration: line-through; }
.cal-today { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--azure); }
.cal-today::after { content: ""; flex: 1; height: 2px; background: var(--azure); border-radius: 2px; }
.linkish { background: none; border: 0; padding: 4px 6px; font: 600 13px var(--ui); color: var(--atlantic); cursor: pointer; border-radius: var(--radius-sm); } /* text, so atlantic (A11Y-05: azure is 4.23:1 on white) */
.linkish:hover, .linkish:focus-visible { background: var(--azure-soft); }
.cal-editor { grid-column: 1 / -1; }
.cal-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cal-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.cal-form label.chk { flex-direction: row; align-items: center; gap: 8px; }
.cal-form label.wide, .cal-form .actions { grid-column: 1 / -1; }
.cal-form input:not([type=checkbox]), .cal-form select { font: 14px var(--ui); color: var(--text); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); min-height: 38px; }
.cal-form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cal-add .cal-form { background: none; border: 0; padding: 0; }
@media (max-width: 720px) {
  .cal-event { grid-template-columns: minmax(0, 1fr) auto; }
  .cal-when { grid-column: 1 / -1; }
}
div.cal-today { margin: 0 0 10px; }

/* Calendar views (Agenda, Month, Quarter). Month: a Monday-first grid with the program week on each row and up to
   three event chips per day. Quarter: three small months with a dot per kind of event and a count line under each.
   A day opens its events below the grid. On phones the month grid shows dots instead of chips. */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.cal-toolbar[hidden], .cal-nav[hidden] { display: none; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); }
.seg button { min-height: 32px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; font: 600 13px var(--ui); color: var(--text-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.seg button:focus-visible, .icon-btn:focus-visible, .day-btn:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav h2 { min-width: 13ch; margin: 0; font-size: 15px; text-align: center; }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); font-size: 20px; line-height: 1; color: var(--text); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { padding: 6px 4px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.cal-grid thead th.wk, .cal-grid tbody th.wk { width: 36px; text-align: center; color: var(--atlantic); }
.cal-grid abbr { text-decoration: none; }
.cal-grid td { padding: 0; border: 1px solid var(--line); vertical-align: top; }
.day-btn { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; padding: 6px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cal-grid.month .day-btn { min-height: 108px; }
.day-btn:hover { background: var(--surface-2); }
.day .num { align-self: flex-start; font: 600 12px var(--mono); color: var(--text-2); }
.day.out { background: var(--surface-2); }
.day.out .num { color: var(--text-3); }
.day.out .evs { opacity: .7; }
.day.today .num { padding: 1px 7px; border-radius: 999px; background: var(--azure); color: #fff; }
.day.sel { box-shadow: inset 0 0 0 2px var(--azure); }
.evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-size: 12px; line-height: 1.35; color: var(--text); }
.ev .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev b { font-weight: 600; }
.ev.cancelled .t { text-decoration: line-through; opacity: .65; }
.ev.moved .dot { box-shadow: 0 0 0 2px var(--warning-soft), 0 0 0 3px var(--warning); }
.ev.cont { opacity: .8; }
.ev.kind-session { background: var(--cyan-soft); }
.ev.kind-release, .ev.kind-kickoff { background: var(--azure-soft); }
.ev.kind-due, .ev.kind-exam, .ev.kind-defense { background: var(--warning-soft); }
.ev.kind-capstone, .ev.kind-office_hours { background: var(--success-soft); }
.more { padding-left: 6px; font: 600 11px var(--ui); color: var(--atlantic); }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.kind-session .dot, .dot.kind-session { background: #00A6C8; }
.kind-release .dot, .dot.kind-release { background: var(--azure); }
.kind-due .dot, .dot.kind-due { background: #C98A00; }
.kind-exam .dot, .dot.kind-exam { background: var(--danger); }
.kind-defense .dot, .dot.kind-defense { background: var(--navy); }
.kind-capstone .dot, .dot.kind-capstone { background: var(--success); }
.kind-kickoff .dot, .dot.kind-kickoff { background: var(--atlantic); }
.kind-office_hours .dot, .dot.kind-office_hours { background: #2BB673; }
.kind-holiday .dot, .dot.kind-holiday, .kind-other .dot, .dot.kind-other { background: var(--text-3); }
.cal-quarter { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.qmonth h3 { margin: 0 0 6px; font-size: 14px; }
.cal-grid.mini th { padding: 4px 2px; text-align: center; }
.cal-grid.mini thead th.wk, .cal-grid.mini tbody th.wk { width: 24px; font-size: 10px; }
.cal-grid.mini .day-btn { align-items: center; gap: 3px; min-height: 42px; padding: 4px 2px; }
.cal-grid.mini .num { align-self: center; font-size: 11px; }
.cal-grid.mini .day.today .num { padding: 0 5px; }
.dots { display: flex; justify-content: center; gap: 2px; min-height: 6px; }
.cal-grid.mini .dot { width: 6px; height: 6px; }
.qsum { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 12px; color: var(--text-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-day { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .cal-grid.month .day-btn { align-items: center; min-height: 58px; padding: 4px 2px; }
  .cal-grid.month .num { align-self: center; }
  .cal-grid.month .evs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px; }
  .cal-grid.month .ev { padding: 0; background: none; }
  .cal-grid.month .ev .t, .cal-grid.month .more { display: none; }
  .cal-grid.month thead th.wk, .cal-grid.month tbody th.wk { width: 26px; font-size: 10px; }
  .cal-nav h2 { min-width: 0; }
}

/* Sign-in (DESIGN-signin.md): the platform's own page, on the navy canvas, one card, two steps. */
.signin-page { min-height: 100vh; background: radial-gradient(1200px 600px at 20% -10%, var(--navy-2), var(--navy) 60%); }
.signin { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 440px; margin: 0 auto; padding: 12vh 16px 40px; }
.signin-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.signin-brand .mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--azure), var(--cyan)); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.04em; color: var(--navy); }
.signin-brand .names { display: flex; flex-direction: column; line-height: 1.15; }
.signin-brand .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9FB4E6; }
.signin-brand .program { font-family: var(--display); font-weight: 800; font-size: 20px; }
.signin-card { width: 100%; padding: 28px; }
.signin-card h1 { margin: 0 0 6px; font-size: 22px; }
.signin-card .muted { margin: 0 0 18px; }
.signin-card label { display: block; margin: 0 0 6px; font: 600 13px var(--ui); color: var(--text); }
.signin-card input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: 16px var(--ui); color: var(--text); background: var(--surface); }
.signin-card input:focus-visible { outline: 2px solid var(--azure); outline-offset: 1px; border-color: var(--azure); }
.signin-card #code { font: 600 24px var(--mono); letter-spacing: .3em; text-align: center; }
.signin-card .cta { width: 100%; justify-content: center; margin-top: 16px; }
.signin-card .turnstile { margin-top: 14px; }
.signin-card .turnstile:empty { margin-top: 0; }
.signin-links { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 0; }
.signin-card .form-status { margin: 12px 0 0; }
.signin-foot { max-width: 380px; text-align: center; font-size: 12.5px; color: #B9C6E8; }
.signout { display: block; margin-top: 10px; padding: 4px 0; color: #9FB4E6; font-size: 12.5px; }
.signout:hover, .signout:focus-visible { background: none; color: #fff; text-decoration: underline; }
/* MW-10: Sign out of every device, right under Sign out; its note when the platform did not confirm it (light on the
   navy sidebar, well past AA). */
.signout + .signout-all { margin-top: 2px; }
.signout-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #FFD2CC; }

/* Display names (shared/names.ts): the sidebar shows the name over the address; the name card sits atop the page. */
.who-name { display: block; color: #fff; font-weight: 600; font-size: 13px; }
.who-email { display: block; }
.edit-name { padding: 2px 0; font-size: 12px; color: #9FB4E6; }
/* The identity block is a flex row elsewhere; with a name it stacks: name, address, then the edit link. */
.who { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
.who-name, .edit-name { overflow-wrap: break-word; }
.edit-name:hover, .edit-name:focus-visible { background: none; color: #fff; text-decoration: underline; }
.name-card .name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.name-card .text-input, #consent .text-input { flex: 1 1 240px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: 15px var(--ui); color: var(--text); background: var(--surface); }
#consent .text-input { display: block; width: 100%; max-width: 420px; margin: 4px 0 6px; }
.field { display: block; font: 600 13px var(--ui); color: var(--text); }

/* Multi-week shell (ISC-75, ISC-76, ISC-80): the Weeks group in the sidebar, the phones-only week strip (the sidebar is
   hidden there), the cohort home's list of weeks, and the library's one section per module. */
.site-nav .wk-num { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 5px; font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1; opacity: .9; }
.site-nav a[aria-current="true"] { color: #fff; }
.site-nav a[aria-current="true"] .wk-num { background: var(--cyan); border-color: var(--cyan); color: var(--navy); opacity: 1; }
.week-strip { display: none; }
@media (max-width: 880px) {
  .week-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface); scrollbar-width: none; }
  .week-strip::-webkit-scrollbar { display: none; }
  .week-strip .label { flex: 0 0 auto; margin-right: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
  .week-strip a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
  .week-strip a:hover { text-decoration: none; border-color: var(--azure); }
  .week-strip a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
}
.week-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.week-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); }
.week-row:hover { text-decoration: none; border-color: var(--azure); background: var(--azure-soft); }
.week-row .wk-num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--navy); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 13px; }
.week-row .wk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week-row .wk-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-row .go { font-size: 22px; line-height: 1; color: var(--text-3); }
.lib-module { scroll-margin-top: 16px; }
.lib-module > h2 { font-size: 26px; margin: 2px 0 14px; padding-top: 0; border-top: 0; }
.lib-module h3 { font-size: 20px; margin: 36px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.lib-module h4 { font-size: 16px; margin: 24px 0 6px; }
.toc ol ol { margin: 0 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--line); }
.toc ol ol a { font-weight: 400; padding: 4px 8px; font-size: 13px; }

/* Release gate (ISC-85): staff see every listed week; the server marks the ones learners cannot see yet. */
[data-unreleased] { opacity: .6; }
.site-nav a[data-unreleased] > span:last-child::after,
.week-strip a[data-unreleased]::after,
li[data-unreleased] .wk-text strong::after,
tr[data-unreleased] td:first-child strong::after,
article[data-unreleased] .doc-meta .eyebrow::after { content: " · not open yet"; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }

/* ── The workbook (DESIGN-workbook.md) ───────────────────────────────── */
/* § 4 The sidebar carries the steps. compiler/layout.ts emits a parent's children as ol.sub-nav right after the parent
   link, on the parent's own page only: Pre-work's step sections then its gate, the Reader's H2s. Indented on a guide line under
   the parent's icon, smaller type, one line each with an ellipsis at the 248px sidebar. The sidebar scrolls once the
   children push it past the viewport (CM1's reader carries 18). */
.sidebar { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.sub-nav { list-style: none; display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 19px; padding: 0 0 0 8px; border-left: 1px solid rgba(255,255,255,.14); }
.sub-nav li { margin: 0; padding: 0; min-width: 0; }
.site-nav .sub-nav a { gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: #AEB9DA; }
.site-nav .sub-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sub-nav a .lbl { min-width: 0; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }
/* The active child: app.js's scroll spy sets a.active; layout.ts sets aria-current="location" when the compiler points a
   tool page's `current` at its own step. A short cyan tick on the guide line, never the parent's page bar. */
.site-nav .sub-nav a.active, .site-nav .sub-nav a[aria-current]:not([aria-current="false"]) { background: rgba(255,255,255,.09); color: #fff; }
.site-nav .sub-nav a.active::before, .site-nav .sub-nav a[aria-current]:not([aria-current="false"])::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--cyan); }

/* The status slot (.st, aria-hidden). Pre-work steps (a[data-tools="id1 id2"], none or several): the runtime aggregates
   their state from /api/instruments into data-state and the glyph is drawn here (○ new, ◐ in progress, ● complete) unless the runtime writes text of its own. The gate child's
   slot takes "n of m" and sits at the row's end. A numbered reader section's slot holds its number (layout.ts). */
.sub-nav .st, .toc .st { flex: 0 0 24px; display: inline-grid; place-items: center; font: 600 10px/1 var(--mono); letter-spacing: 0; }
.st[data-state]:empty::before { font-family: var(--ui); font-size: 12px; line-height: 1; }
.st[data-state="new"]:empty::before { content: "○"; }
.st[data-state="draft"]:empty::before { content: "◐"; }
.st[data-state="complete"]:empty::before { content: "●"; }
.sub-nav .st { color: #8FB4FF; }
.sub-nav .st[data-state="new"] { color: #8C98C4; }
.sub-nav .st[data-state="draft"] { color: #F5C451; }
.sub-nav .st[data-state="complete"] { color: var(--cyan); }
.sub-nav a[data-gate-child] .st, .toc a[data-gate-child] .st { order: 2; flex: 0 0 auto; margin-left: auto; padding: 0 2px; font-weight: 600; white-space: nowrap; }
.sub-nav a[data-gate-child] .lbl, .toc a[data-gate-child] .lbl { margin-left: 32px; } /* level with the labels after a 24px slot and the 8px gap */

/* The in-article TOC on a page whose sidebar carries steps: the same list (layout.ts swaps it in on the pre-work), so
   phones keep the steps. Wherever the sidebar is visible (it is hidden at max-width: 880px) the TOC is not rendered
   and the article takes the layout's full width, so there are never two step lists on screen (audit F13). */
.toc.steps a { display: flex; align-items: center; gap: 8px; }
.toc.steps .lbl { min-width: 0; }
.toc .st { color: var(--text-3); }
.toc .st[data-state="draft"] { color: var(--warning); }
.toc .st[data-state="complete"] { color: var(--success); }
@media (min-width: 881px) {
  body.has-sub-nav .doc-layout { grid-template-columns: minmax(0, 1fr); }
  body.has-sub-nav .doc-layout > .toc { display: none; }
}
/* Every sidebar and TOC target lands below the sticky top bar, not under it. */
.doc h2[id], .doc h3[id], section.instrument[id], .doc-layout #gate, #prework-status { scroll-margin-top: 16px; }
/* A course code block (CM10's ASCII time budget) is wider than a phone; it scrolls inside its box instead of spilling. */
.doc pre { overflow-x: auto; max-width: 100%; }

/* § 1 Every instrument is one wrapper (Revision 1, F02): section.instrument#tool-<id> holding its .tool-head (title,
   [data-tool-status] chip, a.tool-open), its form.tool[data-tool], its .tool-actions and its [data-tool-report]. The
   wrapper is the card and the form inside it is plain, on the tool page (one per page, outside .doc) as in the
   article. The result follows the actions inside the same card, below a rule. */
section.instrument { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
section.instrument > form.tool { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; animation: none; }
section.instrument > .tool-report { margin: 20px 0 0; padding: 16px 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; animation: none; }
.instrument > .tool-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.instrument > .tool-head > :first-child { min-width: 0; }
.instrument a.tool-open { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--atlantic); white-space: nowrap; }
.instrument a.tool-open:hover { text-decoration: underline; }
.instrument :is(.tool-head, .card-head) :is(h2, h3) { margin: 0; padding: 0; border: 0; font-size: 15px; } /* the article's H2/H3 rules give way inside a tool */
/* In the pre-work article where its tables were: a card inside the .doc card with room above and below, the tool page's
   own type (15px/1.5) rather than the article's reading size, and an azure top rule that marks it as something to fill. */
.doc section.instrument { margin: 28px 0 36px; padding: 18px 20px 20px; font-size: 15px; line-height: 1.5; border-color: var(--line-2); border-top: 3px solid var(--azure); }
@media (max-width: 720px) {
  .doc section.instrument { margin: 22px -12px 28px; padding: 14px 12px 16px; } /* reclaim the article card's gutter on a phone */
}

/* § 2 The week page's pre-work status card (section#prework-status): the gate's progress chip and bar, the workbook's
   steps as [data-step] rows with the existing chip classes, one CTA into the pre-work's gate. */
#prework-status .bar { margin: -4px 0 12px; }
#prework-status :is(ul, ol):has(> [data-step]) { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; }
#prework-status [data-step] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
#prework-status [data-step]:first-child { border-top: 0; }
#prework-status [data-step] a { font-weight: 600; }
#prework-status [data-step] .chip { margin-left: auto; }
#prework-status .cta { margin-top: 12px; }
@media (max-width: 720px) {
  #prework-status [data-step] .chip { margin-left: 0; height: auto; min-height: 24px; padding: 3px 10px; white-space: normal; }
}

/* § 2 The pre-work's closing gate: the week page's #gate panel (same inner ids, same #gate rules above) as the last
   section of the article column, outside the .doc card and as wide as it. If it is ever placed inside the card, the
   article's H2 rule gives way to the panel's head. */
.doc-layout > .col > #gate.panel { width: 100%; max-width: 100%; font-size: 16px; } /* full workspace column width matching .doc */
.doc-layout #gate .card-head h2 { font-size: 20px; }
.doc #gate.panel { margin: 40px 0 0; font-size: 15px; line-height: 1.5; }
.doc #gate .card-head h2 { margin: 0; padding: 0; border: 0; }

/* § 3 A checklist item matched to tools (label[data-gate-tools]: several possible, never auto-ticked, F05–F06) shows
   each tool's status chip after its text. In the 2-column grid every chip would take a row of its own and an unpinned
   one lands under the checkbox, so a matched item is a wrapping row instead: the box pinned where the grid put it, the
   text from the same 42px, the duration on its own line, the chips flowing and wrapping in the text column. */
.checklist label[data-gate-tools] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; position: relative; padding-left: 42px; }
.checklist label[data-gate-tools] > input { position: absolute; left: 10px; top: 8px; }
.checklist label[data-gate-tools] > .muted { flex: 0 0 100%; }
.checklist label[data-gate-tools] .chip { height: auto; min-height: 22px; max-width: 100%; padding: 2px 10px; white-space: normal; }

/* ── F18 · The post-session leg (DESIGN-postsession.md § Revision 1, runtime lane) ──────────────────────────────────
   Every rule here mirrors one the pre-work's gate, card or sidebar step already has, under the post-session ids, so
   the two gates read as one design; nothing above is changed. */
/* The exercises page's closing gate (#post-gate) and the week page's Post-session card (#postsession-status). */
#post-gate .cta { margin-top: 8px; }
#post-gate .bar { margin: -4px 0 12px; }
.doc-layout > .col > #post-gate.panel { width: 100%; max-width: 100%; font-size: 16px; }
.doc-layout #post-gate .card-head h2 { font-size: 20px; }
.doc #post-gate.panel { margin: 40px 0 0; font-size: 15px; line-height: 1.5; }
.doc #post-gate .card-head h2 { margin: 0; padding: 0; border: 0; }
/* The reading measure (ISC-388): both gate panels stay as wide as the column, and their paragraphs and lists wrap at
   about 68ch like the article's prose; the checklist, the fields and the submit row keep the panel's width. */
#gate.panel p, #gate.panel ul, #gate.panel ol, #post-gate.panel p, #post-gate.panel ul, #post-gate.panel ol { max-width: 68ch; }
.doc-layout #post-gate, #postsession-status { scroll-margin-top: 16px; }
#postsession-status .bar { margin: -4px 0 12px; }
#postsession-status :is(ul, ol):has(> [data-step]) { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; }
#postsession-status [data-step] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
#postsession-status [data-step]:first-child { border-top: 0; }
#postsession-status [data-step] a { font-weight: 600; }
#postsession-status [data-step] .chip { margin-left: auto; }
#postsession-status .cta { margin-top: 12px; }
@media (max-width: 720px) {
  #postsession-status [data-step] .chip { margin-left: 0; height: auto; min-height: 24px; padding: 3px 10px; white-space: normal; }
}
/* The deadline line ("Due Friday 16 October, 11:59 PM your time"), on the panel and on the card. */
[data-post-due] { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--text-2); margin: -4px 0 12px; }
[data-post-due]:empty { display: none; }
/* A checklist item's note (the course's Submission cell) wraps; the duration beside it stays one mono line. */
.checklist .muted.note { font-family: var(--ui); font-size: 12.5px; letter-spacing: 0; white-space: normal; }
/* The recorded block's rule line ("the first submission's time counts"). */
#post-submitted .recorded .muted { display: inline-block; margin-top: 4px; font-size: 12.5px; }
/* The Exercises parent's Submit step in the sidebar and the phone TOC: its slot takes the gate's text at the row's end. */
.sub-nav a[data-post-gate-child] .st, .toc a[data-post-gate-child] .st { order: 2; flex: 0 0 auto; margin-left: auto; padding: 0 2px; font-weight: 600; white-space: nowrap; }
.sub-nav a[data-post-gate-child] .lbl, .toc a[data-post-gate-child] .lbl { margin-left: 32px; }

/* The share tool (form.tool[data-kind="share"]): a link field, the shared files, a picker and Upload. The server sets
   its status, so the wrapper's Mark complete / Edit again never show (the runtime hides them too, after load). */
.tool input[type="url"] { display: block; width: 100%; max-width: 560px; margin-top: 6px; font-family: var(--ui); font-size: 14.5px; font-weight: 400; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
section.instrument:has(> form.tool[data-kind="share"]) > .tool-actions :is([data-tool-complete], [data-tool-edit]) { display: none; }
.share-files { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 560px; }
.share-files:empty { display: none; }
.share-files li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; min-width: 0; }
.share-files li a { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.share-files li .muted { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.share-files li [data-share-remove] { margin-left: auto; }
.share-files li [data-share-remove]:hover, .share-files li [data-share-remove]:focus-visible { color: var(--danger); background: var(--danger-soft); }
.tool label.share-upload { margin-bottom: 8px; max-width: 560px; }
.tool button.ghost[data-share-upload] {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2); font: 600 13.5px var(--ui);
  transition: background 120ms var(--ease);
}
.tool button.ghost[data-share-upload]:hover { background: var(--surface-2); }
.tool button.ghost[data-share-upload][disabled] { color: var(--text-3); cursor: not-allowed; background: var(--surface-2); }

/* The staff table's Post-session column (Learner, Pathway, Terms, Gate, Instruments, Commitments, Files, Post-session):
   the verdict chip, the time, the document, the files and the journal, stacked; nothing evaluative. */
.staff-table td.post-cell { min-width: 200px; }
.staff-table .post-cell > .muted, .staff-table .post-cell > .post-doc, .staff-table .post-cell > .post-file { display: block; margin-top: 4px; }
.staff-table .post-cell > .muted { font-size: 12px; }
.staff-table .post-cell .post-file .muted { font-size: 12px; }
.staff-table details.journal { margin-top: 6px; }
.staff-table details.journal summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--atlantic); }
.staff-table details.journal[open] summary { margin-bottom: 6px; }
.staff-table .journal-text { white-space: pre-wrap; max-width: 60ch; max-height: 320px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; line-height: 1.5; }

/* ── F19 · The peer exchange (DESIGN-postsession.md § F19 Revision 1, runtime lane) ─────────────────────────────────
   The peer block (section.peer[data-peer], before the review tool), the feedback an author received, the review tool
   once it is final, and the staff Pairs panel. Each rule mirrors one the share tool, the instruments or the staff
   table already has; nothing above is changed. */
/* The peer block in the article: a card like an inline instrument's, with the exchange's cyan rule on top. */
.doc section.peer { margin: 28px 0 24px; padding: 18px 20px; font-size: 15px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line-2); border-top: 3px solid var(--cyan); border-radius: var(--radius); box-shadow: var(--shadow); }
section.peer h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 15px; }
section.peer > p { margin: 0; }
section.peer [data-peer-document], section.peer [data-peer-received] { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
section.peer [data-peer-document] p { margin: 0 0 8px; }
section.peer [data-peer-doc-link] { font-weight: 600; color: var(--atlantic); }
section.peer ul[data-peer-files] { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 560px; }
section.peer ul[data-peer-files]:empty { display: none; }
section.peer ul[data-peer-files] li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; min-width: 0; }
section.peer ul[data-peer-files] li a { flex: 1 1 auto; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } /* the name takes the row before it wraps, the size chip beside it (real-browser pass 2026-10-09: "peer-plan.txt" broke in two) */
section.peer ul[data-peer-files] li .muted { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
/* The feedback received: each element's label over its answer, a second reviewer's set under a dashed rule. */
section.peer dl[data-peer-received-list] { margin: 0; }
section.peer dl[data-peer-received-list] dt { font: 600 13px var(--ui); color: var(--text); margin: 12px 0 0; }
section.peer dl[data-peer-received-list] dt:first-child { margin-top: 4px; }
section.peer dl[data-peer-received-list] dd { margin: 3px 0 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; } /* a wrapped answer clears the next label (real-browser pass 2026-10-09, 1440: its second line ran into the next dt) */
section.peer dl[data-peer-received-list] dt.peer-another { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 720px) {
  .doc section.peer { margin: 22px -12px 24px; padding: 14px 12px 16px; }
}
/* The review tool once it is final: the answers stay readable, the fields read as settled; no Edit again on this kind. */
form.tool[data-kind="review"] textarea[readonly] { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
section.instrument:has(> form.tool[data-kind="review"]) > .tool-actions [data-tool-edit] { display: none; }
/* A review sent in parts (OP2; build/op2 design note rev 2, § 6): each part under its title, its own send and done-when
   in the actions row the whole tool's carries elsewhere; a part after the first is set off by a rule. The received block
   on the author's side: each sent part under its title, then the lines for the parts not received yet. */
form.tool .review-part + .review-part { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-2); }
form.tool .review-part .part-title { margin: 0 0 14px; padding: 0; border: 0; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--navy); } /* above its Dimensions' 17px legends, on the exercises page (h4) and the tool page (h2) alike */
form.tool .review-part .part-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
form.tool .review-part .part-actions .done-when { font-size: 13px; flex: 1 1 240px; }
section.peer [data-peer-received-parts] .received-part h4 { margin: 16px 0 2px; font: 700 16px var(--display); color: var(--navy); }
/* A review in parts carries its sends in its parts: the tool's own actions row holds only its live note, so it keeps no
   rule or gap of its own (the note stays in the tree, never hidden: A11Y-01). */
section.instrument:has(> form.tool[data-parts]) > .tool-actions { margin-top: 8px; padding-top: 0; border-top: 0; }
section.peer [data-peer-received-parts] .received-part dl { margin: 0; }
section.peer [data-peer-received-parts] dt { font: 600 13px var(--ui); color: var(--text); margin: 10px 0 0; }
section.peer [data-peer-received-parts] dd { margin: 3px 0 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
section.peer [data-peer-received-parts] p.muted { margin: 10px 0 0; }
section.peer [data-peer-received-parts] .peer-another { margin: 18px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* The staff Pairs panel (section[data-pairs]): the status line, the table in the staff table's type, the actions row.
   The table scrolls inside its .table-wrap (ISC-357): its six columns are wider than a phone, so a name wraps between
   words and the rest of the row is a sideways scroll inside the card, never the page's. */
section[data-pairs] [data-pairs-status] { margin: 0 0 10px; font-size: 13.5px; }
section[data-pairs] .table-wrap { margin: 0 0 16px; }
section[data-pairs] table[data-pairs-table] { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0; }
section[data-pairs] table[data-pairs-table] th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 400; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
section[data-pairs] table[data-pairs-table] td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); overflow-wrap: break-word; }
section[data-pairs] table[data-pairs-table] td.mark { font-family: var(--mono); text-align: center; width: 72px; color: var(--text-3); }
section[data-pairs] table[data-pairs-table] td.mark.yes { color: var(--success); font-weight: 600; }
section[data-pairs] table[data-pairs-table] td.mono { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
/* A review sent in parts: one mark per part in Reviewed and Received, and the review read under its row (rev 2 § 6). */
section[data-pairs] table[data-pairs-table] td.mark.parts { width: auto; white-space: nowrap; }
section[data-pairs] table[data-pairs-table] .part-mark { display: inline-block; margin: 0 2px; }
section[data-pairs] table[data-pairs-table] .part-mark.yes { color: var(--success); font-weight: 600; }
section[data-pairs] .pairs-reviews { display: grid; gap: 10px; margin: 0 0 16px; } /* each sent review, under the table at the card's width */
section[data-pairs] details[data-pair-review] summary, .staff-table details.ins-review summary { cursor: pointer; color: var(--atlantic); font-weight: 600; }
section[data-pairs] details[data-pair-review] h4, .staff-table details.ins-review h4 { margin: 10px 0 2px; font: 600 13.5px var(--ui); }
section[data-pairs] details[data-pair-review] dl, .staff-table details.ins-review dl { margin: 0; }
section[data-pairs] details[data-pair-review] dt, .staff-table details.ins-review dt { font: 600 12.5px var(--ui); margin: 8px 0 0; }
section[data-pairs] details[data-pair-review] dd, .staff-table details.ins-review dd { margin: 2px 0 6px; color: var(--text-2); overflow-wrap: anywhere; }
.staff-table details.ins-review summary { list-style: none; color: inherit; }
.staff-table details.ins-review summary::-webkit-details-marker { display: none; }
section[data-pairs] .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
section[data-pairs] .actions label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font: 600 13px var(--ui); color: var(--text); }
section[data-pairs] .actions select { font: 14px var(--ui); color: var(--text); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); min-height: 38px; max-width: 280px; }
section[data-pairs] .actions button {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2); font: 600 13.5px var(--ui);
  transition: background 120ms var(--ease);
}
section[data-pairs] .actions button:hover { background: var(--surface-2); }
section[data-pairs] .actions button[data-pairs-run] { background: var(--atlantic); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(3, 62, 138, .3); }
section[data-pairs] .actions button[data-pairs-run]:hover { background: var(--navy); }
section[data-pairs] .actions button[disabled] { color: var(--text-3); cursor: not-allowed; background: var(--surface-2); border-color: var(--line); box-shadow: none; }
section[data-pairs] [data-pairs-note] { margin: 10px 0 0; }
@media (max-width: 720px) {
  section[data-pairs] .actions { flex-direction: column; align-items: stretch; }
  section[data-pairs] .actions select { max-width: none; }
}

/* The staff learners page (section[data-learners], F22): one row group per person in the staff table's type, each
   address on its own line with its status and action, the inline Rename and Add address forms, then the add form. On
   phones the table becomes one card per person and a long address wraps inside it. */
section[data-learners] [data-learners-note] { margin: 0 0 12px; }
section[data-learners] .learners-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; }
section[data-learners] .learners-filter.hidden { display: none; }
section[data-learners] .learners-filter .learner-field { flex: 0 1 240px; min-width: 160px; }
section[data-learners] .learners-filter .learner-field > span { display: block; margin: 0 0 4px; font: 600 12.5px var(--ui); color: var(--text-2); }
section[data-learners] .learners-filter-count { font-size: 13px; padding-bottom: 8px; }
section[data-learners] .learners-table tbody.hidden { display: none; }
section[data-learners] .learners-table td { overflow-wrap: anywhere; }
section[data-learners] .learners-table button.linkish { overflow-wrap: normal; }
section[data-learners] .learners-table button.linkish:not([data-learner-kind]) { white-space: nowrap; }
section[data-learners] .learners-table .who-cell { min-width: 170px; }
section[data-learners] .learners-table .addr-cell { min-width: 330px; } /* an ordinary address on one line beside its chip and action */
section[data-learners] .learners-table .who-cell .mono { font-family: var(--mono); font-size: 11.5px; }
section[data-learners] .learners-table .who-cell > .linkish, section[data-learners] .learners-table .addr-cell > .linkish { margin: 4px 0 0 -6px; }
section[data-learners] .learners-table td > .chip + .muted { display: block; font-size: 12px; margin-top: 4px; }
section[data-learners] .learners-table select { font: 14px var(--ui); color: var(--text); padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); min-height: 36px; max-width: 100%; }
section[data-learners] ul.learner-addrs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
section[data-learners] li.learner-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
section[data-learners] li.learner-addr .addr { flex: 1 1 16ch; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px; color: var(--text); }
section[data-learners] li.learner-addr.inactive .addr { color: var(--text-3); }
section[data-learners] form.learner-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
section[data-learners] form.learner-inline input, section[data-learners] .learner-field input, section[data-learners] .learner-field select {
  font: 14px var(--ui); color: var(--text); padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); min-height: 38px;
}
section[data-learners] form.learner-inline input { flex: 1 1 180px; min-width: 0; }
section[data-learners] input:where(:not([type="radio"]):not([type="checkbox"])):focus, section[data-learners] select:focus { border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); outline: none; }
section[data-learners] form.learner-inline button[type="submit"] {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--atlantic); color: #fff; border: 1px solid transparent; font: 600 13.5px var(--ui);
}
section[data-learners] form.learner-inline button[type="submit"]:hover { background: var(--navy); }
section[data-learners] button[disabled], section[data-learners] select[disabled], section[data-learners] input[disabled] { cursor: not-allowed; opacity: .6; }
section[data-learners] form.learner-add { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
section[data-learners] form.learner-add h3 { margin: 0 0 10px; }
section[data-learners] .learner-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
section[data-learners] .learner-field { min-width: 0; }
section[data-learners] .learner-field label { margin: 0 0 4px; font-size: 12.5px; color: var(--text-2); }
section[data-learners] .learner-field input, section[data-learners] .learner-field select { display: block; width: 100%; }
section[data-learners] details.learner-more { margin: 12px 0 0; }
section[data-learners] details.learner-more summary { cursor: pointer; font: 600 13px var(--ui); color: var(--atlantic); }
section[data-learners] details.learner-more[open] summary { margin-bottom: 8px; }
section[data-learners] details.learner-more .learner-field { max-width: 360px; }
section[data-learners] details.learner-more p { margin: 6px 0 0; font-size: 12.5px; max-width: 60ch; }
section[data-learners] .learner-actions { margin: 14px 0 0; }
@media (max-width: 720px) {
  section[data-learners] .table-wrap { overflow: visible; }
  section[data-learners] .learners-table, section[data-learners] .learners-table tbody, section[data-learners] .learners-table tr, section[data-learners] .learners-table td { display: block; width: 100%; }
  section[data-learners] .learners-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  section[data-learners] .learners-table tbody { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 12px; margin: 0 0 10px; }
  section[data-learners] .learners-table td { border: 0; padding: 8px 0; min-width: 0; }
  section[data-learners] .learners-table td + td { border-top: 1px solid var(--line); }
  section[data-learners] .learners-table td[data-label]::before { content: attr(data-label); display: block; margin: 0 0 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
  section[data-learners] .learners-table select { width: 100%; }
  section[data-learners] .learners-table .who-cell, section[data-learners] .learners-table .addr-cell { min-width: 0; }
  section[data-learners] li.learner-addr { padding: 4px 0; }
  section[data-learners] li.learner-addr .addr { flex-basis: 100%; }
}
/* The learners summary chip carries a sentence of counts. At phone width it wraps under the heading instead of pushing
   the page wide (2026-10-10, found at 390 with real data in a real browser; the static snapshot had no data). */
section[data-learners] .card-head { flex-wrap: wrap; }
section[data-learners] [data-learners-summary] { white-space: normal; height: auto; min-height: 26px; padding-top: 4px; padding-bottom: 4px; }
/* F23: the message beside the action that produced it (a refusal next to its open form, a result next to its control),
   and the add form's own message beside its button. */
section[data-learners] .learner-row-note { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; }
section[data-learners] .learner-add-note { margin: 8px 0 0; font-size: 13px; }
section[data-learners] .learner-row-note.error, section[data-learners] .learner-add-note.error { color: var(--danger, #b42318); }
section[data-learners] .learner-row-note.ok, section[data-learners] .learner-add-note.ok { color: var(--success); }
section[data-learners] .pathway-cell button[data-learner-pathway-save] { margin: 4px 0 0 4px; }
/* F43: the add form's Test account box under More, the box and its label on one line; and a test account's "Test" chip,
   inside the name it marks, on this page, the staff week page and in moderation (a plain chip, never a state colour). */
section[data-learners] .learner-check { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 10px 0 0; }
section[data-learners] .learner-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--azure); cursor: pointer; }
section[data-learners] .learner-check label { margin: 0; font: 600 13.5px var(--ui); color: var(--text); cursor: pointer; }
section[data-learners] .learners-table .who-cell > button[data-learner-kind] { display: block; width: max-content; max-width: calc(100% + 6px); text-align: left; }
/* MW-10: Sign out everywhere, the person's last control, on a line of its own under the kind control. */
section[data-learners] .learners-table .who-cell > button[data-learner-signout-all] { display: block; width: max-content; max-width: calc(100% + 6px); text-align: left; }
.chip.test-mark { height: 20px; margin-left: 6px; padding: 0 8px; font-weight: 400; vertical-align: 1px; }

/* ── F25 · The pre-work as steps (reviews/2026-10-10-design-prework-steps.md; app.js initStepper) ──────────────────
   The compiler wraps each step in section.step; the runtime shows one, builds its eyebrow and footer, the gate step's
   "Before you submit" and the phone step bar's toggle. Tokens only. Motion: the caret and the button press, transform
   only, and nothing depends on them. */
section.step[hidden] { display: none !important; } /* the next step is out of the layout, not just off screen (ISC-211) */
/* Before the stepper runs (gauntlet A): site/boot.js marks <html> js-steps early in <head>; initStepper adds steps-ready
   in the same task that shows the current step (and app.js adds it on the stepper's failure, or with no stepper). If
   steps-ready is still missing at DOMContentLoaded (app.js failed, 404'd or threw; DOMContentLoaded waits for a slow
   one), boot.js lifts the hold then, and a 10 s backstop lifts it if DOMContentLoaded never comes. Until then no step
   paints, so the long article's first section is never the first thing seen. Without JavaScript the class is never set
   and nothing is hidden. */
html.js-steps:not(.steps-ready) .doc > section.step { display: none; }
/* What follows the article waits too: shown under the short held page and then pushed down, it would be a layout shift
   (0.19 at 390 measured under 4x CPU); appearing with the step, it is not. */
html.js-steps:not(.steps-ready) .site-footer, html.js-steps:not(.steps-ready) .doc-layout nav.next-step { display: none; }
body.stepper .reading-bar { display: none; } /* one step's scroll is not progress through the pre-work */
.doc .step > .step-eyebrow + h2, .doc .step > .step-start + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.step-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.doc .step section#gate { margin-top: 0; }
.step-storage { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--text); font-size: 14px; line-height: 1.45; }

/* The footer: Previous and Next as named buttons, Next naming the step and its minutes; the mark above them. */
.step-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 40px 0 4px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; }
.step-footer button, .step-footer a.step-back, .step-start button { font: inherit; cursor: pointer; border-radius: var(--radius-sm); padding: 11px 14px; min-height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; text-decoration: none; }
.step-footer strong, .step-start strong { font-family: var(--display); font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.step-footer .k, .step-footer .min, .step-start .k, .step-start .min { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
/* The Overview's Start again just under its eyebrow (Pilot r3): the footer's Next, left-aligned, half the column at a
   desk as in the footer, the full width on a phone. */
.step-start { display: flex; margin: 4px 0 26px; font-size: 15px; line-height: 1.35; }
.step-start .step-next { width: min(100%, 360px); text-align: left; align-items: flex-start; }
.step-mark { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); }
.step-footer .step-mark .mark { font: 600 14px/1 var(--ui); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); flex-direction: row; align-items: center; }
.step-footer .step-mark .mark[aria-pressed="true"] { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.step-mark .muted { font-size: 13px; min-width: 0; }
.step-prev { grid-column: 1; text-align: left; align-items: flex-start; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); }
.step-prev .k { color: var(--text-3); }
.step-prev:hover { border-color: var(--azure); }
.step-next { grid-column: 2; text-align: right; align-items: flex-end; background: var(--atlantic); border: 1px solid var(--atlantic); color: #fff; transition: transform 140ms var(--ease); }
.step-next .k, .step-next .min { color: var(--cyan-soft); }
.step-next:hover { background: var(--navy-2); }
.step-next:active { transform: translateY(1px); }
.step-footer a.step-back { grid-column: 2; text-align: right; align-items: flex-end; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); }
.step-footer a.step-back:hover { border-color: var(--azure); text-decoration: none; }
@media (max-width: 520px) {
  /* Stacked in DOM order, so the Tab order is the order on screen (gauntlet C): the mark, Previous, then Next full
     width, last and nearest the thumb (and clear of the step bar at full scroll, Pilot 4). */
  .step-footer { display: flex; flex-direction: column; gap: 8px; }
  /* The mark row's note above its button (text, not a Tab stop, so the Tab order is unchanged): the button sits lower,
     clear of the step bar at full scroll at 320, and a long storage note no longer lifts it. */
  .step-mark .muted { order: -1; flex-basis: 100%; }
  .step-next { text-align: left; align-items: flex-start; }
  .step-prev { min-height: 52px; }
  .step-footer a.step-back { text-align: left; align-items: flex-start; min-height: 52px; }
  .step-start .step-next { width: 100%; }
}

/* "Before you submit": the gate's count, then the steps still open (ISC-215). Never ticks a box. */
.step-left { border: 1px solid var(--line); border-left: 3px solid var(--warning); background: var(--warning-soft); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 22px; font-size: 15px; line-height: 1.5; }
.step-left.ok { border-left-color: var(--success); background: var(--success-soft); }
.doc .step-left h3 { margin: 0 0 2px; font-size: 15px; }
.doc .step-left p { margin: 0 0 4px; }
.step-left .step-left-count { font-weight: 600; }
.step-left ul { list-style: none; margin: 4px 0 4px; padding: 0; }
.doc .step-left li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: baseline; margin: 4px 0; }
.doc .step-left li > span:last-child { min-width: 0; }
.step-left .st { font-size: 12px; color: var(--warning); }
.step-left .muted { font-size: 13px; }

/* The step list: minutes, and the current step. */
.toc.steps .min { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.toc.steps a[aria-current="step"] { background: var(--azure-soft); color: var(--atlantic); font-weight: 600; }
.toc.steps[data-stepbar] .stepbar-toggle, .toc.steps[data-stepbar] .segs { display: none; }
body.stepper .toc.steps[data-stepbar] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#steps-list[hidden] { display: none; }
.stepbar-toggle .min:empty { display: none; }

/* The gate's Submit wraps inside its form on a narrow phone (Pilot, 2026-10-10: 18 px past the form at 320). */
#gate-submit { white-space: normal; max-width: 100%; text-align: left; }

@media screen and (max-width: 880px) { /* screen: a narrow print page keeps its title and prints the plain list (F25-32) */
  html { scroll-padding-bottom: 88px; } /* the tab bar: 80 px at 320, where its labels wrap */
  html:has(body.stepper) { scroll-padding-top: calc(var(--topbar) + 52px); } /* and the step bar under the top bar */
  /* The phone step bar: the step list at the top, sticky under the top bar, one line and a row of segments, 52 px at
     most. The list opens as an overlay below it, so the bar's height never changes and nothing under it moves. */
  body.stepper .doc-layout, html.js-steps:not(.steps-ready) .doc-layout { gap: 14px; }
  /* The site footer after main already clears the tab bar; main's own 92 px on top of it let a full scroll carry the
     footer's buttons up under the step bar at 320 (Pilot 4: Next at 74 px under a bar ending at 108). */
  body.stepper main { padding-bottom: 8px; }
  /* The tab bar's clearance, as tall as the tab bar (80 px at 320 where its labels wrap) plus the phone's safe area,
     instead of a fixed 100 px: every footer control clears the step bar at full scroll (follow-up 2). */
  body.stepper .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* Before the stepper runs, the bar already holds its 52 px, empty, so nothing under it moves when it fills. */
  html.js-steps:not(.steps-ready) .doc-layout > .toc.steps[data-stepbar] { min-height: 52px; }
  html.js-steps:not(.steps-ready) .toc.steps[data-stepbar] > h2, html.js-steps:not(.steps-ready) .toc.steps[data-stepbar] > #steps-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.stepper .doc-layout > .toc.steps[data-stepbar], html.js-steps:not(.steps-ready) .doc-layout > .toc.steps[data-stepbar] { position: sticky; top: var(--topbar); z-index: 18; margin: -16px -16px 0; padding: 0; border-radius: 0; border-width: 0 0 1px; box-shadow: 0 6px 14px -12px rgba(2, 3, 60, .35); }
  .toc.steps[data-stepbar] .stepbar-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 16px 2px; border: 0; background: none; font: 600 14px/1.2 var(--ui); color: var(--text); text-align: left; cursor: pointer; }
  .stepbar-toggle .pos { font: 600 11px/1 var(--mono); letter-spacing: .02em; color: var(--atlantic); background: var(--azure-soft); border-radius: 999px; padding: 5px 7px; flex: 0 0 auto; white-space: nowrap; }
  .stepbar-toggle .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stepbar-toggle .min { flex: 0 0 auto; font: 400 11px/1 var(--mono); color: var(--text-3); white-space: nowrap; }
  .stepbar-toggle .more { flex: 0 0 auto; font: 600 12.5px/1 var(--ui); color: var(--atlantic); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
  .stepbar-toggle .more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 140ms var(--ease); }
  .stepbar-toggle[aria-expanded="true"] .more::after { transform: translateY(1px) rotate(225deg); }
  .toc.steps[data-stepbar] .segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 2px 16px 6px; }
  .segs span { height: 3px; border-radius: 2px; background: var(--line-2); }
  .segs span[data-state="draft"] { background: var(--warning); }
  .segs span[data-state="complete"] { background: var(--success); }
  .segs span[data-current] { transform: scaleY(1.67); box-shadow: 0 0 0 1px var(--navy); }
  body.stepper .toc.steps[data-stepbar] #steps-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 19; margin: 0; padding: 4px 12px 12px; max-height: 62vh; max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2); box-shadow: 0 18px 24px -18px rgba(2, 3, 60, .45); }
  /* The page title and its meta show on the Overview only; elsewhere they stay in the page for assistive tech, and
     the step is what fills the screen (Q5; only some weeks have an h1). */
  body.stepper:not([data-step-current="overview"]) .doc > h1, body.stepper:not([data-step-current="overview"]) .doc > .doc-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.stepper:not([data-step-current="overview"]) .doc > .step > .step-eyebrow { border-top: 0; padding-top: 0; }
}

@media print {
  /* Every step prints, as the long article; none of the stepper's chrome does. */
  body.stepper section.step[hidden] { display: block !important; }
  .step-footer, .toc.steps[data-stepbar], .step-left, .step-storage { display: none !important; }
}

/* ── F30 · the Readiness Quick-Score (Atelier's design, scratch/design/quickscore/mock.css ported; DESIGN-quickscore.md
   § 5). Tokens only. Text first, colour second: every check, tag and profile row says in words what its colour says.
   Motion: the card chevron turns by transform; the evidence bar fills by transform. ── */
.tool .qs { container-type: inline-size; }
.qs [hidden] { display: none !important; } /* a class's display never shows what the page script hid */
.qs-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }
.qs-progress .count { font: 600 14px/1.3 var(--ui); color: var(--text); }
.qs-segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; flex: 1 1 100%; }
.qs-segs span { height: 4px; border-radius: 2px; background: var(--line-2); }
.qs-segs span[data-s="done"] { background: var(--success); }
.qs-segs span[data-s="part"] { background: var(--warning); }

.qs-stage { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.qs-stage > legend { font: 700 15px/1.3 var(--display); color: var(--text); padding: 0; margin: 0 0 2px; }
.qs-stage .help { font-size: 13.5px; color: var(--text-2); margin: 0 0 10px; max-width: 62ch; }
.qs-stage .qs-stage-help { margin: 8px 0 0; }
.qs-stage .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@container (max-width: 520px) { .qs-stage .opts { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.qs-stage label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 11px 12px; min-height: 48px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; margin: 0; font-weight: 400; }
.qs-stage label:has(input:checked) { border-color: var(--azure); background: var(--azure-soft); box-shadow: inset 0 0 0 1px var(--azure); }
.qs-stage input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--azure); }
.qs-stage .nm { font: 600 14.5px/1.3 var(--ui); color: var(--text); }
.qs-stage .arr { grid-column: 2; font: 400 12px/1.4 var(--mono); color: var(--text-2); }
.qs-stage.first { padding: 12px 14px 14px; border: 1px solid var(--line); border-left: 3px solid var(--azure); border-radius: var(--radius-sm); background: var(--surface-2); }
.qs-stage.first > legend { float: left; width: 100%; margin-bottom: 2px; }
.qs-stage.first > legend + * { clear: both; }
.qs-stage-note { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--azure); background: var(--azure-soft); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text); max-width: 68ch; }

.qs-layer { margin: 0 0 18px; }
.qs-layer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 4px; }
.qs-layer-head :is(h2, h3, h4) { font: 700 15px/1.3 var(--display); color: var(--navy); margin: 0; }
.qs-layer-head .n { font: 400 11.5px/1 var(--mono); color: var(--text-2); margin-left: auto; white-space: nowrap; }
.qs-why { margin: 0 0 8px; }
.qs-why summary:focus-visible, .tool .levels summary:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; border-radius: 4px; }
.qs-why summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font: 600 12.5px/1.2 var(--ui); color: var(--atlantic); }
.qs-why .note { font-size: 13px; line-height: 1.45; color: var(--text-2); margin: 2px 0 6px; max-width: 68ch; }

.tool .qs details.qs-dim { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin: 0 0 6px; padding: 0; }
.tool .qs details.qs-dim[open] { border-color: var(--line-2); box-shadow: var(--shadow); }
.qs-dim > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 14px; grid-template-rows: auto auto; align-items: center; gap: 0 10px; min-height: 56px; padding: 8px 12px; cursor: pointer; border-radius: var(--radius-sm); }
.qs-dim > summary > .qs-row-title { grid-column: 1; grid-row: 1; margin: 0; font: 600 14.5px/1.3 var(--ui); color: var(--text); min-width: 0; align-self: end; }
.qs-dim > summary > .qs-row-state { grid-column: 1; grid-row: 2; align-self: start; }
.qs-dim > summary > .qs-row-tags { grid-column: 2; grid-row: 1 / 3; }
.qs-dim > summary > .qs-score { grid-column: 3; grid-row: 1 / 3; }
.qs-dim > summary::after { grid-column: 4; grid-row: 1 / 3; }
.qs-dim > summary::-webkit-details-marker { display: none; }
.qs-dim > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: translateY(-2px) rotate(45deg); transition: transform 140ms var(--ease); justify-self: end; }
.qs-dim[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.qs-dim > summary:hover { background: var(--surface-2); }
.qs-dim > summary:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.qs-row-name { font: 600 14.5px/1.3 var(--ui); color: var(--text); min-width: 0; }
.qs-row-state { display: block; font: 400 12px/1.4 var(--mono); color: var(--text-2); margin-top: 2px; }
.qs-row-state.warn { color: var(--warning); }
.qs-row-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.qs-score { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; font: 600 15px/1 var(--mono); color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); }
.qs-score.none { color: var(--text-2); font-weight: 400; }
.qs-score .was { font-size: 11px; font-weight: 400; color: var(--text-2); text-decoration: line-through; margin-right: 3px; }
.qs-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 999px; font: 600 11px/1.2 var(--mono); letter-spacing: .03em; white-space: nowrap; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.qs-tag.crit { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.qs-tag.match { background: var(--success-soft); color: var(--success); border-color: transparent; }
.qs-tag .gl { font-size: 11px; }
/* A narrow row gives the name the width and puts the tags on their own line under the state (browser walk at 320). */
@container (max-width: 440px) {
  .qs-dim > summary { grid-template-columns: minmax(0, 1fr) auto 14px; grid-template-rows: auto auto auto; padding: 8px 10px; }
  .qs-dim > summary > .qs-row-tags { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 4px; }
  .qs-dim > summary > .qs-row-tags:empty { display: none; }
  .qs-dim > summary > .qs-score { grid-column: 2; grid-row: 1 / 4; }
  .qs-dim > summary::after { grid-column: 3; grid-row: 1 / 4; }
}

.qs-body { padding: 2px 14px 16px; border-top: 1px solid var(--line); }
@container (max-width: 360px) { .qs-body { padding: 2px 10px 14px; } }
.qs-body .kq { margin: 12px 0; color: var(--text-2); font-style: italic; font-size: 14.5px; }

.qs-level { border: 0; padding: 0; margin: 0; min-width: 0; }
.qs-level > legend { font: 600 13px var(--ui); color: var(--text); padding: 0; margin: 0 0 6px; }
.qs-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.qs-scale label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; margin: 0; padding: 6px 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: center; font-weight: 400; }
.qs-scale label:hover { background: var(--surface-2); }
.qs-scale input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qs-scale label:has(input:focus-visible) { outline: 2px solid var(--azure); outline-offset: 2px; }
.qs-scale label:has(input:checked) { border-color: var(--atlantic); background: var(--atlantic); }
.qs-scale label:has(input:checked) .num, .qs-scale label:has(input:checked) .txt { color: #fff; }
.qs-scale .num { font: 600 16px/1 var(--mono); color: var(--text); }
.qs-scale .txt { font: 500 11px/1.15 var(--ui); color: var(--text-2); overflow-wrap: anywhere; }
@container (max-width: 400px) { .qs-scale .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .qs-scale label { min-height: 48px; } }

.qs-guide { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.qs-guide .lv { display: block; font: 700 14px/1.3 var(--display); color: var(--text); margin: 0 0 4px; }
.qs-guide .test { display: block; color: var(--text); margin: 0 0 6px; }
.qs-guide p { margin: 0; color: var(--text-2); }


.qs-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left-width: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--surface); }
.qs-check::before { font: 700 13px/1.5 var(--mono); text-align: center; }
.qs-check.limit::before { content: "≤"; content: "≤" / ""; }
.qs-check.holds::before { content: "↓"; content: "↓" / ""; }
.qs-check.critical::before { content: "!"; content: "!" / ""; }
.qs-check.override::before { content: "≡"; content: "≡" / ""; }
.qs-check.recheck::before { content: "?"; content: "?" / ""; }
.qs-check > div { grid-column: 2; min-width: 0; }
.qs-check p { margin: 0 0 4px; color: var(--text); }
.qs-check p:last-child { margin: 0; }
.qs-check p.muted { color: var(--text-2); }
.qs-check strong { font-family: var(--display); }
.qs-check a { font-weight: 600; white-space: nowrap; }
.qs-check.limit { border-left-color: var(--warning); background: var(--warning-soft); }
.qs-check.limit::before { color: var(--warning); }
.qs-check.critical { border-left-color: var(--danger); background: var(--danger-soft); }
.qs-check.critical::before, .qs-check.critical strong { color: var(--danger); }
/* The override is a rule that sets the level, not an alarm (Pilot re-walk 8): navy on the plain surface, its own mark. */
.qs-check.override { border-left-color: var(--navy); background: var(--surface); }
.qs-check.override::before, .qs-check.override strong { color: var(--navy); }
.qs-check.recheck { border-left-color: var(--atlantic); background: var(--azure-soft); }
.qs-check.recheck::before, .qs-check.recheck strong { color: var(--atlantic); }
.qs-check.holds { border-left-color: var(--line-2); background: var(--surface-2); }
.qs-check.holds::before { color: var(--text-2); }
.qs-keep { font: 600 13.5px/1 var(--ui); min-height: 40px; padding: 0 14px; margin-top: 4px; border-radius: 999px; border: 1px solid var(--atlantic); background: var(--surface); color: var(--atlantic); cursor: pointer; }

.qs-ev { margin: 16px 0 0; }
.qs-ev > label { display: block; margin: 0; font: 600 13px var(--ui); color: var(--text); }
.qs-ev .hint { font-size: 13px; line-height: 1.45; color: var(--text-2); margin: 2px 0 6px; max-width: 68ch; }
.qs-ev .hint b { font-weight: 600; color: var(--text); }
.qs-ev textarea { margin-top: 0; min-height: 88px; width: 100%; }
.qs-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; margin: 6px 0 0; }
.qs-meter .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.qs-meter .bar i { display: block; height: 100%; width: 100%; background: var(--warning); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 140ms var(--ease); }
.qs-meter.ok .bar i { background: var(--success); }
.qs-meter .t { font: 400 12px/1.3 var(--mono); color: var(--text-2); }
.qs-meter.ok .t { color: var(--success); }
.qs-meter .m { font: 600 12.5px/1 var(--ui); color: var(--atlantic); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 12px; min-height: 32px; cursor: pointer; }

.qs-flags { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.qs-flags > legend { font: 600 13px var(--ui); color: var(--text); padding: 0; margin: 0; }
.qs-flags .help { font-size: 13px; color: var(--text-2); margin: 2px 0 4px; }
.qs-flags ul { list-style: none; margin: 0; padding: 0; }
.qs-flags label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; align-items: start; margin: 0; padding: 8px 6px; border-radius: 8px; font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--text); cursor: pointer; min-height: 44px; }
.qs-flags label:hover { background: var(--surface-2); }
.qs-flags input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azure); }
.qs-flags .qs-tag { margin-left: 4px; vertical-align: 1px; }

.qs-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.qs-next > button[data-qs-next] { font: 600 14px/1.2 var(--ui); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--atlantic); background: var(--surface); color: var(--atlantic); cursor: pointer; }
.qs-next .muted { font-size: 12.5px; font-family: var(--mono); }
.qs-next .qs-save:empty { display: none; }
.qs-next .qs-save { flex: 1 1 100%; margin: 0; color: var(--danger); }
.qs-next .qs-save.calm { color: var(--text-2); } /* F33: newer answers saved elsewhere is news, not a failure */

.qs-readout { margin: 22px 0 0; padding: 18px 0 0; border-top: 2px solid var(--line-2); }
.qs-readout .qs-readout-title { font: 400 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0 0 10px; }
.qs-readout .qs-sub { font: 700 15px/1.3 var(--display); color: var(--text); margin: 22px 0 6px; }
.qs-readout .sub { font-size: 13.5px; color: var(--text-2); margin: 0 0 8px; max-width: 66ch; }
.qs-head { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.qs-head.crit { background: var(--danger-soft); border-color: transparent; border-left: 3px solid var(--danger); }
.qs-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.qs-big .tot { font: 700 28px/1.1 var(--display); color: var(--navy); }
.qs-big .tot small { font-size: 15px; font-weight: 600; color: var(--text-2); }
.qs-big .lvl { font: 700 18px/1.2 var(--display); color: var(--text); }
.qs-head.crit .qs-big .lvl { color: var(--danger); }
.qs-critline { margin: 6px 0 0; font-size: 14px; color: var(--danger); }
.qs-critline strong { color: var(--danger); }
.qs-scope { font: 600 14px/1.4 var(--ui); color: var(--text); margin: 4px 0 0; }
.qs-set { font-size: 13.5px; color: var(--text); margin: 8px 0 0; line-height: 1.5; }
.qs-set + .qs-set { margin-top: 4px; }
.qs-verdict p { margin: 6px 0 0; font-size: 14px; color: var(--text); max-width: 70ch; }
.qs-band { position: relative; height: 26px; margin: 4px 0 0; }
.qs-band .track { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: var(--line); }
.qs-band .range { position: absolute; top: 6px; height: 14px; border-radius: 4px; background: var(--azure-soft); border: 1px solid var(--azure); }
.qs-band .you { position: absolute; top: 2px; width: 3px; height: 22px; margin-left: -1px; background: var(--navy); border-radius: 2px; }
.qs-band-scale { display: flex; justify-content: space-between; font: 400 11px/1 var(--mono); color: var(--text-2); }
.qs-critlist { margin: 12px 0 0; }
.qs-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font: 400 12px/1.4 var(--mono); color: var(--text-2); padding: 0; list-style: none; }
.qs-key li { display: inline-flex; align-items: center; gap: 6px; }
.qs-key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.qs-key i.gap { background: var(--danger); } .qs-key i.adq { background: var(--warning); } .qs-key i.str { background: var(--success); }
.qs-key i.rng { background: none; border-bottom: 3px solid var(--navy); height: 6px; border-radius: 0; }
.qs-key i.ent { background: none; border: 1.5px dashed var(--text-2); }
.qs-prof { margin: 0 0 6px; }
.qs-prof .qs-plh { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 12px 0 4px; }
.qs-prof ul { list-style: none; margin: 0; padding: 0; }
.qs-prow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(120px, 1fr) minmax(0, 1.1fr); grid-template-areas: "name bar text"; align-items: center; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
@container (max-width: 560px) { .qs-prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name text" "bar bar"; } }
.qs-prow .pn { grid-area: name; font: 600 14px/1.3 var(--ui); color: var(--text); min-width: 0; }
.qs-prow .pn .fl { display: block; font: 400 11.5px/1.4 var(--mono); color: var(--text-2); }
.qs-prow .pn .fl.crit { color: var(--danger); }
.qs-prow .pt { grid-area: text; font: 400 12.5px/1.35 var(--mono); color: var(--text-2); text-align: right; }
.qs-prow .pt b { font-size: 13.5px; color: var(--text); }
.qs-prow .pt .pos, .qs-prow .pt .was { display: block; }
.qs-prow .pt .pos.below { color: var(--text); font-weight: 600; }
.qs-pbar { grid-area: bar; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 12px 5px; column-gap: 3px; row-gap: 3px; }
.qs-pbar .c { grid-row: 1; border-radius: 2px; background: var(--line); }
.qs-pbar[data-c="gap"] .c.on { background: var(--danger); }
.qs-pbar[data-c="adq"] .c.on { background: var(--warning); }
.qs-pbar[data-c="str"] .c.on { background: var(--success); }
.qs-pbar .c.ent { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line-2) 3px 5px); box-shadow: inset 0 0 0 1.5px var(--text-2); }
.qs-pbar .rng { grid-row: 2; background: var(--navy); border-radius: 2px; }
.qs-find { margin: 0; padding: 0; list-style: none; }
.qs-find li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--text); }
.qs-find li:first-child { border-top: 0; }
.qs-find .k { font: 600 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); min-width: 92px; }
@container (max-width: 400px) { .qs-find li { grid-template-columns: minmax(0, 1fr); } .qs-find .k { min-width: 0; } }
.qs-pat { border: 0; padding: 0; margin: 0; min-width: 0; }
.qs-pat-opt { margin: 0 0 6px; }
.qs-pat label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; align-items: start; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; }
.qs-pat label:has(input:checked) { border-color: var(--azure); background: var(--azure-soft); }
.qs-pat input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--azure); }
.qs-pat .nm { font: 600 14.5px/1.3 var(--ui); color: var(--text); }
.qs-pat .rule { grid-column: 2; font: 400 12px/1.45 var(--mono); color: var(--text-2); }
.qs-pat .mean { grid-column: 2; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.qs-unmatched { margin: 4px 0 0 12px; padding: 6px 10px; border-left: 3px solid var(--warning); background: var(--warning-soft); font-size: 13.5px; color: var(--text); }
.qs-pri { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.qs-pri li { counter-increment: p; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.qs-pri li:first-child { border-top: 0; }
.qs-pri li::before { content: counter(p); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 12px/1 var(--mono); }
.qs-pri .nm { font: 600 14.5px/1.3 var(--ui); color: var(--text); }
.qs-pri .why { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.qs-line { margin: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--navy); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.qs-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.qs-copy button { font: 600 14px/1 var(--ui); min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--atlantic); background: var(--atlantic); color: #fff; cursor: pointer; }
.qs-copy .form-status { margin: 0; }
/* Pilot P3 / coordinator (3): the folded reference's tables wrap inside the column at a phone's width; no sideways swipe. */
@media (max-width: 700px) {
  .doc details.qs-howto table { display: table; table-layout: fixed; width: 100%; overflow: visible; }
  .doc details.qs-howto th, .doc details.qs-howto td { padding: 8px; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
  .doc details.qs-howto th { letter-spacing: .02em; }
}
.qs-left { padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); background: var(--warning-soft); font-size: 14px; }
.qs-left p { margin: 0 0 6px; color: var(--text); }
.qs-left ul { margin: 0; padding: 0 0 0 18px; color: var(--text); }
.qs-left li { margin: 2px 0; }

/* ── The admin panel (F36; Atelier's design A, scratch/design/admin/note.md and mock.css) ───────────────────────────
   The cohort's staff index: four sections behind four in-page links. Before the script, the stylesheet shows the
   targeted section and Weeks when none is (:target with :has); once app.js runs it sets .admin[data-sec] and that alone
   decides. The fallback is scoped to .admin:not([data-sec]), so it cannot outrank the script's choice (P-3: its #weeks
   rule, an id selector, kept Weeks on screen beside a section chosen on the hashless entry, since replaceState never
   moves :target). No motion. A state chip plus a button, never a toggle; an off row is tinted and says so in words. */
.admin { display: flex; flex-direction: column; gap: 16px; }
.admin .page-head { margin-bottom: 4px; }
.admin-links { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 600 13px var(--ui); }
.admin-links a:hover { background: var(--surface-2); text-decoration: none; }
.admin-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.admin-tabs a { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.admin-tabs a:hover { text-decoration: none; border-color: var(--azure); }
.admin-tabs .t { font: 700 14px/1.2 var(--display); }
.admin-tabs .s { font: 400 11px/1.3 var(--mono); letter-spacing: .03em; color: var(--text-2); overflow-wrap: anywhere; }
.admin-tabs .s.attn { color: var(--warning); }
.admin-tabs a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.admin-tabs a[aria-current="true"] .s { color: #C9D3EE; }
.admin-tabs a[aria-current="true"] .s.attn { color: #FFE08A; }
@media (max-width: 720px) { .admin-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@supports selector(:has(*)) {
  .admin:not([data-sec]) .admin-secs > .admin-sec { display: none; }
  .admin:not([data-sec]) .admin-secs > .admin-sec:target { display: block; }
  .admin:not([data-sec]) .admin-secs:not(:has(> .admin-sec:target)) > #weeks { display: block; }
  .admin:not([data-sec]):has(#weeks:target) .admin-tabs a[href="#weeks"],
  .admin:not([data-sec]):has(#features:target) .admin-tabs a[href="#features"],
  .admin:not([data-sec]):has(#moderation:target) .admin-tabs a[href="#moderation"],
  .admin:not([data-sec]):has(#audit:target) .admin-tabs a[href="#audit"],
  .admin:not([data-sec]):not(:has(.admin-sec:target)) .admin-tabs a[href="#weeks"] { background: var(--navy); border-color: var(--navy); color: #fff; }
}
.admin[data-sec] .admin-secs > .admin-sec { display: none; }
.admin[data-sec="weeks"] .admin-secs > #weeks, .admin[data-sec="features"] .admin-secs > #features,
.admin[data-sec="moderation"] .admin-secs > #moderation, .admin[data-sec="audit"] .admin-secs > #audit { display: block; }
.admin-sec { scroll-margin-top: 16px; min-width: 0; }
.admin .card-head { flex-wrap: wrap; }
.admin-sec > .card-head h2 { font-size: 17px; }
.admin-sec .intro { margin: 0 0 14px; color: var(--text-2); font-size: 14px; max-width: 72ch; }
.admin .week-row .wk-text .muted { white-space: normal; }
.admin .week-row .chip.pathway { height: 20px; font-size: 10px; margin-left: 6px; }
.admin .linkish { min-height: 36px; padding: 0 8px; text-align: left; }
/* Features */
.cohort-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.cohort-state .label { margin: 0; }
.feat-summary { margin: 0 0 14px; font-size: 14px; color: var(--text); }
.feat-summary b { font-weight: 600; }
.switches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sw { display: grid; grid-template-columns: minmax(0, 1.25fr) 236px minmax(0, 1fr); gap: 8px 24px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sw.is-off { background: linear-gradient(90deg, var(--warning-soft), transparent 60%); }
.sw-text { grid-column: 1; grid-row: 1; padding-left: 2px; min-width: 0; }
.sw h3 { font-size: 15px; margin: 0 0 2px; }
.sw-text p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.sw-text .since { display: block; margin-top: 4px; font-size: 12.5px; color: var(--warning); }
.sw-state { grid-column: 2; grid-row: 1; justify-self: stretch; display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sw-ex { grid-column: 3; grid-row: 1; min-width: 0; }
.sw-ex .none { display: inline; margin-right: 8px; }
.sw-ex > .label { display: none; margin-bottom: 4px; }
.sw > .inline-form { grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .sw { grid-template-columns: minmax(0, 1fr); }
  .sw-text, .sw-state, .sw-ex { grid-column: 1; grid-row: auto; }
  .sw-state { justify-content: flex-start; }
  .sw-ex > .label { display: block; }
}
.chip.off { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.chip.off::before { background: var(--warning); }
.btn-sm { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 600 13px var(--ui); cursor: pointer; white-space: nowrap; }
.btn-sm:hover { background: var(--surface-2); }
.btn-sm[disabled], .admin .linkish[disabled] { opacity: .55; cursor: not-allowed; }
/* Saving (A11Y-02): busy, not disabled, so the button pressed keeps focus; its text stays at full contrast. */
.admin button[aria-disabled="true"] { cursor: progress; }
.ex-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ex-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; }
.ex-list .ex-who { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.ex-list .ex-who .chip { margin-left: 6px; height: 22px; vertical-align: 1px; }
.ex-list .meta { grid-column: 1; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.ex-list .linkish { grid-column: 2; grid-row: 1 / span 2; }
.none { font-size: 13px; color: var(--text-3); margin: 0 0 2px; }
.addr-n { font-weight: 400; color: var(--text-2); }
/* Inline forms: confirm a switch, add an exception, hide, restore, take out. The change happens only on the form's
   own button, after its effect is stated. */
.inline-form { margin: 12px 0 2px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--azure); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.inline-form.warn { border-left-color: var(--warning); }
.inline-form h4 { font: 700 14px/1.3 var(--display); margin: 0 0 4px; scroll-margin-top: 28px; }
.inline-form p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); }
.inline-form .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; margin: 0 0 12px; }
.inline-form label, .mod-filters label { display: block; margin: 0; font: 600 12.5px var(--ui); color: var(--text-2); }
.inline-form input[type="text"], .inline-form select, .mod-filters select, .mod-filters input[type="search"] { display: block; width: 100%; max-width: 100%; margin-top: 4px; font: 14px var(--ui); color: var(--text); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); min-height: 38px; }
.inline-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.inline-form fieldset legend { font: 600 12.5px var(--ui); color: var(--text-2); margin: 0 0 4px; padding: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.radios label { display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--ui); color: var(--text); min-height: 32px; }
.radios input { width: 18px; height: 18px; accent-color: var(--azure); margin: 0; }
.inline-form .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inline-form .acts .cta::after { content: none; }
.inline-form .acts .form-status { flex: 1 1 100%; }
.inline-form .fine { font-size: 12.5px; color: var(--text-3); margin: 10px 0 0; overflow-wrap: anywhere; }
/* Moderation */
.mod-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; align-items: end; }
.mod-filters label { flex: 0 1 220px; min-width: 0; }
@media (max-width: 720px) {
  .mod-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mod-filters select { font-size: 13.5px; padding: 8px 6px; }
}
.mod-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mod-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.mi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-2); }
.mi-head .kind { font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--atlantic); background: var(--azure-soft); padding: 3px 8px; border-radius: 999px; }
.mi-head strong { color: var(--text); font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.mi-head time { font: 400 11.5px var(--mono); color: var(--text-3); }
.mi-head .chip { height: 22px; }
.mi-head .chip.state { margin-left: auto; }
.mi-body { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mi-file { margin: 6px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mi-file .fn { font-family: var(--mono); font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.mi-file .sz { font: 400 11.5px var(--mono); color: var(--text-3); }
.mi-state { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.mi-state strong { color: var(--warning); font-weight: 600; }
.mi-acts { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.mod-item.is-hidden { border-style: dashed; border-color: var(--warning); background: var(--warning-soft); }
.mod-item.is-hidden .mi-body { color: var(--text-2); }
.mod-item.is-hidden .mi-acts { border-top-color: #EBD9A0; }
.mod-item details { margin-top: 4px; font-size: 13px; }
.mod-item details summary { cursor: pointer; color: var(--atlantic); font-weight: 600; min-height: 28px; display: inline-flex; align-items: center; }
.review-full { margin: 6px 0 0; display: grid; gap: 6px; }
.review-full dt { font: 600 12.5px var(--ui); color: var(--text-2); }
.review-full dd { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.more-row { margin: 14px 0 0; font-size: 13px; }
/* Audit */
.audit { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.audit li { display: grid; grid-template-columns: 170px 110px minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.audit time { font: 400 12px/1.6 var(--mono); color: var(--text-2); }
.audit .by { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.audit .what { color: var(--text); overflow-wrap: anywhere; }
.audit .what .ft { font: 400 11.5px var(--mono); color: var(--text-2); margin-left: 6px; white-space: nowrap; }
.audit .why { grid-column: 3; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .audit li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .audit .why { grid-column: 1; }
}
/* Empty, loading and error, the platform's own shapes. */
.empty { padding: 18px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; background: var(--surface-2); }
.empty strong { display: block; color: var(--text); margin-bottom: 2px; }
.skel { display: block; height: 52px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); margin: 0 0 8px; }
.load-error { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.load-error .linkish { color: var(--danger); }
/* Staff view of a switched-off feature (ISC-265): the [data-unreleased] treatment with its own words, and one line on a
   switched-off page itself. A learner never gets the element at all: the rewriter removed it. */
[data-feature-off] { opacity: .6; }
/* The phone tab bar's labels are text-3 on white: dimmed they fall under AA (2.42:1), so a switched-off item keeps full
   strength there and is struck through instead (staff only; the sidebar carries the words). */
.tabbar a[data-feature-off] { opacity: 1; }
.tabbar a[data-feature-off] > span { text-decoration: line-through; text-decoration-color: var(--warning); text-decoration-thickness: 2px; }
.site-nav a[data-feature-off] > span:last-child::after { content: " · off for learners"; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
section.thread[data-feature-off] > .card-head h2::after, section.peer[data-feature-off]::before { content: "Off for learners"; display: inline-block; margin-left: 10px; font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warning); vertical-align: middle; }
/* A menu group whose every item the rewriter removed (a learner with the library, calendar and lounge all off) goes with
   its title: no heading over nothing. */
.nav-title:has(+ .site-nav:empty), .site-nav:empty { display: none; }
.off-banner { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--warning-soft); color: #5C4500; font-size: 13.5px; }
.off-banner strong { color: var(--warning); }
.off-banner a { color: #5C4500; text-decoration: underline; }
/* The author's own removed post (learner view, F36 R5): marked, and only they see it. */
.post.removed { border-style: dashed; border-color: var(--line-2); background: var(--surface-2); }
.post.removed .post-body { color: var(--text-3); }
.tag.tag-removed { background: var(--text-2); color: #fff; }
.removed-note { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); }
/* On a tool (the share tool's document, a reviewer's own review): the same note, above the form, at reading size. */
.instrument > .removed-note { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.audit-more { margin: 12px 0 0; }

/* F37 · The offline flow (Atelier's design B, scratch/design/exercise-formats/mock.css, on these tokens). One document
   panel per exercise after its Time line; format rows, not buttons in a row, so "Make a copy in Google Docs" never wraps
   into a second button line; the type tag is a word backing its colour. No motion but the upload bar's transform. */
.doc .offline { margin: 14px 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--azure); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 15px; line-height: 1.5; scroll-margin-top: 16px; }
.doc .offline h3 { margin: 0 0 4px; padding: 0; border: 0; font: 700 15px/1.3 var(--display); }
.doc .offline > p { margin: 0 0 12px; color: var(--text-2); font-size: 14px; }
.doc .offline > p.keep { margin: 10px 0 0; font-size: 13.5px; }
.doc .offline > p a { text-decoration: underline; text-underline-offset: 2px; } /* P-5: a link inside the lead, so not by colour alone */
.formats { display: flex; flex-direction: column; gap: 6px; }
.fmt { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; min-height: 46px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.doc .fmt, .doc .fmt:hover { color: var(--text); text-decoration: none; }
.fmt:hover { border-color: var(--azure); background: var(--azure-soft); }
.fmt .ft, .handed .ft { padding: 5px 0; border-radius: 6px; font: 600 10px/1 var(--mono); letter-spacing: .06em; text-align: center; color: #fff; background: var(--atlantic); }
.fmt .ft.pdf, .handed .ft.pdf { background: var(--danger); }
.fmt .ft.gdoc, .fmt .ft.gsheet, .fmt .ft.xlsx, .handed .ft.xlsx, .handed .ft.link { background: var(--success); }
.fmt .fl { font: 600 14px/1.25 var(--ui); min-width: 0; overflow-wrap: anywhere; }
.fmt .fs { font: 400 11px/1.3 var(--mono); color: var(--text-3); text-align: right; }
.fmt[aria-disabled="true"] { cursor: progress; }
@media (max-width: 560px) {
  .doc .offline { padding: 14px 12px; }
  .fmt { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 1px; padding: 8px 12px; }
  .fmt .ft { grid-row: 1 / span 2; }
  .fmt .fs { grid-column: 2; text-align: left; }
}
/* Download my answers: the learner's own copy, so it looks different from the blank template (dashed). */
.mine { margin-top: 8px; }
.mine .fmt { border-style: dashed; }
.mine .fmt .fs { white-space: normal; }
.offline .status { margin: 8px 0 0; font: 400 12px/1.5 var(--mono); color: var(--text-2); }
.offline .status:empty { display: none; }
.offline .status.error { color: var(--danger); }
.offline .status .linkish { font-size: 12px; }
/* Staff see a switched-off row at full strength (dimmed, the mono labels fall under AA), dashed and named. */
.fmt[data-feature-off], .offline[data-feature-off], .lib-docs[data-feature-off], .mine[data-feature-off] { opacity: 1; }
.fmt[data-feature-off] { border-style: dashed; }
.fmt[data-feature-off] .fl::after { content: "Off for learners"; display: block; font: 400 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warning); }

/* The hand-in at the end of an exercise: the instrument's frame, its own list and two ways in. */
.handin .who-sees, section.instrument > .who-sees { margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.handed { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.handed:empty { display: none; }
.handed li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.handed .ft { grid-row: 1 / span 2; }
.handed .fn { font: 400 13px/1.4 var(--mono); color: var(--atlantic); overflow-wrap: anywhere; min-width: 0; }
.handed .fm { grid-column: 2; font-size: 12px; color: var(--text-3); }
.handed .fm.late { color: var(--warning); }
/* P-8: a hand-in's Replace and Remove, and Remove's own question, under its name and time. */
.handed .acts, .handed .confirm { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 4px 0 0 -6px; font-size: 13px; color: var(--text); }
.handed .confirm > span { padding-left: 6px; }
.handed .acts .linkish, .handed .confirm .linkish { min-height: 32px; }
.handin [data-handin-keep] { justify-self: start; margin: -4px 0 0 -6px; min-height: 32px; }
.handin-add { display: grid; gap: 14px; }
.handin-add label { display: block; margin: 0; font: 600 13.5px var(--ui); color: var(--text); }
.handin-add .hint { margin: 2px 0 6px; font-size: 12.5px; color: var(--text-2); }
.handin-add .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.handin-add .row input { flex: 1 1 16rem; min-width: 0; max-width: 520px; margin: 0; }
.handin-add input[type="url"] { font: 14.5px var(--ui); padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.handin-add input[type="file"] { border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.handin-add .cta::after { content: none; }
.handin .msg { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; overflow-wrap: anywhere; }
/* The live region stays in the page while empty (a hidden one announces nothing): no box, and no grid gap above it. */
.handin .msg:empty { padding: 0; margin-top: -14px; }
.handin .msg.error { background: var(--danger-soft); color: var(--danger); }
.handin .msg.busy { background: var(--azure-soft); color: var(--atlantic); }
.handin .msg.ok { background: var(--success-soft); color: var(--success); }
.handin-add .cta[aria-disabled="true"] { cursor: progress; }
.progress { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 100%; background: var(--azure); transform-origin: left; transform: scaleX(0); }
/* The share box's how-to-share line sits under its link field. */
form.tool[data-kind="share"] > .hint { margin: -2px 0 10px; font-size: 12.5px; color: var(--text-2); }

/* The library: each unit's exercise documents, one group per document. */
.lib-docs { margin: 4px 0 24px; padding: 14px 16px 6px; border: 1px solid var(--line); border-left: 4px solid var(--azure); border-radius: var(--radius-sm); background: var(--surface-2); }
.doc .lib-docs h3 { margin: 0 0 8px; padding: 0; border: 0; font: 700 15px/1.3 var(--display); }
.doc .lib-doc h4 { margin: 10px 0 6px; font: 600 14px/1.35 var(--ui); }
.lib-doc .formats { margin: 0 0 10px; }
.lib-doc[id] { scroll-margin-top: 16px; } /* a link to one document lands clear of the top bar, as a section does */
.lib-doc .chip.pathway { height: 22px; margin-left: 6px; vertical-align: middle; }
@media (max-width: 560px) { .lib-docs { padding: 12px 12px 4px; } }

/* Cumulative pre-work standing & Staff Control Room (ISC-5, ISC-11, ISC-19..ISC-29, ISC-32) */
.standing-cumulative { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 13px; }
.control-room { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
/* Standalone Staff Topic Isolation:
   - On the main Weeks overview (data-topic="weeks"), show the Standalone Topic Directory and the Weeks list, hiding the 9 Control Room cards so the page is clean and focused.
   - When a standalone Control Room topic is active (e.g. data-topic="readiness"), hide the Weeks list and directory and show ONLY that standalone topic card at full width! */
.admin[data-topic="weeks"] .control-room { display: none; }
/* ISC-387: the card a control-room topic shows while its read is in flight, and the error card when it failed. */
.control-room > .cr-state { padding: 18px 20px; border-radius: var(--radius); min-width: 0; }
.control-room > .cr-state[data-cr-loading] { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); color: var(--text-2); font-size: 14px; }
.control-room > .cr-state[data-cr-loading] p { margin: 0 0 10px; }
.admin[data-topic="readiness"] #weeks > .card-head,
.admin[data-topic="readiness"] #weeks > .intro,
.admin[data-topic="readiness"] #weeks > .week-list,
.admin[data-topic="readiness"] #weeks > .staff-topic-directory,
.admin[data-topic="at-risk"] #weeks > .card-head,
.admin[data-topic="at-risk"] #weeks > .intro,
.admin[data-topic="at-risk"] #weeks > .week-list,
.admin[data-topic="at-risk"] #weeks > .staff-topic-directory,
.admin[data-topic="clocks"] #weeks > .card-head,
.admin[data-topic="clocks"] #weeks > .intro,
.admin[data-topic="clocks"] #weeks > .week-list,
.admin[data-topic="clocks"] #weeks > .staff-topic-directory,
.admin[data-topic="assessments"] #weeks > .card-head,
.admin[data-topic="assessments"] #weeks > .intro,
.admin[data-topic="assessments"] #weeks > .week-list,
.admin[data-topic="assessments"] #weeks > .staff-topic-directory,
.admin[data-topic="grid"] #weeks > .card-head,
.admin[data-topic="grid"] #weeks > .intro,
.admin[data-topic="grid"] #weeks > .week-list,
.admin[data-topic="grid"] #weeks > .staff-topic-directory,
.admin[data-topic="outbox"] #weeks > .card-head,
.admin[data-topic="outbox"] #weeks > .intro,
.admin[data-topic="outbox"] #weeks > .week-list,
.admin[data-topic="outbox"] #weeks > .staff-topic-directory,
.admin[data-topic="agents"] #weeks > .card-head,
.admin[data-topic="agents"] #weeks > .intro,
.admin[data-topic="agents"] #weeks > .week-list,
.admin[data-topic="agents"] #weeks > .staff-topic-directory,
.admin[data-topic="attendance"] #weeks > .card-head,
.admin[data-topic="attendance"] #weeks > .intro,
.admin[data-topic="attendance"] #weeks > .week-list,
.admin[data-topic="attendance"] #weeks > .staff-topic-directory,
.admin[data-topic="support"] #weeks > .card-head,
.admin[data-topic="support"] #weeks > .intro,
.admin[data-topic="support"] #weeks > .week-list,
.admin[data-topic="support"] #weeks > .staff-topic-directory { display: none; }
.admin[data-topic="readiness"] .cr-card:not([data-topic="readiness"]),
.admin[data-topic="at-risk"] .cr-card:not([data-topic="at-risk"]),
.admin[data-topic="clocks"] .cr-card:not([data-topic="clocks"]),
.admin[data-topic="assessments"] .cr-card:not([data-topic="assessments"]),
.admin[data-topic="grid"] .cr-card:not([data-topic="grid"]),
.admin[data-topic="outbox"] .cr-card:not([data-topic="outbox"]),
.admin[data-topic="agents"] .cr-card:not([data-topic="agents"]),
.admin[data-topic="attendance"] .cr-card:not([data-topic="attendance"]),
.admin[data-topic="support"] .cr-card:not([data-topic="support"]) { display: none; }

/* Staff Topic Navigation Bar & Dropdown Menu */
.staff-topic-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 12px; position: relative; z-index: 20; }
.staff-topic-bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 260px; }
.staff-topic-bar-right { display: flex; align-items: center; gap: 10px; flex: 0 1 320px; min-width: 0; }
.staff-topic-menu { position: relative; width: 100%; max-width: 420px; }
.staff-topic-trigger { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; user-select: none; }
.staff-topic-trigger::-webkit-details-marker { display: none; }
.staff-topic-trigger:hover { border-color: var(--azure); background: var(--azure-soft); }
.staff-topic-trigger-kicker { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--atlantic); background: var(--surface); padding: 4px 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.staff-topic-trigger-label { font: 700 14px/1.25 var(--display); color: var(--text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-topic-caret { font-size: 13px; color: var(--text-2); margin-left: auto; }
.staff-topic-popover { position: absolute; top: calc(100% + 6px); left: 0; width: min(680px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); box-shadow: 0 14px 36px rgba(10, 22, 46, .16); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; z-index: 50; }
.staff-menu-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.staff-menu-group-title { font: 600 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); padding: 2px 8px 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.staff-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text); font: 500 13px/1.3 var(--ui); text-decoration: none; }
.staff-menu-item:hover { background: var(--azure-soft); color: var(--atlantic); text-decoration: none; }
.staff-menu-item[aria-current="page"] { background: var(--navy); color: #fff; font-weight: 600; }
.staff-menu-item-badge { font: 400 10.5px/1.2 var(--mono); color: var(--text-2); white-space: nowrap; }
.staff-menu-item[aria-current="page"] .staff-menu-item-badge { color: #C9D3EE; }
.staff-topic-select-wrap { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; }
.staff-topic-eyebrow { font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); white-space: nowrap; }
.staff-topic-select { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 600 13.5px var(--ui); }

/* Sidebar Staff Sub-Bullets */
.sidebar .staff-sub-nav { margin: 4px 0 8px 18px; padding: 2px 0 2px 10px; border-left: 1px solid rgba(255, 255, 255, .14); list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar .staff-sub-nav a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 4px 10px; border-radius: 6px; font: 500 12.5px/1.25 var(--ui); color: #B8C4DE; text-decoration: none; }
.sidebar .staff-sub-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); text-decoration: none; }
.sidebar .staff-sub-nav a[aria-current="page"], .sidebar .staff-sub-nav a.active { color: #fff; font-weight: 600; background: rgba(26, 92, 255, .24); }
.sidebar .staff-sub-nav .sub-state { font: 400 10px/1.2 var(--mono); color: #8FA1C7; white-space: nowrap; }
.sidebar .staff-sub-nav a[aria-current="page"] .sub-state { color: #CFE0FF; }

/* Standalone Topic Banner & Directory Grid */
.staff-topic-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--shadow); }
.staff-topic-banner-main { min-width: 0; flex: 1 1 320px; }
.staff-topic-group-pill { display: inline-block; font: 600 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--atlantic); background: var(--azure-soft); padding: 4px 8px; border-radius: 999px; margin-bottom: 6px; }
.staff-topic-banner-title { margin: 0 0 4px; font: 700 19px/1.25 var(--display); color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.staff-topic-banner-blurb { margin: 0; font-size: 13.5px; color: var(--text-2); max-width: 72ch; }
.staff-topic-banner-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.staff-topic-banner-acts a:hover { text-decoration: none; }
.staff-topic-directory { margin: 8px 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.staff-dir-head { margin-bottom: 12px; }
.staff-dir-head h3 { margin: 0 0 2px; font: 700 15px/1.3 var(--display); color: var(--text); }
.staff-dir-head p { margin: 0; font-size: 13px; }
.staff-dir-groups { display: flex; flex-direction: column; gap: 14px; }
.staff-dir-group-title { margin: 0 0 6px; font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.staff-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.staff-dir-card { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
.staff-dir-card:hover { border-color: var(--azure); box-shadow: var(--shadow); text-decoration: none; }
.staff-dir-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.staff-dir-card-top strong { font: 700 14px/1.25 var(--display); color: var(--text); }
.staff-dir-card-blurb { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.staff-topic-hidden { display: none; }

.cr-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.cr-card[data-cr-grid], .cr-card[data-cr-outbox] { grid-column: 1 / -1; }
.cr-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cr-card-head h3, .cr-card > h4 { margin: 0 0 8px; font: 700 16px/1.3 var(--display); color: var(--text); }
.cr-card-head h3 { margin: 0; }
.cr-meta, .cr-missing { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }
.cr-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.cr-list-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.cr-grid-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cr-grid-table th, .cr-grid-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cr-grid-table th { font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); background: var(--surface-2); }
.cr-cell-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; font-family: var(--mono); font-size: 11px; }
.cr-badge { padding: 2px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.cr-badge[data-state="complete"], .cr-badge[data-state="recorded"], .cr-badge[data-state="attended"], .cr-badge[data-state="on-time"] { background: var(--success-soft); border-color: transparent; color: var(--success); }
.cr-outbox-list { display: flex; flex-direction: column; gap: 12px; }
.cr-outbox-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.cr-outbox-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.cr-draft-body { width: 100%; font: 13.5px/1.45 var(--ui); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; }
.cr-outbox-acts, .cr-agent-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cr-seats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cr-stage { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cr-stage2-form, .cr-att-mark-form, .cr-att-csv-form, .cr-oh-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; margin-top: 8px; }
.cr-stage2-form input, .cr-att-mark-form input, .cr-att-csv-form input, .cr-att-csv-form textarea, .cr-oh-form input { font: 13.5px var(--ui); padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); min-height: 36px; flex: 1 1 180px; min-width: 0; }
/* E2 (review 2026-10-23 CL-2, CL-3, CL-13): the panels form, the typed-text forms and their confirms, the attendance week. */
.cr-stage > .inline-form, .cr-list-item > .inline-form, .cr-agent-acts > .inline-form { flex: 1 1 100%; min-width: 0; margin: 4px 0 0; }
.cr-panels-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px 14px; width: 100%; min-width: 0; margin-top: 8px; }
.cr-panels-form[hidden] { display: none; }
.cr-panels-h, .cr-panels-form .acts { grid-column: 1 / -1; }
.cr-panels-h { margin: 0; font: 600 13.5px/1.3 var(--ui); color: var(--text); }
.cr-panels-field { min-width: 0; }
.cr-panels-form label { display: block; font: 600 12.5px var(--ui); color: var(--text-2); }
.cr-panels-form textarea, .inline-form textarea { display: block; width: 100%; max-width: 100%; margin-top: 4px; font: 13.5px/1.45 var(--ui); color: var(--text); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); min-height: 38px; resize: vertical; }
.cr-panels-form .fine { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.cr-panels-form .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cr-panels-form .acts .form-status { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.inline-form.cr-text .fields { grid-template-columns: minmax(0, 1fr); }
.cr-confirm p { overflow-wrap: anywhere; }
.cr-confirm-label { margin: 0 0 4px; font: 600 12.5px var(--ui); color: var(--text-2); }
.inline-form .cr-confirm-label { margin: 0 0 4px; }
.cr-confirm-list { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.cr-att-week { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 4px; font-size: 13.5px; }
.cr-att-week label { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--ui); color: var(--text-2); }
/* A control-room chip wraps inside its card rather than widening the page (two ran 386 and 547 px wide at 320). */
.control-room .chip { max-width: 100%; height: auto; min-height: 26px; padding-top: 3px; padding-bottom: 3px; white-space: normal; }
.cr-item-what { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.cr-att-week select { font: 13.5px var(--ui); color: var(--text); padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); min-height: 36px; }
.cr-brief { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13.5px; }
.cr-brief-head { margin-bottom: 4px; }
.cr-brief-headline { margin: 4px 0; font-weight: 600; color: var(--text); }
.cr-brief-lines { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); }
@media (max-width: 720px) {
  .staff-topic-bar { padding: 10px 12px; }
  .staff-topic-bar-left, .staff-topic-bar-right { flex: 1 1 100%; }
  .staff-topic-menu { max-width: 100%; }
  .staff-topic-banner { padding: 14px; }
  .cr-card { padding: 14px; }
}