/* Longhand workbench.
   Manuscript and letterpress: warm paper ground, dark ink, hairlines instead of cards,
   a serif for anything a human wrote and a monospace for anything a machine said.
   One accent — an oxide red — reserved for refusal. */

:root {
  color-scheme: light dark;

  --paper:      #f3ede1;
  --paper-2:    #ece4d3;
  --paper-3:    #e3d9c4;
  --ink:        #221f19;
  --ink-2:      #4b4438;
  --ink-3:      #7c7364;
  --rule:       #cabfa8;
  --rule-soft:  #ded4be;

  --accent:      #9b2a17;
  --accent-ink:  #7d2212;
  --accent-wash: #f2ded6;

  --moss:   #4a6a39;
  --indigo: #2e4a6b;
  --ochre:  #8f6a14;
  --sepia:  #8a7350;
  --grey:   #877f72;

  --focus: #2e4a6b;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --pane-pad: 18px 22px;
  --hair: 1px solid var(--rule);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #16140f;
    --paper-2:    #1d1a14;
    --paper-3:    #24201a;
    --ink:        #e9e1ce;
    --ink-2:      #c2b9a4;
    --ink-3:      #8e8574;
    --rule:       #3b3529;
    --rule-soft:  #2c271e;

    --accent:      #e2735b;
    --accent-ink:  #f0937e;
    --accent-wash: #371d16;

    --moss:   #8fb37a;
    --indigo: #8aabd2;
    --ochre:  #d3a94e;
    --sepia:  #bda37a;
    --grey:   #9a9284;

    --focus: #d9b96a;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: 8px; top: -48px; z-index: 40;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; font-family: var(--mono); font-size: 11px;
  text-decoration: none;
}
.skip:focus { top: 8px; }

/* ------------------------------------------------------------------ masthead */

.masthead {
  flex: none;
  padding: 12px 22px 10px;
  border-bottom: 3px double var(--rule);
  background: var(--paper);
}

.masthead__top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.masthead__spacer { flex: 1 1 auto; }

.wordmark {
  font-size: 23px; letter-spacing: 0.10em; font-variant: small-caps;
  font-weight: 600;
}

.masthead__tag {
  font-style: italic; color: var(--ink-3); font-size: 13.5px;
}

.masthead__title {
  margin: 6px 0 2px; font-size: 17px; font-weight: 500; letter-spacing: 0.01em;
}

.masthead__sub {
  margin: 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase;
}
.masthead__sub code { text-transform: none; letter-spacing: 0; color: var(--ink-2); }

.badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 3px 8px;
  border: var(--hair); color: var(--ink-3); white-space: nowrap;
}
.badge--seeded {
  border-color: var(--ochre); color: var(--ochre);
  background: repeating-linear-gradient(
    -45deg, transparent 0 5px, color-mix(in srgb, var(--ochre) 12%, transparent) 5px 10px);
}
#stream-state[data-state="live"]   { border-color: var(--moss);  color: var(--moss); }
#stream-state[data-state="closed"] { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------ shell */

#workbench { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.queue {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 7px 22px; border-bottom: var(--hair); background: var(--paper-2);
  overflow-x: auto;
}
.queue__label, .queue__counts {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.queue__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }

.chip {
  display: flex; align-items: baseline; gap: 7px;
  padding: 4px 10px; border: var(--hair); text-decoration: none; color: var(--ink-2);
  font-family: var(--mono); font-size: 10px; white-space: nowrap;
  background: var(--paper);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip__no { font-weight: 600; color: var(--ink); }
.chip__state { letter-spacing: 0.06em; text-transform: uppercase; font-size: 9px; }
.chip__q { color: var(--ochre); }
.chip--current { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.chip--committed .chip__state  { color: var(--moss); }
.chip--quarantined .chip__state { color: var(--accent); }
.chip--refused .chip__state    { color: var(--accent); }

/* ------------------------------------------------------------------ panes */

.panes {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 0.95fr);
}

.pane {
  min-width: 0; min-height: 0; overflow-y: auto;
  padding: var(--pane-pad);
  border-right: var(--hair);
  scrollbar-width: thin;
}
.pane:last-child { border-right: 0; }

.pane--style {
  background: var(--paper-2);
  border-left: 3px double var(--rule);
}

.pane__title {
  margin: 0 0 10px; padding-bottom: 6px;
  font-size: 15px; font-weight: 500; font-variant: small-caps; letter-spacing: 0.07em;
  border-bottom: var(--hair);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.pane__sub {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant: normal; text-align: right;
}
.pane__lede {
  margin: 0 0 14px; font-size: 13.5px; font-style: italic; color: var(--ink-2);
  border-left: 2px solid var(--rule); padding-left: 11px;
}

/* ------------------------------------------------------------------ 1. the page */

.scan {
  position: relative; margin: 0 0 10px;
  border: var(--hair); background: var(--paper-3);
}
.scan img { display: block; width: 100%; height: auto; }

.boxes { position: absolute; inset: 0; }

.box {
  position: absolute; padding: 0; margin: 0; cursor: pointer;
  background: color-mix(in srgb, var(--tint) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 70%, transparent);
  --tint: var(--ink-3);
}
.box--verified  { --tint: var(--moss); }
.box--approved  { --tint: var(--indigo); }
.box--disputed  { --tint: var(--ochre); }
.box--uncertain { --tint: var(--sepia); border-style: dashed; }
.box--illegible { --tint: var(--grey); border-style: dotted; }
.box--draft     { --tint: var(--ink-3); border-style: dashed; }
.box--injected {
  --tint: var(--accent);
  background: repeating-linear-gradient(
    -45deg, transparent 0 4px, color-mix(in srgb, var(--accent) 26%, transparent) 4px 8px);
  border-width: 2px;
}

.box__no {
  position: absolute; left: -1px; top: -13px;
  font-family: var(--mono); font-size: 8.5px; line-height: 1;
  padding: 2px 3px; background: var(--tint); color: var(--paper);
  opacity: 0; transition: opacity 90ms linear;
}
.box:hover, .box:focus-visible, .box.is-active {
  background: color-mix(in srgb, var(--tint) 24%, transparent);
  border-width: 2px;
}
.box:hover .box__no, .box:focus-visible .box__no, .box.is-active .box__no { opacity: 1; }

.scan__cap {
  padding: 5px 8px; border-top: var(--hair);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

.legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0 0 14px; padding: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.legend li { display: flex; align-items: center; gap: 5px; }
.swatch { width: 11px; height: 8px; border: 1px solid var(--tint); --tint: var(--ink-3);
          background: color-mix(in srgb, var(--tint) 22%, transparent); }
.swatch--verified  { --tint: var(--moss); }
.swatch--approved  { --tint: var(--indigo); }
.swatch--disputed  { --tint: var(--ochre); }
.swatch--uncertain { --tint: var(--sepia); }
.swatch--illegible { --tint: var(--grey); }
.swatch--draft     { --tint: var(--ink-3); }

.rawtext { border-top: var(--hair); padding-top: 10px; margin-bottom: 12px; }
.rawtext__title {
  margin: 0 0 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.rawtext--alarm { border-top: 2px solid var(--accent); }
.rawtext--alarm .rawtext__title { color: var(--accent); }
.rawtext__warn {
  margin: 0 0 8px; padding: 8px 10px; font-size: 13px;
  background: var(--accent-wash); color: var(--accent-ink);
  border-left: 3px solid var(--accent);
}
.rawtext__body {
  margin: 0; padding: 9px 11px; background: var(--paper-2); border: var(--hair);
  font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  color: var(--ink-2); max-height: 190px; overflow: auto;
}
mark.alarm {
  background: var(--accent); color: var(--paper);
  padding: 0 2px; font-weight: 600;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ------------------------------------------------------------------ 2. the transcript */

.lines { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.line {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 0 10px;
  padding: 9px 0 10px;
  border-bottom: var(--hair);
  --tint: var(--ink-3);
}
.line--verified  { --tint: var(--moss); }
.line--approved  { --tint: var(--indigo); }
.line--disputed  { --tint: var(--ochre); }
.line--uncertain { --tint: var(--sepia); }
.line--illegible { --tint: var(--grey); }
.line:hover, .line.is-active { background: var(--paper-2); }
.line.is-active { box-shadow: inset 3px 0 0 var(--tint); }
.line--injected { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }

.line__no {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  padding-top: 4px; text-align: right;
}
.line__body { min-width: 0; }

.doc { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.48; }

[contenteditable="true"].doc {
  border-bottom: 1px dotted var(--rule); padding-bottom: 1px; cursor: text;
}
[contenteditable="true"].doc:focus {
  outline: none; border-bottom: 1px solid var(--focus);
  background: color-mix(in srgb, var(--focus) 7%, transparent);
}
.doc.is-dirty { border-bottom: 1px solid var(--ochre); }

.disagree { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--hair); }
.disagree__side { padding: 6px 9px; min-width: 0; }
.disagree__side--alt { border-left: var(--hair); background: var(--paper-2); }
.disagree__tag {
  display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ochre); margin-bottom: 3px;
}
.disagree__note {
  margin: 5px 0 0; font-size: 12.5px; font-style: italic; color: var(--ochre);
}

.fired { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.fired__chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  padding: 2px 6px; border: 1px dashed var(--indigo); color: var(--indigo);
  cursor: default;
}
.fired__chip::before { content: "rule "; color: var(--ink-3); }

.note {
  margin: 5px 0 0; font-size: 12.5px; font-style: italic; color: var(--ink-3);
}
.note--warn { color: var(--accent); font-style: normal; }
.note--settled { color: var(--moss); }
.note--settled .doc { font-size: 13px; }

.line__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.status {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--tint);
  border-bottom: 2px solid var(--tint); padding-bottom: 1px;
}
.conf { display: flex; align-items: center; gap: 5px; }
.conf__bar { display: block; width: 34px; height: 3px; background: var(--rule); }
.conf__bar i { display: block; height: 100%; background: var(--tint); }
.conf__num { font-family: var(--mono); font-size: 9px; color: var(--ink-3); }

/* clarifying question ------------------------------------------------ */

.ask {
  margin: 9px 0 2px; padding: 10px 12px;
  border: var(--hair); border-left: 3px solid var(--ochre);
  background: var(--paper-2);
}
.ask__prompt { margin: 0 0 8px; font-size: 13.5px; }
.ask__options { border: 0; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; }
.choice { display: flex; align-items: baseline; gap: 7px; cursor: pointer; }
.choice .doc { font-size: 14px; }
.choice input { accent-color: var(--ochre); }
.ask__field {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.ask__row { display: flex; gap: 7px; }
.ask__input {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px;
  border: var(--hair); background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 14px;
}
.ask__fallback { margin: 7px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* precedent ---------------------------------------------------------- */
/* Evidence from pages a person already transcribed. Sepia is reserved for it: the ochre
   rail belongs to a question we are asking, this is an answer somebody else already gave. */

.prec {
  margin: 9px 0 2px; padding: 8px 12px;
  border: var(--hair); border-left: 3px solid var(--sepia);
  background: var(--paper-2);
}
.prec__title {
  margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 400; color: var(--ink-3);
}
.prec__scope {
  border: 1px dashed var(--sepia); color: var(--sepia);
  padding: 1px 6px; letter-spacing: 0.08em;
}
.prec__list { list-style: none; margin: 0; padding: 0; }
.prec__item { padding: 5px 0; border-top: 1px solid var(--rule-soft); }
.prec__item:first-child { border-top: 0; padding-top: 0; }
.prec__text { font-size: 14.5px; }
.prec__meta {
  margin: 2px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-3);
}
.prec__src { color: var(--sepia); text-decoration: none; border-bottom: 1px dotted var(--sepia); }
.prec__src:hover { color: var(--ink); border-bottom-color: var(--ink); }
.prec__by::before { content: "read by "; color: var(--ink-3); opacity: 0.75; }
.prec__sim { margin-left: auto; color: var(--ink-2); }
.prec__sim::before { content: "sim "; opacity: 0.6; }
.prec__foot { margin: 7px 0 0; font-size: 11.5px; font-style: italic; color: var(--ink-3); }

/* ------------------------------------------------------------------ 3. the house style */

.convs { counter-reset: conv; }

.conv {
  counter-increment: conv;
  padding: 12px 0 13px;
  border-bottom: var(--hair);
}
.conv:first-child { padding-top: 2px; }
.conv.is-new { animation: settle 1400ms ease-out; }

@keyframes settle {
  0%   { background: color-mix(in srgb, var(--moss) 24%, transparent); }
  100% { background: transparent; }
}

.conv__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.conv__kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
.conv__kind::before {
  content: counter(conv, lower-roman) ". ";
  color: var(--ink); font-weight: 600; letter-spacing: 0.02em;
}

.tally {
  display: inline-flex; align-items: center; gap: 3.5px; height: 16px;
  color: var(--moss); padding-right: 3px;
}
.tally i { display: block; width: 1.5px; height: 15px; background: currentColor; }
.tally i:nth-child(5n) { transform: rotate(-68deg) scaleY(1.5); margin: 0 -6px 0 -8px; }
.tally em {
  font-family: var(--mono); font-size: 9px; font-style: normal;
  color: var(--ink-3); margin-left: 5px;
}

.conv__rule {
  margin: 6px 0 8px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px;
}
.conv__rule code {
  font-size: 12.5px; padding: 2px 6px; background: var(--paper); border: var(--hair);
}
.conv__rule .arrow { color: var(--ink-3); }

.conv__q { margin: 0 0 6px; font-size: 13px; font-style: italic; color: var(--ink-2); }
.conv__label {
  display: inline-block; font-family: var(--mono); font-size: 8.5px; font-style: normal;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px;
}
.conv__a {
  margin: 0; padding: 2px 0 2px 11px; border-left: 2px solid var(--moss);
  font-size: 14px; color: var(--ink);
}
.conv__a::before { content: "\201C"; }
.conv__a::after  { content: "\201D"; }

.conv__foot {
  margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
}

.empty { font-style: italic; color: var(--ink-3); }

/* ledger tape --------------------------------------------------------- */

.tape { margin-top: 20px; border-top: 3px double var(--rule); padding-top: 10px; }
.tape__title {
  margin: 0 0 7px; font-size: 13px; font-weight: 500; font-variant: small-caps;
  letter-spacing: 0.06em;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.tape__sub {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); font-variant: normal;
}
.tape__list { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow: auto; }
.tape__row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px;
  padding: 3px 0; border-bottom: 1px dotted var(--rule-soft);
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-2);
}
.tape__row time { color: var(--ink-3); }
.tape__event { letter-spacing: 0.05em; }
.tape__actor { color: var(--ink-3); text-align: right; }
.tape__row--policy_refused .tape__event,
.tape__row--quarantined .tape__event { color: var(--accent); font-weight: 600; }
.tape__row--committed .tape__event,
.tape__row--policy_allowed .tape__event { color: var(--moss); }
.tape__row--convention_learned .tape__event { color: var(--indigo); font-weight: 600; }
.tape__row.is-new { animation: settle 1400ms ease-out; }

/* ------------------------------------------------------------------ status strip */

.strip {
  flex: none;
  display: grid; grid-template-columns: minmax(180px, 0.85fr) minmax(0, 2fr) minmax(280px, 1fr);
  gap: 0;
  border-top: 3px solid var(--moss);
  background: var(--paper-2);
  max-height: 40vh;
}
.strip--refused { border-top-color: var(--accent); }
.strip--done { border-top-color: var(--indigo); }

.strip > * { padding: 11px 18px; border-right: var(--hair); min-width: 0; }
.strip > *:last-child { border-right: 0; }

.strip__verdict { display: flex; flex-direction: column; gap: 3px; }
.strip__label {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.strip__value {
  font-size: 21px; font-weight: 500; font-variant: small-caps; letter-spacing: 0.05em;
  line-height: 1.1;
}
.strip--refused .strip__value { color: var(--accent); }
.strip--allowed .strip__value { color: var(--moss); }
.strip--done .strip__value { color: var(--indigo); }
.strip__state, .strip__kernel, .strip__receipt, .strip__sink {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
}
.strip__kernel code, .strip__receipt code, .strip__sink code {
  text-transform: none; letter-spacing: 0; color: var(--ink-2);
}

.strip__reasons { overflow-y: auto; }
.strip__refusedhead {
  margin: 0 0 7px; font-size: 14px; font-weight: 600; color: var(--accent);
  font-variant: small-caps; letter-spacing: 0.05em;
}
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.reason {
  display: grid; gap: 2px;
  border-left: 3px solid var(--accent); padding: 2px 0 2px 10px;
}
.reason--ok { border-left-color: var(--moss); }
.reason__code {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.reason__title { font-size: 14px; font-weight: 600; }
.reason__body { font-size: 13px; color: var(--ink-2); }
.reason__lines {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.linkline {
  font-family: var(--mono); font-size: 9.5px; margin-left: 4px; padding: 1px 4px;
  background: none; border: 1px solid var(--rule); color: var(--ink-2); cursor: pointer;
}
.linkline:hover { border-color: var(--accent); color: var(--accent); }

.strip__actions { display: flex; flex-direction: column; gap: 8px; }

.approve__label, .approve__hash {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.approve__label { display: block; margin-bottom: 4px; }
.approve__row { display: flex; gap: 7px; }
.approve__input {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px;
  border: var(--hair); background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 12px;
}
.approve__hash { margin: 5px 0 0; display: flex; align-items: center; gap: 8px; }
.approve__hash code { text-transform: none; letter-spacing: 0; color: var(--ink-2); }

.btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: transparent; color: var(--ink); }
.btn[data-done="1"] { border-color: var(--moss); color: var(--moss); }
.btn[data-done="1"]:hover { background: var(--moss); color: var(--paper); }

.btn--commit { padding: 11px 14px; font-size: 11px; border-width: 2px; }
.btn--commit[data-state="done"] {
  border-color: var(--indigo); color: var(--indigo); cursor: default;
}
.btn--commit[data-state="done"]:hover { background: var(--indigo); color: var(--paper); }
.btn--commit[data-state="blocked"] {
  border-style: dashed; border-color: var(--accent); color: var(--accent);
  background: repeating-linear-gradient(
    -45deg, transparent 0 6px, color-mix(in srgb, var(--accent) 8%, transparent) 6px 12px);
  cursor: not-allowed;
}
.btn--commit[data-state="blocked"]:hover { background: var(--accent-wash); color: var(--accent-ink); }
.btn--commit[data-state="blocked"]::after {
  content: "\00a0\2014\00a0see the reasons"; letter-spacing: 0.06em;
}

.ghost {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px dotted var(--ink-3); color: var(--ink-3);
  padding: 2px 6px; cursor: pointer;
}
.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed; left: 50%; bottom: 46vh; transform: translateX(-50%);
  z-index: 30; max-width: 620px;
  padding: 11px 16px; border: 2px solid var(--ink); background: var(--paper);
  font-size: 13.5px; box-shadow: 4px 4px 0 var(--rule);
}
.toast[data-kind="refused"] {
  border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash);
}
.toast[data-kind="ok"] { border-color: var(--moss); }
.toast strong {
  display: block; font-variant: small-caps; letter-spacing: 0.05em;
  font-size: 16px; margin-bottom: 2px;
}
.toast__close {
  display: block; margin-top: 8px; padding: 3px 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: 1px solid currentColor; color: inherit; cursor: pointer;
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1180px) {
  /* The three-column screen becomes one scrolling column: drop the flex/grid height
     constraints entirely, or the panes get squeezed and their content spills over. */
  html, body { height: auto; overflow: visible; }
  body { display: block; }
  #workbench { display: block; }
  .panes { display: block; min-height: 0; }
  .pane { border-right: 0; border-bottom: 3px double var(--rule); overflow: visible; }
  .pane--style { border-left: 0; }
  .strip {
    position: sticky; bottom: 0; z-index: 20; grid-template-columns: 1fr; max-height: 46vh;
    overflow-y: auto;
  }
  .strip > * { border-right: 0; border-bottom: var(--hair); }
  .strip__reasons { max-height: 24vh; }
  /* Keep the leaf a reasonable size when the panes stack; the overlay stays in register
     because the boxes are positioned in percentages of the figure. */
  .scan { max-width: 520px; margin-inline: auto; }
  .toast { bottom: 52vh; max-width: min(620px, 92vw); }
}

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

/* ------------------------------------------------------------------ the drive */
/* The coordinator's view. A broadsheet rather than an app shell: it scrolls as a document
   where the workbench is a fixed three-column desk. No new colour is introduced — the
   oxide accent still only ever means refusal, and every rule below is a hairline. */

body.driveview { display: block; height: auto; overflow: auto; }
html:has(body.driveview) { height: auto; }

.badge--out { text-decoration: none; }
.badge--out:hover { border-color: var(--ink); color: var(--ink); }
.chip__alarm { color: var(--accent); }

.drive { padding-bottom: 34px; }

.reg { padding: 18px 22px 22px; border-bottom: 3px double var(--rule); }
.reg:last-child { border-bottom: 0; }
.reg--split {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); padding: 0;
}
.reg--split-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.reg--split > * { padding: 18px 22px 22px; min-width: 0; }
.reg--split > * + * { border-left: var(--hair); }
.dpane--knobs, .dpane--style { background: var(--paper-2); }

/* where the work stands ---------------------------------------------- */

.band {
  display: flex; height: 12px; margin: 0 0 13px;
  border: var(--hair); background: var(--paper-3); overflow: hidden;
}
.band__seg {
  display: block; height: 100%; --tint: var(--ink-3);
  background: color-mix(in srgb, var(--tint) 42%, transparent);
  border-right: 1px solid var(--paper);
}
.band__seg:last-child { border-right: 0; }
.band__seg--read_ahead  { --tint: var(--sepia); }
.band__seg--awaiting    { --tint: var(--ochre); }
.band__seg--approved    { --tint: var(--moss); }
.band__seg--refused     { --tint: var(--accent); }
.band__seg--quarantined {
  --tint: var(--accent);
  background: repeating-linear-gradient(
    -45deg, transparent 0 4px, color-mix(in srgb, var(--accent) 55%, transparent) 4px 8px);
}

.stand {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  list-style: none; margin: 0 0 20px; padding: 0;
}
.stand__item { padding: 6px 14px 10px 12px; border-left: 3px solid var(--tint); --tint: var(--ink-3); }
.stand__item--read_ahead  { --tint: var(--sepia); }
.stand__item--awaiting    { --tint: var(--ochre); }
.stand__item--approved    { --tint: var(--moss); }
.stand__item--refused     { --tint: var(--accent); }
.stand__item--quarantined { --tint: var(--accent); }
.stand__count {
  display: block; font-size: 27px; font-weight: 500; line-height: 1.06;
  font-variant-numeric: lining-nums tabular-nums; color: var(--tint);
}
.stand__count--none { color: var(--ink-3); }
.stand__label {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); margin: 3px 0 5px;
}
.stand__gloss { display: block; font-size: 12.5px; font-style: italic; color: var(--ink-2); }

.gridwrap { overflow-x: auto; scrollbar-width: thin; }
.grid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10.5px; }
.grid caption {
  text-align: left; padding: 0 0 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
.grid th, .grid td {
  padding: 5px 9px; text-align: left; vertical-align: baseline;
  border-bottom: 1px dotted var(--rule-soft);
}
.grid thead th {
  border-bottom: var(--hair); font-weight: 400; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.grid tbody th { font-weight: 400; }
.grid tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--rule); }
.grid tbody th a:hover { border-bottom-color: var(--ink); }
.grid__title {
  display: block; margin-top: 1px;
  font-family: var(--serif); font-size: 12.5px; font-style: italic; color: var(--ink-3);
}
.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid tr.is-current { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--ink); }
.num--alarm { color: var(--accent); font-weight: 600; }
.num--when { color: var(--ink-3); }

/* what is being refused ---------------------------------------------- */

.refs { list-style: none; margin: 0; padding: 0; }
.ref {
  padding: 11px 0 13px 11px; border-left: 3px solid var(--accent);
  border-bottom: 1px dotted var(--rule-soft);
}
.ref:last-child { border-bottom: 0; }
.ref__head { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ref__code {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.ref__count {
  font-size: 20px; font-weight: 500; line-height: 1; color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.ref__bar { height: 3px; background: var(--rule); margin: 6px 0 7px; }
.ref__bar i { display: block; height: 100%; background: var(--accent); }
.ref__title { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.ref__body { margin: 0 0 7px; font-size: 13px; color: var(--ink-2); }
.ref__pages { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ref__pageslabel {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 2px;
}
a.linkline { display: inline-block; text-decoration: none; }
.ref__foot {
  margin: 13px 0 0; padding-top: 10px; border-top: var(--hair);
  font-size: 12.5px; font-style: italic; color: var(--ink-3);
}

/* the knobs ----------------------------------------------------------- */

.flash {
  margin: 0 0 12px; padding: 8px 11px; font-size: 13px;
  border-left: 3px solid var(--moss); background: var(--paper-3);
}
.flash--bad { border-left-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }

.knobs { margin: 0; }
.knobs__list { list-style: none; margin: 0; padding: 0; }
.knob { padding: 10px 0 11px; border-bottom: var(--hair); }
.knob:first-child { padding-top: 2px; }
.knob__head { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.knob__label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
.knob__value {
  font-family: var(--mono); font-size: 18px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.knob--set .knob__value { color: var(--indigo); }
.knob--set .knob__label::after { content: " \00b7 set for this series"; color: var(--indigo); }
.knob__governs { margin: 5px 0 6px; font-size: 13px; color: var(--ink-2); }
.knob__meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: 3px 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
}
.knob__meta code { text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.knob__drives::before { content: "refuses "; opacity: 0.7; }
.knob__input {
  margin-top: 8px; width: 118px; padding: 5px 7px;
  border: var(--hair); background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 12px;
}
.knob__input::placeholder { color: var(--ink-3); opacity: 0.75; font-style: italic; }
.knob--bad { background: var(--accent-wash); }
.knob--bad .knob__input { border-color: var(--accent); }

.knobs__foot { padding-top: 12px; }
.knobs__by {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.knobs__row { display: flex; gap: 7px; }
.knobs__input {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px;
  border: var(--hair); background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 12px;
}
.knobs__note { margin: 9px 0 0; font-size: 12px; font-style: italic; color: var(--ink-3); }
.knobs__prov {
  margin: 12px 0 0; padding-top: 10px; border-top: 3px double var(--rule);
  font-size: 12.5px; color: var(--ink-2);
}
.knobs__prov code { font-size: 11px; margin-right: 6px; }

/* the audit trail ----------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 11px; }
.filter {
  padding: 3px 7px; border: var(--hair); background: var(--paper);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none;
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter--on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

.trail { list-style: none; margin: 0; padding: 0; }
.trail__row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(0, 0.85fr) auto;
  gap: 10px; align-items: baseline; padding: 4px 0;
  border-bottom: 1px dotted var(--rule-soft);
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-2);
}
.trail__row time { color: var(--ink-3); }
.trail__case {
  color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--rule);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trail__case:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 1180px) {
  .reg--split, .reg--split-r { display: block; }
  .reg--split > * + * { border-left: 0; border-top: 3px double var(--rule); }
  .trail__row { grid-template-columns: 92px minmax(0, 1fr); gap: 2px 8px; }
  .trail__case, .tape__actor { text-align: left; }
}