/* app.css — the chassis of the product: one token set and the components every face shares (ADR-032 §3.1 · §3.2 · §3.4 · §3.5 · §3.9; FACE-CH, build-wave-4). It replaces the built sheet whole. The concept every face carries (§3.0): one plant, one stage line — every ticket is a marker on the same eight-station line; what the record holds is ink and what it does not hold yet is pencil; colour is spent on lateness alone. So: ink on white; amber and red only for lateness and always with their words; an error is ink words with its reason, never red; a selection or the current place is an ink fill and a bold word, never colour alone; no heading is uppercased or tracked. What lives where: this sheet holds the tokens (:root is the chassis's alone), the base, the chassis (the header, the bar on the phone and the rail on the desk, the person block, the footer) and the shared components — buttons, keys, inputs, cards and stamps, the read-back and result blocks with the two marks, the ticket number, the stage line at three scales, the unlit line, errors, focus, motion and the print rule. Each face's own rules live in its family's sheet, loaded after this one: face-floor.css · face-supervisor.css · face-desk.css · face-station.css. System fonts only, nothing fetched, inline SVG (ADR-008). Every target at least 48 px (ADR-028 §2.10); the floor's keys 64 px, the record key 96 px. Contrast is WCAG 2.x from the 8-bit colour the screen draws — every pair named below is ADR-032 §3.1's computation (text 4.5:1, non-text and large text 3:1). 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). */ /* ================================================================================================ tokens (§3.1) */ :root { /* the grounds — never cream (S06 D-02) */ --bg: #ffffff; /* oklch(1 0 0) */ --surface: #f5f3f2; /* oklch(0.965 0.003 25) */ --surface-2: #eae7e6; /* oklch(0.93 0.004 25) */ /* ink — on bg 18.11 · surface 16.37 · surface-2 14.72; a filled key's label (bg on ink) 18.11 */ --ink: #191515; /* oklch(0.2 0.006 25) */ --ink-2: #403c3b; /* oklch(0.36 0.006 25): on bg 10.89 · surface 9.85 · surface-2 8.86 */ /* captions, and the stage line's future rail — on bg 6.01 · surface 5.43 · surface-2 4.88 */ --muted: #676261; /* oklch(0.5 0.006 25) */ /* pencil — what the record does not hold yet: on bg 7.80 · surface 7.05 · surface-2 6.34; vs ink 2.32, so pencil is never told from ink by colour — weight, rule and word tell them apart (S04 D-03) */ --pencil: #565151; /* oklch(0.44 0.006 25) */ /* lateness, and lateness only (S06 D-03): the late marker on bg 5.87; late-ink words on bg 6.94 · surface 6.28 */ --late: #c51d28; /* oklch(0.53 0.2 25) */ --late-ink: #b31220; /* oklch(0.49 0.19 25) */ /* past half its limit: amber-ink words on bg 6.98 · surface 6.31; ink on amber 10.56. The amber fill on bg is 1.71 — never alone: an amber marker always carries a 2 px ink border and its words */ --amber: #fabb41; /* oklch(0.83 0.15 80) */ --amber-ink: #7e4f04; /* oklch(0.47 0.1 70) */ /* D-W11P-04-02 to -06 (wave 11 polish, ask-336 as re-ruled by the plant, Amendment 2): the stage's colour, five hues for five groups, spent by group: red not assigned yet, yellow someone is on it, orange held up, green fixed to be verified, blue verified or closed. A MARK on a line (the current marker, the counted line's stations, the key's samples) and, in the open key only, the fill of each group's box behind its words. Marks: 3:1 on bg 6.68 · 1.60 · 3.39 · 5.88 · 6.02 and on surface 6.03 · 1.44 · 3.07 · 5.32 · 5.45; the yellow's ratio of record is its 2 px ink edge (18.11 on bg, 16.37 on surface; fill vs edge 11.34). Box text: white on red 6.68, green 5.88, blue 6.02; ink on yellow 11.34, orange 5.34. The late band keeps its own red (--late) and is told from the not-assigned red by its form, a stripe across the line; amber is never a stage hue. The nine-hue set of wave 7's section 3.6 is NOT built (founder's ruling, ask-315 (2)). */ --stage-open: #ba0d01; /* Not assigned yet: Reported, Acknowledged, Reopened oklch(0.499 0.200 29.9) red */ --stage-on: #f5c800; /* Someone is on it: Assigned, In progress oklch(0.847 0.173 92.3) yellow */ --stage-held: #d57106; /* Held up: Waiting (parts/vendor) oklch(0.651 0.157 56.3) orange */ --stage-verify: #03743e; /* Fixed: to be verified: Fixed oklch(0.491 0.123 153.8) green */ --stage-done: #1d5fc4; /* Verified or closed: Verified, Closed oklch(0.505 0.171 259.3) blue */ /* the unlit line — what R1 does not ship, drawn dark in its place (S06 D-04): unlit-ink on unlit 10.52 · unlit-muted 6.58 · the dashed edge 3.10 on unlit, 4.89 on bg */ --unlit: #292525; /* oklch(0.27 0.006 25) */ --unlit-ink: #dad6d6; /* oklch(0.88 0.004 25) */ --unlit-muted: #aeaaa9; /* oklch(0.74 0.005 25) */ --unlit-edge: #747070; /* oklch(0.55 0.005 25) */ /* a decorative hairline only (1.53 on bg): never a control's edge, a state, or the stage line's rail */ --rule: #d3d0cf; /* oklch(0.86 0.004 25) */ /* type — system-ui, the built stack, the platform's own Devanagari and Gurmukhi families, sans-serif (S06 css L31); tabular figures on every number; no monospace (X-8); no web font. See the base rule for how it is applied. */ --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans Devanagari", "Kohinoor Devanagari", "Noto Sans Gurmukhi", "Mukta Mahee", "Mukta", sans-serif; /* the scale — a major third, fixed rem; root 17 px below 900 px wide, 16 px at 900 and above. Step −1 is for Latin codes, tags and clock times only: nothing that can carry Devanagari or Gurmukhi sits below step 0. */ --step--1: 0.8rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem; --step-5: 3.052rem; --step-6: 3.815rem; /* the floor's numerals (S01 D-07) */ --wall-root: 16px; /* the wall view's root: the desk root until the wall's placeholder lands (§3.5 (f)) */ --station-root: 24px; /* a station face: nothing below 24 px (S05 D-02) */ /* space — the 8 px system with a 4 px half-step; radii */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --radius: 8px; --radius-s: 4px; /* targets — 48 px every tappable control (ADR-028 §2.10) · 64 px the floor panel's keys, the keypad, the section and machine keys, the opt-in · 96 px the record key · 56 px the supervisor's lines and confirms. Gaps: 8 px between neighbours, 12 px on the floor panel. (The rules below write these sizes in px, where the gate reads them.) */ --target-min: 48px; --target-key: 64px; --target-record: 96px; --target-row: 56px; --gap: 8px; --gap-panel: 12px; /* motion — 100 ms press · 140 ms hover and focus · 200 ms the marker's step and the turn from pencil to ink; none under reduced motion, and the end state always drawn */ --t-press: 100ms; --t-ui: 140ms; --t-step: 200ms; --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* The built sheet's colour names, CARRIED — each an alias of a token above, never a value of its own — for the rules FACE-CH moved verbatim into the four family sheets, so every face keeps rendering on this chassis until its family redraws it. Nothing new uses them; the last family's landing (or POLISH) deletes this block. */ --fg: var(--ink); --dim: var(--muted); --line: var(--rule); --accent: var(--ink); --warn: var(--amber-ink); --bad: var(--late-ink); --good: var(--ink); --card: var(--surface); --raised: var(--surface-2); /* item 09, the iPhone fit (D-W7-09-02): the four safe-area insets, named once. Aliases of the platform's own env() values, never new sizes: 0 wherever the platform has none (Android, the desk, a browser without a notch), so every rule below that takes max(, var(--sa-*)) keeps its built value there. Nothing else in the style sheets reads env(safe-area-inset-*). */ --sa-top: env(safe-area-inset-top, 0px); --sa-right: env(safe-area-inset-right, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); } /* ================================================================================================ base */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 106.25%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 17 px on the phone */ /* The family list written out, not var(--font): the gate's A-008 check (gate/a11y.py) reads literal family names and admits its system set only, so the five Devanagari and Gurmukhi family names --font adds are held from this rule until that set admits them (reported to seat 10 as a §3.12 conflict). The platform's own font fallback draws both scripts meanwhile, as it did in the built shell. */ body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--step-0); line-height: 1.45; font-variant-numeric: tabular-nums; } :lang(hi), :lang(pa) { line-height: 1.6; } /* No run that can carry Devanagari or Gurmukhi below step 0, whatever holds it (§3.1; S01 CQ P1-11) */ [lang="hi-IN"], [lang="pa-IN"] { font-size: max(1em, var(--step-0)); } [hidden] { display: none !important; } h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.25; } h2 { font-size: var(--step-1); margin: var(--s-6) 0 var(--s-3); } h3 { font-size: var(--step-0); margin: var(--s-5) 0 var(--s-2); } .page > h2:first-child { margin-top: var(--s-2); } p { margin: var(--s-2) 0; } a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; } b, strong { font-weight: 700; } code { font-family: inherit; } /* X-8: no monospace on codes, tags or hashes */ dl { margin: var(--s-2) 0; } dt { color: var(--muted); font-size: var(--step-0); margin-top: var(--s-2); } dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the type roles every face shares */ .meta { color: var(--muted); font-size: var(--step-0); } /* a caption: muted, never small */ .small { font-size: var(--step--1); } /* Latin codes, tags and clock times only */ .big { font-size: var(--step-2); font-weight: 700; line-height: 1.25; margin: var(--s-1) 0 var(--s-2); } .picked { color: var(--ink); font-weight: 700; } /* what was picked: ink and bold */ .tag { font-size: var(--step--1); font-weight: 700; color: inherit; white-space: nowrap; } /* codes never break */ /* D-W7-09-05, shell-wide: a person's code (TXP.whoCode / whoNodes / whoWords draw it) never breaks: "SYN-" over "001" at 360 and 375 px, in the person line, the lists, the read-backs and the stamps alike. One rule, no local copies. */ .who-code { white-space: nowrap; } /* CONTRACT D-W8-03-13: a tag or code never breaks at its hyphen (span.tag-nw; the built .who-code rule's twin). Built once, here, by item 01 (MF-01-4; CONTRACTS-INDEX c.10) with item 03's rule text; item 03 adopts it. */ .tag-nw { white-space: nowrap; } /* --- item 03: corrections (CONTRACT 03 §3, the rules marked CONTRACT, transcribed; no new token, no colour) --------- CONTRACT D-W8-03-01: THE MARK (03 owns it on every register; 07 and the reports' register adopt it). The corrected value first, in the row's own weight; then the word "was" and the original, struck through in --ink-2: never --muted, never a colour, never hidden. The strike never stands without its word. */ .amend-mark { white-space: normal; } .amend-now { font-weight: inherit; } .amend-was { color: var(--ink-2); font-weight: 600; } .amend-was-word { font-weight: 600; } .amend-orig { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: from-font; font-weight: 600; } .amend-orig .cls, .amend-now .cls { white-space: nowrap; } dd .amend-mark .amend-was, .stamp .amend-mark .amend-was { display: block; margin: 2px 0 0; font-size: var(--step-0); } .readout-lines .amend-mark .amend-was { font-size: var(--step-0); } .amend-mark[data-mark="pencil"] { border: 0; color: inherit; } .amend-mark[data-mark="pencil"] .amend-now { color: var(--pencil); font-weight: 500; border-bottom: 2px dashed var(--pencil); } /* CONTRACT D-W8-03-02: the stamp line: who, when, why, one line under the mark; the reason is the person's words */ .amend-stamp { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--step-0); font-weight: 400; line-height: 1.45; } .amend-stamp .who-code { white-space: nowrap; } #close-head dd.amended .amend-stamp { margin-bottom: var(--s-1); } /* CONTRACT D-W8-03-03: block e #close-amend, after the record's rows (R-E order a, b, c, e, f, g, h) */ #page-close #close-amend { margin: var(--s-5) 0 var(--s-4); padding: var(--s-3) 0 0; border-top: 1px solid var(--rule); } #page-close #close-amend > h2 { margin: 0 0 var(--s-1); font-size: var(--step-1); } #page-close #close-amend .amend-count { margin: 0 0 var(--s-2); color: var(--ink-2); } .amend-list { list-style: none; margin: 0; padding: 0; } .amend-entry { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .amend-entry:first-child { border-top: 1px solid var(--rule); } .amend-field { margin: 0; color: var(--ink-2); font-size: var(--step-0); font-weight: 600; } .amend-line { margin: 2px 0 0; font-size: var(--step-1); font-weight: 700; line-height: 1.35; } .amend-line .amend-was { display: block; margin: 2px 0 0; font-size: var(--step-0); } .amend-history { margin: var(--s-2) 0 0; } .amend-history > summary { display: flex; align-items: center; min-height: var(--target-min); cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .amend-history > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .amend-history[open] > summary { margin-bottom: var(--s-1); } .amend-open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--target-min); margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-4); background: var(--bg); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); font-weight: 700; } .amend-open:hover { background: var(--surface); } @media (max-width: 899.98px) { .amend-open { min-height: 56px; font-size: var(--step-1); } } @media (min-width: 900px) { #page-close .amend-open { width: auto; } } #page-close #close-amend-rule, #page-close #close-amend-who { margin: var(--s-2) 0 0; } #page-close .amend-window { margin: var(--s-3) 0 0; } /* CONTRACT D-W8-03-05: the flow's steps sit under the readout (01's grammar: one decision per screen, the dock pinned) */ #page-close .amend-keys { display: grid; gap: var(--gap-panel); } #page-close .amend-keys .key { display: block; width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4); text-align: left; font-size: var(--step-1); line-height: 1.3; } #page-close .amend-keys .key .sub { display: block; margin: 2px 0 0; font-size: var(--step-0); font-weight: 500; color: var(--ink-2); } #page-close .amend-keys .key[aria-pressed="true"] .sub { color: inherit; } #page-close .amend-keys .key { position: relative; padding-right: var(--s-7); } #page-close .amend-keys .key[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 50%; right: var(--s-4); transform: translateY(-50%); font-weight: 800; } #page-close .amend-keys .key[aria-disabled="true"] { background: var(--surface); color: var(--ink-2); border-color: var(--muted); cursor: default; } #page-close .amend-key-field { display: block; font-weight: 700; } #page-close #amend-words-rule { margin: var(--s-3) 0 0; } #page-close #amend-pick-hint { margin: 0 0 var(--s-3); } #page-close #amend-pick-next { margin: var(--s-3) 0 0; } #page-close .amend-reason-label { display: block; margin: 0 0 var(--s-1); color: var(--ink-2); font-weight: 600; } #page-close #amend-reason { margin: var(--s-2) 0 0; min-height: var(--target-record); font-size: var(--step-1); line-height: 1.45; } #page-close #amend-reason-hint { margin: 0; } #page-close #amend-reason-next { margin: var(--s-3) 0 0; } /* CONTRACT D-W8-03-06: the read-back's lines, label above value, both values in the mark */ #page-close .amend-rb-lines { margin: var(--s-3) 0 0; } #page-close .amend-rb-lines dt { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--step-0); font-weight: 600; } #page-close .amend-rb-lines dt:first-child { margin-top: 0; } #page-close .amend-rb-lines dd { margin: 2px 0 0; font-size: var(--step-0); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; } #page-close .amend-rb-lines dd:first-of-type { font-size: var(--step-1); } /* CONTRACT D-W8-03-08: a correction's stamp in What happened (the built note grammar: same stage) */ #page-close .stamps .amend-line { margin: var(--s-1) 0 0; font-size: var(--step-0); font-weight: 700; } #page-close .amend-field-inline { font-weight: 600; color: var(--ink-2); } #page-close .stamps .stamp-why { margin: var(--s-1) 0 0; } /* CONTRACT D-W8-03-09: the store's part view: each issued line keeps its built grammar and gains the mark, the stamp line and "Correct this line" (48 px) beside "Open ticket N". (The mock's .store-top Refresh row is not built: R-J.) */ #page-store .stamp.line .card-head .amend-was { display: inline; font-size: var(--step-0); } #page-store .line-acts { display: flex; flex-wrap: wrap; gap: var(--gap); margin: var(--s-2) 0 0; } #page-store .line-acts button { min-height: var(--target-min); margin: 0; } #page-store .stamp.line .line-acts button.link { margin-top: 0; } #page-store .line-amend { width: auto; margin: 0; font-size: var(--step-0); } #page-store #store-amend { margin: var(--s-4) 0 0; } #page-store .amend-what { margin: var(--s-3) 0 var(--s-1); font-weight: 700; } #page-store .amend-what-keys .key { min-height: var(--target-min); font-size: var(--step-0); flex: 0 1 auto; } #page-store #store-readback dd .amend-was { display: inline; } /* the ticket number: the display type on floor and supervisor faces (§3.0; S06 D-06 · S01 D-07) */ .tno { font-size: var(--step-3); font-weight: 800; line-height: 1; white-space: nowrap; } .tno-xl { font-size: var(--step-6); } /* lateness in words, beside the time they qualify (§3.5 (c)) */ .late-word { color: var(--late-ink); font-weight: 700; } .half-word { color: var(--amber-ink); font-weight: 700; } /* ================================================================================================ the chassis (§3.2) */ /* The header: the product's name, verbatim, on every screen (§3.2 (c); ask-312). */ body > header { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); background: var(--bg); } body > header h1 { margin: 0; font-size: var(--step-1); font-weight: 700; line-height: 1.2; } main { display: block; padding: var(--s-4) var(--s-4) var(--s-6); max-width: 45rem; margin: 0 auto; } /* The bar on the phone (§3.2 (b); S06 D-08): up to five faces in a bottom bar of labelled items — an icon above a word, 64 px tall; six or more show the first four and More, a sheet listing the rest. Which faces show is derived from the session's `may` (app.js through face.js), never kept here. The current item carries aria-current="page": an ink fill behind its icon and a bold word, never colour alone. */ body.signed-in { padding-bottom: 84px; } /* the phone block below takes the home-indicator inset (D-W7-09-03) */ .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px 4px 8px; background: var(--bg); border-top: 2px solid var(--ink); } .tabs > a, .tabs > .tab-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; margin: 0; padding: var(--s-1) 2px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--step-0); font-weight: 600; line-height: 1.15; text-decoration: none; cursor: pointer; transition: color var(--t-ui) var(--ease-out); } .tab-glyph { display: grid; place-items: center; width: 3.25rem; height: 2rem; border-radius: 1rem; transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out); } .tab-icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tab-word { max-width: 100%; white-space: nowrap; } .tabs > a:hover, .tabs > .tab-more:hover { color: var(--ink); background: transparent; } .tabs > a:hover .tab-glyph, .tabs > .tab-more:hover .tab-glyph { background: var(--surface-2); } .tabs > a[aria-current="page"], .tabs > .tab-more.is-current { color: var(--ink); font-weight: 800; } .tabs > a[aria-current="page"] .tab-glyph, .tabs > .tab-more.is-current .tab-glyph, .tabs > .tab-more[aria-expanded="true"] .tab-glyph { background: var(--ink); color: var(--bg); } /* More's sheet: the rest of the faces, listed above the bar */ .more-sheet { position: fixed; left: 0; right: 0; z-index: 19; bottom: 78px; max-height: calc(100vh - 160px); overflow-y: auto; padding: var(--s-2) var(--s-3); background: var(--bg); border-top: 2px solid var(--ink); } .more-sheet a { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: 0 var(--s-3); border-radius: var(--radius); color: var(--ink); font-size: var(--step-0); font-weight: 600; text-decoration: none; } .more-sheet a:hover { background: var(--surface); } .more-sheet a[aria-current="page"] { background: var(--ink); color: var(--bg); font-weight: 800; } /* Inside a recording flow the panel's keys replace the bar (§3.2 (b); X-9): FACE-FL sets body.in-flow while one is open and clears it after; the bar steps aside below 900 px. */ body.in-flow .tabs, body.in-flow .more-sheet { display: none; } /* The wall (§3.5 (f); X-23, the POLISH round P1-6): while the board is a wall (board.js sets body.board-wall) the screen is the board alone: no header, no bar or rail, no person block, no footer: a sign, not a desk page. */ body.board-wall > header, body.board-wall > footer, body.board-wall .rail, body.board-wall .who, body.board-wall .tabs, body.board-wall .more-sheet { display: none; } body.board-wall.signed-in { padding-bottom: 0; } /* The person block (#who): name · role · sections, the language, sign out — a strip under the header on the phone, the rail's foot on the desk. */ .rail { display: block; } .who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--rule); } .who-person { margin: 0; flex: 1 1 100%; min-width: 0; } .who-name { font-weight: 700; } .who .meta { margin-left: var(--s-1); } .who select { flex: 1 1 8rem; width: auto; margin-top: 0; min-height: 48px; } .who button { flex: 0 0 auto; min-height: 48px; } /* the person block's Devices link (ENR) is a key like its neighbours: a 48 px target, never a 25 px line of text (the POLISH round, P1-8) */ .who a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: var(--target-min); padding: 0 var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); font-weight: 700; text-decoration: none; } .who a:hover { background: var(--bg); } /* ENR's station line and its link (ADR-031 §4.3 (e) · §4.4): inside the main column's padding, the link a 48 px target (P1-8); the new-device lines after a sign-in (§4.7) likewise inside the column */ .station-box, .enr-new { padding: var(--s-2) var(--s-4); } .station-box p { margin: var(--s-1) 0; } .station-box a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); font-weight: 700; } .enr-new .cards li.card { padding: var(--s-3); } .who .err { flex-basis: 100%; margin: var(--s-1) 0 0; } /* The POLISH round (P1-1): the options' region lays its controls out as before; the "You" key shows on the phone only */ .who-opts { display: contents; } .who-more { display: none; } /* The footer: the name and the last call's trace, with the engineering words (#meta) moved here from the header (§3.2 (c) · (d)). */ body > footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-top: var(--s-7); padding: var(--s-4); border-top: 1px solid var(--rule); color: var(--muted); } body > footer p { margin: 0; } .foot-name { color: var(--ink); font-weight: 700; } body > footer code { color: var(--ink); } /* The rail on the desk (§3.2 (b); S06 D-08): at 900 px and above, a 240 px rail lists every face, the person block at its foot; the root steps down to 16 px. */ @media (min-width: 900px) { html { font-size: 100%; } body.signed-in { display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; min-height: 100vh; padding-bottom: 0; /* the rail's column: its ground and its hairline edge run the page's whole height */ background: linear-gradient(to right, var(--surface) 0 calc(15rem - 1px), var(--rule) calc(15rem - 1px) 15rem, var(--bg) 15rem); } body.signed-in > header { grid-column: 2; grid-row: 1; padding: var(--s-4) var(--s-6); } body.signed-in > #q-box { grid-column: 2; grid-row: 2; } body.signed-in > main { grid-column: 2; grid-row: 3; max-width: 64rem; margin: 0; padding: var(--s-5) var(--s-6) var(--s-6); } body.signed-in > footer { grid-column: 2; grid-row: 4; padding: var(--s-4) var(--s-6); } body.signed-in > .station-box, body.signed-in > .enr-new { grid-column: 2; padding: var(--s-2) var(--s-6); } /* the wall (P1-6): one column, the board the whole width; the rail's own rule below (display: flex, 100vh) is out-ranked here, or its empty column would stand a screen tall above the board (the render at 1366) */ body.board-wall.signed-in { display: block; background: var(--bg); } body.board-wall.signed-in > .rail, body.board-wall.signed-in > header, body.board-wall.signed-in > footer { display: none; } body.board-wall.signed-in > main { max-width: none; margin: 0; padding: var(--s-4) var(--s-6); } body.signed-in > .rail { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; padding: var(--s-5) var(--s-3) var(--s-4); } .tabs { position: static; display: flex; flex-direction: column; gap: 2px; padding: 0; background: transparent; border: 0; } .tabs > a { flex-direction: row; justify-content: flex-start; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-3); } .tabs > a .tab-glyph { width: auto; height: auto; background: transparent; } .tabs > a:hover { background: var(--surface-2); } .tabs > a:hover .tab-glyph { background: transparent; } .tabs > a[aria-current="page"] { background: var(--ink); color: var(--bg); font-weight: 700; } .tabs > a[aria-current="page"] .tab-glyph { background: transparent; color: var(--bg); } .tabs > .tab-more, .more-sheet { display: none !important; } /* the rail lists every face: no More */ body.in-flow .tabs { display: flex; } /* the rail stays inside a flow */ .who { margin-top: auto; flex-direction: column; align-items: stretch; gap: var(--s-2); padding: var(--s-4) var(--s-3) 0; background: transparent; border-bottom: 0; border-top: 1px solid var(--rule); } .who-person, .who select, .who button { flex: none; } .who-name, .who .meta { display: block; margin-left: 0; } .who select { width: 100%; } } /* ================================================================================================ controls */ /* Buttons: ink words in a 2 px ink edge on white; the main act an ink fill (bg on ink 18.11); a selection an ink fill (X-4); a disabled control dashed and muted, its words still readable (6.01). Every one at least 48 px. */ button { display: inline-block; min-height: 48px; padding: var(--s-2) var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out); } button:hover { background: var(--surface); } button:active { background: var(--surface-2); transform: scale(0.98); } button.primary { background: var(--ink); color: var(--bg); } button.primary:hover { background: var(--ink-2); border-color: var(--ink-2); } button.on, button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } /* what a selection holds reads in its words' colour: a caption inside an ink fill never stays muted on ink */ button.on .sub, button.on .meta, button[aria-pressed="true"] .sub, button[aria-pressed="true"] .meta { color: inherit; } button:disabled, button:disabled:hover { background: var(--bg); color: var(--muted); border-color: var(--muted); border-style: dashed; cursor: default; transform: none; } button.wide { display: block; width: 100%; margin-top: var(--s-2); } button.more { width: 100%; } .row { display: flex; flex-wrap: wrap; gap: var(--gap); } .row button { flex: 1 1 auto; } .choices { display: flex; flex-wrap: wrap; gap: var(--gap); margin: var(--s-2) 0; } .choices button { flex: 1 1 auto; } .readback button, .result button { margin: var(--s-2) var(--s-2) 0 0; } /* Keys — the floor panel's: 64 px, a figure or a word large enough for a thumb; the record key 96 px and ink-filled, always bottom-right in its bank (the bank's geometry is face-floor.css's). */ .key { min-height: 64px; padding: var(--s-2) var(--s-3); font-size: var(--step-2); font-weight: 700; } .key-record { min-height: 96px; background: var(--ink); color: var(--bg); font-size: var(--step-2); } .key-record:hover { background: var(--ink-2); border-color: var(--ink-2); } /* Inputs: a 2 px ink edge (a control's edge, never the hairline), ink words, the placeholder muted (6.01). */ input, select, textarea { min-height: 48px; padding: var(--s-2) var(--s-3); border: 2px solid var(--ink); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; } input[type=search], textarea, select { width: 100%; margin-top: var(--s-2); } textarea { min-height: 72px; line-height: 1.45; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; } input[type=checkbox], input[type=radio] { accent-color: var(--ink); } /* ================================================================================================ cards and stamps */ .cards, .stamps { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--gap); } .cards li, .stamps li { padding: 0; } .card { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-3); } .cards button { width: 100%; text-align: left; } .cards li.card > button { display: block; min-height: 48px; padding: 0; background: transparent; color: var(--ink); border: 0; border-radius: var(--radius-s); font-weight: inherit; text-align: left; } .card-head { margin: 0 0 var(--s-1); font-weight: 700; } .cards .sub { display: block; color: var(--muted); margin-top: 2px; } /* a word on a card: an ink edge and its words — never a coloured chip (Gate A) */ .pill { display: inline-block; padding: 0 var(--s-2); border: 1.5px solid var(--ink); border-radius: var(--radius-s); color: var(--ink); font-weight: 700; line-height: 1.5; } /* a stamp — one line of the record's chain */ .stamp { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-3); } /* item 01 (FB-26-01; CONTRACT 01 §3, D-W7-01-03, -12): the kind of work on every ticket face is a WORD, ink: breakage bold with its break mark (a snapped length of the stage line's rail, currentColor, never alone), general its word, "not set" its words. No colour, fill or edge per class (Gate A, X-2): weight and the mark carry the difference. */ .cls { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; white-space: nowrap; color: var(--ink); } .cls[data-class="breakage"] { font-weight: 700; } .cls-by { display: block; margin-top: 2px; color: var(--ink-2); font-weight: 400; font-size: var(--step-0); white-space: normal; } .break-mark { display: inline-block; flex: none; width: 1.25em; height: 0.75em; overflow: visible; } .break-mark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; } /* ================================================================================================ the read-back grammar (§3.4) */ /* The read-back before every record, and the result after it. What the system has only heard, guessed or proposed, or holds unanswered, is PENCIL; what the person said yes to AND the server answered with the record is INK. Drawn by one attribute, data-mark="pencil" or data-mark="ink", on every read-back block, result block, queue item and practice block — and a word always repeats it: pencil "Not recorded yet" · "Sending" · the queue's own sentence; ink "Recorded" with the number or the stamp's time. A marker never claims an unanswered success; a practice is never ink. Colour never replaces the word. */ .readback, .result { margin-top: var(--s-5); padding: var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius); background: var(--bg); } .readback dt { margin-top: var(--s-3); } .readback dd { margin: 2px 0 0; font-size: var(--step-1); font-weight: 600; line-height: 1.35; } .result dd { font-weight: 600; } [data-mark] { transition: color var(--t-step) var(--ease-out), border-color var(--t-step) var(--ease-out); } /* pencil: pencil words at 500 (400 in Devanagari and Gurmukhi — S04 SC axis 3) in a dashed 2 px rule */ [data-mark="pencil"] { color: var(--pencil); font-weight: 500; border: 2px dashed var(--pencil); } [data-mark="pencil"] :lang(hi), [data-mark="pencil"] :lang(pa) { font-weight: 400; } /* ink: ink words at 700 over ONE continuous 3 px rule under the block — never a rule per phrase (S04 SC fix 2) */ [data-mark="ink"] { color: var(--ink); font-weight: 700; border: 2px solid var(--ink); border-bottom-width: 3px; } .mark-word { display: block; margin: 0 0 var(--s-2); font-weight: 700; } /* the ticket number's place: an empty dashed box first in the line until the record answers, then the number written into a filled ink box */ .tno-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 3.5em; min-height: 1.6em; padding: 0 var(--s-2); border: 2px dashed var(--pencil); border-radius: var(--radius-s); font-weight: 800; white-space: nowrap; vertical-align: middle; } [data-mark="ink"] .tno-slot { background: var(--ink); color: var(--bg); border: 2px solid var(--ink); } /* ================================================================================================ the stage line (§3.5) */ /* One ticket's place on the eight stations (S06 D-07), drawn by the families from the record's own words:
  1. Reported [3]
    2. … eight items, in /config/public's `stages` order
with the station from face.js stationOf(stages, stage) — never guessed; "(new)" is drawn off the line, in pencil. The fifth station — Waiting (parts/vendor) — is a siding below the line, its clock kept apart. A Reopened ticket sits at station 1 and carries Reopened beside the line: a flag, never a column. The marker stays ink: the line says where; how long is said by the line's own rule and its words (§3.5 (c)). compact — a board line's or a card's: the marks on the rail; the names are for assistive technology. full — the ticket's page: down the page, each station named, the current one set apart. counted — the desk's open by stage: each station's count over its mark, a zero shown as 0 (§3.6); down the page below 900 px, where eight names cannot sit side by side. */ .stage-line { --rail-y: 0.6rem; list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); } .stage-line > li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; } /* the rail: each station draws the stretch to the next; future stretches muted (6.01 on bg), passed ones ink */ .stage-line > li::after { content: ""; position: absolute; left: 50%; top: var(--rail-y); width: 100%; height: 2px; margin-top: -1px; background: var(--muted); transition: background-color var(--t-step) var(--ease-out); } .stage-line > li:last-child::after { display: none; } .stage-line > li[data-state="past"]::after { height: 3px; margin-top: -1.5px; background: var(--ink); } /* the marks: a station ahead is hollow, a station passed is ink, the current one is the marker */ .stage-line > li::before { content: ""; position: relative; z-index: 1; width: 0.7rem; height: 0.7rem; margin-top: calc(var(--rail-y) - 0.35rem); border: 2px solid var(--muted); background: var(--bg); transition: transform var(--t-step) var(--ease-out); } .stage-line > li[data-state="past"]::before { border-color: var(--ink); background: var(--ink); } .stage-line > li[data-state="current"]::before { width: 1.15rem; height: 1.15rem; margin-top: calc(var(--rail-y) - 0.575rem); border-color: var(--ink); background: var(--ink); } /* D-W7-02-01 (item 02): the colour fills the current marker only, inside its 2 px ink edge. Which hue is the slug's (face.js stageSlug), under the body's one switch, data-stage-colour: "grouped" gives the five groups (D-W11P-04-01: red open, yellow on, orange held, green verify, blue done; ask-336 as re-ruled by the plant); "control" sets none (the marker stays ink, the tag's look byte for byte). A custom property rides the element that carries the slug (ol.stage-line, li on the counted line, the key's samples and boxes) and inherits to the marks. */ [data-stage-colour="grouped"] [data-stage="reported"], [data-stage-colour="grouped"] [data-stage="acknowledged"], [data-stage-colour="grouped"] [data-stage="reopened"], [data-stage-colour="grouped"] [data-stage-group="open"] { --stage-hue: var(--stage-open); } [data-stage-colour="grouped"] [data-stage="assigned"], [data-stage-colour="grouped"] [data-stage="in-progress"], [data-stage-colour="grouped"] [data-stage-group="on"] { --stage-hue: var(--stage-on); } [data-stage-colour="grouped"] [data-stage="waiting"], [data-stage-colour="grouped"] [data-stage-group="held"] { --stage-hue: var(--stage-held); } [data-stage-colour="grouped"] [data-stage="fixed"], [data-stage-colour="grouped"] [data-stage-group="verify"] { --stage-hue: var(--stage-verify); } [data-stage-colour="grouped"] [data-stage="verified"], [data-stage-colour="grouped"] [data-stage="closed"], [data-stage-colour="grouped"] [data-stage-group="done"] { --stage-hue: var(--stage-done); } .stage-line[data-stage] > li[data-state="current"]::before { background: var(--stage-hue, var(--ink)); border-color: var(--ink); } /* the desk's counted line: a station that holds tickets fills with its stage's hue; a zero station stays hollow */ #owner-stages > li.holds[data-stage]::before { background: var(--stage-hue, var(--ink)); border-color: var(--ink); } /* a lead mark (the key, the Reopened flag): the marker's own shape, never a chip: no word sits inside it */ .stage-sample { display: inline-block; flex: none; vertical-align: -0.1em; width: 1rem; height: 1rem; border: 2px solid var(--ink); background: var(--stage-hue, var(--ink)); } .stage-flag .stage-sample { width: 0.8rem; height: 0.8rem; } /* pencil takes no colour: an empty dashed box, never a hue (after the rules above, so it wins) */ [data-mark="pencil"] .stage-line > li[data-state="current"]::before, .stage-line[data-mark="pencil"] > li[data-state="current"]::before { background: var(--bg); border: 2px dashed var(--pencil); } .stage-line > li:nth-child(5)::before { transform: translateY(0.75rem); } .stage-line > li:nth-child(5) { background: linear-gradient(var(--muted), var(--muted)) no-repeat 50% var(--rail-y) / 2px 0.75rem; } .stage-name { display: block; margin-top: var(--s-2); text-align: center; line-height: 1.25; } .stage-line > li[data-state="current"] .stage-name { font-weight: 700; } .stage-line > li[data-state="future"] .stage-name { color: var(--muted); } .stage-count { display: block; height: 2.2rem; font-size: var(--step-2); font-weight: 800; line-height: 2.2rem; } .stage-count.is-zero { color: var(--muted); font-weight: 600; } .stage-flag { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; } /* compact */ .stage-line:not([data-scale]) .stage-name, .stage-line[data-scale="compact"] .stage-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* full — down the page */ .stage-line[data-scale="full"] { display: block; } .stage-line[data-scale="full"] > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; column-gap: var(--s-3); min-height: 2.75rem; padding-bottom: var(--s-2); } .stage-line[data-scale="full"] > li::before { grid-column: 1; justify-self: center; } .stage-line[data-scale="full"] > li::after { left: calc(0.8rem - 1px); width: 2px; height: 100%; margin-top: 0; } .stage-line[data-scale="full"] > li[data-state="past"]::after { left: calc(0.8rem - 1.5px); width: 3px; } .stage-line[data-scale="full"] > li:nth-child(5)::before { transform: translateX(0.6rem); } .stage-line[data-scale="full"] > li:nth-child(5) { background: none; } .stage-line[data-scale="full"] .stage-name { grid-column: 2; margin-top: 0; text-align: left; } .stage-line[data-scale="full"] > li[data-state="current"] .stage-name { margin: calc(-1 * var(--s-1)) 0 0 calc(-1 * var(--s-2)); padding: var(--s-1) var(--s-2); background: var(--surface); border-radius: var(--radius-s); } /* counted — the count over each mark (900 px and above), or beside each named station (below) */ .stage-line[data-scale="counted"] { --rail-y: 2.8rem; --count-h: 2.2rem; } .stage-line[data-scale="counted"] .stage-count { order: -1; } /* X-22, fixed in the chassis (the POLISH round): over 900 px the count stands above its mark, so the mark's offset is the rail's height less the count's (--rail-y already holds the count): every mark centred on the rail, on every face that draws the counted line, with no face's local correction */ @media (min-width: 900px) { .stage-line[data-scale="counted"] > li::before { margin-top: calc(var(--rail-y) - var(--count-h) - 0.35rem); } .stage-line[data-scale="counted"] > li[data-state="current"]::before { margin-top: calc(var(--rail-y) - var(--count-h) - 0.575rem); } } @media (max-width: 899.98px) { /* The POLISH round (P1-1): the phone's first screen is the person's. The product's name at step 0 regular (verbatim, never cut); the person block one 48 px line, the person named and "You", which opens the language, the devices and the sign-out; inside a recording flow the block is not drawn at all (X-9: the panel's keys replace the chassis). */ body > header { padding: var(--s-2) var(--s-4); } body > header h1 { font-size: var(--step-0); font-weight: 400; } .who { flex-wrap: nowrap; min-height: var(--target-min); padding: 0 var(--s-2) 0 var(--s-4); } .who-person { flex: 1 1 auto; min-width: 0; } .who:not(.open) #who-role, .who:not(.open) #who-sections { display: none; } .who-more { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: var(--target-min); min-width: var(--target-min); padding: 0 var(--s-4); } .who:not(.open) .who-opts { display: none; } .who.open { flex-wrap: wrap; padding-bottom: var(--s-2); } .who.open .who-person { flex: 1 1 60%; } .who.open .who-opts { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: var(--s-2); } body.in-flow .who { display: none; } .stage-line[data-scale="counted"] { --rail-y: 0.75rem; display: block; } .stage-line[data-scale="counted"] > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-3); min-height: 2.75rem; padding-bottom: var(--s-2); } .stage-line[data-scale="counted"] > li::before { grid-column: 1; grid-row: 1; justify-self: center; } .stage-line[data-scale="counted"] > li::after { left: calc(0.8rem - 1px); width: 2px; height: 100%; margin-top: 0; } .stage-line[data-scale="counted"] > li:nth-child(5)::before { transform: translateX(0.6rem); } .stage-line[data-scale="counted"] > li:nth-child(5) { background: none; } .stage-line[data-scale="counted"] .stage-name { grid-column: 2; grid-row: 1; margin-top: 0; text-align: left; } .stage-line[data-scale="counted"] .stage-count { grid-column: 3; grid-row: 1; order: 0; height: auto; font-size: var(--step-1); line-height: 1.35; } } /* ---- item 03: the glance scale (D-W11P-03-01..06). One ticket's place on the eight stations, under the ticket's title row, the whole width of its box; bigger marks; the names under the marks (all of them from 900 px; the current one only below, D-W11P-03-04). Every mark absolutely placed on a fixed band, so the names sit on one baseline whatever the current mark's size and the siding's drop. */ .stage-line[data-scale="glance"] { --mark: 1rem; --mark-now: 1.5rem; --rail-y: 0.75rem; --drop: 0.75rem; --name-top: 2.625rem; --rail-past: 3px; margin: var(--s-3) 0 0; padding: 0; } .stage-line[data-scale="glance"] > li { display: block; min-height: calc(var(--name-top) + 1.5rem); padding-top: var(--name-top); } .stage-line[data-scale="glance"] > li::before { position: absolute; z-index: 1; left: 50%; top: calc(var(--rail-y) - var(--mark) / 2); width: var(--mark); height: var(--mark); margin: 0 0 0 calc(var(--mark) / -2); } .stage-line[data-scale="glance"] > li[data-state="current"]::before { top: calc(var(--rail-y) - var(--mark-now) / 2); width: var(--mark-now); height: var(--mark-now); margin: 0 0 0 calc(var(--mark-now) / -2); } .stage-line[data-scale="glance"] > li[data-state="past"]::after { height: var(--rail-past); margin-top: calc(var(--rail-past) / -2); } /* the siding (station 5, Waiting): its mark drops below the rail, its tick with it; its name keeps the line's baseline */ .stage-line[data-scale="glance"] > li:nth-child(5)::before { transform: translateY(var(--drop)); } .stage-line[data-scale="glance"] > li:nth-child(5) { background: linear-gradient(var(--muted), var(--muted)) no-repeat 50% var(--rail-y) / 2px var(--drop); } .stage-line[data-scale="glance"] .stage-name { display: block; margin: 0; padding: 0 2px; font-size: 0.9375rem; line-height: 1.25; text-align: center; color: var(--ink-2); } .stage-line[data-scale="glance"] > li[data-state="future"] .stage-name { color: var(--muted); } .stage-line[data-scale="glance"] > li[data-state="current"] .stage-name { color: var(--ink); font-size: 1.0625rem; font-weight: 700; } /* WHICH NAMES SHOW (D-W11P-03-04), by the line's own width, not the screen's (the close page's line is narrower than the board's at the same desk): the base form names the current mark only, in full, never cut, on one line; it starts at its cell's start on stations 1 and 2, ends at its cell's end on 7 and 8, is centred under its mark on 3 to 6, so it never leaves the line's box. The other names stay in the line for assistive technology (the compact scale's clip). A line at least 46rem wide names every station (each cell then 5.75rem or more): one line each, except the siding's (Waiting (parts/vendor)), which breaks at its space into two. A browser without container queries keeps the base form. */ .stage-line[data-scale="glance"] { container-type: inline-size; } .stage-line[data-scale="glance"] > li:not([data-state="current"]) .stage-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .stage-line[data-scale="glance"] > li[data-state="current"] .stage-name { position: absolute; top: var(--name-top); left: 50%; transform: translateX(-50%); width: max-content; padding: 0; white-space: nowrap; } .stage-line[data-scale="glance"] > li[data-state="current"]:nth-child(-n+2) .stage-name { left: 0; transform: none; text-align: left; } .stage-line[data-scale="glance"] > li[data-state="current"]:nth-child(n+7) .stage-name { left: auto; right: 0; transform: none; text-align: right; } @container (min-width: 46rem) { .stage-line[data-scale="glance"] > li .stage-name, .stage-line[data-scale="glance"] > li:not([data-state="current"]) .stage-name, .stage-line[data-scale="glance"] > li[data-state="current"] .stage-name, .stage-line[data-scale="glance"] > li[data-state="current"]:nth-child(n) .stage-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; transform: none; margin: 0 -50%; padding: 0; white-space: nowrap; text-align: center; } .stage-line[data-scale="glance"] > li[data-state]:nth-child(5):nth-child(n) .stage-name { margin: 0; white-space: normal; } } /* 900 px and up (the desk): bigger marks */ @media (min-width: 900px) { .stage-line[data-scale="glance"] { --mark: 1rem; --mark-now: 1.75rem; --rail-y: 0.875rem; --drop: 0.875rem; --name-top: 2.875rem; --rail-past: 4px; } } /* ================================================================================================ parts issued to a job (item 07) */ /* CONTRACT 07 §3 (build-wave-8b, bw8b-019): parts.css's CONTRACT rules with MF-07-4's four edits, in one place. The mock's placeholder rules (.ph-*, .mock-*, and its own .amend-was / .amend-stamp: item 03's amend rules own the mark, R-P) are not shipped; no new colour, size, space, radius or motion value (D-W8-07-14). */ /* CONTRACT D-W8-07-02: a part line in every register of this item. The count first with its word ("2 issued"), the part's name, its code (a tag: never breaks); under it, when and by whom. Ruled rows, never cards; tabular figures. */ .parts-lines { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 2px solid var(--ink); } .part-line { padding: var(--s-2) 0 var(--s-3); border-bottom: 1px solid var(--rule); } .part-what { margin: 0; font-size: var(--step-0); line-height: 1.35; overflow-wrap: anywhere; } /* MF-07-4: step 0, was step 1 */ .part-qty { font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: var(--s-1); } /* MF-07-4: the count alone at step 1 */ .part-name { font-size: var(--step-0); font-weight: 600; } /* MF-07-4: 600, never 500 (the pencil weight) */ .part-when { margin: var(--s-1) 0 0; color: var(--ink-2); font-variant-numeric: tabular-nums; } .parts-none { margin: var(--s-2) 0 0; font-size: var(--step-0); font-weight: 600; color: var(--ink); } /* MF-07-4: step 0, 600; was step 1, 700 */ .parts-terms, .parts-tell { margin: var(--s-2) 0 0; color: var(--ink-2); } /* CONTRACT D-W8-07-03: block g #close-parts sits after 04's clocks, before What happened (R-E, 01 section 4.1) */ #page-close #close-parts { margin: var(--s-5) 0 0; } #page-close #close-parts > h2 { margin: 0 0 var(--s-1); } #page-close #close-parts .parts-issue { margin: var(--s-3) 0 0; } #page-close .ticket-record .stamp.issue .stamp-what { font-weight: 700; } /* CONTRACT D-W8-07-04: the closure read-back's parts block (#close-rb-parts) and its result twin: inside the read-back's own frame, so it draws no second frame; a dashed pencil rule over it while the close is unanswered, the ink rule after */ #page-close #close-rb-parts { margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border: 0; border-top: 2px dashed var(--pencil); } #page-close #close-rb-parts[data-mark="ink"] { border-top: 3px solid var(--ink); } #page-close #close-rb-parts h3 { margin: 0 0 var(--s-1); font-size: var(--step-0); font-weight: 700; color: inherit; } #page-close #close-rb-parts .rb-parts-lines { list-style: none; margin: 0; padding: 0; } #page-close #close-rb-parts .rb-parts-lines li { padding: var(--s-1) 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #page-close #close-rb-parts .meta { margin: var(--s-1) 0 0; color: inherit; font-weight: 400; } #page-close #close-rb-parts .parts-none { font-size: var(--step-0); color: inherit; } /* CONTRACT D-W8-07-06: the store's issue from the job (#store-job): the entry key on the list, then one decision a screen */ #page-store .job-entry { flex-direction: column; align-items: flex-start; text-align: left; margin: var(--s-3) 0 var(--s-4); } #page-store .job-entry-sub { font-size: var(--step-0); font-weight: 600; } #page-store #store-job .job-ask { margin: 0 0 var(--s-2); font-size: var(--step-1); font-weight: 700; color: var(--ink); } #page-store #store-job-find input { font-size: var(--step-1); font-variant-numeric: tabular-nums; max-width: 16rem; } #page-store #store-job-find input[aria-invalid="true"] { border-width: 3px; } #page-store .job-back { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: 0; } #page-store .job-back .link { min-height: 48px; } #page-store .job-head { margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius); } #page-store .job-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); } #page-store .job-mach { font-size: var(--step-1); font-weight: 700; } #page-store .job-mach .tag { font-size: var(--step-1); } #page-store .job-stage { margin: var(--s-1) 0 0; } #page-store .job-stage .meta { color: var(--ink-2); } #page-store .job-head { padding: var(--s-2) var(--s-3); } #page-store .job-line .tno { font-size: var(--step-2); } #page-store .job-stage { font-variant-numeric: tabular-nums; } #page-store .job-said { margin: var(--s-1) 0 0; font-weight: 600; overflow-wrap: anywhere; } #page-store .job-said-k { color: var(--ink-2); font-weight: 400; } #page-store .job-said .meta { color: var(--ink-2); font-weight: 400; } #page-store #store-job-late { margin: var(--s-2) 0 0; } #page-store .job-pick h3 { margin: var(--s-4) 0 0; font-size: var(--step-1); } #page-store .job-pick > .meta { margin: var(--s-1) 0 0; color: var(--ink-2); } #page-store .pick-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 2px solid var(--ink); } #page-store .pick-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--rule); } /* a picked row: the selection is an ink frame and the bold count (X-24), never a colour or a side stripe */ #page-store .pick-row[data-picked] { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--radius-s); } #page-store .pick-what { display: block; margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; } #page-store .pick-count { display: block; margin-top: 2px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; } #page-store .pick-count .sub { font-weight: 400; } #page-store .pick-qty { display: block; } #page-store .pick-qty-word { display: block; color: var(--ink-2); font-size: var(--step-0); font-weight: 600; } #page-store .pick-qty input { width: 100%; min-height: 48px; font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } #page-store .pick-other { display: block; margin: var(--s-3) 0 0; color: var(--ink-2); font-weight: 600; } /* the key row: on the phone it is pinned on the bar (var(--bar-h), D-W8-00-09), so the act is on every first screen */ #page-store .keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; } #page-store .keyrow button, #page-store .keyrow .key-link { margin: 0; } #page-store .pick-tally { margin: 0; font-weight: 700; flex: 0 1 auto; } @media (max-width: 899.98px) { #page-store #store-job-keys, #page-store #store-readback-keys { position: sticky; bottom: var(--bar-h); z-index: 4; margin: var(--s-4) calc(-1 * var(--s-4)) 0; padding: var(--s-3) var(--s-4); background: var(--bg); border-top: 2px solid var(--ink); } #page-store #store-readback-keys { margin: var(--s-3) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); border-radius: 0 0 var(--radius) var(--radius); } #page-store .keyrow button.primary { flex: 1 1 10rem; min-height: 56px; } #page-store #store-job-keys, #page-store #store-readback-keys { padding-top: var(--s-2); padding-bottom: var(--s-2); } #page-store #store-job .job-back, #page-store #store-job h2 { margin-top: 0; } } /* the read-back's and the result's lines: one ruled row per part line, each with its own word once it is answered */ #page-store .rb-lines { list-style: none; margin: var(--s-1) 0 0; padding: 0; } #page-store .rb-line .part-qty { margin-right: 0; } #page-store .rb-job { font-size: var(--step-0); } #page-store .rb-job .tno { font-size: var(--step-1); } #page-store .rb-line { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--step-1); font-weight: 600; overflow-wrap: anywhere; } #page-store .rb-line[data-mark] { border: 0; border-bottom: 1px solid var(--rule); } #page-store .rb-count { display: block; font-size: var(--step-0); font-weight: 500; font-variant-numeric: tabular-nums; } #page-store .line-word { display: block; margin-top: 2px; font-size: var(--step-0); font-weight: 700; } #page-store #store-readback-fields dd .rb-lines { margin-top: 0; } #page-store #store-result .mark-word { font-size: var(--step-1); } /* CONTRACT D-W8-07-10: the machine page's history, grouped by job, newest first; the ticket number opens the ticket */ #page-machine #machine-parts-history { margin: var(--s-6) 0 0; } #page-machine .hist { list-style: none; margin: var(--s-2) 0 0; padding: 0; } #page-machine .hist-job { margin: 0 0 var(--s-4); } #page-machine .hist-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); } #page-machine .hist-head .desk-tno { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; } #page-machine .hist-head .tno { font-size: var(--step-2); } #page-machine .hist-stage { font-weight: 700; } #page-machine .hist-head .meta { color: var(--ink-2); flex: 1 1 100%; } #page-machine .parts-lines { border-top-width: 1px; } #page-machine .part-what { font-size: var(--step-0); } /* CONTRACT D-W8-07-11: the reports' parts register: W7-08's register grammar as built; the figures right-set and tabular */ #reports-parts .register .num { font-variant-numeric: tabular-nums; } @media (min-width: 900px) { #reports-parts .register .num { text-align: right; padding-right: var(--s-5); } } #reports-parts .register .who-code { font-weight: 600; } /* CONTRACT D-W8-07-11 (phone): each reflowed cell holds ONE value element (.cv), its label beside it, left-set, so a tag and its name never split across the grid */ @media (max-width: 899.98px) { #reports-parts .register.reflow td[data-label] { grid-template-columns: 6.5rem minmax(0, 1fr); } #reports-parts .register.reflow td .cv { overflow-wrap: anywhere; } } /* CONTRACT D-W8-07-06: the step heading sits in the back row; "Another job" sits in the job's head */ #page-store .job-back h2 { margin: 0; flex: 1 1 100%; font-size: var(--step-1); } #page-store .job-back #store-job-change { min-height: 48px; padding: var(--s-1) var(--s-3); } /* MF-07-5: "What was said" folds under its summary on the phone (a 48 px target), open at the desk (store.js) */ #page-store .job-said-fold > summary { min-height: 48px; display: flex; align-items: center; color: var(--ink-2); font-weight: 600; cursor: pointer; } #page-store .job-said-fold { margin: var(--s-1) 0 0; } /* R-8b-14 (MF-07-5's first screen; bw8b-023): below 900 px, so both pick rows of a two-part machine stand above the pinned key row at 360 x 780: the store's built Refresh row is not drawn on the job screen (store.js marks #page-store[data-job]); the job's primary key takes an 8rem basis so the tally and the key keep one row (the read-back's keys keep 10rem); a pick row's count runs inline after its part code, so the code never stands on a line of its own (it joins the count line, or ends the name line where it fits there), and the count's arithmetic never breaks; and, the next smallest change, step 2's heading is clipped as the built .sr-only is (it stays the focus target and in the accessibility tree; "Which parts, how many?" names the step on screen). Step 1 and the desk are unchanged. */ @media (max-width: 899.98px) { #page-store[data-job] #store-refresh, #page-store[data-job] #store-asat { display: none; } #page-store #store-job-keys button.primary { flex: 1 1 8rem; } #page-store .pick-what .pick-count { display: inline; margin: 0; white-space: nowrap; } #page-store .pick-what .pick-count .sub { white-space: normal; } #page-store .pick-what .pick-count::before { content: " "; white-space: normal; } #page-store #store-job[data-step="pick"] #store-job-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* MF-07-1: the readout's door to the store's job screen, 56 px at the phone, 48 px at the desk */ #page-close #close-readout-lines .parts-issue { display: inline-flex; margin: var(--s-1) 0 0; } @media (min-width: 900px) { #page-close #close-readout-lines .parts-issue, #page-close #close-parts .parts-issue { min-height: 48px; } } #page-machine .hist-older { min-height: 48px; } /* ================================================================================================ the iPhone fit (item 09) */ /* PART A of design-wave-7's 09-iphone/iphone.css, transcribed. With all four insets at 0 every value below equals the built one (Android and the desk do not move); on a notched iPhone each takes the larger of the built padding and the inset, never their sum and never a bare inset. After the POLISH block above, so these win where both set a side. */ @media (max-width: 899.98px) { /* D-W7-09-02: the header clears the status bar or the island (top), and every column clears a notch turned to the side (left, right). */ body > header { padding-top: max(var(--s-2), var(--sa-top)); padding-left: max(var(--s-4), var(--sa-left)); padding-right: max(var(--s-4), var(--sa-right)); } main, body > footer, .station-box, .enr-new { padding-left: max(var(--s-4), var(--sa-left)); padding-right: max(var(--s-4), var(--sa-right)); } .who { padding-left: max(var(--s-4), var(--sa-left)); padding-right: max(var(--s-2), var(--sa-right)); } /* D-W7-09-03: the bar against the home indicator. The built bar added the inset ON TOP of its 8 px foot (8 + 34 = 42 px of empty foot on a notched iPhone); this takes the larger of the two, so the 34 px band is cleared and 8 px of the first screen come back. The bar is 76px + max(8px, inset) tall: items 05, 06 and 07 pin their keys to that height. With no inset: 8 px, as built. */ body.signed-in { padding-bottom: calc(76px + max(8px, var(--sa-bottom))); } /* FIX-R2 (c.6): the bar is 78 px as built (2 border + 4 top + 64 item + 8 foot), 6 px short of the 76px + max(8px, inset) the pinned key rows of items 05, 06 and 07 sit at, which left a 6 px sliver where content scrolled between the bar and a key. --bar-h is the bar's whole height; the bar takes it (border-box, so border and padding count) and its items stretch into the 6 px. Pin a key row to var(--bar-h). */ :root { --bar-h: calc(76px + max(8px, var(--sa-bottom))); } .tabs { box-sizing: border-box; min-height: var(--bar-h); padding: 4px max(4px, var(--sa-right)) max(8px, var(--sa-bottom)) max(4px, var(--sa-left)); } /* D-W7-09-06: More's sheet sits on the bar and is measured by the screen the person actually sees: dvh, where Safari's 100vh is the tallest screen (its bars hidden) and runs the sheet under its own toolbar. The vh line first: the fallback for a browser without dvh. */ .more-sheet { bottom: var(--bar-h); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px - max(8px, var(--sa-bottom)) - var(--sa-top)); padding-left: max(var(--s-3), var(--sa-left)); padding-right: max(var(--s-3), var(--sa-right)); } } /* ================================================================================================ the unlit line, notes, errors */ /* The unlit line: a capability R1 does not ship, drawn dark in its place with its reason in plain words — never a control (§3.3 (iv); S06 D-04). The dark ground means "not shipped" and nothing else. */ .unlit { display: block; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); background: var(--unlit); color: var(--unlit-ink); border: 2px dashed var(--unlit-edge); border-radius: var(--radius); } .unlit-name { display: block; font-weight: 700; } .unlit .meta, .unlit-why { color: var(--unlit-muted); } /* A note set beside the page (a declared stub, a reason something is not shown): words in a full dashed hairline frame, never a side stripe (the studio's absolute ban; the POLISH round, P0-2). */ .stub { color: var(--ink-2); border: 1px dashed var(--muted); border-radius: var(--radius-s); padding: var(--s-2) var(--s-3); } /* A caution: ink words, bold. Amber is spent on lateness alone. */ .warn-inline { color: var(--ink); font-weight: 700; } /* An error: ink words with its reason and nothing else, never red, which means late (§3.2 (e); S06 D-18); no side stripe (the POLISH round, P0-2). */ .err { color: var(--ink); font-weight: 700; } /* ================================================================================================ Settings (item 05) */ /* Setup's Settings part and THE settings sheet, one shared component (CONTRACT 05; D-W7-05-01 to -21; item 06's channel sheet and later admin screens adopt these rules, never a copy). Measures by copy from the design's admin.css (md5 6f0c387b3a3e0b02667744bb057ff1ee), with the contract's three changes: the pinned key row sits at the bar's own height calc(76px + max(8px, var(--sa-bottom))) (c.6, OPEN-09-D), the person code's nowrap rule is the shell's .who-code above (c.8), and a withheld key is a solid 1 px muted edge with its reason in words, in these rules only (c.9, D-W7-05-17: dashed means "not recorded yet" and nothing else here). Tokens only; no colour literal. */ /* the two parts of Setup (D-W7-05-01) */ #setup-parts { display: flex; flex-wrap: wrap; gap: var(--gap); margin: 0 0 var(--s-4); } #setup-parts a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); font-weight: 700; text-decoration: none; } #setup-parts a:hover { background: var(--surface); } #setup-parts a[aria-current="page"] { background: var(--ink); color: var(--bg); } /* the current part: ink fill, bold word (X-24) */ #setup-settings-host .set-title { margin: var(--s-2) 0 var(--s-1); font-size: var(--step-2); } #setup-settings-host .set-terms { max-width: 42rem; margin: 0 0 var(--s-4); color: var(--ink-2); } #setup-settings-host a.back { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-1); color: var(--ink); font-weight: 600; text-decoration: none; } #setup-settings-host a.back:hover { text-decoration: underline; } /* the register (D-W7-05-03): ruled rows, each one link; its "Open" is drawn here and hidden from the tree */ #set-register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } #set-register > li { border-bottom: 1px solid var(--rule); } #set-register a.set-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; min-height: 48px; padding: var(--s-3) var(--s-1); color: var(--ink); text-decoration: none; } #set-register a.set-open:hover { background: var(--surface); } #set-register a.set-open::after { content: "Open"; content: "Open" / ""; grid-column: 2; grid-row: 1 / span 3; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #set-register .set-name { grid-column: 1; margin: 0; font-size: var(--step-1); font-weight: 700; } #set-register .set-says { grid-column: 1; margin: var(--s-1) 0 0; font-weight: 600; max-width: 46rem; } #set-register .set-when { grid-column: 1; margin: var(--s-1) 0 0; color: var(--muted); } #set-register li.unlit-row { border-bottom: 0; padding: var(--s-3) 0 0; } #set-register .unlit { margin: 0; } /* the sheet (D-W7-05-02): the standing sentence is the paper's headline, ink over one 3 px rule when the record holds it, pencil over a dashed rule while it is read */ #set-sheet { margin: 0; } #set-standing { max-width: 44rem; margin: var(--s-2) 0 0; padding: 0 0 var(--s-3); border: 0; border-radius: 0; border-bottom: 3px solid var(--ink); font-size: var(--step-2); line-height: 1.25; } #set-standing[data-mark="pencil"] { border: 0; border-bottom: 2px dashed var(--pencil); } #set-source { margin: var(--s-2) 0 0; color: var(--ink-2); } #set-source .who-did { color: var(--ink); font-weight: 700; } #set-editing { margin: var(--s-2) 0 0; } #set-change { margin: var(--s-4) 0 0; } #set-refused { margin: var(--s-4) 0 0; max-width: 44rem; } #set-nothing { margin: var(--s-4) 0 0; } #set-err { margin: var(--s-4) 0 0; } /* the sheet's body: the paper, and its changes as a margin column at the desk (D-W7-05-04) */ .set-body { display: block; } .set-main > h3, #set-history > h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--step-1); } .set-rows { margin: 0; border-top: 1px solid var(--rule); } .set-rows > div { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .set-rows dt { margin: 0; color: var(--ink-2); font-weight: 600; } .set-rows dd { margin: var(--s-1) 0 0; font-weight: 600; } .set-rows dd .meta { display: block; font-weight: 400; } .set-rows dd.unsaid { color: var(--muted); font-weight: 600; } @media (min-width: 600px) { .set-rows > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--s-4); } .set-rows dd { margin: 0; } } .set-note { max-width: 44rem; color: var(--ink-2); } .set-fixed { margin: var(--s-5) 0 0; } .set-fixed p { margin: var(--s-1) 0; } /* the changes: stamps, newest first, ruled rows; the newest set off by a 2 px ink rule above, its time bold (D-W7-05-06, -16) */ #set-history-list { display: block; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); } #set-history-list > li.stamp { padding: var(--s-3) 0; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); } #set-history-list > li.stamp.new { border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: -1px; } #set-history-list > li.stamp.new time { color: var(--ink); font-weight: 700; } #set-history-list .stamp p { margin: 0; } #set-history-list .stamp-when { color: var(--ink-2); } #set-history-list .stamp-who { color: var(--ink); font-weight: 700; } #set-history-list .stamp-what { margin-top: var(--s-1); font-weight: 600; } #set-history .set-before { margin: var(--s-2) 0 0; color: var(--muted); } /* editing (D-W7-05-05): each field says what it is now */ #set-edit { margin: var(--s-4) 0 0; } #set-edit fieldset { margin: 0 0 var(--s-5); padding: 0; border: 0; } #set-edit legend { margin: 0 0 var(--s-2); padding: 0; font-size: var(--step-1); font-weight: 700; } #set-edit .field { display: block; margin: 0; padding: var(--s-3) 0; border-top: 1px solid var(--rule); } #set-edit .field:last-of-type { border-bottom: 1px solid var(--rule); } #set-edit .field > label, #set-edit .field > .label { display: block; margin: 0 0 var(--s-1); color: var(--ink-2); font-weight: 600; } #set-edit select, #set-edit input[type=text] { display: block; width: 100%; max-width: 24rem; margin: 0; } #set-edit input.time { max-width: 7rem; font-weight: 700; } #set-edit input.num { max-width: 6rem; font-weight: 700; } #set-edit .set-was { display: block; margin: var(--s-1) 0 0; color: var(--muted); } #set-edit .set-was b { color: var(--ink-2); } #set-edit [aria-invalid="true"] { border-width: 3px; } #set-edit .field .err { margin: var(--s-2) 0 0; max-width: 34rem; } #set-edit .field.changed > label, #set-edit .field.changed > .label { color: var(--ink); } #set-edit .field.changed .set-was b.chg { color: var(--ink); } #set-edit .inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-4); } #set-edit .inline > span { display: block; } #set-edit .label-s { display: block; margin: 0 0 var(--s-1); color: var(--ink-2); font-weight: 600; } #set-edit .row-keys { margin: var(--s-2) 0 0; } #set-edit label.check-one { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; font-weight: 600; } #set-summary { margin: var(--s-3) 0 var(--s-4); } @media (min-width: 900px) { #ver-roles-edit .field { display: grid; grid-template-columns: 10rem 18rem minmax(0, 1fr); column-gap: var(--s-4); align-items: center; } #ver-roles-edit .field > label { margin: 0; } #ver-roles-edit .set-was { margin: 0; } } /* check rows: the label is the target, 48 px tall (D-W7-00-08) */ #setup-settings-host .checks { display: flex; flex-wrap: wrap; gap: var(--gap); margin: var(--s-1) 0 0; padding: 0; list-style: none; } #setup-settings-host .checks label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-3); border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); font-weight: 600; cursor: pointer; } #setup-settings-host .checks.days label { min-width: 4.25rem; justify-content: center; } #setup-settings-host .checks.list { display: grid; gap: var(--gap); } #setup-settings-host .checks.list label { display: flex; width: 100%; } @media (min-width: 900px) { #setup-settings-host .checks.list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* the key rows: back-left, the main act right (D-W7-00-09); pinned above the bar while editing or reading back, so the act is never under the fold (D-W7-05-12); the bar's own height, never the mocks' sum (c.6) */ .set-keys { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); margin: var(--s-5) 0 0; } .set-keys button { width: 100%; margin: 0; } .set-keys.pinned { position: sticky; bottom: calc(76px + max(8px, var(--sa-bottom))); z-index: 2; margin: var(--s-5) calc(-1 * var(--s-4)) 0; padding: var(--s-2) var(--s-4); background: var(--bg); border-top: 2px solid var(--ink); } /* a withheld key: a solid 1 px muted edge, never dashed, and its reason in words as the row's first child (c.9) */ .set-keys button:disabled, .set-keys button:disabled:hover { border: 1px solid var(--muted); background: var(--bg); color: var(--muted); } .set-keys .key-why { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-weight: 600; } @media (max-width: 899px) { .set-keys { grid-template-columns: 2fr 3fr; } #set-readback .set-keys.pinned { margin-left: calc(-2 * var(--s-4) - 2px); margin-right: calc(-2 * var(--s-4) - 2px); padding-left: calc(2 * var(--s-4) + 2px); padding-right: calc(2 * var(--s-4) + 2px); } } @media (min-width: 900px) { .set-keys { max-width: 34rem; } .set-keys.pinned { position: static; margin: var(--s-5) 0 0; padding: 0; border-top: 0; } } /* the read-back and the result (D-W7-00-04): pencil, then ink with the stamp's time in the filled box */ #set-readback, #set-result { margin: var(--s-4) 0 0; padding: var(--s-4); max-width: 46rem; } #set-readback h3, #set-result h3 { margin: 0 0 var(--s-2); font-size: var(--step-1); color: inherit; } #set-readback .mark-word, #set-result .mark-word { font-size: var(--step-0); } .set-diff { margin: 0; } .set-diff > div { padding: var(--s-2) 0; border-top: 1px dashed var(--pencil); } #set-result .set-diff > div, #set-readback[data-mark="ink"] .set-diff > div { border-top: 1px solid var(--rule); } .set-diff dt { margin: 0; color: inherit; font-weight: 700; } .set-diff dd { margin: var(--s-1) 0 0; font-size: var(--step-0); font-weight: inherit; } .set-diff .was, .set-diff .will { display: block; } .set-diff .was-word, .set-diff .will-word { display: inline-block; min-width: 4.5rem; font-weight: 700; } #set-readback .set-diff .was { color: var(--ink-2); font-weight: 400; } #set-readback .set-diff .was, #set-readback .set-diff .will { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--s-2); align-items: baseline; } #set-readback .set-diff .was-word, #set-readback .set-diff .will-word { min-width: 0; } .set-effect { margin: var(--s-3) 0 0; font-size: var(--step-0); line-height: 1.5; } .set-by { margin: var(--s-2) 0 0; } .set-refusal { margin: var(--s-2) 0 0; } /* item 02, MF-02-2 (c): one --s-2 gap */ /* ---- item 02, the climb ladder (CONTRACT 02 section 3: ladder.css, dw8-008). Tokens only; no colour literal, no new token, no motion. Every rule is NEW and scoped to a NEW id or class: the built rules of the settings sheet, the inbox card, the board line and the ticket record are not touched. The sheet: three ruled rungs (D-W8-02-03). */ #clb-rungs { list-style: none; margin: var(--s-2) 0 0; padding: 0; max-width: 46rem; border-top: 1px solid var(--rule); } #clb-rungs > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } #clb-rungs .rung-no { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--ink); border-radius: var(--radius-s); font-weight: 800; font-variant-numeric: tabular-nums; } #clb-rungs li.rung-p1 .rung-no { border-style: dashed; } #clb-rungs .rung-who { margin: 0; font-weight: 700; } #clb-rungs .rung-when { margin: var(--s-1) 0 0; color: var(--ink-2); font-variant-numeric: tabular-nums; } #clb-rungs .rung-when b { color: var(--ink); font-weight: 700; } #clb-example { max-width: 46rem; margin: var(--s-3) 0 0; color: var(--ink-2); } #clb-example .tno { font-size: var(--step-0); } #clb-never { max-width: 46rem; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border: 2px solid var(--ink); border-radius: var(--radius-s); font-weight: 600; } /* the inbox: a climbed notice keeps W7-10's card; 02 adds its reason line and its trail (D-W8-02-05, -06) */ #page-inbox .climb-why { margin: var(--s-1) 0 0; font-size: var(--step-0); font-weight: 700; line-height: 1.45; color: var(--ink); } #page-inbox .inbox-card.seen .climb-why { font-weight: 600; color: var(--ink-2); } #page-inbox .climb-trail { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--rule); } #page-inbox .climb-trail > li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: var(--s-2); padding: 6px 0; border-bottom: 1px solid var(--rule); line-height: 1.4; } #page-inbox .climb-trail time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } #page-inbox .climb-trail .trail-what { color: var(--ink-2); } #page-inbox .climb-trail li.trail-you .trail-what { color: var(--ink); font-weight: 700; } #page-inbox .climb-next { margin: var(--s-2) 0 0; color: var(--ink-2); } /* the climb line on the earlier recipient's own notice (D-W8-02-07): one ink line, words first; no colour, no box */ #page-inbox .climbed-on { margin: var(--s-2) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--rule); font-weight: 700; line-height: 1.45; } #page-inbox .climbed-on .climbed-still { display: block; font-weight: 400; color: var(--ink-2); } /* the board: the climbed word in the foot's second row, after the kind of work (D-W8-02-08); never a lane, never a colour, never a reorder (X-10). The step mark is currentColor and never alone (the break mark's grammar). */ #page-board .line-foot .climbed { order: 2; display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } #page-board .line-foot .climbed b { font-weight: 700; } .climb-mark { display: inline-block; flex: none; width: 1em; height: 1em; overflow: visible; } .climb-mark path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; } /* the ticket: the climb stamp keeps the built stamp form (rule 4); 02 adds only its words (D-W8-02-09) */ #page-close .ticket-record .stamp.climb .stamp-what { font-weight: 700; } #page-close .ticket-record .stamp.climb .climb-from { margin: var(--s-1) 0 0; } #page-close .ticket-record .stamp.climb .climb-rungs { margin: var(--s-1) 0 0; color: var(--ink-2); } /* ---- item 09, the end-of-day pack by mail (CONTRACT 09 section 3: mail-pack.css, dw8-008, + MF-09-3's nowrap rule). Tokens only; no colour per state: a failed send is ink words. The mock-only rules (.mock-note, #mlp-body, #mlp-rule: the pack is the server's mail, never a face) are not shipped. */ #mlp-state { max-width: 46rem; margin: var(--s-3) 0 0; } #mlp-state .unlit { margin: 0; } #mlp-next { margin: var(--s-3) 0 0; font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; } #mlp-next .next-word { color: var(--ink-2); font-weight: 600; } #mlp-next[data-none] { color: var(--ink-2); font-weight: 600; font-size: var(--step-0); } #mlp-next .next-why { display: block; font-size: var(--step-0); font-weight: 600; color: var(--ink-2); } /* R-8b-20: the held reason */ /* phase-2 P1-1: wherever the pack's sheet draws the owner's address (the standing sentence, the 409 frame's sentence, the Changes lines) it breaks inside the text, never past a 360 screen; scoped to this sheet, never the chassis' own rules */ #set-sheet[data-setting="mail-pack"] #set-standing, #set-sheet[data-setting="mail-pack"] .set-refusal, #set-sheet[data-setting="mail-pack"] .stamp-what { overflow-wrap: anywhere; } /* phase-2 fix2 NP1-1 (R-8b-22): the register's row 6 draws the address in its says-line; the row's link is a grid (minmax(0, 1fr) auto), so an unbroken address ran out of column 1 under the row's "Open". Scoped to this row only */ #set-register li.set-row[data-setting="mail-pack"] .set-says { overflow-wrap: anywhere; } .set-rows dd .secret-where { display: block; font-weight: 400; color: var(--ink-2); } #mlp-files-edit .file-rows { color: var(--ink-2); font-weight: 400; } #mlp-deliv { max-width: 52rem; margin: var(--s-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); } #mlp-deliv > li { padding: var(--s-3) var(--s-1); border-bottom: 1px solid var(--rule); } #mlp-deliv > li[data-mark] { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; } #mlp-deliv > li[data-mark="pencil"] { border-bottom: 2px dashed var(--pencil); } #mlp-deliv > li[data-mark="ink"] { border-bottom: 3px solid var(--ink); } #mlp-deliv .d-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0; } #mlp-deliv .d-day { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); } #mlp-deliv .d-state { font-weight: 700; } #mlp-deliv li[data-mark="pencil"] .d-state { font-weight: 500; color: var(--pencil); } #mlp-deliv .d-why, #mlp-deliv .d-note { margin: var(--s-1) 0 0; color: var(--ink); font-weight: 400; max-width: 44rem; } #mlp-deliv .d-note { color: var(--ink-2); } #mlp-deliv .d-files { margin: var(--s-1) 0 0; color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; } #mlp-deliv .d-files .not-attached { color: var(--ink); font-weight: 600; } #mlp-deliv .d-tries, #mlp-deliv .d-late { color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; } /* MF-09-3: a file name and a row count never break inside; the line wraps between files only */ #mlp-deliv .d-files .file-name, #mlp-deliv .d-files .file-count, #mlp-files-edit .file-name, .set-rows dd .file-name { white-space: nowrap; } @media (min-width: 900px) { #mlp-deliv > li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--s-4); } #mlp-deliv .d-head { display: contents; } #mlp-deliv .d-day { grid-column: 1; grid-row: 1 / span 4; } #mlp-deliv .d-state, #mlp-deliv .d-why, #mlp-deliv .d-note, #mlp-deliv .d-files { grid-column: 2; } } @media (max-width: 599.98px) { #page-setup[data-drawing="change"] #mlp-next, #page-setup[data-drawing="change"] #mlp-state { display: none; } } /* R-373-1: the read-only retention row of the register (no link, no key): the register row's words, ink, no box */ #set-register .info-row .info { margin: 0; padding: var(--s-3) 0; border-top: 1px solid var(--rule); } #set-register .info-row .info-name { display: block; font-weight: 700; } #set-register .info-row .info-why { color: var(--ink-2); } #set-result .set-recorded { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); } #set-result .set-recorded .mark-word { margin: 0; } #set-result .tno-slot { font-size: var(--step-2); min-height: 1.5em; } #set-readback[aria-busy="true"] .set-keys button { cursor: default; } #set-summary, #set-edit .err, #set-readback { scroll-margin-bottom: 9rem; } /* who may verify (D-W7-05-07): the two rules no setting changes, framed */ #ver-fixed { padding: var(--s-3) var(--s-4); border: 2px solid var(--ink); border-radius: var(--radius-s); max-width: 44rem; } #ver-fixed p { margin: var(--s-1) 0; } #ver-fixed .fixed-head { font-weight: 700; } /* the shift table and its day clock (D-W7-05-08, -09, -21): left = start / 1440, width = (end - start) / 1440 */ #shf-sections { margin: var(--s-4) 0 var(--s-5); } #shf-sections button { flex: 0 1 auto; } #setup-settings-host .shf-clock { margin: var(--s-4) 0 0; max-width: 46rem; } #setup-settings-host .shf-clock figcaption { margin: 0 0 var(--s-2); color: var(--ink-2); font-weight: 600; } .clk { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: var(--s-1); } .clk-scale { grid-column: 2; position: relative; height: 1.6rem; } .clk-scale span { position: absolute; top: 0; left: calc(var(--from, 0) * 100%); transform: translateX(-50%); color: var(--muted); font-size: var(--step--1); } .clk-scale span:first-child { transform: none; } .clk-scale span:last-child { transform: translateX(-100%); } .clk-day { grid-column: 1; align-self: center; font-weight: 700; } .clk-track { grid-column: 2; position: relative; height: 3.65rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px); background-size: 25% 100%; background-repeat: repeat-x; } /* the fraction of the day each piece starts at and spans (setup.js sets --from and --span; no unit in the script) */ .clk-seg, .clk-gap, .clk-over { left: calc(var(--from, 0) * 100%); width: calc(var(--span, 0) * 100%); } .clk-seg, .clk-gap { position: absolute; display: flex; align-items: center; overflow: hidden; padding: 0 var(--s-1); border-radius: var(--radius-s); white-space: nowrap; } .clk-seg { height: 1.45rem; font-weight: 700; } .clk-seg.lane-0 { top: 0.2rem; } .clk-seg.lane-1 { top: 2rem; } .clk-seg[data-mark="ink"] { background: var(--surface-2); color: var(--ink); border: 2px solid var(--ink); border-bottom-width: 2px; } .clk-seg[data-mark="pencil"] { background: var(--bg); color: var(--pencil); font-weight: 500; border: 2px dashed var(--pencil); } .clk-seg.runs-on { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .clk-seg.ran-on { border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .clk-seg .arrow { margin-left: 2px; font-weight: 700; } .clk-gap { top: 0.2rem; height: 3.25rem; background: var(--bg); border: 1px dashed var(--muted); color: var(--muted); font-weight: 600; justify-content: center; } .clk-over { position: absolute; top: 1.68rem; height: 0.28rem; background: none; border: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } .clk-legend { margin: var(--s-3) 0 0; padding: 0; list-style: none; } .clk-legend li { margin: var(--s-1) 0; } .clk-legend b { font-weight: 700; } #shf-table-edit .shift-row:last-of-type { border-bottom: 1px solid var(--rule); } #shf-table-edit .shift-name { max-width: 10rem; font-weight: 700; } /* the reminders' countdown (D-W7-05-10): a mark at (first - d) / first of the line */ #setup-settings-host .rem-countdown { margin: var(--s-4) 0 0; max-width: 46rem; } #setup-settings-host .rem-countdown figcaption { margin: 0 0 var(--s-2); color: var(--ink-2); font-weight: 600; } .cd { position: relative; height: 5.4rem; margin: 0 var(--s-3) 0 var(--s-2); } .cd[data-mark] { border: 0; border-radius: 0; } .cd-line { position: absolute; left: 0; right: 0; top: 1.6rem; border-top: 3px solid var(--ink); } .cd[data-mark="pencil"] .cd-line { border-top: 2px dashed var(--pencil); } .cd-mark, .cd-num, .cd-daily, .cd-daily-word { left: calc(var(--from, 0) * 100%); } /* (first - d) / first, from setup.js */ .cd-mark { position: absolute; top: calc(1.6rem - 0.4rem); width: 0.9rem; height: 0.9rem; margin-left: -0.45rem; border-radius: 50%; background: var(--ink); border: 2px solid var(--ink); } .cd[data-mark="pencil"] .cd-mark { background: var(--bg); border: 2px dashed var(--pencil); } .cd-mark.daily { width: 0.6rem; height: 0.6rem; margin-left: -0.3rem; top: calc(1.6rem - 0.25rem); } .cd-num { position: absolute; top: 2.55rem; transform: translateX(-50%); font-weight: 700; } .cd[data-mark="pencil"] .cd-num { font-weight: 500; } .cd-daily { position: absolute; right: 0; top: 2.55rem; height: 0.6rem; border: 2px solid currentColor; border-top: 0; } .cd-daily-word { position: absolute; top: 3.45rem; transform: translateX(-50%); white-space: nowrap; font-weight: 600; } .cd-end { position: absolute; right: 0; top: 0.4rem; width: 4px; height: 2.6rem; background: var(--ink); } .cd-end-word { position: absolute; right: 0; top: 0.2rem; transform: translateY(-100%); font-weight: 700; white-space: nowrap; } /* above the post, beside it in the tree */ .cd-wrap { padding-top: 1.6rem; } .cd-label { margin: 0 0 var(--s-1); font-weight: 700; } .cd-label.pencil { color: var(--pencil); font-weight: 500; } #rem-upcoming { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } #rem-upcoming li { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } #rem-upcoming .up-date { font-weight: 700; } #rem-upcoming .up-what { margin: var(--s-1) 0 0; } #rem-upcoming .up-what .meta { display: block; margin-top: 2px; } #rem-upcoming .up-next { margin: var(--s-1) 0 0; color: var(--ink-2); } @media (min-width: 900px) { #rem-upcoming li { grid-template-columns: 8rem minmax(0, 1fr) 13rem; column-gap: var(--s-4); } #rem-upcoming .up-what, #rem-upcoming .up-next { margin: 0; } } /* saved groups (D-W7-05-11) */ .grp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .grp-list > li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .grp-list .grp-name { margin: 0; font-size: var(--step-1); font-weight: 700; } .grp-list .grp-count { margin: var(--s-1) 0 0; color: var(--ink-2); font-weight: 600; } .grp-list .grp-members { margin: var(--s-1) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); } .grp-list .grp-members li { white-space: nowrap; } #grp-picker .sec-head { margin: var(--s-4) 0 var(--s-1); color: var(--ink-2); font-weight: 700; } /* the stubs: a solid hairline frame, ink for the reader's refusal (D-W7-05-17) */ #setup-settings-host .stub { border-style: solid; } #setup-settings-host #set-refused.stub { border: 1px solid var(--ink); color: var(--ink); } /* the phone's first screen (D-W7-05-12, -15; MF-05-1): while a change is drawn the parts, the back link, the sentence and its source give way to one fold line and the sentence in force as one clamped line, whole on a tap */ .set-fold, .set-inforce { display: none; } #set-inforce .set-inforce-key { display: block; width: 100%; min-height: 48px; margin: 0; padding: var(--s-1) 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: var(--step-0); font-weight: 600; line-height: 1.4; text-align: left; } /* the clamp sits on the words, not on the key: a button's own box is not clamped by every engine */ #set-inforce .set-inforce-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #set-inforce .set-inforce-key[aria-expanded="true"] .set-inforce-text { display: block; -webkit-line-clamp: unset; overflow: visible; } @media (max-width: 599.98px) { #set-standing { font-size: var(--step-1); } #set-sheet { display: flex; flex-direction: column; } #set-sheet > #shf-sections { order: 1; margin-top: var(--s-4); } #set-sheet > .set-body { order: 2; } #page-setup[data-drawing="change"] #setup-parts, #page-setup[data-drawing="change"] a.back { display: none; } #page-setup[data-drawing="change"] .set-title { margin: 0 0 var(--s-1); font-size: var(--step-1); } #page-setup[data-drawing="change"] #set-standing, #page-setup[data-drawing="change"] #set-source, #page-setup[data-drawing="change"] #set-editing, #page-setup[data-drawing="change"] #shf-sections { display: none; } #page-setup[data-drawing="change"] .set-fold { display: block; margin: 0; color: var(--ink-2); font-weight: 600; } #page-setup[data-drawing="change"] .set-inforce { display: block; margin: var(--s-1) 0 0; } #page-setup[data-drawing="change"] #set-readback { margin-top: var(--s-2); padding: var(--s-3); } #page-setup[data-drawing="change"] #set-readback h3 { font-size: var(--step-0); margin-bottom: var(--s-1); } #page-setup[data-drawing="change"] #set-readback .set-keys.pinned { margin-left: calc(-1 * var(--s-4) - var(--s-3) - 2px); margin-right: calc(-1 * var(--s-4) - var(--s-3) - 2px); padding-left: calc(var(--s-4) + var(--s-3) + 2px); padding-right: calc(var(--s-4) + var(--s-3) + 2px); } #page-setup[data-drawing="change"] #set-edit { margin-top: var(--s-2); } #page-setup[data-drawing="change"] #set-summary { margin: var(--s-2) 0 var(--s-3); } } @media (min-width: 900px) { .set-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: var(--s-7); align-items: start; } } @media print { #setup-parts, .set-keys, #set-change { display: none !important; } } /* ================================================================================================ focus and motion */ :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } /* the ring on bg 18.11 */ .unlit :focus-visible { outline-color: var(--unlit-ink); } /* on the unlit line 10.52 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ================================================================================================ print */ /* The browser prints the page alone: the header, the bar and the rail, the person block and the footer are hidden; black on white. (The printed tally sheet's own print rules are face-desk.css's.) */ @media print { body > header, body > footer, .rail, .who, .tabs, .more-sheet, .queue-box, .no-print, #baseline-err { display: none !important; } html, body { background: #fff; color: #000; } body.signed-in { display: block; padding: 0; background: #fff; } main, body.signed-in > main { max-width: none; margin: 0; padding: 0; } /* item 02: on paper every stage marker and key sample prints black; the stage word says the stage */ .stage-line[data-stage] > li[data-state="current"]::before, #owner-stages > li.holds[data-stage]::before, .stage-sample { background: #000 !important; border-color: #000 !important; } } /* ============================================================================================ the code to scan (wave 10 item 01, the foundation's component) The symbol's frame and its measures, whole CSS px per module (QR-SIZING): 6 px, so 246 px for version 4 (41 modules with the 4-module quiet zone) and 270 px for version 5 (45); a face may draw a larger module, never a smaller one, never restyles the frame, the colours or the quiet zone. Ink on paper, never inverted, coloured or given a logo. Item 02 adopts this block as it is. */ .qr-sym { display: inline-block; margin: 0; padding: 0; line-height: 0; background: var(--bg); border: 2px dashed var(--pencil); border-radius: var(--radius-s); } .qr-sym svg { display: block; width: 246px; height: 246px; shape-rendering: crispEdges; } .qr-sym[data-modules="45"] svg { width: 270px; height: 270px; } .qr-sym svg rect { fill: var(--bg); } .qr-sym svg path { fill: var(--ink); } @media print { .qr-sym, .bell-code { display: none !important; } } /* ============================================================================================ the raise flow's wave-12 faces (ADR-054 S54.9) Say it again (one key per voice step), the recogniser's own line, the read-back of a ranked pick, Other / General and the blocked offer. Rules only, appended (no new file under src/txp/app/); the key's place under a thumb is the design unit's pass (D-67c), these rules keep it a plain wide key below the words it follows. */ #page-raise .key.say-again { display: block; width: 100%; margin: var(--s-2) 0 var(--s-3); } #page-raise .handover .recog { margin-top: var(--s-1); color: var(--ink-2); } #page-raise .handover .gen-offer { margin-top: var(--s-2); color: var(--ink); font-weight: 600; } #page-raise .handover #raise-general { display: block; width: 100%; margin: var(--s-2) 0 0; } #page-raise .handover #raise-general[hidden], #page-raise .key.say-again[hidden], #page-raise .offer[hidden] { display: none; } #page-raise .heard.match { margin: 0 0 var(--s-2); color: var(--ink); font-weight: 600; } #page-raise .machines li.general { margin-top: var(--s-2); } #page-raise .machines li.general button { border-style: dashed; } #page-raise .offer { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--radius); } #page-raise .offer p { margin: 0; color: var(--ink); font-weight: 600; } #page-raise .offer .key.wide { display: block; width: 100%; margin: var(--s-2) 0 0; }