/* The web surface's one stylesheet (PRD-18 FR-17, first exemption: `style-src 'self'`).
   Served as a real resource at /app.css by horizon-serverd — never inlined, because the policy
   admits no inline style and that is the property this file exists to keep. Tokens and component
   values are ADR-027's Daylight set as the till renders them (apps/horizon-desktop/src/ui.rs),
   carried here from docs/design/back-office/_shared.css, with PRD-19 §8's changes for the web:
   muted text, filled accents and error text darkened and a control border added for FR-16's
   contrast, the type, spacing and radius scales, and FR-17's tap size (`--hz-target`). The type scale and the
   controls' heights are FR-28's, the boards' own, in `rem`, so they move with the browser's own text size,
   which no rule here sets: a page title 28 px, a card heading 16, body text 14, secondary text 13, and 15 for
   a page's lead line and a field's own words; a field and a secondary button 44 high, a primary button 48, a
   chip and a row's own action 36, a menu item 40, each never under the tap size, which is a floor in the screen's
   own pixels (WCAG's) and so stays `px`, as the spacing and radii do. The spacing of the page's frame, its
   panels, tables and menu is the boards' own figure where they draw one (the look pass's B4, step 1, part 2):
   off the 4-px steps (2, 6, 10, 14, 18, 20), so written in `px` beside the rule it spaces. */
:root{--hz-bg:#f6f4ef;--hz-surface:#ffffff;--hz-subtle:#ece8df;--hz-ink:#23211c;--hz-muted:#626057;--hz-border:#e3dfd4;--hz-control:#86827a;--hz-accent:#2f8f5b;--hz-accent-strong:#256f47;--hz-accent-soft:#e3efe7;--hz-accent-ink:#1b5536;--hz-on-accent:#ffffff;--hz-online:#2f8f5b;--hz-offline:#b7791f;--hz-off:#9aa1b0;--hz-error:#9b2c20;--hz-notice-bg:#f6eccf;--hz-notice-ink:#7a5c12;--hz-notice-border:#ecd9a3;--hz-error-bg:#fbeae7;--hz-error-ink:#7d2419;--hz-error-border:#e6b9b2;--hz-info-bg:#e7eef8;--hz-info-ink:#24466f;--hz-space-1:4px;--hz-space-2:8px;--hz-space-3:12px;--hz-space-4:16px;--hz-space-5:24px;--hz-space-6:32px;--hz-text-xs:.75rem;--hz-text-sub:.8125rem;--hz-text-sm:.875rem;--hz-text-lead:.9375rem;--hz-text-md:1rem;--hz-text-lg:1.125rem;--hz-text-xl:1.375rem;--hz-text-title:1.75rem;--hz-field:2.75rem;--hz-primary:3rem;--hz-chip:2.25rem;--hz-item:2.5rem;--hz-radius-sm:4px;--hz-radius-md:6px;--hz-radius:8px;--hz-radius-lg:10px;--hz-radius-pill:999px;--hz-target:24px}
/* ADR-027's typeface rules 1-5: the three files the server serves at /fonts/, each name carrying its bytes' digest
   (so the browser keeps it a year), Hanken Grotesk as one variable face so 650 stays 650, and swap so the
   words show in the system face while a face loads. Each face has the system stack behind it. */
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-515697e2.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-400-ba204497.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-600-6a825b48.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
*{box-sizing:border-box;font-family:"Hanken Grotesk",system-ui,sans-serif}
/* A code (a SKU or part number, a receipt's number and series, an invoice, PO or DR number, a payment
   reference) is in Plex Mono and wraps anywhere, so a long SKU breaks on a phone where it has no space to
   break at. A receipt is all Plex Mono but its business name, the heading and its children. */
.code{font-family:"IBM Plex Mono",ui-monospace,monospace;overflow-wrap:anywhere}
.receipt,.receipt *{font-family:"IBM Plex Mono",ui-monospace,monospace}
.receipt h1,.receipt h1 *{font-family:"Hanken Grotesk",system-ui,sans-serif}
body{margin:0;background:var(--hz-bg);color:var(--hz-ink)}
/* Running text inherits FR-28's body figure in the main column. `.muted` changes only its colour;
   the lead line, labels, tables, notices and secondary lines keep their own figures. Printed papers
   (FR-20) and Home's start cards and grid keep their prior inherited size and their own role rules. */
main{font-size:var(--hz-text-sm)}
article,.start,.homegrid{font-size:1rem}
/* A link that stands alone is underlined, and darkens under the pointer, as the boards draw one (*Count and close*,
   *Sales reports*, *Set the limit*; the look pass's part 7). A link drawn as a control (a menu item, a button, a
   waiting row, the sale bar, a tab, a filter pill) is not, and keeps the underline it had under the pointer. */
a{color:var(--hz-accent-strong);text-decoration:underline}a:hover{color:var(--hz-accent-ink)}
:is(.nav .item,a.go,.seeitems,a.waitrow,.salebar>a,.tabbar>a,.showpills>a,td.rowacts>a.next,.bynumber>a.open):not(:hover){text-decoration:none}
/* A standalone action link is a tap target (FR-17). CSS cannot see text beside a link, so these are
   the places that hold links alone by construction: a cell's only link, and a toolbar's, which is
   how a template marks a line holding actions alone (PRD-19 §8) — a row of links only a separator
   joins among them (`Way bill · Signed papers`, `RF-3668`: a dot is no sentence's words); a link
   alone in a plain paragraph is a sentence's. */
.rowacts a,.spacer a,td>a:only-child,form.search>a,.panel>a,li>a,.toolbar>a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hz-target);min-width:var(--hz-target)}
:focus-visible{outline:2px solid var(--hz-accent-strong);outline-offset:2px}
/* The menu's panel runs the window's whole height, as the *Main* board draws it, on a window taller than 880 too
   (the look pass's walk, minor note 4); paper keeps 880 (below), and the switches fold it. */
.shell{display:flex;min-height:max(880px,100svh)}
/* The menu as its boards draw it: 20 by 14 round it and 18 between its parts, its items 40 high (`--hz-item`) with
   2 between them, 10 inside each, and a group's items indented to where an icon's item's word starts. */
.side{width:224px;flex:none;background:var(--hz-surface);border-right:1px solid var(--hz-border);padding:20px 14px;display:flex;flex-direction:column;gap:18px}
/* The menu's top as drawn: the business's two letters on a 34 px square of the accent with an 8 corner, 10 beside
   its name at 15, and on a phone the phone board's 30 px square with a 7 corner and its letters at 13.
   A long name wraps inside the menu rather than past it. */
.brand{display:flex;align-items:center;gap:10px;padding:var(--hz-space-1) var(--hz-space-2)}
.brand b{min-width:0;font-size:var(--hz-text-lead);letter-spacing:-.01em;overflow-wrap:anywhere}
.mark{flex:none;display:flex;align-items:center;justify-content:center;width:2.125rem;height:2.125rem;border-radius:8px;background:var(--hz-accent-strong);color:var(--hz-on-accent);font-weight:700;font-size:var(--hz-text-lead)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .item{display:flex;align-items:center;gap:10px;min-height:max(var(--hz-target),var(--hz-item));padding:0 10px;border-radius:var(--hz-radius-md);font-size:var(--hz-text-sm);color:var(--hz-ink);border:1px solid transparent}
.nav .item.active{background:var(--hz-accent-strong);border-color:var(--hz-accent-strong);color:var(--hz-on-accent);font-weight:600}
.nav .item.rest{background:var(--hz-subtle)}
/* The menu's groups (the UI/UX plan's decision 7, its mockup's sidebar): a group's label, which is
   not a link; its items indented under it without icons, each word starting where an icon's item's
   word does; and Settings and Help after a rule at the menu's foot. The label keeps its sentence
   case (PRD-19 FR-3), though the mockup draws it in capitals. */
.navlabel{display:flex;align-items:center;gap:10px;min-height:36px;margin:var(--hz-space-2) 0 0;padding:0 10px;font-size:var(--hz-text-xs);font-weight:700;letter-spacing:.02em;color:var(--hz-muted)}
.navsub{display:flex;flex-direction:column;gap:2px}
.navsub .item{padding-left:calc(10px * 2 + 18px)}
.navsub+.item{margin-top:var(--hz-space-2)}
.navfoot{display:flex;flex-direction:column;gap:2px;margin-top:var(--hz-space-2);padding-top:14px;border-top:1px solid var(--hz-border)}
/* Who is signed in, above Sign out as drawn: the email at 13 over the roles at 12, 2 apart, 10 in from the side
   as the sign-outs are; a long email breaks inside the menu rather than past it. */
.who{display:flex;flex-direction:column;gap:2px;margin:0;padding:0 10px;font-size:var(--hz-text-xs);color:var(--hz-muted)}
.who b{color:var(--hz-ink);font-size:var(--hz-text-sub);font-weight:600;overflow-wrap:anywhere}
.main{flex:1;padding:32px 40px 48px;min-width:0}
/* The page's column (PRD-19 FR-26): a cap declared on the wrapper every page's own words sit in, the shell's
   `main`'s one child or a bare page's `main`, and centred in the space beside the menu. Its board's cap, or
   1160 px where no board is drawn: Home's board 1120, the cash difference's review 1040. In `rem`, so it grows
   with the browser's own text size as the switches below do. */
.col{width:100%;max-width:72.5rem;margin-inline:auto}
/* A bare page's column (sign-in, a refusal, the receipt, the way bill, the shortage report) keeps the shell's gutter:
   40 a side as `.main`'s padding, and 16 below the menu switch, so its words never meet the window's edge. Past
   1240 px the cap's own centring leaves more, so nothing moves there. A width, not a padding, so the cap stays the
   words' (FR-26); paper keeps its own (FR-20, RF-3685). */
main.col{width:calc(100% - 80px)}
.col.home{max-width:70rem}
.col.review{max-width:65rem}
.main>.col{display:flex;flex-direction:column;gap:20px}
.head{display:flex;align-items:flex-end;gap:var(--hz-space-4)}
/* A bare page's title, including sign-in and refusal, takes the same figure, weight and spacing as a headed page's.
   Printed papers keep their own titles. `:where` lets the component rules retain their precedence. */
:where(main) h1:where(:not(article *)){font-size:var(--hz-text-title);font-weight:700;letter-spacing:-.015em}
/* The title at the boards' 700 and -.015em; the lead line at 72ch, the narrowest measure that keeps each board's
   lead on its own line count in Chromium, where 1ch is 8 px (the POS's one line of 563 px, the cash differences'
   two; Firefox and WebKit draw 1ch 8.4 px, and the same counts; the look pass's part 7). A title can hold a
   product's or a customer's name, so any word: no item of the head is wider than the head, and the title's
   block can shrink to share a row with its links (`RF-3714`), so a word wider than the title's available line
   breaks (`RF-3708`: at twice the browser's text size *Components* ran past a 320 px phone's edge).
   The other items give up their wrapping room first (`RF-3718`): equal shrink factors break a 40- or
   44-letter word even when it fits beside the wrapped links. 1000 still takes a fraction of a pixel
   from that word; 1000000 keeps the title's share below layout precision. Its own shrink stays 1,
   so once the links reach their minimum it still breaks a word that cannot fit. `break-word` keeps
   those breaks out of the word's narrowest width; `anywhere` would count them.
   The cap and sibling shrink weigh nothing and the title block's minimum only an element, so an item's
   own class rules keep their sizing precedence. The title block takes the row's free space, so the head's
   links and its button sit at its end, as the twelve boards whose title block is `flex: 1` draw them
   (`Orders.dc.html`, `Order.dc.html`; codex's minor note on `2fbd1197`: *New dealer order* stood just past
   the lead line); grow alone, not the boards' zero basis, which would size the links first and squeeze the
   title the shrink factors above protect. */
:where(.head>*){max-width:100%}
:where(.head)>div:where(:first-child){min-width:0;flex-grow:1}
:where(.head)>:where(:not(:first-child)){flex-shrink:1000000}
.head h1{margin:0;font-size:var(--hz-text-title);font-weight:700;letter-spacing:-.015em;overflow-wrap:break-word}
.head .sub{margin:6px 0 0;font-size:var(--hz-text-lead);color:var(--hz-muted);max-width:72ch}
/* A section's or a panel's heading is FR-28's card heading, as every board draws it: the browser's own 24 px drew
   it next to the page's 28 px title (the look pass's inverted scale). Its margins stay the browser's, in `em`,
   so they shrink with it; the boards' spacing is the look pass's next part. Home's start cards and grid set their own. */
h2{font-size:var(--hz-text-md);font-weight:700}
/* Subheadings outside a card take the section figure too, except inside a printed paper. */
:where(main) h3:where(:not(article *)),:where(main) h4:where(:not(article *)){font-size:var(--hz-text-md)}
/* A head's links wrap onto a second line rather than squeeze: a link's tap size replaces its automatic
   minimum, so a squeezed row drew *Statement* narrower than its word, over the `·` beside it (`RF-3640`). */
.spacer{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--hz-space-2);align-items:center}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--hz-space-2);align-items:center}
.panel{background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg);padding:20px var(--hz-space-5)}
button{background:var(--hz-subtle);color:var(--hz-ink);border:1px solid var(--hz-control);border-radius:var(--hz-radius-md);min-height:max(var(--hz-target),var(--hz-field));min-width:var(--hz-target);padding:var(--hz-space-1) var(--hz-space-3);cursor:pointer;font-size:var(--hz-text-sm)}
button.primary{background:var(--hz-accent-strong);border-color:var(--hz-accent-strong);color:var(--hz-on-accent);min-height:max(var(--hz-target),var(--hz-primary))}
/* The button kinds (PRD-19 §8): `primary`, the page's main act; the unclassed secondary; `quiet`, with
   `subtle` its alias (no template writes it since Phase 1 step 4); `danger`, an act the back office cannot undo, in the
   error colour's words and edge, so it does not look like the others (the UI/UX plan's audit item 7). */
button.quiet,button.subtle{background:transparent;color:var(--hz-muted);padding:var(--hz-space-1) var(--hz-space-2)}
button.danger{color:var(--hz-error);border-color:var(--hz-error)}
/* A chip (FR-28's 36, ADR-077 §9.1's categories): a capsule on the surface in 13 px words; the one pressed is
   the soft accent with the strong accent's edge and words in the accent's ink, as the boards draw it. A sign-out
   is the boards' *Sign out*: 36 high, on the surface in 13 px words, in the ink, the danger one keeping its colour.
   Before the disabled look, so it wins at their specificity. */
button.chip{min-height:max(var(--hz-target),var(--hz-chip));padding:0 14px;border-radius:var(--hz-radius-pill);background:var(--hz-surface);font-size:var(--hz-text-sub)}
button.chip[aria-pressed=true]{border-color:var(--hz-accent-strong);background:var(--hz-accent-soft);color:var(--hz-accent-ink);font-weight:600}
/* A choice (the look pass, step (2), part 3: the payment step's quick amounts): a secondary button on the surface,
   its figures in even widths; the one pressed in the pressed chip's colours, as the board draws it. */
button.choice{background:var(--hz-surface);font-variant-numeric:tabular-nums}
button.choice[aria-pressed=true]{border-color:var(--hz-accent-strong);background:var(--hz-accent-soft);color:var(--hz-accent-ink);font-weight:600}
button.signout{min-height:max(var(--hz-target),var(--hz-chip));padding:0 var(--hz-space-3);margin-inline:10px;border-radius:var(--hz-radius-md);background:var(--hz-surface);color:var(--hz-ink);font-size:var(--hz-text-sub)}
button.signout.danger{color:var(--hz-error)}
/* A disabled button of any kind is drawn unavailable: no fill, muted words and a refusing pointer, so a
   POS line's *One less* at quantity 1 is not a twin of the *+* beside it and a main act that cannot run
   yet is not filled with the main act's green (`RF-3516`). Its edge stays its kind's: no rule reaching a
   button declares a border property but its kind's colour (FR-16's edge, held by the stylesheet's test).
   After the kinds, so it wins at their specificity, and named again with the two that weigh more, a pressed
   chip and a danger sign-out, which kept their soft fill and red words when disabled (codex, 2026-10-21). */
button:disabled,button.chip[aria-pressed=true]:disabled,button.choice[aria-pressed=true]:disabled,button.signout.danger:disabled{background:transparent;color:var(--hz-muted);cursor:not-allowed}
/* A field is as wide as what it holds, at most, and narrower when its space is (PRD-19 FR-27): a choice, a
   person's name, an email, a phone number or a reference medium, 340 px (the rule below); a figure or a code
   short, 146; a product's name or an address long, 584; a search, a note or a reason its form's or panel's
   width; and a date or a time the width its browser draws, held at the start of the column label it sits in,
   which would stretch it to the label's width (`RF-3642`), and narrower when its space is. What it holds is
   read from its keyboard, its type and the name the server reads it by, which the census reads apart, never
   from this sheet. */
input,select,textarea{background:var(--hz-surface);color:var(--hz-ink);border:1px solid var(--hz-control);border-radius:var(--hz-radius-md);padding:var(--hz-space-1) var(--hz-space-2);font-size:var(--hz-text-lead);min-width:0;width:100%;max-width:21.25rem}
input:is([inputmode=decimal],[inputmode=numeric],[name=code],[name=sku],[name=plate]){max-width:9.125rem}
input:is([name=name],[name=address]){max-width:36.5rem}
input:is([type=search],[name=note],[name=reason],[name=line_reason],[name=amount_basis],[name=q],[name=find]),textarea{max-width:none}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]){width:auto;max-width:100%;align-self:flex-start}
input:not([type=checkbox],[type=radio]),select{min-height:max(var(--hz-target),var(--hz-field))}
input[type=checkbox],input[type=radio]{width:auto}
label{font-size:var(--hz-text-sm);color:var(--hz-muted);display:flex;flex-direction:column;gap:var(--hz-space-1)}
/* A checkbox or radio sits beside its own words (PRD-19 §8, never stretched): its label is a row,
   centred, as tall as the tap size, since the whole label is what a finger presses. */
label:has(>input[type=checkbox]),label:has(>input[type=radio]){flex-direction:row;align-items:center;gap:var(--hz-space-2);min-height:var(--hz-target)}
label b{color:var(--hz-ink);font-size:var(--hz-text-sm);font-weight:600}
table{width:100%;border-collapse:collapse;margin:var(--hz-space-2) 0 0}
th,td{text-align:left;padding:var(--hz-space-1) var(--hz-space-2);border-bottom:1px solid var(--hz-border);font-size:var(--hz-text-sm)}
th{font-size:var(--hz-text-xs);color:var(--hz-muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding-bottom:var(--hz-space-2)}
td{height:44px}
/* A row group's heading (a signer's role on the way bill) heads the row beneath it, so it draws no rule of its own,
   and the room above it parts one signer from the last. */
th[scope=rowgroup]{padding-top:var(--hz-space-3);padding-bottom:0;border-bottom:0}
/* A signer's name on the way bill breaks inside a word only when its cell cannot hold it whole: measured over
   four lengths of name in six windows, it broke exactly where the page would otherwise have run past its edge
   (RF-3684, RF-3685). */
.signs td{overflow-wrap:anywhere}
/* A page's table is spaced as the boards draw it, 10 by 12, its first column at its region's start and its last at
   its end; a printed paper's (FR-20) keeps the steps above. */
:where(main) th:where(:not(article *)),:where(main) td:where(:not(article *)){padding:10px 12px}
:where(main) th:first-child:where(:not(article *)),:where(main) td:first-child:where(:not(article *)){padding-left:0}
:where(main) th:last-child:where(:not(article *)),:where(main) td:last-child:where(:not(article *)){padding-right:0}
/* The cash differences' board (*CashReview*, the look pass's part 5): the way back as its breadcrumb, 14 with its
   links semi-bold, each a tap target; the head wrapping, its words at least 280 wide beside the limit's box, 10 by
   14 inside an 8-cornered edge; each list's heading at 17 with its count in the notice's colours; and a close's
   card, 22 by 24 inside a 10-cornered edge and its parts 18 apart: its title at 19, its chip, its five figures in
   boxes of the page's own ground, 20 bold, the difference in the error's tint, the reason typed at the close at
   15 on that ground, and the review's form under a rule, its box 88 high in every field's own edge and inside, its
   button 16 bold. The reviewed list
   is the board's table in a card, 4 by 20 inside it, its rows ruled above, each with its other figures under it, their
   disclosure's line as wide as its words so a phone's sideways box shows it whole. */
.crumbs{margin:0;font-size:var(--hz-text-sm)}
:where(.crumbs) a{display:inline-flex;align-items:center;min-height:var(--hz-target);font-weight:600}
.crumbs span{color:var(--hz-muted)}
.reviewhead{flex-wrap:wrap}
.reviewhead>div{flex:1 1 17.5rem}
.limitbox{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--hz-border);border-radius:var(--hz-radius);background:var(--hz-surface);font-size:var(--hz-text-sm)}
.limitbox b{font-variant-numeric:tabular-nums}
:where(.limitbox) a{display:inline-flex;align-items:center;min-height:var(--hz-target);font-weight:600}
.closes{display:flex;flex-direction:column;gap:20px}
.closes.past{gap:var(--hz-space-2)}
.closes>h2{margin:0;display:flex;align-items:center;gap:10px;font-size:1.0625rem;font-weight:700}
.closes>h2>.count,.closechip{border-radius:var(--hz-radius-pill);background:var(--hz-notice-bg);color:var(--hz-notice-ink);border:1px solid var(--hz-notice-border)}
.closes>h2>.count{padding:1px var(--hz-space-2);font-size:var(--hz-text-xs)}
.closes>.panel>p{margin:0}
.close{background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg);padding:22px var(--hz-space-5);display:flex;flex-direction:column;gap:18px}
.closehead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.closehead h2{margin:0;font-size:1.1875rem;font-weight:700;overflow-wrap:anywhere}
.closechip{padding:3px 10px;font-size:var(--hz-text-sub);font-weight:700}
.closewho{font-size:var(--hz-text-sm);color:var(--hz-muted);overflow-wrap:anywhere}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--hz-space-3);margin:0}
.tile{padding:14px var(--hz-space-4);border-radius:var(--hz-radius);background:var(--hz-bg);display:flex;flex-direction:column;gap:var(--hz-space-1)}
.tiles dt{font-size:var(--hz-text-sub);color:var(--hz-muted)}
.tiles dd{margin:0;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile.off{background:var(--hz-error-bg);border:1px solid var(--hz-error-border);color:var(--hz-error-ink)}
.tile.off dt{color:inherit}
/* Payments by account (ADR-079 §9.2, design call 10; drawn to `PaymentsByAccount` in part 7b-2): its three figures a
   row, 14 apart, each a white card, edged, its corner 10, 16 by 18 inside, the figure 26 at -.01em over its sentence
   at 12; the days' form, its boxes and *Show* on one line and the dated-by sentence beside them, as the call puts it,
   13 and muted at 1.45 with its lead in the ink, wrapping under them where it would be under 20 rem; the table's first
   column, an account's name, in the page's face rather than a column heading's; each group's heading 14 and bold in
   the ink, in sentence case, 16 above it and 8 below, its start the names' own, under a 2 px rule in the ink, as
   *Every account*'s row is; and each row's net bold. The
   cards are named by their element, which weighs less than `.tile.off`, so a tile marked off keeps its error fill. */
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.paytotals{gap:14px}
.paytotals>div{padding:var(--hz-space-4) 18px;background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg)}
.paytotals dd{font-size:1.625rem;letter-spacing:-.01em}
.tiles dd.tilenote{font-size:var(--hz-text-xs);font-weight:400;letter-spacing:0;color:var(--hz-muted)}
.days{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hz-space-3) var(--hz-space-4)}
.days>p{flex:1 1 20rem;margin:0;font-size:var(--hz-text-sub);line-height:1.45;color:var(--hz-muted)}
.days>p>b{color:var(--hz-ink)}
.byaccount th[scope=row]{font-size:var(--hz-text-sm);color:var(--hz-ink);font-weight:400;letter-spacing:0;text-transform:none;vertical-align:top}
.byaccount th[scope=rowgroup]{padding-top:var(--hz-space-4);padding-bottom:var(--hz-space-2);border-top:2px solid var(--hz-ink);font-size:var(--hz-text-sm);color:var(--hz-ink);letter-spacing:0;text-transform:none}
.byaccount>tbody>tr>td.num:last-child{font-weight:700}
.byaccount tr.every>th,.byaccount tr.every>td{font-weight:700;border-top:2px solid var(--hz-ink)}
/* A register's payment under a label this server does not have is marked in the notice colours, as both boards
   draw it. The phone's cards (part 6b-2) are a phone's alone: shown below the phone switch, never on paper,
   where the table keeps every fact (FR-20). */
.pill.unlabelled{background:var(--hz-notice-bg);color:var(--hz-notice-ink);border-color:var(--hz-notice-border)}
/* The cards as the phone's board draws them, written here and not in the phone's block, since FR-28's scale is
   never the window's: drawn nowhere else, as they are shown nowhere else. Each group's heading 14 and bold over its
   cards, 12 apart; a card 12 by 14 inside, the corner 10, its parts 6 apart: the name 15 and bold with a retired
   account's pill beside it, and the net level with it at 17; the account's details 13 and muted; then each figure
   the account has, its heading and count beside it, 13, a rule over the first. Its payments open inside the card,
   edged and on the page's ground, where the board draws a lighter tint no token holds: each 8 above and below and
   ruled, its time and its amount on one line, then what it was, a label it lacks, and its reference, 13. */
.bycards{display:none;flex-direction:column;gap:var(--hz-space-3)}
.bycards>h3{margin:6px 0 0;font-size:var(--hz-text-sm);font-weight:700}
.bycards>p{margin:-4px 0 0;font-size:var(--hz-text-sub);line-height:1.45}
.accountcards{display:flex;flex-direction:column;gap:var(--hz-space-3);margin:0;padding:0;list-style:none}
.accountcard{display:flex;flex-direction:column;gap:6px;padding:var(--hz-space-3) 14px;background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg)}
.accountcard p{margin:0}
.cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cardname{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;font-size:var(--hz-text-lead);font-weight:700;overflow-wrap:anywhere}
.cardnet{font-size:1.0625rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.accountcard>p.muted{font-size:var(--hz-text-sub)}
.cardfigures{margin:0;font-size:var(--hz-text-sub)}
.cardfigures>div{display:flex;justify-content:space-between;gap:var(--hz-space-2)}
.cardfigures>div:first-child{padding-top:6px;border-top:1px solid var(--hz-subtle)}
.cardfigures dd{margin:0;font-variant-numeric:tabular-nums}
.accountcard details{margin-top:var(--hz-space-1);border:1px solid var(--hz-border);border-radius:var(--hz-radius);background:var(--hz-bg)}
.accountcard summary{min-height:var(--hz-target);padding:var(--hz-space-3);cursor:pointer;font-size:var(--hz-text-sm);font-weight:600;color:var(--hz-accent-strong)}
.cardpayments{margin:0;padding:0 var(--hz-space-3) 6px;list-style:none}
.cardpayments>li{display:flex;flex-direction:column;gap:3px;padding:var(--hz-space-2) 0;border-top:1px solid var(--hz-subtle);font-size:var(--hz-text-sub);line-height:1.4}
.paidline{display:flex;justify-content:space-between;gap:var(--hz-space-2)}
.paidline>b{font-variant-numeric:tabular-nums}
.accountcard details>p{padding:0 var(--hz-space-3) var(--hz-space-2);font-size:var(--hz-text-sub);color:var(--hz-muted)}
.reason{display:flex;flex-direction:column;gap:6px}
.reason h3{margin:0;font-size:var(--hz-text-sm);font-weight:700}
.reason>blockquote,.reason>p{margin:0;font-size:var(--hz-text-lead);line-height:1.5;overflow-wrap:anywhere}
.reason>blockquote{padding:var(--hz-space-3) var(--hz-space-4);border-radius:var(--hz-radius);background:var(--hz-bg)}
.reason>p{color:var(--hz-muted)}
.closelink{margin:0}
:where(.closelink)>a{font-weight:600}
.closereview{border-top:1px solid var(--hz-border);padding-top:18px;display:flex;flex-direction:column;gap:var(--hz-space-4);margin:0}
.closereview h3{margin:0;font-size:var(--hz-text-md);font-weight:700}
.closereview>p{margin:0;font-size:var(--hz-text-sm);line-height:1.5;color:var(--hz-muted);overflow-wrap:anywhere}
.closereview>p b{color:var(--hz-ink)}
.closereview label{gap:6px}
.closereview textarea{min-height:88px;line-height:1.5;resize:vertical}
.closeacts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-3) 18px}
.closeacts>.primary{padding:0 22px;border-radius:var(--hz-radius);font-size:var(--hz-text-md);font-weight:700}
.reviewed{background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg);padding:var(--hz-space-1) 20px}
/* The reviewed table's rules weigh no more than a bare cell's, so a printed page's table keeps its own steps. */
:where(.reviewed>.tablewrap)>table{margin:0}
/* The board's 640 at every width, weighing more than the five and seven columns' floors below the menu switch. */
.closes>.reviewed>.tablewrap>table:not(.entry){min-width:40rem}
:where(.reviewed>.tablewrap>table) th,:where(.reviewed>.tablewrap>table) td{padding:var(--hz-space-3) var(--hz-space-3) var(--hz-space-3) 0;border-bottom:0}
:where(.reviewed>.tablewrap>table) th{padding-bottom:var(--hz-space-2)}
:where(.reviewed>.tablewrap>table) tr:not(.closemore)>td{border-top:1px solid var(--hz-border)}
:where(.reviewed>.tablewrap>table td.when)>a{display:inline-flex;align-items:center;min-height:var(--hz-target);font-weight:600}
:where(.reviewed>.tablewrap>table) .closemore>td{height:auto;padding-top:0}
.closemore summary{width:fit-content;min-height:var(--hz-target);padding-block:var(--hz-space-1);cursor:pointer;font-size:var(--hz-text-sub);font-weight:600;color:var(--hz-accent-strong)}
.closemore details>p{margin:var(--hz-space-1) 0 0;font-size:var(--hz-text-sub);color:var(--hz-muted);overflow-wrap:anywhere}
.closemore .facts dd{overflow-wrap:anywhere}
/* An entry table keeps the steps' 4 by 8: a row of fields widens by its cells' padding once a column, and the
   acceptance's twelve columns, in the boards' 10 by 12, scrolled at the entry switch's 1280 (952 px in 926). */
table.entry th,table.entry td{padding:var(--hz-space-1) var(--hz-space-2)}
/* One of eleven columns or more takes 4 a side: at the entry switch's 1280, in the faces' fallback (the first
   paint under `swap`), the widest of eleven, twelve and thirteen columns stood 43, 22 and 2 px inside their 926 px
   region, and the signed paper's refusal, its thirteenth column *Check this line*, 56 px past it, scrolling with
   no note (`RF-3687`). At 4 a side the widest is that refusal, 878 px there. As heavy as the stacked cells' rule,
   which comes later and so still wins below the switch; paper's rule below gives the steps back, since Phase 1's
   print rule (step 9) owns these forms there. */
table.entry:where(:has(tr>:nth-child(11))) th,table.entry:where(:has(tr>:nth-child(11))) td{padding:var(--hz-space-1)}
/* An entry table's choice is as wide as its longest option, at most a medium field (PRD-19 FR-27): at its
   form's `width:100%` a cell's select gave its column the least room, and a place's name was cut at the
   arrow on a computer too (part 7b). Stacked, below 1280, it takes its card's width again. On paper it keeps its
   own since Phase 1 step 9 dropped the menu there: beside the printed menu its own width put the send-out page's
   table 35 px past the page (part 7b's census), and its cell's then cut the place's name (`RF-3682`). */
table.entry select{width:auto}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.when{white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:var(--hz-space-2);font-size:var(--hz-text-xs);font-weight:700;padding:2px var(--hz-space-2);border-radius:var(--hz-radius-pill);border:1px solid var(--hz-border);background:var(--hz-subtle);color:var(--hz-muted)}
.pill.on{color:var(--hz-ink)}
/* A menu item's count is a badge in words, *1 to review*, in the notice colours, as the boards draw it (FR-14; the
   look pass's part 7). It is never broken: at the item's end where the line holds it, as in the phone's menu, and
   whole under the item's word where it does not, as in the 224 px menu, where neither the board's nor ours holds
   *Cash drawer* and the badge on one line (`RF-3486`: each broke onto two lines). Nothing stops the word or the
   badge wrapping: under a larger text size the word's line is the item's, and the word must shrink to it (with
   `flex:1 0 auto` and the badge `nowrap`, *Cash drawer* spilled 14 px past its item at 32 px). */
.nav .item.withcount{flex-wrap:wrap;row-gap:2px;padding-top:var(--hz-space-1);padding-bottom:var(--hz-space-1)}
.nav .item.withcount>.itemword{flex:auto}
.nav .item .pill{background:var(--hz-notice-bg);color:var(--hz-notice-ink);border-color:var(--hz-notice-border)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--hz-off)}
.dot.on{background:var(--hz-online)}
.muted{color:var(--hz-muted)}
/* Words a screen reader hears and the page does not show, such as a table's heading over a column of links: one
   clipped pixel out of the flow, as the boards hide them, kept on one line so the reader hears them whole. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.notice{background:var(--hz-notice-bg);color:var(--hz-notice-ink);border:1px solid var(--hz-notice-border);border-radius:var(--hz-radius);padding:var(--hz-space-2) var(--hz-space-3);font-size:var(--hz-text-sm)}
/* The check before retiring an account (`RetireAccount`'s board; the payment-accounts plan's part 7b-3): the account's
   details 14 and muted under its label; what retiring does under a rule in the border's colour, 14 below it, its
   heading 15 and its list 8 apart, 14 with a line height of 1.5; and the warning in the error colours, 12 by 14
   inside, since what it warns of cannot be undone, where every other notice is the amber of something to know. */
.accountline{color:var(--hz-muted);font-size:var(--hz-text-sm)}
.retiring{display:flex;flex-direction:column;gap:var(--hz-space-2);padding-top:14px;border-top:1px solid var(--hz-border)}
.retiring>h3,.retiring>ul{margin:0}
.retiring>h3{font-size:var(--hz-text-lead)}
.retiring>ul{display:flex;flex-direction:column;gap:var(--hz-space-2);padding-left:20px;font-size:var(--hz-text-sm);line-height:1.5}
.notice.final{padding:12px 14px;border-color:var(--hz-error-border);background:var(--hz-error-bg);color:var(--hz-error-ink);line-height:1.5}
/* A panel's heading row with its action (`Main`'s board, Settings' receiving accounts; part 7b-3): the heading and
   its words at the left, 520 wide before the action wraps under them, and the action at the right, 12 below or
   24 beside, green, 15 with 18 at each side, its icon 8 from its words. */
.panelhead{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--hz-space-3) var(--hz-space-5)}
.panelhead>.stack{flex:1 1 32.5rem;min-width:0}
.panelhead>a.go,.head>.rowacts>a.go{margin-top:0;gap:var(--hz-space-2);padding:0 18px;font-size:var(--hz-text-lead);white-space:nowrap}
/* An account's own page (`Account`'s board; part 7b-3): its details a grid of two columns, 14 by 24 apart, each
   label over its value 2 apart, the value bold and the account's history (when added, last changed) regular, one
   column below 1024 as every grid is; the labels keep every summary's capitals (Phase 2's shared styles). Its
   rename's box 300 to 420 wide, filling its label, and *Save the label* beside it, 14 apart, on the box's foot,
   or 12 under it where the row is too narrow. */
.facts.details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px var(--hz-space-5);margin:0}
.facts.details>.fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.facts.details dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.facts.details dd.history{font-weight:400}
form.rename{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px}
form.rename>label{flex:1 1 18.75rem;max-width:26.25rem}
form.rename>label>input{max-width:none}
/* Adding a receiving account (`AddAccount`'s board; part 7b-3): each choice a card, a row 12 by 14 inside with a 1 px
   edge in the control's colour and an 8 corner, at least a field's height, its radio 18 square 2 below the card's top
   and 10 from its words, the choice 15 over its line 13, 2 apart; the chosen card's edge 2 px in the accent strong on
   the soft accent, 11 by 13 inside so choosing moves nothing. The payment method's four two by two, 10 apart, one
   column below 1024 as every grid is; business or personal's two 240 wide before they wrap, 10 apart, 8 under their
   heading, which is a field's name. *Wallet or bank* and *Or a new one* side by side, 260 wide before they wrap, 14 by
   18 apart, each box keeping its medium width (FR-27); and the notice a note, 12 by 14 inside at a line height of 1.5.
   A card is a `label.pick`, which outweighs the `label:has()` rule above. */
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices.kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
div.choices>label.pick{flex:1 1 15rem;min-width:0;flex-direction:row;align-items:flex-start;gap:10px;min-height:var(--hz-field);padding:12px 14px;border:1px solid var(--hz-control);border-radius:var(--hz-radius);background:var(--hz-surface);cursor:pointer}
div.choices>label.pick:has(>input:checked){padding:11px 13px;border:2px solid var(--hz-accent-strong);background:var(--hz-accent-soft)}
div.choices>label.pick>input[type=radio]{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--hz-accent-strong)}
div.choices>label.pick>span.cardtext{display:flex;flex-direction:column;gap:2px;min-width:0}
div.choices>label.pick>.cardtext>b{font-size:var(--hz-text-lead)}
div.choices>label.pick>.cardtext>.muted{font-size:var(--hz-text-sub)}
.choicefield{display:flex;flex-direction:column;gap:var(--hz-space-2)}
.choicefield>b{color:var(--hz-ink);font-size:var(--hz-text-sm);font-weight:600}
.fieldpair{display:flex;flex-wrap:wrap;gap:14px 18px}
.fieldpair>label{flex:1 1 16.25rem;min-width:0}
.notice[role=note]{padding:12px 14px;line-height:1.5}
.coverage{font-size:var(--hz-text-sub);color:var(--hz-muted);margin:0}
/* A font's licence on the guide (ADR-027's typeface rule 7) keeps its own line breaks but wraps, so a phone never scrolls it sideways;
   its disclosure's line is a tap target (FR-17), keeping the browser's open-and-close marker. */
.licence{white-space:pre-wrap;overflow-wrap:anywhere}
.licences summary{min-height:var(--hz-target);padding-block:var(--hz-space-1);cursor:pointer}
/* A row's acts sit on one middle line, so a dot between two 44 px links is level with their words; a field's
   label stands taller than the buttons beside it, which keep to its foot, level with the field (part 7b). */
div.rowacts{display:flex;flex-wrap:wrap;gap:var(--hz-space-1);justify-content:flex-end;align-items:center}
div.rowacts>label~button{align-self:flex-end}
/* A row's acts and their column's heading sit at the right, the heading over its links (minor note 3). */
td.rowacts,th.rowacts{text-align:right}
/* A row's own action, its board's *Change*: 36 high (`--hz-chip`, never under the tap size) and bold. */
td.rowacts a{min-height:max(var(--hz-target),var(--hz-chip));padding:0 var(--hz-space-2);font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hz-space-4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hz-space-4)}
.figure{font-size:var(--hz-text-xl);font-weight:600;margin:var(--hz-space-1) 0}
.stack{display:flex;flex-direction:column;gap:var(--hz-space-4)}
/* A button is as wide as its words and padding (PRD-19 FR-27): a stacked form's button keeps its own width,
   and takes the column's only below the phone switch (below). */
.stack>button{align-self:flex-start}
/* The POS's three steps, the boards' indicator on each of them (the look pass, step (2), part 2): a number in a 26
   px circle, the current one filled with the accent and in bold, a finished one ticked on the soft fill, and a
   28 px rule before each step after the first. It wraps rather than run off a narrow window. */
.head>.steps{margin-left:auto}
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-2);margin:0;padding:0;list-style:none;font-size:var(--hz-text-sm);color:var(--hz-muted)}
.steps li{display:flex;align-items:center;gap:var(--hz-space-2)}
.steps li+li::before{content:"";width:28px;border-top:1px solid var(--hz-control)}
.steps .num{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--hz-control);border-radius:50%;font-size:var(--hz-text-sub)}
.steps li[aria-current=step]{font-weight:700;color:var(--hz-ink)}
.steps .num.now{background:var(--hz-accent-strong);border-color:var(--hz-accent-strong);color:var(--hz-on-accent)}
.steps .num.done{background:var(--hz-accent-soft);border-color:var(--hz-accent-soft);color:var(--hz-accent-ink)}
/* The step in words, as the phone's boards say it under the title: drawn below the phone switch alone (below). */
.stepline{display:none}
/* The POS's item step, drawn to its board (`CounterItems`): the find panel the wider, flexed 3 to 2 from 480 and
   360 as the board's are, side by side down to the menu switch (FR-25), each 14 apart inside. */
.posgrid{display:flex;gap:20px;align-items:flex-start}
.posgrid>.panel{gap:14px;min-width:0}
.posgrid>.panel>h2{margin:0}
/* The find panel 12 above its foot in every window: as `.posfind`, the narrow windows' later `.panel` padding drew 16. */
.posgrid>.posfind{flex:3 1 30rem;padding-bottom:12px}
.possale{flex:2 1 22.5rem}
/* The search: its words over the field, and *Search* level with it. The field is every field (FR-28's 44, the
   colour test's edge, corner and text, which it holds each field to), so the board's larger search box with its
   magnifier is not drawn here. */
.possearch{display:flex;gap:var(--hz-space-2);align-items:flex-end}
.possearch>label{flex:1;gap:6px;font-size:var(--hz-text-sub)}
/* *Find order number* (`Orders.dc.html`): its words over a figure's field and *Open* level with it, the search
   beside it on one row while the panel holds both, as the board draws them, and under it when it does not; the
   panel's hint under both; the order it finds on a panel of its own, edged in the accent as the board draws it,
   its words, its state and its link wrapping as the panel narrows. */
.orderfind{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end}
.orderfind>.ordersearch{flex:1 1 32.5rem}
.orderfind>.coverage{flex-basis:100%}
.numberfind{display:flex;flex-wrap:wrap;gap:var(--hz-space-2);align-items:flex-end}
.numberfind>label{gap:6px;font-size:var(--hz-text-sub)}
/* The orders' search (`Orders.dc.html`): the words' field takes the room the two days and *Search* leave, all
   level at their foot; the *Show* pills, each a link in the chip's shape, the current one pressed as the board
   draws it; the pages' links in a row after the list. *Clear the search*, which the board does not draw, stands
   a field high so its words are level with *Search*'s, where a mouse's 24 px target dropped them to the foot. */
.ordersearch{display:flex;flex-wrap:wrap;gap:var(--hz-space-2);align-items:flex-end}
.ordersearch>label{gap:6px;font-size:var(--hz-text-sub)}
.ordersearch>label.words{flex:1 1 17.5rem}
.ordersearch>a,.pages>a{display:inline-flex;align-items:center;min-height:var(--hz-target);font-weight:600}
.ordersearch>a{min-height:max(var(--hz-target),var(--hz-field))}
.showpills{display:flex;flex-wrap:wrap;gap:var(--hz-space-2)}
.showpills>a{display:inline-flex;align-items:center;min-height:max(var(--hz-target),var(--hz-chip));padding:0 14px;border:1px solid var(--hz-control);border-radius:var(--hz-radius-pill);background:var(--hz-surface);color:var(--hz-ink);font-size:var(--hz-text-sub)}
.showpills>a[aria-current=true]{border-color:var(--hz-accent-strong);background:var(--hz-accent-soft);color:var(--hz-accent-ink);font-weight:600}
.pages{display:flex;flex-wrap:wrap;gap:var(--hz-space-4)}
/* The list's columns (`Orders.dc.html`; the order flow build plan's step 2, part 3): *Their PO* and a stage's lines
   small and muted under the dealer and the badge, and the found panel's lines under its title; *Where it is*'s
   badge in the board's tones, goods still to send
   amber, on the truck blue, done green, *Not sent yet* and *Cancelled* the plain pill's, on the found panel too;
   *Next* an outlined link the height of a field, as the board draws it, and the panel's *Open Order 17* outlined in
   the accent, its words wrapping before they leave a narrow panel. */
td.dealer>.sub,td.stage>.sub,.bynumber>.what>.sub{font-size:var(--hz-text-sub);color:var(--hz-muted)}
td.stage>.pill.tosend,.bynumber>.pill.tosend{background:var(--hz-notice-bg);color:var(--hz-notice-ink);border-color:var(--hz-notice-bg)}
td.stage>.pill.truck,.bynumber>.pill.truck{background:var(--hz-info-bg);color:var(--hz-info-ink);border-color:var(--hz-info-bg)}
td.stage>.pill.done,.bynumber>.pill.done{background:var(--hz-accent-soft);color:var(--hz-accent-ink);border-color:var(--hz-accent-soft)}
td.rowacts>a.next{min-height:max(var(--hz-target),var(--hz-field));padding:0 14px;border:1px solid var(--hz-control);border-radius:var(--hz-radius-md);background:var(--hz-surface);color:var(--hz-ink);white-space:nowrap}
.panel.bynumber{border:2px solid var(--hz-accent-strong);display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-3) var(--hz-space-5)}
.bynumber>.what{flex:1 1 22.5rem;min-width:0;display:flex;flex-direction:column;gap:var(--hz-space-1)}
.bynumber>.what>b{font-size:var(--hz-text-lg);font-weight:600;overflow-wrap:anywhere}
.bynumber>a.open{min-height:max(var(--hz-target),var(--hz-field));padding:0 var(--hz-space-4);border:1px solid var(--hz-accent-strong);border-radius:var(--hz-radius-md);background:var(--hz-surface);color:var(--hz-accent-ink);font-size:var(--hz-text-lead);font-weight:600;overflow-wrap:anywhere}
/* A found item, one row of the board's list: its name over its SKU and what it fits, its stock and its place,
   its price, and *Add*, wrapping as the panel narrows; nothing on hand at its home on the notice's fill. */
.found,.salelines{list-style:none;margin:0;padding:0}
.found>li{display:flex;flex-wrap:wrap;align-items:center;gap:12px var(--hz-space-4);padding:12px 0;border-top:1px solid var(--hz-border)}
.found .what{flex:1 1 16.25rem;min-width:0;display:flex;flex-direction:column;gap:3px}
.found .what b,.salelines .what b{font-size:var(--hz-text-lead);font-weight:600;overflow-wrap:anywhere}
.found .what>span,.salelines .what>span{font-size:var(--hz-text-sub)}
.found .what>span.muted,.salelines .what>span.muted{overflow-wrap:break-word}
.found .stock{min-width:8.25rem;max-width:100%;overflow-wrap:anywhere;font-size:var(--hz-text-sub);color:var(--hz-muted)}
.found .stock.none{padding:2px var(--hz-space-2);border-radius:var(--hz-radius-pill);background:var(--hz-notice-bg);color:var(--hz-notice-ink);font-weight:600}
.found .price{min-width:6.25rem;max-width:100%;overflow-wrap:anywhere;text-align:right;font-size:var(--hz-text-md);font-weight:700;font-variant-numeric:tabular-nums}
.found button{padding:0 var(--hz-space-4);border-radius:var(--hz-radius-md);font-weight:600}
/* The phone's parts of the item step (`PhoneItems`; the look pass, step (2), part 6), a found item's line in the
   sale and the foot bar, drawn only below the menu switch (below), where the sale sits under the list. */
.found .inthesale,.found .instep,.salebar{display:none}
/* The sale: its count beside its heading, then each line, its name, price each and amount over its quantity
   between *One less* and *One more*, all 44, and *Remove* quiet at the line's end. */
.salehead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.salehead>h2{margin:0}
.salehead>span{font-size:var(--hz-text-sub)}
.salelines>li{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-top:1px solid var(--hz-border)}
/* A line's words take its room down to their widest piece that cannot break, its price each (`break-word`
   breaks a word only past the whole line, so it keeps that floor where `anywhere` would drop it), and below
   that the amount wraps under them; a figure wider than the whole panel breaks within itself (RF-3669). A
   basis of `auto` would put the amount under every name too long to sit beside it, which the board keeps beside. */
.saleline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.salelines .what{flex:1 1 0;min-width:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.saleline>.amount{max-width:100%;overflow-wrap:anywhere;font-size:var(--hz-text-md);font-weight:700;font-variant-numeric:tabular-nums}
.stepper{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-2)}
.stepper>.word{min-width:4rem;font-size:var(--hz-text-sub);font-weight:600;color:var(--hz-muted)}
.stepper>button.step{width:max(var(--hz-target),var(--hz-field));padding:0;border-radius:var(--hz-radius-md);background:var(--hz-surface);font-size:1.25rem}
.stepper>button.step:disabled{background:transparent}
.stepper>label{display:flex}
.stepper input{width:4rem;text-align:center;font-variant-numeric:tabular-nums}
.stepper>.quiet{margin-left:auto;font-size:var(--hz-text-sub)}
/* The estimate, one total under a rule in the ink, the receipt's ladder's other rows small around it; a figure
   that cannot sit beside its label wraps under it, and breaks only if wider than the panel (FR-29). */
.saletotal{display:flex;flex-direction:column;gap:4px;margin:0;padding-top:14px;border-top:2px solid var(--hz-ink)}
.saletotal>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--hz-space-3);font-size:var(--hz-text-sub);color:var(--hz-muted)}
.saletotal dd{max-width:100%;overflow-wrap:anywhere;margin:0;font-variant-numeric:tabular-nums}
.saletotal>.grand{font-size:var(--hz-text-md);font-weight:700;color:var(--hz-ink)}
.saletotal>.grand dd{font-size:2rem;letter-spacing:-.02em}
.saleacts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hz-space-2)}
.saleacts>.primary{padding:0 var(--hz-space-5);font-size:1.0625rem;font-weight:700}
.saleacts>.sub{margin:0;font-size:var(--hz-text-sub);color:var(--hz-muted)}
.saleacts>.quiet{font-size:var(--hz-text-sub)}
/* The POS's payment step, drawn to its board (`CounterPay`; the look pass, step (2), part 3): the item step's two
   panels, the payment panel's parts 18 apart and the summary's 12. The total to pay in the payment panel's head,
   40 bold beside its 15 px label, under the heading where the two do not fit; the acts and the quick amounts 8
   apart, in the markup's order (ADR-077 §3.5); the change to give on the ink, 36 bold, its words in the white
   they inherit; *Record the sale* first in its row under a rule, 18 bold, §4.2's sentence beside it; the
   summary's lock line 13, and its total 16 bold in the ink, its word and its figure alike, at its place in the
   receipt's ladder (ADR-060 §4a: first on the board's quote, which includes VAT and has no discount; under
   *Net of VAT* and *VAT* on a quote before VAT), the rows under a 2 px rule in the ink. A figure
   that cannot sit beside its label wraps under it, and breaks only if wider than its panel (FR-29). */
.posgrid>.paytake{flex:3 1 30rem;gap:18px}
.posgrid>.paysum{flex:2 1 22.5rem;gap:12px}
.payhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--hz-space-3)}
.payhead>h2{margin:0}
.payhead>.facts,.paychange>.facts{margin:0}
.payhead .facts>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--hz-space-3)}
.payhead .facts dt{font-size:var(--hz-text-lead);font-weight:400;letter-spacing:normal;text-transform:none}
.payhead .facts dd,.paychange .facts dd{max-width:100%;margin:0;overflow-wrap:anywhere;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.payhead .facts dd{font-size:2.5rem}
/* *See the N items*, the way to the summary, edged as `PhonePay`'s secondary act: 44 high, 12 at each side, the
   corner 6, 14 / 600 in the ink on the white. Drawn below the menu switch alone, where the summary is under the panel. */
.payhead>.seeitems{display:none;align-items:center;min-height:max(var(--hz-target),var(--hz-field));padding:0 var(--hz-space-3);border:1px solid var(--hz-control);border-radius:var(--hz-radius-md);background:var(--hz-surface);color:var(--hz-ink);font-size:var(--hz-text-sm);font-weight:600}
.payacts{display:flex;flex-wrap:wrap;gap:var(--hz-space-2)}
/* The payment rows (`CounterPay`, `PhonePay`; the payment-accounts plan's design calls 5 and 6): each payment a box
   of the page's ground on the panel's white, 1 px in the border's colour, the corner 8, 14 by 16 inside; its choice a
   line of its own across the box, since an account reads long (*GCash · Shop main · Business · ••1234*); then the
   amount and the reference side by side, as a row that wraps where the two do not fit, never a grid (FR-25's grids go
   to one column on a phone, and the phone's board keeps these two beside each other). The choice is past FR-27's 340
   because its boards draw it across its box, and never past 680, the widest they do (`CustomerPayment` and
   `CustomerPayout` at 1440): uncapped, a page one column wide drew the customer's choices and the void's 1,052 px
   (part 7b-3). */
.payrows{display:flex;flex-direction:column;gap:var(--hz-space-3)}
.payrow{display:flex;flex-direction:column;gap:var(--hz-space-3);padding:14px var(--hz-space-4);border:1px solid var(--hz-border);border-radius:var(--hz-radius);background:var(--hz-bg)}
.payrow select{max-width:42.5rem}
/* The void's refund box (`Void`'s board, design call 9; part 7b-3): a grid, where the POS's rows are not, since
   its board draws two columns: the payment as taken at its left, its name, its amount 26 bold and its note 13, 4
   apart; *Refund from* and *Refund reference* at its right, 14 apart, each hint 13 and 6 under its field. The
   columns 1 to 1.7, 14 by 24 apart, each from the top, 16 inside, put the choice at the board's 562 in its
   1,000 px column; below 1024 the grid is one column, as every grid is. */
.payrow.refund{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:14px var(--hz-space-5);align-items:start;padding:var(--hz-space-4)}
.payrow.refund>.paid{display:flex;flex-direction:column;gap:var(--hz-space-1)}
.payrow.refund>.paid>p{margin:0}
.payrow.refund>.paid>.figure{font-size:1.625rem;font-weight:700;letter-spacing:-.01em}
.payrow.refund>.paid>.muted{font-size:var(--hz-text-sub);overflow-wrap:anywhere}
.payrow.refund>.refundto{display:flex;flex-direction:column;gap:14px}
.payrow.refund>.refundto>p{margin:-8px 0 0;font-size:var(--hz-text-sub);line-height:1.45}
.payboxes{display:flex;flex-wrap:wrap;gap:var(--hz-space-3)}
.payboxes>label{flex:1 1 9rem;min-width:0}
.paychange{display:flex;flex-direction:column;gap:var(--hz-space-1);padding:var(--hz-space-4) 18px;border-radius:var(--hz-radius);background:var(--hz-ink);color:var(--hz-on-accent)}
.paychange .facts dt{font-size:var(--hz-text-sm);font-weight:400;letter-spacing:normal;text-transform:none;color:inherit}
.paychange .facts dd{font-size:2.25rem}
.paychange>p{margin:0;font-size:var(--hz-text-sub)}
.payrecord{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-3) var(--hz-space-4);padding-top:18px;border-top:1px solid var(--hz-border)}
.payrecord>.primary{padding:0 var(--hz-space-5);font-size:var(--hz-text-lg);font-weight:700}
.payrecord>.muted{flex:1 1 14rem;font-size:var(--hz-text-sub)}
.paylock{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--hz-text-sub);color:var(--hz-muted)}
.paylock>svg{flex:none}
.paysum>.facts{flex-direction:column;flex-wrap:nowrap;gap:6px;margin:0;padding-top:var(--hz-space-3);border-top:2px solid var(--hz-ink);font-size:var(--hz-text-sm)}
.paysum>.facts>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--hz-space-3);color:var(--hz-muted)}
.paysum>.facts dt{font-size:inherit;font-weight:400;letter-spacing:normal;text-transform:none;color:inherit}
.paysum>.facts dd{max-width:100%;margin:0;overflow-wrap:anywhere;font-size:inherit}
.paysum>.facts>.grand{font-size:var(--hz-text-md);font-weight:700;color:var(--hz-ink)}
.paysum>.facts>.grand dt,.paysum>.facts>.grand dd{font-weight:inherit}
/* The POS's receipt step, drawn to its board (`CounterDone`; the look pass, step (2), part 4): the outcome and the
   void's card beside the receipt's slip, flexed 3 to 2 from 460 and 340 and wrapping as the board's do, so the
   slip goes under the outcome where the two do not fit. The outcome's parts 18 apart, 24 inside: the ticked
   circle, 52 in the accent, beside the heading at 24 and the receipt's line at 15, its number in the ink; Cash
   received and Change on the ink, 18 by 22 inside, each label 16 in the white it inherits and Change's figure 44
   bold (ADR-077 §5.1 labels it *Change* on every view, ₱0.00 included); the acts 10 apart, *New sale* the
   primary's 48 at 18 bold and *Print* and *Download* the secondary's 44 at 16 with their icons, each as wide as
   its words (FR-27, FR-28). The void's card is ruled, not filled, its words 15 bold over 14 muted and its link
   edged in the error colour, 44 high. A figure breaks only if wider than its panel (FR-29). */
.salegrid{flex-wrap:wrap}
.posgrid>.saleside{flex:3 1 28.75rem;display:flex;flex-direction:column;gap:var(--hz-space-4);min-width:0}
.posgrid>.saleslip{flex:2 1 21.25rem;display:flex;justify-content:center;min-width:0}
.saledone{gap:18px;padding:var(--hz-space-5)}
/* The circle beside the words while they keep 8 rem, over them where they would not: at twice the browser's text
   size *recorded* alone is 198 px, past what a 320 px phone leaves beside the circle. */
.donehead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-4)}
.donemark{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--hz-accent-strong);color:var(--hz-on-accent)}
.donewords{flex:1 1 0;display:flex;flex-direction:column;gap:var(--hz-space-1);min-width:min(100%,8rem)}
.donehead h2{margin:0;font-size:1.5rem;font-weight:700}
.donehead p{margin:0;font-size:var(--hz-text-lead);color:var(--hz-muted);overflow-wrap:anywhere}
.donehead .code{color:var(--hz-ink);font-weight:600}
.donechange{padding:18px 22px;border-radius:var(--hz-radius);background:var(--hz-ink);color:var(--hz-on-accent)}
.donechange>.facts{flex-direction:column;flex-wrap:nowrap;gap:var(--hz-space-1);margin:0}
.donechange .facts>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--hz-space-2)}
.donechange .facts dt{font-size:var(--hz-text-md);font-weight:400;letter-spacing:normal;text-transform:none;color:inherit}
.donechange .facts dd{max-width:100%;margin:0;overflow-wrap:anywhere;font-size:var(--hz-text-md);font-weight:600}
.donechange .facts>.grand dd{font-size:2.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.doneacts{gap:10px}
.doneacts>.go{justify-content:center;gap:var(--hz-space-2);margin-top:0}
.doneacts>.go:first-child{padding:0 var(--hz-space-5);font-size:var(--hz-text-lg);font-weight:700}
.doneacts>.second{padding:0 20px;font-size:var(--hz-text-md)}
.doneacts svg{flex:none}
.mistake{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-3) 20px;padding:18px var(--hz-space-5);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg)}
.mistakewords{flex:1 1 17.5rem;display:flex;flex-direction:column;gap:var(--hz-space-1);min-width:0}
.mistake h2{margin:0;font-size:var(--hz-text-lead)}
.mistake p{margin:0;font-size:var(--hz-text-sm);line-height:1.5;color:var(--hz-muted)}
.mistake>.void{margin-top:0;min-height:max(var(--hz-target),var(--hz-field));padding:0 var(--hz-space-4);border-radius:var(--hz-radius-md);border-color:var(--hz-error);background:var(--hz-surface);color:var(--hz-error)}
/* The receipt's slip: the one article every receipt prints (`receipt_article.html`), sized to the board here alone;
   the printed receipt and *Receipts*' page keep the elements' own rules. At most 340 wide, 13 px Plex Mono at 1.55,
   22 by 20 inside and 26 under, its parts 10 apart; the marks centred, 12 and semi-bold, the last 6 further; the
   business centred, its name 17 in Hanken Grotesk and its lines 2 under it; a dashed rule over the number (its
   time and buyer with it), over the basis and the lines it explains, over the ladder, and over the rows printed
   after the tenders; each line its words over its quantity times its price, the amount at its end, 6 apart (a
   wrapping row, not a grid, so no switch reads it as a layout's columns, FR-25); the
   total semi-bold, at its rows' 13 where the board draws 15, so a column's amounts keep one width (ADR-027's
   rule 1). The tables' rows are blocks here, so their column heads are kept for a reader and hidden from the eye,
   the lines' own form standing in for them, and a long word breaks rather than widen the slip (FR-29). The marks
   are `docmark`: `.mark` is the business's badge in the menu. */
.saleslip>.receipt{width:100%;max-width:21.25rem;gap:10px;padding:22px 20px 26px;background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-sm);font-size:var(--hz-text-sub);line-height:1.55;color:var(--hz-ink);overflow-wrap:anywhere}
.saleslip>.receipt>p{margin:0}
.saleslip>.receipt>.docmark{text-align:center;font-size:var(--hz-text-xs);font-weight:600;letter-spacing:.02em}
.saleslip>.receipt>.docmark b{font-weight:inherit}
.saleslip>.receipt>.docmark:last-child{margin-top:6px}
.saleslip>.receipt>h1{margin:0;text-align:center;font-size:1.0625rem;font-weight:700;line-height:1.55}
.saleslip>.receipt>.biz{margin-top:-8px;text-align:center}
.saleslip>.receipt>.issued,.saleslip>.receipt>.basis,.saleslip>.receipt>table{margin:0;padding-top:8px;border-top:1px dashed var(--hz-control)}
.saleslip>.receipt>.issued~p:not(.docmark,.basis){margin-top:-10px}
.saleslip>.receipt>.basis+.lines{margin-top:-4px;padding-top:0;border-top:0}
.saleslip>.receipt table,.saleslip>.receipt tbody{display:flex;flex-direction:column}
.saleslip>.receipt thead{position:absolute;width:1px;height:1px;clip-path:inset(50%)}
.saleslip>.receipt .lines>tbody{gap:6px}
/* Its cells weigh no more than a bare `td`, so a page table's cells on paper keep their steps (`RF-3651`); they win
   here by coming after the cells' own rules. */
:where(.saleslip>.receipt) td{height:auto;padding:0;border:0;font-size:inherit}
.saleslip>.receipt .lines tr{display:flex;flex-wrap:wrap;gap:0 1ch}
.saleslip>.receipt .lines td:first-child{flex:1 1 100%}
.saleslip>.receipt .lines td:last-child{margin-left:auto}
.saleslip>.receipt .lines td:first-child+td+td::before{content:"× "}
.saleslip>.receipt .ladder tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1ch}
.saleslip>.receipt .ladder td:last-child{margin-left:auto}
.saleslip>.receipt .ladder .grand{font-weight:600}
.saleslip>.receipt .ladder .grand b{font-weight:inherit}
.saleslip>.receipt .ladder tr:not(.after)+.after{margin-top:10px;padding-top:8px;border-top:1px dashed var(--hz-control)}
.card{border:1px solid var(--hz-border);border-radius:var(--hz-radius);padding:var(--hz-space-3) var(--hz-space-4);margin-top:var(--hz-space-3)}
.card h3{margin:0;font-size:var(--hz-text-md);font-weight:600}
/* Home (the UI/UX plan's decision 7, from its approved mockup): a start card holds its icon beside its
   words and its link; a waiting row is one link, its words beside its count. `a.go` is a link that
   starts something, drawn as a button of PRD-19 §8's kinds: the page's main act like `primary`, and
   `.second` like the unclassed secondary. A waiting row is a panel's own link, so it is named under
   `.panel>a`, whose tap-target rule would otherwise shrink it to its words. The figures off FR-28's
   scale are the board's own (the look pass, step 2, part 1): a start card 22 by 24 with its icon 18 from
   its words, its title 19, its button's words 15 and 20 a side, the POS tile's icon in the pressed chip's
   ink, a pair held at 4.5:1 where the board's accent is held at 3:1; the waiting rows touching, their words
   15 over 13 and their count 20, each closed by the board's chevron, drawn here so the row stays one
   link of words; the drawer card's parts 8 apart, its link 6 below them; and Home's column 24 apart. */
.main>.col.home{gap:24px}
.start{display:flex;gap:18px;align-items:flex-start;padding:22px var(--hz-space-5)}
.starticon{flex:none;width:48px;height:48px;border-radius:var(--hz-radius);background:var(--hz-subtle);display:flex;align-items:center;justify-content:center}
.starticon.accent{background:var(--hz-accent-soft);color:var(--hz-accent-ink)}
.startbody{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.startbody .sub{margin:0;font-size:var(--hz-text-sm);line-height:1.5;color:var(--hz-muted)}
.start h2{margin:0;font-size:1.1875rem;font-weight:700}
.homegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hz-space-4);align-items:start}
.homegrid>.wide{grid-column:span 2;padding-bottom:8px}
.homegrid h2{margin:0;font-size:var(--hz-text-md);font-weight:700}
.homegrid>.wide>h2{margin-bottom:6px}
.homegrid p{margin:0;font-size:var(--hz-text-sm)}
.homegrid>.stack{gap:8px}
.homegrid p.state{display:flex;align-items:center;gap:8px}
.homegrid p.toolbar{margin-top:6px}
.homegrid .toolbar>a{font-weight:600}
a.go{align-self:flex-start;display:inline-flex;align-items:center;min-height:max(var(--hz-target),var(--hz-primary));padding:0 var(--hz-space-4);margin-top:var(--hz-space-2);border-radius:var(--hz-radius-md);border:1px solid var(--hz-accent-strong);background:var(--hz-accent-strong);color:var(--hz-on-accent);font-size:var(--hz-text-sm);font-weight:600}
a.go.second{margin-top:0;min-height:max(var(--hz-target),var(--hz-field));background:var(--hz-subtle);border-color:var(--hz-control);color:var(--hz-ink)}
.startbody a.go{margin-top:10px;padding:0 20px;font-size:var(--hz-text-lead)}
.panel>a.waitrow{display:flex;align-items:center;gap:var(--hz-space-4);min-height:64px;margin-top:0;border-top:1px solid var(--hz-border);color:var(--hz-ink)}
.panel>a.waitrow::after{content:"";flex:none;width:8px;height:8px;margin:0 6px 0 -2px;border:solid var(--hz-muted);border-width:2px 2px 0 0;transform:rotate(45deg)}
.waitwhat{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.waitwhat b{font-size:var(--hz-text-lead);font-weight:600}
.waitwhat .sub{font-size:var(--hz-text-sub);color:var(--hz-muted)}
.waitcount{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.facts{display:flex;flex-wrap:wrap;gap:var(--hz-space-2) var(--hz-space-5);margin:var(--hz-space-2) 0 var(--hz-space-3)}
.facts dt{font-size:var(--hz-text-xs);color:var(--hz-muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.facts dd{margin:var(--hz-space-1) 0 0;font-size:var(--hz-text-sm);font-variant-numeric:tabular-nums}
.perm{display:flex;flex-wrap:wrap;gap:var(--hz-space-2)}
.perm .p{font-size:var(--hz-text-xs);padding:var(--hz-space-1) var(--hz-space-2);border-radius:var(--hz-radius-sm);background:var(--hz-subtle);border:1px solid var(--hz-border);color:var(--hz-muted)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--hz-space-2);border-top:1px solid var(--hz-border);padding-top:14px}
.side-note{font-size:var(--hz-text-xs);line-height:1.45;margin:var(--hz-space-1) 0 0;padding:0 10px}
.phonemenu{display:none}
/* The phone's tab bar is a phone's alone: drawn below the phone switch, on a screen (below), never on paper. */
.tabbar{display:none}
/* A table's region is the box its hidden headings are placed in: a `.visually-hidden` is absolute, and a box that
   scrolls clips an absolute child only when it is that child's positioned holder. Unheld, *Receipts*' hidden
   *Receipt* and *Voided* sat past the region's right edge and made a phone's page 610 px wide (part 7b-3). */
.tablewrap{overflow-x:auto;position:relative}
/* A cell's own name, for an entry table stacked below the entry switch (below); a wide screen and paper read the column's heading. */
.cellname{display:none}
/* The scroll note (PRD-19 FR-8, RF-3415): a data table too wide for its column, at any width, says so in its
   region's first line, shown only when the region can scroll sideways. Its named scroll-state container
   measures actual content, without size containment, so no box-width threshold guesses whether the content
   fits; `x` covers either direction, so the note stays shown after scrolling to the far edge. One `:has()`
   reaches the table from the note: a `:has()` inside another is invalid CSS. Paper never scrolls a table, so
   its region is no scroll container and the query never holds there. The note sticks to the region's left
   edge, so it stays in view while the table it explains scrolls sideways under it (part 7b). */
.scrollnote{display:none}
.tablewrap{container-type:scroll-state;container-name:table-scroll}
.tablewrap>.scrollnote{position:sticky;left:0;margin:0 0 var(--hz-space-2);font-size:var(--hz-text-sub);color:var(--hz-muted)}
@container table-scroll scroll-state(scrollable:x){.tablewrap>.scrollnote:has(+table:not(.entry)){display:block}}
/* Without scroll-state queries, any data table can overflow at any screen width (RF-3674), even with
   fewer than five columns or above the menu switch. Keep the conservative note for every data table;
   supporting browsers still show it only for actual overflow, and paper never shows it. */
@supports not (container-type:scroll-state){
@media screen{.tablewrap>.scrollnote:has(+table:not(.entry)){display:block}}
}
@media print{.tablewrap{overflow:visible}td.when{white-space:normal}table.entry:where(:has(tr>:nth-child(11))) th,table.entry:where(:has(tr>:nth-child(11))) td{padding:var(--hz-space-1) var(--hz-space-2)}}
/* Paper keeps its own layout (FR-20): the page, a panel and a table's cells keep the steps, since the boards'
   spacing is a screen's and took a dispatch or shortage page's table past a sheet's 794 px. The first and last
   cells' sides are given back by name: the screen's rules setting them at the region's edges weigh more than
   the cells' rule, so a printed table's outer columns sat against its edges (codex, 2026-10-21, `RF-3651`). */
@media print{
/* A page printed from the screen drops the menu, every button, a link drawn as one, a toolbar's line of links, the
   head's links (*Back to customers*, *Way bill*) and anything marked `print-omit`, and keeps every fact (FR-20; the UI/UX plan's Phase 1 step 9, its audit item 13j):
   each is an act, and a page says in words the state a button's words name (*Put back in use*, *It is retired*).
   `!important`, so no screen rule a class gives one of them draws it on paper again. With the menu gone an entry
   table's choice keeps its own width on paper too, which shows a send-out form's place whole (`RF-3682`). */
.side,.phonemenu,.tabbar,button,a.go,p.toolbar,.head>div.spacer,.head>div.rowacts,.print-omit{display:none!important}
.shell{min-height:880px}
.main{padding:var(--hz-space-5)}
main.col{width:100%}
/* The payment step's two panels wrap on paper, each the sheet's width: shrunk side by side, the summary's
   table ran 104 px past a 183 px column (the look pass, step (2), part 3). */
.paygrid{flex-wrap:wrap}
/* Paper scrolls no table, so the reviewed closes' 640 floor gives way: it ran 160 px past a 480 px column (part 5). */
.closes>.reviewed>.tablewrap>table:not(.entry){min-width:0}
/* A reviewed close keeps its people and every fact on paper while its disclosure stays closed on
   screen (FR-20, RF-3673). The browser otherwise hides this content even in print media. */
.closemore details::details-content{content-visibility:visible}
.panel{padding:var(--hz-space-3) var(--hz-space-4)}
:where(main) th:where(:not(article *)),:where(main) td:where(:not(article *)){padding:var(--hz-space-1) var(--hz-space-2)}
:where(main) th:first-child:where(:not(article *)),:where(main) td:first-child:where(:not(article *)){padding-left:var(--hz-space-2)}
:where(main) th:last-child:where(:not(article *)),:where(main) td:last-child:where(:not(article *)){padding-right:var(--hz-space-2)}
}
/* PRD-19 FR-25's three switches, each on the screen only, so a printed page keeps its own layout (FR-20),
   and in `em`, so each moves with the browser's own text size (the figures are at its default 16 px).
   Each is written as a `max-width` a hundredth of an em under its switch, not as `width < 80em`, which a
   browser before Safari 16.4 (2023) drops whole, phone layout and all. Nothing switches above 1280. */
/* Below 1280 px, the entry switch: an entry table stacks (PRD-19 FR-8; the UI/UX plan's audit item 13a):
   each row is a block, each cell its column's name (`.cellname`, real text in the cell) beside its value, and
   each box under its name inside its own label, so every box to type into is in view and named where it
   stands. The headings row gives way to those names; an empty cell is left out, so a second row of one line
   shows its *also line* and its boxes. Never on paper or a wide screen, whose table keeps its columns. A cell
   may break a long word anywhere, so no SKU widens the block; its name breaks only between words, or a long
   value beside it squeezes *Stock* to one letter's width (RF-3570). A close's five figures go three to a row, since
   five in a laptop's 720 px column left a figure 92 px, under *₱8,450.00* at 20 (the cash differences, part 5). */
@media screen and (max-width:79.99em){
.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
table.entry thead{display:none}
table.entry,table.entry tbody,table.entry tr{display:block}
table.entry tr{border:1px solid var(--hz-border);border-radius:var(--hz-radius);padding:var(--hz-space-1) var(--hz-space-3);margin-top:var(--hz-space-2)}
table.entry td{display:flex;justify-content:space-between;align-items:center;gap:var(--hz-space-3);height:auto;padding:var(--hz-space-1) 0;border-bottom:0;overflow-wrap:anywhere}
table.entry td:empty{display:none}
table.entry td:first-child{font-weight:600}
table.entry td>label{flex:1}
table.entry select{width:100%}
table.entry .cellname{display:block;font-size:var(--hz-text-xs);color:var(--hz-muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase;overflow-wrap:normal}
}
/* Below 1024 px, the menu switch (UI/UX plan, Phase 0's rule 8): the sidebar gives way to the closed menu
   above the page, which holds the same doors, the page takes the whole width, and every grid is one column.
   The page is spaced as the phone's boards space it, 12 by 16 and 10 between its parts, a panel 16 round.
   A table of five or seven columns keeps a width of its own and scrolls in its region rather than squeeze
   its columns to a word a line, the seven's 46 rem inside an 820 px tablet's region, 754 px (`RF-3645`).
   The scroll note's unsupported-browser fallback is above, independent of these width floors. */
@media screen and (max-width:63.99em){
td.when{white-space:normal}
.shell{flex-direction:column;min-height:0}
.side{display:none}
.phonemenu{display:block;background:var(--hz-surface);border-bottom:1px solid var(--hz-border)}
.phonemenu summary{display:flex;align-items:center;gap:var(--hz-space-2);min-height:var(--hz-target);padding:var(--hz-space-2) var(--hz-space-4);cursor:pointer;list-style:none;font-size:var(--hz-text-md)}
.phonemenu summary::-webkit-details-marker{display:none}
.phonemenu summary b{min-width:0;overflow-wrap:anywhere}
.phonemenu .mark{width:1.875rem;height:1.875rem;border-radius:7px;font-size:var(--hz-text-sub)}
.pagesword{margin-left:auto;padding:var(--hz-space-2) var(--hz-space-4);border:1px solid var(--hz-control);border-radius:var(--hz-radius-md);font-size:var(--hz-text-sm);background:var(--hz-subtle)}
.phonemenu[open] .pagesword{background:var(--hz-accent-strong);border-color:var(--hz-accent-strong);color:var(--hz-on-accent)}
/* The tab bar's *More* lands here (`#pages`) and the person opens the menu (its exchange's choice 3), so where the
   landing scrolls nowhere, at the page's top, *Pages* is marked: edged in the accent strong and at 700, told by its
   weight in forced colours, and not drawn as the focus ring nor as the open menu's fill, which it never outweighs: the
   menu's condition weighs nothing (RF-3703). */
:where(.phonemenu:not([open]))>:target>.pagesword{border-color:var(--hz-accent-strong);box-shadow:inset 0 0 0 1px var(--hz-accent-strong);color:var(--hz-accent-strong);font-weight:700}
.phonemenu .nav{padding:0 var(--hz-space-3) var(--hz-space-2)}
.phonemenu .side-foot{margin:0 var(--hz-space-3);padding:var(--hz-space-3) 0 var(--hz-space-4)}
.main{padding:12px var(--hz-space-4) var(--hz-space-5)}
main.col{width:calc(100% - 2*var(--hz-space-4))}
.main>.col,.main>.col.home{gap:10px}
.panel{padding:var(--hz-space-4)}
.head{flex-wrap:wrap}
.grid2,.grid3,.homegrid,.tiles,.tiles.three,.payrow.refund,.facts.details,.choices.kinds{grid-template-columns:minmax(0,1fr)}
.close{padding:var(--hz-space-4)}
/* One column, one line: a column that wraps sizes each line to its widest item's contents and never narrows it, so at
   320 px *How it was paid*'s table drew the sale's side and slip 344 px wide in a 288 px column (part 7b-3). */
.posgrid{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
/* The desktop bases are widths; in this column each panel ends with its contents. */
.posgrid>.panel,.posgrid>.saleside,.posgrid>.saleslip{flex:initial}
/* The item step as the phone's board draws it (`PhoneItems`; the look pass, step (2), part 6), wherever the sale sits
   under the list: the find panel's parts on the page's ground and each found item a card of its own, 8 apart, 8 by
   10 inside and 12 at its start; one the sale holds edged 2 px in the accent, *In the sale* under its name and its
   line's quantity between *One less* and *One more* in *Add*'s place; and the foot bar, the window's width, held at
   its foot while the list scrolls: the count and the way to the sale over *Estimated total*, 22 bold, and the
   step's act, its one place here. A control focused under the bar scrolls clear of it (FR-16): the room is the
   bar's height at its tallest, 7.81 rem in this band with the widest total under SC 1.4.12's spacing. */
.posgrid>.posfind{padding:0;background:transparent;border:0}
.found{display:flex;flex-direction:column;gap:var(--hz-space-2)}
.found>li{padding:8px 10px 8px 12px;background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg)}
.found>li.insale{border:2px solid var(--hz-accent-strong)}
.found>li.insale>button{display:none}
.found .what>.inthesale{display:block;font-size:var(--hz-text-xs);font-weight:600;color:var(--hz-accent-strong)}
.found .instep{display:flex;align-items:center;gap:var(--hz-space-2)}
.instep>button.step{width:max(var(--hz-target),var(--hz-field));padding:0;border-radius:var(--hz-radius-md);background:var(--hz-surface);font-size:1.25rem}
.instep>button.step:disabled{background:transparent}
.instep>.qty{min-width:22px;max-width:6rem;overflow-wrap:anywhere;text-align:center;font-size:var(--hz-text-md);font-weight:700;font-variant-numeric:tabular-nums}
.saleacts>.primary{display:none}
.salebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hz-space-2) 10px;position:sticky;bottom:0;z-index:1;margin-inline:calc(-1*var(--hz-space-4));padding:10px var(--hz-space-4);background:var(--hz-surface);border-top:1px solid var(--hz-border)}
.salebar>a{flex:1 1 12rem;min-width:0;min-height:var(--hz-target);display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;justify-content:space-between;gap:2px 10px;color:var(--hz-ink)}
.salebar .count{font-size:var(--hz-text-xs);font-weight:600;color:var(--hz-accent-strong)}
.salebar .sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:var(--hz-text-xs);color:var(--hz-muted)}
.salebar .sum>b{max-width:100%;overflow-wrap:anywhere;font-size:var(--hz-text-xl);letter-spacing:-.01em;color:var(--hz-ink);font-variant-numeric:tabular-nums}
.salebar>.primary{padding:0 18px;font-size:var(--hz-text-md);font-weight:700}
html:has(.posgrid>.salebar){scroll-padding-bottom:8rem}
/* The payment step as the phone's board draws it (`PhonePay`; the look pass, step (2), part 6b), wherever the summary
   sits under the payment panel: the panel's parts on the page's ground, as the find panel's; its heading a line of its
   own; the total's label over its figure; and *See the N items* at their foot's level beside them, wrapping under them
   where the two do not fit. */
.posgrid>.paytake{padding:0;background:transparent;border:0}
.payhead{align-items:flex-end}
.payhead>h2{flex-basis:100%}
.payhead .facts>div{flex-direction:column;align-items:flex-start}
.payhead>.seeitems{display:inline-flex}
.homegrid>.wide{grid-column:auto}
.tablewrap>table:not(.entry):has(tr>:nth-child(5)){min-width:36rem}
.tablewrap>table:not(.entry):has(tr>:nth-child(7)){min-width:46rem}
}
/* Below 600 px, the phone switch: a stacked form's button, and a POS step's first act, takes the column's width,
   as a phone's board draws its action (PRD-19 FR-25, FR-27); the item step's act is its foot bar's, under the
   count and the total. A found item is the phone board's row: its name, its code and *In the sale*, with *Add* or
   its stepper level beside them while they keep 7 rem and under them where they would not (at twice the browser's
   text size the stepper is 214 px), and its price and stock on a line of their own under both, the empty item after
   the act breaking the line. A row, not a grid: FR-25's grids go to one column here, and the census reads every
   grid as one of them. */
@media screen and (max-width:37.49em){
.stack>button{align-self:stretch}
.salebar>.primary{flex:1 1 100%}
.found>li{gap:2px 10px}
.found>li::after{content:"";order:3;flex-basis:100%}
.found .what{flex:1 1 0;min-width:min(100%,7rem)}
.found>li>button,.found .instep{order:2}
.found .price{order:4;min-width:0;text-align:left}
.found .stock{order:5;min-width:0}
/* The bar is taller here, its act under the total: 11.44 rem at the most, measured at 320 px with the widest total
   under SC 1.4.12's spacing, where the band above draws it 7.81 at the most, so a focused control's room grows. */
html:has(.posgrid>.salebar){scroll-padding-bottom:12rem}
.payrecord>.primary{flex:1 1 100%}
/* One payment on the page's ground, as `PhonePay` draws it: no box, its parts on the ground as the panel's are. */
.payrow:only-child{padding:0;border:0;background:transparent}
/* A POS step's place in words under the title, 12 and muted, in the indicator's place (`PhoneItems`, `PhonePay`): the
   indicator's steps and rules wrap here, a rule starting the second line. */
.head>.steps{display:none}
.stepline{display:block;margin:2px 0 0;font-size:var(--hz-text-xs);color:var(--hz-muted)}
.doneacts>.go:first-child{flex:1 1 100%}
/* *Payments by account* on a phone (`PhonePaymentsByAccount`, design call 11; the payment-accounts build plan's step 7,
   parts 6b-2 and 7b-2): the days on the page's ground, the panel's edge, fill and padding gone, its parts 8 apart, the
   two boxes side by side and *Show* under them, the column's width, white where the plain button is grey, since the
   ground is nearly that grey, and a disabled one keeps the disabled look, as a stepper's does; the table's region
   gives way to the cards, drawn above, on the page's ground too; and *By account* kept for a reader, whom it names the
   section to, and hidden from the eye, as the board leaves it out. */
.days{padding:0;background:transparent;border:0;gap:var(--hz-space-2)}
.days>label{flex:1 1 8rem}
.days>button{flex:1 1 100%;background:var(--hz-surface)}
.days>button:disabled{background:transparent}
.byaccounts{padding:0;background:transparent;border:0}
.byaccounts>.tablewrap{display:none}
.byheading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bycards{display:flex}
/* Its three figures as the phone's board draws them (part 7b): one panel, the net's words and the net, 32 and bold,
   across its top; *Into* and *Out* side by side under them in the ground's fill, unedged, the corner 8, their figures
   without the cards' tightening and their notes left to the wider windows; and the net's note, the board's sentence
   on cash, at the panel's foot. The net's tile gives its parts to the panel's grid, which places them, so a reader
   still hears *Into*, *Out* and *Net* in the markup's order. */
.tiles.paytotals{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hz-space-1) var(--hz-space-2);padding:14px var(--hz-space-4);background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg)}
.paytotals>.tile{margin-top:6px;padding:var(--hz-space-2) 10px;gap:2px}
.paytotals>div{background:var(--hz-bg);border:0;border-radius:var(--hz-radius)}
.paytotals dt{font-size:var(--hz-text-xs)}
.paytotals dd{font-size:var(--hz-text-lead);letter-spacing:0}
.paytotals dd.tilenote{display:none}
.paytotals>.tile:last-child{display:contents}
.paytotals>.tile:last-child>*{grid-column:1/-1}
.paytotals>.tile:last-child>dt{grid-row:1;font-size:var(--hz-text-sub)}
.paytotals>.tile:last-child>dt+dd{grid-row:2;font-size:2rem;letter-spacing:-.02em}
.paytotals>.tile:last-child>dd.tilenote{display:block;grid-row:4;margin-top:6px;font-size:var(--hz-text-xs);line-height:1.4}
/* The phone's tab bar (the UI/UX plan's decision 7; the look pass's part 6c, by its exchange's *The decision*): after
   the page, the window's width, held at the window's foot while the page scrolls, and the shell at least the window's
   height, so a short page puts it at the foot too. It is let go to the page's end, where it takes the same room, while
   a control in the page has focus, while the menu is open, on the item step, whose own bar holds the step's act there,
   and on a page whose act ends where the window does when it opens, which names its `main` `ownact` (the payment
   step's *Record the sale*, the recorded sale's *Print*, the drawer's *Close the drawer*; RF-3690), so it never covers
   what the person is working on and a phone never carries two held bars; and in a short window, below. Its tabs share the width as a row, not a grid (the census reads every grid as one of FR-25's), each
   48 high: a 22 px drawing over its word at 12, where the board draws 11, the word wrapping rather than clipped, and no
   room at a tab's sides, so *Customers* (59 px at 12, 60 bold) stays one word in a 320 px window's 62 px tab. The
   current one is in the accent strong at 700, its drawing's stroke heavier, with a rule along its top drawn as a
   border, which keeps its shape in forced colours, so colour is not what tells it. */
.shell{min-height:100svh}
.tabbar{display:flex;position:sticky;bottom:0;z-index:1;padding:4px 4px 8px;background:var(--hz-surface);border-top:1px solid var(--hz-border)}
.tabbar>a{flex:1 1 0;min-width:0;min-height:max(var(--hz-target),3rem);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 0 2px;font-size:var(--hz-text-xs);line-height:1.2;text-align:center;overflow-wrap:anywhere;color:var(--hz-muted)}
.tabbar>a>svg{flex:none}
.tabbar>a[aria-current]{padding-top:2px;border-top:3px solid;color:var(--hz-accent-strong);font-weight:700}
.tabbar>a[aria-current]>svg{stroke-width:2.1}
.main:focus-within~.tabbar,.phonemenu[open]~.tabbar,.main:has(.salebar)~.tabbar,.main.ownact~.tabbar{position:static}
}
/* A phone's window under 30 em tall: the tab bar and the POS's sale bar are let go to the page's end, and the room a
   focused control keeps clear of the sale bar with them, so a short window keeps its height for the page (PRD-19
   FR-29: a 1280 by 800 window at 400% zoom is 320 by 200, where the held sale bar took 124 px and its room 192;
   RF-3683). 30 em is a design value, which the probe measures. */
@media screen and (max-width:37.49em) and (max-height:29.99em){
.tabbar,.salebar{position:static}
html:has(.posgrid>.salebar){scroll-padding-bottom:0}
}
/* A touch screen, whatever its width (PRD-19 FR-17): a finger's target is 44 px, and a field's text never
   under 16 px, under which a phone zooms the page in on the field it focuses. Its relative figure still grows
   with the browser's own text size (FR-28). Read from the pointers the device has, so a
   computer's narrow window keeps the mouse's 24 px and a touch computer gets the finger's. */
@media (any-pointer:coarse){
:root{--hz-target:44px}
input,select,textarea{font-size:max(16px,var(--hz-text-md))}
}