/* Paper: every printout Honest Dinner makes, in ONE stylesheet (the print round, 2026-10-29).

   Linked with media="print" from the app (index.html), the website's pages (app/legal.py, app/wrapped.py) and the
   owner's printouts (owner-print.html), so screen and paper can't drift: on screen a sheet is hidden (app.css,
   ".print-sheet"); in print the screen is hidden and the sheet is the page. Every rule here that touches a screen
   selector says which screen rule it overrides, and tests/test_print_round.py holds each such selector to a rule
   that still exists on screen.

   The standard is docs/prospectus/README.md, "Print-first", and docs/BRAND.md, "Paper": a white page whatever the
   phone's theme, near-black ink, nothing under 10pt, rules at 1.25px, eucalyptus #336B5D, sage #A9C9BE and honey
   #D4A64E and no other colour (Bowlby and the logo are themselves), nothing that carries meaning in a light tint,
   Bowlby once and small in the top right, warnings in ONE place at the foot (the "Good to know" box, the same
   shape on every sheet), never a family's name. scripts/print_check.mjs prints every printout and reads the paper. */

/* ---------- the app's sheets (app.js paperSheet: the list, a recipe, the week, the pick sheet, Help) ---------- */
@media print {
  @page { size: letter; margin: 0.5in; }
  /* overrides :root, and the dark theme's tokens (the prefers-color-scheme rule and :root[data-theme="dark"]):
     paper is light whatever the phone's theme, and a dark root would print dark page margins */
  :root.hd-app, :root.hd-app:not([data-theme="light"]), :root.hd-app[data-theme="dark"] {
    color-scheme: light only;
    --ink: #111; --soft: #333; --line: #A9C9BE; --action: #336B5D; --sage-ink: #336B5D;
    --honey: #E6C07A; --bowl: #B04E4A; --oat: #fff; --linen: #fff; --mist: #fff;
    --paper-ink: #111; --paper-soft: #333; --paper-euc: #336B5D; --paper-sage: #A9C9BE; --paper-honey: #D4A64E;
  }
  /* overrides html and body { background: var(--oat); color: var(--ink) } */
  html.hd-app, .hd-app body { background: #fff !important; color: #111; }
  /* overrides body::before (the glow) and hides the screen: only the sheet prints */
  .hd-app body::before, .hd-app body > :not(#app), #app > :not(.print-sheet) { display: none !important; }
  /* overrides .shell { max-width: 560px; margin: 0 auto; padding: ... } */
  .shell { max-width: none; margin: 0; padding: 0; }
  /* overrides .bowlby.alive .figure, .wisps, .eyes, .arm (no movement on paper) */
  .bowlby .figure, .bowlby .wisps, .bowlby .eyes, .bowlby .arm { animation: none !important; }

  .print-sheet { display: flex; flex-direction: column; min-height: 9.5in; color: var(--paper-ink);
    font: 400 11pt/1.4 var(--body); }
  .print-sheet, .print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* The header: what the sheet is, its name and its date, Bowlby small in the top right. */
  .p-head { display: flex; align-items: flex-start; gap: 12pt; padding-bottom: 6pt;
    border-bottom: 1.25px solid var(--paper-euc); break-inside: avoid; }
  .p-titles { flex: 1; min-width: 0; }
  .p-kicker { font: 800 10pt/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-euc); }
  .p-title { font: 600 20pt/1.15 var(--head); color: var(--paper-ink); margin: 2pt 0 0; }
  .p-date { font-size: 11pt; color: var(--paper-soft); margin-top: 2pt; }
  .p-mark { flex: none; width: 34pt; height: 34pt; }
  .p-mark svg { width: 34pt; height: 34pt; }
  .p-body { flex: 1; padding-top: 8pt; }
  .p-sec { margin-top: 8pt; }
  .p-sec h2 { font: 600 13.5pt/1.25 var(--head); color: var(--paper-ink); margin: 0 0 3pt; break-after: avoid; }
  .p-sec h3 { font: 800 10pt/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-euc);
    margin: 4pt 0 2pt; break-after: avoid; }
  .p-cols { columns: 2; column-gap: 18pt; }
  .print-sheet ul, .print-sheet ol { margin: 0; padding: 0; }
  .print-sheet ul { list-style: none; }
  .p-aisle { break-inside: avoid; margin-bottom: 4pt; }
  .p-row, .p-aisle li { display: flex; align-items: baseline; gap: 7pt; padding: 3pt 0;
    border-bottom: 1.25px solid var(--paper-sage); break-inside: avoid; }
  /* A box that reads on any printer: a dark border, an open middle, no background to lose. */
  .p-box { flex: none; width: 11pt; height: 11pt; border: 1.5pt solid var(--paper-ink); border-radius: 2pt;
    background: none; transform: translateY(1.5pt); display: grid; place-items: center; font-size: 10pt; line-height: 1; }
  .p-name { flex: 1; min-width: 0; }
  .p-name small { font-size: 10pt; color: var(--paper-soft); }
  .p-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .p-price em { font-style: normal; font-weight: 800; font-size: 10pt; letter-spacing: .04em; text-transform: uppercase; }
  .p-got .p-name { text-decoration: line-through; color: var(--paper-soft); }
  .p-nights { columns: 2; column-gap: 18pt; padding: 4pt 0 2pt; }
  .p-nights li { break-inside: avoid; padding: 1pt 0; }
  .p-nights b { display: inline-block; min-width: 76pt; }
  .p-meta { color: var(--paper-soft); }
  .p-week .p-row { padding: 6pt 0; font-size: 12pt; }
  /* The pick sheet: big boxes and tall rows, for a child's tick at the kitchen table. */
  .p-lead { font-size: 13pt; margin: 2pt 0 6pt; }
  .p-picks .p-row { padding: 8pt 0; font-size: 13pt; align-items: center; }
  .p-picks .p-box { width: 15pt; height: 15pt; border-width: 1.75pt; transform: none; }
  .p-night { flex: none; width: 1.3in; }
  .p-steps { list-style: none; counter-reset: step; }
  .p-steps li { counter-increment: step; display: flex; gap: 8pt; padding: 4pt 0; break-inside: avoid; }
  .p-steps li::before { content: counter(step); flex: none; width: 16pt; font: 800 11pt/1.4 var(--body); color: var(--paper-euc); }
  .p-qa { break-inside: avoid; padding: 3pt 0 4pt; line-height: 1.35; border-bottom: 1.25px solid var(--paper-sage); }
  .p-qa b { display: block; }
  /* The foot: the warnings in one predictable place, the same shape every time, then the brand line. */
  .p-foot { margin-top: 12pt; break-inside: avoid; }
  .p-notes { border-top: 1.25px solid var(--paper-euc); padding-top: 4pt; margin-bottom: 8pt; font-size: 10pt; line-height: 1.35; }
  .p-notes b { display: block; font: 800 10pt/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase;
    color: var(--paper-euc); margin-bottom: 2pt; }
  .p-notes p + p { margin-top: 2pt; }
  .p-brand { display: flex; align-items: center; gap: 8pt; border-top: 1.25px solid var(--paper-honey); padding-top: 5pt;
    font-size: 10pt; line-height: 1.35; color: var(--paper-soft); }
  .p-brand .grow { flex: 1; }
  .p-brand b { color: var(--paper-ink); }
  .p-qr { flex: none; width: 0.8in; height: 0.8in; }
}

/* ---------- the website's pages: the documents and a shared week (app/legal.py, app/wrapped.py; <html class="hd-web">) ---------- */
@media print {
  /* overrides the pages' :root tokens and their prefers-color-scheme: dark tokens (app/wrapped.py's CSS, and the
     Thanksgiving CSS app/legal.py borrows): paper is light whatever the phone's theme */
  :root.hd-web { color-scheme: light only; --ink: #111; --soft: #333; --oat: #fff; --linen: #fff; --mist: #fff;
    --sage-soft: #fff; --honey-soft: #fff; --line: #A9C9BE; --action: #336B5D; --on-action: #fff; --bowl: #B04E4A;
    --shadow: none; }
  /* overrides body { background: var(--oat); color: var(--ink); font: 17px/1.5 ... } */
  .hd-web body { background: #fff !important; color: #111; font-size: 12pt; }
  /* overrides main { max-width: 640px; margin: 0 auto; padding: 18px 16px 56px } (and the documents' 680px) */
  .hd-web main { max-width: none; margin: 0; padding: 0; }
  /* overrides .card { background: var(--linen); border: 1px solid var(--line); border-radius: 22px; box-shadow } */
  .hd-web .card { background: #fff; border: 1.25px solid #A9C9BE; box-shadow: none; break-inside: avoid; }
  /* overrides .saved { background: var(--sage-soft); border-color: transparent } */
  .hd-web .saved { border: 1.25px solid #A9C9BE; }
  /* overrides h1, h2 { font-family: "Fraunces" ... }: a heading never ends a page */
  .hd-web h1, .hd-web h2, .hd-web h3 { color: #111; break-after: avoid; }
  /* overrides a { color: var(--action) } */
  .hd-web a { color: #111; text-decoration: none; }
  /* overrides .small { font-size: 14px }, .muted { color: var(--soft) }: nothing under 10pt, nothing faint */
  .hd-web .small { font-size: 10.5pt; }
  .hd-web .muted { color: #333; }
  /* overrides .btn, .join, .mailbox, .legal-nav and footer (shown on screen): what does nothing on paper */
  .hd-web .btn, .hd-web .join, .hd-web .mailbox, .hd-web .legal-nav, .hd-web footer { display: none !important; }
  /* overrides .only-print { display: none } (app/wrapped.py): the week's date, on paper only */
  .hd-web .only-print { display: block; }
  /* overrides .plates img (the dish drawings, in colour on screen): on paper they print in gray, only the
     brand's colours (Bowlby is himself) */
  .hd-web .plates img { filter: grayscale(1); }
}

/* ---------- the owner's two printouts (owner-print.html, /owner/printout/jen and /mom; <html class="hd-owner">) ---------- */
@media print {
  /* overrides :root { color-scheme: dark; --g: #2E8B60 } (owner-print.html): a light page, and the brand's green */
  :root.hd-owner { color-scheme: light only; --ink: #111; --soft: #333; --line: #A9C9BE; --g: #336B5D; }
  /* overrides html, body { background: #0b0f11; font: 14px/1.45 Nunito } */
  html.hd-owner, .hd-owner body { background: #fff !important; font-size: 11pt; }
  /* overrides .bar (the desk's link and Print button) */
  .hd-owner .bar { display: none; }
  /* overrides .sheet { max-width: 820px; margin: 0 auto 30px; padding: 36px 40px; border-radius: 6px } */
  .hd-owner .sheet { margin: 0; padding: 0; max-width: none; border-radius: 0; }
  /* overrides h2 { font: 800 12px }, .nums span, th, .note { 12px }, .trend small { 11px }, .trend .c b { 12px }:
     nothing under 10pt */
  .hd-owner h2, .hd-owner .nums span, .hd-owner th, .hd-owner .note, .hd-owner .trend small, .hd-owner .trend .c b { font-size: 10pt; }
  .hd-owner .nums span, .hd-owner th, .hd-owner .note, .hd-owner .trend small, .hd-owner h2 { color: #333; }
  /* overrides .nums div, td, th borders (1px, a light gray): rules at 1.25px in the brand's sage */
  .hd-owner .nums div { border: 1.25px solid #A9C9BE; }
  .hd-owner td, .hd-owner th { border-top: 1.25px solid #A9C9BE; }
  /* overrides .o-mark { width: 48px }: Bowlby small in the top right */
  .hd-owner .o-mark { width: 34pt; height: 34pt; }
  .hd-owner h2, .hd-owner table, .hd-owner .nums { break-inside: avoid; }
  .hd-owner h2 { break-after: avoid; }
}