/* =============================================================================
   Tournament primer — print rules
   =============================================================================

   Browser print-to-PDF is the entire PDF story for this feature. There is no PDF library and no
   server-side renderer, so what Ctrl+P produces IS the deliverable an organizer pins to the
   clubhouse noticeboard. These rules are load-bearing, not cosmetic.

   design-system.css carries no @media print block, and neither does app.css or any scoped
   component stylesheet. The one other print block the app loads is bootstrap.min.css's, which in
   this build contains only the `.d-print-*` display utilities and nothing else — no Reboot print
   rules, so nothing there sets `thead { display: table-header-group }` or touches colour for you.
   Assume this file is on its own.

   SCOPE. This file is linked from index.html, so it loads on every page of the WebApp. Every
   selector below is therefore anchored to .primer-page: nothing here may change what any other
   page prints. That is a stricter rule than the sketch this task started from, which hid `nav`
   and `button` app-wide.

   !important. TournamentPrimer.razor.css is Blazor-scoped, so its selectors compile with an extra
   [b-xxxxx] attribute and outrank a plain global by one whole component regardless of source
   order. Where a rule below fights a scoped rule it carries !important and says which one; where
   it only fights design-system.css it does not, because .primer-page already adds the class it
   needs to win. Every !important in this file is deliberate.

   COLOUR. Browsers drop background colours in print by default. That is the right default — it
   saves ink — but it means any element whose text is legible only because it sits on a coloured
   fill prints as white-on-white and vanishes. Two of those exist on this page and both are
   re-drawn below as outlines rather than forced on with print-color-adjust: exact, which would
   burn a cartridge and still fail on a monochrome printer.
   ========================================================================== */

@media print {

    /* ---------- Page shell ---------- */

    /* The token block is what keeps ink off the paper: the primer page DOES follow the reader's
       system theme (TournamentPrimer.razor.css carries a
       @media screen and (prefers-color-scheme: dark) block, with a body:has(.primer-page)
       companion in app.css — see the note in display-board.css, which is the rest of the app and
       still has no dark mode). Those rules are screen-only, so this print block is what stops a
       reader in dark mode printing white on near-black; it also covers a browser's own
       forced-dark mode.

       padding is !important because the scoped .primer-page[b-xxxxx] rule sets a 1rem side gutter
       for the phone; on paper the printer's own page margin is the gutter. */
    .primer-page {
        --surface-elevated: #ffffff;
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-subtle: #cccccc;

        /* Stated rather than inherited. Browsers drop background colours in print, so the stripe is
           normally not printed at all — but "Background graphics" is one checkbox away in every
           print dialog, and this is the value that gets used when someone ticks it. The screen's
           near-white is close enough to be harmless; naming it here is what stops a future darker
           stripe reaching paper as a grey band behind every other row. */
        --primer-stripe: #ffffff;

        background: #ffffff;
        color: #000000;
        padding: 0 !important;

        /* A single line of a paragraph stranded on its own page reads as a printing fault. */
        orphans: 3;
        widows: 3;
    }

    /* FRAGMENTATION, and the thing to look at first if the printed sheet is wrong.

       `.primer-page` is always emitted as `class="page-content primer-page"`, and
       design-system.css:12-20 makes `.page-content` a COLUMN FLEX CONTAINER with a 1.5rem gap. So
       the masthead, the draft banner and all six `<section class="card">` are flex items, and
       reaching page two at all depends on column-flex fragmentation — which happens one level ABOVE
       the grid fragmentation the card grids need, and therefore fails first if it fails. Chromium
       handles it; WebKit has historically been weaker.

       It is left as flex deliberately: nothing is known to be broken, and flattening it changes the
       on-screen-to-paper correspondence for every reader. If a printed sheet stops after page one,
       or a card lands somewhere impossible, this is the first thing to try — and `gap` does not
       survive `display: block`, so the margin rule is not optional:

           .primer-page { display: block; }
           .primer-page > * + * { margin-top: 1.5rem; }

       The equivalent fallback one level down, if a session or group card splits across the fold, is
       `display: block` on .primer-session-grid, .primer-groups and .primer-sides. */

    /* The primer renders under EmptyLayout, so there is no navigation, no toolbar and no button
       anywhere in the tree today — the page is deliberately a document with nothing to click.
       These selectors match nothing at present and exist so that a control added later cannot
       silently reach paper. Scoped to .primer-page, so they cannot hide another page's chrome. */
    .primer-page nav,
    .primer-page button,
    .primer-page .btn {
        display: none !important;
    }

    /* ---------- Cards ---------- */

    /* .card--table sets `overflow: hidden` to clip its table to the card's rounded corners. On
       screen that clip has nothing to clip; on paper anything crossing it is simply lost, and an
       overflow clip also stops the box fragmenting cleanly across a page boundary.

       The shadow is a screen affordance — it prints as a grey smudge along two edges. */
    .primer-page .card {
        overflow: visible;
        box-shadow: none;
        border: 1px solid #cccccc;
    }

    /* Deliberately NOT `break-inside: avoid` on .card. The handicap grid and the pairings card are
       both routinely taller than a sheet of paper, and an unsatisfiable avoid is either ignored or
       honoured by pushing the whole card to a fresh page and leaving the previous one half empty.
       The avoids below are all on boxes small enough for the request to be satisfiable. */

    /* ---------- Page breaks ---------- */

    /* A heading that lands as the last line on a page labels nothing. */
    .primer-page .primer-section__title,
    .primer-page .primer-pairings__session-name,
    .primer-page .primer-points__title,
    .primer-page .primer-side__name {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Small self-contained blocks that stop meaning anything when split. A session card carries the
       tee time and the format for one round; broken across the fold, whichever half the reader is
       looking at is missing the other. A group card is a tee time and the names playing off it —
       the same argument. */
    .primer-page .primer-session,
    .primer-page .primer-group,
    .primer-page .primer-side,
    .primer-page .primer-points__row,
    .primer-page .primer-legend__row,
    .primer-page .primer-draft-banner {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Both properties everywhere above and below: `page-break-*` is the legacy alias and is what
       older Safari understands, `break-*` is the current spec and what Chromium and Firefox
       prefer. Print engines are the one place the old alias still earns its bytes. */

    /* The footnote says the numbers above it are NOT the strokes you receive. Landing it alone on
       the next page turns the grid into a set of figures the reader will misread, so it is pinned
       to the table it qualifies. The legend is the same argument: an unexplained marker in a cell
       is worse than no marker. */
    .primer-page .primer-footnote,
    .primer-page .primer-legend {
        break-before: avoid;
        page-break-before: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ---------- Prose ---------- */

    /* The narrative is the one block on this sheet that is READ rather than scanned, and it is set
       for a backlit screen held at arm's length: 1rem is 12pt on paper, at 1.65 leading, which makes
       it the loosest thing printed and pushes the schedule — the section every reader opened this
       document to find — further down page one. 10.5pt is what the session card's body text already
       prints at (0.875rem), so this brings the prose into line with the rest of the sheet rather than
       inventing a size for it. Paper takes smaller type than sunlight and a phone do.

       !important against the scoped `.primer-page ::deep .primer-narrative__para`, which sets both
       properties and compiles with the extra [b-xxxxx] attribute.

       orphans and widows are deliberately NOT repeated here. Both are inherited properties and
       `.primer-page` above sets them for exactly this reason, so a copy on the paragraph would be a
       declaration that changes nothing — the thing the rest of this file's comments exist to prevent. */
    .primer-page .primer-narrative__para {
        font-size: 10.5pt !important;
        line-height: 1.45 !important;
    }

    /* The lede keeps its promotion on paper but at a much smaller step up. On screen it is 1.15rem
       against 1rem, and carrying that ratio to print would set the opening paragraph at 12pt on a
       sheet whose body text is 10.5pt — a size difference that reads as a subheading rather than as
       an opening.

       !important, and AFTER the paragraph rule above: `.primer-page .primer-narrative__lede` and
       `.primer-page .primer-narrative__para` have identical specificity, and the lede element
       carries both classes, so source order is the whole of what decides this. */
    .primer-page .primer-narrative__lede {
        font-size: 11.5pt !important;
    }

    /* The narrative is the sheet's opening and it is short. Broken across a page boundary it stops
       being an opening and becomes a fragment above the schedule the reader actually came for. */
    .primer-page .primer-narrative {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ---------- Tables ---------- */

    /* Page two of the course-handicap grid without this is a wall of unlabelled numbers: which
       column is which session is the only thing that makes a course handicap actionable. Applied
       to every table on the sheet, not just the handicap grid — the field list is long enough to
       cross a page on a full tournament too. */
    .primer-page .data-table thead {
        display: table-header-group;
    }

    /* `.data-table thead th` is `position: sticky; top: 0` app-wide, for a scrolling viewport. On
       paper it pins to nothing, and a positioned thead is what stops some engines repeating the
       header group requested immediately above. */
    .primer-page .data-table thead th {
        position: static;
    }

    .primer-page .data-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* `white-space: nowrap` on every cell is right for a scrollport and wrong for paper: there is
       no scrollport to reveal what runs past the right edge, so an over-wide cell is lost at the
       page margin rather than reachable. The purse payout ladder is the one that actually
       overflows — "1st 60% · 2nd 30% · 3rd 10% (min 3 sessions)" in a single unbreakable line. */
    .primer-page .data-table thead th,
    .primer-page .data-table tbody td,
    .primer-page .data-table tbody th {
        white-space: normal;
    }

    /* The scrollport is the mechanism that makes the pinned column worth having, and it exists
       only because a phone is 360pt wide. Paper is not a viewport: an `overflow-x: auto` box on
       paper does not scroll, it clips. */
    .primer-page .table-responsive {
        overflow: visible;
    }

    /* !important against the scoped `.primer-page ::deep .primer-scroller .primer-pinned` rule,
       which is a four-way selector plus a scope attribute.

       A sticky cell on paper is at best inert and at worst mispositioned — it resolves against a
       scrollport that print has just flattened. The box-shadow goes with it: it was never
       decoration, it was the affordance saying "there is more table off to the right", and on
       paper there is not. */
    .primer-page .primer-pinned {
        position: static !important;
        box-shadow: none !important;
    }

    /* The handicap grid is the widest thing on the sheet — up to eight session columns beside the
       player name (MaxColumnsPerTable in PrimerCourseHandicaps). Dropping a couple of points and
       tightening the cell padding is what keeps a full chunk inside a portrait page.

       font-size sits on the CELLS, not on the table. On the table it would reach them only by
       inheritance, and an inherited value loses to any directly-matched declaration no matter how
       weak — design-system.css:454-477 sets a font-size on every `th` and every `td` by name, so a
       size declared on the <table> is dead on arrival. Nothing in the primer puts table text
       outside a th/td, so the cells are the whole table. */
    .primer-page .primer-handicaps .data-table thead th,
    .primer-page .primer-handicaps .data-table tbody td {
        font-size: 9pt;
        padding: 0.35rem 0.45rem;
    }

    /* ---------- Ink ---------- */

    /* The session ordinal is white text on an amber disc. With background colours dropped — the
       browser default — it prints as white on white and the session number disappears entirely.
       Redrawn as an outlined circle with black ink, which needs no background printing at all and
       survives a monochrome printer. !important against the scoped rule that sets both. */
    .primer-page .primer-session__ordinal {
        background: transparent !important;
        color: #000000 !important;
        border: 1px solid #000000;
    }

    /* Same failure, milder: the "Projected" badge is brown on cream inside a pale yellow hairline.
       The cream drops out and the hairline all but disappears, leaving a word whose status as a
       qualifier is invisible. It qualifies a money figure, so it keeps its outline.

       !important against the scoped `.primer-page ::deep .primer-badge`, which compiles to
       `.primer-page[b-m85r63vy4l] .primer-badge` and sets all three of these. Same situation as the
       ordinal above, and easy to miss precisely because this selector LOOKS like the design-system
       overrides elsewhere in this file that need no !important. */
    .primer-page .primer-badge {
        background: transparent !important;
        color: #000000 !important;
        border: 1px solid #666666 !important;
    }

    /* The accent greens and ambers are chosen for a backlit screen. On paper they print as mid
       greys on a monochrome printer, which is the printer most clubhouses have — and these three
       are the tee time, the group number and the section kicker, i.e. exactly the things the sheet
       exists to make findable. Black, unconditionally. !important where the scoped file sets the
       colour (the first two); the kicker is a design-system global, which .primer-page outranks on
       its own. */
    .primer-page .primer-session__when,
    .primer-page .primer-group__time {
        color: #000000 !important;
    }

    .primer-page .primer-group__number {
        color: #000000 !important;
        border-color: #666666 !important;
    }

    .primer-page .page-header__kicker {
        color: #000000;
        background: transparent;
    }

    /* The kicker's leading dot is a 6px circle drawn entirely in background-color
       (design-system.css:67-74). With backgrounds dropped it is not a smaller dot, it is 6px of
       nothing followed by the 0.45rem flex gap — a hole in front of "TOURNAMENT PRIMER" that reads
       as a missing glyph. It is pure decoration, so it goes rather than being redrawn. */
    .primer-page .page-header__kicker::before {
        display: none;
    }

    /* .alert-warning is cream-on-cream once the fill drops. The draft caveat is the single most
       consequential sentence on a draft sheet — "these pairings may still change" — so it gets a
       heavy black rule instead of a tint it cannot print. */
    .primer-page .primer-draft-banner {
        background: transparent;
        color: #000000;
        border: 2px solid #000000;
    }
}