/* The Foam Drawer — operator console layer ---------------------------------

   An admin / dashboard / back-office flavour of the Foam Drawer. Requires
   tokens.css, loaded first. Self-contained otherwise: load app.css OR
   drawer.css, not both (section 1 repeats drawer.css's base and material
   so a console needs no site layouts).

   Extrapolations the website never needed (see references/design.md, "App /
   operator console"):

   - App shell: a fixed sidebar is a separate foam block, divided from the
     work area by a vertical groove (2px foam-groove + 1px lip), the same
     seam the site draws between parts.
   - Selection = the yellow floor. The segmented switcher, filter segments,
     the current page keycap and a ticked checkbox are small shallow cuts
     whose floor turns Signal when chosen (the pocket-button hover, made
     sticky). Selected table rows get only a faint lift of the slab.
   - Notches: a count that needs attention in the sidebar nav is a tiny cut
     (yellow floor, 2px wall) holding the number — the only way yellow can
     reach the foam under the Cut-Through Rule. An error count is an Alarm
     notch.
   - Inputs are shallow cuts you type into (foam-groove floor, 3px wall),
     focus = the Signal ring. Secondary buttons are keycaps; the screen's
     one primary action is a small pull (44px).
   - An empty list is a shallow pocket with no tool in it: groove floor,
     not yellow, because empty is not a state that asks for anything.
   - Capacity/load bars are hard-stop stripes (repeating-linear-gradient
     with no blend) so they read as the sparkline's discrete bars.
     Technically a "gradient" in CSS, never a gradation — the one place the
     No-Gradients rule had to be read by intent rather than by letter.
   - Counters are stencil numerals (the Numeral voice) in one slab, cells
     split by dashed rules — one pocket, never a card grid.

   STATE VOCABULARY (colour is always backed by shape):
     ok        ●  plain chalk ink          active, in sync, completed, delivered
     off       ○  softer ink               disabled, paused, idle, blocked by
                                           an operator on purpose
     attention    triangle with "!",       stuck, stale, cooldown, near limit,
                  Signal ink               pending too long
     error     ■  inverted: dark ink on    failed, out of sync, unreachable,
                  an Alarm block; the row  revoked — something is broken now
                  gets Alarm ink + a 3px
                  Alarm left edge
   On paper (card tools) yellow ink is unreadable, so attention there is the
   warning triangle in bold ink; error keeps the Alarm block. Yellow means
   attention or selection — never "ok", never decoration, never a whole
   panel on the foam. No decorative dots anywhere: ● and ○ stay because
   they carry state. */

/* 1. base and material (as in drawer.css) =============================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--foam);
  color: var(--on-foam);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus { outline: none; }

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

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

p { margin: 0; text-wrap: pretty; }

h1, h2, h3 { margin: 0; }

strong { font-weight: 650; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px 1px 6px;
  border-radius: 4px;
  background: var(--code-on-foam);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.35);
}

kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: 2px 7px 3px;
  border-radius: 5px;
  background: var(--slab);
  color: var(--on-slab);
  box-shadow: inset 2px 2px 0 #000;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

/* a key chord never breaks between its keys */
.chord { white-space: nowrap; }

/* a cue to more: a text link with an arrow, under the Signal stroke */
.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 0;
  font-weight: 700;
  text-decoration: underline 2px var(--link-line);
  text-underline-offset: 5px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--signal);
  color: var(--on-signal);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus-visible { top: 12px; }

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

/* the cut: a pocket in the foam ----------------------------------------- */

/* The yellow base under a hard inner wall on the top and left edges, as a
   cut through closed-cell foam looks from above. */
.cut {
  position: relative;
  border-radius: var(--cut);
  background: var(--signal);
  box-shadow: inset 5px 5px 0 var(--foam-wall), 0 1px 0 var(--foam-lip);
  display: block;
  padding: 9px 4px 4px 9px;
}

/* a tool lying in its pocket */
.tool {
  display: block;
  position: relative;
  border-radius: 4px;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.tool--slab { background: var(--slab); color: var(--on-slab); }
.tool--card { background: var(--card); color: var(--on-card); }

/* a groove: the line where two foam blocks meet */
.groove {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 2px solid var(--foam-groove);
  border-bottom: 1px solid var(--foam-lip);
}

/* stencilled label */
.label {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* the tag of origin: a die-cut paper tag with printed fields and no eyelet
   or dot (a dot reads as a status light) */
/* a tag never breaks across lines: a torn tag reads as two scraps. More
   facts than fit take a second tag. */
.tags { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.tag {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tag li {
  position: relative;
  padding: 4px 10px;
  background: var(--card);
  color: var(--on-card);
  border-left: 1px dashed var(--card-rule);
}

.tag li:first-child {
  border-left: 0;
  border-radius: 3px 0 0 3px;
  font-weight: 750;
}

.tag li:last-child { border-radius: 0 3px 3px 0; }

.strip__icons { display: flex; gap: 8px; }

/* an icon button is a small square pocket; hovering reveals the base */
.pocket-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--cut);
  cursor: pointer;
  color: var(--on-foam);
  background: var(--foam-groove);
  box-shadow: inset 3px 3px 0 var(--foam-wall);
  transition: background 200ms ease, color 200ms ease;
}

.pocket-btn:hover { background: var(--signal); color: var(--on-signal); }

.pocket-btn svg { width: 19px; height: 19px; }

/* the pull: the one yellow action on a page, cut into the foam like every
   instrument — flat base under the hard wall */
.pull {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 3px 24px 0 23px;
  border-radius: var(--cut);
  background: var(--signal);
  color: var(--on-signal);
  box-shadow: inset 5px 5px 0 var(--foam-wall), 0 1px 0 var(--foam-lip);
  font-family: var(--font-body);
  font-weight: 750;
  font-size: 18px;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 160ms ease;
}

.pull:hover { background: var(--signal-deep); }
.pull svg { width: 20px; height: 20px; }

/* a solid terminal caret */
.caret {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--on-slab);
}

.sample {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-slab-soft);
}

.tool--card .sample { color: var(--on-card-soft); }

.tool__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }

/* the key card: a laminated reference card lying in its pocket */
.keys { width: 100%; border-collapse: collapse; text-align: left; }

.keys th, .keys td { padding: 11px 10px; border-top: 1px solid var(--card-rule); vertical-align: middle; }

.keys thead th {
  padding-top: 4px;
  border-top: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-card-soft);
}

.keys tbody td:first-child { width: 36%; }
.keys tbody td:last-child { font-size: 15px; line-height: 1.5; }
.keys .plus { color: var(--on-card-soft); padding: 0 2px; }

/* code printed on the card: the foam's code tint reads as a smudge on
   laminate, so it is plain monospace ink; the command column is bold */
.keys code { padding: 0; background: none; box-shadow: none; }
.keys td:first-child code { font-weight: 600; }

/* 2. console ============================================================= */

[hidden] { display: none !important; }

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

/* consoles are denser than the site: 14px body */
body { font-size: 14px; line-height: 1.5; }

.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 18px 18px 22px;
  border-right: 2px solid var(--foam-groove);
  box-shadow: 1px 0 0 var(--foam-lip);
  overflow-y: auto;
}

.side__name { font-size: 34px; line-height: 0.9; }
.side__what { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--on-foam-softer); }

/* a segmented control: a shallow cut, the chosen segment on the yellow floor */
.seg {
  display: inline-flex;
  padding: 4px 4px 4px 6px;
  gap: 2px;
  border-radius: var(--cut);
  background: var(--foam-groove);
  box-shadow: inset 3px 3px 0 var(--foam-wall);
}

.seg a, .seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 1px 10px 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--on-foam-soft);
  font: 600 13px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.seg a:hover, .seg button:hover { color: var(--on-foam); }
.seg [aria-current], .seg [aria-pressed="true"] { background: var(--signal); color: var(--on-signal); font-weight: 700; }
.seg .n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; opacity: 0.75; }

.side .seg { display: flex; }
.side .seg a { flex: 1; justify-content: center; padding: 1px 6px 0; }

.side__topic {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-foam-softer);
  margin-bottom: 4px;
}

.nav { display: flex; flex-direction: column; }

.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 2px;
  color: var(--on-foam-soft);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border-top: 2px solid var(--foam-groove);
}

.nav a:first-child { border-top: 0; }
.nav a:hover { color: var(--on-foam); }
.nav a:hover > span:first-child,
.nav a[aria-current="page"] > span:first-child { text-decoration: underline 2px var(--link-line); text-underline-offset: 5px; }
.nav a[aria-current="page"] { color: var(--on-foam); }
.nav .count { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--on-foam-softer); }

/* a count that needs attention: a tiny cut showing the yellow floor */
.notch {
  display: inline-flex;
  align-items: center;
  min-width: 22px;
  justify-content: center;
  padding: 2px 6px 1px 7px;
  border-radius: 4px;
  background: var(--signal);
  color: var(--on-signal);
  box-shadow: inset 2px 2px 0 var(--foam-wall);
  font: 700 11.5px/1.3 var(--font-mono);
}

.notch--err { background: var(--alarm); color: var(--on-alarm); }
.notch .mark { width: 10px; height: 10px; }
.notch .mark--err { width: 8px; height: 8px; }

.nav .cnt { display: inline-flex; gap: 6px; align-items: center; }

.side__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 2px solid var(--foam-groove);
  box-shadow: inset 0 1px 0 var(--foam-lip);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--on-foam-softer);
}

.side__foot b { color: var(--on-foam-soft); font-weight: 600; }
.side__foot .sample { color: var(--on-foam-softer); }

/* work area --------------------------------------------------------------- */

.main { padding: 22px 32px 40px; min-width: 0; }

.view { display: flex; flex-direction: column; gap: 22px; }
.view[hidden] { display: none; }

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--foam-groove);
  box-shadow: 0 1px 0 var(--foam-lip);
}

.head__left { display: flex; flex-direction: column; gap: 10px; }
.head__row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }

.head__title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.head__lead { font-size: 14.5px; color: var(--on-foam-soft); max-width: 72ch; }
.head__right { display: flex; align-items: center; gap: 10px 14px; }
.head__meta { font-size: 13px; color: var(--on-foam-softer); text-align: right; line-height: 1.4; }
.head__meta b { color: var(--on-foam-soft); font-weight: 600; }

.pocket-btn { width: 40px; height: 40px; }
.pocket-btn svg { width: 17px; height: 17px; }

/* the screen's one primary action, at console size */
.pull--sm { min-height: 44px; padding: 3px 18px 0 18px; font-size: 15px; gap: 9px; box-shadow: inset 4px 4px 0 var(--foam-wall), 0 1px 0 var(--foam-lip); }
.pull--sm svg { width: 17px; height: 17px; }

/* section heads lying on the foam, above a pocket */
.sect { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sect__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sect__title { font-size: 16px; font-weight: 750; letter-spacing: -0.01em; }
.sect__note { font-size: 13px; color: var(--on-foam-softer); }
.sect__note a { color: var(--on-foam-soft); font-weight: 600; text-decoration: underline 2px var(--link-line); text-underline-offset: 4px; }

.cols { display: grid; gap: 22px 26px; align-items: start; }
.cols--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.cols--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cols--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* counters: one slab, cells split by dashed rules, engraved numerals ------ */

.meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 0 12px; }

.meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 20px 4px;
  border-left: 1px dashed var(--slab-rule);
  min-width: 0;
}

.meter:first-child { border-left: 0; }

.meter__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-slab-soft); }
.meter__n { font-family: var(--font-label); font-weight: 800; font-size: 50px; line-height: 0.9; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.meter__n small { font-size: 26px; color: var(--on-slab-soft); font-weight: 700; margin-left: 4px; }
.meter__sub { font-size: 13px; color: var(--on-slab-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter__sub b { color: var(--on-slab); font-weight: 650; }
.meter .spark { margin-top: 2px; }
.meter--att .meter__n, .meter--att .meter__sub, .meter--att .meter__sub b,
.meter__sub.att, .meter__sub.att b { color: var(--signal); }
.meter--err .meter__n, .meter--err .meter__sub, .meter--err .meter__sub b { color: var(--alarm); }

.spark svg { display: block; width: 100%; height: 18px; fill: var(--on-slab-soft); }
.spark--att svg { fill: var(--signal); }
.spark--err svg { fill: var(--alarm); }

.slab-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 10px;
  border-top: 1px dashed var(--slab-rule);
  font-size: 12.5px;
  color: var(--on-slab-soft);
}

.slab-foot b { color: var(--on-slab); font-weight: 650; }
.slab-foot .mono { font-family: var(--font-mono); font-size: 12px; }

/* state marks --------------------------------------------------------------- */

.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.st::before { font-size: 9px; line-height: 1; width: 9px; text-align: center; }
.mark, .st--att::before, .st--err::before { display: inline-block; flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--mark-att) center / contain no-repeat; mask: var(--mark-att) center / contain no-repeat; vertical-align: -1px; }
.mark--err, .st--err::before { -webkit-mask-image: var(--mark-err); mask-image: var(--mark-err); width: 9px; height: 9px; }
.st--ok { color: var(--on-slab); }
.st--ok::before { content: "●"; }
.st--off { color: var(--on-slab-soft); font-weight: 500; }
.st--off::before { content: "○"; }
.st--att { color: var(--signal); }
.st--att::before { content: ""; }
.st--err {
  padding: 1px 7px 1px 6px;
  border-radius: 2px;
  background: var(--alarm);
  color: var(--on-alarm);
  font-weight: 750;
}
.st--err::before { content: ""; }

.tool--card .st--ok { color: var(--on-card); }
.tool--card .st--off { color: var(--on-card-soft); }
.tool--card .st--att { color: var(--on-card); font-weight: 750; }

/* the inverted chalk block of the audit event, for event kinds; errors on Alarm */
.op { display: inline-block; padding: 0 6px; background: var(--on-slab); color: var(--slab); font-weight: 700; }
.op--soft { background: none; color: var(--on-slab-soft); font-weight: 500; }
.op--err { background: var(--alarm); color: var(--on-alarm); }

/* the data table: a slab in a pocket --------------------------------------- */

.dt { width: 100%; border-collapse: collapse; font-size: 13px; }

.dt th {
  position: relative;
  padding: 11px 10px 9px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-slab-soft);
  white-space: nowrap;
  border-bottom: 1px dashed var(--slab-rule);
}

.dt th.sorted { color: var(--on-slab); }
.dt th.sorted::after { content: " ↓"; letter-spacing: 0; }

.dt td {
  padding: 0 10px;
  height: 40px;
  border-top: 1px solid var(--slab-row);
  white-space: nowrap;
  vertical-align: middle;
}

.dt tbody tr:first-child td { border-top: 0; }
.dt :is(th, td):first-child { padding-left: 18px; }
.dt :is(th, td):has(> .chk) { width: 44px; }
.dt :is(th, td):last-child { padding-right: 18px; text-align: right; }
.dt .mono { font-family: var(--font-mono); font-size: 12.5px; }
.dt .soft { color: var(--on-slab-soft); }
.dt th.num { text-align: right; }
.dt td.num { text-align: right; font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dt .clip { max-width: 0; width: 34%; overflow: hidden; text-overflow: ellipsis; }
.dt .sub { display: block; font-size: 11.5px; font-weight: 450; color: var(--on-slab-soft); line-height: 1.2; margin-top: 1px; }
.dt td.two { height: 48px; line-height: 1.25; }

.dt tbody tr:hover td { background: rgba(230, 227, 220, 0.035); }
.dt tr.is-sel td { background: var(--slab-row); }

/* attention row: only the cells that explain it turn Signal */
.dt .att { color: var(--signal); }

/* error row: Alarm ink across the row and a 3px Alarm edge */
.dt tr.is-err td { color: var(--alarm); }
.dt tr.is-err td .sub, .dt tr.is-err td.soft { color: var(--alarm-soft); }
.dt tr.is-err td:first-child { box-shadow: inset 3px 0 0 var(--alarm); }
.dt tr.is-err .st--err { color: var(--on-alarm); }

/* off row: everything drops to soft ink */
.dt tr.is-off td { color: var(--on-slab-soft); }

/* row actions: quiet text, the stroke on hover */
.acts { display: inline-flex; gap: 14px; justify-content: flex-end; }
.acts a, .acts button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--on-slab-soft);
  font: 600 12.5px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.acts a:hover, .acts button:hover { color: var(--on-slab); text-decoration: underline 2px var(--signal); text-underline-offset: 4px; }
.dt tr.is-err .acts a { color: var(--on-slab); }

/* a checkbox is a tiny engraved cut; ticked, its floor is yellow */
.chk {
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 3px;
  background: #0d0e0f;
  box-shadow: inset 2px 2px 0 #000, 0 0 0 1px rgba(230, 227, 220, 0.18);
  cursor: pointer;
}
.chk:checked, .chk:indeterminate {
  background: var(--signal) no-repeat center / 12px;
  box-shadow: inset 2px 2px 0 var(--signal-deep), 0 0 0 1px var(--signal);
}
.chk:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231d1f22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3 5 8.6l4.6-5'/%3E%3C/svg%3E"); }
.chk:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='%231d1f22' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E"); }

/* the bulk bar: a band across the top of the slab while rows are ticked */
.bulk {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  border-bottom: 1px dashed var(--slab-rule);
  font-size: 13px;
  color: var(--on-slab-soft);
}
.bulk b { color: var(--on-slab); font-weight: 700; }
.bulk .spacer { flex: 1; }

/* keycap buttons: secondary actions */
.key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px 3px 11px;
  border: 0;
  border-radius: 5px;
  background: var(--foam);
  color: var(--on-slab);
  box-shadow: inset 2px 2px 0 #000;
  font: 600 12.5px/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.key:hover { background: var(--foam-lip); }
.key[aria-current], .key.is-on { background: var(--signal); color: var(--on-signal); box-shadow: inset 2px 2px 0 var(--signal-deep); font-weight: 750; }
.key[disabled] { color: var(--on-slab-soft); opacity: 0.55; cursor: default; }
.key--sq { min-width: 28px; justify-content: center; padding-inline: 6px; font-family: var(--font-mono); }
/* a key that breaks something: the label says so, in words, before the click */
.key--danger::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 1px; background: var(--alarm); }

/* the table foot: counts and pages */
.pager { display: flex; align-items: center; gap: 6px; }
.pager .gap { color: var(--on-slab-soft); padding: 0 2px; }

/* filters on the foam ------------------------------------------------------- */

.filters { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }

.field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 2px 12px 0 13px;
  border-radius: var(--cut);
  background: var(--foam-groove);
  box-shadow: inset 3px 3px 0 var(--foam-wall);
  color: var(--on-foam-softer);
  font-size: 13.5px;
}
.field svg { width: 15px; height: 15px; flex: none; }
.field input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--on-foam);
  font: 500 13.5px var(--font-body);
  outline: none;
}
.field input::placeholder { color: var(--on-foam-softer); }
/* a real search field (so browsers don't offer saved logins), without WebKit's own chrome */
.field input[type="search"] { -webkit-appearance: none; appearance: none; }
.field input[type="search"]::-webkit-search-decoration,
.field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.field--search { width: 300px; }
.field--select { color: var(--on-foam-soft); font-weight: 600; cursor: pointer; }
.field--select::after { content: "▾"; font-size: 11px; color: var(--on-foam-softer); margin-left: 4px; }
.field--select b { color: var(--on-foam); font-weight: 650; }
.field kbd { font-size: 11px; padding: 0 5px; min-width: 0; }
.filters .spacer { flex: 1; }
.filters__note { font-size: 13px; color: var(--on-foam-softer); }

/* terminal-style feed ------------------------------------------------------ */

.feed { padding: 12px 18px 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; }
.feed__bar { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--slab-rule); color: var(--on-slab-soft); white-space: nowrap; }
.feed__bar b { color: var(--on-slab); }
.feed__live::before { content: "● "; color: var(--on-slab); }
.feed ol { margin: 0; padding: 0; list-style: none; }
.feed li { display: grid; grid-template-columns: 9ch 9ch minmax(0, 1fr); gap: 12px; white-space: nowrap; }
.feed li > :last-child { overflow: hidden; text-overflow: ellipsis; }
.feed time { color: var(--on-slab-soft); }
.feed .k { text-align: center; }
.feed .hot { color: var(--signal); }
.feed li:has(.op--err) .hot { color: var(--alarm); }
.feed b { color: var(--on-slab); font-weight: 700; }
.feed .dim { color: var(--on-slab-soft); }
.feed .hl { background: var(--signal); color: var(--on-signal); padding: 0 3px; }
.feed .caret { height: 1.1em; }

/* a key card list (paper) */
.kv { padding: 8px 16px 10px; }
.kv .keys th, .kv .keys td { padding: 8px 6px; font-size: 13px; }
.kv .keys thead th { font-size: 11px; padding-top: 6px; white-space: nowrap; }
.kv .keys tbody td:first-child { width: auto; }
.kv .keys tbody td:last-child { font-size: 13px; text-align: right; }
.kv .keys .mono { font-family: var(--font-mono); font-size: 12.5px; }
.kv .keys .num { text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
.kv .keys:not(:has(thead)) tbody tr:first-child td { border-top: 0; }
.kv .keys .soft { color: var(--on-card-soft); }
.kv__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 6px 2px; border-top: 1px solid var(--card-rule); font-size: 12.5px; color: var(--on-card-soft); }
.kv .key { background: var(--card); color: var(--on-card); box-shadow: inset 0 0 0 1px var(--card-rule), inset 2px 2px 0 var(--card-rule); }
.kv .key:hover { background: #e4e0d6; }

/* a list of things needing a hand, lying on the foam */
.todo { margin: 0; padding: 0; list-style: none; }
.todo li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 11px 0 12px;
  border-top: 2px solid var(--foam-groove);
  font-size: 13.5px;
  color: var(--on-foam-soft);
}
.todo li:first-child { border-top: 0; padding-top: 2px; }
.todo b { display: block; color: var(--on-foam); font-weight: 650; }
.todo .mono { font-family: var(--font-mono); font-size: 12.5px; }
.todo .notch { margin-top: 1px; min-width: 20px; padding: 2px 0 1px 2px; }
.todo .more { padding: 0; font-size: 13px; white-space: nowrap; }

/* capacity bars: sixty narrow bars of fill, like the sparklines */
.cap { display: grid; grid-template-columns: 10ch minmax(0, 1fr) auto 10ch; gap: 0 14px; align-items: center; padding: 7px 0; font-family: var(--font-mono); font-size: 12.5px; }
.cap + .cap { border-top: 1px solid var(--slab-row); }
.cap__name { color: var(--on-slab); }
.cap__bar { height: 12px; background: repeating-linear-gradient(90deg, rgba(230,227,220,.12) 0 3px, transparent 3px 5px); position: relative; }
.cap__bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--on-slab-soft) 0 3px, transparent 3px 5px); }
.cap--att .cap__bar i { background: repeating-linear-gradient(90deg, var(--signal) 0 3px, transparent 3px 5px); }
.cap--att :is(.cap__name, .cap__v) { color: var(--signal); }
.cap__v { text-align: right; color: var(--on-slab); }
.cap__s { text-align: right; white-space: nowrap; }
.caps { padding: 8px 18px 6px; }

.meter-inline { display: inline-flex; align-items: center; gap: 8px; }
.meter-inline i { display: inline-block; width: 64px; height: 8px; background: repeating-linear-gradient(90deg, rgba(230,227,220,.14) 0 2px, transparent 2px 4px); position: relative; }
.meter-inline i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: repeating-linear-gradient(90deg, var(--on-slab-soft) 0 2px, transparent 2px 4px); }
.att .meter-inline i::after, .meter-inline.att i::after { background: repeating-linear-gradient(90deg, var(--signal) 0 2px, transparent 2px 4px); }
tr.is-err .meter-inline i::after { background: repeating-linear-gradient(90deg, var(--alarm) 0 2px, transparent 2px 4px); }

/* an empty pocket: nothing lies in it, so no yellow shows */
.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 20px 18px 22px;
  border-radius: var(--cut);
  background: var(--foam-groove);
  box-shadow: inset 5px 5px 0 var(--foam-wall), 0 1px 0 var(--foam-lip);
  color: var(--on-foam-softer);
  font-size: 13.5px;
}
.empty b { color: var(--on-foam-soft); font-weight: 650; font-size: 14px; }

.tool .sample { white-space: nowrap; }
.cut--flat { padding: 7px 3px 3px 7px; box-shadow: inset 4px 4px 0 var(--foam-wall), 0 1px 0 var(--foam-lip); }

/* 1280 and a little under: tighten, never scroll the page sideways */
@media (max-width: 1340px) {
  .app { grid-template-columns: 224px minmax(0, 1fr); }
  .main { padding: 20px 24px 36px; }
  .meter { padding-inline: 16px; }
  .meter__n { font-size: 44px; }
  .dt :is(th, td) { padding-inline: 8px; }
  .dt .hide-md { display: none; }
  .field--search { width: 240px; }
}