/* ── Print ─────────────────────────────────────────────────────────────────
   Loaded from index.html with `media="print"`, so nothing in here is parsed for
   screen and nothing in here can move the dark theme.

   The shop prints quotes and invoices. Before this file the app had no print
   rules at all, which meant one of two outcomes:

     · with "Background graphics" ticked — the whole A4 is the dark violet orb
       field, the nav toggle, the bell and the chat button float on it, and the
       document itself is a small panel in the middle;
     · with "Background graphics" unticked (Chrome's default) — the backgrounds
       are stripped and near-white ink is printed on white paper: a blank sheet.

   Both were verified against `page.pdf()` on /quote-drafts, 2026-08-09.

   THE DIVISION OF LABOUR. This file owns the *page*: paper, margins, what is
   chrome and what is document, breaks, and the removal of screen material
   (blur, shadow, blend). It deliberately does NOT restate the light palette —
   the colours come from the light token set, which the pre-print handover in
   index.html switches the document to. See that script, and §"Print" of the
   Phase 8b report, for what happens if that handover does not run.

   NO `print-color-adjust: exact` GLOBALLY, on purpose. `exact` overrides the
   user's "Background graphics" choice in Chromium, so setting it document-wide
   would mean that any failure of the light handover prints a full-bleed black
   page at the shop's expense. Without it the failure mode degrades to "some
   fills are missing", which is survivable. Colour that is genuinely
   information opts in one element at a time, at the bottom of this file. */

@page {
    size: A4 portrait;
    /* Wider at the foot than the head: a printed quote gets signed. */
    margin: 14mm 12mm 18mm;
}

/* ── 1. Paper ─────────────────────────────────────────────────────────────
   White ground and near-black ink asserted at the root, so that even if every
   other rule in the app is left untouched the document is readable. `color` is
   inherited, so this reaches every element that does not set its own — which
   after the light handover is nearly all of them. */
html,
body {
    background: #ffffff !important;
    background-image: none !important;
    color: #14121f !important;
    /* Form controls and the UA's own widgets follow this, not the app's. */
    color-scheme: light !important;
    /* Screen type is set for a backlit panel at arm's length. 300 dpi is not. */
    font-size: 10.5pt;
    /* The screen shell is a fixed-height viewport with its own scrollers; on
       paper the document has to be allowed to be as long as it is. */
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* ── 2. The atmosphere does not print ─────────────────────────────────────
   Four orbs at blur(90px), mix-blend-mode screen. On paper this is minutes of
   toner and zero information, and it is what makes the current output unusable
   more than any single other rule. */
.glow-field {
    display: none !important;
}

/* ── 3. Chrome is not the document ────────────────────────────────────────
   Everything a mechanic presses rather than reads. A printed page has no nav,
   no bell, no toasts and no "server waking" strip; each one is a control that
   cannot be operated and a block of ink that cannot be acted on.

   `[data-print="hide"]` is the hook for a page-level surface this list cannot
   know about — a page's own FAB, a filter bar, an inline editor. Put it on the
   element in the page's markup rather than adding another selector here. */
.nav-toggle,
.nav-backdrop,
.side-nav,
.ntf-bell,
.ntf-backdrop,
.ntf-panel,
.ntf-toasts,
.ptb,
.tnr,
.more-menu,
.pbh,
.crail,
.wake,
.offl,
/* The customer-chat launcher and its drawer. Shared across the job and quote pages from
   src/lib/chatDrawerStyle.ts, so it belongs in this list rather than in each page. */
.chat-pill,
.chat-overlay,
#boot,
[data-print="hide"] {
    display: none !important;
}

/* ── 4. Glass is not a print material ─────────────────────────────────────
   `backdrop-filter` has nothing to sample once the orbs are gone; `box-shadow`
   is discarded by the print pipeline in most configurations anyway and prints
   as a grey smear in the rest; `mix-blend-mode` composites against a ground
   that no longer exists. Animation and transition are removed so a shot taken
   mid-transition cannot be what lands on the sheet. */
*,
*::before,
*::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
}

/* ── 5. The shell stops being a viewport ──────────────────────────────────
   The desktop shell is a fixed grid with internal scrollers, so without this
   the printer gets one screenful and the rest of a 40-row ledger is never
   emitted. Every scroll container becomes flow content. */
.page,
.page main,
.content {
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

/* Anything the app pinned to the viewport is, on paper, pinned to page one and
   then repeated or lost. Let it flow. */
.content [style*="position: fixed"],
.content [style*="position:fixed"] {
    position: static !important;
}

/* ── 6. Breaks ────────────────────────────────────────────────────────────
   A quote line split across two sheets is a support call. */
tr,
li,
.fx-card,
.card,
.lx-row,
[data-print="keep"] {
    break-inside: avoid;
    page-break-inside: avoid;
}

h1, h2, h3, h4, thead {
    break-after: avoid;
    page-break-after: avoid;
}

/* Repeat the column headings on every sheet of a long ledger. */
thead {
    display: table-header-group;
}

tfoot {
    display: table-footer-group;
}

/* ── 7. Links ─────────────────────────────────────────────────────────────
   This is an internal app; every href is an in-app route, so the classic
   `a[href]::after { content: " (" attr(href) ")" }` would print a page of
   "/invoice-draft-detail?id=…" and tell the reader nothing. */
a[href]::after {
    content: none !important;
}

a {
    color: inherit !important;
    text-decoration: none !important;
}

/* ── 8. Figures stay figures ──────────────────────────────────────────────
   Money and time columns are read down, not across, on paper too. */
.fig,
td,
th {
    font-variant-numeric: tabular-nums;
}

/* ── 9. Where colour is information, and only there ───────────────────────
   These opt into `exact`, which in Chromium overrides the user's "Background
   graphics" setting for the element it is on. It is still not a guarantee —
   the UA and the driver have the last word, a monochrome printer has no colour
   at all, and Firefox honours the user setting more strictly than Chromium
   does. That is why every status site in this app also prints its name (§7 of
   the Phase 7 rulebook: colour is never the only carrier); on paper that rule
   is not an accessibility nicety, it is the only thing that survives a
   black-and-white laser in the office. */
[data-print="ink"] {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}