/* ════════════════════════════════════════════════════════════════════════════ n-print.css — the office on paper (office spec §6) Loaded with media="print", so nothing in here can touch the screen. PAPER CONSTANTS. `A4 portrait` and `16mm` below are not design values and have no token: they are the physical sheet and the physical margin the spec names (§6), the way a bill's 80 mm roll is physical. The token file describes screens; a printer's paper cannot be themed, so these two live here — the only literals in this file, and listed for the lead alongside css/n-office.css's three. Everything else is ink on paper: the chrome (rail, command line, inspector, every button) goes, colour becomes ink, the table's head repeats on every page, and a block marked data-print="page" starts a fresh one. ════════════════════════════════════════════════════════════════════════ */ @page { size: A4 portrait; /* paper constant, not a design value */ margin: 16mm; /* paper constant, not a design value */ } /* ── ink on paper, whatever the screen was set to ─────────────────────── */ :root, :root[data-scheme="dark"] { --n-bg: var(--n-paper); --n-surface: var(--n-paper); --n-surface-raised: var(--n-paper); --n-surface-sunken: var(--n-paper); --n-surface-well: var(--n-paper); --n-text: var(--n-ink); --n-text-2: var(--n-ink); --n-text-muted: var(--n-ink); --n-text-faint: var(--n-ink); --n-rule: var(--n-ink); --n-accent-text: var(--n-ink); --n-accent-soft: transparent; --n-ok: var(--n-ink); --n-warn: var(--n-ink); --n-danger: var(--n-ink); --n-shadow-1: none; --n-shadow-2: none; --n-shadow-e: none; } /* The tenant's accent is written by js/00-accent.js as INLINE custom properties on — and an inline declaration outranks any :root block, however specific. On paper that meant the restaurant's colour printed as itself: a saffron total, a mauve rule, a wash behind the selected row that the ink of the sheet had to compete with. An IMPORTANT author declaration beats a normal inline one, which is the one lever that reaches an inline custom property from a stylesheet, so the whole accent is forced to ink here, and the chrome with it — a dark screen still prints light. */ @media print { :root { --n-accent: var(--n-ink) !important; --n-accent-text: var(--n-ink) !important; --n-accent-line: var(--n-ink) !important; --n-accent-soft: transparent !important; --n-accent-ink: var(--n-paper) !important; --n-bg: var(--n-paper) !important; --n-surface: var(--n-paper) !important; --n-surface-raised: var(--n-paper) !important; --n-surface-sunken: var(--n-paper) !important; --n-surface-well: var(--n-paper) !important; --n-text: var(--n-ink) !important; --n-text-2: var(--n-ink) !important; --n-text-muted: var(--n-ink) !important; --n-text-faint: var(--n-ink) !important; --n-rule: var(--n-ink) !important; --n-border: var(--n-ink) !important; color-scheme: light !important; } } [data-surface="office"] { background: var(--n-paper); } .n-office { background: var(--n-paper); color: var(--n-ink); } /* ── the chrome goes ──────────────────────────────────────────────────── */ .n-cmdrow, .n-orail, .n-oinspector, .n-oacts, .n-tbl-bar, .n-tbl-foot, .n-block-head .n-osegs, #helpFab, #vcBtn, #toastRoot, #nToastRoot, #nSheetRoot, .n-empty .n-obtn, .n-tbl-emptyact, .n-office button { display: none !important; } /* ── data entry goes too ────────────────────────────────────────────── A report is a record of what happened; a blank box waiting for someone to type a category or an amount is not part of that record. `.n-office button` above already drops the "Add the expense"/"Save" buttons, but the labels and the empty inputs beside them stayed — Reports used to end on a page that was just "Category · Amount · Date · Note · VAT on the slip" with nothing filled in. #nOfB-rep-addexp is its own block (heading and all, since none of it is a report); .n-formrow is the same shape used inline inside a block that DOES belong on paper (Sales & money's Uber Eats commission editor sits beside the payout sums, so only the editor goes, not the block); a literal
is the general case for whatever a later batch (Payroll, Books) puts inside a block. */ #nOfB-rep-addexp, .n-formrow, .n-block form { display: none !important; } /* Batch B2's own chrome. The buttons inside each of these are already gone (`.n-office button` above), but the BOXES they sat in were not, and an empty flex row still takes its height: Items printed a 44 px band of nothing where the category chips had been, and the stocktake sheet's drop zone printed as an empty dashed rectangle. A filter is not a finding and an editable line is not a record, so both go with them. */ .n-chips, .n-editrow, .n-ins-rowacts, .n-drop, .n-histrow-a { display: none !important; } /* Batch B2b: a whole block that is work in progress rather than a record. Stock › Invoices prints its ARCHIVE — what was received, from whom, for how much — and nothing else: the drop zone, the "reading it with the AI… 41s" counter and a draft nobody has confirmed are all things in the middle of being done, and a sheet of paper that says a delivery was received when it has not been is worse than no sheet at all. Menu › Menu import is that block and only that block, so it prints its page header and stops. js/n-office-views-b2.js marks the two intake blocks; the attribute is the general mechanism, so a later batch's counter can say the same thing. */ [data-print="never"] { display: none !important; } /* Batch B3a: People. Two things on these screens are keys rather than records, and neither may leave the building on an A4 sheet by accident. A QR IS THE CREDENTIAL. A manager's authorisation code approves a void; a staff card's code logs someone in. Both have their OWN printed paths — printOverrideQr() and printIdCard(), which open a window of their own with the code alone on it — and both are reached deliberately, from a sheet. The page's copies (the sheet's preview, the void-code column's thumbnail) are on screen to be READ, so they are never part of a printout of the screen: an Employees list left on a desk must not be a set of working keys. (Sheets do not print at all — #nSheetRoot is already hidden above — so this is the void-code column and anything a later batch adds.) The claim offer is the other one: "your lunch is ready to claim" is an invitation with a button, not a record of anything, and the button is already gone by the time it reaches paper. */ .n-ofp-qr, .n-ofp-qrbox, .n-ofp-claim { display: none !important; } /* The initials wear a wash on screen; on paper they are an outline, like every other state that was a colour. */ .n-ofp-av { background: transparent; color: var(--n-ink); border: thin solid var(--n-ink); } /* A tab that is not showing is not on the paper either — the same rule .n-reptab[hidden] gives Reports, for the two People screens and Payroll. */ .n-emptab[hidden], .n-smtab[hidden], .n-prtab[hidden] { display: none !important; } /* Batch B3b: Payroll and Books. A FIELD PRINTS AS ITS VALUE. The payroll run is the one table on this surface whose cells are inputs and selects from end to end, and a printed run that is a page of empty-looking boxes is not a payroll record — somebody has to be able to sign it. On paper each field loses its box, its border and its background and prints the value it is holding, in the column it belongs to. (`.n-office button` above has already taken the "Reload" button inside a stale row's note away with every other button.) A select keeps the office's chevron on screen only; here it is dropped with everything else that was furniture. */ .n-tbl .n-cellin, [data-surface="office"] .n-tbl select.n-cellin { appearance: none; -webkit-appearance: none; padding: 0; min-height: 0; border: 0; background: transparent; background-image: none; color: var(--n-ink); } [data-n="table-wrap-payroll-run"] tbody tr { background: transparent !important; } /* …except where the box is EMPTY, because an empty box does not print as nothing: it prints its PLACEHOLDER. Bonus and Breakage are the two columns most rows leave blank, and every one of them printed a grey "0" that the eye reads as a figure somebody entered (fix round, D5). Each of those two cells carries its own printed words beside the box (`.n-cellval`, written by nOfPrRunUpd from _prComputed, the same source as Base pay and Tips), so on paper the field goes and the value stays. */ [data-n="table-wrap-payroll-run"] tbody [id^="pbon_"], [data-n="table-wrap-payroll-run"] tbody [id^="pbrk_"] { display: none !important; } .n-cellval { display: inline; } /* …and the PAY SETUP does not print at all. Thirteen columns do not fit across 178 mm of A4 portrait: printed whole, the run's own header ran off the right-hand edge and took "Net payout" — the one figure the sheet exists for — with it, while every name wrapped into a four-line stack (measured on the PDF: the head ended at UIF). Five of those columns are the RULE rather than the record — whether a person is in this run, how they are paid, at what rate, for how long and in which rebate tier — and every one of them is said again on that person's own payslip, which is what a payroll printout is signed off. So the eight the old printed table had are what prints: the name and the seven amounts. The CONTENT is hidden rather than the column, and by the ids the old js/23-payroll-branches.js reads rather than by position: a column the owner has switched off from the header's ⋯ would slide an :nth-child rule onto the wrong money. An emptied column collapses to its padding under `table-layout: auto` (above), so the amounts get the width back. */ [data-n="table-wrap-payroll-run"] thead th[data-key="inc"], [data-n="table-wrap-payroll-run"] thead th[data-key="rule"], [data-n="table-wrap-payroll-run"] thead th[data-key="qty"], [data-n="table-wrap-payroll-run"] thead th[data-key="age"] { visibility: hidden; } /* …and their HEADINGS go, not just their ink. `visibility: hidden` keeps the box, and a box still demands the width of the words inside it: "Time worked", "Pay rule" and "Age band" were holding 219 pt of an A4 sheet open for four columns printing nothing, and that was the room the name column needed (fix round, D5 — measured: 38 + 51 + 72 + 58 px). Emptied, each collapses to its own padding. By data-key, like everything else here, so a column the owner has switched off cannot slide the rule onto another one's money. */ [data-n="table-wrap-payroll-run"] thead th[data-key="inc"] :is(.n-th-label, .n-th-btn), [data-n="table-wrap-payroll-run"] thead th[data-key="rule"] :is(.n-th-label, .n-th-btn), [data-n="table-wrap-payroll-run"] thead th[data-key="qty"] :is(.n-th-label, .n-th-btn), [data-n="table-wrap-payroll-run"] thead th[data-key="age"] :is(.n-th-label, .n-th-btn) { display: none !important; } [data-n="table-wrap-payroll-run"] tbody [id^="pinc_"], [data-n="table-wrap-payroll-run"] tbody [id^="pbasis_"], [data-n="table-wrap-payroll-run"] tbody [id^="prate_"], [data-n="table-wrap-payroll-run"] tbody [id^="phrs_"], [data-n="table-wrap-payroll-run"] tbody [id^="phrsu_"], [data-n="table-wrap-payroll-run"] tbody [id^="phint_"], [data-n="table-wrap-payroll-run"] tbody [id^="page_"] { display: none !important; } /* …and the columns that are left divide what the sheet has. css/n-table.css gives every header `width: calc(--n-tbl-col * --n-col-w)` — 128 px times the column's ratio — which under `table-layout: auto` is read as a MINIMUM, and thirteen minimums add up to more than A4 is wide: the emptied columns above gave their content back but not their width, and "Net payout" was still off the right-hand edge (measured on the PDF). This is the same sentence css/n-office.css §14 says at the phone breakpoint, for the same reason and in the same words: at this width the office's contract is that the columns fit, and that outranks any one column's declared share. Scoped to this one table, so every other printed table keeps the auto layout the lead ruled on in batch B3a. */ [data-n="table-wrap-payroll-run"] thead th { width: auto; } /* An AMOUNT never breaks. `auto` shares the sheet out by shrinking whichever column can wrap, and with the eight left it chose the money: "R 18 500.00" printed as "R 18" over "500.00" and the header's "Base pay" over three lines, which pushed a fragment of the repeating head onto the next sheet. The name column is the one that has prose in it (the pro-rata note), so it is the one that should absorb the shortfall — which is exactly the reason `.n-nowrap` exists further up this file, said here for a whole table. */ [data-n="table-wrap-payroll-run"] :is(th, td).n-num { white-space: nowrap; } /* …and the column that absorbs the shortfall still needs a floor. `auto` gave the name column whatever was left after eight nowrap amounts, which on a row carrying the pro-rata note ("Monthly salary doesn't pro-rate — this books the full month's pay for the range.") was one word per line and eleven lines deep (measured on the PDF, fix round D5). One and a half --n-tbl-col is the width the note sets in three or four lines, and it is the only minimum on the table — every other column is an amount that cannot break anyway. */ [data-n="table-wrap-payroll-run"] thead th[data-key="name"] { min-width: calc(var(--n-tbl-col) * 1.5); } /* A LIST OF SHORT ROWS IS NOT BROKEN ACROSS A SHEET (fix round, B3). The running header above is `position: fixed`, so Chrome paints it over the top of every page and the flow has to buy that strip back — which .n-block and a repeating do, and which a plain row of a list does not. A payroll summary (`_nOfSums` → .n-sums: eleven lines from Base pay to Employer wage cost) that happened to straddle a break therefore came back on the next sheet with the header printed THROUGH one of its lines: "To SARS · PAYE" struck out by the restaurant's own name, on the sheet that goes to the accountant. Every list of short rows on this surface says so here: it stays whole, and each row inside it stays whole too, so a break can only ever fall BETWEEN two of them. A list taller than a whole sheet cannot stay whole, so the row itself buys the strip back the way a block does — the padding is cancelled by an equal negative margin, which nothing can see in normal flow and which is the one mechanism a stylesheet has for "clearance only where the browser decided to break". */ .n-sums, .n-checks, .n-ofp-list { break-inside: avoid; } .n-sum, .n-checkrow, .n-ofp-listrow { break-inside: avoid; } /* …and the same for every other SHORT box that can begin a page. A block that holds a table is the only kind that flows across a break at all (`.n-block:has(.n-tbl)`, below), so its own short children are the boxes a break can land in front of: the summary list and its rows, the sentence under them ("9 of 9 employees in this run"), a lead paragraph. Found on the 9-employee run: the sums stayed whole and the sentence AFTER them went over on its own, straight under the restaurant's name. Everything inside the table itself is excluded — a row's notes live in a , where a negative margin would drag the cell's own lines over each other, and a row is short enough never to straddle a break anyway. */ /* …and where a list DOES open a sheet, it buys the header's strip back the way .n-block does — the one mechanism that is proven on this page (a negative margin to hide the gap in normal flow was tried and is not: at a fragment start Chrome keeps the margin and the clearance is cancelled, measured on the nine-employee run). The cost is a strip of white above every printed summary, which reads as the separation a set of totals wants anyway. */ .n-sums { padding-top: var(--n-print-head); } /* …and the sentence UNDER a summary goes with it. Found on the nine-employee run: the list stayed whole (the rule above) and "9 of 9 employees in this run" went over the break on its own, straight under the restaurant's name on the next sheet. A total and the sentence that qualifies it are one reading, so they travel together — and when the pair does move, the list's first row is what opens the page, which is the box that buys the strip. */ .n-sums { break-after: avoid; } /* The list is a formatting context of its own, so the rows' negative margins can never collapse out through it and cancel the clearance above (the same reason .n-block-body is not given this treatment: a negative margin that escapes a block hoists the block's own heading into the header). */ .n-sums { display: flow-root; } /* THE PAYSLIP AND THE VAT201, one sheet each (spec §6). Both already carry data-print="page", which the rule further down turns into a page break; these two say what a page of that kind may not do. A payslip is a name, a period and eight figures, and it must never be split down the middle — half a payslip is a document that says the wrong net pay. The VAT201 is the same case with SARS's name on it. */ [data-n="pr-payslip"], #nOfB-bk-vat { break-inside: avoid; } /* …and the block that introduces the payslips does not print AT ALL. It is one screen sentence — "one sheet of paper each when this page is printed" — about the very sheets it is sitting on, and it introduces pages that each carry the person's own name. `break-after: avoid` used to keep it with the first payslip; once the summary above it stopped being split (B3) it no longer fitted on the run's page, and an orphaned block gets no padding on its continuation, so it printed a heading underneath the running header on a sheet of its own (measured on the four-employee run). The block that says nothing on paper is the block that goes. */ #nOfB-pr-slips { display: none !important; } /* ── the page header the spec asks for: restaurant · screen · range · printed date. Filled by js/n-office.js; invisible on screen. ─────── RUNNING, not once. A block in normal flow prints at the top of page one and nowhere else, so page four of a stocktake was four hundred numbers with nothing on the sheet saying whose stock it was or when it was counted — the one thing a printout that leaves the building has to carry. `position: fixed` is the only mechanism a stylesheet has for a running header: Chrome paints a fixed box once per printed page, at the top of the page area. It is out of flow, so the content column reserves the height back (below) rather than sliding underneath it. */ /* TWO SLOTS (fix round, O11): what this sheet is, at the left; when it came off the printer, at the right. js/n-office.js writes the two spans; the gap between them is the page, not a dash. */ .n-printhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--n-space-4); position: fixed; top: 0; left: 0; right: 0; padding-bottom: var(--n-space-2); border-bottom: thin solid var(--n-ink); background: var(--n-paper); font-family: var(--n-font-ui); font-size: var(--n-step--1); color: var(--n-ink); } /* Neither slot may break across the line or crowd the other. */ .n-printhead-l { min-width: 0; } .n-printhead-r { flex: 0 0 auto; white-space: nowrap; } /* …and the height it takes off the top of every page, given back twice — because "every page" is two different boxes here and only one of them is laid out once: · the content column reserves it for PAGE ONE, where the flow starts with the breadcrumb and the title; · the table's reserves it for every page AFTER that, because a repeating head is the one box in the document that is laid out again on each sheet. Without this the column headings printed underneath the restaurant's name on page two and every page after it (measured: the head's first row at 71.4 pt against a header occupying 80.5 pt). Anything lifted out of the page area instead — a negative `top` into a widened @page margin — stops Chrome repeating the box at all (measured: the header vanished from the last page and moved to 178.7 pt on the rest), so the header stays inside the page area and the content moves. */ /* The strip the running header takes off the top of every sheet. Declared once, spent in the three places below. */ :root { --n-print-head: calc(var(--n-space-6) + var(--n-space-2)); } [data-surface="office"] .n-ocontent, [data-surface="office"] #main { padding-top: var(--n-print-head); } /* ── the layout unwinds into one column of paper ──────────────────────── */ /* All the way up. The app's #shell is a grid and the office shell is one of its cells; a table that fragments inside a grid item does NOT repeat its in Chrome — the head appeared on the table's first page and then never again. On paper there is one column, so every box between the sheet and the table is put back into normal block flow. */ [data-surface="office"] #shell { display: block; height: auto; overflow: visible; } .n-office { display: block; height: auto; overflow: visible; } .n-ocontent, .n-obody, .n-ohead { overflow: visible; padding-left: 0; padding-right: 0; } /* The screen's scroll-tail under the last block. On paper it is 64 px of nothing, and 64 px of nothing after the last row of a table that ended near a break is a whole extra sheet carrying the running header and not one other mark. */ .n-obody { padding-bottom: 0; } /* …and the last block's own tail with it, for the same reason: six points of padding hanging over a page boundary printed a whole sheet holding the running header and nothing else. */ .n-block:last-child { padding-bottom: 0; } [data-surface="office"] #main { overflow: visible; } .n-otitle { font-family: var(--n-font-display); font-size: var(--n-step-3); } .n-crumb { color: var(--n-ink); } /* ── blocks and their rules ───────────────────────────────────────────── A fresh sheet of paper is expensive, and a page holding one line of a report is what the owner throws away. So only what the spec NAMES starts a page — a payslip, per person; the VAT201, per period — and everything else simply tries not to be split down the middle. */ /* A block and a repeating are the two boxes that can begin a page, so they are the two that buy the header's strip back. (A table ROW can begin one too, but paying for the strip on every row would cost a sheet of paper for every four printed — and on a real A4 page area a 36 px row does not straddle a break.) */ .n-block { border-top: thin solid var(--n-ink); break-inside: avoid; padding-top: var(--n-print-head); } .n-tbl thead th { padding-top: var(--n-print-head); } /* …but never a block holding a table. A table is the one thing that is routinely taller than a sheet of paper, and "avoid" on it costs a whole page: the browser shunts the block to the next page, breaks it there anyway, and leaves page 1 holding the title. It flows, and its rows and its repeating head do the tidiness instead. */ .n-block:has(.n-tbl) { break-inside: auto; } .n-block-h { break-after: avoid; } [data-print="page"] { break-before: page; } [data-print="page"]:first-child { break-before: auto; } .n-reptab[hidden] { display: none !important; } /* ── tables: the head repeats, the figures stay tabular ───────────────── Chrome only repeats a on every page when the table is a real table (border-collapse: collapse), the head is a static table-header-group, and neither is inside a scroll container — the screen's `overflow:auto; max-height` box was silently turning the whole table into one un-breakable block on page 1. */ .n-tbl-scroll { overflow: visible; max-height: none; height: auto; } /* `auto`, not `fixed`. Round 2 tried carrying the screen's ratios onto paper (`table-layout: fixed` plus the header's `--n-col-w` width, restated below) and it read the room wrong the other way: A4 is not 1440px, so a column sized for the SCREEN wrapped on PAPER — Receipts' three-word "Time" column wrapped to two lines and pushed an 8-page slip to 9, and Inventory's "Last edited" did the same. `auto` is what round 1 measured names on one line under, and the lead's ruling (batch B3a) is that print keeps it: the browser fits each column to what is actually printed on THAT page, which is the one thing a fixed ratio inherited from a 1440px screen cannot do. The `fixed` behaviour — the drag, the saved-view ratio — stays on screen only; css/n-table.css is untouched. */ .n-tbl table { table-layout: auto; border-collapse: collapse; } .n-tbl thead { position: static; display: table-header-group; break-inside: avoid; } .n-tbl tfoot { display: table-footer-group; } .n-tbl tbody tr { break-inside: avoid; background: transparent; } .n-tbl tbody tr[aria-selected="true"] { background: transparent; } .n-tbl tbody tr[aria-selected="true"] td:first-child { box-shadow: none; } .n-tbl thead th { position: static; background: transparent; border-bottom: thin solid var(--n-ink); color: var(--n-ink); /* No width rule: under `table-layout: auto` (above) the browser sizes each column from what it actually holds on THIS page, which is what fits paper. The screen's own --n-col-w ratio (css/n-table.css) is left where it belongs — on screen. */ } .n-tbl thead th[data-cursor] { box-shadow: none; } .n-tbl tbody td { border-bottom: thin solid var(--n-border-soft); white-space: normal; } /* `.n-nowrap` (js/n-table.js's `nowrap` column flag) is the one exception to the rule above. `table-layout: auto` still has to share a page that is not as wide as every column wants, and it pays for that by shrinking whichever column CAN break — a date-and-time reading, the one column on Receipts and on Inventory with a space in every cell — before it touches an identifier, a name or an amount, none of which has anywhere to break at all. The result was "Fri 5 Sep" over "19:42" on every row (measured: an 8-page Receipts slip became 9). Nothing is gained by letting a date break, so these two say so and the columns that DO need the room — Time, Last edited — stop being where auto-layout's shrinkage lands. */ .n-tbl .n-nowrap { white-space: nowrap; } /* On screen the gap between two columns is the sortable header BUTTON's own padding (.n-th-btn, css/n-table.css) — a th/td itself carries none. Print turns that button to `display: contents` (the rule below, kept for the reason written there) and takes its padding with it, so "Value" and "Last edited" butted against each other with nothing between them. Adjacent cells get the gap back directly, on the LEFT of the second one only, so the first column keeps its edge flush with the page margin. */ .n-tbl :is(th, td) + :is(th, td) { padding-left: var(--n-space-3); } .n-num, .n-tbl .n-num { font-variant-numeric: var(--n-font-num-variant); font-feature-settings: var(--n-font-num-features); } /* A sortable header is a