/* D8 print pipeline — the sheet preview on screen, the sheet alone on paper.
   Loaded by /printable-ruler/ and nothing else.

   THIS FILE IS HALF OF THE PRINT MECHANISM. The @page block below is LITERAL
   TEXT in a served same-origin stylesheet, and sheet.js mutates its `size`
   descriptor through CSSOM. Both halves matter: real text on disk means a
   print with JavaScript off still gets the size the served sheet is drawn at
   (§4.2) and the suite can parse it; an existing rule means setProperty() has
   somewhere to land. Mutating a stylesheet the policy already admitted is not
   what style-src governs; creating a <style> element is, and that path was
   measured BLOCKED in three engines on 2026-08-09 in the way that looks like
   success. The ladder, the read-back and the reporting are in sheet.js.

   Nothing here may move into a <style> block or a style= attribute: the CSP
   pins style-src to 'self' and launch-guard.js holds that as an exact
   allowlist. Kit tokens on screen; the print ink below is its own literals,
   because paper ink is not a screen theme. No font file, ever.

   THE PRE-AUTHORED RULE: US Letter portrait, which is what the page serves.
   `margin: 0` because the sheet is drawn at full paper size and carries its
   own printer-edge allowance, in millimetres it can state. DO NOT rewrite the
   descriptor as a custom property: `@page { size: var(--x) }` was measured
   the same day — Blink resolves it, Gecko ignores it, WebKit drops it at
   parse. Two of three fail, both silently. */
@page {
  size: 215.9mm 279.4mm;
  margin: 0;
}

/* ---------- The preview ----------
   THE PREVIEW IS A PICTURE OF THE SHEET, NOT THE SHEET, and the page says so
   in those words. It is fitted to the column, which on an instrument face
   would be forbidden (§4.6). The difference: nothing here is offered as a
   length to measure against. The ruler routes' face IS measured against
   directly, so it is never fitted to anything. */

.sheet-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  justify-content: center;
  margin: 0.9rem 0 0;
}

#sheet {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(27, 30, 35, 0.18);
}

/* Stroke widths arrive as millimetre attributes from page.js: they are
   geometry, not styling, and the sheet prints the number it drew. This rules
   colour and type only: black marks, a grey cut guide, the kit's mono token
   (hand-spelling that stack here had dropped a face). */
#sheet path,
#sheet line { stroke: #111111; fill: none; stroke-linecap: butt; }
#sheet .box { stroke: #111111; fill: none; }
#sheet .fill { fill: #111111; }
#sheet .cut { stroke: #777777; stroke-dasharray: 2 2; fill: none; }
#sheet text {
  font-family: var(--mono);
  fill: #111111;
  text-anchor: start;
}

/* ---------- Generator controls ---------- */

.gen-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem 1rem;
  margin: 0.75rem 0;
}

/* `.len-field` is a label + a two-control row, and it is a div rather than a
   label because a <label> may be associated with exactly one control: the
   length and the unit it is given in are two, and wrapping both made the
   unit select unlabelled to a screen reader while looking fine. The unit
   carries its own visually-hidden label inside the row. */
.gen-controls > label,
.gen-controls > .len-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.gen-controls input[type="number"] {
  font: inherit;
  font-size: 0.9rem;
  font-family: var(--mono);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  max-width: 100%;
}

.len-row { display: flex; gap: 0.4rem; }
.len-row input { flex: 1 1 auto; min-width: 4rem; }
.len-row select { flex: 0 0 auto; }

.mech-line {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
}

/* The printable-length catalogue: static HTML, real links, nothing created
   by script. */
.lengths {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.4rem 1rem;
  max-width: 46rem;
}

.lengths li { margin: 0; }

.lengths a {
  display: block;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink);
}

.lengths a:hover { border-color: var(--ink-soft); border-left-color: var(--accent); }
.lengths .fits { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); display: block; }

/* ---------- Print ----------
   The pipeline is D5's (sites/d5-printables/paper.css, not loaded here): hide
   only branches OFF the sheet's ancestry, never an ancestor of it, because
   display:none on an ancestor cannot be overridden below. On paper the SVG
   drops back to its own mm width/height, so one user unit is one millimetre
   and the ink is true. */
@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }

  body { background: #ffffff; margin: 0; }
  main.wrap { max-width: none; padding: 0; margin: 0; }
  main.wrap > *:not(.tool-panel) { display: none !important; }
  .tool-panel > *:not(.sheet-wrap) { display: none !important; }

  .tool-panel,
  .sheet-wrap {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: #ffffff;
    display: block;
  }

  #sheet {
    width: auto;
    box-shadow: none;
  }
}