/* Kymata v5: how a v5 page prints (the Print button, Ctrl/Cmd+P, the browser menu). One sheet, print only: V5Page links it
   with media="print" (components/v5/print-css.ts), so no page blocks rendering on it (it rode in the v5 page stylesheet,
   about 3.6 KB gzip of it, until the launch perf pass). A static file, served as written: plain CSS only, no nesting;
   after an edit run `node scripts/print-css-version.mjs --write` (scripts/print-css.test.mjs checks the ?v= hash).
   components/v5/print-prep.ts opens the folded reading content and stamps the colophon before printing.
   Unlayered on purpose: it must beat the v5 layers (the dark scheme tokens, the text-size steps) and the utilities.
   - the page prints at all: app/globals.css shows only a calculator's protocol sheet on paper (see below);
   - the chrome and every control go: header, bottom bar, footer, Ask, cookie banner, page actions, sticky CTAs,
     section strips, segment toggles, filters, search and cabinet inputs, the "Keep reading" topic links;
   - light ink on white whatever the screen scheme (the light tokens, cards and canvas white, no shadows or washes);
     the few fills that carry meaning (grade tiles, medals, bars, heat cells) keep their colour;
   - modules, rows, figures and table rows do not split across pages; headings stay with what follows;
   - external sources and citations print their URL after the text; paid links print as text marked "(paid link)";
   - the colophon (V5Page's .pfoot): "Printed from kymatahealth.com/<path> on <date>" and the disclaimer. */
/* the colophon (V5Page's .pfoot) is for paper only: its screen rule (.pfoot hidden) is in components/v5/primitives.css */

@media print {
  @page { margin: 14mm 14mm 16mm; }

  /* the page prints (app/globals.css hides everything but a calculator's protocol sheet on paper, and forces every
     background): on a v5 page the page comes back, and the sheet prints alone only when print-prep.ts marks <body>
     with data-print-protocol (every print of a calculator page: its Print buttons, Ctrl/Cmd+P, the browser menu) */
  html[data-v5-page] body:not([data-print-protocol]) > *:not(.print-protocol) { display: revert !important; }
  html[data-v5-page] body:not([data-print-protocol]) > .print-protocol { display: none !important; }
  html[data-v5-page] body:not([data-print-protocol]) * { print-color-adjust: economy !important; -webkit-print-color-adjust: economy !important; }

  /* 13px root (9.75pt body): an A4 or Letter column is 52 to 54rem wide, so ledgers keep their table columns */
  html[data-v5-page] { font-size: 13px !important; background: #fff !important; color-scheme: light !important; }
  html[data-v5-page] body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

  /* ---------- light ink on white: the light scheme's tokens, canvas and cards white (dark scheme or not) ---------- */
  html[data-v5-page] .v5 {
    --v5-canvas: #fff; --bg: #fff; --bg-2: #fff; --card: #fff; --card-2: #fff; --card-3: oklch(.955 .004 80);
    --ink: oklch(.18 .03 262); --ink-2: oklch(.38 .03 262); --ink-3: oklch(.5 .025 262);
    --line: oklch(.86 .008 260); --line-2: oklch(.76 .012 260); --line-ctl: oklch(.62 .02 262);
    --accent: oklch(.42 .16 264); --accent-press: oklch(.36 .14 264); --accent-tint: #fff; --on-accent: var(--ink);
    --brand: oklch(.62 .17 45); --brand-ink: oklch(.52 .15 42); --brand-tint: #fff;
    --brand-tile: #141D2D; --brand-k: #FBFAF7; --brand-rule: #D55C13;
    --ramp-1: oklch(.42 .15 264); --ramp-2: oklch(.53 .14 262); --ramp-3: oklch(.64 .10 258); --ramp-4: oklch(.78 .06 255); --ramp-5: oklch(.9 .03 250);
    --on-ramp-1: oklch(.99 .004 85); --on-ramp-2: oklch(.99 .004 85); --on-ramp-3: oklch(.20 .04 262); --on-ramp-4: oklch(.23 .035 262); --on-ramp-5: oklch(.23 .035 262);
    --good: oklch(.45 .12 150); --good-tint: #fff; --warn: oklch(.47 .11 70); --warn-tint: #fff; --bad: oklch(.48 .18 27); --bad-tint: #fff;
    --grade-a: oklch(.52 .12 150); --grade-b: oklch(.48 .17 264); --grade-c: oklch(.53 .13 55); --grade-d: oklch(.42 .13 20); --on-grade: oklch(.99 .004 85);
    --mark: transparent; --search-mark: transparent; --on-mark: inherit; --scrim: transparent; --pop-shadow: none; --sys-hi: transparent;
    --v4-frame: oklch(.74 .012 260); --v4-rule: oklch(.26 .045 262);
    --v4-bar: oklch(.26 .045 262); --v4-on-bar: var(--ink); --v4-on-bar-2: var(--ink-2);
    --v4-gold: oklch(.80 .12 85); --v4-gold-hi: #fff; --v4-gold-lo: #fff; --v4-gold-bd: oklch(.66 .11 78);
    --v4-on-gold: var(--ink); --v4-on-gold-2: var(--ink-2); --v4-gold-wash: #fff;
    --v4-inset: #fff; --v4-inset-bd: oklch(.82 .035 262);
    --mb-good-bg: #fff; --mb-good-bd: oklch(.72 .08 150); --mb-good-ink: oklch(.38 .11 150);
    --mb-caution-bg: #fff; --mb-caution-bd: oklch(.72 .10 65); --mb-caution-ink: oklch(.42 .12 50);
    --mb-serious-bg: #fff; --mb-serious-bd: oklch(.72 .09 25); --mb-serious-ink: oklch(.44 .17 27);
    --mb-info-bg: #fff; --mb-info-bd: oklch(.76 .06 262); --mb-info-ink: oklch(.40 .16 264);
    --mb-neutral-bg: #fff; --mb-neutral-bd: oklch(.78 .012 260); --mb-neutral-ink: oklch(.36 .03 262);
    --tag-gold-bg: #fff; --tag-gold-bd: oklch(.72 .10 85); --tag-gold-ink: oklch(.40 .085 70);
    --tb-card: #fff;
    color-scheme: light !important;
    background: #fff !important; color: var(--ink);
    --maxw: none;
  }
  /* the page column fills the paper: the margins come from @page */
  html[data-v5-page] :is(.v5, .v5 > *) { --gutter: 0px; }
  html[data-v5-page] main.v5 { overflow: visible !important; }

  /* no shadows, no washes; big surfaces drop their backgrounds (the browser drops the rest unless asked) */
  html[data-v5-page] .v5 *, html[data-v5-page] .v5 *::before, html[data-v5-page] .v5 *::after { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
  html[data-v5-page] .v5 :is(.chapter, .band-alt, .phead, .glance, .mod, .mod-h, .mod-b, .mod-f, .ledger-w, .ledger, .fxmod, .fx-wrap, .rows, .callout-ruled, .mband, .tag, .stat, .kv, .kvl, section, article, aside, header, footer, nav, figure) { background: none !important; }
  html[data-v5-page] .v5 .band-alt::before, html[data-v5-page] .v5 .band-alt::after { display: none !important; }
  /* the fills that carry meaning keep their colour on paper */
  html[data-v5-page] body:not([data-print-protocol]) .v5 :is(.grade, .grade *, .medal, .medal *, .pil, .pil *, .bar, .bar *, .heat > span, .cb-heat *, .th-wbar *, .cb-wbar *, .stars, .stars *, .sring, .sring *, .brand-mark) { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
  /* the dark .mod.prime bar prints as a ruled header in ink */
  html[data-v5-page] .v5 .mod.prime > .mod-h { background: none !important; color: var(--ink) !important; border-bottom: 2px solid var(--v4-rule) !important; }
  /* the navy bars print on white, so their grade tiles take the paper set again (primitives.css lifts them on screen) */
  html[data-v5-page] .v5 :is(.mod.prime > .mod-h, .sp-ency .mod-h, .fx thead th.here, .fx-c.here .fx-ch) {
    --grade-a: oklch(.52 .12 150); --grade-b: oklch(.48 .17 264); --grade-c: oklch(.53 .13 55); --grade-d: oklch(.42 .13 20); --on-grade: oklch(.99 .004 85);
  }
  html[data-v5-page] .v5 :is(.mod.prime > .mod-h, .sp-ency .mod-h, .fx thead th.here, .fx-c.here .fx-ch) .grade.g-n { --gc: var(--ink-3); }

  /* ---------- what does not print: the chrome and every control ---------- */
  html[data-v5-page] body:not([data-print-protocol]) :is(
    .site-head, .bbar-w, .bbar, .v5.foot, [data-topic-block], [data-topic-links], [id^="topic-links-"], .th-topics, .tnav-w, .cookie-banner, [data-ask-kymata-root], [data-ask-open], [data-ask-inline], [data-ask-nudge],
    .toast, .k-pop, .sv-pop, .ph-acts, .snav-w, .secnav, .seg, .tsize, .theme-btn, .aa-btn, .refine, .nb-toc-mobile, .ks-layer, .search, .hsearch,
    .btn, .iconbtn, .chip, .ctl-btn, .textbtn, main button:not([aria-pressed="true"], [aria-checked="true"], .im-node), .im-hint, .tabs-u, [role="tablist"], [data-print-skip],
    input:is([type="search"], [type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), [role="combobox"], .cab-combo, .cab-hint,
    ins.adsbygoogle, iframe, video, audio, noscript
  ) { display: none !important; }
  /* the sticky CTA bars and their spacers (components/ui/rank/StickyMobileCTA marks <html>; its CSS module hides the bar) */
  html[data-v5-page] body:not([data-print-protocol]) .cb-stk { display: none !important; }
  /* a calculator's own fields print as their values on a rule (no chevrons) */
  html[data-v5-page] main.v5 .sel .i { display: none !important; }
  html[data-v5-page] main.v5 :is(input, select, textarea) { appearance: none; border: 0 !important; border-bottom: 1px solid var(--line-2) !important; border-radius: 0 !important; background: none !important; color: var(--ink) !important; }
  /* sticky and fixed things sit in the flow on paper (a sticky table column, a sticky side TOC) */
  html[data-v5-page] .v5 :is([style*="sticky"], .ph-side, th, td) { position: static !important; }

  /* scrollers print whole: no edge fades, no clipped columns */
  html[data-v5-page] .v5 :is(.ledger-w, .fx-wrap, .fx-scroll, .crumbs, .mod, .mod-b, .wrap, .chapter, .mods, .split, [class*="scroll"]) { overflow: visible !important; mask-image: none !important; -webkit-mask-image: none !important; max-height: none !important; }
  html[data-v5-page] .v5 :is(.ledger-w, .fx-scroll)::before, html[data-v5-page] .v5 :is(.ledger-w, .fx-scroll)::after { display: none !important; }
  html[data-v5-page] main.v5 .qc { display: none !important; }   /* a calculator's quick-value chips (the field above prints the value) */
  html[data-v5-page] .v5 .chapter { content-visibility: visible !important; contain: none !important; }

  /* folded reading content opens on paper (print-prep.ts opens it; this covers a print the script did not see) */
  html[data-v5-page] .v5 details::details-content { content-visibility: visible; display: block; }
  html[data-v5-page] .v5 details > summary { list-style: none; }
  html[data-v5-page] .v5 details > summary::-webkit-details-marker { display: none; }
  html[data-v5-page] .v5 :is(.row-chev, summary svg) { display: none !important; }

  /* ---------- type: ink on white, comfortable measure ---------- */
  html[data-v5-page] .v5 { font-size: 1rem; line-height: 1.5; }
  html[data-v5-page] .v5 :is(p, li, dd, td, th, figcaption, blockquote) { orphans: 3; widows: 3; }
  html[data-v5-page] .v5 h1 { font-size: 2.15rem !important; max-width: none !important; }
  html[data-v5-page] .v5 :is(h1, h2, h3, h4, .mod-h, .chap, .glance-h, summary) { break-after: avoid; page-break-after: avoid; }
  html[data-v5-page] .v5 a { color: inherit !important; }

  /* ---------- nothing splits across pages: modules, rows, figures, table rows ---------- */
  html[data-v5-page] .v5 :is(.stat, .stats, .kv > *, .kvl > *, .glance-list > li, .rows > *, .mod-rows > *, .mod-h, .mod-f, figure, img, svg, picture, blockquote, .callout-ruled, .mband, .fx-c, dl > div, .sc-h, .sc-b, .im-b, :is(ul, ol):not([class]) > li) { break-inside: avoid; page-break-inside: avoid; }
  html[data-v5-page] .v5 :is(tr, thead, .ledger .r) { break-inside: avoid; page-break-inside: avoid; }
  html[data-v5-page] .v5 thead { display: table-header-group; }
  /* modules lay out as blocks on paper: a flex column fragments badly (a module whose first block moves on left its
     empty frame behind) */
  html[data-v5-page] .v5 .mod { display: block; }
  /* a module may run on to the next page (holding each one whole left half-empty pages); its header stays with its
     first rows, its rows stay whole, and a short module (a card in a grid, a stat card) does not split */
  html[data-v5-page] .v5 .mod:not(:has(.mod-b > * + * + *, table, .rows, .mod-rows, ul, ol, dl)) { break-inside: avoid; page-break-inside: avoid; }
  /* link lists whose rows are subgrids: Chromium overlaps a subgrid row moved to the next page, so on paper each row is
     its own grid with the list's tracks (inherit), and a short list moves whole */
  html[data-v5-page] .v5 :is(.pm-links, .sp-links, .sp-al, .hb-links) :is(li, a) { grid-template-columns: inherit; column-gap: inherit; }
  html[data-v5-page] .v5 .mod:has(> :is(ul, ol)[class*="links"]):not(:has(li:nth-child(7))) { break-inside: avoid; page-break-inside: avoid; }
  html[data-v5-page] .v5 :is(.chapter, .band-alt) { padding-top: 1.75rem !important; padding-bottom: 0 !important; }
  html[data-v5-page] .v5 .phead { padding-top: 0 !important; }
  html[data-v5-page] .v5 :is(img, svg, picture, video) { max-width: 100% !important; }
  html[data-v5-page] .v5 .ph-side :is(img, picture) { max-height: 14rem; width: auto; }

  /* ---------- links: sources print their URL; paid links print as text, marked ---------- */
  html[data-v5-page] main.v5 a[href^="http"]:not([rel~="sponsored"]):not(.cta-solid):not(.btn):not([href*="kymatahealth.com"])::after {
    content: " (" attr(href) ")"; font: 400 .8em/1.35 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; word-break: break-all; text-decoration: none;
  }
  html[data-v5-page] main.v5 :is(.cta-solid, a[rel~="sponsored"]) {
    display: inline !important; min-height: 0 !important; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important;
    color: var(--ink) !important; font-weight: 600; text-decoration: underline; text-underline-offset: .15em;
  }
  html[data-v5-page] main.v5 :is(.cta-solid, a[rel~="sponsored"]) svg { display: none !important; }
  html[data-v5-page] main.v5 :is(a[rel~="sponsored"], a[href^="/go/"]):not(:has([data-paid-inline])):not(:has(+ [data-paid-inline]))::after {
    content: " (paid link)"; font-weight: 400; color: var(--ink-2); text-decoration: none; display: inline;
  }

  /* ---------- the colophon: where and when this was printed, and the disclaimer ---------- */
  html[data-v5-page] main.v5 > .pfoot { display: block !important; margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--ink); font-size: .8125rem; line-height: 1.45; color: var(--ink-2); break-inside: avoid; }
  html[data-v5-page] main.v5 > .pfoot p { margin: 0 0 .25rem; }
  html[data-v5-page] main.v5 > .pfoot .pfoot-src { color: var(--ink); font-weight: 560; }
  html[data-v5-page] main.v5 > .pfoot .pfoot-src::before { content: "Printed from " attr(data-print-src) attr(data-print-date); }
}