/* ════════════════════════════════════════════════════════════════════════════ n-floor.css — the floor surface (POS spec §4–§8) Every value in this file is a token or arithmetic over tokens. The spec's fixed sizes are expressed as the token sums that equal them, so the whole surface still answers to the density dial and to --n-hit-min: rail 96 = --n-space-8 + --n-space-6 ticket 360 = --n-space-7 × 7.5 (docked, 601–900px: 320 = 64 × 5) tile min 132 = --n-space-8 × 2 + --n-space-1 tile tall 112 = --n-hit-min × 2 total bar 72 = --n-hit-min + --n-space-4 tender 64 = --n-space-8 table 96 = --n-space-8 + --n-space-6 swipe 96 = --n-space-8 + --n-space-6 Two things have no token and are written as CSS keywords rather than numbers, so this file holds no px at all: · a hairline is `thin` (the UA's 1px), never a literal; · the map's dot grid sizes its dot as a percentage of the token-sized tile, because there is no 1 px token. Both are listed for the lead. Nothing here restyles an old class. The only existing selectors touched are the shell's ids, and only under [data-surface="floor"] — an attribute that exists solely while this surface is mounted. ════════════════════════════════════════════════════════════════════════ */ /* ── 1. the shell gives way to the instrument panel ───────────────────── */ [data-surface="floor"] #shell { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "main"; } [data-surface="floor"] #side, [data-surface="floor"] #top, [data-surface="floor"] #tabbar { display: none; } [data-surface="floor"] #main { padding: 0; overflow: hidden; } /* the `hidden` attribute has to win over the display rules below (the whole surface toggles panels with it, and a `display:` rule would out-specify the UA's [hidden] default) */ [data-surface="floor"] [hidden] { display: none !important; } /* The floating "Ask the app" helper sat on top of the ⋯ button and the total bar. On the floor it is summoned from the hub sheet instead — the same rule as the rest of the office chrome. */ [data-surface="floor"] #helpFab { display: none; } /* The floating voice mic (js/32-voice.js) is a 52 x 52 button — under the floor's 56 px minimum — and on every floor screen it sat on top of the ticket. The floor's mic is the one in the STRIP (.n-strip-mic below), at --n-hit-min and only when the server can actually hear, so this one stays out of the way here. Off the floor it is untouched. */ [data-surface="floor"] #vcBtn { display: none; } /* …and the stock-take panel it pins above that mic (#vcTakeBar, fixed, its own z-index) is drawn over the floor's own furniture with buttons under the 56 px minimum. On the floor the take lives in the voice sheet instead — the count so far and the batch Confirm (D10, js/n-floor.js's nVoiceActions). Off the floor the bar is untouched. */ [data-surface="floor"] #vcTakeBar { display: none; } /* ── 2. sizes derived once, on the surface, so sheets and toasts (which are children of , not of .n-floor) inherit them too ────────────── */ [data-surface="floor"] { --n-rail-w: calc(var(--n-space-8) + var(--n-space-6)); --n-ticket-w: calc(var(--n-space-7) * 7.5); --n-ticket-dock-w: calc(var(--n-space-8) * 5); --n-tile-min: calc(var(--n-space-8) * 2 + var(--n-space-1)); --n-tile-h: calc(var(--n-hit-min) * 2); --n-total-h: calc(var(--n-hit-min) + var(--n-space-4)); --n-tender-h: var(--n-space-8); --n-table-min: calc(var(--n-space-8) + var(--n-space-6)); --n-swipe-w: calc(var(--n-space-8) + var(--n-space-6)); --n-sheet-max-w: calc(var(--n-space-8) * 12); } /* ── 3. shared atoms ────────────────────────────────────────────────────── :where() so these carry the specificity of a bare element selector: they must beat app.css's `button {}` (later in the cascade, same weight) and lose to every component class below — otherwise `.n-floor button{background: transparent}` out-specifies `.n-total` and the total bar loses its fill. */ :where(.n-floor, .n-sheet, .n-toast) button { font-family: var(--n-font-ui); font-size: var(--n-step-1); font-weight: var(--n-w-semibold); color: var(--n-text); background: transparent; border: 0; border-radius: var(--n-radius-sm); transition: background var(--n-dur-fast) var(--n-ease), color var(--n-dur-fast) var(--n-ease); } :where(.n-floor, .n-sheet, .n-toast) :is(button, input):focus-visible { outline: none; box-shadow: var(--n-focus-ring); } :where(.n-floor, .n-sheet) input { font-family: var(--n-font-ui); font-size: var(--n-step-1); height: var(--n-hit-min); min-height: var(--n-hit-min); padding: 0 var(--n-space-3); border: thin solid var(--n-border); border-radius: var(--n-radius-sm); background: var(--n-surface); color: var(--n-text); width: 100%; } /* A placeholder is a LABEL until something is typed — "Search or scan" is how an operator knows what that box is for. The UA's default is the text colour at about 54 % opacity, which on this surface reads 2.6:1 against white: under the 4.5:1 the spec sets, and set with the one device the spec forbids on text (opacity). It is a real token here, at full opacity. --n-text-muted is the token whose job this is: measured at runtime it reads 6.31:1 on the light surface and 6.75:1 on the dark one. The rule reached the search box and the sheets and stopped there, which left exactly one floor placeholder behind: the ticket row's "Kitchen note", which is neither. It inherited app.css's `input::placeholder{color: var(--faint)}` — --n-text-faint, 3.66:1 on the light surface and 4.00:1 on the dark one, both under the 4.5:1 this spec sets. The selector is the SURFACE now, so a field added to the floor tomorrow is covered the day it is written; the two class selectors stay for the sheets, which nSheet() mounts outside [data-surface="floor"] when one is opened off the floor. */ [data-surface="floor"] :is(input, textarea)::placeholder, .n-searchrow input::placeholder, .n-sheet input::placeholder, .n-sheet textarea::placeholder { color: var(--n-text-muted); opacity: 1; } :where(.n-floor, .n-sheet) :is(input[type="checkbox"], input[type="radio"]) { width: auto; height: auto; min-height: 0; padding: 0; } .n-num, .n-money, .n-money-l, .n-money-xl, .n-row-q, .n-row-t, .n-vcard .r > span:last-child, .n-row-qty, .n-splitrow-t, .n-qrow-t, .n-rc-a, .n-table-no, .n-table-min, .n-total-money, .n-tile-p { font-family: var(--n-font-num); font-variant-numeric: var(--n-font-num-variant); font-feature-settings: var(--n-font-num-features); } .n-lbl { display: block; margin: var(--n-space-3) 0 var(--n-space-1); font-size: var(--n-step-1); font-weight: var(--n-w-semibold); color: var(--n-text-2); /* app.css sets every