/* Wrapped in @layer m3e — the layer order is declared as the first style in
   base.html: @layer properties, theme, base, m3e, components, utilities.
   This makes Tailwind utilities (@layer utilities) win over M3E component
   rules at equal specificity, which is the intended semantics. */
@layer m3e {
/* ═══════════════════════════════════════════════════════════════════════════
 * M3E Print Styles
 * Extracted from base.html inline <style>
 *
 * Loaded via <link> in base.html — no need to inline.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* The printed document's running header and footer exist in every page's DOM
   and are drawn only on paper (A3 / D4-27). The hide is OUTSIDE `@media print`
   deliberately: a `display: none` inside the print block could not hide them on
   screen, and a screen-media block is the only honest place to say "not here". */
.m3e-print-header,
.m3e-print-footer { display: none; }

@media print {
  /* Hide chrome: header, drawers, bottom tabs, loading bar, top-bar actions.
   *
   * `.sr-only` is deliberately NOT in this list. Audit fingerprints, signature
   * provenance blocks and table captions are screen-reader-only on screen and
   * are the whole point of the printed artefact (A8 print review) — they are
   * un-clipped for print instead, at the bottom of this file. */
  /* A3 / D4-27: `header` used to hide the page's own `<header class=
     "m3e-page-header">` as well as the app bar, so a printed cashbook had no
     title on it at all — the one element naming the document was gone. The app
     bar is the target; the page header IS the document's title block. */
  header:not(.m3e-page-header),
  #page-loading-bar,
  nav[aria-label="Bottom navigation"],
  .m3e-nav-bar,
  .m3e-shell__bottom-nav,
  .m3e-nav-drawer,
  .m3e-nav-drawer--permanent,
  .m3e-shell__drawer--permanent,
  .m3e-shell__top-bar,
  [data-top-bar-actions],
  [data-no-print],
  #mobile-drawer,
  #mobile-drawer-overlay,
  #toast-container,
  form[role="search"],
  /* Q8-23: a chip is chrome, not content - a "Trace" link, a filter chip or a
     status lozenge on a printed register is a control nobody can press, and on
     paper it reads as a grey box around a word. The earlier, narrower selector
     (a./button./--filter only) left every <span> chip printing and the finding
     was filed again, so the whole component goes. A status word that must
     appear on the printed artefact belongs in the row's text, not in a chip. */
  .m3e-chip,
  /* A3 / D4-27: a breadcrumb is navigation. On paper it is a trail to pages the
     reader cannot click, above a document that already names itself. */
  .m3e-breadcrumb,
  .m3e-pagination-region,
  .m3e-pagination,
  /* A5 residual: ANY <nav> landmark is navigation by definition — a tab strip
     between account pages, a day-to-day stepper, a filter-by-status row, a
     guide's chapter rail. None of it is content, and printing it left a live
     "Billing / Profile / Security / … / Waiver" pill strip on a printed
     participation waiver (found while re-checking D4-27's composition with
     .npsc-paper). [data-print-keep] is the same escape hatch as the controls
     block below, for the rare <nav> that genuinely belongs on paper. */
  nav:not([data-print-keep]),
  /* The card some of those <nav> landmarks are the ONLY content of (the
     member account cross-link strip, _partials/_member_account_header.html)
     is empty furniture once its one child is gone. */
  .m3e-card:has(> nav:only-child),
  .m3e-impersonation-banner,
  .fixed { display: none !important; }

  /* A3 / D4-27: a control is not content. The print sheet already stripped the
     chrome, but it kept every FORM on the page — the cashbook printed its two
     date pickers, its account select and a 1,090px solid-blue "Show these
     entries" bar, and the reports page printed a red outlined "Close this
     month". A treasurer printing the cashbook for the honorary auditor was
     handing over a screenshot with buttons in it.

     `[data-print-keep]` is the escape hatch for the rare control that IS the
     artefact (a signature block, a tick-box list meant to be filled in on
     paper); nothing else survives. */
  form:not([data-print-keep]),
  button:not([data-print-keep]),
  .m3e-button:not([data-print-keep]),
  input:not([data-print-keep]),
  select:not([data-print-keep]),
  textarea:not([data-print-keep]),
  .m3e-segmented,
  .m3e-tabs,
  [role="tablist"],
  .m3e-row-actions,
  .m3e-table__sort-btn .m3e-table__sort-icon,
  .m3e-fab { display: none !important; }

  /* A tab panel that is hidden on screen is hidden on paper too — printing
     every panel of a tabbed page would hand the reader three documents. */
  [role="tabpanel"][hidden] { display: none !important; }

  /* An action column has no cells left once its controls are hidden. Mark the
     header and the cells `data-no-print` and the column goes with them. */
  th[data-no-print],
  td[data-no-print] { display: none !important; }

  /* A sort control's LABEL is the column name and must print; only its
     affordance goes (the icon, above). Draw it as plain header text. */
  .m3e-table__sort-btn { text-decoration: none !important; }

  /* The shell reserves space for the chrome it no longer paints. */
  .m3e-shell__main,
  .m3e-shell__content,
  main {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }
  .m3e-bottom-nav-clearance { padding-bottom: 0 !important; }

  /* Reset backgrounds for ink-friendly output */
  body { background: #fff !important; color: #000 !important; }
  .rounded-card,
  [style*="surface-primary"],
  [style*="fill-tertiary"] {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  /* Tables: clean borders */
  table { border-collapse: collapse; width: 100% !important; }
  th, td { border: 1px solid #ccc !important; padding: 6px 8px !important; color: #000 !important; }
  thead { background: #f5f5f5 !important; }
  /* A header row repeats at the top of every printed page — a five-page
     cashbook whose columns are named once is four pages of unlabelled figures. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* D4-27: the sr-only `<caption>` was un-clipped by the block at the foot of
     this file and landed as a stray sentence BETWEEN the header row and the
     first data row, because a caption with `position: static` is laid out
     wherever it sits. `caption-side: top` plus `display: table-caption` puts it
     back where a caption belongs — and it then reads as the table's title,
     which is exactly what a printed register needs above it. */
  table > caption {
    /* D4-27: an `sr-only` caption was un-clipped by the block at the foot of
       this file, which sets `display: inline !important`, so it landed as a
       stray sentence BETWEEN the header row and the first data row. Captions
       are excluded from that block now and given their own treatment here: a
       real table caption, at the top, reading as the table's title — which is
       exactly what a printed register needs above it. */
    display: table-caption !important;
    caption-side: top !important;
    text-align: start !important;
    font-weight: 600 !important;
    padding: 0 0 6px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
  }

  /* Numeric columns keep their alignment on paper (D4-05 is not a screen-only
     rule): a money column read down the page is the point of printing it. */
  .m3e-table th.m3e-table__th--numeric,
  .m3e-table td.m3e-table__td--numeric { text-align: end !important; }

  /* Force text to black */
  * { color: #000 !important; }
  a { text-decoration: underline !important; }

  /* Badges: outline only */
  .m3e-badge {
    background: transparent !important;
    border: 1px solid currentColor !important;
  }

  /* Disable transforms and animations */
  * { animation: none !important; transition: none !important; }

  /* Screen-reader-only text prints in full.
   * A fingerprint, a provenance line or a table caption that exists only for
   * assistive technology is still the evidence the printed page is FOR. Undo
   * the clip rather than hiding it. */
  .sr-only:not(.fixed):not([data-no-print]):not(caption):not(:has(+ form)):not(#m3e-live-polite):not(#m3e-live-assertive),
  .m3e-visually-hidden:not(.fixed):not([data-no-print]):not(caption):not(:has(+ form)) {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    display: inline !important;
  }
  /* Live regions and the skip link are transient chrome, not content. The
     `:not(.fixed)` above matters: the skip-link wrapper is BOTH `.sr-only` and
     `.fixed`, and the un-clip rule sits after the hide rule, so without the
     exclusion it would resurrect "Skip to main content" at the top of every
     printed page.

     The live regions are named by id rather than by [aria-live], because
     plenty of ordinary page content is a live region too (a result-count line,
     a running total) and that content must still print. */
  #m3e-live-polite,
  #m3e-live-assertive,
  .m3e-live-region { display: none !important; }

  /* A heading whose whole section is a form is furniture once the form goes:
     "Filter the cashbook" printed above nothing on the cashbook. Two halves,
     because the un-clip block above carries two `:not(#id)` clauses and is
     therefore far more specific than anything reasonable here — a `sr-only`
     heading is EXCLUDED from that block by its own `:not(:has(+ form))`, and
     this rule catches the visible ones. */
  h2:has(+ form:not([data-print-keep])),
  h3:has(+ form:not([data-print-keep])) { display: none !important; }

  /* Page breaks */
  section { page-break-inside: avoid; }
  tr { page-break-inside: avoid; }

  /* ── The document header and footer (D4-27) ───────────────────────────────
   * `core/_partials/_print_document_header.html`, rendered once from base.html.
   * A `position: fixed` element repeats on every printed sheet in Chromium, so
   * this is the running masthead: club name on the reading edge, the printed-on
   * date on the trailing edge, a rule beneath it.
   *
   * The @page margins below reserve the band it sits in; without them the first
   * line of content prints underneath it. */
  @page {
    size: A4;
    margin: 22mm 12mm 20mm;
  }

  .m3e-print-header,
  .m3e-print-footer {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 9pt;
    color: #000 !important;
  }
  .m3e-print-header {
    top: 0;
    padding-bottom: 3mm;
    border-bottom: 0.5pt solid #999;
  }
  .m3e-print-footer {
    bottom: 0;
    padding-top: 3mm;
    border-top: 0.5pt solid #999;
    justify-content: center;
  }
  .m3e-print-header__club { font-weight: 700; letter-spacing: 0.02em; }
  .m3e-print-header__date { font-variant-numeric: tabular-nums; }

  /* Page numbers, where the engine supports counters in a margin box. Chromium
     ignores these and prints its own header/footer from the print dialog
     instead; Firefox and paged-media engines (Paged.js, Prince, WeasyPrint)
     honour them, and Playwright's `page.pdf()` takes them from
     `footerTemplate`. Declared rather than omitted so the artefact improves the
     moment the engine catches up — an unsupported at-rule costs nothing. */
  @page {
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 9pt;
    }
  }
}
}

/* A5 residual, deliberately OUTSIDE @layer m3e — the print composition of
 * .npsc-paper (D4-27 / D2-10's "compose with .npsc-paper" note).
 *
 * .npsc-paper's own print reset (border/padding/max-width, above in
 * layout.css) lives in @layer m3e, so it loses to whatever Tailwind
 * utilities the SAME element also carries for its on-screen presentation —
 * a print-only instance of the cascade-layer trap AGENTS.md warns about
 * (Tailwind's @layer utilities always wins over @layer m3e at equal
 * importance, regardless of specificity). Found on /member/waiver/:
 * `class="npsc-paper … max-h-[32rem] overflow-auto p-4"` prints the waiver
 * cut off mid-sentence inside a scrolled, padded box, because `overflow-auto`
 * and `p-4` are utilities and beat the layered reset.
 *
 * Per the CSS Cascade Layers spec, an UNLAYERED normal-importance rule
 * outranks every layered rule regardless of specificity — the same
 * mechanism base.html's own `@layer base { *, ::before, ::after { border-
 * color: … } }` comment describes in reverse (there, staying layered lets a
 * utility win on purpose; here, staying UNLAYERED is what wins). No
 * `!important`, no template edit: the on-screen scroll box is untouched,
 * and only the print rendering of ANY .npsc-paper document is affected,
 * wherever it is embedded. */
@media print {
  .npsc-paper {
    padding: 0;
    max-height: none;
    overflow: visible;
  }
}