/* 91DA review tool.
 *
 * No CDN, no webfont fetch, no build step — this runs on a tailnet with no
 * internet. Every face below is either already on the machine or a system
 * fallback.
 *
 * The material is comment cards: a printed italic-serif prompt over a ruled
 * writing area. So the card's own language is set in a serif, the interface
 * around it in a system sans, and every identifier in monospace. One accent —
 * printer's red — and it means refusal. Nothing else is allowed to use it.
 */

:root {
  /* ---- palette (light) ------------------------------------------- */
  --paper:      #FCFCFA;
  --raised:     #FFFFFF;
  --sunk:       #F4F4F1;
  --ink:        #141414;
  --rule:       #D8D6D0;
  --rule-soft:  #E8E6E1;
  --muted:      #6B6862;

  --red:        #B3251E;   /* refusal / block ONLY */
  --red-wash:   #FBEFEE;
  --green:      #1F5C3D;
  --green-wash: #EFF5F1;
  --amber:      #8A6A16;
  --amber-wash: #FAF4E4;

  --focus:      #141414;
  --shadow:     0 1px 2px rgba(20, 20, 20, .06);

  /* ---- type ------------------------------------------------------ */
  --serif: "Iowan Old Style", Palatino, "Palatino Linotype",
           "Book Antiqua", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;

  --t-xs:   11.5px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   21px;
  --t-xl:   27px;

  --lh-tight: 1.25;
  --lh-base:  1.5;
  --lh-read:  1.62;

  --rail-h: 40px;
  --gap: 14px;
}

/* Reviewers work at night. Both the media query (system setting) and the
   attribute (explicit toggle) must be able to win, in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #131311;
    --raised:     #1B1B18;
    --sunk:       #0E0E0D;
    --ink:        #ECEAE4;
    --rule:       #34332E;
    --rule-soft:  #26251F;
    --muted:      #9C978C;

    --red:        #E4655C;
    --red-wash:   #2B1614;
    --green:      #6FBF95;
    --green-wash: #13221A;
    --amber:      #D8AE55;
    --amber-wash: #241E10;

    --focus:      #ECEAE4;
    --shadow:     0 1px 2px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --paper:      #131311;
  --raised:     #1B1B18;
  --sunk:       #0E0E0D;
  --ink:        #ECEAE4;
  --rule:       #34332E;
  --rule-soft:  #26251F;
  --muted:      #9C978C;

  --red:        #E4655C;
  --red-wash:   #2B1614;
  --green:      #6FBF95;
  --green-wash: #13221A;
  --amber:      #D8AE55;
  --amber-wash: #241E10;

  --focus:      #ECEAE4;
  --shadow:     0 1px 2px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-base)/var(--lh-base) var(--sans);
  -webkit-font-smoothing: antialiased;
}

code, pre, .mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }

a { color: var(--ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================== the top rail ==== */
header.rail {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--rail-h);
  padding: 0 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}
header.rail .brand {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
header.rail a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
header.rail a:hover { color: var(--ink); }
header.rail a.on {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
header.rail .spacer { flex: 1; }
header.rail .who { color: var(--muted); font-size: var(--t-xs); }
.railbtn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--muted);
  font: var(--t-xs)/1 var(--sans);
  padding: 5px 7px;
  cursor: pointer;
}
.railbtn:hover { color: var(--ink); border-color: var(--muted); }

/* Ordinary pages scroll; the item page does not (see .fixed below). */
main { padding: 18px 20px 40px; max-width: 1200px; margin: 0 auto; }
main.wide { max-width: 1600px; }

body.fixed { height: 100vh; height: 100dvh; overflow: hidden; }
body.fixed main { max-width: none; padding: 0; height: calc(100vh - var(--rail-h));
                  height: calc(100dvh - var(--rail-h)); }

/* ==================================================== typography ====== */
h1 { font-size: var(--t-xl); line-height: var(--lh-tight); margin: 0 0 6px;
     font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: var(--t-md); line-height: var(--lh-tight); margin: 22px 0 8px;
     font-weight: 600; }
h3 { font-size: var(--t-xs); margin: 16px 0 6px; text-transform: uppercase;
     letter-spacing: .1em; color: var(--muted); font-weight: 600; }
p { margin: 0 0 10px; }
.lede { font-size: var(--t-md); color: var(--muted); max-width: 62ch;
        line-height: var(--lh-read); margin-bottom: 18px; }
.sub { color: var(--muted); font-size: var(--t-sm); margin: 0 0 12px;
       max-width: 70ch; }
.small { font-size: var(--t-sm); color: var(--muted); }
.tiny { font-size: var(--t-xs); color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ==================================================== surfaces ======== */
.panel {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow);
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: var(--gap); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { text-align: left; padding: 7px 10px;
         border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
     color: var(--muted); font-weight: 600; border-bottom-color: var(--rule); }
tbody tr:hover { background: var(--sunk); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==================================================== buttons ========= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--raised);
  color: var(--ink);
  font: 500 var(--t-base)/1.2 var(--sans);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); background: var(--sunk); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.busy { opacity: .5; cursor: progress; pointer-events: none; }

.btn.go     { border-color: var(--green); color: var(--green); }
.btn.go:hover { background: var(--green-wash); }
.btn.caution { border-color: var(--amber); color: var(--amber); }
.btn.caution:hover { background: var(--amber-wash); }
/* The one place printer's red is allowed: refusing to publish. */
.btn.stop { border-color: var(--red); color: var(--red); }
.btn.stop:hover { background: var(--red-wash); }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid:hover { background: var(--ink); color: var(--paper); opacity: .88; }
.btn.quiet { border-color: transparent; color: var(--muted); }
.btn.quiet:hover { border-color: var(--rule); color: var(--ink); }
.btn.wide { width: 100%; justify-content: flex-start; }

/* The key cap. Visible on every button, because someone doing 300 items
   should learn the keyboard by reading the buttons, not a manual. */
.k {
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1;
  padding: 3px 5px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .65;
}
.btn .k { margin-left: auto; }

input[type=text], input[type=password], input[type=number], select, textarea {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--raised);
  color: var(--ink);
  max-width: 100%;
}
label { font-size: var(--t-sm); color: var(--muted); display: block;
        margin: 8px 0 3px; }

/* ==================================================== state marks ===== */
.pri {
  display: inline-block; padding: 2px 7px; border-radius: 2px;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; border: 1px solid var(--rule); color: var(--muted);
}
.pri.block  { color: var(--red); border-color: var(--red); background: var(--red-wash); }
.pri.urgent { color: var(--amber); border-color: var(--amber); background: var(--amber-wash); }

.st { font-size: var(--t-xs); font-family: var(--mono); color: var(--muted); }
.st.confirmed-verbatim { color: var(--green); }
.st.policy-flag { color: var(--red); }

.pol { font-size: var(--t-sm); font-weight: 600; }
.pol.publish { color: var(--green); }
.pol.publish-with-suppression { color: var(--amber); }
.pol.suppress-item { color: var(--red); }
.pol.escalate { color: var(--amber); }

.tag {
  display: inline-block; padding: 1px 6px; margin: 1px 3px 1px 0;
  font-size: var(--t-xs); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--muted);
}
.note   { border-left: 3px solid var(--rule); padding: 8px 12px;
          background: var(--sunk); font-size: var(--t-sm); }
.alarm  { border-left: 3px solid var(--red); padding: 8px 12px;
          background: var(--red-wash); font-size: var(--t-sm); }
.good   { border-left: 3px solid var(--green); padding: 8px 12px;
          background: var(--green-wash); font-size: var(--t-sm); }

.bar-track { background: var(--rule-soft); border-radius: 2px; height: 4px;
             overflow: hidden; }
.bar-fill  { background: var(--ink); height: 100%; }

/* ================================================ the two-pane deck === */
.deck {
  display: grid;
  grid-template-columns: 62% 38%;
  height: 100%;
  overflow: hidden;
}

/* ---- left: the scan or the recording. The hero. ---- */
.stagepane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sunk);
  border-right: 1px solid var(--rule);
}
.stagebar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  font-size: var(--t-xs);
  flex: 0 0 auto;
}
.stagebar .spacer { flex: 1; }
.stagebar button {
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  color: var(--muted); font: var(--t-xs)/1 var(--sans); padding: 5px 8px;
  cursor: pointer;
}
.stagebar button:hover { color: var(--ink); border-color: var(--muted); }
.stagebar button.on { color: var(--ink); border-color: var(--ink); }
.stagebar .zlabel { font-family: var(--mono); color: var(--muted);
                    min-width: 4ch; text-align: right; }

.stage {
  position: relative; flex: 1 1 auto; overflow: hidden;
  background: var(--sunk); cursor: grab; min-height: 0;
}
.stage.drag { cursor: grabbing; }
.stage img {
  position: absolute; transform-origin: 0 0; user-select: none;
  -webkit-user-drag: none; background: #fff;
  box-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}
.stage .hint {
  position: absolute; right: 10px; bottom: 10px;
  color: var(--muted); background: var(--paper);
  border: 1px solid var(--rule); padding: 3px 8px; border-radius: 3px;
  font-size: var(--t-xs); pointer-events: none;
}
.stage .empty {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 30px;
  color: var(--muted); font-size: var(--t-sm);
}

/* ---- right: evidence, transcript, decision ---- */
.side {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--paper);
}
.sidehead {
  flex: 0 0 auto; padding: 10px 16px 8px;
  border-bottom: 1px solid var(--rule);
}
.sidescroll {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px 18px;
  min-height: 0;
}
.sidefoot {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 0 0 10px;
}

/* progress: "17 of 157" */
.progress { display: flex; align-items: baseline; gap: 10px;
            font-size: var(--t-sm); color: var(--muted); }
.progress b { font-family: var(--mono); font-size: var(--t-base);
              color: var(--ink); font-weight: 600; }

/* ============================================= THE EVIDENCE STRIP ===== */
/* The one loud thing on the page. The quoted line that caused the flag,
   set in the card's own "Label: value" idiom, stamped with a red rule, and
   sitting immediately above the buttons so the reason and the action are
   one glance apart. */
.strip {
  margin: 0;
  padding: 13px 16px 14px;
  background: var(--raised);
  border-top: 3px solid var(--red);
  position: relative;
}
.strip.calm { border-top-color: var(--ink); }
.strip .striplabel {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.strip.calm .striplabel { color: var(--muted); }
.strip .stripline {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.strip .stripline .q {
  font-style: italic;
  color: var(--muted);
}
.strip .stripline .v {
  font-weight: 600;
  color: var(--red);
  font-style: normal;
}
.strip.calm .stripline .v { color: var(--ink); }
.strip .stripmore {
  margin-top: 7px; font-size: var(--t-sm); color: var(--muted);
  max-width: 60ch;
}

/* ===================================== the tickbox question (step 1) === */
/* Measured: 36% of the sampled refusals were misreads — the depositor had
   ticked Yes. Catching that is the reviewer's actual job on this cohort, so
   this control is large, labelled in plain words, and alone on screen until
   it is answered. */
.askline { font-size: var(--t-base); margin: 2px 0 10px; }
.bigrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.btn.big {
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  font-size: var(--t-base);
  line-height: 1.3;
  text-align: left;
  border-width: 2px;
  min-height: 62px;
}
.btn.big .hintline { font-size: var(--t-xs); color: var(--muted);
                     font-weight: 400; }
.btn.big .k { margin-left: 10px; flex: 0 0 auto; }
@media (max-width: 900px) {
  .bigrow { grid-template-columns: 1fr; }
  .btn.big { min-height: 0; }
}

/* the decision row underneath the strip */
.actions { padding: 12px 16px 0; display: grid; gap: 7px; }
.actions [hidden] { display: none !important; }
.actions .row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.actions .row .spacer { flex: 1; }
.actionhead {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 2px;
}

/* ============================================= two-step sequence ====== */
/* Verifying the handwritten tickbox and deciding what to publish are
   separate acts. A reviewer who cannot see that recorded ten identical
   verdicts in 52 seconds, so the sequence is now drawn explicitly. */
.steps { display: grid; gap: 0; margin-bottom: 14px; }
.step {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.step:last-child { border-bottom: 0; }
.stepno {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--rule); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--t-xs);
}
.step.done .stepno { border-color: var(--green); color: var(--green);
                     background: var(--green-wash); }
.step.now .stepno  { border-color: var(--ink); color: var(--paper);
                     background: var(--ink); }
.steptitle { font-weight: 600; font-size: var(--t-base); }
.step.done .steptitle { color: var(--muted); font-weight: 500; }
.stepbody { font-size: var(--t-sm); color: var(--muted); margin-top: 3px; }
.stepdone { color: var(--green); font-size: var(--t-sm); margin-top: 4px; }
.step.waiting { opacity: .55; }

/* ================================================ reading the text ==== */
.transcript {
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: var(--lh-read);
  word-wrap: break-word;
}
.pagemark {
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.pagemark .lbl { font-size: var(--t-xs); text-transform: uppercase;
                 letter-spacing: .1em; font-weight: 600; }
.pagemark .meta { font-family: var(--mono); font-size: var(--t-xs);
                  color: var(--muted); }

mark { padding: 0 1px; background: none; color: inherit; }
mark.hl-flag { background: var(--amber-wash);
               box-shadow: inset 0 -2px 0 var(--amber); }
mark.hl-flag.sev-high { background: var(--red-wash);
                        box-shadow: inset 0 -2px 0 var(--red); }
mark.hl-consent { font-weight: 600; }
mark.hl-consent.consent-no { color: var(--red); background: var(--red-wash);
                             box-shadow: inset 0 -2px 0 var(--red); }
mark.hl-consent.consent-yes { color: var(--green); background: var(--green-wash); }
mark.hl-consent.consent-unclear { background: var(--amber-wash); }
mark.hl-field { box-shadow: inset 0 -1px 0 var(--rule); }
mark.hl-name { box-shadow: inset 0 -1px 0 var(--muted); }
mark.hl-sup { background: var(--sunk); color: var(--muted);
              text-decoration: line-through;
              text-decoration-color: var(--red);
              text-decoration-thickness: 2px; }
mark.hl-sup.lifted { text-decoration: none; outline: 1px dashed var(--rule); }

.quote {
  font-family: var(--serif); font-style: italic;
  border-left: 2px solid var(--rule); padding: 3px 0 3px 10px;
  display: block; white-space: pre-wrap; color: var(--ink);
  font-size: var(--t-base);
}
.kv { display: grid; grid-template-columns: 13ch 1fr; gap: 4px 12px;
      font-size: var(--t-sm); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.kv dd.mono, .mono { font-family: var(--mono); font-size: var(--t-sm); }
.from { color: var(--muted); font-size: var(--t-xs); }

.evidence { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }
.evidence li { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.evidence li:last-child { border-bottom: 0; }
.evidence .cat { font-weight: 600; }

textarea.editor {
  width: 100%; min-height: 300px;
  font: var(--t-base)/1.6 var(--mono);
  padding: 10px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--raised); color: var(--ink);
}
.savebar { display: flex; gap: 8px; align-items: center; margin-top: 6px;
           font-size: var(--t-sm); color: var(--muted); flex-wrap: wrap; }

/* ==================================================== audio =========== */
.player {
  flex: 0 0 auto; padding: 14px 16px;
  border-bottom: 1px solid var(--rule); background: var(--paper);
}
.player audio { width: 100%; height: 36px; display: block; }
.playerhead {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
  font-size: var(--t-sm);
}
.playerhead .name { font-family: var(--mono); font-size: var(--t-xs);
                    color: var(--muted); overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.playerhead .spacer { flex: 1; }
.playerkeys { margin-top: 8px; font-size: var(--t-xs); color: var(--muted);
              display: flex; gap: 12px; flex-wrap: wrap; }

.segments {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: 4px 0 30px; background: var(--sunk);
}
.seg {
  display: grid; grid-template-columns: 7ch 1fr; gap: 12px;
  padding: 7px 16px; cursor: pointer;
  border-left: 3px solid transparent;
  font-family: var(--serif); font-size: var(--t-base);
  line-height: var(--lh-read);
}
.seg:hover { background: var(--rule-soft); }
.seg .t {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
  padding-top: 4px; font-variant-numeric: tabular-nums;
}
.seg.on {
  background: var(--raised); border-left-color: var(--ink);
}
.seg.on .t { color: var(--ink); }
.seg.flagged { border-left-color: var(--red); }
.seg.flagged .t { color: var(--red); }
.seg.on.flagged { background: var(--red-wash); }
.seg .txt { min-width: 0; }
.segempty { padding: 24px 16px; color: var(--muted); font-size: var(--t-sm); }

.audio-jump {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--rule);
  background: var(--paper); font-size: var(--t-sm);
}
.audio-jump button {
  background: none; border: 1px solid var(--red); color: var(--red);
  border-radius: 3px; font: var(--t-xs)/1 var(--mono); padding: 4px 7px;
  cursor: pointer;
}
.audio-jump button:hover { background: var(--red-wash); }

/* ==================================================== toast =========== */
#toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
#toast div {
  background: var(--ink); color: var(--paper);
  padding: 10px 15px; border-radius: 3px;
  font-size: var(--t-sm); max-width: 44ch; line-height: 1.45;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
}
#toast div.err  { background: var(--red); color: #fff; }
#toast div.ok   { background: var(--green); color: #fff; }

/* ==================================================== overlay ========= */
#keys {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(20, 20, 20, .55);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#keys.on { display: flex; }
#keys .sheet {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 24px 28px; max-width: 640px; width: 100%;
  max-height: 86vh; overflow-y: auto;
}
#keys h2 { margin-top: 0; }
#keys dl { display: grid; grid-template-columns: 9ch 1fr; gap: 7px 14px;
           font-size: var(--t-sm); margin: 0 0 18px; }
#keys dt { font-family: var(--mono); color: var(--muted); }
#keys dd { margin: 0; }

/* ==================================================== queue =========== */
.qrow td { padding: 10px; }
.qrow .why { font-size: var(--t-sm); }
.pager { display: flex; gap: 10px; align-items: center; margin: 14px 0;
         font-size: var(--t-sm); }
.cohortcard {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: 4px; padding: 14px;
  background: var(--raised);
}
.cohortcard:hover { border-color: var(--ink); }
.cohortcard .n { font-family: var(--mono); font-size: var(--t-xl);
                 font-weight: 600; line-height: 1; }
.cohortcard .lab { font-size: var(--t-sm); margin: 6px 0 8px; }

/* ==================================================== responsive ====== */
@media (max-width: 1000px) {
  body.fixed { height: auto; overflow: auto; }
  body.fixed main { height: auto; }
  .deck { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .stagepane { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stage { height: 60vh; flex: 0 0 60vh; }
  .segments { max-height: 50vh; }
  .side { min-height: 0; }
  .sidescroll { overflow: visible; }
  .sidefoot { position: sticky; bottom: 0; }
  header.rail { flex-wrap: wrap; height: auto; padding: 6px 12px; gap: 10px; }
}
@media (max-width: 620px) {
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 6px; }
  #keys dl { grid-template-columns: 8ch 1fr; }
}

/* "Hide what I selected" with nothing selected: visibly not ready, but still
   clickable so the explanatory toast can do its job. */
.btn.needsel { opacity: .45; }

/* ============================================== public / not public ===== */
.visswitch { display: inline-flex; border: 1px solid var(--rule);
             border-radius: 3px; overflow: hidden; margin-right: 10px; }
.visswitch a { padding: 3px 10px; font-size: var(--t-xs); text-decoration: none;
               color: var(--muted); border-left: 1px solid var(--rule); }
.visswitch a:first-child { border-left: 0; }
.visswitch a.on { color: var(--ink); background: var(--raised); font-weight: 600; }
.visswitch a.public.on { color: var(--red); background: var(--red-wash); }
.visbadge { display: inline-block; padding: 1px 7px; border-radius: 2px;
            font-size: var(--t-xs); border: 1px solid var(--rule);
            color: var(--muted); white-space: nowrap; }
.visbadge.public { color: var(--red); border-color: var(--red);
                   background: var(--red-wash); font-weight: 600; }
.visbadge.nonpublic { color: var(--muted); }