/* ===========================================================================
   terminal.css — THE GREAT FILING (v2 single-column)
   Beige/green monospace government-terminal theme.

   The base skin (Sub-Basement Records Office). css/jurisdictions.css overrides
   the --jx-* custom properties per body.jx-* class as the player ascends; this
   file references those tokens (never hard-codes accent colors) so the reskins
   take effect everywhere automatically.

   v2 LAYOUT: ONE scrolling column of grouped <section class="sec">s built by
   js/render.js (HEADER + goal banner / OPERATIONS / PROCUREMENT / SUBMISSIONS /
   WORKFORCE / PROJECTS, plus hidden MINISTRY / COSMIC / AUDIT shells). The v1
   tab/panel system is gone.

   prefers-reduced-motion is honored: all non-essential motion (scanlines,
   odometer tick, stamp press, flash) is disabled under that query.
   =========================================================================== */

/* ---- Design tokens (defaults = Sub-Basement). Overridden by jurisdictions. - */
:root {
  --paper:        #d8d2bd;
  --paper-2:      #cfc8af;
  --paper-3:      #e6e1cf;
  --ink:          #2b2a22;
  --ink-dim:      #6b6852;
  --rule:         #9a9477;

  --jx-accent:    #2f7d3f;
  --jx-accent-2:  #1f5a2c;
  --jx-glow:      rgba(47, 125, 63, 0.35);
  --jx-screen:    #cdd8c4;

  --amber:        #9a6b1f;
  --red-tape:     #a23b2e;
  --good:         #2f7d3f;

  --mono: "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
          "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;

  --rule-w: 2px;
  --pad: 0.75rem;
  --radius: 2px;
  --maxw: 44rem;     /* single-column reads best at a narrower measure */
}

/* ---- Reset-ish ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 27px,
      rgba(0, 0, 0, 0.025) 27px, rgba(0, 0, 0, 0.025) 28px);
  -webkit-font-smoothing: none;
  text-rendering: optimizeLegibility;
  transition: background-color 600ms ease, color 600ms ease;
}

/* Subtle scanline/CRT overlay over the whole document (decorative). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.04) 1px,
      transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}

h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: 0.02em; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ---- App frame: the single scrolling column ------------------------------ */
#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad);
}
.column {
  display: flex;
  flex-direction: column;
  gap: var(--pad);
}

/* Generic stamped frame look (header, sections, readouts reuse this). */
.frame,
.sec,
.readout-grid,
.readout {
  background: var(--paper-2);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
}
.frame, .sec { padding: var(--pad); }

/* ===========================================================================
   HEADER — the big government letterhead + FP odometer
   =========================================================================== */
#masthead {
  position: relative; /* STEP 5: anchor the absolutely-positioned float layer */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: var(--pad) var(--pad) calc(var(--pad) + 2px);
  background: var(--jx-screen);
  border: var(--rule-w) solid var(--jx-accent-2);
  border-radius: var(--radius);
  box-shadow: inset 0 0 24px var(--jx-glow);
}

/* ===========================================================================
   STEP 5: feedback/juice — event ticker + floating gain chips.
   Fixed-height ring (24 pre-built <li>) + a 12-chip pool; zero DOM growth.
   The ticker scrolls column-reverse so the newest line is at the top and old
   lines fall off the bottom of the clipped box. TEXT is information and stays
   under reduced-motion; only the entrance/rise MOTION is suppressed.
   =========================================================================== */
.event-ticker {
  flex: 1 1 100%;
  order: 99;                 /* sit below the odometer/jurisdiction row */
  display: flex;
  flex-direction: column-reverse; /* newest (most-recently-written) on top */
  justify-content: flex-start;
  max-height: 3.6rem;
  overflow: hidden;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.ticker-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ticker-row.is-empty { display: none; } /* unwritten slots take no space */
.ticker-row.is-new { animation: tickerIn 420ms ease-out; }
@keyframes tickerIn {
  0%   { opacity: 0; transform: translateY(-0.5rem); color: var(--jx-accent); }
  100% { opacity: 1; transform: translateY(0); color: var(--ink-dim); }
}

.float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}
.float-chip {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  white-space: nowrap;
  transform: translateX(-50%);
}
.float-chip.is-spent { display: none; } /* never-used pool slots stay hidden */
.float-fp { color: var(--jx-accent); text-shadow: 0 0 6px var(--jx-glow); }
.float-budget { color: var(--good, #3f7d3a); }
/* floatRise runs once via `forwards` + the class is overwritten on reuse — NO
   per-node JS listener; round-robin reuse re-triggers it by reflow + re-add. */
.float-chip.is-rising { animation: floatRise 1100ms ease-out forwards; }
@keyframes floatRise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-2.4rem); }
}

#odometer-label,
#jurisdiction-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

#odometer {
  display: block;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--jx-accent);
  text-shadow: 0 0 6px var(--jx-glow);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
#odometer.ticked { animation: odoTick 220ms ease-out; }
@keyframes odoTick {
  0%   { color: #eaf6e6; text-shadow: 0 0 14px var(--jx-glow); }
  100% { color: var(--jx-accent); text-shadow: 0 0 6px var(--jx-glow); }
}

#fp-rate {
  display: block;
  font-size: 0.85rem;
  color: var(--jx-accent-2);
  font-variant-numeric: tabular-nums;
}

#jurisdiction {
  display: block;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
}

/* ---- GOAL BANNER (always visible: next jurisdiction + progress) ---------- */
#goal-banner {
  background: var(--paper-3);
  border: var(--rule-w) solid var(--jx-accent-2);
  border-radius: var(--radius);
  padding: 0.5rem var(--pad) 0.6rem;
}
.goal-text {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.goal-track {
  position: relative;
  height: 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.goal-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--jx-accent);
  opacity: 0.55;
  transition: width 300ms linear;
}
.goal-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   SECTIONS — grouped <section class="sec"> blocks, stacked
   =========================================================================== */
.sec { display: flex; flex-direction: column; gap: 0.55rem; }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
}
.sec-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jx-accent-2);
}
.sec-sub {
  font-size: 0.7rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 0.2rem;
}
.subgroup { display: flex; flex-direction: column; gap: 0.45rem; }
.hint {
  font-size: 0.7rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  font-style: italic;
}
.status {
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.warning {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red-tape);
  border: 1px dashed var(--red-tape);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  background: rgba(162, 59, 46, 0.08);
}
.forecast {
  font-size: 0.72rem;
  color: var(--jx-accent-2);
  font-variant-numeric: tabular-nums;
}
.auto-flag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--jx-accent-2);
  text-transform: uppercase;
}
.auto-flag::before { content: "✔ "; }

/* ===========================================================================
   BUTTONS (the [ STAMP ] / BUY / SUBMIT / LOBBY share .btn)
   =========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-3);
  background: var(--jx-accent-2);
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--radius);
  padding: 0.45em 0.9em;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform 60ms ease, box-shadow 60ms ease, background-color 120ms ease;
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover { background: var(--jx-accent); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--ink-dim);
  background: var(--paper-2);
  box-shadow: 0 2px 0 var(--rule);
  border-color: var(--rule);
  opacity: 0.7;
}
/* affordable buys glow green */
.btn.affordable { background: var(--good); }

/* The big STAMP button. */
#stamp-button {
  font-size: 1.4rem;
  padding: 0.9rem 1.8rem;
  letter-spacing: 0.22em;
  width: 100%;
  box-shadow: 0 4px 0 var(--ink);
}
#stamp-button::before { content: "[ "; }
#stamp-button::after  { content: " ]"; }
#stamp-button:active  { box-shadow: 0 0 0 var(--ink); transform: translateY(4px); }

#stamp-caption {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  min-height: 1.2em;
}

/* SUBMIT + LOBBY full-width primary actions. */
.btn.submit, .btn.lobby, .btn.file-requisition {
  width: 100%;
  text-align: center;
}

/* button groups (buy 100/1k/max, ×1/×10/max) lay out inline and wrap. */
.buy-group { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* requisition mode pills (toggle selection). */
.pill-group { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.btn.pill { font-size: 0.74rem; padding: 0.35em 0.7em; }
.btn.pill.selected,
.btn.pill[aria-pressed="true"] {
  background: var(--jx-accent);
  box-shadow: inset 0 0 0 2px var(--paper-3), 0 2px 0 var(--ink);
}

/* small -/+ stepper buttons on the fee row */
.btn.step {
  font-size: 1rem;
  padding: 0.1em 0.55em;
  line-height: 1;
}

/* ===========================================================================
   READOUTS — labelled value cells (OUT-tray / PAPER / BUDGET / rates)
   =========================================================================== */
.readout-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0.5rem var(--pad);
}
.readout {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 0;
  background: transparent;
  padding: 0;
}
.readout .label {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.readout .value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.readout[data-readout="budget"]    .value::before { content: "¤"; color: var(--amber); margin-right: 0.1em; }
.readout[data-readout="budgetrate"].value,
.readout[data-readout="filing"]    .value { color: var(--jx-accent-2); }
/* low/empty paper flagged via render.js toggling .is-low on the cell */
.readout.is-low .value { color: var(--red-tape); }

/* ---- PROCUREMENT price row + trend --------------------------------------- */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.price-row .label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.price-row .value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}
.trend { font-weight: 700; color: var(--ink-dim); }
.trend.up { color: var(--red-tape); }      /* price rising = bad to buy */
.trend.down { color: var(--good); }        /* price falling = good to buy */

/* ---- SUBMISSIONS fee row ------------------------------------------------- */
.fee-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fee-row .label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.fee-row input[type="range"] { flex: 1 1 8rem; min-width: 6rem; }
.fee-row .value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
  min-width: 3.5rem;
  text-align: right;
}

/* ===========================================================================
   PRODUCER / UPGRADE / AUTOMATION ROWS — aggregate, one per tier/item
   =========================================================================== */
.row-list { list-style: none; margin: 0; padding: 0; }

.producer-row,
.upgrade-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.3rem 0.8rem;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px dotted var(--rule);
}
.producer-row:last-child,
.upgrade-row:last-child { border-bottom: 0; }

.producer-row.just-unlocked,
.upgrade-row.just-unlocked { animation: rowReveal 800ms ease-out; }
@keyframes rowReveal {
  0%   { background: var(--jx-glow); }
  100% { background: transparent; }
}

.producer-meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.producer-name { font-weight: 700; }
.producer-flavor {
  font-size: 0.68rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.producer-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-dim);
  align-self: center;
}
.producer-count::before { content: "×"; }
.producer-cost {
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  align-self: center;
}
.producer-cost::before { content: "¤"; }

/* producer rows show name+count on the left, buy group on the right */
.producer-row { grid-template-columns: 1fr auto auto auto; }
.producer-row .buy-group { grid-column: auto; }

/* ===========================================================================
   METERS — bar gauges (MARKET DEMAND, etc.)
   =========================================================================== */
.meter {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  gap: 0.6rem;
}
.meter .label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.meter .track {
  position: relative;
  height: 0.95rem;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  transition: width 200ms linear;
}
.meter[data-meter="demand"] .meter-fill { background: var(--jx-accent); }
.meter .meter-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   OVERLAYS — welcome-back / reskin-flash / ending
   =========================================================================== */
.overlay,
#welcome-back,
#reskin-flash,
#ending {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(20, 22, 16, 0.72);
  backdrop-filter: blur(1px);
}
.overlay[hidden],
#welcome-back[hidden],
#reskin-flash[hidden],
#ending[hidden] { display: none !important; }

.overlay-card {
  max-width: 32rem;
  width: 100%;
  background: var(--paper);
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 8px 0 rgba(0,0,0,0.4);
}
.overlay-card h2 {
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jx-accent-2);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
  margin-bottom: 0.8rem;
}

#reskin-flash .stamp,
#ending .stamp {
  font-size: clamp(1.4rem, 7vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--red-tape);
  border: 6px double var(--red-tape);
  padding: 0.6em 1em;
  transform: rotate(-7deg);
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--paper);
  animation: stampSlam 420ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes stampSlam {
  0%   { transform: rotate(-7deg) scale(2.4); opacity: 0; }
  60%  { transform: rotate(-7deg) scale(0.92); opacity: 1; }
  100% { transform: rotate(-7deg) scale(1); opacity: 1; }
}

#welcome-back .delta { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--jx-accent-2); }

/* ---- Range inputs styled as government-terminal sliders ------------------ */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1rem;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.5rem;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
input[type="range"]::-moz-range-track {
  height: 0.5rem;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.9rem;
  height: 1.1rem;
  margin-top: -0.36rem;
  background: var(--jx-accent-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
input[type="range"]::-moz-range-thumb {
  width: 0.9rem;
  height: 1.1rem;
  background: var(--jx-accent-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
input[type="range"]:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
#fee-slider::-webkit-slider-thumb { background: var(--amber); }
#fee-slider::-moz-range-thumb     { background: var(--amber); }

/* ---- Footer / small print + a11y ----------------------------------------- */
#colophon, .small-print {
  margin-top: var(--pad);
  font-size: 0.66rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  text-align: center;
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ===========================================================================
   prefers-reduced-motion — kill decorative motion, keep state legible
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body, * {
    transition: none !important;
    animation: none !important;
  }
  body::after { display: none; }
  .meter-fill, .goal-fill { transition: none !important; }
  /* STEP 5: drop the floating-chip MOTION entirely, but keep the event-ticker
     TEXT — it is information (the MILESTONES ladder), not decoration. */
  #float-layer { display: none !important; }
}

/* ===========================================================================
   PASS-2 SECTIONS — Ministry / Cosmic / Audit deep-phase controls.
   All reuse the base .sec / .subgroup / .meter / .btn / .row-list grammar;
   these rules only add the few new affordances (quorum markers, hot gauges,
   toggle on-state, posture dist, resolved/owned row states).
   =========================================================================== */

/* Gauge "hot" state (reactor S/F, swarm Compliance Debt near the cap). */
.meter-fill.is-hot { background: var(--red-tape, #b4441f); }
.meter-fill.is-quorum { background: var(--good, #3f7d3a); }

/* Status words that turn warning (SUPERCRITICAL / INJUNCTION / throttle). */
.status.is-warning { color: var(--red-tape, #b4441f); font-weight: 700; }

/* Standing/automation toggle rows: clickable, reflect ON/OFF. */
.toggle-flag {
  cursor: pointer;
  user-select: none;
  opacity: 0.65;
}
.toggle-flag.is-on { opacity: 1; }
.toggle-flag::before { content: "☐ "; }
.toggle-flag.is-on::before { content: "☑ "; }

/* Committee faction rows: name + state on top, support bar with quorum mark. */
.faction-row { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.3rem 0; }
.faction-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.faction-name { font-weight: 700; letter-spacing: 0.06em; }
.faction-state { font-size: 0.7rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.quorum-mark {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--amber, #c98a16);
  pointer-events: none;
}
.faction-row .meter { grid-template-columns: 1fr; }

/* Patronage steppers + split steppers share the compact .step look. */
.btn.patronage-step, .btn.split-step { font-size: 0.74rem; padding: 0.3em 0.6em; }
.split-row { gap: 0.5rem; }

/* Posture distribution (3 mini-bars) inside the active dispute. */
.posture-dist { display: flex; flex-direction: column; gap: 0.3rem; }

/* Row states: resolved findings / liquidated classes / owned forms. */
.finding-row.is-resolved, .liquidate-row.is-resolved { opacity: 0.55; }
.onto-row.is-owned { opacity: 0.7; }
.onto-row.is-owned .onto-state { color: var(--good, #3f7d3a); font-weight: 700; }
.retention-row.is-quorum, .mutation-row.is-quorum { outline: 2px solid var(--good, #3f7d3a); outline-offset: 1px; }

/* Finding / mutation diff prose: smaller, dimmed, italic register. */
.finding-prose, .mutation-diff, .finding-demand, .finding-state {
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.finding-state { font-weight: 700; letter-spacing: 0.08em; }

/* Onto / finding / liquidate / retention rows lay out like producer rows. */
.onto-row, .finding-row, .liquidate-row, .retention-row, .mutation-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-top: 1px dotted var(--rule);
}
.obligation-item { font-size: 0.74rem; color: var(--ink-dim); }