/* Storage node — annunciator panel over a worktop register.
   The panel is dark and wordless until a condition needs the owner.
   Colour is never decoration here: a coloured thing is a lit lamp. */

:root {
  /* Panel: brushed metal, engraved plates, lamps behind frosted glass. */
  --panel:        #14181a;
  --panel-deep:   #0e1113;
  --plate:        #191e20;
  --plate-sunk:   #121618;
  --plate-blank:  #101416;
  --bezel-hi:     #2e3639;
  --bezel-raised: #3b4548;
  --bezel-lo:     #07090a;
  --legend:       #c3cbcf;
  --legend-dim:   #8a949a;

  /* Lamps. Nothing else in the interface may use these. */
  --amber:        #ffb000;
  --amber-wash:   rgba(255, 176, 0, 0.16);
  --red:          #ff5c5c;
  --red-ink:      #c02a1d;   /* the same alarm, legible on the worktop */
  --amber-ink:    #c07a00;   /* the same attention, legible on the worktop */
  --red-wash:     rgba(255, 92, 92, 0.16);
  --green:        #4fc46b;
  --green-wash:   rgba(79, 196, 107, 0.14);

  /* Worktop: the lit surface the register is read on. */
  --worktop:      #f2f3f1;
  --worktop-sunk: #e8eae7;
  --ink:          #16191b;
  --ink-soft:     #565e63;
  --rule:         #d3d7d4;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: 12px;

  /* Filament warm-up. One curve, used for every lamp. */
  --warm: 90ms cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* One committed look: the panel is the instrument, the worktop is the lit
   surface it sits above. Following the viewer's dark preference here would
   merge the two grounds and erase the figure the whole world rests on. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--panel-deep);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces belong to the panel too. */
::selection { background: var(--amber); color: #14181a; }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
* { scrollbar-color: var(--bezel-hi) var(--panel-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel-deep); }
::-webkit-scrollbar-thumb { background: var(--bezel-hi); border: 2px solid var(--panel-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--legend-dim); }

[hidden] { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 8px; top: -48px; z-index: 40;
  padding: 10px 14px;
  background: var(--amber); color: #14181a;
  font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  transition: top var(--warm);
}
.skip:focus { top: 8px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Engraved legend lettering. The plate is stamped, so it is always
   uppercase, always tracked, and never large. */
.legend,
.field__label,
.plate__label,
.test__label,
.rail__tab,
.rail__out,
.section__title,
.register__title,
.gauge__legend,
.headline__legend,
.fact dt {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── Sign in ──────────────────────────────────────────────────────── */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
    var(--panel);
}

.gate__form {
  width: 100%;
  max-width: 27rem;
  padding: 28px 24px 24px;
  background: var(--plate);
  border-top: 1px solid var(--bezel-hi);
  border-bottom: 1px solid var(--bezel-lo);
}

.gate__title {
  margin: 0;
  color: var(--legend);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gate__note {
  margin: 14px 0 26px;
  color: var(--legend);
  font-size: 13px;
  max-width: 34ch;
}

.field { display: block; }
.field__label { display: block; color: var(--legend-dim); margin-bottom: 10px; }

.field__input {
  display: block;
  width: 100%;
  padding: 12px 13px;
  background: var(--plate-sunk);
  color: var(--amber);
  caret-color: var(--amber);
  border: 1px solid var(--bezel-lo);
  border-top-color: #040506;
  font: 400 14px/1.4 var(--mono);
  letter-spacing: 0.04em;
}
.field__input:focus-visible { outline-offset: -1px; }

.field__hint {
  display: block;
  margin-top: 10px;
  color: var(--legend-dim);
  font-size: 12.5px;
}

.field__error {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--red-wash);
  border-left: 1px solid var(--red);
  color: var(--red);
  font-size: 13.5px;
}

/* ─── Plates (the only button in the system) ───────────────────────── */

.plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(var(--bezel-hi), var(--plate) 55%);
  color: var(--legend);
  border: 1px solid var(--bezel-lo);
  border-top-color: var(--bezel-raised);
  font-family: var(--sans);
  cursor: pointer;
  transition: color var(--warm), background-color var(--warm);
}
.plate:hover:not(:disabled) { color: #cfd6d9; }
.plate:active:not(:disabled) {
  background: linear-gradient(var(--plate-sunk), var(--plate));
  border-top-color: var(--bezel-lo);
}
.plate:disabled { cursor: not-allowed; color: var(--legend-dim); background: var(--plate-sunk); }

.plate--wide { width: 100%; margin-top: 24px; }

.icon {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* ─── Annunciator ──────────────────────────────────────────────────── */

/* The console is one instrument, mounted in a darker bay. Capping and
   centring the whole shell keeps the panel, the rail and the worktop on a
   single set of edges at any window width, instead of the strip growing
   past the register it sits above. */
.console {
  width: 100%;
  max-width: calc(68rem + 2 * var(--gutter));
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.annunciator {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
    var(--panel);
  border-bottom: 1px solid var(--bezel-lo);
}

.annunciator__bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr));
  gap: 3px;
}

/* A lamp is dark until its condition is true. Unlit is the resting
   state and reads as "nothing is wrong", so it must still be legible. */
.lamp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  background: var(--plate-sunk);
  border: 1px solid var(--bezel-lo);
  border-top-color: var(--bezel-hi);
  color: var(--legend-dim);
  transition: color var(--warm), background-color var(--warm), border-color var(--warm);
}

/* A blanking plate: the position exists, nothing is wired to it. Solid
   stock, no legend, and none of the top highlight a live plate carries. */
.lamp--blank {
  background: var(--plate-blank);
  border-color: var(--bezel-lo);
  border-top-color: var(--bezel-lo);
}

.lamp__legend {
  font: 600 9.5px/1.2 var(--sans);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lamp__value {
  font: 400 10px/1.2 var(--mono);
  color: var(--legend-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--warm);
}

/* Lit: the plate is washed by its own lamp. */
.lamp.is-lit {
  background:
    radial-gradient(120% 150% at 12% 0%, var(--wash) 0%, transparent 72%),
    var(--plate);
  border-top-color: var(--hue);
  color: var(--hue);
}
.lamp.is-lit .lamp__value { color: var(--hue); }

.lamp--amber { --hue: var(--amber); --wash: var(--amber-wash); }
.lamp--red   { --hue: var(--red);   --wash: var(--red-wash); }
.lamp--green { --hue: var(--green); --wash: var(--green-wash); }

.annunciator__aside {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.test {
  padding: 7px 12px;
  background: var(--plate);
  color: var(--legend-dim);
  border: 1px solid var(--bezel-lo);
  border-top-color: var(--bezel-hi);
  font-family: var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--warm), background-color var(--warm);
}
.test:hover { color: var(--legend); }
.test.is-testing { background: var(--plate-sunk); color: var(--amber); }

.test__hint { display: none; color: var(--legend-dim); font-size: 12.5px; }

.annunciator__read {
  margin: 8px 0 0;
  color: var(--legend);
  font-size: 13px;
}
.annunciator__read:empty { display: none; }

/* When the instrument itself goes silent, the panel names the other
   chambers rather than leaving a dead end. A transfer plate is a way out,
   so it is raised and amber, never one of the recessed guarded controls. */
.failover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.failover__legend {
  color: var(--legend-dim);
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.failover__target {
  color: var(--amber);
  font: 400 12px/1 var(--mono);
}

.transfer {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  padding: 8px 12px;
  background: var(--plate);
  color: var(--amber);
  border: 1px solid var(--bezel-lo);
  border-top-color: var(--amber);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color var(--warm), color var(--warm);
}
.transfer:hover { background: var(--amber); color: #14181a; }
.annunciator__read.is-alarm { color: var(--red); }

/* ─── Rail ─────────────────────────────────────────────────────────── */

.rail {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--bezel-lo);
  border-bottom: 1px solid var(--bezel-lo);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.rail__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 12px;
  background: var(--panel);
  color: var(--legend-dim);
  text-decoration: none;
  transition: color var(--warm), background-color var(--warm);
}
.rail__tab:hover { color: var(--legend); }
.rail__tab[aria-current="page"] {
  background: var(--plate);
  color: var(--amber);
  box-shadow: inset 0 -2px 0 0 var(--amber);
}

/* A guarded control, not a third view: recessed into the rail rather than
   raised out of it, and it names its consequence in alarm red the moment
   you reach for it. */
.rail__out {
  margin-left: auto;
  padding: 13px 14px;
  background: var(--plate-sunk);
  color: var(--legend-dim);
  border: 1px solid var(--bezel-lo);
  border-top-color: var(--bezel-lo);
  border-bottom-color: var(--bezel-hi);
  border-right: 0;
  font-size: 10px;
  font-family: var(--sans);
  cursor: pointer;
  transition: color var(--warm), background-color var(--warm);
}
.rail__out:hover,
.rail__out:focus-visible { color: var(--red); }
.rail__out:active { background: var(--panel-deep); color: var(--red); }

/* ─── Worktop ──────────────────────────────────────────────────────── */

.main {
  flex: 1;
  background: var(--worktop);
  color: var(--ink);
  padding: 20px max(var(--gutter), env(safe-area-inset-right)) 64px max(var(--gutter), env(safe-area-inset-left));
}
.main:focus { outline: none; }

/* Left-registered to the same datum the panel strip uses. */
.view { max-width: 68rem; }

.section__title {
  margin: 0 0 12px;
  color: var(--ink-soft);
}

/* ─── Deposit ──────────────────────────────────────────────────────── */

.deposit { margin-bottom: 28px; }

.plate--deposit {
  width: 100%;
  padding: 17px 18px;
  background: var(--ink);
  color: var(--worktop);
  border: 1px solid var(--ink);
}
.plate--deposit:hover:not(:disabled) { background: #2a2f32; color: var(--worktop); }
.plate--deposit:disabled {
  background: var(--worktop-sunk);
  color: var(--ink-soft);
  border-color: var(--rule);
}

.deposit__note {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}
.deposit__note.is-inhibited { color: var(--red-ink); }
.deposit__note.is-thin { color: var(--amber-ink); }

/* The register's one monumental element. */
.headline { display: none; }

.headline__legend { margin: 0 0 4px; color: var(--ink-soft); }

.headline__figure {
  margin: 0;
  font: 500 clamp(2.25rem, 4.5vw, 3.25rem)/0.95 var(--mono);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.headline__of { margin: 6px 0 0; color: var(--ink-soft); font-size: 12.5px; }

/* ─── Deposit queue ────────────────────────────────────────────────── */

.queue { list-style: none; margin: 0 0 28px; padding: 0; }
.queue:empty { display: none; }

.job {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.job:last-child { border-bottom: 1px solid var(--rule); }

.job__head { display: flex; align-items: baseline; gap: 12px; }

.job__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.job__pct {
  font: 400 12px/1 var(--mono);
  color: var(--ink-soft);
}

.job__track {
  margin-top: 9px;
  height: 3px;
  background: var(--rule);
  overflow: hidden;
}

.job__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 140ms linear;
}

.job.is-thin .job__bar { background: var(--amber-ink); }
.job.is-thin .job__pct { color: var(--amber-ink); }
.job__thin { margin: 9px 0 0; color: var(--amber-ink); font-size: 13px; }

.job.is-failed .job__bar { background: var(--red-ink); }
.job.is-failed .job__pct { color: var(--red-ink); }

.job__error {
  margin: 9px 0 0;
  color: var(--red-ink);
  font-size: 13px;
}

/* ─── Register ─────────────────────────────────────────────────────── */

.register__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}

.register__title { color: var(--ink); }
.register__count { margin: 0; color: var(--ink-soft); font-size: 12.5px; }

.rows { list-style: none; margin: 0; padding: 0; }

.row { border-bottom: 1px solid var(--rule); }

.row__main {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  width: 100%;
  padding: 13px 2px;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--warm);
}
.row__main:hover { background: var(--worktop-sunk); }

.row__name {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.row__size {
  grid-column: 2;
  grid-row: 1;
  font: 400 13px/1.4 var(--mono);
  color: var(--ink-soft);
  white-space: nowrap;
}

.row__id {
  grid-column: 1 / -1;
  font: 400 11.5px/1.4 var(--mono);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The record: pulled open in place, never a modal. */
.row__record {
  padding: 0 2px 16px;
}

.row__field { margin: 0 0 12px; }
.row__field:last-of-type { margin-bottom: 16px; }

.row__key {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-soft);
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.row__val {
  margin: 0;
  font: 400 12.5px/1.5 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.row__acts { display: flex; flex-wrap: wrap; gap: 8px; }

.act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--warm), color var(--warm);
}
.act:hover { background: var(--ink); color: var(--worktop); }
.act[aria-disabled="true"] { border-color: var(--rule); color: var(--ink-soft); cursor: not-allowed; }

.empty {
  margin: 28px 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.plate--more {
  width: 100%;
  margin-top: 20px;
  background: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.plate--more:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }

/* ─── Gauge: the one monumental figure ─────────────────────────────── */

.gauge { margin-bottom: 44px; }

.gauge__legend { margin: 0 0 6px; color: var(--ink-soft); }

.gauge__figure {
  margin: 0;
  font: 500 clamp(3.25rem, 15vw, 5.5rem)/0.92 var(--mono);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.gauge__of { margin: 8px 0 0; color: var(--ink-soft); font-size: 13.5px; }

.gauge__facts,
.ident__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 18px 24px;
  margin: 30px 0 0;
}

.fact { min-width: 0; }
.fact dt { margin-bottom: 6px; color: var(--ink-soft); }
.fact dd {
  margin: 0;
  font: 400 14px/1.4 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.fact--wide dd { font-size: 13px; }
.trunc { overflow-wrap: anywhere; }


/* ─── Placement ────────────────────────────────────────────────────── */

.placement { margin-bottom: 44px; }

.placement__proof {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 12.5px;
}
.placement__proof.is-verified { color: var(--ink); }
.placement__proof.is-broken { color: var(--red-ink); }

.placement__body { display: grid; gap: 28px; }

.dial__wrap { min-width: 0; }

.dial {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin: 0 auto;
}

/* The sticky panel would otherwise land on top of the dial when the
   register jumps here. */
.placement { scroll-margin-top: 13rem; }

.dial__key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 14px 0 0;
  padding: 0;
}

.key { display: inline-flex; align-items: center; gap: 8px; }
.key__mark { width: 22px; height: 10px; flex: none; }
.key__id { font: 500 12.5px/1 var(--mono); color: var(--ink); }
.key__pos {
  color: var(--ink-soft);
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dial__c-legend {
  fill: var(--ink-soft);
  font: 600 9px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dial__c-value { fill: var(--ink); font: 400 11px var(--mono); }

/* Engraved, not drawn: the ring is scale marks on a worktop instrument. */
.dial__track { fill: none; stroke: var(--rule); stroke-width: 1; }
.dial__ticks { stroke: var(--ink-soft); stroke-width: 1; }
.dial__ticks--self { stroke: var(--ink); stroke-width: 1.5; }
.dial__chunk { fill: var(--ink); }
.dial__chunk--on { fill: var(--amber-ink); }
.dial__lead { stroke: var(--amber-ink); stroke-width: 1.5; fill: none; }
.dial__zero { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }

.dial__caption {
  margin: 14px auto 0;
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: 12.5px;
  text-align: center;
}

.placement__side { min-width: 0; }

.picker {
  display: block;
  width: 100%;
  margin-bottom: 22px;
  padding: 11px 12px;
  background: var(--worktop);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font: 400 14px/1.3 var(--sans);
  cursor: pointer;
  appearance: none;
}
.picker:disabled { color: var(--ink-soft); border-color: var(--rule); cursor: not-allowed; }

.holdings { margin: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.holding {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 12px;
  background: var(--worktop);
}
.holding--head { background: var(--worktop-sunk); }
.holding--head dt, .holding--head dd {
  color: var(--ink-soft);
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.holding dt {
  margin: 0;
  font: 500 13px/1.3 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.holding dd { margin: 0; font: 400 13px/1.3 var(--mono); color: var(--ink-soft); }
.holding dd b { font-weight: 500; color: var(--ink); }
.holding__self { color: var(--ink-soft); font: 600 9.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }

/* ─── Chunks ───────────────────────────────────────────────────────── */

.chunks { margin-top: 34px; }

.chunks__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.chunks__title {
  margin: 0;
  color: var(--ink);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chunks__note { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.chunks__note.is-alarm { color: var(--red-ink); }

.restore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.restore__note { margin: 0; color: var(--ink-soft); font-size: 13px; }
.restore__note.is-lost { color: var(--red-ink); }

.chunks__list { list-style: none; margin: 0; padding: 0; }

.chunk {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  width: 100%;
  padding: 11px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--warm);
}
.chunk:hover { background: var(--worktop-sunk); }
.chunk.is-on { background: var(--worktop-sunk); box-shadow: inset 2px 0 0 0 var(--amber-ink); }

.chunk__n { grid-column: 1; font: 400 12px/1.4 var(--mono); color: var(--ink-soft); }
.chunk__hash {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 12.5px/1.4 var(--mono);
  color: var(--ink);
}
.chunk__size { grid-column: 3; font: 400 12.5px/1.4 var(--mono); color: var(--ink-soft); white-space: nowrap; }
.chunk__owners { grid-column: 2 / -1; font: 400 12px/1.4 var(--mono); color: var(--ink-soft); }
.chunk__owners b { font-weight: 500; color: var(--ink); }

/* A chunk the ring cannot account for. Alarm ink means a copy that should
   exist does not; attention ink means a copy exists where it no longer
   belongs, which is work for a migration rather than a fault. */
.chunk--missing { box-shadow: inset 2px 0 0 0 var(--red-ink); }
.chunk--missing.is-on { box-shadow: inset 2px 0 0 0 var(--red-ink); }
.chunk__bad { color: var(--red-ink); }
.chunk__unsure { color: var(--ink-soft); }
.chunk__stray { color: var(--amber-ink); }

.dial__chunk--bad { fill: var(--red-ink); }
.chunk__here { color: var(--ink); }

/* ─── Liveness ─────────────────────────────────────────────────────── */

.topology { margin-bottom: 44px; }
.topology__note { margin: 0 0 16px; max-width: 62ch; color: var(--ink-soft); font-size: 13px; }
.topology__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }

.hop {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule);
}
.hop__from, .hop__to { font: 500 13px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.hop__link { display: flex; align-items: center; color: var(--ink-soft); }
.hop__line { flex: 1; height: 1px; background: currentColor; }
.hop__arrow {
  width: 8px; height: 10px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.hop.is-down .hop__link { color: var(--red-ink); }
.hop.is-down .hop__to { color: var(--red-ink); }
.hop.is-self .hop__link { color: var(--rule); }
/* A split is not a stop: attention, not alarm. */
.hop.is-split .hop__link { color: var(--amber-ink); }
.hop.is-split .hop__to { color: var(--amber-ink); }
.hop.is-split .hop__witness {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.hop__state { color: var(--amber-ink); border-color: currentColor; }
.hop.is-self .hop__arrow { display: none; }

.hop__witness {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.hop__state {
  padding: 5px 9px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hop.is-down .hop__witness {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.hop__state { color: var(--red-ink); border-color: currentColor; }

@media (min-width: 60rem) {
  .placement__body { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start; gap: 36px; }
  .dial { margin: 0; }
  .chunk { grid-template-columns: 2.5rem minmax(0, 34rem) minmax(0, 1fr) auto; }
  .chunk__owners { grid-column: 3; grid-row: 1; }
  .chunk__size { grid-column: 4; }
}

/* ─── Chambers ─────────────────────────────────────────────────────── */

.chambers { margin-bottom: 44px; }
.chambers__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }

.chamber {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--rule);
}

.chamber__id {
  margin: 0;
  grid-column: 1;
  font: 500 15px/1.3 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.chamber__state {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 5px 9px;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.chamber__state.is-ok    { color: var(--ink-soft); border-color: var(--rule); }
.chamber__state.is-fault { color: var(--red-ink); }

.chamber__addr {
  margin: 0;
  grid-column: 1 / -1;
  font: 400 12.5px/1.4 var(--mono);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.chamber__self {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* ─── Drop target ──────────────────────────────────────────────────── */

.drop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(14, 17, 19, 0.88);
}

.drop__label {
  margin: 0;
  padding: 18px 26px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ─── Laptop: the panel spreads, the register breathes ─────────────── */

@media (min-width: 60rem) {
  :root { --gutter: 24px; }

  /* The bank gets the full width so the array stays one unbroken row;
     the test button and its hint sit under it, at the right edge. */
  .annunciator { padding: 12px var(--gutter); }
  .annunciator__aside { margin-top: 6px; align-items: center; justify-content: flex-end; gap: 12px; }
  .test__hint { display: block; text-align: right; }

  .annunciator__bank { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 4px; }
  .lamp { gap: 5px; min-height: 46px; padding: 8px 10px; }
  .lamp__legend { font-size: 10.5px; letter-spacing: 0.13em; }
  .lamp__value { font-size: 11px; }
  .fact--hash { grid-column: span 3; }


  .rail__tab { flex: 0 0 11rem; }


  .main { padding: 36px var(--gutter) 96px; }

  .deposit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; }
  .plate--deposit { width: auto; grid-row: 1; }
  .deposit__note { margin: 0; grid-row: 1; }
  .headline { display: block; grid-row: 1; grid-column: 3; text-align: right; }

  .row__main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 7rem;
    align-items: baseline;
    gap: 18px;
    padding: 12px 2px;
  }
  .row__name { grid-column: 1; }
  .row__id   { grid-column: 2; grid-row: 1; }
  .row__size { grid-column: 3; grid-row: 1; text-align: right; }
}

/* ─── Reduced motion: lamps snap, nothing eases ────────────────────── */

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

/* ─── Sign-in extras ───────────────────────────────────────────────── */

.gate__alt {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  background: none;
  border: 0;
  color: var(--legend-dim);
  font: 400 12.5px/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gate__alt:hover { color: var(--legend); }

/* ─── Identity chip on the rail ────────────────────────────────────── */

.rail__who {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 0 14px;
  color: var(--legend-dim);
  font: 400 11px/1 var(--mono);
  white-space: nowrap;
}
.rail__who:empty { display: none; }
/* When present, the identity chip takes the auto margin, so seal stays put. */
.rail__who:not(:empty) + .rail__out { margin-left: 0; }

/* ─── Accounts ─────────────────────────────────────────────────────── */

.account-new { margin-bottom: 44px; max-width: 32rem; }

.account-form .field { margin-bottom: 16px; }

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 18px;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}
.check input { width: 16px; height: 16px; accent-color: var(--ink); }

.accounts__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--rule);
}

.account__head { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.account__name { font: 500 15px/1.2 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.account__role {
  padding: 3px 8px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.account__role.is-admin { color: var(--ink); border-color: var(--ink); }
.account__you { color: var(--ink-soft); font: 600 9.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }

.account__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.act--danger { border-color: var(--rule); }
.act--danger:hover { background: var(--red-ink); border-color: var(--red-ink); color: var(--worktop); }