/* face-desk.css — the desk's faces as study 03's morning paper, on the chassis (ADR-032 §3.6 · §3.9; FACE-DK,
   build-wave-4): the plant page (#page-owner), the store (#page-store), a machine (#page-machine), Setup
   (#page-setup) and the baseline with its printed tally sheet (#page-baseline).

   The concept these rules carry (§3.0, the desk's part of it): a paper of record, read once and slowly. Every figure
   sits at reading size inside its terms — what it counts, the sections it covers, "as at" its moment, what it does
   not prove — and no figure is set larger than the words that qualify it (S03 Gate A; X-7). Ink on white; no colour
   is spent on the desk at all, because colour is lateness alone and no desk figure is a lateness: a state is told by
   its words, its weight and its rule — an ink rule for what needs a person, a dashed pencil rule for what the
   record does not hold yet (§3.4), a muted word for what nobody can stand behind ("count off"). One family with
   tabular figures (X-6 · X-8: no monospace on codes, tags or column names). A person's words — a note, a name as
   written — are the only text set above reading size on the desk, because the words that explain outrank the
   numbers that count (S03's type row); they carry no letter-spacing and no case change (§3.8).

   The rules of this sheet (§3.9): every selector is scoped under one of the five desk pages; no token is declared
   (:root is the chassis's); only §3.1's tokens are used — never the built sheet's carried names, which this sheet no
   longer needs. The FACE-CH carry block that sat at this sheet's foot is gone with the moved rules it lifted (X-19).
   Targets: 48 px at every width (§3.1 allows 40 at 900 px and above; 48 is kept so every desk target also passes the
   phone). The chassis's shared components (the stage line, cards, stamps, read-back and result blocks with their
   two marks, buttons, inputs, errors, focus, motion) are app.css's; this sheet only places and sizes them here. */

/* ======================================================================================== the paper (every desk page) */
#page-owner .terms, #page-store .terms { max-width: 42rem; margin: var(--s-2) 0 0; color: var(--ink-2); }
#page-owner .limit, #page-store .limit { font-style: italic; }            /* what a figure does not prove: S03 D-04 */
#page-owner h3, #page-store h3, #page-machine h3, #page-baseline h3 { margin-top: var(--s-6); }
#page-owner code, #page-store code { font-weight: 700; color: var(--ink); }
/* the desk's cards and stamps keep their inner margin (app.css zeroes a list item's padding, which outranks .card's
   and .stamp's): a card that is one control pads the control, so the whole card stays the target */
#page-store .cards > li.card > button, #page-machine .cards > li.card > button, #page-setup .cards > li.card > button {
  padding: var(--s-3) var(--s-4);
}
#page-baseline .cards > li.card, #page-owner .stamps > li.stamp, #page-store .stamps > li.stamp,
#page-setup .stamps > li.stamp { padding: var(--s-3) var(--s-4); }

/* a standing note, the record does not verify: ink words in a full 2 px ink frame, never red (§3.2 (e)); never a
   side stripe (the POLISH round, P0-2) */
#page-owner .standing-note, #page-store .standing-note {
  margin: var(--s-3) 0; padding: var(--s-2) var(--s-3);
  border: 2px solid var(--ink); border-radius: var(--radius-s);
  font-weight: 700;
}
#page-store .standing-note .big { margin: 0; }
#page-store .standing-note p:last-child { margin-bottom: 0; font-weight: 400; }

/* ======================================================================================== the plant page (#page-owner) */
/* 1 · the record's standing, the paper's headline: first, ink, over one continuous 3 px ink rule — the record has
   answered. Not yet answered (reading) or not read at all: pencil words over a dashed pencil rule (§3.4). The record
   broken: the same ink words, and an ink rule in the margin beside them. */
#owner-standing {
  max-width: 44rem; margin: var(--s-2) 0 0; padding-bottom: var(--s-3);
  border-bottom: 3px solid var(--ink);
  font-size: var(--step-2); font-weight: 700; line-height: 1.25;
}
#owner-standing[data-standing="reading"], #owner-standing[data-standing="unknown"] {
  color: var(--pencil); font-weight: 500; border-bottom: 2px dashed var(--pencil);
}
#owner-standing[data-standing="broken"] { padding: var(--s-2) var(--s-3); border: 2px solid var(--ink); border-radius: var(--radius-s); }
#owner-standing-terms:empty { display: none; }

/* the filter and Refresh: one row, under the headline */
#page-owner .desk-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); margin: var(--s-5) 0 0; }
#page-owner .desk-filter { display: flex; flex-direction: column; gap: var(--s-1); color: var(--ink-2); font-weight: 600; }
#page-owner .desk-filter select { width: auto; min-width: 14rem; max-width: 100%; margin-top: 0; }

/* 2 · the counted stage line (the chassis's component, app.css): each count at reading size over its mark, in its
   station's word, a zero shown as 0 and muted; a station holding open tickets is an ink mark, an empty one hollow. */
#owner-stages { margin-top: var(--s-4); }
#owner-stages .stage-count { font-size: var(--step-0); font-weight: 700; }
#owner-stages .stage-count.is-zero { font-weight: 600; }
#owner-stages > li.holds::before { background: var(--ink); border-color: var(--ink); }
#owner-stages .stage-name { overflow-wrap: anywhere; }
/* Reopened: a flag at station 1 — a return glyph, the word and its count — never a column (§3.5) */
#owner-stages .stage-flag { grid-column: 2 / -1; margin-top: var(--s-1); padding: 0 var(--s-1); border: 1.5px solid var(--ink); border-radius: var(--radius-s); }
#owner-stages .flag-glyph { font-weight: 800; }
@media (min-width: 900px) {
  /* the mark's offset under its count is the chassis's own now (X-22, fixed in app.css by the POLISH round) */
  #owner-stages .stage-name { padding: 0 var(--s-1); }
  /* the fifth station is a siding below the line (app.css moves its mark down 0.75 rem): its word hangs below it */
  #owner-stages > li:nth-child(5) .stage-name { margin-top: calc(var(--s-2) + 0.75rem); }
}
#page-owner .off-line { margin: var(--s-3) 0 0; color: var(--ink-2); }
/* the sum, written out — a figure at reading size, inside the terms under it */
#owner-sum { margin: var(--s-4) 0 0; font-variant-numeric: tabular-nums; }
#owner-sum .sum-figure { font-weight: 700; }
#owner-sum .sum-refused { display: block; margin-top: var(--s-2); font-weight: 700; }       /* its words alone (P0-2) */
#owner-sum:empty { display: none; }

/* 4 · the tickets: a register, one ruled line per ticket, each line a control that opens its stamps; the number at
   reading size (X-7), then the stage in the record's words, then where — the section and the machine as written. */
#owner-tickets { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--rule); }
#owner-tickets > li { border-bottom: 1px solid var(--rule); }
#owner-tickets > li.meta { padding: var(--s-3) 0; }
#owner-tickets .desk-row {
  display: grid; grid-template-columns: 5rem 9.5rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-1) var(--s-3);
  width: 100%; min-height: 48px; margin: 0; padding: var(--s-2) var(--s-2);
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font-weight: 400; text-align: left;
}
#owner-tickets .desk-row::after { content: "\203A" / ""; color: var(--ink-2); font-weight: 700; }
#owner-tickets .desk-row:hover { background: var(--surface); }
#owner-tickets .desk-tno { font-weight: 800; white-space: nowrap; }
#owner-tickets .desk-stage { font-weight: 600; }
#owner-tickets .desk-where { color: var(--ink-2); overflow-wrap: anywhere; }
#owner-tickets .desk-where .tag { color: var(--ink); }
@media (max-width: 899.98px) {
  #owner-tickets .desk-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  #owner-tickets .desk-where { grid-column: 1 / 3; grid-row: 2; }
  #owner-tickets .desk-row::after { grid-column: 3; grid-row: 1; }
}
/* a ticket's stamps: under a 3 px ink rule — the record's own lines; his words set larger than the page's */
#owner-stamps { margin-top: var(--s-6); padding-top: var(--s-2); border-top: 3px solid var(--ink); }
#owner-stamps h3 { margin-top: var(--s-3); }
#owner-stamps-list .stamp.note { border: 1px solid var(--ink-2); padding: var(--s-2) var(--s-3); }   /* a full frame (P0-2) */
#owner-stamps-list .stamp-words { margin: var(--s-2) 0 0; font-size: var(--step-1); font-weight: 600; line-height: 1.4; }

/* 5 · the two downloads: each a 48 px link with its terms under it — the record check named first */
#page-owner .exports { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-5); }
#page-owner .export-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-4);
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font-weight: 700; text-decoration: none;
}
#page-owner .export-link::before { content: "\2193" / ""; font-weight: 800; }
#page-owner .export-link:hover { background: var(--surface); }

/* ======================================================================================== the store and a machine */
/* a count with its arithmetic, at reading size in a part's line and as the part page's one figure: the terms and the
   figure set as one ("10 − 3 = 7") — no figure larger than its terms. A count nobody can stand behind is muted
   words; more issued than counted and a count at zero carry an ink rule in the margin — the words say which. */
#page-store .count-label { display: block; margin: var(--s-1) 0 2px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
#page-store .count-label.big { margin: var(--s-1) 0 var(--s-2); font-size: var(--step-2); line-height: 1.25; }
#page-store .count-label.count-off { color: var(--muted); font-weight: 600; }
/* at zero, short and count off are said by the count's own words, no margin stripe (the POLISH round, P0-2) */
#page-store .store-form, #page-setup .store-form, #page-baseline .store-form {
  margin-top: var(--s-5); padding: var(--s-4);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg);
}
#page-store .store-form h2, #page-setup .store-form h2, #page-baseline .store-form h2 { margin-top: 0; }
#page-store .store-form label, #page-setup .store-form label, #page-baseline .store-form label {
  display: block; margin: var(--s-3) 0; color: var(--ink-2); font-weight: 600;
}
#page-store .store-form input, #page-setup .store-form input, #page-baseline .store-form input,
#page-setup .store-form select, #page-baseline .store-form select, #page-setup .store-form textarea,
#page-store .store-form textarea {
  display: block; width: 100%; margin-top: var(--s-1);
}
#page-store .store-form button, #page-setup .store-form button, #page-baseline .store-form button { margin: var(--s-2) var(--s-2) 0 0; }
#page-store a.back, #page-machine a.back {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-1);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
#page-store .tag-button { margin: 0 var(--s-2) var(--s-2) 0; }
#page-store .stamp.line button.link { margin-top: var(--s-2); }
#page-store .row input[type=text] { flex: 2 1 8em; min-width: 0; }
#page-store #store-readback-text { font-size: var(--step-1); font-weight: 600; }
#page-machine .amc dd.unsaid { color: var(--muted); font-style: italic; }

/* ======================================================================================== Setup (#page-setup) */
/* each panel a <details> whose summary is its heading (D9-08): a 48 px row with a disclosure mark that turns when the
   panel opens; the readiness report opens first. */
#page-setup details.panel { border-bottom: 1px solid var(--rule); }
#setup-body > details.panel:first-child { border-top: 1px solid var(--rule); }
#page-setup details.panel[open] { padding-bottom: var(--s-4); }
#page-setup details.panel > summary {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 48px; padding: var(--s-2) 0;
  list-style: none; cursor: pointer;
}
#page-setup details.panel > summary::-webkit-details-marker { display: none; }
/* the disclosure mark: an ink chevron drawn by two rules — right when closed, down when open */
#page-setup details.panel > summary::before {
  content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin: 0 0.3rem 0 0.2rem;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg);
  transition: transform var(--t-ui) var(--ease-out);
}
#page-setup details.panel[open] > summary::before { transform: rotate(45deg); }
#page-setup details.panel > summary:hover { background: var(--surface); }
#page-setup details.panel > summary h2 { margin: 0; font-size: var(--step-1); }
/* the readiness report: a section NOT onboarded says so in bold words; an onboarded one reads plainly (never colour) */
#setup-report .report { display: grid; gap: var(--gap); margin-top: var(--s-2); }
/* a readiness card is the section's heading over its failing checks, ruled: no card edge and no side stripe, its
   state said by its words ("NOT onboarded" / "onboarded") (the POLISH round, P0-2: the 14th stripe, written as
   border-left-width, which the studio's scan does not match; the critic saw it in the pixels) */
#setup-report .card.ready { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--s-3) 0; background: transparent; }
#setup-report .ready-state { margin: 0 0 var(--s-1); font-weight: 600; }
#setup-report .ready-state.bad { font-weight: 800; }
#setup-report .failing { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
#setup-report .failing li { margin: var(--s-1) 0; overflow-wrap: anywhere; }
#setup-report .people { list-style: none; margin: var(--s-1) 0 0; padding: 0; color: var(--ink-2); }
#setup-report h3 { margin: var(--s-5) 0 var(--s-1); color: var(--ink-2); font-weight: 600; }
#setup-people li.card > button { min-height: 48px; }
#setup-people li.card.left > button { color: var(--muted); }      /* an explicit colour, never opacity (D9-05) */
#page-setup .setup-sections { display: grid; gap: var(--s-1); margin: var(--s-1) 0 var(--s-2); }
#page-setup .setup-sections label {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 48px; margin: 0; color: var(--ink); font-weight: 400;
}
#page-setup .setup-sections input[type=checkbox] {
  display: inline-block; flex: 0 0 auto; width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0;
}
#page-setup a.setup-link, #page-baseline a.setup-link, #page-store a.setup-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-1);
  color: var(--ink); font-weight: 600;
}

/* ======================================================================================== Setup: item 08, the spoken names */
/* CONTRACT 08 section 3, transcribed from the design's spoken.css (dw8-012; D-W8-08-nn explain each rule); scoped to
   #setup-spoken (the panel after Machines) and the spoken sheet (#set-sheet[data-setting="spoken"]). Tokens only: no new
   colour, size or motion value. The sheet-wide rules of the mock are scoped to the spoken sheet here, so every other
   sheet stays as built (CONTRACT 08 section 8). */
   D-W8-08-nn in .impeccable.md explain each rule. */

/* the panel's summary: the built 48 px row; a short state line beside the heading (D-W8-08-04) */
#setup-spoken > summary { flex-wrap: wrap; row-gap: 0; }
#setup-spoken > summary .spk-fold-says { flex-basis: 100%; margin: 0 0 0 calc(0.55rem + 0.5rem + var(--s-3)); color: var(--ink-2); font-size: var(--step-0); font-weight: 400; }
#setup-spoken[open] > summary .spk-fold-says { display: none; }

/* the standing sentence and its terms (the desk's paper: the sentence first, D-W8-00-22) */
#spk-standing { margin: var(--s-2) 0 var(--s-1); font-size: var(--step-1); font-weight: 700; line-height: 1.35; max-width: 46rem; }
#spk-terms { margin: 0 0 var(--s-4); max-width: 46rem; }
#spk-scope { margin: var(--s-4) 0 var(--s-3); color: var(--ink); font-weight: 600; max-width: 46rem; }

/* the shared names: ruled rows, the decision of this face (D-W8-08-05) */
#spk-shared h3, #spk-every-h, #spk-import h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--step-1); }
#spk-shared ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: 46rem; }
#spk-shared li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
#spk-shared .spk-pair { margin: 0; font-weight: 700; }
#spk-shared .spk-apart { margin: var(--s-1) 0 0; }
#spk-shared .spk-alone { margin: var(--s-1) 0 0; color: var(--ink-2); }

/* the keys above the table: the import key and the export link */
.spk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap) var(--s-4); margin: var(--s-4) 0 0; }
.spk-acts .setup-link { padding-left: 0; }

/* a spoken name is a person's word: never tracked, never case-changed (D-W8-00-35); a placeholder carries a
   dotted 1 px underline AND its words; pencil's 2 px frame is not borrowed (D-W8-08-03) */
.spk-name { letter-spacing: normal; text-transform: none; white-space: nowrap; }
#setup-spoken .spk-name[data-placeholder="1"], #set-sheet[data-setting="spoken"] .spk-name[data-placeholder="1"] { color: var(--ink-2); text-decoration: underline dotted var(--muted) 1px; text-underline-offset: 0.3em; }
#setup-spoken .spk-name[data-retired="1"], #set-sheet[data-setting="spoken"] .spk-name[data-retired="1"] { color: var(--ink-2); text-decoration: line-through; }
.spk-q { font-weight: 600; }
.spk-src-ph { color: var(--ink-2); }
.spk-none { color: var(--muted); }
#spk-legend { margin: 0 0 var(--s-2); color: var(--ink-2); }
#spk-legend .spk-name { color: var(--ink-2); }

/* the register: a ruled table on the desk; on the phone each machine a ruled block, its cells labelled
   (D-W8-08-06). Roles are written on the elements so the stacked phone layout keeps the table's semantics. */
.spk-table { width: 100%; border-collapse: collapse; margin: 0; font-variant-numeric: tabular-nums; }
.spk-table caption { text-align: left; }
.spk-table th, .spk-table td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.spk-table thead th { font-size: var(--step-0); color: var(--ink-2); font-weight: 600; border-bottom: 2px solid var(--ink); }
.spk-table .spk-sec th { padding-top: var(--s-5); font-size: var(--step-1); font-weight: 700; border-bottom: 2px solid var(--ink); }
.spk-table .spk-sec .meta { font-weight: 400; font-size: var(--step-0); }
.spk-table .spk-m { white-space: nowrap; }
.spk-table .spk-m .tag { margin-right: var(--s-1); }
.spk-table .spk-m .spk-mname { white-space: normal; font-weight: 600; }
.spk-table td .spk-name + .spk-name::before, .spk-table td .spk-word + .spk-word::before { content: ""; }
.spk-table .spk-cell-l { display: none; }
#setup-spoken .spk-table a.spk-change { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-3); border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); font-weight: 700; text-decoration: none; }
#setup-spoken .spk-table a.spk-change:hover { background: var(--surface); }
.spk-table tr.spk-new td, .spk-table tr.spk-new th { background: var(--surface); }
.spk-names { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
/* .spk-src .who-code: nowrap comes from app.css's one .who-code rule (WC-10: never a second copy) */

@media (max-width: 899.98px) {
  .spk-table, .spk-table tbody, .spk-table tr, .spk-table th, .spk-table td { display: block; }
  .spk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .spk-table tr.spk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .spk-table tr.spk-row > * { grid-column: 1 / -1; border: 0; padding: var(--s-1) 0 0; }
  .spk-table tr.spk-row > .spk-m { grid-column: 1; grid-row: 1; padding-top: 0; white-space: normal; font-size: var(--step-1); }
  .spk-table tr.spk-row > .spk-c { grid-column: 2; grid-row: 1; padding: 0; }
  .spk-table tr.spk-row > td:empty { display: none; }
  .spk-table .spk-cell-l { display: inline; color: var(--ink-2); font-weight: 600; margin-right: var(--s-2); }
  .spk-table .spk-names { display: inline-flex; }
  .spk-table .spk-sec th { padding: var(--s-5) 0 var(--s-2); }
}

/* the import: the built preview-then-apply grammar (#setup-preview-box), its box pencil until applied (D-W8-08-08) */
#spk-import textarea { font-variant-numeric: tabular-nums; }
#spk-import .spk-import-keys { display: flex; flex-wrap: wrap; gap: var(--gap); margin: var(--s-2) 0 0; }
#spk-preview-box { margin: var(--s-4) 0 0; padding: var(--s-4); border-radius: var(--radius); max-width: 46rem; }
#spk-result[data-outcome="nothing"] { border: 0; padding: 0; background: none; }   /* phase-2 P1-2: the chassis' plain nothing line, never an ink frame */
#spk-preview-box .mark-word { font-size: var(--step-0); }
#spk-preview-summary { margin: 0 0 var(--s-2); font-size: var(--step-1); line-height: 1.35; }
#spk-preview-box h4 { margin: var(--s-4) 0 var(--s-1); font-size: var(--step-0); color: inherit; }
#spk-preview-box ol.stamps { list-style: none; margin: 0; padding: 0; }
#spk-preview-box ol.stamps li { padding: var(--s-2) 0; border-top: 1px dashed var(--pencil); overflow-wrap: anywhere; }
#spk-preview-box[data-mark="ink"] ol.stamps li { border-top: 1px solid var(--rule); }
#spk-preview-box .spk-row-no { font-variant-numeric: tabular-nums; font-weight: 700; margin-right: var(--s-2); white-space: nowrap; }
#spk-preview-box .spk-after { margin: var(--s-3) 0 0; }
#spk-preview-box .set-keys { margin-top: var(--s-4); }
#spk-preview-box .tno-slot { font-size: var(--step-2); min-height: 1.5em; padding: 0 var(--s-2); }
#spk-preview-box .spk-recorded { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); }
#spk-preview-box .spk-recorded .mark-word { margin: 0; }
@media (max-width: 899.98px) { #spk-preview-box .set-keys.pinned { margin-left: calc(-1 * var(--s-4) - 2px); margin-right: calc(-1 * var(--s-4) - 2px); } }

/* not served: the built unlit line (D-W8-00-16) */
#setup-spoken .unlit { margin: var(--s-3) 0 0; }


/* the spoken sheet: one machine; its entries as ruled rows (the sheet's rows grammar) */
.spk-entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 46rem; }
.spk-entries > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.spk-entries .spk-e-name { margin: 0; font-size: var(--step-1); font-weight: 700; }
.spk-entries .spk-e-name .spk-name[data-placeholder="1"] { font-weight: 600; }
.spk-entries .spk-e-facts { margin: var(--s-1) 0 0; color: var(--ink-2); grid-column: 1; }
#spk-entries button { grid-column: 2; grid-row: 1 / span 2; min-width: 7.5rem; }
#spk-add { margin: var(--s-5) 0 0; max-width: 46rem; }
#spk-add h3 { margin: 0 0 var(--s-2); font-size: var(--step-1); }
#spk-add label { display: block; margin: var(--s-3) 0 0; color: var(--ink-2); font-weight: 600; }
#spk-add input, #spk-add select { display: block; width: 100%; max-width: 28rem; margin-top: var(--s-1); color: var(--ink); font-weight: 700; }
#spk-add .meta { margin: var(--s-1) 0 0; }
#set-sheet[data-setting="spoken"] .set-diff .spk-name { white-space: normal; }
#set-sheet[data-setting="spoken"] #set-history-list { list-style: none; margin: 0; padding: 0; }
#set-sheet[data-setting="spoken"] #set-history-list li { padding: var(--s-2) 0; border-top: 1px solid var(--rule); }

/* inside the register a multi-word spoken name may wrap between its words (the 1440 look: columns touched) */
.spk-table .spk-name { white-space: normal; }

/* the refusal stands at the sheet's head, above the dropped read-back, on the first screen (R-H's rule, adopted) */
#set-sheet[data-setting="spoken"] > #set-refused { margin: var(--s-3) 0 0; }
@media (max-width: 899.98px) { .spk-table td.spk-notshared { display: none; } }
/* offline, as reached by #setup-spoken (dw8-021, critic dw8-020 P1-1, P1-2): the no-signal line in the panel, under the
   terms, in ink; the withheld keys' reason as the first child of the act row, the grammar of the sheet's "Read it back" */
#spk-offline { margin: var(--s-2) 0 0; font-weight: 600; }
.spk-acts .key-why { flex: 1 0 100%; margin: 0; color: var(--ink-2); font-weight: 600; }

/* ======================================================================================== the baseline (#page-baseline) */
/* the first month: each figure's label as the server gave it, in its own words (no case change, no tracking — §3.8),
   its before and after side by side at one size; a struck row muted by an explicit colour, never opacity */
#page-baseline .figure .figure-name { margin: 0; font-weight: 700; }
#page-baseline .figure .figure-label { margin: 2px 0 var(--s-2); color: var(--ink-2); font-weight: 600; font-style: italic; }
#page-baseline .side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
#page-baseline .side-by-side .before, #page-baseline .side-by-side .after {
  padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--surface);
}
#page-baseline .side-by-side .value { font-weight: 700; font-variant-numeric: tabular-nums; }
#page-baseline .weaknesses li { margin: var(--s-2) 0; color: var(--ink-2); }
#page-baseline li.card.struck > p:not(.meta) { color: var(--muted); text-decoration: line-through; }
/* an altered row is said by its word (baseline.js: ALTERED, not counted); no side stripe (the POLISH round, P0-2) */
#page-baseline .row { align-items: center; }
#page-baseline .row button { flex: 0 0 auto; }               /* Print at its own width, never a bar across the page */
#page-baseline label.check { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; }
#page-baseline label.check input[type=checkbox] { width: 24px; height: 24px; min-height: 0; margin: 0; }
/* no first month yet: the record does not hold it yet — pencil (§3.4), its reason in plain words; never an error */
#page-baseline .month-not-yet { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius); }
#page-baseline .month-not-yet p { margin: var(--s-1) 0; }

/* the printed tally sheet: black on white, system fonts, nothing fetched (ADR-008) — on screen as on paper */
#page-baseline .print-sheet { padding: var(--s-3); border-radius: var(--radius); background: #fff; color: #000; }
#page-baseline .print-sheet h2 { margin: 0 0 var(--s-2); color: #000; font-size: var(--step-1); }
#page-baseline .print-sheet .blanks { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-2) 0; }
#page-baseline .print-sheet .meta { color: #333; }
#page-baseline .tally-sheet { width: 100%; margin: var(--s-2) 0; border-collapse: collapse; table-layout: fixed; }
#page-baseline .tally-sheet th, #page-baseline .tally-sheet td { padding: var(--s-1); border: 1px solid #000; vertical-align: top; }
#page-baseline .tally-sheet th { font-size: var(--step-0); font-weight: 600; text-align: left; }
#page-baseline .tally-sheet tbody td { height: 34px; }
#page-baseline .tally-sheet th:last-child, #page-baseline .tally-sheet td:last-child { width: 5rem; }
#page-baseline .tally-sheet .line-no { font-size: var(--step--1); color: #555; }
#page-baseline .none-box { margin: var(--s-2) 0; padding: var(--s-2); border: 2px solid #000; }
#page-baseline .none-box .box { font-size: var(--step-1); }
#page-baseline .sheet-footer p { margin: var(--s-1) 0; color: #000; }
@media print {
  #page-baseline .print-sheet { padding: 0; border-radius: 0; }
  #page-baseline .tally-sheet tbody td { height: 9mm; }
}

/* ---------------------------------------------------------------------------------------------- the devices page
   ENR's #/devices (ADR-031 §4.7 · §4.12 tests 20-21) landed after the face pass and no family sheet owned it; the
   POLISH round (P1-4) draws it in the desk's grammar on the chassis's tokens: a label above each field, the new
   device's 8-digit number at step 2 in tabular figures, the enrol and revoke read-backs pencil then ink like every
   other record (the chassis's [data-mark]), and the register and one's own devices as ruled rows (device and state,
   whose, enrolled when) each with its Revoke key: no cards. */
#page-devices h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--step-1); line-height: 1.3; }
#page-devices #enr-to { margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius); }
#page-devices #enr-to h3 { margin-top: 0; }
#page-devices #enr-to-warn { margin: 0 0 var(--s-2); }
#page-devices label { display: block; margin: var(--s-4) 0 var(--s-1); color: var(--ink-2); font-weight: 600; }
#page-devices input, #page-devices select { display: block; width: 100%; max-width: 28rem; margin-top: 0; }
#page-devices #enr-to-code { max-width: 14rem; font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; }
#page-devices #enr-to-check, #page-devices #enr-to-yes { margin: var(--s-4) var(--s-2) 0 0; }
#page-devices .cards { gap: 0; margin-top: 0; border-top: 1px solid var(--rule); }
#page-devices .cards li.card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
}
#page-devices .cards li.card > p { grid-column: 1; margin: 0; }
#page-devices .cards li.card > button {
  grid-column: 2; grid-row: 1 / span 3; width: auto; min-height: var(--target-min); padding: var(--s-2) var(--s-4);
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--bg); color: var(--ink);
  font-weight: 700; text-align: center;
}
#page-devices .cards li.card > button:hover { background: var(--surface); }
#page-devices .cards li.meta { padding: var(--s-3) 0; color: var(--muted); }
#page-devices #rev-box label { margin-top: var(--s-3); }
/* on a phone the row's words take the width and its Revoke key sits under them (the render at 360: side by side,
   the words were squeezed to a 120 px column) */
@media (max-width: 599.98px) {
  #page-devices .cards li.card { grid-template-columns: minmax(0, 1fr); }
  #page-devices .cards li.card > button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s-2); }
}

/* ======================================================================================== Setup: item 06's parts */
/* CONTRACT 06 section 2 ("The leave", "The channel sheet"); measures copied by value from the design's telegram.css
   (md5 d533878c) and, for the sheet, its copy of item 05's admin.css. Tokens only; no colour literal. */
/* the leave's read-back (pencil) and result (ink), in the One person panel */
#setup-leave-box .readback, #setup-leave-box .result { margin-top: var(--s-4); }
#setup-leave-box .readback h3, #setup-leave-box .result h3 { margin: 0 0 var(--s-2); font-size: var(--step-1); color: inherit; }
#setup-leave-box .readback .mark-word { margin: 0 0 var(--s-1); font-size: var(--step-0); }
#setup-leave-box .set-keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); margin-top: var(--s-4); }
#setup-leave-box .set-keys button { margin: 0; min-height: 56px; }
/* below 420 px the two keys stand one over the other, each the full width of the read-back and on ONE line: side by side they
   need about 320 px and the read-back is 252 px wide at 360 (282 at 390), so "Record the leave" wrapped to two lines and
   "Keep him on" to three. The order stays the DOM's (back, then the act). */
@media (max-width: 419.98px) {
  #setup-leave-box .set-keys { grid-template-columns: minmax(0, 1fr); }
  #setup-leave-box .set-keys button { white-space: nowrap; }
}
#setup-leave-box .bell-recorded .tno-slot { font-size: var(--step-2); }
/* one setting read on its own (#/setup?part=settings&setting=telegram-channel): the rest of Setup steps aside */
#page-setup[data-part="settings"] > :not(#setup-setting) { display: none; }
#page-setup a.back { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-1);
  color: var(--ink); font-weight: 600; text-decoration: none; }
#page-setup a.back:hover { text-decoration: underline; }
#page-setup .set-title { margin: var(--s-2) 0 var(--s-1); font-size: var(--step-2); }
#set-sheet { margin: 0; }
/* the standing sentence: the paper's headline, ink over one 3 px rule when the record holds it */
#set-standing { max-width: 44rem; margin: var(--s-2) 0 0; padding: 0 0 var(--s-3); border: 0; border-radius: 0;
  border-bottom: 3px solid var(--ink); font-size: var(--step-2); line-height: 1.25; }
@media (max-width: 599.98px) { #set-standing { font-size: var(--step-1); } }
#set-source { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 44rem; }
#set-sheet .set-main > h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--step-1); }
/* ruled rows: label over value on the phone, beside it from 600 px */
#set-sheet .set-rows { margin: var(--s-4) 0 0; border-top: 1px solid var(--rule); }
#set-sheet .set-rows > div { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
#set-sheet .set-rows dt { margin: 0; color: var(--ink-2); font-weight: 600; }
#set-sheet .set-rows dd { margin: var(--s-1) 0 0; font-weight: 600; }
@media (min-width: 600px) {
  #set-sheet .set-rows > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--s-4); }
  #set-sheet .set-rows dd { margin: 0; }
}
#set-sheet .ch-later { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--gap); }
#set-sheet .ch-later .unlit { margin: 0; }
#set-sheet .specimen-fig { margin: var(--s-4) 0 0; }
#set-sheet .specimen-fig figcaption { margin: 0 0 var(--s-2); font-weight: 700; }
#set-sheet .specimen { margin: 0 0 var(--s-2); padding: var(--s-3); background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-s); white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
#set-sheet .ch-recent { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
#set-sheet .ch-recent li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); line-height: 1.45; font-variant-numeric: tabular-nums; }
#set-sheet .ch-when { font-weight: 700; }
#set-sheet .ch-what { display: block; }
#set-sheet .ch-state { display: block; padding: 0; border: 0; border-radius: 0; }
#set-sheet #ch-empty-how, #set-sheet #set-refused { margin-top: var(--s-3); }

/* ======================================================================================== Setup > Logbooks (wave 11, L4)
   The rules of CONTRACT 04 section 3, verbatim: the Settings sheet's logbooks setting (the overview, one book's form), scoped to it. */
/* Tokens only (D-W11-00-01: no new token); no colour literal; nothing here restyles the chassis. */

/* the overview: one ruled block per book (D-W11-04-21) */
#log-set-note { margin: var(--s-3) 0 var(--s-3); }
#log-set-books { border-top: 1px solid var(--rule); }
#setup-settings-host .log-set-book { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
#setup-settings-host .log-set-name { margin: 0; font-size: var(--step-1); font-weight: 700; line-height: 1.25; }
#setup-settings-host .log-set-line {
  max-width: 40rem; margin: var(--s-1) 0 0; padding: 0; border: 0;
  color: var(--ink); font-weight: 600; line-height: 1.45;
}
#setup-settings-host .log-set-line[data-mark="pencil"] { color: var(--pencil); font-weight: 500; }
#setup-settings-host .log-set-line[data-mark="pencil"]:lang(hi), #setup-settings-host .log-set-line[data-mark="pencil"]:lang(pa) { font-weight: 400; }
#setup-settings-host .log-set-key { margin: var(--s-3) 0 0; }
#setup-settings-host .log-set-open { display: inline-flex; min-width: 20rem; }
@media (max-width: 599.98px) { #setup-settings-host .log-set-open { display: flex; width: 100%; min-width: 0; } }

/* a book never assigned: the sentence is pencil, nothing holds the book (D-W11-04-13 drawn by D-W11-04-22) */
#set-sheet[data-setting="logbooks"][data-state="empty"] #set-standing { border-bottom: 2px dashed var(--pencil); color: var(--pencil); font-weight: 500; }

/* a group inside a field box (days, due time): the field's own label form, never the built fieldset's step-1 legend */
#set-edit .field fieldset.log-set-group { margin: 0; padding: 0; border: 0; min-width: 0; }
#set-edit .field fieldset.log-set-group > legend { margin: 0 0 var(--s-1); padding: 0; color: var(--ink-2); font-size: var(--step-0); font-weight: 600; }
#set-edit .field.changed fieldset.log-set-group > legend { color: var(--ink); }
#set-edit .log-set-hint { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 34rem; }

/* the days: the built ul.checks.days, four and three on a phone, seven in a row from 600 px; a day on is an ink fill
   and a bold word with its tick, a day off the ink edge alone (D-W11-04-16; D-W8-00-05) */
#setup-settings-host ul.log-set-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 34rem; }
#setup-settings-host ul.log-set-days label { display: flex; width: 100%; min-width: 0; justify-content: center; padding: 0 var(--s-2); }
#setup-settings-host ul.log-set-days input { min-height: 0; width: 1.25rem; height: 1.25rem; margin: 0; padding: 0; flex: none; }
#setup-settings-host ul.log-set-days label:has(input:checked) { background: var(--ink); color: var(--bg); font-weight: 800; }
#setup-settings-host ul.log-set-days label:has(input:checked) input { accent-color: var(--bg); }
#setup-settings-host ul.log-set-days label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (min-width: 600px) { #setup-settings-host ul.log-set-days { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 40rem; } }
/* below 600 px the box sits above its word, so the longest day word (pa-IN Saturday) keeps the label's whole width */
@media (max-width: 599.98px) {
  #setup-settings-host ul.log-set-days label { flex-direction: column; gap: 2px; min-height: 56px; padding: var(--s-1) 2px; text-align: center; }
}

/* the due time: hour and minute as two native selects, then AM and PM as two keys (L2's picker family, D-W11-04-17) */
#log-set-due .log-set-hm {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0 var(--s-1); max-width: 20rem;
}
#log-set-due .log-set-part { display: block; min-width: 0; }
#log-set-due .log-set-word { display: block; margin: 0 0 2px; color: var(--ink-2); font-weight: 600; }
#set-edit #log-set-due select {
  width: 100%; max-width: none; min-height: var(--target-row); padding: var(--s-1) var(--s-2);
  font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums;
}
#log-set-due .log-set-colon { padding: 0 0 0.6rem; color: var(--ink); font-size: var(--step-1); font-weight: 700; }
#log-set-due .log-set-ampm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); max-width: 20rem; margin: var(--s-2) 0 0; }
#log-set-due .log-set-ampm-key {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--target-row);
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--bg); color: var(--ink);
  font-size: var(--step-1); font-weight: 700; cursor: pointer;
}
#log-set-due .log-set-ampm-key input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--ink); }
#log-set-due .log-set-ampm-key:has(input:checked) { background: var(--ink); color: var(--bg); }
#log-set-due .log-set-ampm-key:has(input:checked) input { accent-color: var(--bg); }
#log-set-due .log-set-ampm-key:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }

/* a refusal's one key ("Read the book again") takes the whole key row, never the narrow back column (D-W11-04-19) */
#set-sheet[data-setting="logbooks"] #set-readback-keys > button:only-child { grid-column: 1 / -1; }

/* refine (dw11-011), critic P2-1 (D-W11-04-31): the result's Was / Will be rows draw as the read-back's, the value in its
   own column, so a person's code wraps inside the value column, never under the label */
#set-sheet[data-setting="logbooks"] #set-result .set-diff .was, #set-sheet[data-setting="logbooks"] #set-result .set-diff .will {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--s-2); align-items: baseline;
}
#set-sheet[data-setting="logbooks"] #set-result .set-diff .was-word, #set-sheet[data-setting="logbooks"] #set-result .set-diff .will-word { min-width: 0; }

/* refine (dw11-011), critic P2-2 desk and tablet part (D-W11-04-34): the two person selects take the field's width, so the
   chosen person's role is not clipped; the phone keeps the built 100% */
@media (min-width: 600px) {
  #set-edit select#log-set-person, #set-edit select#log-set-standin { max-width: 40rem; }
}