/* =========================================================================
   Print — a last layer, and the load order is the mechanism
   -------------------------------------------------------------------------
   THIS FILE IS LINKED LAST, after pages/*.css. That is not tidiness; it is the
   only thing that makes it work, and the first attempt got it wrong.

   The brand surfaces set their ink through selectors like `.hero h1`,
   `.page-hero .eyebrow`, `.cta-band h2` — specificity (0,1,1) and (0,2,0). A
   print block in base.css written as `.on-brand *` is (0,1,0)
   and loses on specificity no matter where it sits; base.css also loads first,
   so it loses twice. The selectors below therefore MATCH the specificity of
   what they override and win on order. No `!important` — that would be a
   specificity bug wearing a hat (audit rule D-2).

   THE INK IS PINNED IN tokens.css, NOT HERE. `--doc-ink` is theme-dependent
   (#262626 light, #F2F2F2 dark), so `color: var(--doc-ink)` alone printed white
   on white for every dark-mode visitor — the same failure this file exists to
   fix, in the scheme nobody measured. tokens.css now redefines the palette
   inside `@media print`; this file only says which elements get it.

   WHY IT IS NEEDED: those surfaces paint `--hero-grad` as a background IMAGE
   and set `color: var(--brand-on-dark)` (white) on top. Browsers do not print
   background images by default, so on paper every one of them came out white
   on white: the contact page lost its <h1> and lede, and every page lost its
   closing call to action. Verified by emulating print media and reading the
   computed colour, not by looking at a preview.

   NOT LINKED ON THE SIX AUTH PAGES, and that is deliberate: sign-in, register,
   verify, forgot-password, reset-password and accept-invitation carry no
   `.on-brand` surface, no storefront panel and no stat strip, so they need none
   of the rules below. Their ink still comes out right, because the print palette
   lives in tokens.css, which every page links, and their wordmark is switched
   for paper by `components/wordmark.css`, which they link too. Written down
   because an omission from a list of thirty-one looks like a miss.
 *
   This paragraph named `{en,de}/login.html` alone until U-732, and the other five
   pages were younger than the sentence. **A list of exceptions ages in the one
   direction nobody checks: the exception grows and the sentence does not.**

   Printing the gradient instead would be the wrong fix. It burns ink for
   decoration; restoring the themed ink costs nothing and keeps the words.
   ========================================================================= */

@media print {
  /* Match (0,1,1) against `.hero h1`, `.cta-band h2` …
     (`.site-footer a` was in this list until U-728 made the footer a themed
     surface. It carries no `.on-brand` now, so these rules no longer reach it
     and no longer need to: its ink is `--doc-ink-soft` and `--sd-secondary`,
     both pinned for paper in tokens.css's print layer.) */
  .on-brand,
  .on-brand p,
  .on-brand h1,
  .on-brand h2,
  .on-brand h3,
  .on-brand a,
  .on-brand li,
  .on-brand dt,
  .on-brand dd,
  .on-brand span {
    color: var(--doc-ink);
    background: transparent;
  }

  /* … and (0,2,0) against everything that styles a child OF a brand surface:
     `.page-hero .eyebrow`, `.on-brand .btn-ghost`, and — the one the first cut
     missed, which left seven near-white nodes in the splash header — the whole
     `.on-brand .nav-*` family in nav.css. */
  .on-brand .eyebrow,
  .on-brand .btn,
  .on-brand .nav-link,
  .on-brand .nav-cta,
  .on-brand .icon-btn,
  .on-brand .card-tag {
    color: var(--doc-ink);
    background: transparent;
    border-color: var(--doc-line);
  }

  /* A URL a reader cannot see is a URL they cannot follow. Internal links are
     left alone: a relative path on paper helps nobody. */
  main a[href^="http"]::after,
  main a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }

  /* The decorative bloom and the key visuals are not what a printed page is
     for; the words are. */
  .page-hero::after,
  .hero::before,
  .hero::after {
    display: none;
  }

  /* A HAIRLINE GRID IS A BACKGROUND, AND BACKGROUNDS DO NOT PRINT.
     ---------------------------------------------------------------------
     U-725 rebuilt the version history and the review list as one panel whose
     separators are the CONTAINER's background showing through a `gap: 1px`
     (DESIGN_TOKENS.md §9.2). On screen that is one pixel exactly and no edge
     drawn twice. On paper the gap shows the page, not the line: with the
     browser's default "background graphics off" every separator disappeared
     and eight versions printed as one unbroken block of text.

     It replaced a per-row `border`, which DID print. So the improvement on
     screen was a regression on paper, and it is the same trap this file's
     header records for the filled button — the fill is a background, the
     label is not, and only one of them survives the printer.

     A border on each row after the first restores exactly the separator the
     gap draws, costs nothing on screen (the rule is inside @media print), and
     needs no `!important`: `.storefront-version + .storefront-version` is
     (0,2,0) against the component's (0,1,0). */
  .storefront-version + .storefront-version,
  .storefront-review + .storefront-review {
    border-top: 1px solid var(--doc-line);
  }

  /* The panel's own outline, for the same reason: the container's border is a
     real border and prints, but its background — which is what separates the
     rows — does not, so the outer edge printed and the inside did not. */
  .storefront-versions,
  .storefront-reviews {
    background: transparent;
  }

  /* The partner's reply is set apart by a recess and a hairline. The recess is
     a background; the hairline is what is left on paper, and it is enough. */
  .storefront-review-reply {
    background: transparent;
  }

  /* THE SAME TRAP, A SECOND CARRIER. U-728 rebuilt `.stat-strip` — the
     subscription figures on the dashboard and the billing page — with the same
     `gap: 1px` over a coloured container, and the paragraph above is the reason
     this rule was written in the same change rather than found later: four
     figures separated by a background print as one line of text.
   *
     `border-left` and not a border on every cell, because a shared edge drawn
     from both sides is two hairlines (§9.2). The strip is `auto-fit`, so if it
     wraps on paper the first cell of the second row loses its separator — a
     wrapped grid has no selector for "first in row", and the alternative is a
     box around every cell. The row is four cells wide at print width. */
  .stat-strip {
    background: transparent;
  }

  .stat-strip > * + * {
    border-left: 1px solid var(--doc-line);
  }

  /* `.stat-strip-four` (card.css) is the strip that DOES wrap, and wraps on a
     fixed grid, so "first in row" has a selector: four across on paper as on a
     wide screen — pinned here, because the 640 px query in card.css is not
     screen-only and a narrow sheet would otherwise print two across — no left
     edge on a row's first cell, and a top edge on every row after the first. */
  .stat-strip-four {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-strip-four > :nth-child(4n+1) {
    border-left: 0;
  }

  .stat-strip-four > :nth-child(n+5) {
    border-top: 1px solid var(--doc-line);
  }
}