/* Print: the optimizer's plan as a shop cut list.
   White paper, no grid. Parts stay white with their outlines; drop
   to keep and scrap keep their hatches, so every region reads on a
   black-and-white laser. Measurements 12pt and up, part labels 14pt bold.
   No bar splits across pages. The plan's own print header (date, kerf,
   bars, yield, drop, and the legend in words) is shown only here.
   Why: apps/public_site/DESIGN.md, "Why these fonts and colours". */

@page {
  size: landscape;
  margin: 0.5in;
}

@media print {
  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
    animation: none !important;
    clip-path: none !important;
  }

  /* Only the plan: no site chrome, hero, form, or buttons. */
  body > header,
  body > footer,
  body > a[href="#main"],
  main > .paper,
  form,
  button {
    display: none !important;
  }

  .paper,
  .paper-fade::before {
    background: #fff !important;
    background-image: none !important;
  }

  main,
  [id$="-live"] > div {
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Header: what the sheet is, and the facts a sawyer checks first. */
  .print-header {
    border-bottom: 1.5pt solid #000;
    padding-bottom: 8pt;
    margin-bottom: 10pt;
  }

  .print-brand {
    margin: 0;
    font-size: 16pt;
    font-weight: 700;
  }

  .print-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4pt 24pt;
    margin: 6pt 0 0;
    font-size: 12pt;
  }

  .print-facts dt {
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .print-facts dd {
    margin: 0;
    font-weight: 700;
  }

  .print-legend {
    margin: 6pt 0 0;
    font-size: 10pt;
  }

  /* The summary tile prints as a plain outlined box. */
  .bg-ink {
    background: #fff !important;
    color: #000 !important;
  }

  .bg-ink *,
  .text-white {
    color: #000 !important;
  }

  .bg-keep-soft {
    background: #fff !important;
  }

  /* One bar per block, never split. */
  .layout-card {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 14pt;
  }

  .layout-card > div:first-child {
    font-size: 14pt;
  }

  .bar {
    height: 40pt;
    background: #000 !important;
    border: 1.5pt solid #000 !important;
  }

  .seg {
    font-size: 12pt;
    color: #000 !important;
  }

  .seg.part {
    background: #fff !important;
    font-size: 14pt;
    font-weight: 700;
  }

  .seg.drop {
    background: repeating-linear-gradient(45deg, #000 0 1pt, #fff 1pt 6pt) !important;
  }

  .seg.drop > span {
    background: #fff;
    padding: 0 3pt;
    font-weight: 700;
  }

  .seg.scrap {
    background:
      repeating-linear-gradient(45deg, #777 0 0.75pt, transparent 0.75pt 5pt),
      repeating-linear-gradient(-45deg, #777 0 0.75pt, transparent 0.75pt 5pt),
      #fff !important;
  }

  .ruler {
    border-color: #000;
  }

  .dim {
    font-size: 12pt;
    color: #000 !important;
  }

  /* Tick-box checklist of each bar's cuts. */
  .print-manifest {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2pt 16pt;
    font-size: 12pt;
  }

  .manifest-line {
    display: inline-flex;
    align-items: center;
    gap: 5pt;
  }

  .tick {
    display: inline-block;
    width: 10pt;
    height: 10pt;
    border: 1pt solid #000;
  }

  a {
    color: #000 !important;
    text-decoration: none !important;
  }
}

/* Print tokens: ink on white paper. */
:root {
  --color-page: #FFFFFF;
  --color-paper: #FFFFFF;
  --color-paper-tint: #F4F4F2;
  --color-ink: #111111;
  --color-ink-soft: #2A2A2A;
  --color-muted: #6B6B6B;
  --color-faint: #8C8C8C;
  --color-line: #E6E6E4;
  --color-line-strong: #CFCFCB;
  --color-link: #111111;
  --color-link-strong: #000000;
  --color-part-soft: #F8F8F7;
  --color-keep-soft: #EEF1FD;
  --color-danger: #B3261E;
  --color-danger-soft: #FBEAE8;
  --color-ok: #111111;
  --color-ok-soft: #E6F2EC;
}

:root {
  --plan-sheet: #FFFFFF;
  --plan-edge: #111111;
  --plan-line: #111111;
  --plan-part-fill: #F2F2F0;
  --plan-part-edge: #111111;
  --plan-part-text: #111111;
  --plan-keep-fill: #DCE3FA;
  --plan-keep-edge: #111111;
  --plan-keep-text: #1C2FD6;
  --plan-scrap-line: #A3A3A3;
  --plan-scrap-fill: #FFFFFF;
  --plan-blocked-fill: #FBEAE8;
  --plan-blocked-edge: #8C1D18;
}

.plan-surface, .paper {
  --color-page: #FFFFFF; --color-paper: #FFFFFF; --color-paper-tint: #F4F4F2;
  --color-ink: #111111; --color-ink-soft: #2A2A2A; --color-muted: #6B6B6B; --color-faint: #8C8C8C;
  --color-line: #E6E6E4; --color-line-strong: #CFCFCB; --color-link: #111111; --color-link-strong: #000000;
  background-image: none;
}