/* vantage · public/css/form.css · Fix 1 · v12
   v12 (36.28): the enclosure sheet's INITIALS column (lbdsheet.js v3) — its box asks for the initials (dashed, "?") while a
   day of its row waits for them; the Terminators & Tools buttons are gone (no names to pick in the program).
   v11 (36.27): a day typed on the enclosure sheet while nobody is picked waits in its box, dashed, until whose sheet it is
   is tapped (lbdsheet.js v2).
   v10 (36.26 — Pete, 2026-10-23: "when I select all 14 from that drop down for the lbds I want that PDF in this photo"):
   LBD Terms' enclosure sheet (.lbdsheet — lbdsheet.js), on the tab's paper: a box part done says so in grey where its
   day goes (its placeholder, "2 of 3"); each terminator under Terminators & Tools is a clear button over its line, the
   one whose sheet it is ringed in the pick colour. Neither prints.
   v9 (35.5 — Pete, 2026-10-21: copy and paste, several tasks at once): the tab's cells are picked and painted as the
   form's boxes are (boxpick.js) — a picked cell the pick colour at two-fifths with its own edge, no text selection or
   phone callout while it is painted.
   v8 (34.22 — Pete, 2026-10-20: "the LBD terms sheet should match the spreadsheet exactly"): the tab's cells as the tab
   has them — each cell's words in a box cut where the tab lets them run (.termstab__clip), set in their own cell, wrapped
   only where the tab wraps; a SER# written on several lines is a box of several lines (.termstab__in--ser).
   v7 (34.8 — Pete, 2026-10-19: a SER# box beside DATE and Crew Size on every task the tracker keeps a SER# for): the
   SER# box (.form__in--ser) is written in the sheet's blue, in capitals.
   v6 (34.4 — Pete, 2026-10-19: easy to pick several boxes at once): a picked box reads at a glance — the pick colour at
   two-fifths with its own edge, where it was a faint wash — and a box being painted (.is-painting, counts.js v9) takes no
   text selection and no phone callout, so a held finger paints instead of selecting the digits.
   v5: the tracker's LBD Terms and INV Terms tabs (.termstab — termstab.js), on the same paper: every colour a --tab-* token
   read off the tab, every place inline from its layout; its DATE, SER# and INITIALS cells the input on the screen.
   v4: the live cells (.form__in) — the form is the input.
   The printed form, as Pete's form PDF draws it. Measures are points because the page is
   paper; every colour is a --form-* token read off that PDF; the type is Roboto, as the PDF
   used. Positions come inline from form.js; here is what each part looks like. */

.form-page { position: relative; overflow: hidden; background: var(--form-paper); color: var(--form-ink); font-family: var(--font-full); margin: 0 auto; break-after: page; page: portrait; }
.form-page--landscape { page: landscape; }
.form-page > div { position: absolute; }

.form-page > .form__rect { box-sizing: border-box; }
.form-page > .form__text { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.05; white-space: nowrap; overflow: hidden; }
.form-page > .form__text--wrap { white-space: normal; padding: 0 2pt; }
.form-page > .form__text--left { justify-content: flex-start; text-align: left; }
.form-page > .form__qr { color: var(--form-ink); }
.form-page > .form__qr svg { display: block; width: 100%; height: 100%; }
/* a writable cell on the screen: invisible until pointed at, never printed */
.form-page > .form__cell { background: transparent; border: 0; padding: 0; cursor: pointer; }
.form-page > .form__cell:hover, .form-page > .form__cell:focus-visible { box-shadow: inset 0 0 0 0.2rem var(--sheet-pick-colour); outline: none; }
.form-page > .form__cell.is-chosen { box-shadow: inset 0 0 0 0.25rem var(--sheet-pick-colour); }
/* the review gate's hint: a cell the transcriber was unsure of — a hint, not a gate */
.form-page > .form__cell--doubt { box-shadow: inset 0 0 0 0.2rem var(--form-typeXH); }
/* the live cells: an input over each DATE and Crew Size box, in the form's own type, invisible
   until it has the cursor or is selected — so the page looks exactly as it prints */
.form-page > .form__in { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--form-ink); font-family: var(--font-full); font-weight: 700; text-align: center; outline: none; box-sizing: border-box; line-height: 1; cursor: text; }
.form-page > .form__in:hover { box-shadow: inset 0 0 0 0.12rem var(--sheet-pick-colour); }
.form-page > .form__in.is-selected { background: oklch(from var(--sheet-pick-colour) l c h / 0.4); box-shadow: inset 0 0 0 0.1rem var(--sheet-pick-colour); }
.form-page > .form__in { -webkit-touch-callout: none; }
.form-page > .form__in--ser { color: var(--form-serText); text-transform: uppercase; }
.form-page.is-painting > .form__in { -webkit-user-select: none; user-select: none; cursor: cell; }
.form-page > .form__in:focus { box-shadow: inset 0 0 0 0.25rem var(--sheet-pick-colour); }
@media screen { .form-page { user-select: none; } .form-page > .form__in { user-select: text; } }
@media print { .form__cell, .form__in { display: none !important; } }

/* (v5) THE TRACKER'S LBD TERMS AND INV TERMS TABS, as they are: the same paper as the form, the tab's own colours */
.termstab { background: var(--tab-paper); color: var(--tab-ink); }
.form-page.termstab > div { position: absolute; box-sizing: border-box; }
.form-page.termstab > .termstab__clip { overflow: hidden; pointer-events: none; }   /* (v9) words never take a tap: a cell's input under words run over it is the one pressed, and painted */   /* (v8) where the tab lets a cell's words run — cut there, as a sheet cuts them */
.termstab__clip > .termstab__t { position: absolute; display: flex; box-sizing: border-box; line-height: 1.2; white-space: pre; font-family: var(--font-full); }
.termstab__clip > .termstab__t--wrap { white-space: pre-wrap; overflow-wrap: normal; }
.form-page.termstab > .termstab__in { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--font-full); font-weight: 700; text-align: center; outline: none; box-sizing: border-box; line-height: 1; cursor: text; text-transform: uppercase; }
.form-page.termstab > .termstab__in--ser { resize: none; overflow: hidden; white-space: pre; line-height: 1.2; }   /* (v8) a SER# keeps the lines the tab wrote it on */
.form-page.termstab > .termstab__in:hover { box-shadow: inset 0 0 0 0.12rem var(--sheet-pick-colour); }
.form-page.termstab > .termstab__in.is-selected { background: oklch(from var(--sheet-pick-colour) l c h / 0.4); box-shadow: inset 0 0 0 0.1rem var(--sheet-pick-colour); }
.form-page.termstab > .termstab__in:focus { box-shadow: inset 0 0 0 0.25rem var(--sheet-pick-colour); }
.form-page.termstab > .termstab__in { -webkit-touch-callout: none; }
.form-page.termstab.is-painting > .termstab__in { -webkit-user-select: none; user-select: none; cursor: cell; }
@media screen { .form-page.termstab > .termstab__in { user-select: text; } }
@media print { .termstab__in { display: none !important; } }
/* (v10) the enclosure sheet: a box part done, and whose sheet it is */
.form-page.lbdsheet > .lbdsheet__in::placeholder { color: oklch(from var(--tab-ink) l c h / 0.5); font-weight: 400; font-size: var(--hint-size); opacity: 1; text-transform: none; }
.form-page.lbdsheet > .lbdsheet__in.is-needed { outline: 0.12rem dashed var(--sheet-pick-colour); outline-offset: -0.3rem; }
.form-page.lbdsheet > .lbdsheet__in.is-needed::placeholder { color: var(--sheet-pick-colour); font-weight: 700; font-size: inherit; }
.form-page.lbdsheet > .lbdsheet__in.is-waiting { box-shadow: inset 0 0 0 0.15rem var(--sheet-pick-colour); outline: 0.12rem dashed var(--sheet-pick-colour); outline-offset: -0.3rem; }

.form-actions { display: flex; gap: var(--gap); align-items: center; justify-content: center; padding: var(--gap); flex-wrap: wrap; }
@media screen { .form-page { margin-bottom: var(--gap); box-shadow: 0 0 0 0.0625rem var(--line); } }
/* Printing from inside the site: only the pages laid into #print-root reach the paper; the
   strip, the cards and the fitted on-screen copies do not. */
#print-root { display: none; }
@media print {
  html.printing body > :not(#print-root) { display: none !important; }
  html.printing #print-root { display: block; }
  html.printing #app { display: none !important; }
  .form-actions { display: none; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  @page { size: letter portrait; margin: 0; }
  @page portrait { size: letter portrait; margin: 0; }
  @page landscape { size: letter landscape; margin: 0; }
  .form-page { margin: 0; box-shadow: none; }
}