/* =================================================================================================
   PRINT — the checklist on paper (docs/11 §5)

   The one screen in this app that is genuinely meant to leave it. An air-gapped customer site cannot
   reach this server, so the engineer at the machine works from paper or from checklist.csv; the kit
   page's table is what gets printed, with two blank columns to write the time and their initials in.

   Loaded with media="print", so none of this touches the screen. It is NOT an enhancement — a 404 on
   this file prints the app's chrome, the rail and a dark surface across four wasted pages — which is
   why it is in the asset theory with the other stylesheets.

   Two rules do the work and everything else follows from them:

     1. HIDE THE CHROME. The rail, the topbar, every button and every control. A printed checklist
        with a Save button on it is a printed checklist somebody has to read past.
     2. UNDO THE FRAME. shell.css makes a list card exactly the height of the window with the grid
        scrolling inside it — which on paper means one page holding six rows and a clipped table.
        Every fixed height, every overflow and every scroll container is released here.
   ================================================================================================= */

@media print {

    /* -- A4, with a margin a hole-punch does not eat. -------------------------------------------- */
    @page { size: A4; margin: 14mm 12mm; }

    /* Colours off. A checklist is printed on an office laser printer, and a dark surface behind
       black text is either a grey page or forty sheets of toner. `print-color-adjust: economy` is
       the default, but Chrome honours background-color on some elements regardless, so the
       backgrounds are explicitly cleared rather than left to it. */
    html, body, .app-shell, .app-main, .content-canvas, .content-inner, .content-card {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    body { font-size: 10pt; }

    /* -- 1. The chrome. -------------------------------------------------------------------------
       Everything that is a way to DO something rather than something to read. The account menu, the
       rail, the page's own action buttons, the row actions on every grid, the toolbars, and the
       disclosure triangles — a <details> prints closed and its summary is a control nobody can
       click on paper. */
    .rail,
    .topbar,
    .page-head__actions,
    .row-actions,
    .toolbar,
    .form-actions,
    .modal-backdrop,
    .step-detail,
    .command-block__head,
    .no-print {
        display: none !important;
    }

    /* The two columns that exist only on paper: boxes for a time and a set of initials. `table-cell`
       rather than `revert`, because these are <th>/<td> and the screen rule that hides them is
       display:none — reverting would give them `block` and break the row. */
    .print-only { display: table-cell !important; }

    /* Wide enough to write in with a pen, and ruled so the box is visibly a box. */
    .print-write { min-width: 22mm; height: 9mm; border: 1px solid #000 !important; }

    /* -- 2. The frame. ---------------------------------------------------------------------------
       shell.css caps the card at the window and scrolls the grid inside it. On paper that is one
       page and a clipped table, so every part of that chain is released — including .table-wrap's
       own max-height from app.css. */
    .app-shell, .app-main, .content-canvas, .content-inner, .content-card,
    .table-wrap, .table-viewport {
        display: block !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* -- The table itself. ----------------------------------------------------------------------
       `border-collapse` and real rules on every cell: a zebra-striped table with no lines is
       unreadable in greyscale, and this one is read with a finger going down it.

       `break-inside: avoid` on the rows, because a step whose command is split across a page break
       is the one thing a printed command must never be. */
    .grid, .data-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt;
    }

    .grid th, .grid td, .data-table th, .data-table td {
        border: 1px solid #444 !important;
        padding: 2mm !important;
        background: #fff !important;
        color: #000 !important;
        vertical-align: top;
    }

    .grid thead th, .data-table thead th {
        background: #eee !important;
        font-weight: 700;
    }

    /* Repeat the header on every page. A four-page checklist whose columns are named only on page
       one is a four-page checklist read wrongly from page two. */
    thead { display: table-header-group; }
    tr { break-inside: avoid; page-break-inside: avoid; }

    /* A command wraps on paper — there is no sideways scroll on a sheet of A4, and a clipped
       command is worse than a wrapped one. `break-all` is deliberate: these are paths and switches
       with no spaces to break at. */
    .command-block__text, pre {
        white-space: pre-wrap !important;
        word-break: break-all;
        border: 0 !important;
        background: #fff !important;
        padding: 0 !important;
        font-size: 8pt;
    }

    /* app.css lays the checklist out as a FIXED table so Command takes everything left over on a
       1600px card. On paper the sum is a different one: the sheet is ~190mm and the two pen columns
       are back, so the stated widths would hand Time and Initials a third of the page each. Auto
       layout instead — what sized this table before there was a screen version of it to argue with.

       The clamp on the pre goes for the related reason: there is no sideways scroll on A4, so a
       clamped command is cut off with the rest of the sheet blank beside it. */
    .kit-checklist { table-layout: auto !important; }
    .kit-checklist th:nth-child(1), .kit-checklist th:nth-child(2) { width: auto !important; }
    .kit-checklist td .command-block__text { max-width: none !important; }

    /* -- Headings and links. -------------------------------------------------------------------- */
    h1 { font-size: 14pt; margin: 0 0 2mm; }
    h2 { font-size: 11pt; margin: 6mm 0 2mm; break-after: avoid; page-break-after: avoid; }
    .page-head { display: block; margin-bottom: 4mm; }

    /* Underlines and colour off: every link here points back into an app the reader cannot open.
       The href is deliberately NOT printed after the text — on this page every one of them is an
       /admin URL that would be noise on a form somebody writes on. */
    a { color: #000 !important; text-decoration: none !important; }

    .muted, .field-note { color: #333 !important; }

    /* The pills carry meaning — Done, Skipped, Failed — and a coloured badge greyscales to a smudge.
       Outlined instead, so the WORD does the work, which is the rule the whole palette is written
       to anyway. */
    .pill {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
}