/* face-floor.css, the floor phone's faces, redrawn as study 01's panel on the chassis (app.css): identify, raise, the
   inbox, the ticket and its close, the offline queue, the photograph's line and onboard (ADR-032 §3.3 · §3.4 · §3.9;
   FACE-FL, build-wave-4).

   The concept (§3.0): every floor screen is a readout over a key bank. The readout carries only status and the
   read-back, the record's lines in a fixed order, each in pencil until the server answers, on --surface in a 2 px
   ink frame (X-1); the open question sits at its foot, over the keys that answer it; each key does one thing and is at
   least 64 px tall; the back key is always bottom-left and the record key, the one ink-filled key, 96 px, always
   bottom-right, its slot empty until there is something to record (S01 D-05 · D-08). Colour is spent on lateness
   alone: a selection is an ink fill and a bold word (X-4), P1 an ink badge with its words (X-2), what is not sent yet
   is pencil (§3.4), never amber, never green. An error is ink words with its reason, never red (§3.2 (e)).

   The rules of this sheet (§3.9): only rules scoped under this family's own pages and regions, #page-identify ·
   #page-raise · #page-inbox · #page-close (bar FACE-SV's #close-moves and #note-box) · #page-onboard · #q-box, and
   no token declared: :root is the chassis's, and every size and colour here is one of its tokens. The rules FACE-CH
   moved here verbatim, and its carry block onto the light ground, are retired by this redraw (X-19). No
   letter-spacing and no case change on anything that can carry a person's words, a name as written or server text
   (§3.8); no rule sizes a :lang(hi) run differently from a :lang(pa) run. */

/* ============================================================================================ identify (FL-14) */
/* The keypad is the floor path, taps, not a keyboard. Its keys, the learned prefix and sign-in are as built. */
#page-identify h2 { margin: var(--s-2) 0 var(--s-1); font-size: var(--step-3); font-weight: 800; line-height: 1.15; }
#page-identify #id-code {
  display: block; width: 100%; min-height: 64px; margin-top: var(--s-3);
  background: var(--surface);
  font-size: var(--step-3); font-weight: 800; text-align: center;
}
#page-identify .keypad {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-panel);
  margin: var(--s-3) 0;
}
#page-identify .keypad .key { min-height: 64px; padding: 0 var(--s-2); font-size: var(--step-2); }
#page-identify .row { gap: var(--gap-panel); }
#page-identify .row button { min-height: 56px; }
#page-identify #id-signin { min-height: 64px; margin-top: var(--s-3); font-size: var(--step-1); }
#page-identify #id-reach { margin-top: var(--s-4); }
/* ADR-036 §3.4: the trial's sign-in panel (shown only on a synthetic-only tree): a plain list of full-width buttons. */
#page-identify .demo-panel { margin-top: var(--s-5); }
#page-identify #demo-roster { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-3); }
#page-identify .demo-fill { display: block; width: 100%; text-align: left; }
#page-identify .demo-person .meta, #page-identify .demo-here { margin: var(--s-1) 0 0; }
#page-identify .demo-here { font-weight: 700; }
#page-identify .pending-end {
  margin: var(--s-2) 0 var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
}
#page-identify .pending-end .big { font-size: var(--step-1); }

/* ============================================================================================ the panel (§3.3) */
/* The step: its place in the flow in numerals (X-15), then the open question. */
#page-raise .step-no, #page-close .step-no {
  margin: 0 0 var(--s-1); color: var(--muted); font-size: var(--step-0); font-weight: 600;
}
#page-raise .step > h2, #page-raise #raise-pick > h2, #page-raise .readback > h2, #page-raise .result > h2,
#page-close .step > h2, #page-close .readback > h2, #page-close .result > h2 {
  margin: 0 0 var(--s-3); font-size: var(--step-2); font-weight: 800; line-height: 1.2;
}
#page-raise .step, #page-close .step { margin: 0; }

/* The readout (X-1): the record's lines so far, label beside value, each value in pencil, weight, a dashed rule
   and the words tell pencil from ink, never colour alone (S04 D-03). Nothing in it is pressable. */
#page-raise .readout, #page-close .readout {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
}
#page-raise .readout-head, #page-close .readout-head {
  margin: 0 0 var(--s-2); color: var(--ink-2); font-size: var(--step-0); font-weight: 700;
}
/* On the phone each line is its label over its value, the value given the full width; the desk sets them side by side. */
#page-raise .readout-lines, #page-close .readout-lines { display: block; margin: 0; }
#page-raise .readout-lines dt, #page-close .readout-lines dt {
  margin: var(--s-3) 0 0; padding: 0; color: var(--muted); font-size: var(--step-0); font-weight: 600; line-height: 1.3;
}
#page-raise .readout-lines dt:first-child, #page-close .readout-lines dt:first-child { margin-top: 0; }
#page-raise .readout-lines dd, #page-close .readout-lines dd {
  margin: 2px 0 0; padding: 0 0 var(--s-1);
  border: 0; border-bottom: 2px dashed var(--pencil);
  color: var(--pencil); font-size: var(--step-1); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere;
}
#page-close .readout-lines .tno { font-size: var(--step-3); color: inherit; }
/* a ticket with no floor act: its readout holds what the record already says, ink, bold, no pencil rule */
#page-close .readout-lines dd[data-mark="ink"] { color: var(--ink); font-weight: 700; border-bottom: 0; }

/* The keys: full width, at least 64 px, a word large enough for a thumb (S01 D-05); a selection is an ink fill and a
   bold word (X-4) with a tick that repeats it (never colour alone). */
#page-raise .sections, #page-raise .machines, #page-onboard .sections, #page-onboard .machines {
  list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--gap-panel);
}
#page-raise .sections li, #page-raise .machines li, #page-onboard .sections li, #page-onboard .machines li { padding: 0; }
#page-raise .sections button, #page-raise .machines button, #page-onboard .sections button, #page-onboard .machines button {
  display: block; width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4);
  font-size: var(--step-1); font-weight: 700; line-height: 1.25; text-align: left;
}
#page-raise .sections .sub, #page-onboard .sections .sub {
  display: block; margin-top: 2px; color: var(--muted); font-size: var(--step-0); font-weight: 600;
}
/* bw4-033: a pressed section key's caption reads bg-on-ink like its own key (ADR-032 X-4) -- the muted
   caption colour above is for the UNPRESSED state only; this out-ranks it (1,3,1) > (1,2,0) once pressed. */
#page-raise .sections button.on .sub, #page-raise .sections button[aria-pressed="true"] .sub,
#page-onboard .sections button.on .sub, #page-onboard .sections button[aria-pressed="true"] .sub { color: inherit; }
#page-raise .machines .tag, #page-onboard .machines .tag { display: inline-block; margin-right: var(--s-1); }
#page-raise button[aria-pressed="true"]::after, #page-onboard .machines button.on::after,
#page-onboard .sections button.on::after, #page-close #close-category-keys button[aria-pressed="true"]::after {
  content: " \2713"; font-weight: 800;
}
#page-raise .key.wide, #page-close .key.wide { display: block; width: 100%; margin-top: var(--gap-panel); }
#page-raise .key, #page-close .key { font-size: var(--step-1); line-height: 1.25; }
#page-raise #raise-q { margin: 0 0 var(--s-2); }
#page-raise #raise-section-name { margin: 0 0 var(--s-2); }
#page-raise #raise-status { margin: 0 0 var(--s-2); }
#page-raise #raise-voice { margin: 0 0 var(--s-3); }

/* also stopped: None, the section's machines to mark, then Next, a refusal is said in ink words at the pick */
#page-raise #raise-pick-help { margin: 0 0 var(--s-2); }
#page-raise .pick { margin-top: var(--gap-panel); }
#page-raise #raise-pick-count { margin: var(--s-3) 0 0; }
/* a refused pick is said in its ink words, no side stripe (the POLISH round, P0-2) */

/* how urgent: three keys; P1 carries its words, its code an ink badge (X-2) */
#page-raise .urgency { display: grid; gap: var(--gap-panel); margin: var(--s-2) 0 0; }
#page-raise .urgency .key {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4); text-align: left;
}
#page-raise .urgency-code {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75em; min-height: 1.7em;
  padding: 0 var(--s-2); border: 2px solid currentColor; border-radius: var(--radius-s);
  font-weight: 800;
}
#page-raise [data-priority="P1"] .urgency-code { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#page-raise [data-priority="P1"].on .urgency-code, #page-raise [data-priority="P1"][aria-pressed="true"] .urgency-code {
  background: var(--bg); color: var(--ink); border-color: var(--bg);
}
#page-raise .urgency-word { font-weight: 700; }

/* what is wrong / his line: his words at reading size (nothing that can carry Devanagari or Gurmukhi below step 0) */
#page-raise #raise-text, #page-close #close-note {
  margin: 0; min-height: 112px; font-size: var(--step-1); line-height: 1.45;
}

/* The unlit line (§3.3 (iv)): what R1 does not ship, drawn dark where it would live, its reason in words */
#page-raise .unlit, #page-close .unlit { margin: var(--s-4) 0 0; }
#page-raise .unlit-why, #page-close .unlit-why { display: block; margin-top: 2px; }

/* the camera (tests only) */
#page-raise .capture, #page-close .capture { margin: var(--s-3) 0 0; }
#page-raise .capture input[type=file], #page-close .capture input[type=file] {
  display: block; width: 100%; min-height: 48px; margin-top: var(--s-1);
}

/* The read-back and the result, the two marks (§3.4): pencil a dashed rule and its word; ink one continuous 3 px rule
   under the block and "Recorded" with the number written into a filled ink box. */
#page-raise .readback, #page-close .readback, #page-raise .result, #page-close .result {
  margin: 0; padding: var(--s-3) var(--s-4) var(--s-4);
}
#page-raise .mark-word, #page-close .mark-word {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3); font-size: var(--step-1); font-weight: 700; line-height: 1.3;
}
#page-raise .readback-text, #page-close .readback-text { margin: 0; font-size: var(--step-0); line-height: 1.5; }
#page-raise #raise-readback-offline, #page-close #close-readback-offline { margin: var(--s-3) 0 0; }
#page-raise .result .tno-slot, #page-close .result .tno-slot { font-size: var(--step-4); min-height: 1.25em; }
#page-raise .result dl, #page-close .result dl { margin: var(--s-3) 0 0; }
#page-raise .result h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--step-1); }
#page-raise .told-list { list-style: none; margin: 0; padding: 0; }
#page-raise .told-list li {
  padding: var(--s-2) 0; border-top: 1px solid var(--rule); font-size: var(--step-0); line-height: 1.45;
}
#page-raise .told-role { font-weight: 700; }
/* D-W7-10-07 (P2-3): the result draws where the raise now stands, the compact line at station 1 with its word */
#page-raise .result-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: var(--s-3) 0 0; }
#page-raise .result-where .stage-line { flex: 1 1 9rem; max-width: 16rem; margin: 0; padding-bottom: 1rem; }
#page-raise .result-where .stage-word { font-weight: 700; }
#page-raise .mismatch {
  margin: var(--s-3) 0 0; padding: var(--s-3);
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
}
#page-raise .mismatch .choices { flex-direction: column; }
#page-raise .mismatch .choices .key { width: 100%; text-align: left; }
#page-raise #raise-err, #page-close #close-err { margin: var(--s-3) 0 0; }
#page-raise .keep, #page-close .keep { margin: var(--s-2) 0 0; }

/* The fixed row (S01 D-05 · D-08): back bottom-left, a third of the width; the record key bottom-right, two thirds,
   96 px, ink-filled, the foot of the panel, after what it records, so the read-back is read before the key that
   records it. Inside a flow it takes the bar's place (body.in-flow, app.css; X-9). */
#page-raise .dock, #page-close .dock {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-panel); align-items: end;
  margin: var(--s-5) 0 0; padding: var(--s-4) 0 0;
  border-top: 2px solid var(--ink);
}
#page-raise .dock .key-back, #page-close .dock .key-back {
  grid-column: 1; min-height: 64px; padding: var(--s-2); font-size: var(--step-0);
}
#page-raise .dock .key-record, #page-close .dock .key-record {
  grid-column: 2; min-height: 96px; padding: var(--s-2) var(--s-3); font-size: var(--step-1); line-height: 1.2;
}
#page-raise .dock .key-record:disabled, #page-close .dock .key-record:disabled {
  background: var(--bg); color: var(--muted); border-color: var(--muted); border-style: dashed;
}

/* ============================================================================================ the ticket face */
/* your work: one key per ticket, led by its number in display type, its machine, P1's badge, its stage in words and
   its place on the stage line (the chassis's compact line); the whole item is the key */
#page-close #close-work h2, #page-close #close-list > h2 { margin: var(--s-4) 0 var(--s-2); font-size: var(--step-2); font-weight: 800; }
#page-close #close-work h2 { margin-top: var(--s-2); }
#page-close #close-work-state { margin: 0 0 var(--s-2); }
#page-close .work-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-panel); }
#page-close .work-item {
  position: relative; padding: var(--s-3) var(--s-4) var(--s-3);
  background: var(--bg); border: 2px solid var(--ink); border-radius: var(--radius);
}
#page-close .work-item:hover { background: var(--surface); }
#page-close .work-item:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
#page-close .work-key {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: baseline;
  width: 100%; min-height: 64px; padding: 0; margin: 0;
  background: transparent; border: 0; color: var(--ink); text-align: left; font-weight: 600;
}
#page-close .work-key:hover, #page-close .work-key:active { background: transparent; transform: none; }
#page-close .work-key:focus-visible { outline: none; }
#page-close .work-key::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
#page-close .work-no { grid-row: 1 / span 4; align-self: start; font-size: var(--step-4); line-height: 1; }
#page-close .work-what { font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
#page-close .p1-badge, #page-close .work-stage { grid-column: 2; justify-self: start; }
#page-close .p1-badge {
  margin-top: var(--s-1); padding: 0 var(--s-2);
  background: var(--ink); color: var(--bg); border-radius: var(--radius-s);
  font-weight: 700; line-height: 1.6;
}
#page-close .work-stage { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--step-0); }
/* item 03: the time a work key is ordered by, under the stage word in the key's text column (the number's cell spans
   four rows when a P1 badge, the stage and this stand beside it), and the order line under the count */
#page-close .work-raised { display: block; grid-column: 2; justify-self: start; margin-top: 2px; color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-close .work-raised b { color: var(--ink); font-weight: 600; }
#page-close #close-work-state { margin: 0; }
#page-close #close-work-order { margin: var(--s-1) 0 var(--s-3); color: var(--ink); font-weight: 700; }
#page-close #close-work-order[hidden] { display: none; }
#page-close #close-work-order .order-glyph { display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: var(--s-1); vertical-align: -0.2em; }
#page-close .work-item .stage-line { margin-top: var(--s-3); pointer-events: none; }
/* D-W7-10-04 (P1-5): a work key's compact line keeps the siding's depth, as the board's line does (station 5 drops
   0.75 rem below the rail, its marker with it), so a Waiting ticket's marker never meets the key's edge */
#page-close .work-item .stage-line, #page-close .ticket-row .stage-line { padding-bottom: 1rem; }
/* D-W7-02-16 (item 02): on "your work" every line is the holder's own work in hand, so a hue there would say nothing:
   the marker stays ink, as built. After the chassis's general rule (app.css) and more specific. The ticket page keeps
   its hue; the recent rows carry no data-stage at all (c.7). */
#page-close .work-item .stage-line[data-stage] > li[data-state="current"]::before { background: var(--ink); border-color: var(--ink); }

/* a ticket by its number, and the recent tickets as keys led by their numbers */
#page-close .open-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-panel); margin: 0; }
#page-close .open-row input { min-height: 64px; font-size: var(--step-1); }
#page-close .open-row .key { min-width: 6.5rem; }
#page-close .ticket-keys { gap: var(--gap-panel); }
#page-close .ticket-keys li.card { padding: 0; border: 2px solid var(--ink); }
#page-close .ticket-keys li.card > button.ticket-key {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4);
  font-size: var(--step-0); font-weight: 600;
}
#page-close .ticket-key .tno { font-size: var(--step-2); }
/* D-W7-10-05 (P2-4): the recent tickets as a ruled register, not boxes: one ruled row each, its number, the machine
   by tag and name, the record's stage word, and the compact stage line under them; the whole row is the key (56 px) */
#page-close .ticket-keys.ruled { display: block; gap: 0; border-bottom: 1px solid var(--rule); }
#page-close .ticket-row {
  position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2); border-top: 1px solid var(--rule);
  transition: background-color var(--t-ui) var(--ease-out);
}
#page-close .ticket-row:hover { background: var(--surface); }
#page-close .ticket-row:focus-within { outline: 3px solid var(--ink); outline-offset: -3px; }
#page-close .ticket-row > button.ticket-key {
  grid-column: 1 / -1; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--s-3);
  align-items: baseline; width: 100%; min-height: 56px; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; color: var(--ink); text-align: left; font-weight: 600;
}
#page-close .ticket-row > button.ticket-key:hover, #page-close .ticket-row > button.ticket-key:active { background: transparent; transform: none; }
#page-close .ticket-row > button.ticket-key:focus-visible { outline: none; }
#page-close .ticket-row > button.ticket-key::after { content: ""; position: absolute; inset: 0; }
#page-close .ticket-row .tno { font-size: var(--step-2); line-height: 1.1; }
#page-close .ticket-what { min-width: 0; overflow-wrap: anywhere; }
#page-close .ticket-what .tag { margin-right: var(--s-1); }
#page-close .ticket-stage { grid-column: 2; color: var(--ink-2); font-weight: 600; }
#page-close .ticket-row .stage-line { grid-column: 2; max-width: 16rem; margin: var(--s-1) 0 0; pointer-events: none; }
@media (min-width: 900px) {
  /* at the desk one row per ticket: the words, then the line beside them, as the board's desk row */
  #page-close .ticket-row { grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; }
  #page-close .ticket-row > button.ticket-key { grid-column: 1 / span 2; grid-row: 1; }
  #page-close .ticket-row .stage-line { grid-column: 3; grid-row: 1; margin: 0; }
}
/* the close page (S2, S3): under the key in the work item; under the key at every width in a recent row (it no longer
   stands in a third column at the desk). The marker stays ink on both, as built (D-W7-02-16, c.7). */
#page-close .work-item .stage-line[data-scale="glance"] { margin-top: var(--s-3); padding-bottom: 0; }
#page-close .ticket-row .stage-line[data-scale="glance"] { grid-column: 1 / -1; max-width: none; margin: var(--s-2) 0 var(--s-1); padding-bottom: 0; }
@media (min-width: 900px) {
  #page-close .ticket-row .stage-line[data-scale="glance"] { grid-column: 1 / -1; grid-row: 2; margin: var(--s-2) 0 var(--s-1); }
}

/* the category keys: the server's closed vocabulary, one key each */
#page-close .category-keys { display: grid; gap: var(--gap-panel); }
#page-close .category-keys .key { width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4); text-align: left; }

/* the ticket's record, below the panel */
#page-close .ticket-record { margin-top: var(--s-6); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
#page-close .ticket-record h2 { font-size: var(--step-1); }
#page-close #close-where .stage-line { margin-top: var(--s-2); }
#page-close #close-where .stage-flag { margin: var(--s-2) 0 0; }
#page-close .ticket-record .stamp { padding: var(--s-2) var(--s-3); }
#page-close .ticket-record .stamp-what { font-weight: 700; }
#page-close .ticket-record .note-text { margin: var(--s-1) 0 0; }

/* the photograph's own line beside a result, in §3.4's grammar: not kept, the dashed 2 px pencil rule under the
   block; kept, the one continuous 3 px ink rule under it; in words, always (never a side stripe, P0-2) */
#page-raise .photo-sent, #page-close .photo-sent {
  margin-top: var(--s-3); padding: var(--s-2) 0;
  border: 0; border-bottom: 2px dashed var(--pencil);
}
#page-raise .photo-sent.kept, #page-close .photo-sent.kept { border-bottom: 3px solid var(--ink); }
#page-raise .photo-sent p, #page-close .photo-sent p { margin: var(--s-1) 0; }
#page-raise .photo-sent .photo-sent-head, #page-close .photo-sent .photo-sent-head { font-weight: 700; }

/* ============================================================================================ the inbox (FL-11) */
#page-inbox .inbox-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
#page-inbox .stream-word { color: var(--muted); font-weight: 600; }
#page-inbox .stream-word.live { color: var(--ink); font-weight: 700; }
#page-inbox .inbox-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--gap-panel); }
/* D-W7-10-06 (P1-10 · P-19): a notice is an entry in a ruled register, not a box: the number leads with what
   happened in the record's words beside it, the reason is its legend (why this person is told), then the delivery in
   words that say what it means. An entry not yet marked "Got it" stands under a 2 px ink rule; a seen one under a
   hairline, its words in ink-2. */
#page-inbox .inbox-list { gap: 0; border-bottom: 1px solid var(--rule); }
#page-inbox .inbox-card { padding: var(--s-3) var(--s-1) var(--s-4); background: var(--bg); border: 0; border-top: 2px solid var(--ink); border-radius: 0; }
#page-inbox .inbox-card.seen { border-top: 1px solid var(--rule); color: var(--ink-2); }
#page-inbox .inbox-no { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); row-gap: 0; margin: 0; }
#page-inbox .inbox-no-word { color: var(--muted); font-weight: 600; }
#page-inbox .inbox-no .tno { font-size: var(--step-4); line-height: 1.1; }
#page-inbox .inbox-what { margin: var(--s-1) 0 0; font-size: var(--step-1); font-weight: 700; line-height: 1.3; text-wrap: balance; }
#page-inbox .inbox-card.seen .inbox-what { font-weight: 600; }
#page-inbox .reason { margin: var(--s-1) 0 0; font-size: var(--step-0); font-weight: 400; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
#page-inbox .inbox-state { margin: var(--s-2) 0 0; font-weight: 700; }
#page-inbox .inbox-card.seen .inbox-state { font-weight: 600; }
#page-inbox .got-it, #inbox-list .got-it { display: block; width: 100%; min-height: 56px; margin-top: var(--s-3); font-size: var(--step-1); }

/* ============================================================================================ the Telegram bell (item 06) */
/* CONTRACT 06 sections 2, 3 and 8; copied by value from the design's telegram.css (md5 d533878c), with the pinned
   row at the bar's height (c.6, D-W7-09-03), MF-06-1's row sized to its words below 420 px (OPEN-06-A default) and
   no local person-code rule (the shell's .who-code, item 09). Tokens only; no colour literal; no late token. */
/* The delivery register on an inbox card: one ruled row per channel, the in-app row first. The Telegram row wears
   pencil until the bell's row holds Telegram's answer, then ink (D-W7-06-04). Never a chip. */
#page-inbox .deliv { margin: var(--s-2) 0 0; }
#page-inbox .deliv-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-2); align-items: baseline; padding: 6px 0; }
#page-inbox .deliv-row + .deliv-row { border-top: 1px solid var(--rule); }
#page-inbox .deliv dt { color: var(--muted); font-weight: 600; }
#page-inbox .deliv dd { margin: 0; font-weight: 700; color: var(--ink); line-height: 1.35; }
#page-inbox .deliv dd.inbox-state { margin: 0; }
#page-inbox .deliv-row[data-mark] { border: 0; border-radius: 0; }
#page-inbox .deliv-row[data-mark="pencil"] { border-bottom: 2px dashed var(--pencil); }
#page-inbox .deliv-row[data-mark="pencil"] dd { color: var(--pencil); font-weight: 500; }
#page-inbox .deliv-row[data-mark="pencil"] dd :lang(hi), #page-inbox .deliv-row[data-mark="pencil"] dd :lang(pa) { font-weight: 400; }
#page-inbox .deliv-row[data-mark="ink"] { border-bottom: 3px solid var(--ink); }
#page-inbox .deliv-row + .deliv-row[data-mark] { border-top: 1px solid var(--rule); }
#page-inbox .inbox-card.seen .deliv dd { font-weight: 600; }
/* The Telegram line at the inbox's head, and its blocks */
#page-inbox .bell { margin: var(--s-3) 0 0; }
#page-inbox .bell-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3);
  padding: var(--s-2) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
#page-inbox .bell-row[data-mark="ink"] { border: 0; border-radius: 0; border-bottom: 3px solid var(--ink); }
#page-inbox [data-bell-state="paired"] .bell-row { flex-wrap: nowrap; }
#page-inbox .bell-say { margin: 0; flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.35; }
#page-inbox .bell-row[data-mark="ink"] .bell-say { font-weight: 700; color: var(--ink); }
#page-inbox .bell-row button { flex: 0 0 auto; min-height: 48px; margin: 0; }
#page-inbox [data-bell-state="refused"] .bell-row { flex-wrap: wrap; }
#page-inbox [data-bell-state="refused"] .bell-say { color: var(--ink); font-weight: 700; }
#page-inbox [data-bell-state="off"] .unlit { margin: 0; }
#page-inbox .bell-block { margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4) var(--s-4); }
#page-inbox .bell-block .mark-word { margin: 0 0 var(--s-1); }
#page-inbox .bell-block h3 { margin: 0 0 var(--s-3); font-size: var(--step-1); line-height: 1.3; }
#page-inbox .bell-err { margin: var(--s-2) 0 0; }
.bell-lines { margin: 0; }
.bell-lines > div { padding: var(--s-2) 0; border-top: 1px solid var(--rule); }
.bell-lines dt { margin: 0; font-weight: 600; }
.bell-lines dd { margin: 2px 0 0; font-size: var(--step-0); line-height: 1.45; }
[data-mark="pencil"] .bell-lines dd { font-weight: 500; }
[data-mark="pencil"] .bell-lines dd :lang(hi), [data-mark="pencil"] .bell-lines dd :lang(pa) { font-weight: 400; }
.bell-effect { margin: var(--s-3) 0 0; line-height: 1.45; }
/* the block's keys: back left, the act right, 64 px, at --step-1 at every width (D-W7-06-18: the type never shrinks
   to fit). From 420 px 1 : 2; below 420 px the row is sized to its words (MF-06-1, OPEN-06-A DEFAULT): the back key
   takes the width of its words, the act key the rest, so every key holds one line in en-IN, hi-IN and pa-IN. */
#page-inbox .bell-keys { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-panel); margin: var(--s-4) 0 0; }
#page-inbox .bell-keys .key { min-height: 64px; margin: 0; font-size: var(--step-1); white-space: nowrap; }
@media (max-width: 419.98px) {
  #page-inbox .bell-keys { grid-template-columns: max-content minmax(0, 1fr); }
}
/* the read-back's keys are never under the fold on the phone (D-W7-00-10): pinned above the bar at the bar's own
   height (c.6: 76px + max(8px, inset), the shell's bar, item 09), on the page's ground with a 2 px ink rule above */
@media (max-width: 899.98px) {
  #page-inbox .readback .bell-keys { position: sticky; bottom: calc(76px + max(8px, var(--sa-bottom))); z-index: 4;
    margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4);
    background: var(--bg); border-top: 2px solid var(--ink); border-radius: 0 0 var(--radius) var(--radius); }
}
/* the link that opens Telegram on this phone: the step's one act, an ink-filled 64 px key (X-24) */
.key-link { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--s-2) var(--s-3);
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--bg); color: var(--ink);
  font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color var(--t-ui) var(--ease-out); }
.key-link:hover { background: var(--surface); }
.key-link.key-ink { min-height: 64px; margin: 0 0 var(--s-3); background: var(--ink); color: var(--bg); font-size: var(--step-1); }
.key-link.key-ink:hover { background: var(--ink-2); border-color: var(--ink-2); }
.bell-or { margin: 0 0 var(--s-1); }
/* the one-time code: the whole line a paste sends ("/start" and the code), pencil until the record holds a pairing,
   never broken, selectable whole; --step--1 below 420 px so the 360 first screen has no horizontal scroll (OPEN-06-B) */
.bell-code { margin: 0; padding: var(--s-2) var(--s-3); border: 2px dashed var(--pencil); border-radius: var(--radius-s);
  font-size: var(--step-1); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow-x: auto; -webkit-user-select: all; user-select: all; }
.bell-code-cmd { font-weight: 600; color: var(--ink-2); }
@media (max-width: 419.98px) { .bell-code { padding: var(--s-2); font-size: var(--step--1); letter-spacing: 0.01em; } }
.bell-until { margin: var(--s-2) 0 0; font-weight: 700; }
.bell-paste { margin: var(--s-1) 0 0; line-height: 1.45; }
.bell-wait { margin: 0 0 var(--s-3); line-height: 1.45; }
.bell-checked { display: block; margin-top: 2px; font-weight: 700; }
.bell-recorded { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); }
.bell-recorded .mark-word { margin: 0; }
.bell-recorded .tno-slot { font-size: var(--step-3); }
.bell-result-text { margin: 0; font-size: var(--step-0); line-height: 1.45; }
#page-inbox .bell-block > #bell-again { display: block; width: 100%; min-height: 56px; margin: var(--s-3) 0 0; }
/* ===================================== the code to scan on the pairing panel (wave 10 item 01; the symbol's own rules are app.css's .qr-sym) */
#page-inbox .bell-qr-wrap { margin: 0 0 var(--s-3); }
/* the fold key: one line, 48 px, closed 32 px under "Open Telegram"; open, 12 px (the symbol needs the height). On a phone the code
   view's key row stands in the box's flow (MF-W11P-02-1, below the wide block), so nothing pinned meets the key; on every face the
   key is shown and closed on load (MF-W11P-02-3) */
#page-inbox #bell-qr-show { display: block; width: 100%; min-height: 48px; margin: var(--s-6) 0 0; padding: var(--s-2) var(--s-3);
  font-size: var(--step-0); line-height: 1.3; white-space: nowrap; }
#page-inbox #bell-qr-show[aria-expanded="true"] { margin-top: var(--s-3); }
#page-inbox #bell-code-word { scroll-margin-top: var(--s-4); }
#page-inbox .bell-qr { margin: var(--s-2) 0 0; }
/* narrow faces draw the phone FLOOR, 5 CSS px per module (QR-SIZING section 1), so that with the fold open the mark word, the act,
   the whole symbol and its caption stand above the pinned row at 360 x 780; wide faces keep 6 px */
#page-inbox .bell-qr .qr-sym svg { width: 205px; height: 205px; }
#page-inbox .bell-qr .qr-sym[data-modules="45"] svg { width: 225px; height: 225px; }
#page-inbox .bell-qr[data-open="false"] { display: none; }
#page-inbox .bell-qr-caption { margin: var(--s-2) 0 0; font-size: var(--step-0); line-height: 1.45; }
#page-inbox .bell-qr-none { margin: 0 0 var(--s-3); color: var(--ink); font-weight: 600; line-height: 1.45; }
#page-inbox #bell-code-box[data-life="expiring"] .bell-wait-words { font-weight: 700; }
/* the band marks itself by its words, not by weight, in Indic scripts: the built pencil rule's 400 holds there (the node itself under
   its lang, or a run inside it) */
#page-inbox #bell-code-box[data-life="expiring"] .bell-wait-words:lang(hi), #page-inbox #bell-code-box[data-life="expiring"] .bell-wait-words :lang(hi),
#page-inbox #bell-code-box[data-life="expiring"] .bell-wait-words:lang(pa), #page-inbox #bell-code-box[data-life="expiring"] .bell-wait-words :lang(pa) { font-weight: 400; }
@media (min-width: 600px) and (min-height: 480px) {
  #page-inbox #bell-qr-show { display: block; margin: 0; }
  #page-inbox #bell-qr-show[aria-expanded="true"] { margin: 0; }
  #page-inbox .bell-qr .qr-sym svg { width: 246px; height: 246px; }
  #page-inbox .bell-qr .qr-sym[data-modules="45"] svg { width: 270px; height: 270px; }
  /* two rows: the code to scan beside the wait line and "Open Telegram"; under both, across the whole box, the or-line, the code's
     text, its until line and the paste line (the code's text never shares a column with the symbol) */
  #page-inbox #bell-code-box[data-qr="drawn"] { display: grid; grid-template-columns: min-content minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto auto auto auto auto; column-gap: var(--s-6); align-items: start; }
  #page-inbox #bell-code-box[data-qr="drawn"] > * { grid-column: 1 / -1; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-code-word { grid-row: 1; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-code-title { grid-row: 2; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-qr-wrap { grid-column: 1; grid-row: 3 / 6; margin: 0 0 var(--s-4); }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-qr-wrap { min-width: 250px; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-wait { grid-column: 2; grid-row: 3; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-open { grid-column: 2; grid-row: 4; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-or { grid-row: 6; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-code { grid-row: 7; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-until { grid-row: 8; }
  #page-inbox #bell-code-box[data-qr="drawn"] > #bell-paste { grid-row: 9; }
  #page-inbox #bell-code-box[data-qr="drawn"] > .bell-keys { grid-row: 10; }
}
/* MF-W11P-02-1 (wave 11 polish, R-1): on a phone (where QR_WIDE does not hold, below 900 px) the code view's key row stands in the
   box's flow at its foot, not pinned, so the closed fold key is never cut by it; the read-back's rows stay pinned as built */
@media (max-width: 599.98px), (max-width: 899.98px) and (max-height: 479.98px) {
  #page-inbox #bell-code-box .bell-keys { position: static; z-index: auto; margin: var(--s-4) 0 0; padding: 0;
    background: transparent; border-top: 0; border-radius: 0; }
}
/* the inbox key at the foot: how to read these cards (the explanatory notes live here, not over the first card) */
#page-inbox .inbox-key { list-style: none; margin: var(--s-4) 0 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
#page-inbox .inbox-key li { margin: 0 0 var(--s-1); padding: 0; line-height: 1.45; }
/* ============================================================================================ the contract-reminder card (item 07) */
/* CONTRACT 07 section 3; copied by value from the design's reminder.css (the card part), with MF-07-1's last week on
   its own scale (the marks' positions are inline per cent, set by inbox.js) and MF-07-2's one DOM order (no CSS
   order). The machine leads where a ticket number would; no amber, no red, no colour for nearness: ink family only. */
#page-inbox .remind-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0; }
#page-inbox .remind-tag { font-size: var(--step-3); font-weight: 800; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
#page-inbox .remind-name { font-size: var(--step-1); font-weight: 700; }
#page-inbox .remind-date { margin: var(--s-2) 0 0; font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
#page-inbox .remind-date-word { display: block; font-size: var(--step-0); font-weight: 600; color: var(--ink-2); }
#page-inbox .remind-date time { font-variant-numeric: tabular-nums; }
#page-inbox .remind-today { display: inline-block; margin-left: var(--s-1); padding: 0 var(--s-2); border: 1.5px solid var(--ink);
  border-radius: var(--radius-s); font-weight: 700; }
#page-inbox .remind-left { margin: var(--s-1) 0 0; line-height: 1.4; }
/* below 420 px "Contract date" stands inline before the date, and the days line holds ONE line (MF-07-2) */
@media (max-width: 419.98px) {
  #page-inbox .remind-date-word { display: inline; }
  #page-inbox .remind-left { font-size: var(--step--1); white-space: nowrap; }
  #page-inbox .remind-left .remind-n { font-size: var(--step-1); }
}
#page-inbox .remind-n { font-size: var(--step-2); font-weight: 800; font-variant-numeric: tabular-nums; }
#page-inbox .remind-keys { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: var(--s-3) 0 0; }
/* below 600 px the two keys share ONE row, each sized to its words ("Open the machine" takes its width, "Got it" the rest), so the
   decision is on the first screen at 360 x 780 (MF-07-2); the DOM order is unchanged */
@media (max-width: 599.98px) { #page-inbox .remind-keys { grid-template-columns: max-content minmax(0, 1fr); } }
@media (min-width: 600px) { #page-inbox .remind-keys { grid-template-columns: 1fr 2fr; } }
#page-inbox .remind-keys .got-it { margin: 0; }
#page-inbox .remind-card.seen .remind-keys { grid-template-columns: minmax(0, 1fr); }
#page-inbox .remind-step-wrap { margin: var(--s-3) 0 var(--s-2); }
#page-inbox .remind-step { margin: 0; color: var(--ink-2); font-weight: 600; }
/* the countdown (item 05's line at card scale, D-W7-07-03): passed ink, this notice ringed, coming hollow, the post */
#page-inbox .remind-ladder { position: relative; list-style: none; height: 4.4rem; margin: 0 2px 0 6px; padding: 0; }
#page-inbox .remind-ladder li { position: absolute; padding: 0; }
#page-inbox .rl-line { left: 0; right: 0; top: 2.7rem; height: 2px; background: var(--muted); }
#page-inbox .rl-done { left: 0; width: calc(var(--rl-width, 0) * 1%); top: calc(2.7rem - 0.5px); height: 3px; background: var(--ink); }
#page-inbox .rl-mark { left: calc(var(--rl-left, 0) * 1%); top: 2.7rem; width: 10px; height: 10px; margin: -4px 0 0 -5px; border: 2px solid var(--muted); border-radius: 50%;
  background: var(--bg); }
#page-inbox .rl-mark[data-state="past"] { border-color: var(--ink); background: var(--ink); }
#page-inbox .rl-mark[data-state="current"] { width: 16px; height: 16px; margin: -7px 0 0 -8px; border-color: var(--ink); background: var(--ink);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
#page-inbox .rl-num { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: var(--step--1); font-weight: 600;
  color: var(--ink-2); font-variant-numeric: tabular-nums; background: var(--bg); }
/* a number and the post's word sit on the page's ground, below or above their mark (never on its ink fill): said so,
   for the contrast check too; the current number clears the ring's outer edge by 1 px */
#page-inbox .rl-mark[data-state="current"] .rl-num { top: 21px; color: var(--ink); font-weight: 800; }
#page-inbox .rl-end { left: calc(var(--rl-left, 100) * 1%); top: calc(2.7rem - 10px); width: 4px; height: 22px; margin-left: -2px; background: var(--ink); }
#page-inbox .rl-end-word { position: absolute; right: 0; bottom: 26px; white-space: nowrap; font-weight: 700; color: var(--ink); background: var(--bg); }
#page-inbox .remind-card .meta { margin: var(--s-1) 0 0; }
#page-inbox .remind-next { margin: var(--s-2) 0 0; color: var(--ink-2); line-height: 1.4; }
#page-inbox .remind-earlier { margin: var(--s-3) 0 0; border-top: 1px solid var(--rule); }
#page-inbox .remind-earlier summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; cursor: pointer; }
#page-inbox .remind-earlier .stamps { margin: 0 0 var(--s-1); gap: 4px; }
#page-inbox .remind-earlier .stamps li.stamp { padding: var(--s-1) var(--s-3); border-radius: var(--radius-s); font-variant-numeric: tabular-nums; }
/* onboarding's door to the pairing (one checklist line) */
#page-onboard .check-words { font-weight: 700; }
#page-onboard .check-go { display: inline-flex; align-items: center; min-height: 48px; color: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================================ the queue box */
/* What waits on this phone: the signal and the count in words, then his items as read-back lines led by their
   numeral, no boxes (§3.3 (ii)). Pencil, a dashed rule under the line; sent, one 3 px ink rule (§3.4). */
#q-box { padding: var(--s-3) var(--s-4); background: var(--bg); border-bottom: 2px solid var(--ink); }
#q-box p { margin: var(--s-1) 0; }
#q-box .q-signal, #q-box .q-counts { color: var(--ink); font-weight: 700; }
#q-box .q-toggle { min-height: 48px; margin-top: var(--s-1); }
#q-box .q-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
#q-box .q-item { padding: var(--s-2) 0 var(--s-3); background: transparent; border: 0; border-radius: 0; }
#q-box .q-item[data-mark="pencil"] { border-bottom: 2px dashed var(--pencil); }
#q-box .q-item[data-mark="ink"] { border-bottom: 3px solid var(--ink); }
#q-box .q-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
#q-box .q-mark { font-size: var(--step-0); }
#q-box .q-what { font-size: var(--step-0); font-weight: 600; }
#q-box .q-said { color: var(--ink-2); font-weight: 600; }
#q-box .q-item .row { margin-top: var(--s-2); }
#q-box .q-item .row button { min-height: 48px; }
#q-box .q-face { margin-top: var(--s-2); padding: var(--s-3); }
#q-box .q-face h3 { margin: 0 0 var(--s-1); }
#q-box .q-face .mark-word { margin: 0 0 var(--s-2); }
#q-box .q-face .key-record { width: 100%; min-height: 64px; margin-top: var(--s-2); font-size: var(--step-1); }
#q-box .q-face .key.wide { display: block; width: 100%; min-height: 64px; margin-top: var(--s-2); font-size: var(--step-1); }

/* ============================================================================================ onboard */
/* his list, the install, the opt-in in his language (Yes and No, neither chosen for him), and practice, pencil,
   never ink (§3.4; ADR-030 §3.1) */
#page-onboard .checklist { gap: var(--s-2); }
#page-onboard .checklist li.check {
  padding: var(--s-3) var(--s-4); background: var(--bg); border: 2px solid var(--ink); border-radius: var(--radius);
  font-size: var(--step-0); font-weight: 600;
}
#page-onboard .checklist li.check.not-yet { border-style: dashed; border-color: var(--pencil); color: var(--pencil); }
#page-onboard .check-mark { display: inline-block; min-width: 1.4em; font-weight: 800; }
#page-onboard .check-state { font-weight: 700; }
#page-onboard .optin button { min-height: 64px; font-size: var(--step-1); flex: 1 1 8em; }
#page-onboard button.install { min-height: 64px; }
#page-onboard button.install svg { vertical-align: middle; margin-right: var(--s-2); }
#page-onboard .practice-banner {
  padding: var(--s-2) var(--s-3); border: 2px dashed var(--pencil); border-radius: var(--radius);
  color: var(--pencil); font-size: var(--step-1); font-weight: 700;
}
#page-onboard #onboard-priority button, #page-onboard #onboard-propose, #page-onboard #onboard-close-propose,
#page-onboard #onboard-confirm, #page-onboard #onboard-cancel, #page-onboard #onboard-again { min-height: 64px; }
#page-onboard .readback, #page-onboard .result { padding: var(--s-3) var(--s-4) var(--s-4); }
#page-onboard .readback .mark-word { margin: 0 0 var(--s-2); font-size: var(--step-0); }
#page-onboard .readback-text { font-size: var(--step-1); }

/* ============================================================================================ the onboarding QR (wave 10 item 02)
   The owner's and the plant head's part of #/onboard (CONTRACT 02 section 3): part B of the design's onbqr.css (md5
   f73589f8df21bde3066e4d08e5cb41ef), copied exactly; the symbol's own rules are app.css's .qr-sym (adopted, never restyled). */
/* the part: after his own list, before "1 · The app on your phone"; a hairline above it, as a new chapter of the page */
#page-onboard .onbqr { margin: var(--s-3) 0 0; padding: 0; border-top: 1px solid var(--rule); }   /* refine dw10-009: top room trimmed, D-W10-02-20 */
#page-onboard .onbqr h2 { margin: var(--s-3) 0 var(--s-2); }
#page-onboard .onbqr-lead { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--step-0); line-height: 1.45; }   /* now inside the read-back, after the effect line (D-W10-02-20) */
#page-onboard .onbqr-count { margin: 0 0 var(--s-2); font-weight: 700; font-variant-numeric: tabular-nums; }
/* the find field: one visible word beside the field, the full words are its name (aria-label), D-W10-02-20 */
#page-onboard .onbqr-find { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); font-weight: 600; }
#page-onboard .onbqr-find input { flex: 1 1 auto; min-width: 0; margin: 0; }
#page-onboard .onbqr-one { margin: 0 0 var(--s-2); color: var(--ink-2); line-height: 1.45; }
#page-onboard .onbqr-none { margin: var(--s-2) 0 0; font-weight: 600; line-height: 1.45; }

/* the list: one row per person; a dashed pencil row until the record holds the pairing, then a solid ink row with
   the tick (the checklist's own grammar, ff:504 to 508); the name is the roster's, so it is always ink */
#page-onboard .onbqr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
#page-onboard .onbqr-row { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--bg); }
#page-onboard .onbqr-row[data-mark="pencil"] { border-width: 2px; }
#page-onboard .onbqr-row[data-mark="ink"] { border-bottom-width: 2px; }
#page-onboard .onbqr-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
#page-onboard .onbqr-words { flex: 1 1 14rem; min-width: 0; }
#page-onboard .onbqr-who { margin: 0; color: var(--ink); font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
#page-onboard .onbqr-facts { margin: 2px 0 0; color: var(--muted); font-size: var(--step-0); font-weight: 400; line-height: 1.4; }
#page-onboard .onbqr-state { margin: var(--s-1) 0 0; font-size: var(--step-0); line-height: 1.4; font-variant-numeric: tabular-nums; }
#page-onboard .onbqr-row[data-mark="pencil"] .onbqr-state { color: var(--pencil); font-weight: 600; }
#page-onboard .onbqr-row[data-mark="ink"] .onbqr-state { color: var(--ink); font-weight: 700; }
#page-onboard .onbqr-pair { flex: 0 0 auto; min-height: 48px; margin: 0; }
#page-onboard .onbqr-more { display: block; width: 100%; margin: var(--s-3) 0 0; }

/* the open row: the person's row opens into the read-back, the code to scan, or the result (one row at a time) */
#page-onboard .onbqr-row[data-open="true"] { padding: 0; border: 0; background: none; }
#page-onboard .onbqr-block { margin: 0; padding: var(--s-3) var(--s-4) var(--s-4); scroll-margin-top: var(--s-3); }
#page-onboard .onbqr-block .mark-word { margin: 0 0 var(--s-1); font-size: var(--step-0); }
#page-onboard .onbqr-block h3 { margin: 0 0 var(--s-3); font-size: var(--step-1); line-height: 1.3; }
#page-onboard .onbqr-block .bell-lines dd { font-size: var(--step-0); }
#page-onboard .onbqr-block .err { margin: var(--s-3) 0 0; }
/* a refusal or no answer leads the block: the sentence sits right under the plain title (D-W10-02-19) */
#page-onboard .onbqr-block h3 + .err { margin: 0 0 var(--s-3); line-height: 1.45; }
#page-onboard .onbqr-fig { margin: 0; }
#page-onboard .onbqr-caption { margin: var(--s-2) 0 0; font-size: var(--step-0); line-height: 1.45; max-width: 30rem; }
#page-onboard .onbqr-live > .bell-until { margin: 0 0 var(--s-3); }
#page-onboard .onbqr-live > .bell-wait { margin: var(--s-3) 0 0; }
/* one decision per screen: while a row is open (read-back or live code) the part takes the page; the person's own
   list and steps 1 to 3 step aside until the row closes (paired, ran out, stopped, back) */
#page-onboard[data-onbqr-open="true"] > :not(#onboard-pairing) { display: none; }
#page-onboard[data-onbqr-open="true"] .onbqr { margin-top: 0; padding-top: 0; border-top: 0; }
#page-onboard[data-onbqr-open="true"] .onbqr h2 { margin-top: 0; }

/* the block's keys: back left, the act right, 64 px at --step-1 (the bell's grammar, ff:376 to 391); one key alone
   (Stop) takes the row; pinned above the bar below 900 px so the act is never under the fold */
#page-onboard .onbqr-keys { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-panel); margin: var(--s-4) 0 0; }
#page-onboard .onbqr-keys.one { grid-template-columns: minmax(0, 1fr); }
#page-onboard .onbqr-keys .key { min-height: 64px; margin: 0; font-size: var(--step-1); white-space: nowrap; }
/* below 420 px a key may take two lines ("Show the code to scan", "Back to the list" are longer than the bell's
   words); the type never shrinks (D-W7-06-18); the act key keeps the wider column */
@media (max-width: 419.98px) {
  #page-onboard .onbqr-keys { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  #page-onboard .onbqr-keys .key { white-space: normal; line-height: 1.2; padding-left: var(--s-2); padding-right: var(--s-2); }
  #page-onboard .onbqr-keys.one { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899.98px) {
  /* the read-back's keys pin; the live code's Stop does not (the act there is the scan: nothing may cover the symbol) */
  #page-onboard .onbqr-block:not(.onbqr-live) .onbqr-keys { position: sticky; bottom: calc(76px + max(8px, var(--sa-bottom))); z-index: 4;
    margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4);
    background: var(--bg); border-top: 2px solid var(--ink); border-radius: 0 0 var(--radius) var(--radius); }
}
#page-onboard .onbqr-block > .key.wide { display: block; width: 100%; min-height: 56px; margin: var(--s-3) 0 0; font-size: var(--step-1); }

/* the code view on a wide face (the same query as Q1's QR_WIDE): the code to scan left, the life and the wait right */
@media (min-width: 600px) and (min-height: 480px) {
  #page-onboard .onbqr-live { display: grid; grid-template-columns: min-content minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto; column-gap: var(--s-6); align-items: start; }
  #page-onboard .onbqr-live > * { grid-column: 1 / -1; }
  #page-onboard .onbqr-live > .mark-word { grid-row: 1; }
  #page-onboard .onbqr-live > h3 { grid-row: 2; }
  #page-onboard .onbqr-live > .onbqr-fig { grid-column: 1; grid-row: 3 / 6; }
  #page-onboard .onbqr-live > .bell-until { grid-column: 2; grid-row: 3; }
  #page-onboard .onbqr-live > .bell-wait { grid-column: 2; grid-row: 4; margin: 0; }
  #page-onboard .onbqr-live > .onbqr-keys { grid-row: 6; }
  #page-onboard .onbqr-live .onbqr-caption { max-width: 250px; }
}

/* ---- refine dw10-009 (narrow faces, below 600 px) ---- */
@media (max-width: 599.98px) {
  /* the row: the key on the state line's right, the name at --step-0 700 (the checklist's own size, ff:504 to 508), so
     a row is about 125 px and the first row's key is on a 360 x 780 first screen (D-W10-02-20) */
  #page-onboard .onbqr-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; }
  #page-onboard .onbqr-words { display: contents; }
  #page-onboard .onbqr-who, #page-onboard .onbqr-facts { grid-column: 1 / -1; }
  #page-onboard .onbqr-who { font-size: var(--step-0); }
  #page-onboard .onbqr-state { grid-column: 1; grid-row: 3; margin: var(--s-1) 0 0; }
  #page-onboard .onbqr-pair { grid-column: 2; grid-row: 3; margin: var(--s-1) 0 0; }
  /* the live code: Stop (48 px, not pinned, nothing over the symbol) on the until line's right; the symbol centred in
     the block (D-W10-02-21) */
  #page-onboard .onbqr-live { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; }
  #page-onboard .onbqr-live > * { grid-column: 1 / -1; }
  #page-onboard .onbqr-live > .bell-until { grid-column: 1; grid-row: 3; margin: 0; }
  #page-onboard .onbqr-live > .onbqr-keys { grid-column: 2; grid-row: 3; display: block; margin: 0; }
  #page-onboard .onbqr-live > .onbqr-keys .key { min-height: 48px; padding: 0 var(--s-4); font-size: var(--step-0); white-space: nowrap; }
  #page-onboard .onbqr-live > .onbqr-fig { grid-row: 4; margin: var(--s-3) 0 0; }
  #page-onboard .onbqr-live > .bell-wait { grid-row: 5; }
  #page-onboard .onbqr-fig .qr-sym { display: block; width: max-content; margin: 0 auto; }
}

/* the person's own inbox after an onboarding pairing: the built ink row, new words only (no rule needed) */

/* ============================================================================================ the desk width */
/* At 900 px and above the floor's faces keep the phone's one column, a panel is read, not spread, and the fixed row
   sits inside it. (#close-moves and #note-box are FACE-SV's and keep the page's width.) */
@media (min-width: 900px) {
  #page-raise, #page-inbox, #page-onboard, #page-close #close-list, #page-close #close-err,
  #page-close #close-detail > .readout, #page-close #close-detail > .step, #page-close #close-detail > .readback,
  #page-close #close-detail > .result, #page-close #close-detail > .keep, #page-close #close-detail > .photo-sent,
  #page-close #close-detail > .dock, #page-close #close-detail > .ticket-record { max-width: 40rem; }
  #page-raise .readout-lines, #page-close .readout-lines {
    display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--s-2) var(--s-4);
  }
  #page-raise .readout-lines dt, #page-close .readout-lines dt { margin: 0; padding-top: 0.2em; }
  #page-raise .readout-lines dd, #page-close .readout-lines dd { margin: 0; }
}

/* ENR's enrolment step on the identify face (ADR-031 §4.3 (e) · §4.12 test 19), drawn in the read-back grammar (the
   POLISH round, P1-3): the block's pencil or ink frame is the chassis's [data-mark]; the sentence first, the number
   under it at step 6 (step 4 on a narrow phone), tabular, never broken; the device's id beside the enrolled sentence. While the number is shown
   enrol.js does not draw the sign-in's controls, so the step sits at the top of the face. */
#page-identify #enr-step { margin: var(--s-3) 0 var(--s-2); padding: var(--s-4); border-radius: var(--radius); }
#page-identify #enr-step-say { margin: 0; font-size: var(--step-1); line-height: 1.35; }
#page-identify #enr-step-number {
  margin: var(--s-3) 0 var(--s-2); font-size: var(--step-6); font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* on a narrow phone step 6's eight digits are wider than the screen (394 px at 360, the render): step 4 there */
@media (max-width: 420px) { #page-identify #enr-step-number { font-size: var(--step-4); } }
#page-identify #enr-step-device { margin: var(--s-2) 0 0; }
#page-identify #enr-step .row { margin: var(--s-3) 0 0; }

/* The POLISH round (P1-2): on the phone, inside a flow, the fixed row is pinned to the foot of the screen, so the
   96 px record key is always on the read-back's screen, bottom-right, and back bottom-left (S01 D-05 · D-08: "always
   in the same place"); it rides on the page's ground with its 2 px ink rule above it. */
@media (max-width: 899.98px) {
  body.in-flow #page-raise .dock, body.in-flow #page-close .dock {
    position: sticky; bottom: 0; z-index: 5;
    /* item 09 (D-W7-09-04): the foot is the larger of the built 12 px and the home-indicator inset, not their sum, so
       the 96 px record key sits just clear of the 34 px band (13 px higher than built on a notched iPhone); with no
       inset: 12 px, as built. The key's size and place do not change. */
    padding: var(--s-3) 0;
    padding-bottom: max(var(--s-3), var(--sa-bottom));
    background: var(--bg);
  }
}

/* item 09 (D-W7-09-10): a short phone (under 740 px tall: the 375 x 667 iPhone in every mode, and any iPhone inside
   Safari with its bars shown): the read-back's readout sets each label beside its value, the desk's own grid, so the
   question and its pencil word reach the first screen above the dock. Words, sizes, pencil and order unchanged. */
@media (max-width: 899.98px) and (max-height: 740px) {
  #page-raise .readout-lines, #page-close .readout-lines {
    display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: var(--s-2) var(--s-3);
    align-items: baseline;
  }
  #page-raise .readout-lines dt, #page-close .readout-lines dt { margin: 0; }
  #page-raise .readout-lines dd, #page-close .readout-lines dd { margin: 0; }
  #page-raise .readout, #page-close .readout { padding: var(--s-2) var(--s-3) var(--s-3); margin-bottom: var(--s-3); }
}

/* item 09, PART B (D-W7-09-07): the iPhone's add steps, on onboard. On an iPhone the browser offers no install button,
   so the block after "2 · Messages" holds three drawn steps: a schematic of the screen region, then the words. Never
   Apple's own glyphs: neutral boxes and rows in the product's ink, the place to tap an ink fill (the product's own
   "this one" mark, X-24). Tokens only; nothing animates. */
#page-onboard .ios-add {
  margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
}
#page-onboard .ios-lead { margin: 0 0 var(--s-3); font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
#page-onboard .ios-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
#page-onboard .ios-step {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-3); align-items: start;
  padding: 0 0 var(--s-3); border-bottom: 1px solid var(--rule);
}
#page-onboard .ios-step:last-child { border-bottom: 0; padding-bottom: 0; }
#page-onboard .ios-step svg { display: block; width: 4.5rem; height: auto; }
#page-onboard .ios-step svg .frame { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
#page-onboard .ios-step svg .quiet { fill: none; stroke: var(--muted); stroke-width: 2; }
#page-onboard .ios-step svg .here { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
#page-onboard .ios-step svg .ring { fill: none; stroke: var(--ink); stroke-width: 3; }
#page-onboard .ios-step p { margin: 0; font-size: var(--step-0); line-height: 1.45; }
#page-onboard .ios-no {
  display: block; font-size: var(--step-2); font-weight: 800; line-height: 1; margin: 0 0 var(--s-1);
}
#page-onboard .ios-after { margin: var(--s-3) 0 0; font-weight: 700; }
#page-onboard .ios-other { margin: var(--s-2) 0 0; color: var(--ink-2); }
#page-onboard .ios-add .row { margin-top: var(--s-3); }
#page-onboard #onboard-ios-later { flex: 0 1 auto; min-width: 8rem; }
#page-onboard #onboard-ios-show { min-height: 48px; text-align: left; }

/* bw4-038 (N-1, the studio re-score's single worst finding; ceo-345 · R-345-7): the no-answer words (.err) and the
   keep offer right beside them (.keep) take focus on a raise or a close that gets no answer (raise.js confirm's
   catch · close.js confirm's catch), the browser's own scrollIntoView-on-focus then has to clear the dock pinned
   above, at the foot of this same flow (the rule above). scroll-margin-bottom is sized at least the dock's own
   rendered height here (its 2 px rule, its padding, the 96 px record key) plus the keep offer's own height and
   the gap before it, with a margin of slack: so neither block is ever left scrolled to just where the dock sits. */
@media (max-width: 899.98px) {
  body.in-flow #page-raise .err, body.in-flow #page-close .err,
  body.in-flow #page-raise .keep, body.in-flow #page-close .keep {
    scroll-margin-bottom: calc(2px + (var(--s-3) * 2) + var(--target-record) + var(--s-2) + var(--target-min) + var(--s-5));
  }
}

/* ============================================================================ item 01, the kind of work (FB-26-01) */
/* The step (CONTRACT 01 §3; D-W7-01-01, -02): two 64 px floor keys, one decision; the default's key first, its name a
   second line; a pressed key keeps the built tick (beside the word, not under it). */
#page-raise .class-keys { display: grid; gap: var(--gap-panel); margin: var(--s-2) 0 0; }
#page-raise .class-keys .key {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4); text-align: left;
}
#page-raise .class-keys button[aria-pressed="true"]::after { position: absolute; top: 50%; right: var(--s-4); transform: translateY(-50%); }
#page-raise .class-keys .class-word {
  display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--step-2); font-weight: 700; line-height: 1.2;
}
#page-raise .class-keys .class-default {
  display: block; margin-top: 2px; font-size: var(--step-0); font-weight: 600; color: var(--ink-2);
}
#page-raise .class-keys button[aria-pressed="true"] .class-default { color: inherit; }
#page-raise .class-keys .break-mark { width: 1.6em; height: 0.9em; }
/* a refused class (O-1): the ink words sit tight under the question, both keys stay above the dock */
#page-raise #raise-step-class #raise-err { margin: 0 0 var(--s-2); font-weight: 700; color: var(--ink); }
#page-raise #raise-step-class #raise-err + .class-keys { margin-top: 0; }

/* your work and the recent tickets (CONTRACT 01 §3; c.1, O-2): the class under the stage, in the key's text column */
#page-close .work-cls { grid-column: 2; justify-self: start; margin-top: var(--s-1); }
#page-close .ticket-key .cls { flex-basis: 100%; margin-left: 0; }
#page-close .ticket-row > button.ticket-key > .cls { grid-column: 2; justify-self: start; margin-top: var(--s-1); }

/* M-2 + M-5 + M-8 (D-W7-01-09; 04's M-8, the single statement of the fix): on the phone the raise's readout is the
   ruled label-beside-value table, at the read-back AND on every step before it ("Your raise so far"): the label
   column takes only its longest label up to 6 rem, each value starts level with its label at step 0, so the read-back
   with seven lines keeps "Step 7 of 7", "Raise it?", "Not recorded yet" and the record key above the pinned dock, and
   the words step keeps "Take a photograph" whole above it. The desk keeps its built grid. */
@media (max-width: 899.98px) {
  #page-raise .readout { padding: var(--s-2) var(--s-2) var(--s-3) var(--s-3); margin-bottom: var(--s-3); }
  #page-raise .readout .readout-head { margin: 0 0 var(--s-1); }
  #page-raise .readout .readout-lines {
    display: grid; grid-template-columns: fit-content(6rem) minmax(0, 1fr); column-gap: var(--s-3); row-gap: 0;
    align-items: baseline;
  }
  #page-raise .readout .readout-lines > div { display: contents; }
  #page-raise .readout .readout-lines dt { margin: 0; padding: 6px 0 0; line-height: 1.3; }
  #page-raise .readout .readout-lines dd { margin: 0; padding: 6px 0 3px; font-size: var(--step-0); line-height: 1.3; }
  #page-raise .readout .readout-lines dd [lang] { font-size: var(--step-0); }
  #page-raise .readout.at-readback + .readback { padding-top: var(--s-2); }
  #page-raise .readout.at-readback + .readback .step-no { margin-bottom: 0; }
  #page-raise .readout.at-readback + .readback > h2 { margin-bottom: var(--s-1); }
}

/* ============================================================================ item 04, photographs at every stage (FB-26-06) */
/* CONTRACT 04 §3 (photo.css, the dw7-016 block winning where it repeats). A photograph is pencil while it is held on
   the phone (a dashed pencil frame and "Not kept yet") and ink once the server has kept it (a solid ink frame, a 3 px
   foot); a line with no picture is one column (M-1); an answered refusal is ink with a solid hairline; a missing file
   is ink words in a solid hairline box (M-6). The viewfinder's ground is light. Tokens only; nothing animates. */
.photo-strip { margin: var(--s-4) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--rule); }
.photo-strip .strip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); margin: 0 0 var(--s-2); }
.photo-strip .strip-name { font-weight: 700; color: var(--ink); }
.photo-strip .strip-limit { color: var(--ink-2); }
.photo-take { display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; min-height: 64px; font-size: var(--step-1); font-weight: 700; }
.photo-glyph { width: 1.4em; height: 1.4em; flex: none; }
.photo-glyph path, .photo-glyph circle { fill: none; stroke: currentColor; stroke-width: 2; }
/* a label that opens the phone's own camera is drawn as the key it is (a label for the file input) */
label.key {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 64px; 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; font-size: var(--step-1); line-height: 1.2; text-align: center; cursor: pointer;
}
label.key:hover { background: var(--surface); }
label.key.wide { width: 100%; margin-top: var(--gap-panel); }
label.key.photo-take > span { min-width: 0; }
.photo-strip .capture { margin: 0; }
.photo-strip .meta { margin: var(--s-2) 0 0; }
.photo-strip .key:disabled { background: var(--bg); color: var(--muted); border-color: var(--muted); }

/* a photograph held on the phone: one pencil frame, the thumbnail's (D-W7-04-15) */
.photo-held { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-3); align-items: start; margin: 0; padding: 0; border: 0; border-radius: var(--radius-s); }
.photo-held .thumb { display: block; width: 7rem; border: 2px dashed var(--pencil); border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); }
.photo-held .thumb canvas, .photo-held .thumb img, .photo-sent .thumb img, .vf-frame canvas, .vf-frame video { display: block; width: 100%; height: auto; }
.photo-held figcaption { margin: 0; color: var(--pencil); line-height: 1.4; }
.photo-held .mark-word { display: block; margin: 0 0 var(--s-1); font-weight: 700; }
.photo-held + .row { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: var(--s-2); }
.photo-held + .row button { min-height: 48px; flex: 1 1 8rem; }

/* the in-page viewfinder (D-W7-04-04 · -14 · -16): in place of the step; the frame, its state in words, the shutter */
.viewfinder { margin: 0; }
.vf-for { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border: 2px dashed var(--pencil); border-radius: var(--radius-s); color: var(--pencil); font-size: var(--step-0); }
.viewfinder .vf-frame { position: relative; margin: var(--s-2) 0 0; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.viewfinder .vf-frame[data-mark="pencil"] { border-style: dashed; border-color: var(--pencil); }
.viewfinder .vf-frame.vf-empty { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface); }
.viewfinder .vf-empty .photo-glyph { width: 3rem; height: 3rem; color: var(--pencil); }
.viewfinder .vf-state { margin: var(--s-2) 0 0; font-weight: 700; color: var(--ink); }
.viewfinder .vf-state[data-mark="pencil"] { color: var(--pencil); font-weight: 500; }
.viewfinder .vf-state:empty { display: none; }
.viewfinder .vf-asking { padding: var(--s-3); border: 2px dashed var(--pencil); border-radius: var(--radius); color: var(--pencil); font-weight: 500; }
.vf-shutter { display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; min-height: 64px; margin-top: var(--gap-panel); font-size: var(--step-1); }
.shutter-glyph { display: inline-block; width: 1.6em; height: 1.6em; }
.shutter-glyph circle, .shutter-glyph path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.vf-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-panel); margin-top: var(--gap-panel); }
.vf-choice .key { min-height: 64px; font-size: var(--step-1); }
/* the camera refused (D-W7-04-14): three one-sentence steps, then the three ways out, above the dock at 360 x 780 */
.vf-refused { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3) var(--s-3); border: 2px solid var(--ink); border-radius: var(--radius); background: var(--surface); }
.vf-refused p { margin: 0; font-weight: 700; }
.vf-refused ol { margin: var(--s-1) 0 0; padding-left: var(--s-5); }
.vf-refused li { margin: 2px 0; line-height: 1.35; }
.viewfinder[data-camera="refused"] > h2 { margin-bottom: var(--s-2); }
.viewfinder[data-camera="refused"] .key.wide { margin-top: var(--s-2); }
.viewfinder .key.wide.quiet, .viewfinder label.key.wide.quiet { font-size: var(--step-0); min-height: 56px; }
.viewfinder + .dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-panel); margin: var(--s-5) 0 0; padding: var(--s-4) 0 0; border-top: 2px solid var(--ink); }
.viewfinder + .dock .key-back { grid-column: 1; min-height: 64px; padding: var(--s-2); font-size: var(--step-0); }

/* the photograph's line after the act: the built .photo-sent grammar, the photograph drawn in it while it goes or is
   kept; one column wherever no picture goes with the line (M-1) */
.photo-sent .photo-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.photo-sent .photo-row.no-thumb { grid-template-columns: minmax(0, 1fr); }
.photo-sent .thumb { display: block; width: 5.5rem; min-height: 2rem; border: 2px dashed var(--pencil); border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); }
.photo-sent.kept .thumb { border: 2px solid var(--ink); border-bottom-width: 3px; }
.photo-sent .photo-sent-head { color: var(--pencil); }
.photo-sent.kept .photo-sent-head, .photo-sent.refused .photo-sent-head, .photo-sent.no-answer .photo-sent-head { color: var(--ink); }
#page-raise .photo-sent.refused, #page-close .photo-sent.refused { border-bottom: 1px solid var(--ink); }

/* the ticket page (D-W7-04-17): each photograph hangs from its station on the full stage line; opened in place */
#page-close .photos-where { margin: var(--s-2) 0 0; color: var(--ink); font-weight: 700; }
#close-where .shots { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; margin: var(--s-2) 0 var(--s-3); padding: 0; }
#close-where .shots > li { margin: 0; padding: 0; }
#close-where .shot { margin: 0; width: max-content; max-width: 100%; }
#close-where .shot button { display: block; width: 9.5rem; min-height: 48px; padding: 0; border: 2px solid var(--ink); border-bottom-width: 3px; border-radius: var(--radius-s); overflow: hidden; background: var(--bg); }
#close-where .shot button img { display: block; width: 100%; height: auto; }
#close-where .shot figcaption { margin: var(--s-1) 0 0; color: var(--ink-2); font-weight: 400; line-height: 1.35; }
#close-where .shot-gone {
  display: grid; place-items: center; min-height: 7rem; padding: var(--s-2); border: 1px solid var(--ink);
  border-radius: var(--radius-s); color: var(--ink); font-weight: 700; text-align: center; width: 9.5rem; max-width: 100%;
}
#close-where .open-li { flex-basis: 100%; width: auto; }
#close-where .photo-open { margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 3px solid var(--ink); }
#close-where .big-shot { display: block; width: 100%; max-width: 40rem; border: 2px solid var(--ink); border-radius: var(--radius-s); overflow: hidden; }
#close-where .big-shot img { display: block; width: 100%; height: auto; }
#close-where .photo-open figcaption { margin: var(--s-2) 0; font-weight: 600; }
#close-where #close-photo-shut { min-height: 48px; }
/* a ticket outside the person's sections: the refusal, framed (O-5) */
#page-close .refusal { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); }
#page-close .refusal p { margin: var(--s-1) 0 0; }
#page-close .refusal .big { margin-top: 0; font-size: var(--step-1); font-weight: 700; }
/* a photograph added to the record moves no stage: drawn as a note is, a solid hairline frame */
#page-close .stamp.attach { border: 1px solid var(--ink-2); background: var(--surface); padding: var(--s-2) var(--s-3); }

@media (min-width: 900px) {
  .photo-held { grid-template-columns: 9rem minmax(0, 1fr); }
  .photo-held .thumb { width: 9rem; }
  .viewfinder .vf-frame { max-width: 40rem; }
  #page-close #close-detail > .viewfinder, #page-close #close-detail > .viewfinder + .dock { max-width: 40rem; }
}

/* ======================================================================================== item 04 (wave 8): the two clocks */
/* CONTRACT 04 §3 (clocks.css's rules marked CONTRACT, transcribed; scoped under #page-close .ticket-record so no rule reaches
   the reports page; no new token, no colour for meaning). Block f, under "Its record", after block e (R-E). */
#page-close .ticket-record .jobclocks { margin: var(--s-5) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--rule); }
#page-close .ticket-record .jobclocks h3 { font-size: var(--step-1); margin: 0 0 var(--s-1); }
#page-close .ticket-record .jobclock-asat { margin: 0 0 var(--s-2); color: var(--ink-2); font-weight: 600; }
#page-close .ticket-record .jobclock-lines { margin: 0; display: grid; gap: var(--s-3); }
#page-close .ticket-record .jobclock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: baseline;
  padding: 0 0 var(--s-2); border-bottom: 1px solid var(--rule); }
#page-close .ticket-record .jobclock-row dt { margin: 0; color: var(--ink); font-size: var(--step-0); font-weight: 600; }
#page-close .ticket-record .jobclock-row .jobclock-amount { margin: 0; font-size: var(--step-1); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
#page-close .ticket-record .jobclock-row .jobclock-terms { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ink-2); font-weight: 400; }
/* a running round: the face's reading of ink stamps "so far", ink-2 with its as-at words; never pencil (OPT-04-8 as drawn) */
#page-close .ticket-record .jobclocks[data-clocks="running"] .jobclock-amount { color: var(--ink-2); }
#page-close .ticket-record .jobclock-sum { margin: var(--s-3) 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
#page-close .ticket-record .jobclock-stamps { margin: var(--s-2) 0 0; }
#page-close .ticket-record .jobclock-stamps > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
#page-close .ticket-record .jobclock-spans { list-style: none; margin: 0 0 var(--s-2); padding: 0; font-variant-numeric: tabular-nums; }
#page-close .ticket-record .jobclock-spans li { margin: 0; padding: var(--s-1) 0; border-bottom: 1px solid var(--rule); }
#page-close .ticket-record .jobclock-spans b { font-weight: 700; white-space: nowrap; }
#page-close .ticket-record .jobclock-first { margin: var(--s-2) 0 0; color: var(--ink-2); }
#page-close .ticket-record .jobclock-basis { margin: var(--s-2) 0 0; color: var(--ink-2); font-style: italic; }
#page-close .ticket-record .jobclocks:lang(hi) .jobclock-basis, #page-close .ticket-record .jobclocks:lang(pa) .jobclock-basis { font-style: normal; }
#page-close #close-clocks-off { margin: var(--s-5) 0 0; }
/* a round the record cannot compute (ADR-041 D.1 computable false): ink words, never a negative or a zero */
#page-close .ticket-record .jobclock-nc { margin: var(--s-2) 0 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  #page-close .ticket-record .jobclock-row { grid-template-columns: 12rem 9rem minmax(0, 1fr); }
  #page-close .ticket-record .jobclock-row .jobclock-amount { text-align: left; }
  #page-close .ticket-record .jobclock-row .jobclock-terms { grid-column: 3; margin: 0; }
}

/* ============================================================================================ item 01: the move keys */
/* CONTRACT 01 §3 (D-W8-01-04, -08, -09, -10, -11; MF-01-1, MF-01-7): the compact stage line in the readout (no frame of its
   own: the marker, the word and the pencil lines carry the mark), the reason step, a move's read-back lines, its stamp's
   reason, and the marker's one step on a recorded move (reduced motion: the end state). Tokens only. */
#page-close .readout-where { margin: var(--s-1) 0 var(--s-2); border: 0; }
#page-close .readout-where .stage-line { margin: 0; padding-bottom: 0.9rem; border: 0; }
#page-close .readout-where-word { margin: var(--s-1) 0 0; font-size: var(--step-0); font-weight: 700; }
#page-close .readout-where-word[data-mark="pencil"] { font-weight: 500; }
#page-close .readout-where-word[data-mark="pencil"] { border: 0; }   /* refine r1 (R-8b-6): no frame of its own */
/* MF-01-1: the pencil target on the record's own line (geometry of the built current marker, app.css); the current
   marker keeps its ink and hue */
#page-close .readout-where .stage-line > li[data-target]::before {
  width: 1.15rem; height: 1.15rem; margin-top: calc(var(--rail-y) - 0.575rem);
  background: var(--bg); border: 2px dashed var(--pencil);
}
#page-close .move-rb-lines { margin: var(--s-3) 0 0; }
#page-close .move-rb-lines dt { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--step-0); font-weight: 600; }
#page-close .move-rb-lines dt:first-child { margin-top: 0; }
#page-close .move-rb-lines dd { margin: 2px 0 0; font-size: var(--step-0); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
#page-close .move-rb-lines dd [lang] { font-size: var(--step-1); font-weight: 400; }
#page-close .move-rb-lines .move-rb-not { display: block; margin: var(--s-1) 0 0; color: var(--ink-2); }
#page-close #move-step-reason .move-reason-label { display: block; margin: 0 0 var(--s-1); color: var(--ink-2); font-weight: 600; }
#page-close #move-reason { margin: 0; min-height: var(--target-record); font-size: var(--step-1); line-height: 1.45; }
#page-close #move-reason-hint { margin: var(--s-2) 0 0; }
#page-close #move-reason-err { margin: var(--s-2) 0 0; }
#page-close .ticket-record .stamp-why { margin: var(--s-1) 0 0; color: var(--ink); }
/* MF-01-7: at the phone width the result's ticket slab sits inline at step 2, so the next legal key clears the dock */
@media (max-width: 899.98px) { #page-close #close-result[data-move] .tno-slot { font-size: var(--step-2); } }
/* item 05 refine r1 (R-8b-5, MF-05-2): on the close's steps the phone's readout drops its Machine line (label and value) */
@media (max-width: 899.98px) {
  #page-close #close-readout-lines[data-close-step="yes"] > dt:nth-of-type(2),
  #page-close #close-readout-lines[data-close-step="yes"] > dd[data-line="machine"] { display: none; }
}
/* item 03 fix r1 (R-8b-15, P2-1; R-8b-4's compaction at the reason step, OPEN-03-9): below 900 px a correction's step 3
   keeps its head and the corrected line only, so "Read it back to me" stands above the dock; the read-back keeps every line */
@media (max-width: 899.98px) {
  #page-close #close-readout-lines[data-amend-step="areason"] > [data-line="ticket"],
  #page-close #close-readout-lines[data-amend-step="areason"] > [data-for="ticket"],
  #page-close #close-readout-lines[data-amend-step="areason"]:not([data-amend-field="machine_tag"]) > [data-line="machine"],
  #page-close #close-readout-lines[data-amend-step="areason"]:not([data-amend-field="machine_tag"]) > [data-for="machine"] { display: none; }
}
#page-close #close-where .stage-line > li[data-moved]::before { animation: move-step var(--t-step) var(--ease-out) both; }
#page-close #close-where .stage-line > li:nth-child(5)[data-moved]::before { animation-name: move-step-siding; }
@media (prefers-reduced-motion: reduce) { #page-close #close-where .stage-line > li[data-moved]::before { animation: none; } }
/* the two keyframes sit inside a conditional group (motion allowed): the gate's a11y cascade reader (gate/a11y.py Sheet)
   reads only @media blocks as nested, so a bare @keyframes would run its stray brace into the next rule's selector */
@media (prefers-reduced-motion: no-preference) {
  @keyframes move-step { from { transform: translateY(-0.6rem); opacity: 0.4; } to { transform: none; opacity: 1; } }
  @keyframes move-step-siding { from { transform: translate(0.6rem, -0.6rem); opacity: 0.4; } to { transform: translateX(0.6rem); opacity: 1; } }
}

/* ============================================================================================ item 05: the failure mode */
/* CONTRACT 05 §3 (D-W8-05-01, -03, -05; MF-05-1): the failure keys ARE the close's category keys (the built 64 px grid,
   left-aligned, a 2 px ink edge); a key may carry one small line under its word; the chosen key is the ink fill, the bold
   word and its own tick (the built id-scoped tick on #close-category-keys is not widened). Tokens only. */
#page-close .fm-keys .key { position: relative; display: block; padding-right: var(--s-7); line-height: 1.3; }
#page-close .fm-keys .fm-word { display: block; }
#page-close .fm-keys .sub { display: block; margin: 2px 0 0; color: var(--ink-2); font-size: var(--step-0);
  font-weight: 500; }
#page-close .fm-keys .key[aria-pressed="true"] .sub { color: inherit; }
#page-close .fm-keys .key[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 50%;
  right: var(--s-4); transform: translateY(-50%); font-weight: 800; }
#page-close .fm-keys :lang(hi) .fm-word, #page-close .fm-keys .fm-word:lang(hi),
#page-close .fm-keys :lang(pa) .fm-word, #page-close .fm-keys .fm-word:lang(pa) { font-weight: 600; }
#page-close #close-step-failure .fm-lead { margin: 0 0 var(--s-2); font-weight: 600; }
#page-close #close-step-failure .fm-lead.stub { font-weight: 600; color: var(--ink); }
#page-close #close-step-failure .fm-order { margin: 0 0 var(--s-3); }
#page-close #close-rb-failure { margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px dashed var(--pencil); }
#page-close .rb-failure-line { margin: 0; font-size: var(--step-1); font-weight: 500; }
#page-close .rb-failure-line :lang(hi), #page-close .rb-failure-line :lang(pa) { font-weight: 400; }
#page-close .rb-failure-change { min-height: var(--target-min); margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3);
  background: var(--bg); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); font-weight: 700; }
#page-close .ticket-record .stamp-fm { margin: var(--s-1) 0 0; color: var(--ink); }

/* ================================================================================ item 06: the voice raise and close */
/* CONTRACT 06 §3 (voice.css's rules marked CONTRACT, transcribed; D-W8-06-12: tokens only, no new property, no colour,
   no motion). The mock's .mock-notes, .region-05, dd.ph05 and its dashed .qual underline are not built (R-R: the
   placeholder mark is item 08's, dotted). The quotation marks and the middle dot are the characters, never escapes. */
#page-raise .voice, #page-close .voice { margin: 0 0 var(--s-4); }
#page-raise .mic-key, #page-close .mic-key { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-3);
  width: 100%; min-height: 64px; margin: 0; padding: var(--s-2) var(--s-4); text-align: left; line-height: 1.25; }
#page-raise .mic-key .mic-glyph, #page-close .mic-key .mic-glyph { width: 2rem; height: 2rem; flex: none; }
#page-raise .mic-glyph path, #page-close .mic-glyph path, #page-raise .mic-glyph rect, #page-close .mic-glyph rect { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#page-raise .mic-word, #page-close .mic-word { display: block; font-size: var(--step-1); font-weight: 700; }
#page-raise .mic-sub, #page-close .mic-sub { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--step-0); font-weight: 600; }
#page-raise .mic-key[aria-pressed="true"], #page-close .mic-key[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#page-raise .mic-key[aria-pressed="true"] .mic-sub, #page-close .mic-key[aria-pressed="true"] .mic-sub { color: inherit; font-weight: 600; }
#page-raise .mic-key[aria-pressed="true"]::after, #page-close .mic-key[aria-pressed="true"]::after { content: none; }
#page-raise .mic-key:disabled, #page-close .mic-key:disabled { background: var(--bg); color: var(--muted); border-color: var(--muted); border-style: dashed; }
#page-raise .voice-keep, #page-close .voice-keep { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--step-0); line-height: 1.45; }
#page-raise .voice-keep .keep-glyph, #page-close .voice-keep .keep-glyph { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
#page-raise .keep-glyph path, #page-close .keep-glyph path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#page-raise .voice-limit, #page-close .voice-limit { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--step-0); }
#page-raise .or-tap, #page-close .or-tap { margin: var(--s-4) 0 var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--ink); font-size: var(--step-0); font-weight: 700; }
#page-raise .hearing, #page-close .hearing { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4) var(--s-4); border-radius: var(--radius); background: var(--bg); }
#page-raise .hearing .mark-word, #page-close .hearing .mark-word { margin: 0 0 var(--s-2); color: var(--pencil); }
#page-raise .hearing dl, #page-close .hearing dl { margin: var(--s-2) 0 0; }
#page-raise .hearing dt, #page-close .hearing dt { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step-0); font-weight: 600; }
#page-raise .hearing dd, #page-close .hearing dd { margin: 2px 0 0; }
#page-raise .slot, #page-close .slot { display: block; height: 1.6rem; border: 2px dashed var(--pencil); border-radius: var(--radius-s); max-width: 14rem; }
#page-raise .slot.long, #page-close .slot.long { max-width: none; }
#page-raise .late-line, #page-close .late-line { margin: var(--s-2) 0 0; color: var(--ink); font-weight: 700; }
#page-raise .heard, #page-close .heard { margin: 0 0 var(--s-3); color: var(--pencil); font-size: var(--step-0); font-weight: 500; line-height: 1.5; }
#page-raise .heard .heard-by, #page-close .heard .heard-by { display: block; color: var(--ink-2); font-weight: 600; }
#page-raise .heard q, #page-close .heard q { font-size: var(--step-1); quotes: "“" "”"; }
#page-raise .heard :lang(hi), #page-raise .heard :lang(pa), #page-close .heard :lang(hi), #page-close .heard :lang(pa) { font-weight: 400; }
#page-raise .readout-lines .by, #page-close .readout-lines .by { display: inline; color: var(--pencil); font-size: var(--step-0); font-weight: 500; }
#page-raise .readout-lines .by::before, #page-close .readout-lines .by::before { content: " · "; }
#page-raise .cand-line .tag, #page-close .cand-line .tag { margin-right: var(--s-1); }
#page-raise .readout .key.cand-change { display: block; width: 100%; min-height: 64px; margin: var(--s-2) 0 var(--s-1); padding: var(--s-2); font-size: var(--step-0); font-weight: 700; line-height: 1.25; color: var(--ink); text-align: center; }
#page-raise .handover, #page-close .handover { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--radius); }
#page-raise .handover p, #page-close .handover p { margin: 0; }
#page-raise .handover .nothing, #page-close .handover .nothing { font-weight: 700; color: var(--ink); }
#page-raise .handover .why, #page-close .handover .why { margin-top: var(--s-1); color: var(--ink-2); }
#page-raise .handover .heard, #page-close .handover .heard { margin: var(--s-2) 0 0; }
#page-raise .machines .qual { display: block; margin-top: 2px; font-size: var(--step-0); font-weight: 600; color: var(--ink-2); }
#page-raise .mic-ask, #page-close .mic-ask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); border: 2px dashed var(--pencil); border-radius: var(--radius); color: var(--pencil); font-weight: 500; }
#page-raise .mic-ask .mic-glyph, #page-close .mic-ask .mic-glyph { width: 2rem; height: 2rem; }
#page-raise .mic-ask p, #page-close .mic-ask p { margin: 0; }
#page-raise .mic-refused, #page-close .mic-refused { padding: var(--s-2) var(--s-3) var(--s-3); border: 2px solid var(--ink); border-radius: var(--radius); background: var(--surface); }
#page-raise .mic-refused p, #page-close .mic-refused p { margin: 0; font-weight: 700; }
#page-raise .mic-refused ol, #page-close .mic-refused ol { margin: var(--s-1) 0 0; padding-left: var(--s-5); }
#page-raise .mic-refused li, #page-close .mic-refused li { margin: 2px 0; line-height: 1.35; }
#page-raise .mic-refused .key.wide, #page-close .mic-refused .key.wide { margin-top: var(--s-3); }
#page-raise .mic-none, #page-close .mic-none { margin: 0; }
#page-raise .voice-queued, #page-close .voice-queued { margin: 0; padding: var(--s-3) var(--s-4) var(--s-4); border-radius: var(--radius); }
#page-raise .voice-queued p, #page-close .voice-queued p { margin: var(--s-1) 0 0; }
#page-raise .voice-queued .mark-word, #page-close .voice-queued .mark-word { margin: 0 0 var(--s-2); }
@media (min-width: 900px) { #page-raise .voice, #page-close .voice { max-width: 34rem; } #page-raise .handover, #page-close .handover { max-width: 40rem; } }
/* MF-06-1 (the most important row): on the voice path the readout head says the mark word in pencil weight, at the top
   of the first screen; the candidate's one change key spans the readout's full width under the machine line. The
   machine row's dd steps out of the grid (display: contents) so its value sits in the value column and its key takes
   the whole row (grid-column 1 / -1) in the phone's and the desk's readout grid alike; the value keeps the pencil rule. */
/* r1 (R-8b-6): the head is the mark word, not a value slot: the global pencil rule's dashed frame is reset here only */
#page-raise #raise-readout-head[data-mark="pencil"], #page-close #close-readout-head[data-mark="pencil"] { font-weight: 500; color: var(--pencil); border: 0; padding: 0; }
#page-raise .readout .readout-lines dd.cand-line { display: contents; }
#page-raise .readout .cand-line .cand-value { display: block; margin: 2px 0 0; padding: 0 0 var(--s-1); border-bottom: 2px dashed var(--pencil); overflow-wrap: anywhere; }
#page-raise .readout .cand-line .key.cand-change { grid-column: 1 / -1; }
@media (max-width: 899.98px) {
  #page-raise .readout .cand-line .cand-value { margin: 0; padding: 6px 0 3px; }
}
/* r1 (R-8b-9, MF-06-1 as the critic measured it): below 900 px the voice read-back's readout drops the verbatim-words line
   (raise and close: #raise-heard / #close-heard quote the same words with their lang) and, on the raise, the Section line
   (the machine's tag names it), so the read-back's own mark word stands above the dock; the desk keeps every line */
@media (max-width: 899.98px) {
  #page-raise #raise-readout[data-voice="readback"] #raise-readback-fields > [data-line="words"],
  #page-raise #raise-readout[data-voice="readback"] #raise-readback-fields > [data-for="words"],
  #page-raise #raise-readout[data-voice="readback"] #raise-readback-fields > [data-line="section"],
  #page-raise #raise-readout[data-voice="readback"] #raise-readback-fields > [data-for="section"],
  #page-close #close-readout[data-voice="readback"] #close-readout-lines > [data-line="line"],
  #page-close #close-readout[data-voice="readback"] #close-readout-lines > [data-for="line"] { display: none; }
}