/* Paper.
 *
 * Assume a monochrome laser printer and no color at all: a part is identified
 * by its printed label, never by its fill, and a cut line by its dash and its
 * number.
 *
 * The sheet this replaces was written against markup that no longer exists. It
 * hid `details.panel`, which the interface rebuild removed, so the whole input
 * column printed: a page of form fields, then notes, then two thirds of a page
 * of white, for seven pages total. Hide by structure, not by the name of a
 * widget that may be replaced.
 */

@page { margin: 0.5in; }

@media print {
  :root { --ink: #000; --ink-soft: #333; --line: #000; --line-soft: #999; }

  body { padding: 0; background: #fff; color: #000; font: 10pt/1.35 system-ui, sans-serif; }

  /* Everything you use to build the plan, and nothing you use to cut it. */
  .app-head,
  .landing,
  .inputs,
  .status,
  dialog,
  .figure-tools,
  .sheet-nav,
  .focus-back,
  .no-print { display: none !important; }

  /* One column, full width, no sticky panel and no scroll box. */
  .workspace { display: block; padding: 0; }
  .results { position: static; max-height: none; overflow: visible; }

  /* The parts of a sheet belong together on one page. */
  .sheet { break-inside: avoid; page-break-inside: avoid; margin: 0 0 10pt; padding: 6pt 0 0; border: 0; border-top: 1pt solid #000; border-radius: 0; }
  .material-section { break-inside: auto; margin: 0 0 12pt; }
  .material-section > h2 { break-after: avoid; page-break-after: avoid; font-size: 12pt; }
  .material-note { break-after: avoid; page-break-after: avoid; }
  .sheet > h3 { break-after: avoid; page-break-after: avoid; font-size: 10.5pt; }
  .sheet-todo, .cuts, .parts { break-inside: avoid; page-break-inside: avoid; }

  /* Diagram beside its cuts on paper too: a sheet then fits one page rather
     than running the picture down one page and the steps onto the next. */
  .sheet-grid { display: grid; grid-template-columns: 1fr 2.1in; gap: 10pt; align-items: start; }
  .sheet-view svg, .sheet-svg, .board-view svg, .board-svg { width: 100%; height: auto; max-height: 4.2in; }

  /* A turned picture keeps the space it reserved on screen. */
  .sheet-view.rotated { aspect-ratio: var(--turned-ratio); }

  /* Banners are one or two lines, not a page of their own. */
  .notes-banner, .banner-warn, .shopping-list, .banner-buy {
    margin: 0 0 6pt;
    padding: 4pt 6pt;
    border: 1pt solid #000 !important;
    border-radius: 0;
    background: none !important;
    break-inside: avoid;
  }

  .shopping-list h2 { font-size: 11pt; }
  .shopping-list a { color: #000; text-decoration: none; }

  /* Checkboxes print as boxes to tick with a pencil. */
  .parts input[type="checkbox"], .buy-list input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 9pt;
    height: 9pt;
    border: 1pt solid #000;
    border-radius: 1pt;
  }

  .cuts li { padding: 0; break-inside: avoid; }
  .cuts li:hover, .cuts li.is-active { background: none; box-shadow: none; }
  .parts li, .buy-list li { padding: 0; }
  .sheet-todo-title { font-size: 8pt; }

  /* Actually black and white.
   *
   * The part fills are presentation attributes on each rect, which a print
   * stylesheet can override because a CSS rule outranks an attribute. Without
   * this the diagram printed in full color on a color printer and as muddy
   * gray blocks on a mono one, with white label text vanishing into both.
   * Every part is an outlined rectangle with black text, and a part is told
   * apart by its printed label, never by its fill. */
  .cut-rect { fill: #fff !important; stroke: #000 !important; }
  .cut-label { fill: #000 !important; }
  .cut-dims { fill: #000 !important; }
  .sheet-usable { stroke: #666 !important; }
  .cut-line { stroke: #000 !important; stroke-dasharray: 4 3 !important; }
  .cut-line.is-active { stroke: #000 !important; stroke-width: inherit !important; }
  .cut-step-no, .cut-step-no.is-active { fill: #000 !important; stroke: #fff !important; }
  .scrap-label { fill: #333 !important; }
  .board-edge, .board-part { fill: #fff !important; stroke: #000 !important; }
  .board-part-label, .board-cut-label { fill: #000 !important; stroke: #fff !important; }
  .board-cut-line { stroke: #000 !important; stroke-dasharray: none !important; }
  .board-usable { fill: none !important; stroke: #666 !important; }

  /* Some browsers print backgrounds and some do not; nothing here should
     depend on which, so no background is allowed to carry meaning. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  a { color: #000; }
  a[href]::after { content: ""; }
}