/* Verifiable — application styles.
 * Component vocabulary is the shared Apodex design system (cards, panels,
 * action rows, status signals, badges, notices).
 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--v-bg);
  color: var(--v-text);
  font-family: var(--v-font-sans);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--v-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--v-accent); color: var(--v-on-accent); }

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

.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.rail {
  background: var(--v-surface);
  border-right: 1px solid var(--v-border);
  padding: var(--v-space-5) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  padding: 0 var(--v-space-5) var(--v-space-5);
  border-bottom: 1px solid var(--v-border);
  margin-bottom: var(--v-space-4);
}

.brand-mark {
  display: flex;
  align-items: baseline;
  gap: var(--v-space-2);
}

.brand-name {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--v-text-bright);
}

.brand-tag {
  margin-top: var(--v-space-2);
  font-size: 11.5px;
  color: var(--v-muted);
  line-height: 1.5;
}

.rail-section-title {
  padding: var(--v-space-4) var(--v-space-5) var(--v-space-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v-dim);
  font-weight: 600;
}

.rail-item {
  display: flex;
  align-items: center;
  gap: var(--v-space-3);
  padding: var(--v-space-2) var(--v-space-5);
  color: var(--v-text-secondary);
  border-left: 2px solid transparent;
  cursor: pointer;
  user-select: none;
}

.rail-item:hover {
  background: var(--v-surface-hover);
  color: var(--v-text);
  text-decoration: none;
}

.rail-item.active {
  background: var(--v-surface-hover);
  color: var(--v-text-bright);
  border-left-color: var(--v-accent);
  font-weight: 550;
}

.rail-glyph {
  width: 18px;
  text-align: center;
  font-family: var(--v-font-mono);
  font-size: 12px;
  color: var(--v-dim);
  flex: none;
}

.rail-item.active .rail-glyph { color: var(--v-accent); }

.rail-count {
  margin-left: auto;
  font-family: var(--v-font-mono);
  font-size: 11px;
  color: var(--v-muted);
}

.rail-foot {
  margin-top: var(--v-space-5);
  padding: var(--v-space-4) var(--v-space-5) 0;
  border-top: 1px solid var(--v-border);
  font-size: 11px;
  color: var(--v-dim);
  line-height: 1.6;
}

/* ---------- main ---------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--v-space-4);
  padding: var(--v-space-3) var(--v-space-6);
  border-bottom: 1px solid var(--v-border);
  background: var(--v-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-title {
  font-weight: 600;
  color: var(--v-text-bright);
}

.topbar-meta {
  font-family: var(--v-font-mono);
  font-size: 11px;
  color: var(--v-dim);
}

.topbar-spacer { flex: 1; }

.sealed {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-2);
  font-size: 11px;
  color: var(--v-muted);
  border: 1px solid var(--v-border);
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--v-surface-raised);
}

.sealed-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--v-muted);
  flex: none;
}

.view {
  padding: var(--v-space-6);
  max-width: 1180px;
  width: 100%;
}

.view-wide { max-width: 1500px; }

/* ---------- typography ---------- */

h1 {
  font-size: 24px;
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--v-text-bright);
  margin: 0 0 var(--v-space-2);
}

h2 {
  font-size: 15px;
  font-weight: 620;
  color: var(--v-text-bright);
  margin: var(--v-space-6) 0 var(--v-space-3);
  letter-spacing: -0.01em;
}

h2:first-child { margin-top: 0; }

h3 {
  font-size: 13px;
  font-weight: 620;
  color: var(--v-text);
  margin: var(--v-space-4) 0 var(--v-space-2);
}

.lede {
  font-size: 14px;
  color: var(--v-text-secondary);
  max-width: 74ch;
  margin: 0 0 var(--v-space-5);
}

p { margin: 0 0 var(--v-space-3); }

.mono { font-family: var(--v-font-mono); }
.muted { color: var(--v-muted); }
.dim { color: var(--v-dim); }
.small { font-size: 11.5px; }
.nowrap { white-space: nowrap; }

/* ---------- panels & cards ---------- */

.panel {
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-md);
  padding: var(--v-space-4) var(--v-space-5);
}

.panel-raised { background: var(--v-surface-raised); }

.panel-heading {
  display: flex;
  align-items: center;
  gap: var(--v-space-3);
  margin-bottom: var(--v-space-3);
}

.panel-heading h2, .panel-heading h3 { margin: 0; }

.panel-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v-dim);
  font-weight: 600;
}

.grid { display: grid; gap: var(--v-space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--v-surface-raised);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-md);
  padding: var(--v-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--v-space-2);
}

.card-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v-dim);
  font-weight: 600;
}

.card-headline {
  font-size: 22px;
  font-weight: 640;
  color: var(--v-text-bright);
  font-family: var(--v-font-mono);
  line-height: 1.2;
}

.card-title { font-weight: 600; color: var(--v-text-bright); }
.card-note { font-size: 11.5px; color: var(--v-muted); line-height: 1.55; }

/* ---------- status signals & badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 550;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--v-border);
  background: var(--v-surface-raised);
  color: var(--v-text-secondary);
  white-space: nowrap;
}

.badge-ok    { border-color: var(--v-success-border); color: var(--v-success); }
.badge-warn  { border-color: var(--v-warning-border); color: var(--v-warning); }
.badge-danger{ border-color: var(--v-danger-border);  color: var(--v-danger); }
.badge-accent{ border-color: var(--v-accent-border);  color: var(--v-accent); }

.signal {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--v-muted);
  flex: none;
}
.signal-ok { background: var(--v-success); }
.signal-warn { background: var(--v-warning); }
.signal-danger { background: var(--v-danger); }
.signal-accent { background: var(--v-accent); }

.notice {
  border: 1px solid var(--v-border);
  border-left-width: 3px;
  border-radius: var(--v-radius-sm);
  padding: var(--v-space-3) var(--v-space-4);
  background: var(--v-surface-raised);
  font-size: 12.5px;
  color: var(--v-text-secondary);
}
.notice-warn   { border-left-color: var(--v-warning); }
.notice-danger { border-left-color: var(--v-danger); }
.notice-ok     { border-left-color: var(--v-success); }
.notice-accent { border-left-color: var(--v-accent); }
/* An explanation, not a warning: no coloured edge to imply something is wrong. */
.notice-plain  { border-left-color: var(--v-border); }

/* ---------- controls ---------- */

button, .btn {
  font-family: inherit;
  font-size: var(--v-control-font-size);
  height: var(--v-control-height);
  padding: 0 var(--v-space-4);
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border-strong);
  background: var(--v-surface-raised);
  color: var(--v-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-2);
  white-space: nowrap;
}

button:hover { background: var(--v-surface-hover); }

button.primary, .btn.primary {
  background: var(--v-primary-action);
  border-color: var(--v-primary-action-border);
  color: var(--v-on-primary-action);
  font-weight: 600;
}
button.primary:hover { filter: brightness(1.08); }

button:disabled { opacity: 0.45; cursor: not-allowed; }

button.ghost { background: transparent; border-color: var(--v-border); }

button.tiny { height: 26px; font-size: 11.5px; padding: 0 10px; }

.button-row { display: flex; gap: var(--v-space-2); flex-wrap: wrap; align-items: center; }

.seg {
  display: inline-flex;
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
  overflow: hidden;
}
.seg button {
  border: none;
  border-radius: 0;
  background: transparent;
  height: 28px;
  font-size: 11.5px;
  color: var(--v-text-secondary);
}
.seg button + button { border-left: 1px solid var(--v-border); }
.seg button.on {
  background: var(--v-accent);
  color: var(--v-on-accent);
  font-weight: 600;
}

/* score picker */

.scale { display: flex; gap: 4px; }
.scale button {
  height: 30px; min-width: 32px; padding: 0 8px;
  justify-content: center;
  font-family: var(--v-font-mono);
  background: var(--v-surface-raised);
}
.scale button.on {
  background: var(--v-accent);
  border-color: var(--v-accent-border);
  color: var(--v-on-accent);
  font-weight: 700;
}

textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  padding: var(--v-space-3);
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border-strong);
  background: var(--v-bg);
  color: var(--v-text);
}
textarea:focus { outline: 2px solid var(--v-focus-ring); outline-offset: -1px; }

input[type="text"] {
  font-family: inherit; font-size: 12.5px;
  height: var(--v-control-height);
  padding: 0 var(--v-space-3);
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border-strong);
  background: var(--v-bg);
  color: var(--v-text);
}

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

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--v-dim);
  font-weight: 600;
  padding: var(--v-space-2) var(--v-space-3);
  border-bottom: 1px solid var(--v-border);
  white-space: nowrap;
}

td {
  padding: var(--v-space-2) var(--v-space-3);
  border-bottom: 1px solid var(--v-border);
  color: var(--v-text-secondary);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--v-surface-hover); }

.num { font-family: var(--v-font-mono); text-align: right; }

/* ---------- trajectory viewer ---------- */

/* The trajectory view is a single full-width column. It used to reserve a
 * right-hand rail for a status card titled "This step"; the card's arbiter
 * states were confusing and the space is worth more given to the trace and its
 * plain-language column. The submit control moved into the review form, next to
 * the thing it submits. */
.submit-panel { margin-top: 16px; border-color: var(--v-accent-border); }

/* The review form is long — 25 rubric items and a dozen questions — so the
   submit control at the foot of it was only reachable by scrolling past
   everything. This keeps it on screen the whole time. */
.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 0 0 14px;
  padding: 10px 0;
  background: linear-gradient(to top, var(--v-bg) 70%, transparent);
}
.actionbar-in {
  display: flex;
  align-items: center;
  gap: var(--v-space-3);
  padding: 10px var(--v-space-4);
  border: 1px solid var(--v-accent-border);
  border-radius: var(--v-radius-md);
  background: var(--v-surface-raised);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.actionbar-progress {
  width: 120px; height: 6px; flex: none;
  border-radius: 999px;
  background: var(--v-border);
  overflow: hidden;
}
.actionbar-progress span { display: block; height: 100%; background: var(--v-accent); }

@media (max-width: 780px) {
  .actionbar-in { flex-wrap: wrap; }
}
.left-list { margin: 6px 0 0; padding-left: 20px; }
.left-list li { margin: 2px 0; }

.steps-head {
  display: flex; align-items: center; gap: var(--v-space-3);
  margin-bottom: var(--v-space-3);
}

.step {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-md);
  background: var(--v-surface-raised);
  margin-bottom: var(--v-space-2);
  overflow: hidden;
}

.step-head {
  display: flex; align-items: center; gap: var(--v-space-3);
  padding: var(--v-space-2) var(--v-space-3);
  background: var(--v-surface);
  border-bottom: 1px solid var(--v-border);
}

.step-no {
  font-family: var(--v-font-mono);
  font-size: 11px;
  color: var(--v-dim);
  min-width: 46px;
}

.step-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--v-dim);
  font-weight: 600;
  margin-left: auto;
}

.step-body { padding: var(--v-space-3); display: grid; gap: var(--v-space-2); }

/* ---- the reading layer ----
 * Raw trace on the left, the plain-language note on the RIGHT of it, so a
 * domain expert reads what happened beside what was actually run rather than
 * scrolling between the two. Written by a model, never by a reviewer, and
 * tagged with the model's name wherever it appears. */

.step.has-says .step-body {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 30%);
  column-gap: var(--v-space-4);
}
.step.has-says .step-body > .half:not(.says) { grid-column: 1; }
.step.has-says .step-body > .says {
  grid-column: 2;
  grid-row: 1 / -1;
  display: block;
  padding-left: var(--v-space-4);
  border-left: 1px solid var(--v-border);
}

.says-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.says-body { font-size: 14.5px; line-height: 1.65; }
.says-does { margin: 0; color: var(--v-text); }
.says-result {
  margin: 8px 0 0;
  color: var(--v-text-secondary);
  font-size: 13px;
  font-family: var(--v-font-mono);
  line-height: 1.5;
}

/* Anything the trace does not literally say is fenced off and labelled.
 * A reviewer who simply agrees with an unmarked machine inference makes the
 * whole review self-confirming, so the marking is load-bearing, not decoration. */
.says-inference {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--v-warning);
  background: var(--v-surface);
  font-size: 12px;
  line-height: 1.5;
  color: var(--v-text-secondary);
}

.inf-tag {
  display: block;
  margin-bottom: 4px;
  color: var(--v-warning);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: help;
}

/* Says only that the text is machine-written. The model's name was printed
 * here before and was noise on every one of 45 steps; what a reader needs is
 * that a person did not write it. */
.ai-tag {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 5px;
  border: 1px solid var(--v-border);
  border-radius: 3px;
  background: var(--v-surface);
  color: var(--v-dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: help;
  flex: none;
}

/* Under ~1080px the third column is too narrow to read; stack it instead. */
@media (max-width: 1080px) {
  .step.has-says .step-body { grid-template-columns: 1fr; }
  .step.has-says .step-body > .half:not(.says),
  .step.has-says .step-body > .says { grid-column: 1; grid-row: auto; }
  .step.has-says .step-body > .says {
    padding-left: 0;
    padding-top: var(--v-space-3);
    border-left: 0;
    border-top: 1px solid var(--v-border);
  }
}

/* ---- phases: each one contains its own steps ----
 *
 * Collapsed is the default. The run is meant to be readable as its phase
 * summaries alone, top to bottom, before anything is opened. */

.phases { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--v-space-4); }

.phase {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-md);
  background: var(--v-surface);
  /* deliberately NOT overflow:hidden — it silently clipped the summary when
     the head mis-sized, turning a layout bug into a missing element */
}
.phase.open .phase-head { border-radius: var(--v-radius-md) var(--v-radius-md) 0 0; }
.phase-body { border-radius: 0 0 var(--v-radius-md) var(--v-radius-md); }
.phase.open { border-color: var(--v-accent-border); }
.phase.open .phase-head { background: var(--v-surface-hover); }

/* ⛔ This is a DIV with role="button", not a <button>.
 *
 * A <button> lays its content out in an anonymous single-line box and will
 * not grow to fit stacked block children: the head measured 34px for 46px of
 * content and the summary was clipped to invisibility. `display:block` did
 * not fix it and neither did `display:grid` — the constraint is the button
 * element itself. The summary was in the DOM with correct CSS and still could
 * not be seen, which is why this is spelled out.
 *
 * Keyboard activation is wired by hand in views.js mount(). */
.phase-head {
  display: block;
  width: 100%;
  padding: 11px var(--v-space-4) 13px;
  background: none;
  border: 0;
  font: inherit;
  color: var(--v-text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--v-radius-md);
}
.phase-head:focus-visible {
  outline: 2px solid var(--v-accent);
  outline-offset: -2px;
}
.phase-head:hover { background: var(--v-surface-hover); }

.phase-top { display: flex; align-items: center; gap: var(--v-space-3); }

.phase-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--v-accent);
  color: var(--v-on-accent);
  font-family: var(--v-font-mono);
  font-size: 11px;
  font-weight: 700;
}

.phase-name {
  font-size: 16px;
  font-weight: 620;
  color: var(--v-text-bright);
  letter-spacing: -0.01em;
  min-width: 0;
}

.phase-range { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-dim); flex: none; }

.phase-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 5px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--v-border);
  background: var(--v-surface-raised);
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  color: var(--v-muted);
}

/* A real control, not a stray dash floating at the right edge. */
.phase-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px; flex: none;
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border);
  background: var(--v-surface-raised);
  color: var(--v-text-secondary);
  font-family: var(--v-font-mono);
  font-size: 14px;
  line-height: 1;
}
.phase-head:hover .phase-chevron { border-color: var(--v-accent-border); color: var(--v-accent); }

/* THE line the design turns on: visible collapsed, unchanged when expanded,
 * and set as prose rather than as a caption. Indented to the title's text so
 * it reads as belonging to it. */
.phase-summary {
  display: block;
  margin: 9px 0 0 38px;
  max-width: 92ch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--v-text-secondary);
}

.phase-note { margin: 0 0 10px; max-width: 104ch; }

/* A phase-level interpretation lives under the summary — the only phase prose
   left after the detail box was removed. Without this it would be generated,
   validated, and then silently dropped. */
.phase-inference { display: block; margin: 9px 0 0 34px; max-width: 104ch; }

.phase-body {
  padding: var(--v-space-4);
  border-top: 1px solid var(--v-border);
  background: var(--v-bg);
}
.phase-body > .step:last-child { margin-bottom: 0; }

/* ---- the review form's type scale ----
 *
 * One rule: what the reviewer is being ASKED is large; everything explaining
 * it is small. The form was a wall of one size, so the questions did not read
 * as questions. Space is cheaper than making someone hunt for the ask. */

.ask {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 550;
  color: var(--v-text-bright);
  max-width: 78ch;
}
.ask-lead { font-size: 16px; margin-bottom: 4px; }

/* Part of the question, but not the ask itself: an answer is required, and
   "none" is one. Small so it does not compete with what is being asked. */
.ask-note {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--v-dim);
  white-space: nowrap;
}

.form-item-title { font-size: 14px; }
.form-item-hint { font-size: 11.5px; color: var(--v-muted); margin-bottom: var(--v-space-3); max-width: 84ch; }

/* ---- one choice component, used by both A-D scales ----
 * Vertical, with each option's meaning on its own line. A bare A/B/C/D makes
 * the reader hold four definitions in their head while answering. */

.ad-item {
  padding: var(--v-space-4) 0;
  border-bottom: 1px solid var(--v-border);
}
.ad-item:last-of-type { border-bottom: 0; }

.choice-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }

.choice-list button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 78ch;
  padding: 10px 13px;
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border-strong);
  background: var(--v-surface-raised);
  color: var(--v-text-secondary);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.choice-list button:hover { border-color: var(--v-accent-border); color: var(--v-text); }
.choice-list button.on {
  border-color: var(--v-accent);
  background: var(--v-surface-hover);
  color: var(--v-text-bright);
  font-weight: 600;
}

.choice-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border);
  font-family: var(--v-font-mono);
  font-size: 12.5px;
  font-weight: 700;
}
.choice-list button.on .choice-key {
  background: var(--v-accent);
  border-color: var(--v-accent);
  color: var(--v-on-accent);
}

.form-item textarea { width: 100%; max-width: 78ch; font-size: 13px; }

/* ---- reviewer questions on the review form ---- */

.qa {
  padding: var(--v-space-4) 0;
  border-bottom: 1px dashed var(--v-border);
}
.qa:last-of-type { border-bottom: 0; }

.qa-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }

.qa-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px; flex: none;
  border-radius: var(--v-radius-sm);
  background: var(--v-accent);
  color: var(--v-on-accent);
  font-family: var(--v-font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

.qa-step {
  font-family: var(--v-font-mono);
  font-size: 11px;
  color: var(--v-accent);
  border-bottom: 1px dotted var(--v-accent-border);
  cursor: pointer;
}
.qa-step:hover { color: var(--v-text-bright); }

.qa-kind {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--v-dim);
}

.qa-text { margin: 0 0 9px; max-width: 78ch; }

.qa textarea {
  width: 100%;
  max-width: 78ch;
  min-height: 60px;
  font-size: 13px;
  resize: vertical;
  background: var(--v-bg);
  color: var(--v-text);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
}
.qa textarea:focus { outline: none; border-color: var(--v-accent); }

/* ---- reviewer comments ----
 * The only place a human writes on the trace. Deliberately unlike the AI
 * column: accent-bordered, their own id on it, never the "AI generated" tag.
 * If these two ever look alike, the review record stops being attributable. */

.note-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  margin-left: auto;
  flex: none;
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border);
  background: var(--v-surface-raised);
  color: var(--v-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.note-btn:hover { border-color: var(--v-accent-border); color: var(--v-accent); }
.note-btn.on { border-color: var(--v-accent-border); color: var(--v-accent); font-weight: 600; }
.note-glyph { width: 12px; height: 12px; flex: none; }

/* In a step head the kind label already takes the right edge. */
.step-head .note-btn { margin-left: 0; }
.phase-top .note-btn { margin-left: 0; }

.note:empty { display: none; }

.note-saved,
.note-editor {
  margin: var(--v-space-3) 0 0;
  padding: var(--v-space-3);
  border: 1px solid var(--v-accent-border);
  border-left-width: 3px;
  border-radius: var(--v-radius-sm);
  background: var(--v-surface-raised);
}
.phase-head + .note .note-saved,
.phase-head + .note .note-editor { margin: 0 var(--v-space-4) var(--v-space-3) 46px; }
.step .note-saved,
.step .note-editor { margin: 0 var(--v-space-3) var(--v-space-3); }

.note-who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--v-accent);
  margin-bottom: 6px;
}
.note-text { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--v-text); white-space: pre-wrap; }

.note-editor textarea {
  width: 100%;
  min-height: 78px;
  margin: 6px 0 8px;
  resize: vertical;
  background: var(--v-bg);
  color: var(--v-text);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.55;
}
.note-editor textarea:focus { outline: none; border-color: var(--v-accent); }



.half { display: grid; grid-template-columns: 92px 1fr; gap: var(--v-space-3); }

.half-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--v-dim);
  font-weight: 600;
  padding-top: 2px;
}

.act {
  color: var(--v-text);
  /* An action is a command the agent ran, not prose. Set in the sans face it
     wrapped at arbitrary points and `--flag=value` lost its shape; monospace is
     what the reader is actually parsing. */
  font-family: var(--v-font-mono);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The sentence the review exists to test: what the AI says it achieved. It
   was an unclassed <p> inheriting 13px, which put the claim UNDER the size of
   the descriptions of it. Read it at the reading size. */
.claim-text {
  margin: 0;
  max-width: 96ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--v-text-secondary);
}

.env {
  font-family: var(--v-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--v-text-secondary);
  background: var(--v-bg);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  padding: var(--v-space-2) var(--v-space-3);
  max-height: 220px;
  overflow: auto;
}

.env-empty {
  color: var(--v-danger);
  border-color: var(--v-danger-border);
  border-style: dashed;
  font-style: italic;
  background: transparent;
}

.step.flagged { border-color: var(--v-danger-border); }
.step.flagged .step-head { background: var(--v-danger-surface); }

.traj-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-space-2) var(--v-space-4);
  font-size: 12px;
}
.traj-meta dt { color: var(--v-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.traj-meta dd { margin: 0 0 var(--v-space-2); color: var(--v-text-secondary); }

/* ---------- review form ---------- */

.form-item {
  border-top: 1px solid var(--v-border);
  padding: var(--v-space-4) 0;
}
.form-item:first-of-type { border-top: none; padding-top: 0; }

.form-item-head {
  display: flex; align-items: baseline; gap: var(--v-space-3);
  margin-bottom: var(--v-space-2);
}

.form-item-no {
  font-family: var(--v-font-mono);
  font-size: 11px;
  color: var(--v-accent);
  font-weight: 600;
}

.form-item-title { font-weight: 600; color: var(--v-text-bright); }
.form-item-hint { font-size: 11.5px; color: var(--v-muted); margin-bottom: var(--v-space-3); }

.dim-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: var(--v-space-3);
  align-items: center;
  padding: var(--v-space-1) 0;
}
.dim-name { font-size: 12px; color: var(--v-text-secondary); }

/* ---- TRACES review form ----
 * The rubric is HDS6 v1.2, the same one the automated judge scores against
 * (agentic-cjudge src/cjudge/hds6/items.py). Six capabilities, collapsible,
 * because 25 items at once is a wall. */

.traces { display: flex; flex-direction: column; gap: var(--v-space-2); }

.cap {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface);
  overflow: hidden;
}
.cap.open { border-color: var(--v-accent-border); }

.cap-head {
  display: flex;
  align-items: center;
  gap: var(--v-space-3);
  width: 100%;
  padding: 10px var(--v-space-3);
  background: none;
  border: 0;
  font: inherit;
  color: var(--v-text);
  text-align: left;
  cursor: pointer;
}
.cap-head:hover { background: var(--v-surface-hover); }

.cap-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--v-radius-sm);
  background: var(--v-accent);
  color: var(--v-on-accent);
  font-family: var(--v-font-mono);
  font-size: 12px;
  font-weight: 700;
}
.cap-letter.inline { width: 18px; height: 18px; font-size: 10.5px; margin-right: 4px; }

.cap-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.cap-hint { display: block; font-weight: 400; margin-top: 1px; }
.cap-score-badge { font-family: var(--v-font-mono); min-width: 46px; justify-content: center; }
.cap-chevron {
  width: 16px;
  text-align: center;
  color: var(--v-dim);
  font-family: var(--v-font-mono);
  flex: none;
}

.cap-body {
  padding: var(--v-space-2) var(--v-space-3) var(--v-space-3);
  border-top: 1px solid var(--v-border);
  background: var(--v-bg);
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 148px;
  gap: var(--v-space-4);
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--v-border);
}
.item-row:last-of-type { border-bottom: 0; }
.item-name { font-size: 13.5px; color: var(--v-text); line-height: 1.4; }
.item-anchor { margin-top: 4px; line-height: 1.5; font-size: 11.5px; }
.tiny-badge { font-size: 9.5px; padding: 0 4px; height: 15px; margin-left: 4px; vertical-align: 1px; }

.cap-caps { margin-top: var(--v-space-3); padding-top: var(--v-space-3); border-top: 1px solid var(--v-border); }

.capbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 3px;
  font-size: 11.5px;
  color: var(--v-text-secondary);
  border: 1px solid transparent;
  border-radius: var(--v-radius-sm);
  cursor: pointer;
}
.capbox:hover { background: var(--v-surface-hover); }
.capbox.on { border-color: var(--v-danger-border); background: var(--v-danger-surface); color: var(--v-text); }
.capbox input { accent-color: var(--v-accent); cursor: pointer; }
.danger { color: var(--v-danger); }

.out-of-scope {
  font-size: 11px;
  color: var(--v-dim);
  margin-top: var(--v-space-2);
  display: flex; align-items: center; gap: var(--v-space-2);
}

.progress {
  height: 4px;
  background: var(--v-surface-hover);
  border-radius: 99px;
  overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--v-accent); }

/* ---------- misc ---------- */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--v-space-4); font-size: 12.5px; }
.kv dt { color: var(--v-dim); }
.kv dd { margin: 0; color: var(--v-text-secondary); }

.stack { display: grid; gap: var(--v-space-4); }
.stack-tight { display: grid; gap: var(--v-space-2); }
.row { display: flex; align-items: center; gap: var(--v-space-3); }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.list-plain { margin: 0; padding-left: 18px; color: var(--v-text-secondary); }
.list-plain li { margin-bottom: var(--v-space-2); }

.rule-card {
  border: 1px solid var(--v-danger-border);
  border-radius: var(--v-radius-md);
  padding: var(--v-space-4) var(--v-space-5);
  background: var(--v-danger-surface);
}

.funnel { display: grid; gap: var(--v-space-2); }
.funnel-row {
  display: grid;
  grid-template-columns: 190px 1fr 56px;
  align-items: center;
  gap: var(--v-space-3);
  font-size: 12.5px;
}
.funnel-bar { height: 22px; background: var(--v-surface-hover); border-radius: var(--v-radius-sm); overflow: hidden; }
.funnel-bar > span { display: block; height: 100%; background: var(--v-accent); opacity: 0.85; }

.bar-mini { display: inline-flex; align-items: center; gap: 6px; }
.bar-mini-track { width: 58px; height: 5px; background: var(--v-surface-hover); border-radius: 99px; overflow: hidden; }
.bar-mini-track > span { display: block; height: 100%; background: var(--v-accent); }

.footer-note {
  margin-top: var(--v-space-6);
  padding-top: var(--v-space-4);
  border-top: 1px solid var(--v-border);
  font-size: 11.5px;
  color: var(--v-dim);
  line-height: 1.7;
}

/* ================================================================
 * Interface conventions
 *
 * These four rules come from the shared Apodex interface conventions
 * collaboration design (docs/partner-collaboration.md, "Interface
 * conventions"), which states them as applying to both sides of an
 * order.  They are general enough to govern Verifiable too:
 *
 *   1. Confirm on the page, never in a browser dialog.
 *   2. Say that it worked.
 *   3. State as icons, not only words.
 *   4. What can be clicked looks clickable.
 * ================================================================ */

/* 3. State as icons, not only words.
 * One small set: done, refused, waiting, needs-you.  Every icon carries a
 * text label for screen readers and a tooltip, and can still be read as a
 * word where the word matters. */

.icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--v-text-secondary);
  white-space: nowrap;
}

.icon svg { width: 13px; height: 13px; flex: none; display: block; }

.icon-done    svg { color: var(--v-success); }
.icon-refused svg { color: var(--v-danger); }
.icon-waiting svg { color: var(--v-warning); }
.icon-needs   svg { color: var(--v-accent); }

.icon-done    { color: var(--v-success); }
.icon-refused { color: var(--v-danger); }
.icon-waiting { color: var(--v-warning); }
.icon-needs   { color: var(--v-accent); }

/* The compact form used inside table rows: icon only, label for a11y. */
.icon-solo svg { width: 14px; height: 14px; }

.icon-legend {
  display: flex;
  gap: var(--v-space-4);
  flex-wrap: wrap;
  padding: var(--v-space-2) 0;
  font-size: 11.5px;
}

/* 4. What can be clicked looks clickable.
 * Every action is a button with a border, a hover and a focus state;
 * a control whose effect is not obvious carries a tooltip. */

button:focus-visible,
[href]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--v-focus-ring);
  outline-offset: 2px;
}

.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 99px;
  border: 1px solid var(--v-border-strong);
  color: var(--v-dim);
  font-size: 9px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}
.help:hover { color: var(--v-text); border-color: var(--v-text); }

/* A row that can be opened reads as clickable. */
tr.rowlink { cursor: pointer; }
tr.rowlink:hover td:first-child { color: var(--v-accent); }

/* 1. Confirm on the page, never in a browser dialog.
 * The confirmation appears inside the card, next to the button that
 * started it, and says what will happen. */

.confirm {
  border: 1px solid var(--v-accent-border);
  border-left-width: 3px;
  border-radius: var(--v-radius-sm);
  background: var(--v-surface-raised);
  padding: var(--v-space-3) var(--v-space-4);
  margin-top: var(--v-space-3);
}
.confirm-what { font-size: 12.5px; color: var(--v-text); margin-bottom: var(--v-space-3); }
.confirm-what b { color: var(--v-text-bright); }

/* 2. Say that it worked.
 * After an action the card says what changed, and keeps saying it until
 * the next action.  Not a toast — a toast is the browser-dialog idiom. */

.said {
  border: 1px solid var(--v-success-border);
  border-left-width: 3px;
  border-radius: var(--v-radius-sm);
  background: var(--v-surface-raised);
  padding: var(--v-space-3) var(--v-space-4);
  font-size: 12.5px;
  color: var(--v-text-secondary);
  margin-top: var(--v-space-3);
}
.said b { color: var(--v-text-bright); }
.said-when { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-dim); }

/* ---- progress line: now … / next … ---- */

.progressline {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: var(--v-space-3) 0;
}

.pl-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--v-dim);
  padding-right: 6px;
}
.pl-step svg { width: 13px; height: 13px; flex: none; }
.pl-step.done svg { color: var(--v-success); }
.pl-step.now { color: var(--v-text-bright); font-weight: 600; }
.pl-step.now svg { color: var(--v-accent); }
.pl-sep { color: var(--v-border-strong); padding: 0 6px; font-size: 11px; }

.now-next {
  display: flex;
  gap: var(--v-space-5);
  flex-wrap: wrap;
  font-size: 12px;
  padding-top: var(--v-space-1);
}
.now-next b { color: var(--v-text-bright); }
.now-next .nn { color: var(--v-text-secondary); }

/* ---- tabs ---- */

.tabs {
  display: flex;
  gap: var(--v-space-1);
  border-bottom: 1px solid var(--v-border);
  margin-bottom: var(--v-space-4);
}
.tab {
  padding: var(--v-space-2) var(--v-space-4);
  font-size: 12.5px;
  color: var(--v-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-radius: 0;
  height: auto;
}
.tab:hover { color: var(--v-text); background: var(--v-surface-hover); }
.tab.on {
  color: var(--v-text-bright);
  border-bottom-color: var(--v-accent);
  font-weight: 600;
}
.tab .tab-n {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  color: var(--v-dim);
  margin-left: 6px;
}

/* ---- the side card: the one action the current step needs ---- */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-space-2);
  margin: var(--v-space-3) 0;
}
.fact {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface-raised);
  padding: 3px 9px;
  font-size: 11px;
  color: var(--v-text-secondary);
}
.fact dt { display: inline; color: var(--v-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.fact dd { display: inline; margin: 0 0 0 5px; }

/* ---- filters: plain lists, nothing ranked, nobody pushed ---- */

.filters {
  display: flex;
  gap: var(--v-space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--v-space-3);
}
.filters input[type="text"] { width: 220px; }

.star {
  background: none;
  border: none;
  padding: 0 4px;
  height: auto;
  color: var(--v-dim);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.star:hover { color: var(--v-warning); background: none; }
.star.on { color: var(--v-warning); }

/* ---- the evidence chain: step-by-step checking ---- */

.ev-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: var(--v-space-3);
  align-items: start;
  padding: var(--v-space-3) 0;
  border-bottom: 1px solid var(--v-border);
}
.ev-row:last-child { border-bottom: none; }
.ev-step { font-size: 11px; color: var(--v-dim); padding-top: 2px; }
.ev-act { font-size: 12.5px; color: var(--v-text); }
.ev-tags { display: flex; gap: 4px; flex: none; }
.ev-tags button { white-space: nowrap; }

@media (max-width: 900px) {
  .ev-row { grid-template-columns: 1fr; }
  .ev-tags { justify-content: flex-start; }
}

/* ---- the task instruction, as the world wrote it ----
 * Real instructions run to a couple of kilobytes of prose. They get the same
 * treatment as an environment return: monospace, scrollable, not reflowed
 * into a narrow column. */

.task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v-space-4);
  margin-bottom: var(--v-space-2);
}
@media (max-width: 900px) { .task-grid { grid-template-columns: 1fr; } }

.task-text {
  max-height: 320px;
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* A refused call is not a silent failure: the world answered, it just said no.
 * Distinguish it from both a normal return and a genuinely empty one. */
.env-refused {
  color: var(--v-warning);
  border-color: var(--v-warning-border);
}

/* And a call that RAN and reported a failure is a third thing again: the world
 * did what it was asked and the result was bad. Styling it like a refusal was
 * telling a reviewer the agent had been blocked when it had not. */
.env-failed {
  color: var(--v-accent);
  border-color: var(--v-accent-border);
}

/* ---- a return read as data ----
 *
 * Sits ABOVE the raw return and never replaces it. Deliberately quiet, and
 * styled as a sibling of .reason: both are a second way of looking at
 * something whose authority lives elsewhere on the page. */
.filetable {
  margin-bottom: var(--v-space-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface);
}
.filetable > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--v-text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.filetable > summary::-webkit-details-marker { display: none; }
.filetable > summary::marker { content: ""; }
.filetable > summary::before {
  content: "\25b8";
  flex: none;
  color: var(--v-muted);
  font-size: 9px;
  transition: transform 120ms ease;
}
.filetable[open] > summary::before { transform: rotate(90deg); }
.filetable > summary:hover { background: var(--v-surface-hover); }
.filetable[open] > summary { border-bottom: 1px solid var(--v-border); }

.ft-label { font-weight: 600; letter-spacing: 0.01em; }
.ft-meta {
  margin-left: auto;
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--v-border-strong);
  border-radius: 999px;
  font-size: 10px;
  color: var(--v-muted);
  white-space: nowrap;
}

.ft-block { padding: var(--v-space-2) var(--v-space-3) var(--v-space-3); }
.ft-name {
  font-family: var(--v-font-mono);
  font-size: 12px;
  color: var(--v-text-bright);
}
.ft-dim {
  color: var(--v-dim);
  font-size: 10.5px;
  margin: 2px 0 6px;
}
/* Wide tables scroll rather than forcing the step column wider. */
.ft-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--v-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ft-table th,
.ft-table td {
  border: 1px solid var(--v-border);
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
}
.ft-table th {
  background: var(--v-surface-raised);
  color: var(--v-text-bright);
  font-weight: 600;
}
.ft-table td { color: var(--v-text-secondary); }

/* ---- in somebody else's chair ----
 *
 * Loud on purpose. An administrator who forgets they are impersonating will
 * read a refused write as a broken page, and worse, may believe they are
 * looking at their own view when they are looking at a reviewer's. It spans
 * the full width above every view and cannot be dismissed. */
.viewing-as {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  background: var(--v-accent);
  color: var(--v-on-accent);
  font-size: 12.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--v-accent-border);
}
.viewing-as b { font-weight: 600; }
.viewing-as .ghost {
  border-color: var(--v-on-accent);
  color: var(--v-on-accent);
  flex: none;
}
.va-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v-on-accent);
}

/* ---- everyone's inventory, for an administrator ---- */
.people .person {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  margin-bottom: 6px;
  background: var(--v-surface);
}
.people .person > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.people .person > summary::-webkit-details-marker { display: none; }
.people .person > summary::marker { content: ""; }
.people .person > summary::before {
  content: "\25b8";
  flex: none;
  color: var(--v-muted);
  font-size: 9px;
  transition: transform 120ms ease;
}
.people .person[open] > summary::before { transform: rotate(90deg); }
.people .person > summary:hover { background: var(--v-surface-hover); }
.people .person[open] > summary { border-bottom: 1px solid var(--v-border); }
.person-name { font-weight: 600; color: var(--v-text-bright); }
.person-id { flex: none; }
.people .spacer { flex: 1; }
.people-table { margin: 0; }
.people-table td, .people-table th { padding: 4px 10px; }

/* ---- one block per trajectory, its seats underneath ---- */
.seatblock {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  margin-bottom: 6px;
  background: var(--v-surface);
}
.seatblock > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 12px;
}
.seatblock > summary::-webkit-details-marker { display: none; }
.seatblock > summary::marker { content: ""; }
.seatblock > summary::before {
  content: "\25b8";
  flex: none;
  color: var(--v-muted);
  font-size: 9px;
  transition: transform 120ms ease;
}
.seatblock[open] > summary::before { transform: rotate(90deg); }
.seatblock > summary:hover { background: var(--v-surface-hover); }
.seatblock[open] > summary { border-bottom: 1px solid var(--v-border); }
.seat-traj { font-weight: 600; color: var(--v-text-bright); }
.seatblock .spacer { flex: 1; }
.seat-table { margin: 0; }
.seat-table td { padding: 5px 12px; border-top: 1px solid var(--v-border); }
.seat-table tr:first-child td { border-top: none; }

/* ---- a workbench drawn for somebody else ----
 * Not disguised as your own: a note above it says whose it is, and `inert` in
 * the markup means it cannot be typed in, focused or submitted at all. */
.reading-as-note {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--v-accent-border);
  background: var(--v-surface);
  color: var(--v-text-secondary);
}
.reading-as { opacity: 0.97; }
.reading-as textarea,
.reading-as input { cursor: default; }

/* A row that opens somebody's chair. It is the primary action on this page, so
 * it reads as a link across its whole width rather than hiding a small button
 * at the end of it — the previous version did, and it was invisible. */
.people-table tr.door { cursor: pointer; }
.people-table tr.door:hover td { background: var(--v-surface-hover); }
.people-table tr.door:focus-visible {
  outline: 2px solid var(--v-accent);
  outline-offset: -2px;
}
.door-go {
  color: var(--v-accent);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.55;
}
.people-table tr.door:hover .door-go,
.people-table tr.door:focus-visible .door-go { opacity: 1; }

/* ---- somebody else's review, on their own form ----
 *
 * The same instrument they answered, driven by their stored review. Tinted and
 * labelled so it is never mistaken for a form the reader is filling in, and
 * `inert` in the markup so it cannot be typed in or focused at all. */
.their-form {
  position: relative;
  margin-top: 12px;
  border-left: 3px solid var(--v-accent-border);
  padding-left: 12px;
  opacity: 0.92;
}
.their-form::before {
  content: "their answers \2014 read only";
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-muted);
}
/* The form paints its own panels; inside this block they must not read as
 * cards the reader could act on. */
.their-form .panel {
  background: var(--v-bg);
  border-style: dashed;
}
.their-form textarea {
  resize: none;
  cursor: default;
}
.their-form .choice-list button { cursor: default; }

/* ---- code the agent wrote ----
 * The bash command carries the program text, and it is the only copy in the
 * published trajectory. A reviewer who cannot read it cannot check the work,
 * so every heredoc becomes a clickable artifact on the step. */

.code-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-space-2);
  margin-top: var(--v-space-2);
}

.code-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-accent-border);
  background: var(--v-surface-raised);
  color: var(--v-accent);
  cursor: pointer;
}
.code-link:hover { background: var(--v-surface-hover); filter: brightness(1.12); }
.code-link.on {
  background: var(--v-accent);
  border-color: var(--v-accent-border);
  color: var(--v-on-accent);
  font-weight: 600;
}

.code-glyph { width: 13px; height: 13px; flex: none; }
.code-name { font-family: var(--v-font-mono); }
.code-meta { color: var(--v-dim); font-size: 10.5px; }
.code-link.on .code-meta { color: var(--v-on-accent); opacity: 0.75; }

/* The viewer: opens inline on the page, never as a browser dialog
 * (interface convention 1) — and inside the step it belongs to, so the
 * file appears where the reader is already looking. */
.codeview {
  margin: var(--v-space-3) 0 0;
  padding: var(--v-space-3);
  border: 1px solid var(--v-accent-border);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface-raised);
}

.codeview-head {
  display: flex;
  align-items: center;
  gap: var(--v-space-2);
  margin-bottom: var(--v-space-2);
  flex-wrap: wrap;
}

.code-body {
  margin: 0;
  max-height: 520px;
  overflow: auto;
  background: var(--v-bg);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  padding: var(--v-space-3) 0;
  font-family: var(--v-font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--v-text-secondary);
}

.code-row { display: block; white-space: pre; padding: 0 var(--v-space-3); }
.code-row:hover { background: var(--v-surface-hover); }

.code-ln {
  display: inline-block;
  width: 34px;
  margin-right: var(--v-space-3);
  text-align: right;
  color: var(--v-dim);
  user-select: none;
}

/* ---- the plain-language reference document ----
 *
 * For a reviewer who is expert in the science and does not read code. It is
 * reference material, so it is typeset to be READ — one wide column, prose
 * measure, generous leading — and it is fenced by a banner that says what it
 * is not. The record stays the thing under review.
 */

.paper-pointer {
  display: flex;
  align-items: center;
  gap: var(--v-space-3);
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px dashed var(--v-border-strong);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface);
  color: var(--v-text-secondary);
}

.paper-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--v-border-strong);
  border-left: 3px solid var(--v-accent);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--v-text-secondary);
  max-width: 88ch;
}
.paper-banner .icon-solo { margin-top: 2px; flex: none; }
.paper-banner b { color: var(--v-text-bright); }

.paper { max-width: 74ch; }

.paper-head {
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--v-border);
}

.paper-title {
  margin: 8px 0 14px;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v-text-bright);
}

.paper-abstract {
  font-size: 14px;
  line-height: 1.7;
  color: var(--v-text-secondary);
}

.paper-abstract-label {
  display: block;
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-dim);
}

.paper-section { margin-top: 26px; }

.paper-h {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--v-text-bright);
}

/* The body is the thing being read, so it is the largest running text on the
   site — 15px/1.75 rather than the 13px the rest of the app uses. */
.paper-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--v-text);
  /* feedback 1 and 4 — justified, because this is the one surface on the site
     that is read as a document rather than scanned as an interface. Hyphenation
     with it, or justification opens rivers of white space on a narrow column. */
  text-align: justify;
  hyphens: auto;
}

.paper-foot {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--v-border);
  line-height: 1.65;
}

/* ---- step references inside the reference document ----
 *
 * A paper's citation mark: a raised numeral, quiet enough that a reader who
 * does not want to check the record reads straight past it. It must NOT look
 * like body text and must not look like a link out — clicking opens the step
 * under the paragraph, which is the whole reason it can be this small.
 */

.cites {
  display: inline;
  white-space: nowrap;
  margin-left: 1px;
}

.cite {
  /* ⛔ NOT vertical-align: super. That grows the line box, so every line
     carrying a reference picked up extra leading and the paragraph visibly
     rippled. Raising it with position leaves the line box exactly as tall as
     the prose — the difference between a mark a reader can ignore and one
     they cannot. */
  position: relative;
  top: -0.5em;
  display: inline;
  vertical-align: baseline;
  font-size: 9.5px;
  line-height: 1;
  font-family: var(--v-font-mono);
  padding: 0 1px;
  margin: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--v-dim);
  cursor: pointer;
  transition: color 90ms, background 90ms;
}

/* Several steps on one sentence read as "12,14", not "12 14". */
.cite + .cite::before { content: ","; color: var(--v-dim); }
.cite:hover { color: var(--v-accent); background: var(--v-surface-hover); }
.cite.on {
  color: var(--v-on-accent);
  background: var(--v-accent);
}
.cite:focus-visible { outline: 1px solid var(--v-accent); outline-offset: 1px; }

/* The cited step, opened in place. Indented and bordered so it reads as an
   aside to the paragraph above it, not as the next paragraph. */
.cite-panel {
  margin: 12px 0 4px 0;
  padding: 12px 14px;
  border: 1px solid var(--v-border-strong);
  border-left: 3px solid var(--v-accent);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface);
}

.cite-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cite-panel-n {
  font-family: var(--v-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--v-text-bright);
}

.cite-panel-act {
  font-family: var(--v-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--v-text-secondary);
  word-break: break-word;
}

.cite-panel-env {
  max-height: 260px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.6;
}


/* ---- the trajectory page's type scale ----
 *
 * The same rule the review form follows: what the reviewer must READ is
 * large, and everything naming or framing it is small. On this page the
 * reading is the phase summaries, the plain-language column beside each step,
 * what the step did, and the world's own return — those are set at 14.5-16px.
 * The step numbers, the kind badges, the ACTION/CAME BACK labels and the file
 * meta stay at 10-11px: they are signposts, not text.
 *
 * Set above on each rule rather than as overrides here, so there is one
 * definition per selector. This block is the statement of intent.
 */

/* The lock control on a referee's card in the arbiter's view. */
.lock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--v-border);
}

/* A disabled Edit is the commonest thing a reviewer will meet here, so it has
   to read as "held by someone else", not as "broken". */
button[data-edit][disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- the AI workspace ----
 * The transcript is the product here, so it is typeset to be read back: the
 * question in the reviewer's voice, the reply beside it, and every entry
 * carrying the fact that it is on the record. */

.ai-turn {
  padding: 14px 0;
  border-top: 1px solid var(--v-border);
}
.ai-turn:first-of-type { border-top: 0; }
.ai-turn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.ai-q {
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 550;
  color: var(--v-text-bright);
  padding-left: 12px;
  border-left: 2px solid var(--v-accent);
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.ai-a {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--v-text);
  white-space: pre-wrap;
  max-width: 84ch;
}

/* A failed turn is still a record, and must not look like a success. */
.ai-turn-failed .ai-q { border-left-color: var(--v-danger, #c2554d); }

/* A locked review is read-only. Leaving the controls live would let a reviewer
   type into a form with no way to save — which reads as the save being broken
   rather than as the review being closed. The banner above says why. */
.form-locked .ask,
.form-locked textarea,
.form-locked .choice-list,
.form-locked .seg {
  opacity: 0.7;
}
.form-locked textarea,
.form-locked .choice-list,
.form-locked .seg {
  pointer-events: none;
}

/* What the workspace looked up, under the answer it informed. A citation with
   no visible lookup behind it is exactly what this panel exists to prevent. */
.ai-looks {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--v-border);
}
.ai-look {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.ai-look-tool {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  color: var(--v-accent);
  flex: none;
}
.ai-look-arg { color: var(--v-text-secondary); word-break: break-all; }
.ai-look-failed .ai-look-tool { color: var(--v-danger); }

/* The workspace's replies carry a little markdown. Links open in a new tab so
   a reviewer never loses the form they are part-way through. */
.ai-a a { color: var(--v-accent); text-decoration: underline; text-underline-offset: 2px; }
.ai-a a:hover { background: var(--v-surface-hover); }
.ai-a code {
  font-family: var(--v-font-mono);
  font-size: 13px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
}
.ai-a b { color: var(--v-text-bright); }

/* ---------- the arbiter's decision page ---------- */

.arb-switch { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }

/* One row per question, one column per referee. Several trajectories carry
   three referees, so the columns divide what is left after the question. */
.arb-table { width: 100%; }
.arb-table td, .arb-table th { vertical-align: top; }
.arb-table td:first-child { width: 40%; }
.arb-table th.num, .arb-table td.num { text-align: center; }
.arb-table tr.arb-diff td:first-child { font-weight: 500; }

/* ⛔ A plain cell and a clickable one must render the SAME inner box, or the
   columns stop lining up between an agreed row and a contested one — which is
   the single axis this whole layout exists to provide. Only the chrome differs. */
.arb-take,
.arb-table td > .arb-val,
.arb-table td > .arb-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--v-radius-sm);
  font-family: var(--v-font-mono);
  font-size: 12.5px;
}

/* Convention 4 — what can be clicked looks clickable. */
.arb-take {
  background: var(--v-surface-raised);
  border-color: var(--v-border-strong);
  color: var(--v-text);
  cursor: pointer;
}
.arb-take:hover { border-color: var(--v-accent-border); }
.arb-take:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 1px; }
.arb-take.on {
  background: var(--v-success);
  border-color: var(--v-success-border);
  color: var(--v-success-text, var(--v-bg));
  font-weight: 600;
}
.arb-take.off { background: transparent; border-color: transparent; cursor: default; }

.arb-none { color: var(--v-text-dim); font-style: italic; }
.arb-ruled { font-family: var(--v-font-mono); font-size: 12.5px; color: var(--v-text-bright); }
.arb-open { font-size: 11.5px; color: var(--v-warn, var(--v-text-secondary)); }

/* Prose answers are read, not compared at a glance, so they get reading size
   and a left edge rather than the centred box a scale value gets. */
.arb-table td > .arb-prose,
.arb-take > .arb-prose {
  display: block;
  min-width: 0;
  text-align: left;
  font-family: var(--v-font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.arb-take:has(> .arb-prose) { display: block; min-width: 0; padding: 6px 8px; }

/* ---------- the web search panel ---------- */

.srch-sources { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.srch-bar { display: flex; gap: 8px; align-items: stretch; }
.srch-bar input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--v-font-sans);
  font-size: 14.5px;                 /* reading size: this is text a person writes */
  color: var(--v-text);
  background: var(--v-surface);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
}
.srch-bar input:focus {
  outline: none;
  border-color: var(--v-accent-border);
}
.srch-bar button { flex: none; }

/* One recorded search: what was asked, then what came back. Same shape as a
   workspace exchange, because it is the same kind of record. */
.srch-turn {
  margin-top: 14px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-md);
  overflow: hidden;
}
.srch-turn-failed .srch-q { border-left: 3px solid var(--v-danger, #c2554d); }
.srch-q {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--v-surface);
  border-bottom: 1px solid var(--v-border);
  font-size: 13px;
}
.srch-src {
  font-family: var(--v-font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v-text-secondary);
}
.srch-a { padding: 4px 10px 10px; }

.srch-hit { padding: 10px 0; border-bottom: 1px dashed var(--v-border); }
.srch-hit:last-child { border-bottom: 0; }
.srch-hit-title { font-size: 15px; color: var(--v-text-bright); margin-bottom: 2px; }
.srch-hit-url {
  display: block;
  font-family: var(--v-font-mono);
  font-size: 11.5px;
  color: var(--v-accent);
  text-decoration: none;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.srch-hit-url:hover { text-decoration: underline; }
/* Reading size, like the rest of the prose a reviewer actually reads. */
.srch-hit-body { font-size: 14.5px; line-height: 1.65; color: var(--v-text); white-space: pre-wrap; }
.srch-hit-body a { color: var(--v-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- signing in (authenticated deployment only) ---------- */

.signin-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.signin-card { width: 100%; max-width: 420px; padding: 28px; }
.signin-brand {
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--v-text-bright);
  margin-bottom: 6px;
}
.signin-input {
  width: 100%;
  height: 36px;
  margin: 4px 0 14px;
  padding: 0 10px;
  font-family: var(--v-font-sans);
  font-size: 14.5px;
  color: var(--v-text);
  background: var(--v-bg);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
}
.signin-input:focus { outline: none; border-color: var(--v-accent-border); }
.signin-error {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--v-danger, #c2554d);
}

/* ---------- block markdown in the workspace ---------- */

.md-p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; }
.md-p:last-child { margin-bottom: 0; }
.md-h { margin: 14px 0 6px; color: var(--v-text-bright); font-size: 15px; }
.md-h1 { font-size: 17px; }
.md-list { margin: 0 0 10px; padding-left: 20px; font-size: 14.5px; line-height: 1.7; }
.md-list li { margin: 2px 0; }

/* A reply that answers "what do these columns mean" IS a table. Rendered as
   raw pipes it was unreadable, which is what the feedback showed. */
.md-table {
  width: 100%;
  margin: 10px 0 12px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.md-table th,
.md-table td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--v-border);
  line-height: 1.6;
}
.md-table th { background: var(--v-surface); color: var(--v-text-bright); font-weight: 600; }

.md-pre {
  margin: 10px 0 12px;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--v-bg);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
}
.md-pre code {
  font-family: var(--v-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}
/* The language, when the model named one — a small label rather than syntax
   colouring, which is a separate piece of work. */
.md-pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
  margin-bottom: 6px;
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-text-dim);
}

/* The plain-language summary on a step opened from the brief. The brief is the
   surface read by people who do not read the trace, so the step they open from
   it needs the same plain reading the Material card gives. */
.cite-says {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--v-border);
}

/* ---------- the composer, pinned to the bottom ---------- */

/* ⛔ The box you type in sits at the BOTTOM of a long transcript, which means
   that after a few exchanges it is off the bottom of the screen and you scroll
   to reach it every single time. Sticky keeps it in the viewport while the
   conversation scrolls behind it — the conventional behaviour, and the reason
   nobody scrolls to type in a chat application. */
.composer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 14px;
  padding: 12px 0 10px;
  background: linear-gradient(to top, var(--v-surface-raised) 86%, transparent);
  border-top: 1px solid var(--v-border);
}
.composer textarea {
  width: 100%;
  resize: vertical;
}
.composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.composer-error {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--v-danger, #c2554d);
}

/* A search answer is prose with links in it, not a row of result cards. */
.srch-a { padding: 10px 12px 12px; }
.srch-a a { color: var(--v-accent); text-decoration: underline; text-underline-offset: 2px; }
.srch-a a:hover { background: var(--v-surface-hover); }

/* ---------- the arbiter decides under each question ---------- */

/* It was a table with a Ruling column on the right, which put the decision as
   far from the answers as the page allowed and made a long prose answer a
   column three words wide. One question, its answers, then the decision. */
.arb-q {
  padding: 16px 0;
  border-bottom: 1px solid var(--v-border);
}
.arb-q:last-child { border-bottom: 0; }
.arb-q-text {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--v-text-bright);
}
.arb-q.arb-diff .arb-q-text { font-weight: 500; }

/* Side by side while they fit, stacked when they do not. */
.arb-answers { display: flex; gap: 12px; flex-wrap: wrap; }
.arb-answer {
  flex: 1 1 260px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
}
.arb-who {
  margin-bottom: 4px;
  font-family: var(--v-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-text-dim);
}
.arb-answer .arb-prose { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; }
.arb-answer .arb-val { font-family: var(--v-font-mono); font-size: 14px; color: var(--v-text-bright); }

.arb-ruling { margin-top: 12px; }
.arb-ruling-label {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-text-dim);
}
.arb-ruling-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.arb-pick {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-family: var(--v-font-mono);
  font-size: 12.5px;
  color: var(--v-text);
  background: var(--v-surface-raised);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
  cursor: pointer;
}
.arb-pick:hover { border-color: var(--v-accent-border); }
.arb-pick:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 1px; }
.arb-pick.on {
  background: var(--v-success);
  border-color: var(--v-success-border);
  color: var(--v-success-text, var(--v-bg));
  font-weight: 600;
}
/* Disagreeing with both is a real outcome, not a fallback: it reads as its own
   choice rather than as the one left over. */
.arb-pick-own { font-family: var(--v-font-sans); }
.arb-ruling textarea { width: 100%; margin-top: 8px; }

.arb-agreed { margin-top: 10px; font-size: 13px; color: var(--v-text-dim); }

/* N/A sits apart from the scale, because it is not a point on it. Same height
   and the same hit area — it is a real answer, not a disabled control — but it
   does not read as "6". */
.cap-choices .cap-na {
  flex: 0 0 auto;
  margin-left: auto;
  border-style: dashed;
  color: var(--v-text-secondary);
}
.cap-choices .cap-na.on {
  border-style: solid;
  background: var(--v-surface-raised);
  border-color: var(--v-accent-border);
  color: var(--v-text-bright);
}
.cap-choices .cap-na .choice-key { letter-spacing: 0; }

/* A small table inside the brief. Reading size, like the prose around it — a
   table here is a convenience for comparing a few numbers, not a data dump. */
.paper-table {
  width: 100%;
  margin: 14px 0 16px;
  border-collapse: collapse;
  font-size: 14px;
}
.paper-table th,
.paper-table td {
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--v-border);
}
.paper-table thead th {
  color: var(--v-text-bright);
  font-weight: 600;
  border-bottom: 1px solid var(--v-border-strong);
}
.paper-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- the inventory, as a list ---------- */

.inv-filter {
  width: 100%;
  height: 34px;
  margin-bottom: 12px;
  padding: 0 10px;
  font-family: var(--v-font-sans);
  font-size: 14px;
  color: var(--v-text);
  background: var(--v-bg);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
}
.inv-filter:focus { outline: none; border-color: var(--v-accent-border); }
.inv-table { width: 100%; }
.inv-table td { vertical-align: middle; }

/* ───────────────────────────── the agent's reasoning ──────────────────────
 *
 * Collapsed by default on every action that has it, because a run of 163
 * actions with the chain of thought open is unreadable and the thing a
 * reviewer is checking is what the agent DID. Opening it is one click and no
 * re-render: it is a native <details>, so several can be open at once and the
 * page does not scroll away from the one just clicked.
 *
 * Deliberately quieter than .code-link beside it. A heredoc is the only copy
 * of the program and a reviewer who skips it cannot check the work, so it is
 * accent-coloured and asks to be opened. Reasoning is unverified by
 * construction — no environment return corresponds to it — so it reads as a
 * footnote rather than as evidence. Muted border, no accent, and the tag says
 * whose words they are.
 */

.reason {
  margin-top: var(--v-space-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface);
}

.reason > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--v-text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* The default marker is a filled triangle that sits on the text baseline and
   cannot be coloured; ::before is positioned with the row. */
.reason > summary::-webkit-details-marker { display: none; }
.reason > summary::marker { content: ""; }
.reason > summary::before {
  content: "\25b8";
  flex: none;
  color: var(--v-muted);
  font-size: 9px;
  transition: transform 120ms ease;
}
.reason[open] > summary::before { transform: rotate(90deg); }
.reason > summary:hover { background: var(--v-surface-hover); }
.reason[open] > summary { border-bottom: 1px solid var(--v-border); }

.reason-label { font-weight: 600; letter-spacing: 0.01em; }
.reason-meta { color: var(--v-dim); font-size: 10.5px; }
.reason-tag {
  margin-left: auto;
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--v-border-strong);
  border-radius: 999px;
  font-size: 10px;
  color: var(--v-muted);
  white-space: nowrap;
}

/* Plain text, wrapped, and scrollable rather than endless: one chain of
   thought here runs to 11,000 characters and an un-capped <pre> would bury
   the step below it. The cap is on the BOX, never on the text — the whole of
   it is in the DOM and selectable, which is the difference between a scroll
   bar and a truncation. */
.reason-body {
  margin: 0;
  padding: 10px 12px;
  max-height: 460px;
  overflow: auto;
  font-family: var(--v-font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--v-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Said once above the run, not per step: why there is no Reasoning anywhere
   on this trajectory. Without it, withheld and never-captured look the same. */
.reason-notice {
  margin: var(--v-space-2) 0 0;
  padding: 7px 11px;
  border: 1px solid var(--v-border);
  border-left: 3px solid var(--v-warning-border);
  border-radius: var(--v-radius-sm);
  background: var(--v-surface);
  font-size: 12px;
  color: var(--v-text-secondary);
}
.reason-notice.dim {
  border-left-color: var(--v-border-strong);
  color: var(--v-muted);
}

/* The administrator's switch in the inventory. "Withheld" is the state that
   needs to be visible at a glance down the column, so it is the one that
   carries colour. */
.reason-switch { min-width: 74px; justify-content: center; }
.reason-switch.on {
  background: var(--v-warning-surface);
  border-color: var(--v-warning-border);
  color: var(--v-warning);
  font-weight: 600;
}

/* How many of a phase's actions carry reasoning. Phases start collapsed, so
   without this the reader has to expand all of them to find the few that do. */
.phase-reason {
  flex: none;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--v-border-strong);
  border-radius: 999px;
  font-size: 10px;
  color: var(--v-muted);
  white-space: nowrap;
}

/* The agent's closing account sits apart from the per-step disclosures: it
   belongs to the run, not to a step, so it gets its own margin and a left rule
   rather than sitting flush in a step card. */
.reason.closing {
  margin-top: var(--v-space-3);
  border-left: 3px solid var(--v-border-strong);
}
.reason.closing > summary .reason-label { color: var(--v-text); }