/* One design language for paper (Stephen, 10/4/26). Linked, with /print.js, from every page that prints.
   Pairs with theme.css (loaded first): it reads --accent, --font-display and --font-text from there, so the sheet follows
   the season with nothing to update by hand.

   What a printed page is made of
     header   in the page, first page only: the title (Outfit), the date printed, the family name, an empty spot for a
              reference number, and one thin rule in the season's color. Pages after the first get the title and date
              small in the top margin where the browser can draw page margin boxes.
     footer   the release name (YYYY.MM.DD.NNN, from /data/me) at the left and "Page x of y" in the season's ink at the
              right. Only browsers that draw @page margin boxes can count pages (Chrome, Edge and other Chromium).
              Safari, iOS and Firefox get the release name alone, in the page after the last line.
     scale    six sizes: title 21, heading 14, body 10.5, small 9, label 8, micro 6.5 (points). Outfit for titles and
              figures, Figtree for text.
     margins  top .6in, sides .75in, bottom .7in: 7.0in by 9.7in of room, the same on every page.
     color    white paper and black text. The season's color shows only as the thin rule, the page number, the section
              labels and the reference number. Never a filled block, so every sheet reads the same in black and white.
     parts    .pr-label (section label), table.pr-table, .pr-box (a box to tick) and input.pr-tick (a real checkbox drawn as
              one), .pr-ref (the reference number).
   Portrait only. This file styles paper; on screen it adds nothing except what the Tasks sheet preview borrows
   (the .pr-box and the tokens). */

:root {
  --pr-ink: #111;
  --pr-mute: #5f5a4e;
  --pr-soft: #756e5f;
  --pr-rule: #d9d3c5;
  --pr-hair: #b3ac9b;
  --pr-late: #8a2a19;
  --pr-accent: var(--accent, #b08a24);
  --pr-accent-ink: #5c4a12;
  --pr-disp: var(--font-display, 'Outfit', system-ui, sans-serif);
  --pr-text: var(--font-text, 'Figtree', system-ui, sans-serif);
  --pr-fs-title: 21pt;
  --pr-fs-h: 14pt;
  --pr-fs-body: 10.5pt;
  --pr-fs-small: 9pt;
  --pr-fs-label: 8pt;
  --pr-fs-micro: 6.5pt;
}
/* The accent as ink: the season's color pushed toward black (55 percent accent, 45 percent black) so small type stays
   readable on white in all twelve months; tools/print-sheet-test.mjs checks 4.5 to 1 for every day of the year. Always
   worked out from --accent, not --accent-ink, which turns light in dark mode. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --pr-accent-ink: color-mix(in srgb, var(--pr-accent) 55%, #000); }
}

/* a box to tick; .ck is a ticked one, crossed */
.pr-box { display: inline-block; flex: none; width: 0.8em; height: 0.8em; border: 1pt solid var(--pr-ink); border-radius: 1.5pt; background: #fff; vertical-align: -0.05em; }
.pr-box.ck { -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background: linear-gradient(135deg, transparent 45%, var(--pr-ink) 46%, var(--pr-ink) 54%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--pr-ink) 46%, var(--pr-ink) 54%, transparent 55%); }

/* A real checkbox (one a person ticks on screen) drawn as the paper box: empty, or crossed when checked. Print only. */
@media print {
  /* the hero band (theme.css .ln-band, R-0496): no fill, no border, no contour on paper; the head reads as plain type */
  .ln-sys main .ln-band { margin: 0 0 8pt; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .ln-sys main .ln-band > svg.ln-topo { display: none; }
  .ln-sys main .ln-crumb { display: none; }
}
@media print {
  input[type=checkbox].pr-tick { -webkit-appearance: none; appearance: none; flex: none; width: 0.8em; height: 0.8em; margin: 0; padding: 0; border: 1pt solid var(--pr-ink); border-radius: 1.5pt; background: #fff; accent-color: var(--pr-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  input[type=checkbox].pr-tick:checked { background: linear-gradient(135deg, transparent 45%, var(--pr-ink) 46%, var(--pr-ink) 54%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--pr-ink) 46%, var(--pr-ink) 54%, transparent 55%); }
}

/* Header and footer parts exist only on paper (print.js builds them). */
.pr-head, .pr-foot { display: none; }

/* Margin boxes. Browsers that do not draw them skip this block whole. The words arrive as custom properties from
   print.js (--pr-run-l, --pr-run-r, --pr-foot-l), so nothing here names a page. */
@page {
  size: letter portrait;
  margin: 0.6in 0.75in 0.7in;
  @top-left { content: var(--pr-run-l, none); font: 500 8pt/1 'Figtree', system-ui, sans-serif; color: #5f5a4e; vertical-align: bottom; padding-bottom: 8pt; }
  @top-right { content: var(--pr-run-r, none); font: 400 8pt/1 'Figtree', system-ui, sans-serif; color: #5f5a4e; vertical-align: bottom; padding-bottom: 8pt; text-align: right; }
  @bottom-left { content: var(--pr-foot-l, none); font: 400 8pt/1 'Figtree', system-ui, sans-serif; color: #5f5a4e; vertical-align: top; padding-top: 9pt; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 600 8pt/1 'Figtree', system-ui, sans-serif; color: var(--pr-accent-ink, #5c4a12); vertical-align: top; padding-top: 9pt; text-align: right; }
}
@page :first {
  @top-left { content: none; }
  @top-right { content: none; }
}

@media print {
  :root, html:root { color-scheme: light; }
  html, body { background: #fff !important; color: var(--pr-ink); }

  .pr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18pt; margin: 0 0 12pt; padding: 0 0 7pt;
    border-bottom: 1.25pt solid var(--pr-accent); break-after: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-head .pr-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 500 var(--pr-fs-title)/1.1 var(--pr-disp); letter-spacing: -0.015em; color: var(--pr-ink); overflow-wrap: anywhere; }
  .pr-head .pr-meta { flex: none; text-align: right; font: 400 var(--pr-fs-label)/1.4 var(--pr-text); color: var(--pr-mute); white-space: nowrap; padding-bottom: 1pt; }
  .pr-head .pr-meta span { display: block; }
  .pr-head .pr-fam { font-weight: 600; color: var(--pr-ink); }
  /* the reserved spot for a reference number: above the date, empty until a page fills it (LeasePrint.set({ ref })) */
  .pr-head .pr-ref { font: 600 var(--pr-fs-label)/1.4 var(--pr-text); letter-spacing: 0.06em; color: var(--pr-accent-ink); }
  .pr-head .pr-ref:empty { display: none; }

  html:not(.pr-mb) .pr-foot { display: flex; justify-content: space-between; gap: 12pt; margin-top: 14pt; padding-top: 6pt; border-top: 0.5pt solid var(--pr-rule);
    font: 400 var(--pr-fs-label)/1.3 var(--pr-text); color: var(--pr-mute); break-before: avoid; }

  /* section label: small caps in the season's ink over a black hairline */
  .pr-label, .ln-sys main .pr-label { margin: 0 0 4pt; padding-bottom: 5pt; border-bottom: 0.5pt solid var(--pr-ink); break-after: avoid;
    font: 600 var(--pr-fs-label)/1 var(--pr-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pr-accent-ink); }

  /* the one table: black header rule, hairlines between rows, no fills */
  /* In-page tabs (R-0481): every part prints, in order, under its tab name; the page's own section labels sit under it. */
  .ln-tabname, .ln-sys main .ln-tabname { display: block; margin: 18pt 0 4pt; font: 500 var(--pr-fs-h)/1.2 var(--pr-disp); color: var(--pr-ink); break-after: avoid; }
  .ln-tabpane:first-of-type > .ln-tabname { margin-top: 0; }
  table.pr-table { width: 100%; border-collapse: collapse; font: 400 var(--pr-fs-small)/1.35 var(--pr-text); color: var(--pr-ink); }
  table.pr-table th { padding: 0 6pt 4pt; text-align: left; font: 600 var(--pr-fs-micro)/1.2 var(--pr-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pr-mute); border-bottom: 0.75pt solid var(--pr-ink); background: none; opacity: 1; }
  table.pr-table td { padding: 3pt 6pt; border-bottom: 0.5pt solid var(--pr-rule); background: none; vertical-align: top; }
  table.pr-table tr { break-inside: avoid; }
  table.pr-table thead { display: table-header-group; }
}