/* ==========================================================================
   App layer.

   primitives.css owns everything the design system defines: buttons, pills,
   callouts, the brief strip, segments, signature boxes, the nav, tables, code
   blocks, the shell and the three responsive tiers. It is dropped in
   unmodified.

   This file owns only what is specific to THIS application and appears in no
   design file: the library screen, the article body blocks, the lock manifest,
   the course screens and the editor.

   The rule that keeps the two apart: if a value appears in the style guide it
   belongs in primitives.css and must not be restated here. An earlier version
   of this file re-derived buttons, pills, callouts, tables and the brief strip
   by hand, and every one of them drifted from the spec.
   ========================================================================== */

/* ── Shell chrome ───────────────────────────────────────────────────────── */
/* .shell / .appbar / .shell__body / .shell__main come from primitives. Only
   the contents of the bar are ours.

   Every cluster inherits flex-shrink:0 and nowrap from .appbar, and the bar is
   overflow:hidden, because a previous build pushed Sign out off the right edge
   at 924px and broke signing out entirely. */

.appbar__brand { display: flex; align-items: center; gap: 10px; }
.appbar__mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--accent-line);
  background: var(--accent-tint);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 9px; color: var(--accent);
}
.appbar__name,
.appbar__area {
  font-family: var(--font-display);
  font-weight: 600; font-size: 17px; letter-spacing: 0.02em;
}
.appbar__name { color: var(--text); }
.appbar__area { color: var(--accent); }
.appbar__sep { color: var(--border-strong); }

.appbar__tabs { display: flex; align-items: center; gap: 2px; }
.appbar__tabs a {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--text-muted);
}
.appbar__tabs a:hover { color: var(--text); }
.appbar__tabs a[aria-current="page"] { color: var(--accent); background: var(--accent-tint); }

.appbar__search {
  display: flex; align-items: center; gap: 10px;
  width: 260px; height: 34px; padding: 0 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.appbar__search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 13.5px;
}
.appbar__search input::placeholder { color: var(--text-subtle); }
.appbar__search-icon { width: 11px; height: 11px; border: 1.5px solid var(--text-subtle); border-radius: 50%; }
.appbar__kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 2px 5px;
}

.appbar__account { display: flex; align-items: center; gap: 10px; }
.appbar__avatar { width: 26px; height: 26px; border-radius: 50%; }
.appbar__user { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* The drawer scrim only exists below 899px, where primitives turns .nav into
   an overlay. Hidden by default so it never covers a docked sidebar. */
.nav__scrim { display: none; }
.appbar__menu { display: none; }
@media (max-width: 899px) {
  .nav__scrim[data-open="true"] { display: block; }
  .appbar__menu {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 13px; cursor: pointer;
  }
  .appbar__menu:hover { border-color: var(--accent); color: var(--accent); }
}

.site-footer {
  padding: 26px 32px 40px;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
}
.site-footer p { margin: 0 0 4px; }

/* ── Library screen ─────────────────────────────────────────────────────── */

.lib-main {
  padding: 64px 80px 72px;
  display: flex; flex-direction: column; gap: 56px;
  min-width: 0;
}
.lib-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
  align-items: start;
}
.lib-hero-text { display: flex; flex-direction: column; gap: 20px; }
.lib-unitline { color: var(--accent); margin: 0; }
.lib-title { margin: 0; max-width: 22ch; }
.lib-lede { margin: 0; max-width: 60ch; }
.lib-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Section cards ──────────────────────────────────────────────────────── */

.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sec { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sec-head-left { display: flex; align-items: center; gap: 12px; }
.sec-num {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xs);
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--font-mono); font-size: 11px;
}
.sec-title { margin: 0; }
.sec-count { white-space: nowrap; padding-top: 6px; }
.sec-blurb { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.65; text-wrap: pretty; }
.sec-empty { color: var(--text-subtle); font-size: 13.5px; margin: 0; }

.sec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sec-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px; color: var(--text-body);
}
.sec-list a:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.sec-list-label { min-width: 0; }

/* ── Public-share panel ─────────────────────────────────────────────────── */

.arrived { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; padding: 28px; }
.arrived-main { display: flex; flex-direction: column; gap: 14px; }
.arrived-eyebrow { color: var(--accent); margin: 0; }
.arrived-title { margin: 0; }
.arrived-text { margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.7; color: var(--text-body); text-wrap: pretty; }
.arrived-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.arrived-side { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; border-left: 1px solid var(--border); }
.arrived-breakdown { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.arrived-breakdown li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-body); }
.arrived-openness { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ── Article ────────────────────────────────────────────────────────────── */
/* .doc / .doc__col / .doc__article / .doc__toc are primitives: 70ch measure,
   TOC dropped below 1200, extra width to the margins. */

.article-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--accent); margin: 0; }
.article-eyebrow a { color: var(--accent); }
.article-eyebrow span[aria-hidden] { color: var(--border-strong); }
.article-title { margin: 0; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.article-tools { display: flex; gap: 10px; }
.article-lede { margin: 0; font-size: 18px; line-height: var(--leading-body); color: var(--text-body); }

.doc-body { display: flex; flex-direction: column; gap: 26px; }

.doc-h { font-family: var(--font-display); font-weight: 600; margin: 0; scroll-margin-top: calc(var(--header-h) + 12px); }
.doc-h2 { font-size: 27px; line-height: 1.2; letter-spacing: 0.005em; }
.doc-h3 { font-size: 22px; line-height: 1.25; }
.doc-h4 { font-size: 18px; line-height: 1.3; }
/* A quiet mono wayfinding mark, not a heading tier — aria-hidden in the markup. */
.doc-h-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-line); margin-right: 10px; }

.doc-p { margin: 0; font-size: 17px; line-height: var(--leading-body); color: var(--text-body); text-wrap: pretty; }
.doc-list { margin: 0; padding-left: 22px; font-size: 17px; line-height: var(--leading-body); color: var(--text-body); }
.doc-list li { margin-bottom: 7px; }

.doc-callout-title { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.doc-callout-text { margin: 0; }

.doc-figure { margin: 0; }
.doc-img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); display: block; }
.doc-caption { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }

.doc-video { position: relative; }
.doc-video-play { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.doc-video-poster { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.doc-video-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; color: var(--accent-fg); text-shadow: var(--shadow-overlay); }

.doc-mermaid { overflow-x: auto; }
.doc-table-wrap { overflow-x: auto; }

.doc-code-copy {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle);
}
.doc-code-copy:hover { color: var(--accent); }

.doc-accordion { display: flex; flex-direction: column; gap: 1px; }
.doc-accordion-item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); }
.doc-accordion-item summary { padding: 12px 14px; cursor: pointer; font-size: 14.5px; color: var(--text); }
.doc-accordion-body { padding: 0 14px 14px; color: var(--text-body); font-size: 14.5px; line-height: 1.7; }

.doc-file {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
}
.doc-file:hover { border-color: var(--accent); color: var(--accent); }
.doc-file-size { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }

.doc-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }
.doc-html { font-size: 15px; line-height: 1.7; color: var(--text-body); }
.doc-block--unknown {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 15px;
  color: var(--text-subtle);
  font-size: 14.5px;
}

/* The edit log: understated, at the END of the article, not competing. */
.doc-meta {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-subtle);
  font-family: var(--font-mono); font-size: 11px;
}
.doc-meta p { margin: 0 0 4px; }

/* ── Table of contents ──────────────────────────────────────────────────── */

.toc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.toc-list li { margin-bottom: 2px; }
.toc-list a {
  display: block; padding: 5px 10px;
  border-left: 2px solid transparent;
  font-size: 13px; color: var(--text-muted);
}
.toc-list a:hover { color: var(--text); }
/* Locked headings are listed, in --text-subtle. The heading text is what tells
   somebody whether signing in is worth it. */
.toc-locked { padding: 5px 10px; font-size: 13px; color: var(--text-subtle); }
.toc-note { margin: 10px 0 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); }

/* ── The lock manifest ──────────────────────────────────────────────────── */
/* Not a blur. The content behind this was never sent; this panel is a
   statement of what exists, so signing in is an informed decision. */

.manifest {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  padding: 22px;
}
.manifest-head { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.manifest-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0; }
.manifest-progress { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
.manifest-list { list-style: none; margin: 0 0 16px; padding: 0; }
.manifest-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 40px;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
}
.manifest-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.manifest-detail { color: var(--text-body); min-width: 0; }
.manifest-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); text-align: right; }
.manifest-note { font-size: 14.5px; color: var(--text-muted); margin: 0 0 14px; }
.manifest-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Course screens ─────────────────────────────────────────────────────── */

.course-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--toc-w); align-items: start; min-width: 0; }
.course-main { padding: 44px 40px 80px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.course-rail { padding: 44px 20px 40px; border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 26px; }
.rail-block { display: flex; flex-direction: column; gap: 10px; }
.rail-note { margin: 0; color: var(--text-muted); font-size: 14px; line-height: var(--leading-body); }

.instructor-list { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--text-body); }
.instructor-list li { padding: 5px 0; border-bottom: 1px solid var(--border-subtle); }
.instructor-list li:last-child { border-bottom: 0; }
.instructor-rank { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); margin-right: 6px; }

.course-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
/* The one sentence saying what is outstanding and whose move it is. */
.course-blocking { margin: 0; color: var(--text-muted); font-size: 14.5px; }

/* Two tracks side by side, split by a rule, never merged into one number. */
.track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.track { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.track + .track { border-left: 1px solid var(--border-subtle); }
.track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.track-title { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.track-count { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); white-space: nowrap; }
.track-note { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ── Module rows ────────────────────────────────────────────────────────── */

.mod-section { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mod-list { list-style: none; margin: 0; padding: 0; }
.mod {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.mod:last-child { border-bottom: 0; }
.mod-mark { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); text-align: center; padding-top: 3px; }
.mod-body { min-width: 0; }
.mod-title { margin: 0; font-size: 15.5px; color: var(--text); }
.mod-title a { color: var(--text); border-bottom: 1px solid var(--accent-line); }
.mod-title a:hover { color: var(--accent); }
.mod-optional { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); margin-left: 8px; }
.mod-objective { margin: 5px 0 0; color: var(--text-body); font-size: 14px; line-height: var(--leading-body); }
.mod-meta { margin: 5px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
/* Shown, never quietly reset. Somebody who was signed off and then was not
   needs to see that it happened. */
.mod-revoked { margin: 5px 0 0; font-size: 13px; color: var(--state-failed-fg); }
.mod-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mod-by { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); }

/* ── Course index ───────────────────────────────────────────────────────── */

.course-index { display: flex; flex-direction: column; gap: 38px; }
.course-group { display: flex; flex-direction: column; gap: 12px; }
.course-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.course-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.course-card-link { color: inherit; display: block; }
.course-card-qual { color: var(--accent); margin: 0 0 6px; }
.course-card-title { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text); }
.course-card-link:hover .course-card-title { color: var(--accent); }
.course-card-summary { margin: 6px 0 0; color: var(--text-muted); font-size: 14px; line-height: var(--leading-body); }
.course-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
/* Theory and practical counted separately here too. */
.course-card-tracks { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); white-space: nowrap; }

/* ── Editor ───────────────────────────────────────────── */
/* Three columns: what you can add, what you are editing, what it will look
   like. The palette and the preview are both reference material, so they sit
   either side of the one column that takes typing. Page settings collapse into
   the middle column rather than holding a fourth region open for something
   edited once a month. */

.ed-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ed-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-header-grad, var(--surface-raised));
  flex: none;
}
.ed-bar-left, .ed-bar-right { display: flex; align-items: center; gap: 10px; }
.ed-status { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
.ed-status--dirty { color: var(--state-progress-fg); }
.ed-status--ok    { color: var(--state-complete-fg); }
.ed-status--error { color: var(--state-failed-fg); }
.ed-summary { min-width: 260px; }

.ed-grid {
  display: grid;
  /* rail | editor | splitter | preview.

     The preview width is a custom property so the splitter can set it without
     touching the template, and it falls back to a clamp that scales with the
     window. A fixed 360px preview wraps an article that will really be read at
     70ch into roughly half the line length, so every line break it showed was
     a lie about the published page. */
  grid-template-columns:
    300px
    minmax(0, 1fr)
    var(--ed-split-w, 7px)
    var(--ed-preview-w, clamp(400px, 30vw, 660px));
  flex: 1; min-height: 0;
}

/* The splitter. A hairline at rest so it reads as the seam between two panes
   rather than as furniture, widening to the accent while grabbed. */
.ed-split {
  position: relative;
  cursor: col-resize;
  background: var(--border);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;   /* the drag must not fight the page scroll */
}
.ed-split:hover,
.ed-split:focus-visible { background: var(--accent-line); }
.ed-split[data-dragging="true"] { background: var(--accent); }

/* A short grip mark, centred, so the seam is discoverable without hovering
   every vertical line on the screen to find out which one moves. */
.ed-split-grip {
  width: 3px; height: 34px;
  border-radius: var(--radius-pill, 999px);
  background: var(--border-strong);
  pointer-events: none;
}
.ed-split:hover .ed-split-grip,
.ed-split[data-dragging="true"] .ed-split-grip { background: var(--accent-fg); }

/* While dragging, stop the pointer selecting text across the panes and keep
   the resize cursor even when it strays off the 7px handle. */
.ed-grid[data-resizing="true"] { cursor: col-resize; user-select: none; }
.ed-col { padding: 18px; overflow-y: auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Extra width goes to the margins, not into the fields. A paragraph textarea
   1500px wide is harder to write in than one at a readable measure, and the
   same principle already governs the article column. */
.ed-col--main > * { width: 100%; max-width: 900px; align-self: center; }
/* The preview shows the article at its own measure, so what it wraps is what
   the published page wraps. */
.ed-col--preview #preview { max-width: var(--measure); }
.ed-col--rail { border-right: 1px solid var(--border); }
.ed-col--preview { border-left: 1px solid var(--border); }
.ed-panel { display: flex; flex-direction: column; gap: 10px; }
.ed-panel--grow { flex: 1; min-height: 0; }
.ed-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ed-field { display: flex; flex-direction: column; gap: 6px; }
.ed-field-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.ed-empty { color: var(--text-subtle); font-size: 13.5px; margin: 0; }

/* Palette: chips rather than a dropdown, so every type is visible at once,
   one click away, and draggable to a position instead of only appending. */
.ed-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  color: var(--text-body);
  font-family: var(--font-body); font-size: 13px;
  cursor: grab;
}
.ed-chip:hover { border-color: var(--accent); color: var(--accent); }
.ed-chip:active { cursor: grabbing; }

/* Outline: the shape of a long page, readable without scrolling the surface. */
.ed-outline { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.ed-outline-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.ed-outline-row:hover { background: rgba(255, 255, 255, 0.03); }
.ed-outline-row--on { border-color: var(--accent-line); background: var(--accent-tint); }
.ed-outline-row[data-dragging="true"] { border-color: var(--accent); box-shadow: var(--shadow-overlay); }
.ed-outline-body {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.ed-outline-kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); }
.ed-outline-text { font-size: 13px; color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-outline-moves { display: flex; gap: 3px; }
/* Smaller than the 36px quiz control, because this is a dense authoring rail
   rather than something used one-handed on a phone. Still always rendered. */
.ed-outline-moves .movebtn { width: 24px; height: 24px; font-size: 10px; }

/* Per-block visibility, readable straight down the outline. The most
   consequential property a block has and the easiest to lose on a long page. */
.ed-tag {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 5px; border-radius: var(--radius-xs); border: 1px solid;
}
.ed-tag--pub { color: var(--state-public-fg);  border-color: var(--state-public-border);  background: var(--state-public-bg); }
.ed-tag--mbr { color: var(--state-members-fg); border-color: var(--state-members-border); background: var(--state-members-bg); }

/* Editing surface */
.ed-settings {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised-grad, var(--surface-raised));
}
.ed-settings > summary {
  padding: 11px 14px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.ed-settings[open] > summary { border-bottom: 1px solid var(--border-subtle); color: var(--accent); }
.ed-settings .ed-panel { padding: 14px; }

.ed-surface { display: flex; flex-direction: column; }

.ed-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised-grad, var(--surface-raised));
}
/* The selected block gets the accent border and header. Everything else stays
   a quiet card, so the eye lands on the thing being typed into. */
.ed-block--on { border-color: var(--accent); }
.ed-block--on .ed-block-head { background: var(--accent-tint); }
.ed-block-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ed-block-num { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.ed-block-kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); flex: 1; }
.ed-block-tools { display: flex; gap: 4px; }
.ed-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-size: 12px; cursor: pointer;
}
.ed-icon:hover { border-color: var(--accent); color: var(--accent); }
.ed-block-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ed-vis { max-width: 130px; }
/* A number is two or three characters. A full-width box for it just makes the
   form look unfinished. */
.ed-num { max-width: 120px; }

/* A tick is a tick: square, small, beside its label. It must never take the
   .input treatment, which would give it a 44px min-height and render it as a
   large empty box that reads as a broken image. */
.ed-field--inline { flex-direction: row; align-items: center; gap: 9px; }
.ed-field--inline .ed-field-label { margin: 0; }
.tick-input {
  width: 16px; height: 16px; flex: none; margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* A dashed target between blocks. Deliberately short at rest so a long page
   does not become mostly dropzone, and it grows when something is over it. */
.ed-drop {
  height: 14px;
  margin: 4px 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: transparent;
  transition: height .12s, color .12s, border-color .12s;
}
.ed-surface:hover .ed-drop { border-color: var(--border-subtle); }
.ed-drop--over {
  height: 44px;
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}

@media (max-width: 1399px) {
  /* The preview is the first thing to go: it is reference, and the outline is
     navigation. Losing navigation on a long page is worse. The splitter goes
     with it, since there is nothing left to resize. */
  .ed-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .ed-col--preview, .ed-split { display: none; }
}
@media (max-width: 899px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-col--rail { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ── Revision history ───────────────────────────────────────────────────── */

.rev-list { list-style: none; margin: 0; padding: 0; }
.rev { padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.rev-head { display: flex; align-items: baseline; gap: 10px; }
.rev-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.rev-summary { margin: 4px 0 0; font-size: 14.5px; color: var(--text); }
.rev-author, .rev-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }

/* ── Responsive, app layer only ─────────────────────────────────────────── */
/* The three tiers themselves live in primitives.css. These are the screens
   that file does not know about. */

@media (max-width: 1199px) {
  .course-layout { grid-template-columns: minmax(0, 1fr); }
  .course-rail { border-left: 0; border-top: 1px solid var(--border); padding: 24px 40px 40px; }
}
@media (max-width: 1099px) {
  .lib-main { padding: 44px 32px 64px; }
  .lib-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .arrived { grid-template-columns: minmax(0, 1fr); }
  .arrived-side { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 18px; }
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .sec-grid { grid-template-columns: minmax(0, 1fr); }
  .track-grid { grid-template-columns: minmax(0, 1fr); }
  .track + .track { border-left: 0; border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 719px) {
  .lib-main { padding: 28px 18px 56px; }
  .course-main { padding: 24px 18px 56px; }
  .course-rail { padding: 20px 18px 40px; }
  .mod { grid-template-columns: 26px minmax(0, 1fr); }
  .mod-state { grid-column: 2; align-items: flex-start; }
  .manifest-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .manifest-kind { grid-column: 1; }
  .manifest-detail { grid-column: 1; }
}

/* ── Instructor ─────────────────────────────────────────────────────────── */

.queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.queue-row:last-child { border-bottom: 0; }
.queue-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.queue-name { font-size: 14.5px; color: var(--text); }
.queue-what { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); }
.queue-age { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
/* Stale is information, not decoration: this entry is a member who cannot
   finish and does not know why. */
.queue-age--stale { color: var(--state-failed-fg); }

/* ── Sheets: sign off and waive ─────────────────────────────────────────── */
/* Designed at 390px first. Instructors do this on a phone right after an op
   ends, so on a phone the panel is the whole screen and the primary action is
   52px. On a desktop it is a centred dialog. */

.sheet { position: fixed; inset: 0; z-index: 40; display: flex; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); }
.sheet__panel {
  position: relative;
  margin: auto;
  width: min(520px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  overflow-y: auto;
}
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
/* Sign-off is amber: an ordinary, expected action. */
.sheet__head--sign { background: var(--accent-tint); border-bottom-color: var(--accent-line); }
.sheet__head--sign .t-eyebrow { color: var(--accent); }
/* Waive is tan and hatched, the same treatment the record will carry forever. */
.sheet__head--waive {
  border-bottom-color: var(--state-pending-border);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--state-pending-fg) 10%, transparent) 0 6px,
    color-mix(in srgb, var(--state-pending-fg) 3%, transparent) 6px 12px);
}
.sheet__head--waive .t-eyebrow { color: var(--state-pending-fg); }

.sheet__close {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.sheet__close:hover { color: var(--text); }

.sheet__body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.sheet__member {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
}
.sheet__name { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text); }
.sheet__task {
  min-height: 46px; padding: 12px 14px;
  border: 1px solid var(--accent-line);
  background: var(--accent-tint);
  border-radius: var(--radius-md);
  font-size: 14.5px; color: var(--text);
}
.sheet__foot {
  margin: 0;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6;
  color: var(--text-subtle); text-align: center;
}
.sheet__meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Long enough that 200 characters does not look like an unreasonable ask. */
.sheet__justification { min-height: 140px; }

@media (max-width: 719px) {
  .sheet__panel { width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .queue-row { grid-template-columns: minmax(0, 1fr) auto; }
  .queue-age { grid-column: 2; }
  .queue-row .btn { grid-column: 1 / -1; }
}

/* ── My training ────────────────────────────────────────────────────────── */

/* The two tracks on a card: side by side, split by a rule, never merged. */
.mini-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mini-track { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mini-track + .mini-track { padding-left: 14px; border-left: 1px solid var(--border-subtle); }
.mini-track .t-meta { margin: 0; }

.waived-panel { display: flex; flex-direction: column; gap: 1px; }
/* Tan, dashed and hatched, the same treatment the record carries forever. */
.waived-row {
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--state-pending-fg) 40%, transparent);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--state-pending-fg) 8%, transparent) 0 6px,
    color-mix(in srgb, var(--state-pending-fg) 3%, transparent) 6px 12px);
  display: flex; flex-direction: column; gap: 7px;
}
.waived-row + .waived-row { margin-top: 10px; }
.waived-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.waived-row .t-meta { margin: 0; }
.waived-row .doc-accordion-item { background: transparent; border-color: var(--state-pending-border); }

.qual-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.qual {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.qual-code {
  display: grid; place-items: center;
  height: 34px;
  border: 1px solid var(--accent-line);
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
}
.qual-body { min-width: 0; }
.qual-title { margin: 0 0 3px; font-size: 14.5px; color: var(--text); }
.qual .t-meta { margin: 0; }

/* ── Service record ─────────────────────────────────────────────────────── */
/* Fixed-width ledger. It does NOT reflow: on a narrow screen it scrolls
   sideways inside its own container, because a transcript that rearranges
   itself to fit a phone stops being a record. */

.record-page { padding: 44px 40px 80px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.record { overflow-x: auto; }
.record > * { min-width: 900px; }

.record-head { border-top: 2px solid var(--accent); padding-top: 16px; margin-bottom: 20px; }
.record-kicker { color: var(--accent); margin: 0 0 10px; }
.record-name {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 32px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.record-line { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.record-generated { margin: 6px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }

.record-table { table-layout: auto; }
.record-sub { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); margin-top: 3px; }

.record-foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.record-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-body); }
/* An empty rule to sign against on a printed copy. */
.record-sig { height: 40px; border-bottom: 1px solid var(--border-strong); margin: 12px 0 6px; }
.record-actions { display: flex; gap: 10px; }

@media (max-width: 719px) {
  .record-page { padding: 24px 18px 56px; }
  .mini-tracks { grid-template-columns: minmax(0, 1fr); }
  .mini-track + .mini-track { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
  .record-foot { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  /* One page. The scroller and its min-width would force a second sheet. */
  .record { overflow: visible; }
  .record > * { min-width: 0; }
  .record-actions, .site-footer { display: none !important; }
  .record-page { padding: 0; }
}

/* ── Quizzes ────────────────────────────────────────────────────────────── */

.quiz-page { padding: 44px 40px 80px; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.quiz-head { display: flex; flex-direction: column; gap: 10px; }
.quiz-head .t-meta, .quiz-head h1 { margin: 0; }

.quiz-bar { display: flex; flex-direction: column; gap: 8px; }
.quiz-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* The bar is navigation, not decoration: one segment per question, clickable. */
.segments button { border: 0; padding: 0; cursor: pointer; }
.segments button:hover { outline: 1px solid var(--accent-line); }

.quiz-form { display: flex; flex-direction: column; }
.quiz-q { display: flex; flex-direction: column; gap: 16px; }
.quiz-q-head { display: flex; align-items: center; gap: 12px; }
/* A question always carries its number and points, both amber. A poll carries
   neither, which is how the two are told apart at a glance. */
.quiz-q-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.quiz-q-points { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); }
.quiz-flag {
  margin-left: auto;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 4px 9px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.quiz-flag[aria-pressed="true"] { border-color: var(--state-progress-border); color: var(--state-progress-fg); background: var(--state-progress-bg); }

.quiz-prompt { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text); }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-alt { margin: 0; }

.quiz-order { display: flex; flex-direction: column; gap: 8px; }
.quiz-order .dragrow { grid-template-columns: 26px 30px minmax(0, 1fr) 84px; }
.quiz-order-n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.quiz-order-label { min-width: 0; font-size: 14.5px; color: var(--text-body); }
/* Always rendered, never hover-revealed, 36px each. */
.quiz-order-moves { display: flex; gap: 6px; }

.quiz-match { display: flex; flex-direction: column; gap: 14px; }
.quiz-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.quiz-chip {
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--text-body);
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
  touch-action: none;
}
.quiz-chip--selected { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.quiz-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.quiz-bucket { flex-direction: column; gap: 8px; padding: 14px; min-height: 96px; }
.quiz-bucket-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.quiz-bucket-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-subtle); text-transform: none; letter-spacing: 0; opacity: 0; }
/* The prompt only appears once a chip is waiting to be placed. */
.quiz-bucket--target .quiz-bucket-hint { opacity: 1; }
.quiz-bucket--target { border-style: dashed; border-color: var(--accent); }

.quiz-short { min-height: 140px; }
.quiz-nav { display: flex; gap: 10px; flex-wrap: wrap; }

.quiz-review { display: flex; flex-direction: column; gap: 14px; }
.quiz-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.quiz-tile {
  min-height: 52px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 12px; cursor: pointer;
}
.quiz-tile--answered { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent); }
.quiz-tile--flagged { border-color: var(--state-progress-border); background: var(--state-progress-bg); color: var(--state-progress-fg); }
/* A blank is the one state worth alarming about before submitting. */
.quiz-tile--blank { border: 1px dashed var(--state-failed-border); color: var(--state-failed-fg); }
.quiz-submit { display: flex; flex-direction: column; gap: 8px; }

/* ── Quiz results ───────────────────────────────────────────────────────── */

.result-head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; }
.result-figure { display: flex; flex-direction: column; gap: 2px; }
.result-percent { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; }
.result-verdict { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.result-bar { display: flex; flex-direction: column; gap: 8px; }
.result-bar .t-meta { margin: 0; }

.result-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.result-count {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised);
}
.result-count-n { font-family: var(--font-display); font-weight: 600; font-size: 26px; }

.result-questions { display: flex; flex-direction: column; gap: 10px; }
.result-q { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); }
.result-q summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; }
.result-q-title { flex: 1; min-width: 0; font-size: 14.5px; color: var(--text); }
.result-q-body { padding: 0 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.result-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); margin-left: 8px; }
.result-explanation { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-body); }
.result-order { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--text-body); }
.result-order--right { color: var(--state-complete-fg); }
.result-order--wrong { color: var(--state-failed-fg); }
.result-written { padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-sunken); display: flex; flex-direction: column; gap: 6px; }
.result-written-text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-body); white-space: pre-wrap; }

@media (max-width: 719px) {
  .quiz-page { padding: 24px 18px 56px; }
  /* The review grid steps 5 to 3, per the phone tier. */
  .quiz-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-head { grid-template-columns: minmax(0, 1fr); }
  .result-counts { grid-template-columns: minmax(0, 1fr); }
  .quiz-order .dragrow { grid-template-columns: 24px 26px minmax(0, 1fr) 84px; }
}

/* ── Authoring: content index, diff, contributions ──────────────────────── */

/* A row you cannot act on keeps full contrast and simply has no controls.
   Fading it to illegibility punishes the reader for a permission they never
   asked for; the label is what carries the meaning. */
.row--readonly td { background: color-mix(in srgb, var(--surface) 60%, var(--surface-raised)); }

.diff { display: flex; flex-direction: column; gap: 10px; }
/* Block-level changes are full-width bordered strips. */
.diff-block {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.diff-kind {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  min-width: 110px;
}
.diff-note { font-size: 14px; color: var(--text-body); }
.diff-block--inserted { border-color: var(--state-complete-border); background: var(--state-complete-bg); }
.diff-block--removed  { border-color: var(--state-failed-border);   background: var(--state-failed-bg); }
.diff-block--moved    { border-color: var(--tone-note-border);      background: var(--tone-note-bg); }
.diff-block--changed  { border-color: var(--state-progress-border); background: var(--state-progress-bg); }
.diff-block--same     { border-style: dashed; background: transparent; }
.diff-block--same .diff-note { color: var(--text-subtle); }

/* Text-level changes are tinted rows INSIDE the block they belong to, which
   is what makes them read as a different kind of edit from the strips above. */
.diff-lines {
  margin: -4px 0 0 0;
  border: 1px solid var(--border-subtle);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}
.diff-line {
  padding: 6px 14px 6px 24px;
  font-size: 14px; line-height: 1.6;
  color: var(--text-body);
  white-space: pre-wrap;
}
.diff-line--same    { color: var(--text-muted); }
.diff-line--removed { background: var(--state-failed-bg); border-left: 3px solid var(--state-failed-fg); padding-left: 21px; }
.diff-line--added   { background: var(--state-complete-bg); border-left: 3px solid var(--state-complete-fg); padding-left: 21px; }

.submission { padding: 4px 0 16px; border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 12px; }
.submission:last-child { border-bottom: 0; }
.submission-quote {
  margin: 0 16px;
  padding: 10px 14px;
  border-left: 2px solid var(--accent-line);
  background: var(--surface-sunken);
  font-size: 14px; line-height: 1.7; color: var(--text-muted);
}
.submission .field, .submission .result-written-text { margin: 0 16px; }
.submission-note {
  margin: 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  display: flex; flex-direction: column; gap: 6px;
}
.review-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 16px; }
.submission .js-error { margin: 0 16px; }

/* ── Search ─────────────────────────────────────────────────────────────── */

.search-form { display: flex; gap: 10px; max-width: 620px; }
.search-form .input { flex: 1; min-width: 0; }

.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.search-result {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 6px;
}
.search-result:last-child { border-bottom: 0; }
.search-result-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text); }
.search-result-title:hover { color: var(--accent); }
.search-result-summary { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }
.search-result-snippet { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-body); }
/* The match itself. A tint rather than a highlighter block, so a snippet with
   several hits still reads as a sentence. */
.search-result-snippet mark {
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0 3px;
}
.search-result .t-meta { margin: 0; }

/* The award panel sits on the page surface, not inside a card, because a
   callout's label notch is punched with --surface and breaks on a raised one. */
.award-panel { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* A question almost everybody gets wrong. Flagged for reading, not condemned. */
.row--outlier td { background: var(--state-progress-bg); }
.row--outlier td:first-child { border-left: 2px solid var(--state-progress-fg); }

/* ── Polls ──────────────────────────────────────────────────────────────── */
/* Blue, circular and unnumbered, so a poll is never mistaken for something
   being marked. A quiz question is amber, lettered and carries a point value;
   none of that appears here. */

.poll {
  border: 1px solid var(--tone-note-border);
  border-radius: var(--radius-lg);
  background: var(--tone-note-bg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.poll__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.poll__kind {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tone-note-fg);
}
/* The anonymity promise, made before anybody votes and never as a surprise. */
.poll__who {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 2px 7px;
}
.poll__who--anon { border-style: dashed; }

.poll__question { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.poll__hint { margin: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); }
.poll__options { display: flex; flex-direction: column; gap: 8px; }

.poll__choice {
  display: flex; align-items: center; gap: 11px;
  min-height: 48px; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised);
  text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; color: var(--text-body);
}
.poll__choice:hover { border-color: var(--tone-note-border); }
/* Blue when chosen, not amber. Amber is for things being marked. */
.poll__choice[aria-checked="true"] { border-color: var(--tone-note-fg); background: var(--tone-note-bg); color: var(--text); }
.poll__choice[aria-checked="true"] .dot { border-color: var(--tone-note-fg); background: var(--tone-note-fg); }

.poll__row { display: flex; flex-direction: column; gap: 5px; }
.poll__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.poll__label { font-size: 14.5px; color: var(--text-body); }
.poll__mine {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tone-note-fg); margin-left: 8px;
}
/* The count AND the percentage. A percentage alone hides that 67% was two
   people out of three. */
.poll__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.poll__bar { height: 8px; background: var(--segment-empty); }
.poll__fill { height: 100%; background: var(--tone-note-fg); }
.poll__row--mine .poll__fill { background: var(--tone-note-fg); }

.poll__foot { margin: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); }
.poll__submit { align-self: flex-start; }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
/* The browser default is a light grey bar that sits on top of a near-black
   page and reads as the brightest thing on screen, which is exactly backwards
   for a chrome element. Every value here comes from the theme, so a repaint
   carries the scrollbars with it.

   Both syntaxes: the standard two-value `scrollbar-color` for Firefox, and the
   webkit pseudo-elements for everything else. */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  /* The border is what makes the thumb read as inset rather than as a bar
     laid over the content. It has to match the surface behind it, so it uses
     a transparent border with background-clip rather than a colour that would
     be wrong on a raised panel. */
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill, 999px);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-line); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }
/* Where two scrollbars meet, so the square is not a bright default grey. */
::-webkit-scrollbar-corner { background: transparent; }

/* ── Library structure and permissions ──────────────────────────────────── */

.manage-new { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.manage-new .btn { align-self: flex-start; }

.manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.manage-row:last-child { border-bottom: 0; }
.manage-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.manage-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.manage-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text); }
.manage-blurb { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.manage-row .t-meta { margin: 0; }
.manage-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 719px) {
  .manage-row { grid-template-columns: minmax(0, 1fr); }
  .manage-actions { justify-content: flex-start; }
}

/* Sub-guides listed under their parent in the category view. */
.sub-list { list-style: none; margin: 8px 0 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 6px; }
.sub-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
a.manage-title { color: var(--text); }
a.manage-title:hover { color: var(--accent); }

/* Sub-categories named inside their parent's card rather than given their own. */
.sec-children { margin: 0; color: var(--text-subtle); }

/* ── Section links in the rail ──────────────────────────────────────────── */
/* The open page's own headings, indented past the sub-guides so the hierarchy
   stays readable: category, page, sub-guide, section. Present at every width
   the rail is, which is what makes them useful on a tablet where the
   right-hand panel is dropped. */

.nav__anchor {
  display: block;
  margin-left: 22px;
  padding: 4px 10px;
  border-left: 1px solid var(--border-subtle);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-subtle);
}
.nav__anchor:hover { color: var(--text-body); border-left-color: var(--border-strong); }
/* Scrollspy: the section currently under the reader. A tick in the margin,
   the same language the active nav item uses. */
.nav__anchor[aria-current="true"] {
  border-left-color: var(--accent);
  color: var(--accent);
}
/* A locked heading is listed and greyed. The heading text is what tells
   somebody whether signing in is worth it. */
.nav__anchor--locked { color: var(--text-subtle); opacity: 0.6; pointer-events: none; }
.nav__empty { color: var(--text-subtle); font-style: italic; }

/* ── Rail corrections ───────────────────────────────────────────────────── */
/* .nav__sub in primitives.css sets its indent, rule and type but never a
   display, so it stays inline: several sub-items run together on one line and
   wrap mid-title. It is an omission in the primitive rather than a style
   choice, so it is corrected here rather than by editing a drop-in file.

   .nav__item is NOT touched beyond letting long words break. It declares its
   own 44px minimum for touch, and overriding that to make wrapped items sit
   tighter would quietly drop every single-line item below the target size the
   design sets. */

.nav__sub { display: block; }

/* "11B-B1 Heavy Weapon Systems course" does not fit a 260px rail on one line
   at any size worth reading, so the choice is wrapping or truncation, and a
   truncated handbook title in a list of handbooks is unusable. */
.nav__item,
.nav__sub,
.nav__anchor { overflow-wrap: break-word; line-height: 1.45; }

/* ── Moving pages between categories ────────────────────────────────────── */

.page-list { list-style: none; margin: 10px 0 0; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  border: 1px dashed transparent; border-radius: var(--radius-md); }
/* The drop target only announces itself while something is being dragged, so
   the screen is not covered in dashed boxes at rest. */
.page-list--over { border-color: var(--accent); background: var(--accent-tint); }

.page-row {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 13.5px;
}
.page-row[data-dragging="true"] { border-color: var(--accent); box-shadow: var(--shadow-overlay); }
.page-row .dragrow__handle { cursor: grab; }
.page-title { color: var(--text); min-width: 0; overflow-wrap: break-word; }
.page-title:hover { color: var(--accent); }
/* Narrow, because it is a mover rather than a form field. */
.js-move-page { max-width: 190px; min-height: 32px; padding: 4px 8px; font-size: 12.5px; }
.page-nudge { display: flex; gap: 3px; }
.page-nudge .movebtn { width: 26px; height: 26px; font-size: 11px; }
.page-empty { padding: 8px 9px; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-subtle); letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 899px) {
  .page-row { grid-template-columns: 18px minmax(0, 1fr); }
  .page-nudge { grid-column: 2; }
  .page-row .pill, .js-move-page { grid-column: 2; }
}

/* A sub-category is indented under its parent, so the up and down buttons
   visibly move it among its own siblings rather than appearing to do nothing
   in a flat list. */
.manage-cat--nested { padding-left: 34px; border-left: 2px solid var(--border-subtle); }