/* Paper. The A4 sheets lib/print.js mounts in #print between beforeprint
   and afterprint: on screen the container never shows, on paper it is the
   only thing that does. Every measure is in mm and pt — the validated mock's
   proportions at true size — and the colours are the light palette's ink
   and greys, fixed whatever the screen theme. Two paged layouts to please:
   Chrome's, which honours @page and repeats table bands, and WebKit's —
   Safari, every browser on an iPhone — which does neither; the block at the
   end is what the latter needs. */
#print{display:none}

@media print{
  /* the page box has no margin of its own: each sheet is a table whose
     repeated header and footer bands give every page its top and bottom
     margin, and the bottom band is where the fixed page footer lives — a
     margin on @page would put the footer either over the last line of a
     full page or, negative, on the next page */
  @page{size:A4;margin:0}
  /* with sheets on the page they are all that prints; without, ⌘P prints
     the page as the browser sees it */
  html:has(#print){background:#fff!important}
  body:has(#print){margin:0;padding:0;background:#fff!important;display:block;min-height:0;height:auto}
  body:has(#print)>:not(#print){display:none!important}
  #print{
    display:block;color:#1c1a17;
    font:7.8pt/1.35 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    font-variant-numeric:tabular-nums;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  #print *{min-width:0;box-sizing:border-box}

  /* ---------- the sheet ---------- */
  /* the page's width, never 210mm: a sheet wider than the printable area
     is shrunk to fit by WebKit, whose margins are its own */
  .sheet{border-collapse:collapse;border-spacing:0;width:100%;table-layout:fixed}
  .sheet:not(:first-child){break-before:page}
  .sheet td{padding:0;vertical-align:top}
  .sheet .p-top{height:11.8mm}
  .sheet .p-bot{height:13.6mm}
  .sheet .p-body{padding:0 12.3mm}

  .p-head{
    display:flex;justify-content:space-between;align-items:flex-end;gap:5.5mm;
    padding-bottom:2.9mm;border-bottom:.4mm solid #1c1a17;margin-bottom:4.8mm;
  }
  .p-eye{font-size:6pt;letter-spacing:.16em;text-transform:uppercase;color:#6c665d;margin-bottom:.9mm}
  .p-head h1{font-size:19pt;line-height:1.05;letter-spacing:-.02em;margin:0;font-weight:700;text-wrap:balance}
  .p-notes{font-size:7.3pt;color:#6c665d;margin:1.65mm 0 0;max-width:114mm}
  .p-meta{text-align:right;font-size:6.3pt;color:#6c665d;line-height:1.5;white-space:nowrap;flex:none}
  .p-meta b{color:#1c1a17;font-weight:600}
  .p-foot{
    position:fixed;left:12.3mm;right:12.3mm;bottom:5.9mm;
    display:flex;justify-content:space-between;font-size:5.7pt;color:#9a9289;letter-spacing:.02em;
  }
  .p-none{font-size:7.3pt;color:#9a9289;font-style:italic;margin:0}

  /* ---------- sheet A: the workshop sheet ---------- */
  .p-fig{margin-bottom:5.2mm}
  .p-fig:last-child{margin-bottom:0}
  .p-fig h2{font-size:10.4pt;margin:0 0 .55mm;letter-spacing:-.01em;display:flex;align-items:baseline;gap:2.2mm;break-after:avoid}
  .p-cnt{font-size:6pt;font-weight:500;color:#9a9289;letter-spacing:.04em}
  .p-fnotes{font-size:6.8pt;color:#6c665d;margin:0 0 1.65mm;break-after:avoid}
  .p-row{
    display:grid;grid-template-columns:31mm 1fr;gap:0 2.9mm;padding:2.4mm 0;
    border-top:.25mm solid #dedad3;align-items:start;break-inside:avoid;
  }
  .p-row:last-child{border-bottom:.25mm solid #dedad3}
  .p-sn{font-weight:700;font-size:8.3pt;text-transform:capitalize}
  .p-rn{font-size:6.5pt;color:#6c665d;margin-top:.2mm}
  .p-rnotes{font-size:5.7pt;color:#9a9289;font-style:italic;margin-top:.45mm}
  .p-strip{display:flex;flex-wrap:wrap;gap:1.65mm 2.6mm}
  .p-step{display:grid;grid-template-columns:6.6mm 1fr;gap:0 1.5mm;align-items:start;width:29mm;flex:none;position:relative}
  .p-step + .p-step::before{content:"›";position:absolute;left:-2.1mm;top:1.65mm;color:#9a9289;font-size:8.3pt;line-height:1}
  .p-sw{width:6.6mm;height:6.6mm;border-radius:1.3mm;box-shadow:inset 0 0 0 .25mm rgba(0,0,0,.18);background:#eeebe6;grid-row:span 3}
  .p-sw.none{background:repeating-linear-gradient(135deg,#fff 0 .9mm,#dedad3 .9mm 1.3mm)}
  .p-pn{font-size:7.3pt;font-weight:600;line-height:1.15;overflow-wrap:anywhere}
  .p-undef{font-weight:500;font-style:italic;color:#6c665d}
  .p-role{font-size:5.4pt;letter-spacing:.06em;text-transform:uppercase;color:#8a5a2b;line-height:1.3;margin-top:.37mm}
  .p-pb{font-size:5.5pt;color:#9a9289;line-height:1.3;overflow-wrap:anywhere}
  .p-nt{font-size:5.5pt;color:#6c665d;font-style:italic;grid-column:2;line-height:1.25;margin-top:.28mm}
  /* a recipe already described above: its swatches and a reference */
  .p-again{display:flex;align-items:center;gap:1.1mm;flex-wrap:wrap}
  .p-again .p-sw{width:4.8mm;height:4.8mm;border-radius:.9mm;grid-row:auto}
  .p-ref{font-size:6pt;color:#9a9289;margin-left:1.5mm;font-style:italic}

  /* ---------- sheet B: the paints list ---------- */
  .p-grp{
    font-size:6pt;letter-spacing:.14em;text-transform:uppercase;color:#6c665d;
    margin:4mm 0 1.1mm;padding-bottom:.75mm;border-bottom:.25mm solid #dedad3;
    display:flex;justify-content:space-between;break-after:avoid;
  }
  .p-head + .p-grp{margin-top:0}
  .p-li{
    display:grid;grid-template-columns:4.8mm 4mm 1fr 22mm 40.5mm 13mm;gap:0 2.2mm;align-items:center;
    padding:1.15mm 0;border-bottom:.25mm solid #eeebe6;font-size:7.3pt;break-inside:avoid;
  }
  .p-li .p-sw{width:4mm;height:4mm;border-radius:.85mm;grid-row:auto}
  .p-nm{font-weight:600;overflow-wrap:anywhere}
  .p-rg,.p-use{font-size:6pt;color:#6c665d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p-pr{text-align:right}
  .p-li.own .p-nm{font-weight:500;color:#6c665d}
  .p-li.own .p-pr{color:#9a9289}
  .p-cb{width:4mm;height:4mm;border:.3mm solid #1c1a17;border-radius:.75mm;display:grid;place-items:center;background:#fff}
  .p-cb svg{width:2.9mm;height:2.9mm;display:none}
  .p-cb.on{background:#1c1a17;border-color:#1c1a17}
  .p-cb.on svg{display:block}
  .p-tot{
    display:flex;justify-content:space-between;align-items:baseline;gap:5.5mm;
    margin-top:4mm;padding-top:2.2mm;border-top:.4mm solid #1c1a17;font-size:7.6pt;break-inside:avoid;
  }
  .p-tot b{font-size:9.9pt}
  .p-miss{color:#9a9289;font-size:6pt}
  .p-legend{display:flex;gap:4mm;font-size:6pt;color:#6c665d;align-items:center;flex:none}
  .p-legend span{display:inline-flex;align-items:center;gap:1.1mm}
  .p-legend .p-cb{width:3.1mm;height:3.1mm;border-radius:.55mm}
  .p-legend .p-cb svg{width:2.2mm;height:2.2mm}

  /* ---------- sheet C: my pots, three dense columns ---------- */
  /* the columns are the template's, cut to the page (lib/print.js): CSS
     columns balance per page in Chrome but stack one per page in WebKit */
  .p-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 5.5mm;align-items:start}
  .p-cols .p-grp{margin-top:2.9mm}
  .p-col>.p-grp:first-child{margin-top:0}
  .p-pot{
    display:grid;grid-template-columns:3.3mm 3.3mm 1fr;gap:0 1.5mm;align-items:center;
    font-size:6.4pt;padding:.6mm 0;break-inside:avoid;
  }
  .p-pot .p-cb{width:3.3mm;height:3.3mm;border-radius:.65mm;border-width:.25mm}
  .p-pot .p-sw{width:3.3mm;height:3.3mm;border-radius:.75mm;grid-row:auto}
  .p-pot .p-nm{font-weight:400;line-height:1.2}
  .p-pot .p-nm i{font-style:normal;color:#9a9289;font-size:5.3pt;margin-left:.9mm}

  /* ---------- sheet D: the shopping list, sheet B without the recipes ---------- */
  .p-wish .p-li{grid-template-columns:4.8mm 4mm 1fr 25.8mm 12.9mm}

  /* ---------- WebKit's paged layout ---------- */
  /* Safari, and every browser on an iPhone, ignores @page, prints inside
     margins of its own (12.7 mm on iOS), repeats neither thead nor tfoot
     and drops a fixed box at the screen's height on the first page. The
     one thing CSS can tell it by is a font keyword only it parses. There
     the sheet's own margins stand down and the footer closes the print
     as a plain last line. */
  @supports (font: -apple-system-body){
    .sheet .p-top,.sheet .p-bot{height:0}
    .sheet .p-body{padding:0}
    .p-foot{position:static;margin-top:8mm}
  }
  /* Safari on a Mac prints inside the printer's margins — none at all when
     saving to PDF — but honours @page, unlike iOS whose 12.7 mm are its
     own and would add up: the bands' margins go there, on every page */
  @supports (font: -apple-system-body) and (not (-webkit-touch-callout: none)){
    @page{margin:11.8mm 12.3mm 13.6mm}
  }
}