/* face-supervisor.css, the supervisor's faces (FACE-SV, ADR-032 §3.5 · §3.4 · §3.9): the board as study 02's timetable
   of waiting carrying study 06's stage line, its wall view, and the ticket face's three acts, assign · the note ·
   verify, each read back in pencil and recorded in ink.

   On the chassis (app.css): its tokens (no token is declared here, :root is the chassis's), its type steps, its
   keys and inputs, its read-back grammar ([data-mark="pencil" | "ink"], .mark-word), its stage line (ol.stage-line,
   compact on a board line), its lateness words (.late-word · .half-word) and its ticket number (.tno). Every rule here
   is scoped under this family's own page and regions: #page-board · #close-moves · #note-box (and the note's stamp on
   the ticket face, #page-close .stamp.note).

   The concept on this face (§3.0): every open ticket is one ruled line of a timetable, led by the time it began to
   wait; the line's own rule is its age; colour is spent on lateness alone, always with its words. No card, no chip,
   no column per stage, no count strip (S02 concept; Gate A).

   Targets: 56 px on the supervisor's lines, keys and confirms below 900 px wide (S02 D-11), 48 px at 900 and above
   (ADR-032 §3.1 allows 40 there; 48 is kept). No size here differs between a Devanagari and a Gurmukhi run, and no
   letter-spacing or case change touches a person's words, a name as written or the server's words (§3.8).

   FACE-CH's carry block (the dark grounds lifted to --surface) and the moved board and note rules are gone with this
   redraw (conflict X-19); nothing here names the built sheet's colour aliases. */

/* ================================================================================================ the board, its head */
#page-board .board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); margin: var(--s-2) 0 0; }
#page-board .board-head h2 { margin: 0; }
#page-board #board-section-name { margin: 0; font-size: var(--step-1); }
/* The as-at row (item 02, D-W7-02-13): ONE row at every width, "As at" . "Key" . (space) . "Read again"; opened, the
   key's band takes the row's second line and the Key control never moves. The band is the row's last child. */
#page-board .board-asat-row {
  flex-basis: 100%; margin: var(--s-2) 0 0;
  /* the as-at column may wrap (a longer script's "Not read yet" at 360): the Key and Read again keep their width */
  display: grid; grid-template-columns: minmax(0, auto) max-content minmax(0, 1fr) max-content;
  align-items: center; column-gap: var(--s-3); row-gap: 0;
}
#page-board .board-asat-row > #board-asat { grid-column: 1; grid-row: 1; }
#page-board .board-asat-row > #board-legend-key { grid-column: 2; grid-row: 1; }
#page-board .board-asat-row > #board-refresh { grid-column: 4; grid-row: 1; }
#page-board .board-asat-row > .legend-band { grid-column: 1 / -1; grid-row: 2; }
#page-board #board-refresh { min-height: 56px; }
/* D-W7-02-14: the as-at says only what was answered; before the first answer it is pencil ("Not read yet"), a dashed
   underline, never the box */
/* FIX-R1 (P2-1): "As at HH:MM" stays on one line at 360; only the unread words ("Not read yet", any script) may wrap.
   The columns are unchanged, so the Key keeps its place. */
#page-board #board-asat:not([data-mark]) { white-space: nowrap; }
#page-board #board-asat[data-mark="pencil"] { border: 0; border-bottom: 2px dashed var(--pencil); padding: 0 0 1px; }

/* The Key control (form B, a button and a band: it works on every engine). The marker's own shape in the three hues,
   then the word, then a chevron that turns while it is open; no motion. */
#page-board #board-legend-key {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 56px; padding: 0 var(--s-2);
  border: 2px solid var(--ink); border-radius: var(--radius);
  font-weight: 700; cursor: pointer;
}
#page-board #board-legend-key[hidden] { display: none; }
#page-board #board-legend-key .legend-peek { display: inline-flex; gap: 3px; }
#page-board #board-legend-key .legend-peek .stage-sample { width: 0.7rem; height: 0.7rem; }
#page-board #board-legend-key .legend-glyph { width: 1rem; height: 1rem; }
#page-board #board-legend-key[aria-expanded="true"] { background: var(--surface); }
#page-board #board-legend-key[aria-expanded="true"] .legend-glyph { transform: rotate(180deg); }
#page-board #board-legend-key:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* the narrowest phones: the key shows its word only, so the one row never outgrows 360 px */
@media (max-width: 419.98px) { #page-board #board-legend-key .legend-peek { display: none; } }
#page-board .legend-band {
  display: grid; gap: var(--s-4); margin: var(--s-3) 0 0; padding: var(--s-3) 0 var(--s-4);
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
#page-board .legend-band[hidden] { display: none; }
#page-board .legend-head { margin: 0 0 var(--s-2); font-weight: 700; }
#page-board .legend-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
#page-board .legend-groups li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: var(--s-2); align-items: start; align-content: start; }
#page-board .legend-groups .stage-sample { margin-top: 0.2em; }
#page-board .legend-group-name { font-weight: 700; }
#page-board .legend-stages { grid-column: 2; color: var(--ink-2); }
/* D-W11P-04-08, -09 (Amendment 2, the plant head's ask): the open key's five groups as five boxes filled with their
   colour; the words inside at 4.5:1 or better (white on red, green, blue; ink on yellow and orange); two per row on a
   phone (done across the row), five in one row on the desk (below). Print hides the colour part (the sentence stands). */
#page-board .legend-groups.legend-grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
#page-board .legend-groups.legend-grouped > li {
  display: block; padding: var(--s-2) var(--s-3) var(--s-3);
  border: 2px solid var(--ink); border-radius: var(--radius-s);
  background: var(--stage-hue, var(--surface)); color: var(--bg);
}
#page-board .legend-groups.legend-grouped > li[data-stage-group="on"],
#page-board .legend-groups.legend-grouped > li[data-stage-group="held"] { color: var(--ink); }
/* each box names its own token as its fill (the same value --stage-hue carries under "grouped"; under "control" and in
   print the colour part is hidden), so the gate's a11y step, which resolves only :root properties, judges the box's
   words on the box's own fill (declared correction DC-04-1, w11p-011) */
#page-board .legend-groups.legend-grouped > li[data-stage-group="open"] { background: var(--stage-open); }
#page-board .legend-groups.legend-grouped > li[data-stage-group="on"] { background: var(--stage-on); }
#page-board .legend-groups.legend-grouped > li[data-stage-group="held"] { background: var(--stage-held); }
#page-board .legend-groups.legend-grouped > li[data-stage-group="verify"] { background: var(--stage-verify); }
#page-board .legend-groups.legend-grouped > li[data-stage-group="done"] { background: var(--stage-done); }
#page-board .legend-groups.legend-grouped > li[data-stage-group="done"] { grid-column: 1 / -1; }
#page-board .legend-grouped .legend-group-name { font-weight: 800; }
#page-board .legend-grouped .legend-group-mean { display: block; margin: var(--s-1) 0 0; }
#page-board .legend-grouped .legend-stages { display: block; margin: var(--s-1) 0 0; color: inherit; font-weight: 600; }
#page-board .legend-note { margin: var(--s-2) 0 0; color: var(--ink-2); }
/* control mode (the ink-only line): no colour part in the key, no peek, no wall line */
[data-stage-colour="control"] #page-board .legend-colour { display: none; }
[data-stage-colour="control"] #page-board .legend-peek { display: none !important; }
[data-stage-colour="control"] #page-board.wall .wall-key { display: none; }
/* paper: the colour part is replaced by its sentence; the age rule's key and the order stay */
#page-board .legend-print { display: none; margin: 0; }
@media print {
  #page-board .legend-colour { display: none !important; }
  #page-board .legend-print { display: block; }
  #page-board #board-legend-key { display: none; }
}
/* the wall's key: ONE line in the wall's head, on the one screen a wall has; no band at its foot (D-W7-02-15) */
#page-board.wall .wall-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin: var(--s-2) 0 0; flex-basis: 100%; }
#page-board.wall .wall-key[hidden] { display: none; }
#page-board.wall .wall-key .wall-key-group { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; }
#page-board.wall .wall-key .wall-key-done { font-weight: 700; color: inherit; }
/* the board's first heading takes the page's first-heading margin (E02-6): with the folded filter key and the one
   paragraph of lane terms, the first late line's marker reaches the first screen at 360 x 780 */
#page-board #board-pick > h2:first-child { margin-top: var(--s-2); }
#page-board #board-wall-note { flex-basis: 100%; margin: var(--s-1) 0 0; }

/* the date window: four keys under their caption, two by two on the phone (S02 self-critique: fold the filters) */
#page-board .when-label { margin: var(--s-4) 0 0; color: var(--ink-2); font-weight: 600; }
#page-board #board-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: var(--s-2) 0 0; }
#page-board #board-when button { min-height: 56px; padding: var(--s-2); }
#page-board .range { display: grid; gap: var(--gap); margin: var(--s-3) 0 0; }
#page-board .range label { display: grid; gap: var(--s-1); color: var(--ink-2); font-weight: 600; }
#page-board .range input { width: 100%; }
#page-board #board-err { margin: var(--s-4) 0 0; }

/* the key to the age rule, in the key's band (item 02 moved it from the foot), the same three rules the lines carry,
   each with its words */
#page-board .board-key { display: grid; gap: var(--s-1); margin: 0; }
#page-board .key-item { display: inline-flex; align-items: center; gap: var(--s-2); }
#page-board .rule-sample { display: inline-block; flex: none; height: 2px; width: 0.75rem; background: var(--muted); }
#page-board .rule-sample[data-band="half"] { width: 1.5rem; height: 5px; background: var(--amber); border-bottom: 2px solid var(--ink); }
#page-board .rule-sample[data-band="late"] { width: 2.25rem; height: 6px; background: var(--late); border-bottom: 2px solid var(--ink); }

/* ================================================================================================ the lanes (§3.5 (d)) */
/* Five lanes in the built order, each headed by its name with its count at the right end (S02 SC fix 1). */
#page-board .lane { margin: var(--s-6) 0 0; }
#page-board .lane-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin: 0; padding: 0 0 var(--s-2);
  border-bottom: 2px solid var(--ink);
  font-size: var(--step-1); line-height: 1.25;
}
#page-board .lane-head .count { flex: none; font-size: var(--step-2); font-weight: 800; line-height: 1; }
#page-board .lane-gloss { margin: var(--s-2) 0 0; color: var(--muted); }
#page-board .lane-empty .lane-head { border-bottom-color: var(--muted); }
#page-board .lane-empty .lane-head .count { color: var(--muted); }
#page-board .lines { list-style: none; margin: var(--s-1) 0 0; padding: 0; }
#page-board .lines-none { padding: var(--s-3) var(--s-2); color: var(--muted); border-bottom: 1px solid var(--rule); }

/* ================================================================================================ the line (§3.5 (a) · (c)) */
/* One ruled line of the timetable: the since column, then what, the number and the machine, where it stands on the
   stage line, how urgent. Its whole width is one tap (the key's reach, below). */
#page-board .line {
  position: relative;
  display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: var(--s-3); align-items: start;
  min-height: 56px;
  padding: var(--s-3) var(--s-2) calc(var(--s-3) + 6px);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-ui) var(--ease-out);
}
#page-board .line:hover { background: var(--surface); }
/* The age rule: the line's own bottom rule, by the server's band (S02 D-06), a third, muted; two thirds, amber on
   an ink base; the full width, red on an ink base. An amber mark never stands alone (§3.1); its words are on the line. */
#page-board .line.age-fresh::after, #page-board .line.age-half::after, #page-board .line.age-late::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 33.333%; height: 2px; background: var(--muted);
}
#page-board .line.age-half::after { width: 66.666%; height: 5px; background: var(--amber); border-bottom: 2px solid var(--ink); }
#page-board .line.age-late::after { width: 100%; height: 6px; background: var(--late); border-bottom: 2px solid var(--ink); }

/* the since column: the moment it began to wait at this stage, and its lateness in words beside it */
#page-board .since { display: flex; flex-direction: column; margin: 0; line-height: 1.25; }
#page-board .since-word { color: var(--muted); }
#page-board .since-time { font-size: var(--step-1); font-weight: 700; }
#page-board .since-unknown { color: var(--ink-2); font-weight: 600; }
#page-board .since .late-word, #page-board .since .half-word, #page-board .since .nc-word { margin-top: var(--s-1); }
#page-board .since .limit-at { margin-top: 0; font-weight: 600; }
#page-board .nc-word { color: var(--ink-2); font-weight: 600; }
#page-board .line.age-late .since-time { color: var(--late-ink); }

/* what: the number in display type, the machine; the stage line; how urgent, who is on it */
#page-board .what { min-width: 0; }
#page-board .line-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0; }
#page-board .machine { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
#page-board .machine .tag { margin-right: var(--s-1); }
#page-board .line-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: var(--s-2) 0 0; }
#page-board .line-stage .stage-line { flex: 1 1 8.5rem; min-width: 7.5rem; max-width: 13rem; margin: 0; }
/* The POLISH round (P1-5): the line's box keeps the siding's depth (station 5 drops 0.75 rem below the rail, its
   tick with it), so a stage word that wraps under the line never meets the siding's marker or its tick */
#page-board .line-stage .stage-line { padding-bottom: 1rem; }
/* ---- where the line sits: the board (S1). The last child of li.line, across both of its columns (the since column and
   what), under the title row and the foot, above the age rule. On the phone the stage word is drawn once, under its mark
   (D-W11P-03-05): the line-stage row keeps the Reopened flag only. */
#page-board:not(.wall) .line > .stage-line[data-scale="glance"] { grid-column: 1 / -1; }   /* the wall draws no glance line (D-W11P-03-12) */
@media (max-width: 899.98px) {
  /* D-W11P-03-12 (w11p-005): scoped off the wall (#page-board.wall keeps BASE's compact line in div.line-stage) */
  /* the phone (REFINE-NOTES loop 3): the line stands right under the title row, before the flag and the foot, so a
     first late ticket's line stays on the first screen where BASE's compact line was. .what lends its rows to the
     box's grid (display: contents; a div, no role): since and the title on row 1, the line across both columns on
     row 2, the flag and the foot under it in the what column. */
  #page-board:not(.wall) .line[data-station] > .what { display: contents; }
  #page-board:not(.wall) .line[data-station] > .since { grid-column: 1; grid-row: 1; }
  #page-board:not(.wall) .line[data-station] > .what > .line-top { grid-column: 2; grid-row: 1; }
  #page-board:not(.wall) .line[data-station] > .stage-line[data-scale="glance"] { grid-row: 2; margin-top: var(--s-2); }
  #page-board:not(.wall) .line[data-station] > .what > .line-stage,
  #page-board:not(.wall) .line[data-station] > .what > .line-foot { grid-column: 2; }
  #page-board:not(.wall) .line[data-station] > .what > .line-stage { margin: 0; }
  #page-board:not(.wall) .line[data-station] > .what > .line-stage > .stage-word { display: none; }
  #page-board:not(.wall) .line[data-station] > .what > .line-stage > .stage-flag { margin-top: var(--s-2); }
}
#page-board .stage-word { color: var(--ink-2); font-weight: 600; }
#page-board .flag-glyph { font-weight: 800; }
#page-board .line-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: var(--s-2) 0 0; }
/* the priority's shape and word: an ink edge; P1 an ink fill with "line down or safety", never red (X-2) */
#page-board .prio {
  display: inline-block; min-width: 2.5rem; padding: 0 var(--s-2);
  border: 2px solid var(--ink); border-radius: var(--radius-s);
  font-weight: 700; line-height: 1.5; text-align: center; white-space: nowrap;
}
#page-board .prio-1 { background: var(--ink); color: var(--bg); }
#page-board .prio-words { font-weight: 700; }
#page-board .on-it, #page-board .also, #page-board .picked-by { color: var(--ink-2); }
#page-board .on-it.nobody { color: var(--ink); font-weight: 600; }
#page-board .stopped-word { font-weight: 600; }

/* The line's key: its number (a machine line's "ticket <no>"), whose reach is the whole line; the ring draws round
   the line it opens. Above the stage line's marks, so a tap anywhere on the line opens it. */
#page-board .line-open {
  display: inline-flex; align-items: center;
  min-height: 48px; min-width: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; font-weight: 700; text-align: left;
}
#page-board .line-open:hover, #page-board .line-open:active { background: transparent; transform: none; }
#page-board .line-open::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
#page-board .line-open:focus-visible { outline: none; }
#page-board .line-open:focus-visible::after { outline: 3px solid var(--ink); outline-offset: -3px; }
#page-board .machine-line .line-open { min-height: 48px; text-decoration: underline; text-underline-offset: 0.18em; }

/* A pointer: one quiet line in its place in time, set under the "what" column, the number and where it is drawn. */
#page-board .pointer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) calc(5.25rem + var(--s-3) + var(--s-2));
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
#page-board .pointer-no { color: var(--ink-2); font-weight: 700; }
/* D-W7-10-02 (P2-9): one ruled line at a lane's foot for every ticket drawn above; its numbers in tabular figures */
#page-board .pointers { font-variant-numeric: tabular-nums; padding-left: var(--s-2); }
@media (min-width: 900px) { #page-board .pointers { padding-left: calc(7rem + var(--s-3) + var(--s-2)); } }
#page-board .pointer-lead { color: var(--muted); }
/* D-W7-10-03 (P1-6): "+N more" on the wall, ink-2 words in the pointer's place, never a control */
#page-board .wall-more {
  padding: var(--s-2) var(--s-2) var(--s-2) calc(5.25rem + var(--s-3) + var(--s-2));
  border-bottom: 1px solid var(--rule); color: var(--ink-2); font-weight: 700;
}

/* ================================================================================================ the desk: one ruled row */
@media (min-width: 900px) {
  #page-board .line { grid-template-columns: 7rem minmax(0, 1fr); min-height: 48px; }
  #page-board:not(.wall) .what {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.9fr);
    column-gap: var(--s-4); align-items: start;
  }
  #page-board:not(.wall) .line-stage, #page-board:not(.wall) .line-foot { margin-top: var(--s-1); }
  #page-board .pointer { padding-left: calc(7rem + var(--s-3) + var(--s-2)); }
  #page-board #board-when { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #page-board #board-when button, #page-board #board-refresh, #page-board #board-legend-key { min-height: 48px; }
  /* the desk: the colour key across the full width in one row of groups; the age rule and the order side by side */
  #page-board .legend-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); row-gap: var(--s-3); }
  #page-board .legend-colour, #page-board .legend-print { grid-column: 1 / -1; }
  #page-board .legend-groups.legend-grouped { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s-3); }
  #page-board .legend-groups.legend-grouped > li[data-stage-group="done"] { grid-column: auto; }
  #page-board .legend-band #board-key { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
}

/* ================================================================================================ item 03 (FB-26-03): the order, said */
/* P1-3 (D-W7-03-11): the order and the gloss are one paragraph, the order first and bold: span.list-order leads
   p.lane-gloss, so each lane spends one line of terms, not two. The glyph is currentColor, 1.1 rem. */
#page-board .lane-gloss > .list-order { display: inline; margin: 0 0.35em 0 0; color: var(--ink); font-weight: 700; }
#page-board .lane-gloss > .list-order .order-glyph { display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: var(--s-1); vertical-align: -0.2em; }
#page-board.wall .list-order { font-size: 1em; }
/* P1-1 (D-W7-03-09): a newest-raised-first list shows the time it is ordered by, in the line's foot beside the priority */
#page-board .line-foot .raised { color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-board .line-foot .raised b { color: var(--ink); font-weight: 600; }
/* P1-2 (D-W7-03-10): the arrival rule has a form no other rule has: its words on their own row, then a 1 px SOLID ink
   rule that starts at the number's column (never the lane's edge, where the age rule starts), --s-2 clear above so an
   age rule never touches it. Solid (dashed is pencil); never colour, never motion; not printed. */
#page-board .read-rule {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-2) 0 0 calc(5.25rem + var(--s-3) + var(--s-2));
  padding: 0 0 var(--s-1); border: 0; border-bottom: 1px solid var(--ink);
  color: var(--ink-2); font-weight: 600;
}
#page-board .read-rule .order-glyph { flex: none; width: 1rem; height: 1rem; }
#page-board .read-rule .read-time { color: var(--ink); font-weight: 700; }
@media (min-width: 900px) { #page-board .read-rule { margin-left: calc(7rem + var(--s-3) + var(--s-2)); } }
#page-board.wall .read-rule { margin-left: calc(6.5em + var(--s-3) + var(--s-2)); }
@media print { #page-board .read-rule { display: none !important; } }
/* the phone: the lane's terms sit tighter under the head and the first lane stands closer under the folded filter key,
   so the first late line and its marker reach the first screen (with item 02's first-heading margin) */
@media (max-width: 899.98px) {
  #page-board #board-lists > .lane:first-child { margin-top: var(--s-4); }
  #page-board .lane-head { padding-bottom: var(--s-1); }
  #page-board .lane .lane-gloss { margin-top: var(--s-1); line-height: 1.35; }
}

/* ================================================================================================ the wall view (§3.5 (f)) */
/* A mode of the board: read-only, its root from --wall-root (the desk root until the wall's placeholder lands, it
   claims no reading distance), its sizes in em so that the root carries them; both scripts at one size (¶6). Where
   the width allows, the four lists that need a person stand beside the open timetable (S02 D-16). */
#page-board.wall { font-size: var(--wall-root); }
#page-board.wall .lane-head { font-size: 1.25em; }
#page-board.wall .lane-head .count { font-size: 1.25em; }
#page-board.wall .line { grid-template-columns: 6.5em minmax(0, 1fr); }
#page-board.wall .since-time { font-size: 1.563em; }
#page-board.wall .tno { font-size: 1.953em; }
#page-board.wall .pointer, #page-board.wall .wall-more { padding-left: calc(7.5em + var(--s-3) + var(--s-2)); }
/* D-W7-10-03 (P1-6): ONE row per line on the wall: the since time beside its word (its lateness words under it),
   then the number and machine, the compact stage line and its word, how urgent, on one row at 900 px and above */
#page-board.wall .line { grid-template-columns: 7.5em minmax(0, 1fr); align-items: center;
                         padding-top: var(--s-2); padding-bottom: calc(var(--s-2) + 6px); }
#page-board.wall .since { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-1); }
#page-board.wall .since .late-word, #page-board.wall .since .half-word, #page-board.wall .since .nc-word { flex-basis: 100%; margin-top: 0; }
@media (min-width: 900px) {
  #page-board.wall #board-lists {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start;
  }
  #page-board.wall .lane { grid-column: 1; margin-top: var(--s-5); }
  #page-board.wall .what {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.9fr);
    column-gap: var(--s-3); align-items: center;
  }
  #page-board.wall .lane { margin-top: var(--s-4); }
  /* D-W7-10-03: the right column holds the open timetable and, under it, the machines marked stopped, so the left
     column (past its limit, its notice not yet seen, reopened) fits the screen before any line is set aside */
  #page-board.wall .lane[data-lane="blocked"] { grid-column: 2; grid-row: 3; }
  /* an empty lane on the wall is its head and count (0, muted) and its gloss: "Nothing on this list" is the board's */
  #page-board.wall .lane-empty .lines-none { display: none; }
  #page-board.wall .line-stage, #page-board.wall .line-foot { margin-top: 0; }
  #page-board.wall .line-stage .stage-line { min-width: 6.5rem; }
  #page-board.wall .lane[data-lane="open"] { grid-column: 2; grid-row: 1 / span 2; }   /* D-W7-10-03 (was span 4) */
}

/* ================================================================================================ the acts (§3.4 · §3.5 (e)) */
/* Assign · verify (and, until FACE-FL lands its own, Start work, X-17) on #close-moves; the note in #note-box. A key
   opens the act's read-back; the read-back turns from pencil to ink in place when the server answers. */
#close-moves .assignee { display: grid; gap: var(--s-1); margin: var(--s-3) 0 var(--s-2); }
#close-moves .assignee label { color: var(--ink-2); font-weight: 600; }
#close-moves .assignee input { width: 100%; max-width: 20rem; }
#close-moves .move-key { min-height: 64px; }   /* item 01 (D-W8-01-06, named change): the phone key 64 px (was 56) */
/* the two read-backs keep the chassis's block on the floor panel's page (face-floor.css sets #page-close's own to 0) */
#close-moves .readback, #note-box .readback { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4) var(--s-4); }
#move-readback h3, #note-readback h3 { margin: 0 0 var(--s-1); color: inherit; }
#close-moves .readback-said, #note-box .readback-said { margin: var(--s-2) 0; font-size: var(--step-1); line-height: 1.35; overflow-wrap: anywhere; }
#move-readback[data-mark="pencil"] dd { font-weight: 500; }
#move-readback[data-mark="ink"] dd { font-weight: 700; }
#move-confirm, #move-cancel, #note-confirm, #note-cancel, #note-add { min-height: 56px; }
#note-box { margin-top: var(--s-6); padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius); }
#note-box h2 { margin-top: 0; }
#note-box #note-add { margin-top: var(--s-2); }
@media (min-width: 900px) {
  /* one column at the desk, at the floor panel's measure above them (face-floor.css): read, not spread */
  #page-close #close-moves, #page-close #note-box { max-width: 40rem; }
  #close-moves .move-key, #move-confirm, #move-cancel, #note-confirm, #note-cancel, #note-add { min-height: 48px; }
}

/* item 01 (CONTRACT 01 §3; R-E, D-W8-01-05/-06, MF-01-5): the moves block under the readout, hidden while a step is up;
   64 px keys below 900 px (the built 48 px desk key stays, R-J); the keys share a row while they fit; the code field
   stands above its Assign it key in one group that spans the bank. */
#page-close #close-detail > #close-moves { margin: var(--s-4) 0 0; }
#page-close #close-detail > #close-moves > h2 { margin: 0 0 var(--s-1); font-size: var(--step-1); }
#page-close #close-detail > #close-moves > .meta { margin: 0 0 var(--s-2); }
@media (min-width: 900px) { #page-close #close-detail > #close-moves { max-width: 40rem; } }
#page-close #close-moves #close-moves-fallback { margin: var(--s-2) 0; }
#page-close #close-moves #close-moves-rule { margin: var(--s-2) 0 0; }
@media (max-width: 899.98px) {
  #page-close #close-moves .move-key { min-height: 64px; padding: var(--s-2) var(--s-3); font-size: var(--step-1); font-weight: 700; line-height: 1.25; }
}
#page-close #close-moves .choices { gap: var(--gap-panel); }
#page-close #close-moves .move-key { flex: 1 1 9rem; }
#page-close #close-moves .move-group { flex: 1 1 100%; display: grid; gap: var(--s-2); }
#page-close #close-moves .move-group .assignee { margin: 0; }

/* The note on the ticket's timeline (stampItem's): an addition to the record, led by its word "Note", set apart by its
   ground and a full solid hairline frame, a dashed rule would say pencil (§3.4); never a side stripe (P0-2), never
   an edit of what was written (S02 D-13). */
#page-close .stamp.note { border: 1px solid var(--ink-2); background: var(--surface); padding: var(--s-2) var(--s-3); }
#page-close .note-text { white-space: pre-wrap; }

/* ============================================================================ item 01, the kind of work (FB-26-01) */
/* The one folded key (D-W7-01-06; CONTRACT 01 §3): what is shown, its labels above it, "Change" at the right; it opens
   #board-controls, framed under it. 56 px on the phone, 48 px on the desk. */
#page-board #board-filter-key {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3);
  width: 100%; min-height: 56px; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); text-align: left; font-weight: 600;
}
/* P0-1 (L16-01r): "Change" stays on the label row at the right; the value takes its own row across the key's full width, and may
   break only BETWEEN its two parts (each part nowrap), so "only" never stands alone and nothing is drawn over "Change". */
#page-board #board-filter-key .filter-what { display: contents; }
#page-board #board-filter-key .filter-label { grid-row: 1; grid-column: 1; color: var(--ink-2); font-weight: 600; }
#page-board #board-filter-key .filter-change { grid-row: 1; grid-column: 2; font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
#page-board #board-filter-key .filter-now { grid-row: 2; grid-column: 1 / -1; min-width: 0; font-size: var(--step-1); line-height: 1.3; font-weight: 700; }
#page-board #board-filter-key .now-part { white-space: nowrap; }
#page-board #board-filter-key[aria-expanded="true"] { background: var(--surface); }
#page-board #board-controls {
  margin: var(--s-2) 0 0; padding: var(--s-3);
  border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
}
#page-board #board-controls .when-label { margin-top: 0; }
#page-board #board-controls #board-class-label { margin-top: var(--s-4); }
#page-board #board-class { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: var(--s-2) 0 0; }
#page-board #board-class button { min-height: 56px; padding: var(--s-2); }
#page-board #board-filter-said { margin: var(--s-3) 0 0; color: var(--ink); font-weight: 700; }
@media (min-width: 900px) {
  #page-board #board-filter-key { max-width: 40rem; min-height: 48px; }
  #page-board #board-controls { max-width: 40rem; }
  #page-board #board-class button { min-height: 48px; }
}
/* the class has one place on every line: the foot's second row, under the priority, before who is on it (P2-2) */
#page-board .line-foot .cls { order: 2; }
#page-board .line-foot .foot-break { order: 1; flex-basis: 100%; height: 0; }
#page-board .line-foot .on-it, #page-board .line-foot .also { order: 3; }
/* M-3 (D-W7-01-11): a filter never hides lateness; "Past its limit" says so in its own gloss */
#page-board .lane-gloss.unfiltered { color: var(--ink); font-weight: 600; }

/* item 04 (P2-7): on a move's read-back the photograph's keys stand apart from the confirm pair: a rule and a step of space */
#move-readback .photo-strip { padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-4); }
#move-readback .photo-held + .row button { font-size: var(--step-0); }
#close-moves .viewfinder { margin-top: var(--s-4); }