/* Swiss industrial print. One substrate, one accent.

   Paper and carbon ink are the brand's own values, close to the style's (#EAE8E3, #111). Hazard
   red is the only accent and it is used for what a person has to look at: a gate that is
   waiting, a halted run, a refusal, a warning stripe. It is 3.84:1 on this paper, which passes
   for large type, plates and rules and fails for small text, so red never carries small text:
   anything small is carbon ink.

   Every state is a shape and a word, never colour alone: a solid square is halted, a triangle is
   waiting, a hollow square is quiet, a dashed square is not reporting.

   All values on the page are real. The unit ids, sequence numbers, hashes and counts are the
   aggregator's own, and nothing is drawn to look like data. */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("fonts/archivo-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --paper: #e9eae4;
  --paper-2: #dedfd8;
  --paper-3: #c9cbc2;
  --ink: #111111;
  --ink-2: #4a4d4f;
  --ink-3: #5e6567;
  --red: #e61919;
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.4 var(--display); -webkit-font-smoothing: antialiased; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
code, .mono { font-family: var(--mono); }
.micro { font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.dim { color: var(--ink-3); }
a { color: inherit; }
.wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 16px 80px; }

/* The blueprint grid: a dark parent with a 1px gap and paper cells draws every dividing line
   without a single border declaration. */
.grid { display: grid; gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.grid > * { background: var(--paper); min-width: 0; }

header.bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 3px solid var(--ink); margin-bottom: 18px; }
header.bar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
header.bar .brand img { display: block; }
header.bar .brand b { font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
header.bar .tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
header.bar .sync { color: var(--ink-2); }
header.bar .sync[data-bad="true"] { color: var(--ink); font-weight: 500; text-decoration: underline wavy var(--red) 2px; text-underline-offset: 4px; }

.btn { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 11px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* State shapes. Drawn in CSS, and always beside the word. */
.g { display: inline-block; width: 0.78em; height: 0.78em; flex: none; }
.g-halted { background: var(--red); }
.g-waiting { background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g-quiet { border: 2px solid var(--ink); }
.g-stale { border: 2px dashed var(--ink-3); }
.g-reset { background: var(--ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.tag { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); padding: 3px 9px 3px 8px; font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; background: var(--paper); white-space: nowrap; }
.tag.inv { background: var(--ink); color: var(--paper); }

/* The plate: the one number, set as large as the page allows. */
.plate { border: 2px solid var(--ink); background: var(--paper); margin-bottom: 18px; }
.plate .main { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 clamp(14px, 2.4vw, 28px); padding: 14px clamp(14px, 2vw, 22px); }
.plate .num { font: 900 clamp(4rem, 8vw, 6.4rem)/0.8 var(--display); letter-spacing: -0.06em; margin-left: -0.03em; font-variant-numeric: tabular-nums; }
.plate .word { font: 900 clamp(1.5rem, 3.4vw, 2.7rem)/0.95 var(--display); letter-spacing: -0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.plate .word small { display: block; margin-top: 8px; font: 500 12px/1.5 var(--mono); letter-spacing: 0.08em; color: var(--ink-2); text-transform: uppercase; max-width: 60ch; }
.plate .counts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-width: 1px 0 0; }
.plate .counts .v { font-size: 26px; }
.counts > div { padding: 10px 14px 12px; }
.counts .v { font: 500 34px/1.05 var(--mono); }
.counts .k { margin-top: 4px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.plate[data-state="waiting"] { border-top: 10px solid var(--red); }
.plate[data-state="waiting"] .num { color: var(--red); }
.plate[data-state="halted"] { background: var(--red); }
.plate[data-state="halted"] .main { color: var(--paper); }
.plate[data-state="halted"] .word small { color: var(--ink); background: var(--paper); width: fit-content; padding: 6px 9px; }
.plate[data-state="flag"] { border-top: 10px solid var(--ink); }
.plate[data-state="stale"] { border-style: dashed; }
.plate[data-state="stale"] .num { color: transparent; -webkit-text-stroke: clamp(2px, 0.5vw, 5px) var(--ink); }

h2.sec { margin: 26px 0 8px; font: 900 clamp(1.1rem, 2.2vw, 1.5rem)/1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h2.sec .micro { font-weight: 500; }

/* The queue: what needs a person, most urgent first. */
.queue { border: 2px solid var(--ink); background: var(--paper); }
.qrow { display: grid; grid-template-columns: 172px 92px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--ink); cursor: pointer; }
.qrow:last-child { border-bottom: none; }
.qrow:hover { background: var(--paper-2); }
.qrow.halt { border-left: 10px solid var(--red); }
.qrow.gate { border-left: 10px solid var(--red); }
.qrow.dark { border-left: 10px dashed var(--ink-3); }
.qrow.reset { border-left: 10px solid var(--ink); }
.qrow .clock { font: 500 22px/1 var(--mono); font-variant-numeric: tabular-nums; }
.qrow.gate .clock, .qrow.halt .clock { color: var(--red); }
.qrow .what { min-width: 0; }
.qrow .what .a { font: 500 15px/1.25 var(--mono); overflow-wrap: anywhere; }
.qrow .what .b { color: var(--ink-2); margin-top: 3px; }
.qrow .how { text-align: right; max-width: 34ch; }
.qrow .cmd { display: inline-flex; gap: 6px; align-items: center; font: 400 12px/1.3 var(--mono); }
.qrow .cmd code { background: var(--paper-2); border: 1px solid var(--ink); padding: 3px 6px; overflow-wrap: anywhere; }
.qclear { padding: 18px 14px; color: var(--ink-2); }

.facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.fact { padding: 12px 14px 14px; }
.fact .k { color: var(--ink-3); margin-bottom: 6px; }
.fact .v { font: 900 22px/1.05 var(--display); letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.fact .d { margin-top: 5px; color: var(--ink-2); font: 400 12px/1.4 var(--mono); overflow-wrap: anywhere; }
.fact.flag .v { color: var(--red); }

/* The pulse: how many actions the wall judged, and which way. Bars on a baseline, thin, with
   the three outcomes stacked: allowed in grey, gated in ink, refused in red. */
.pulse { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.chart { border: 2px solid var(--ink); background: var(--paper); padding: 12px 14px 8px; }
.chart .top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; display: inline-block; }
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: 170px; border-bottom: 2px solid var(--ink); }
.bars.small { height: 26px; gap: 1px; border-bottom-width: 1px; }
.bars .col { display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start; }
.bars .col span { display: block; width: 100%; }
.c-allow { background: var(--paper-3); }
.c-gate { background: var(--ink); }
.c-block { background: var(--red); }
.axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--ink-3); }
.feed { border: 2px solid var(--ink); background: var(--paper); }
.feed .head { padding: 10px 14px; border-bottom: 2px solid var(--ink); }
.feed .item { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--paper-3); align-items: baseline; }
.feed .item:last-child { border-bottom: none; }
.feed .item .t { color: var(--ink-3); }
.feed .item code { overflow-wrap: anywhere; }
.feed .item .m { color: var(--ink-2); margin-top: 2px; }
.feed .none { padding: 16px 14px; color: var(--ink-2); }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.toolbar input { font: 400 13px/1 var(--mono); padding: 9px 11px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); min-width: 220px; flex: 1 1 220px; max-width: 360px; border-radius: 0; }
.units { border: 2px solid var(--ink); background: var(--paper); }
.urow { display: grid; grid-template-columns: 166px minmax(0, 1.6fr) 150px 150px minmax(120px, 1fr) 96px 104px; gap: 6px 16px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--ink); cursor: pointer; text-decoration: none; }
.urow:last-child { border-bottom: none; }
.urow:hover { background: var(--paper-2); }
.urow.head { cursor: default; background: var(--paper-2); color: var(--ink-3); padding-top: 7px; padding-bottom: 7px; }
.urow.head:hover { background: var(--paper-2); }
.urow .n { font: 800 15px/1.15 var(--display); text-transform: uppercase; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.urow .n small { display: block; font: 400 11px/1.3 var(--mono); color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.urow .p { font: 400 12px/1.3 var(--mono); }
.urow .w { font: 400 12px/1.3 var(--mono); }
.urow .w small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.urow .w.none { color: var(--ink-3); }
.urow .num { font: 500 14px/1.2 var(--mono); text-align: right; }
.urow .num b { font-weight: 800; }
.urow .last { color: var(--ink-2); text-align: right; }
.empty, .error { padding: 60px 0; color: var(--ink-2); }
.error { color: var(--ink); font-weight: 800; text-transform: uppercase; }

/* Digest: what changed while nobody was looking. */
.digest { border: 2px solid var(--ink); background: var(--paper-2); padding: 12px 14px; margin-bottom: 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: start; }
.digest ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }

/* A unit's own page. */
.back { display: inline-block; margin: 2px 0 14px; }
.uhead { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: end; padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; }
.uhead h1 { margin: 4px 0 0; font: 900 clamp(1.8rem, 5vw, 3.6rem)/0.92 var(--display); letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.strip { background: var(--ink); color: var(--paper); padding: 10px 14px; font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.stripe { height: 16px; background: repeating-linear-gradient(135deg, var(--red) 0 12px, var(--ink) 12px 24px); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
dl.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
dl.spec.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
dl.spec > div { background: var(--paper); padding: 10px 14px 12px; }
dl.spec dt { color: var(--ink-3); margin-bottom: 3px; }
dl.spec dd { margin: 0; font: 400 13px/1.35 var(--mono); overflow-wrap: anywhere; }
.rules summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.rules summary::-webkit-details-marker { display: none; }
.rules summary > div { background: var(--paper); padding: 10px 14px 12px; }
.rules summary .n { font: 500 28px/1 var(--mono); }
.rules summary .l { color: var(--ink-3); margin-top: 4px; }
.rules summary:hover > div { background: var(--paper-2); }
.rules .toggle { display: block; padding: 8px 0; color: var(--ink-2); }
.rules .toggle::before { content: "[ + ] "; }
.rules[open] .toggle::before { content: "[ - ] "; }
.rules .lists { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; padding: 12px 0; font-size: 13px; }
.rules .lists dt { color: var(--ink-3); }
.rules .lists dd { margin: 0; overflow-wrap: anywhere; font-family: var(--mono); }
.rules .none { color: var(--ink-3); }
table.t { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper); }
table.t th { text-align: left; padding: 7px 12px; background: var(--paper-2); color: var(--ink-3); border-bottom: 1px solid var(--ink); }
table.t td { padding: 8px 12px; border-bottom: 1px solid var(--paper-3); font: 400 13px/1.35 var(--mono); overflow-wrap: anywhere; vertical-align: top; }
table.t tr:last-child td { border-bottom: none; }
.timeline { margin: 0; padding: 0; list-style: none; border: 2px solid var(--ink); background: var(--paper); }
.timeline li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--paper-3); align-items: baseline; font-size: 14px; }
.timeline li:last-child { border-bottom: none; }
.timeline time { color: var(--ink-3); }
.timeline li[data-quiet="true"] { color: var(--ink-3); font-size: 13px; }
.timeline li[data-flag="true"] { box-shadow: inset 8px 0 0 var(--red); }
.timeline .who { font-weight: 800; }
.timeline .tag { padding: 1px 7px 1px 6px; font-size: 11px; margin-right: 6px; }
.timeline li.new { box-shadow: inset 8px 0 0 var(--red); }
.nothing { padding: 16px 14px; color: var(--ink-2); border: 2px solid var(--ink); background: var(--paper); }

/* Wall mode: a screen across a room, where the plate earns its size. */
body.wall .plate .main { align-items: end; gap: 0 clamp(16px, 3vw, 44px); padding: clamp(14px, 2vw, 26px) clamp(14px, 2.4vw, 30px) clamp(12px, 1.6vw, 20px); }
body.wall .plate .num { font-size: clamp(7.5rem, 21vw, 17rem); line-height: 0.76; margin-left: -0.04em; }
body.wall .plate .word { font-size: clamp(2.1rem, 6.4vw, 5.6rem); line-height: 0.9; letter-spacing: -0.04em; }
body.wall .plate .word small { margin-top: 14px; }
body.wall .plate .counts .v { font-size: 34px; }
body.wall .plate[data-state="waiting"] { border-top-width: 14px; }
body.wall header.bar { border-bottom-width: 1px; margin-bottom: 10px; }
.wallgrid { display: grid; gap: 16px; }
.wallfeed { border: 2px solid var(--ink); background: var(--paper); }
.wallfeed .item { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--ink); align-items: baseline; font: 800 clamp(1.1rem, 2.6vw, 2.2rem)/1.1 var(--display); letter-spacing: -0.02em; }
.wallfeed .item:last-child { border-bottom: none; }
.wallfeed .item .t { font: 500 14px/1 var(--mono); color: var(--ink-3); letter-spacing: 0; }
.wallfeed .item code { font-weight: 500; }
.banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--red); color: var(--paper); padding: 22px 24px 26px; font: 900 clamp(2rem, 6.5vw, 6rem)/0.92 var(--display); letter-spacing: -0.04em; text-transform: uppercase; border-top: 6px solid var(--ink); overflow-wrap: anywhere; }
.banner small { display: block; margin-top: 10px; font: 500 14px/1.3 var(--mono); letter-spacing: 0.08em; color: var(--ink); background: var(--paper); width: fit-content; padding: 5px 9px; }

@media (max-width: 860px) {
  .plate .main { grid-template-columns: 1fr; gap: 6px; }
  .plate .num { font-size: clamp(4rem, 20vw, 6rem); }
  body.wall .plate .num { font-size: clamp(7rem, 38vw, 12rem); }
  .plate .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate .counts > div:nth-child(n + 3) { border-top: 1px solid var(--ink); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .qrow { grid-template-columns: 1fr auto; }
  .qrow .how { grid-column: 1 / -1; text-align: left; max-width: none; }
  .qrow .what { grid-column: 1 / -1; order: 3; }
  .urow { grid-template-columns: 1fr auto; }
  .urow.head { display: none; }
  .urow .p, .urow .spark { grid-column: 1 / -1; }
  .urow .num, .urow .last { text-align: left; }
  .uhead { grid-template-columns: 1fr; }
  dl.spec, dl.spec.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules summary > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rules .lists { grid-template-columns: 1fr; gap: 2px; }
  .rules .lists dd { margin-bottom: 8px; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
  .digest { grid-template-columns: 1fr; }
  .wallfeed .item { grid-template-columns: 1fr; gap: 4px; }
}

/* Motion says one thing: something just changed. A state change slams the plate once, in two
   hard steps, and a new history row gets a red edge for a moment. Nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .plate.flash { animation: slam 0.7s steps(2, end) 1; }
  @keyframes slam { 0% { background: var(--ink); } 50% { background: var(--red); } 100% { background: initial; } }
  .timeline li.new, .feed .item.new { animation: edge 3s ease-out 1 forwards; }
  @keyframes edge { 0% { box-shadow: inset 8px 0 0 var(--red); } 100% { box-shadow: inset 0 0 0 var(--red); } }
  .banner { animation: rise 0.25s steps(3, end) 1; }
  @keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
}

/* What became of the gate a link named. */
.gatenote { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; padding: 12px 14px; margin-bottom: 14px; border: 2px solid var(--ink); background: var(--paper-2); }
.gatenote.open { border-left: 10px solid var(--red); background: var(--paper); }
.gatenote.done { border-left: 10px solid var(--ink); }
.gatenote.unknown { border-left: 10px dashed var(--ink-3); }
@media (max-width: 860px) { .gatenote { grid-template-columns: 1fr; } }

.who { display: inline-flex; align-items: center; gap: 8px; }
.who[hidden] { display: none; }

/* Org administration */
.orgadmin { margin: 0 0 28px; }
.orgadmin h3.micro { margin: 18px 0 6px; }
.orgadmin td.end { text-align: right; }
.orgadmin .tag { margin: 0; }
form.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 10px 0; }
form.inline label { display: grid; gap: 4px; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
form.inline label.check { display: flex; align-items: center; gap: 6px; }
form.inline input:not([type=checkbox]) { font: 14px var(--mono); padding: 8px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); min-width: 230px; text-transform: none; letter-spacing: 0; }
.handover { border: 3px solid var(--ink); padding: 14px; margin: 0 0 14px; display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; background: var(--paper); }
.handover h3 { margin: 0 0 8px; font: 800 16px var(--display); }
.handover dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: baseline; }
.handover dd { margin: 0; font: 500 16px var(--mono); overflow-wrap: anywhere; }
.handover svg { width: 180px; height: 180px; background: #fff; }
.handover h3 { display: inline-block; margin-right: 12px; }

.posture td.verified, .posture td.attested { color: var(--ink); }
.posture td.unverified { color: var(--ink-3); }
.posture td.failed { color: var(--red); font-weight: 800; }

/* --- the front page and the wall: a queue you work -------------------------------------------------
   Same substrate and the same single accent. Every state is a glyph and a word: solid square halted,
   triangle waiting, dashed square no contact, hollow ring done. */
.g-ok { background: var(--ink); border-radius: 50%; width: 0.6em; height: 0.6em; }
.g-done { border: 2px solid var(--ink-3); border-radius: 50%; }
body.ops .wrap { max-width: 1760px; padding-bottom: 12px; }
body.ops { overflow-y: auto; }
/* A flex column, not a grid with fixed rows: the digest and the tabs come and go, and the panes must always be the part that takes the rest of the height and scrolls inside. */
body.ops #root { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 90px); min-height: 560px; }
body.ops #root > * { flex: none; }
body.ops #root > .op-panes { flex: 1 1 auto; min-height: 0; }
.ops-sync { background: var(--ink); color: var(--paper); padding: 6px 12px; }
.op-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: stretch; }
.op-top:empty { display: none; }
.op-counter { display: grid; gap: 2px; padding: 6px 12px; border: 2px solid var(--ink); min-width: 150px; }
.op-counter .big { font: 800 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.op-counter .sub { color: var(--ink-3); }
.op-counter.act.on { background: var(--red); border-color: var(--red); color: var(--paper); }
.op-counter.act.on .sub { color: var(--paper); }
.op-counter.health.on { border-style: dashed; }
.op-counter.review.on { border-style: dotted; }
.op-counter:not(.on) .big { color: var(--ink-3); }
.op-top .btn { align-self: center; margin-left: auto; }
.op-digest { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; border: 1px solid var(--ink); padding: 6px 12px; background: var(--paper-2); }
.op-digest:empty { display: none; }
.op-digest b { font: 800 13px/1 var(--display); text-transform: uppercase; }
.op-digest .k { display: inline-flex; gap: 5px; align-items: baseline; }
.op-digest .k i { font: 500 15px/1 var(--mono); font-style: normal; }
.op-digest .btn { margin-left: auto; padding: 4px 9px; }
.op-tabs { display: none; gap: 6px; }
.op-panes { display: grid; grid-template-columns: minmax(300px, 3fr) minmax(0, 5fr) minmax(300px, 3fr); gap: 10px; min-height: 0; }
.op-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); border: 2px solid var(--ink); min-height: 0; min-width: 0; background: var(--paper); }
.op-pane > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
.op-pane h2 { margin: 0; font: 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin-right: auto; }
.op-pane .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.op-pane .btn { padding: 4px 8px; }
.op-scroll { overflow: auto; min-height: 0; }
.op-grp { padding: 7px 12px; background: var(--paper-2); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; gap: 8px; align-items: baseline; }
.op-grp:first-child { border-top: 0; }
.op-grp b { font: 800 12px/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.op-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 12px; border-bottom: 1px solid var(--paper-3); cursor: pointer; align-items: start; }
.op-item:hover, .op-urow:hover { background: var(--paper-2); }
.op-item[aria-selected="true"], .op-urow[aria-selected="true"] { background: var(--paper-3); box-shadow: inset 4px 0 0 var(--ink); }
.op-item .g { margin-top: 4px; }
.op-item .t { font: 700 14px/1.25 var(--display); overflow-wrap: anywhere; }
.op-item .t code, .op-work code { font: 500 13px/1.3 var(--mono); }
.op-item .u { color: var(--ink-3); font: 400 12px/1.3 var(--mono); }
.op-item .age { font: 800 17px/1.1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.op-item .who { grid-column: 2 / -1; font: 400 12px/1.3 var(--mono); color: var(--ink-3); }
.op-item.resolved .t { color: var(--ink-3); font-weight: 500; }
.op-new { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 2px 4px; margin-left: 6px; vertical-align: 2px; }
.op-qempty { padding: 14px 12px; color: var(--ink-3); }
.op-more { display: block; width: 100%; padding: 9px; border: 0; border-bottom: 1px solid var(--ink); background: var(--paper-2); cursor: pointer; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
.op-more:hover { background: var(--paper-3); }
.op-work { padding: 14px 16px 24px; display: grid; gap: 16px; align-content: start; }
.op-work h3 { margin: 0; font: 800 22px/1.15 var(--display); overflow-wrap: anywhere; }
.op-wsub { color: var(--ink-3); font: 400 12px/1.4 var(--mono); margin-top: 2px; overflow-wrap: anywhere; }
.op-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ink); }
.op-step { padding: 8px 10px; border-right: 1px solid var(--ink); display: grid; gap: 2px; }
.op-step:last-child { border-right: 0; }
.op-step .n { color: var(--ink-3); }
.op-step b { font: 700 14px/1.2 var(--display); }
.op-step.cur { background: var(--ink); color: var(--paper); }
.op-step.cur .n { color: var(--paper-3); }
.op-step.done b::after { content: "  done"; font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.op-sec { display: grid; gap: 8px; }
.op-sec > .micro { color: var(--ink-3); border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.op-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.op-facts dt { color: var(--ink-3); font: 500 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.op-facts dd { margin: 0; font: 400 13px/1.5 var(--mono); overflow-wrap: anywhere; }
.op-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.op-actions .btn.primary, .op-actions a.btn { background: var(--ink); color: var(--paper); padding: 8px 14px; text-decoration: none; }
.op-actions a.btn.off { opacity: 0.45; cursor: not-allowed; }
.op-cmd { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.op-note { margin: 0; font: 400 12px/1.45 var(--mono); color: var(--ink-3); max-width: 64ch; }
.op-note a { color: var(--ink); }
.op-banner { padding: 10px 12px; border: 2px solid var(--ink); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.op-banner.ok { background: var(--paper-2); }
.op-banner.wait { border-style: dashed; }
.op-banner b { font: 800 14px/1.2 var(--display); }
.op-banner span { font: 400 12px/1.4 var(--mono); }
.op-flash { padding: 8px 12px; background: var(--red); color: var(--paper); font: 500 12px/1.4 var(--mono); }
.op-bars { display: grid; gap: 6px; }
.op-bar { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 36px; gap: 8px; align-items: center; font: 400 12px/1.2 var(--mono); }
.op-bar i { display: block; height: 10px; background: var(--ink); }
.op-bar .v { text-align: right; }
.op-tl { list-style: none; margin: 0; padding: 0; }
.op-tl li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--paper-3); font: 400 12px/1.4 var(--mono); }
.op-tl time { color: var(--ink-3); }
.op-fsum { display: grid; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ink); }
.op-statebar { display: flex; height: 10px; border: 1px solid var(--ink); }
.op-statebar i { display: block; height: 100%; }
.op-statebar .a { background: var(--ink); }
.op-statebar .b { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px); }
.op-statebar .c { background: var(--red); }
.op-fcounts, .op-ftotals { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.op-fcounts span, .op-ftotals span { display: inline-flex; gap: 5px; align-items: baseline; }
.op-fcounts b, .op-ftotals b { font: 500 14px/1 var(--mono); }
.op-fsearch { display: grid; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--ink); }
.op-fsearch input { width: 100%; padding: 5px 8px; border: 2px solid var(--ink); background: var(--paper); font: 400 13px var(--mono); color: var(--ink); }
.op-urow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "g nm rt" "g sp gt"; gap: 3px 10px; padding: 8px 12px; border-bottom: 1px solid var(--paper-3); cursor: pointer; align-items: center; }
.op-urow .g { grid-area: g; align-self: start; margin-top: 4px; }
.op-urow .nm { grid-area: nm; min-width: 0; }
.op-urow .rt { grid-area: rt; font: 500 12px/1.2 var(--mono); text-align: right; white-space: nowrap; }
.op-urow .sp { grid-area: sp; display: flex; gap: 8px; align-items: center; min-width: 0; }
.op-urow .gt { grid-area: gt; font: 500 12px/1.3 var(--mono); text-align: right; white-space: nowrap; }
.op-urow .nm b { display: block; font: 700 13px/1.2 var(--display); overflow-wrap: anywhere; }
.op-urow small { display: block; font: 400 11px/1.3 var(--mono); color: var(--ink-3); }
.op-urow .sp svg { flex: 1 1 60px; min-width: 40px; height: 22px; display: block; }
.op-urow .sp small { flex: none; }
.op-urow .rt.hot { color: var(--red); }
.op-ev { display: grid; grid-template-columns: 58px 14px minmax(0, 1fr); gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--paper-3); align-items: baseline; }
.op-ev time { font: 400 11px var(--mono); color: var(--ink-3); }
.op-ev div { font: 400 12px/1.35 var(--mono); overflow-wrap: anywhere; }
body.wall .op-panes { grid-template-columns: 1fr; }
body.wall #op-pane-work, body.wall #op-pane-fleet { display: none; }
body.wall .op-pane .chips { display: none; }
body.wall .op-item { padding: 16px 20px; grid-template-columns: 26px minmax(0, 1fr) auto; }
body.wall .op-item .t { font-size: 26px; }
body.wall .op-item .u, body.wall .op-item .who { font-size: 16px; }
body.wall .op-item .age { font-size: 34px; }
body.wall .op-grp { padding: 12px 20px; }
body.wall .op-grp b { font-size: 18px; }
body.wall .op-counter .big { font-size: 46px; }
@media (max-width: 1100px) {
  body.ops #root { display: block; height: auto; }
  body.ops #root > * { margin-bottom: 10px; }
  .op-tabs { display: flex; margin: 8px 0; }
  .op-panes { grid-template-columns: 1fr; }
  .op-pane { max-height: 78vh; }
  .op-pane[hidden] { display: none; }
}