/* Print and PDF.

   The sheet on paper is the sheet on screen: same near-black field, same 1px
   borders, same tones. Colour here is not decoration that can be dropped — it
   is the epistemic signal the whole project runs on, so it is marked
   print-color-adjust: exact and the background is expected to be printed.

   One stylesheet drives two paths: the browser's own print, and tools/build-pdf.mjs,
   which renders through this same media type. What you preview is what ships. */

@media print {
  :root {
    --fs-headline: 21pt;
    --fs-body: 10pt;
    --fs-mono: 8.5pt;
    --fs-kicker: 8pt;
    --fs-small: 9.5pt;
  }

  /* Landscape. A reference sheet is a two-column table of short terms against
     explanations, and portrait forces those columns narrow enough that most
     glosses wrap three times. 277mm of usable width gives each column room to
     breathe at a readable type size — the same reason the app is widest-first.

     The canvas background propagates from html, so it covers the page margins
     too: the sheet is dark edge to edge with a 12mm safe area inside it. */
  @page { size: A4 landscape; margin: 12mm; }

  html, body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: var(--bg) !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  #field-grid,
  .skip-link,
  .app-header,
  .tab-bar,
  .app-grid,
  .notice-stack,
  #overlay,
  .cheatsheet-bar,
  .cs-anchor,
  .cs-link { display: none !important; }

  /* Promote the dialog from a modal to the document. */
  .cheatsheet {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
  }

  .cheatsheet-panel {
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .cheatsheet-title {
    margin: 0 0 5mm;
    padding-bottom: 3mm;
    border-bottom: 1px solid var(--border-bright);
  }

  /* Two columns, not three. Landscape buys width so the columns can be wide
     enough that a gloss is one or two lines instead of five — three columns
     would spend that width back on narrower measures than portrait had. */
  .cheatsheet-body { margin-top: 0; column-count: 2; column-gap: 10mm; }

  /* On screen the command table spans both columns. On paper a spanner forces
     every column before it to close, which threw away the bottom of a page —
     so here it flows as an ordinary column item like every other section. */
  #cs-commands { column-span: none; }
  #cs-commands .cs-rows { column-count: 1; }

  /* Sections are taller than a page, so asking not to break one would either be
     ignored or leave half a page blank. Breaks are kept out of the units that
     actually have to stay together: a row, a group, a callout. */
  .cs-section {
    margin-bottom: 6mm;
    padding: 4mm;
    break-inside: auto;
  }
  .cs-title,
  .cs-kicker,
  .cs-group-label,
  .cs-callout-title { break-after: avoid; }
  /* A row, a note and a callout are single thoughts and must not split. A group
     is a list of rows and may: forbidding it strands a third of a column blank
     every time a six-row group will not fit, which cost two whole pages. */
  .cs-group { break-inside: auto; }
  .cs-row,
  .cs-rows-head,
  .cs-notes li,
  .cs-callout { break-inside: avoid; }

  /* Screen leans on hover and scroll for density; paper cannot, so the rows get
     more air. The term column is sized in ch so it tracks the mono face rather
     than a guessed pixel width. */
  .cs-row,
  .cs-rows-head { grid-template-columns: minmax(0, 16ch) 1fr; gap: 3mm; }
  .cs-row { padding: 1.6mm 0; }
  .cs-note { color: var(--text-muted); }

  .cs-blurb { margin-top: 2mm; }
  .cs-rows { margin-top: 3mm; }
  .cs-group { margin-top: 3mm; }
  .cs-group-label { padding: 1.4mm 2mm; }
  .cs-notes { margin-top: 3mm; gap: 2mm; }
  /* Keep the callout with the section it belongs to. Orphaned at the top of a
     column it reads as a stray warning about nothing. */
  .cs-callout { margin-top: 3mm; padding: 2.5mm; break-before: avoid; }

  a { color: var(--accent-2); text-decoration: none; }

  /* The footer only exists on paper: a sheet that left the browser should still
     say where it came from and how to get a fresh one. */
  .cs-footer { display: block !important; }

  /* Byline, big enough to be the masthead of a printed sheet. The URL under the
     link is print-only for the same reason the footer is: on paper a link is
     just underlined text, and the address is the only way back to the video. */
  .cs-byline { margin-bottom: 6mm; padding: 3mm; gap: 4mm; break-inside: avoid; }
  .cs-portrait { width: 72px; height: 72px; }
  .cs-byline-link { margin-top: 1.5mm; color: var(--text); }
  .cs-byline-url { display: block !important; margin-top: 1mm; }
}