/* ============================================================
   Enduro Field Portal — toolbox-talk.css
   PAGE LAYOUT ONLY. All components (.field/.input/.btn/.repeat/
   .photo-grid/.chip/.toggle-row/.tap-row/.count-note/.tt-sig-*/
   .portal-nav/.wizard/.portal-draft…) come from
   assets/css/portal.css, which sits on assets/css/base.css (brand
   tokens + reset).

   SPEC (2026-06-25 overhaul): this page is a no-scroll page-wipe WIZARD
   (portal.css §9C), mirroring weekly-report 1:1 in structure so the two
   forms look identical. This file owns ONLY what's specific to the Weekly
   Toolbox Talk: the intro/step headers, the 2×3 matched meta grid (with the
   Prime-contractor toggle as the 6th cell), the topic grid + talking points,
   the checklist / corrective / incidents / attendance / sign-off layouts, the
   signature-gate notice, and the @media print stylesheet that flattens the
   wizard into a clean printed record.

   The shared top nav (portal.css §9B), the wizard layout + horizontal wipe
   (§9C), the split draft chip (§9D), the red focus ring (§6), the
   required-asterisk / optional-removed rules (§4) and the date/time picker
   affordance (§5) are ALL inherited — never re-declared here.

   Square corners everywhere (inherited). No brand colour added here beyond
   what portal.css already governs (focus ring / true errors / selected chip).
   ============================================================ */


/* ============================================================
   1. INTRO STEP (step 1) — title + 2×3 meta grid + gate
   The wizard step is already centered both axes (portal.css §9C). The
   centered stage keeps a generous gap above the title (>100px on the
   ~960px target), satisfying SPEC §2's "padding above the page title"
   without breaking the centering the core wizard spec (§1) requires.
   ============================================================ */
.tt-intro-head { margin-bottom: var(--s7); }

/* Record-ID line is print-only (screen shows it inside Document control). */
.tt-record-id { display: none; }
.tt-record-id[hidden] { display: none; }

/* Restored note sits ~15px below the title, no icon (parity with weekly). */
.tt-intro-head { position: relative; }
/* Out of flow — floats just above the title; revealing it never shifts the grid. */
.tt-restored { position: absolute; bottom: 100%; left: 0; margin: 0 0 6px; color: var(--text-2); }
.tt-restored[hidden] { display: none; }

/* Draft chip moved INTO flow ~40px below the meta grid — was absolute top-right
   (parity with weekly, Radik 2026-06-29). position:relative so its dropdown menu
   still anchors to the chip (it's fixed-positioned on open by toolbox-talk.js). */
#tt-resume.portal-draft {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 40px;
}

/* Photos sub-section header: title left, actions (Clear all · + Add photos) on
   the right; actions appear only once photos exist. */
.tt-photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.tt-photos-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
}
.tt-photos-actions[hidden] { display: none; }

/* Two-column photo grid that grows down (parity with weekly). */
.photo-grid { grid-template-columns: repeat(2, 1fr); }


/* ============================================================
   2. META GRID  —  2 columns × 3 rows, all six cells MATCHED (SPEC §3)
   grid-auto-rows:1fr makes every row equal height; pushing each control to
   the bottom of its cell (margin-top:auto) keeps inputs aligned on one
   baseline even if a label wraps — so the six cells read as one continuous
   block. The Prime-contractor toggle is the 6th cell (right of Weather),
   matched to the cell size. The four required cells gate the wipe to step 2.
   ============================================================ */
.tt-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s4);
  margin-top: var(--s7);
}
.tt-meta-grid .field {
  margin: 0;                       /* the grid gap owns spacing */
  display: flex;
  flex-direction: column;
}
/* The control sits at the bottom of its cell → all controls share one
   baseline (text inputs AND the Prime toggle). */
.tt-meta-grid .field > .input,
.tt-meta-grid .field > .input-affix,
.tt-meta-grid .field > .toggle-row { margin-top: auto; }

/* The Prime-contractor toggle fills its matched cell (SPEC §3). */
.tt-prime-toggle { width: 100%; }

/* ...and reads as one of the grey meta inputs: same grey fill, same height, no
   resting outline — so the 6 cells stay one continuous block. The check-box on
   the right still shows on/off (it gains an outline + tick when checked).
   (Radik 2026-06-29 — "same size as the other grey input fields.") */
.tt-meta-grid .tt-prime-toggle {
  min-height: 0;
  padding: 10px 12px;
  background: var(--fill);
  box-shadow: none;
}
.tt-meta-grid .tt-prime-toggle:hover { background: var(--fill-hover); box-shadow: none; }
.tt-meta-grid .tt-prime-toggle .toggle-box { width: 20px; height: 20px; }


/* ============================================================
   3. INTERIOR STEP HEADERS (steps 2–6)
   The step heading and the helper line. The page sub-lede + the meta-section
   sub-text are gone (SPEC §2); the per-step helper line stays — it's task
   guidance, not the removed meta sub-text. The old "Step N of 6" counter was
   removed (SPEC item 5) — the wizard circle indicator is the single source of
   step state now.
   ============================================================ */
.tt-step-head { margin-bottom: var(--s6); }
.tt-step-head .section-sub { margin-top: var(--s2); }

/* Steps stack multiple repeatable / option sub-sections under one heading. */
.tt-subsection + .tt-subsection { margin-top: var(--s7); }
.tt-subhead {
  font-size: var(--t-label);
  font-weight: 700;                /* matched to .wr-subhead (parity) */
  letter-spacing: -0.005em;
  color: var(--text);             /* matched to .wr-subhead (parity) */
  margin-bottom: var(--s3);
}
/* A helper line directly under a sub-section heading tucks up to it. */
.tt-subsection > .section-sub { margin-top: -2px; margin-bottom: var(--s3); }


/* ============================================================
   4. PER-STEP NAV NOTE
   The Back/Continue layout comes from portal.css §9C (Refinement Pass 2 §D/§E:
   no arrows; Back sits next to Continue, ~30px apart). Only the page-local
   actions note (final step) stays here. Matches weekly-report.css §4 for parity.
   ============================================================ */
.tt-actions-note {
  margin-top: var(--s4);
  font-size: var(--t-hint);
  color: var(--text-2);
}


/* ============================================================
   5. TOPIC  —  square icon-tile grid + read-aloud talking points
   On pick the grid COLLAPSES: the other tiles hide, the chosen one pins as a
   full-width bar, and a "Change topic" button appears. Each tile is the
   shared .icon-tile component (portal.css).
   ============================================================ */
/* The picker now carries ~31 topics, so the step renders a DENSE grid that
   still fits the no-scroll wizard step at the ~960px target. 5 compact tiles
   per laptop row; the shared .icon-tile is shortened FOR THIS PICKER ONLY
   (square corners + icon-on-top look kept — just rectangular not 1:1, a smaller
   icon, and a 2-line clamped label) so all topics fit one centered screen. */
/* 4-col square tile grid — MULTI-SELECT: tap tiles to toggle them on/off. */
.tt-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 per row, square cards */
  gap: var(--s2);
}
.tt-topic-grid .icon-tile {
  width: 100%;
  aspect-ratio: 1 / 1;         /* square cards */
  min-height: 0;
  max-height: none;
  gap: var(--s2);
  padding: var(--s2);
}
.tt-topic-grid .icon-tile-icon { width: 26px; height: 26px; }
.tt-topic-grid .icon-tile-label {
  font-size: 11.5px;
  line-height: 1.15;
  /* keep tiles a predictable height: clamp the longest labels to two lines. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Selected tiles stay highlighted (several can be on at once), matching the
   category filter's active red ring. */
.tt-topic-tile.is-selected {
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--text);
}

/* "Other topic" free-type field appears under the grid. */
.tt-topic-other-field { margin-top: var(--s4); }
.tt-topic-other-field[hidden] { display: none; }

/* Chosen topics: one block per selected topic (title + read-aloud bullets +
   resource), stacked below the grid. */
.tt-topics-chosen { margin-top: var(--s5); }
.tt-topics-chosen[hidden] { display: none; }
.tt-topic-block + .tt-topic-block {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--divider);
}
.tt-topic-block-title {
  margin: 0 0 var(--s3);
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--text);
}

/* "Open resource" → the bundled official PDF. Mobile-first: a full-width, ≥44px
   tap target (capped on wider screens). (Radik 2026-06-29) */
.tt-resource-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  max-width: 380px;
  margin-top: var(--s5);
  min-height: 46px;
  padding: 11px var(--s4);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tt-resource-btn[hidden] { display: none; }
.tt-resource-btn:hover { background: var(--fill); box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--accent); }
.tt-resource-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-ring); }
.tt-resource-icon { display: inline-flex; line-height: 0; }

/* Topic category filter — a button NAV above the grid, buttons spread evenly
   across the full width (left margin → right margin), wrapping as needed.
   Picking a category shows only its topics. Hidden once a topic is chosen.
   (Radik 2026-06-29) */
.tt-topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.tt-topic-filter[hidden] { display: none; }
.tt-cat-btn {
  flex: 1 1 auto;                 /* grow to fill the row evenly, margin-to-margin */
  min-height: 34px;
  padding: 6px var(--s3);
  font-family: inherit;
  font-size: var(--t-hint);
  font-weight: 600;
  color: var(--text-2);
  background: var(--fill);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tt-cat-btn:hover { background: var(--fill-hover); color: var(--text); }
.tt-cat-btn.is-on { color: var(--text); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tt-cat-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px var(--accent-ring); }
.tt-topic-tile.is-filtered-out:not(.is-selected) { display: none; }

.tt-talking-points {
  list-style: none;
  margin: 0;
  padding: var(--s5) var(--s5) var(--s5) var(--s6);
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--divider);
  overflow-x: auto;                  /* safety scroll if a line is too long to fit */
}
.tt-talking-points li {
  position: relative;
  padding-left: var(--s5);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--text);
  white-space: nowrap;               /* one line per point, no wrap (Radik 2026-06-29) */
}
.tt-talking-points li + li { margin-top: var(--s3); }
.tt-talking-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);   /* small brand-red marker — read-aloud cue */
}


/* ============================================================
   6. SECTION-LEVEL LAYOUT HELPERS
   ============================================================ */
/* A sub-section heading with a trailing text affordance (e.g. "Check all"). */
.tt-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}
.tt-section-head .tt-subhead { margin-bottom: 0; }
.tt-checklist-section .tt-check-list { margin-top: var(--s3); }


/* ============================================================
   7. CHECKLIST  —  tap-to-confirm rows, two columns on laptop
   Built on .toggle-row (portal.css). Faint grey fill when checked.
   ============================================================ */
.tt-check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}


/* ============================================================
   8. CORRECTIVE ACTIONS  —  note · owner · due, per repeatable row
   ============================================================ */
.tt-corrective-inner { align-items: center; }   /* §G — centre the remove "×" with the row */
.tt-corrective-fields {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s2);
  min-width: 0;
}


/* ============================================================
   9. INCIDENTS  —  radio rows + conditional describe box
   ============================================================ */
.tt-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.tt-incidents-describe { margin-top: var(--s4); }
.tt-incidents-describe[hidden] { display: none; }


/* ============================================================
   10. ATTENDANCE  —  roster pick · walk-ons · present list
   ============================================================ */
.tt-attestation {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--divider);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}

/* ---- Attendance: POOL (tap a name to sign) then the SIGNED record ---- */
.tt-pool { margin-bottom: var(--s6); }
.tt-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}
/* Pool chips = a name to tap → sign. Walk-ons show their company underneath. */
.tt-pool-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  text-align: left;
}
.tt-pool-chip-name { font-weight: 600; line-height: 1.2; }
.tt-pool-chip-co {
  font-size: var(--t-hint);
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.2;
}

/* Walk-on adder: name + company + Add button on one row. */
.tt-walkon-add {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--s2);
  align-items: stretch;
}
/* "Sign" button — ghost grey + not tappable until name AND company are filled,
   then turns green (tapping opens the walk-on's signature). (Radik 2026-07-03) */
.tt-walkon-add-btn { white-space: nowrap; }
.tt-walkon-add-btn:disabled {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  opacity: 1;                     /* a clean ghost grey, not a faded disabled look */
  cursor: not-allowed;
}
.tt-walkon-add-btn.is-ready {
  background: #16A34A;
  border: 1px solid #16A34A;
  color: #fff;
  cursor: pointer;
}
.tt-walkon-add-btn.is-ready:hover { background: #15913B; border-color: #15913B; }

/* The SIGNED record — vertical stack of signed attendee rows. */
.tt-signed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
}
.tt-signed-head .tt-subhead { margin-bottom: 0; }

/* Two groups in the Signed record: Enduro staff, then Walk-ons. */
.tt-signed-group[hidden] { display: none; }
.tt-signed-group + .tt-signed-group { margin-top: var(--s5); }
.tt-signed-group-label {
  margin: 0 0 var(--s2);
  font-size: var(--t-hint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-2);
}

.tt-attendee-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The per-row controls cluster (signature thumb + remove ✕). */
.tt-attendee-controls {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
/* Remove ✕ — a small calm icon button on each signed row. */
.tt-attendee-remove {
  flex: 0 0 auto;
  color: var(--text-3);
}
.tt-attendee-remove:hover { color: var(--accent); }

/* The signed-check glyph that sits before a captured signature thumbnail. */
.tt-sig-check {
  display: inline-flex;
  line-height: 0;
  color: var(--text-2);
}

.tt-attendee-empty[hidden] { display: none; }


/* ============================================================
   11. SIGN-OFF  —  presenter + reviewer slots, side by side
   ============================================================ */
.tt-signoff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  align-items: start;
}
.tt-signoff-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}
.tt-signoff-slot .field { width: 100%; margin-top: 0; }
.tt-signoff-name {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--text);
}
/* The sign-off "Tap to sign" buttons reuse the .tap-row-slot LOOK, but they
   live OUTSIDE a .tap-row, so the box styling is restated here. */
.tt-signoff-sign {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  font-family: inherit;
  font-size: var(--t-hint);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tt-signoff-sign:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--border-hover); }
.tt-signoff-sign:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--border), 0 0 0 3px var(--accent-ring);
}
.tt-signoff-thumb {
  height: 40px;
  width: auto;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.tt-signoff-thumb[hidden] { display: none; }

/* Print-only sign-off mark — injected at export by toolbox-talk.js so a
   yet-unsigned sign-off still prints a blank signature line. Never on screen. */
.tt-signoff-print-mark { display: none; }


/* ============================================================
   11b. SIGNATURE GATE  —  needs-sign highlight + calm gap notice
   Compliance: a DRAWN signature is mandatory for every present attendee +
   the presenter + a named reviewer. The gate is gentle: a calm accent notice
   (fill wash + a soft brand-accent left bar — NOT a red box) and a soft inset
   ring on the rows that still need a signature. Only shown after an export
   attempt (toolbox-talk.js).
   ============================================================ */
.tt-attendee-sign.needs-sign,
.tt-signoff-sign.needs-sign {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--danger-tint);
}

.tt-sign-gap {
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--fill);
  box-shadow: inset 3px 0 0 var(--accent);   /* soft accent left bar */
  color: var(--text);
}
.tt-sign-gap[hidden] { display: none; }
.tt-sign-gap:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px var(--accent-ring);
}
.tt-sign-gap h2 {
  font-size: var(--t-label);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s1);
}
.tt-sign-gap .tt-sign-gap-sub {
  font-size: var(--t-hint);
  color: var(--text-2);
  margin-bottom: var(--s3);
  line-height: 1.45;
}
.tt-sign-gap ul { list-style: none; margin: 0; padding: 0; }
.tt-sign-gap li { margin-top: var(--s1); }
.tt-sign-gap a {
  font-size: var(--t-hint);
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tt-sign-gap a:hover { color: var(--red-dark); }
.tt-sign-gap a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }


/* ============================================================
   11c. STEP 6 NO-SCROLL FIT  (Refinement Pass 2 §H)
   Step 6 (Photos · sign-off · document control · export) carries the most
   content of any toolbox step. Measured headless at the ~960px no-scroll
   target, its resting height edges ~35px past the wizard region (the other
   five steps + the 31-tile topic step all fit). So THIS step's discretionary
   vertical rhythm is tightened — spacing only, no element removed, scoped to
   the step via .tt-signoff-section — to keep it no-scroll. Weekly's lighter
   photo step needs none of this, so it is left exactly as the reference.
   ============================================================ */
.tt-signoff-section .tt-step-head { margin-bottom: var(--s4); }
.tt-signoff-section .tt-subsection + .tt-subsection { margin-top: var(--s4); }
.tt-signoff-section .wizard-nav { margin-top: var(--s5); }
.tt-signoff-section .tt-actions-note { margin-top: var(--s3); }


/* ============================================================
   12. DOCUMENT CONTROL
   ============================================================ */
.tt-doc-row { margin-bottom: var(--s2); }
.tt-doc-control .note { margin-left: 0; }
.tt-retention { margin-top: var(--s3); font-weight: 600; color: var(--text); }
.tt-doc-record { margin-top: var(--s1); }
.tt-doc-record-id { color: var(--text); font-weight: 600; }


/* ============================================================
   13. SMALL TEXT-STYLE CONTROLS  —  "Clear form" / "Start another" links
   .btn-link now lives in portal.css (shared) — the signature sheet's Cancel
   button is a .btn-link too, so it can't be page-local. Only the page-local
   "filed" affordance stays here.
   ============================================================ */
/* Calm post-submit "filed" affordance. */
.tt-filed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.tt-filed[hidden] { display: none; }
.tt-filed-note { color: var(--text); font-weight: 600; }


/* ============================================================
   14. RESPONSIVE  —  laptop primary, mobile pleasant
   ============================================================ */
@media (max-width: 640px) {
  /* On a single column the equal-row / bottom-pinned tricks would leave big
     gaps, so let cells size to content and reset the baseline pin. */
  .tt-meta-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--s5);
  }
  .tt-meta-grid .field > .input,
  .tt-meta-grid .field > .input-affix,
  .tt-meta-grid .field > .toggle-row { margin-top: 0; }

  /* 3 compact tiles per row on phones, DENSER (finding): the 31-tile pick-one
     grid is the tallest toolbox step. Tighten each tile (smaller icon, tighter
     padding/gap) so the grid is shorter; combined with the recovered step
     padding + the sticky nav, Continue stays reachable while the grid scrolls. */
  .tt-topic-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
  .tt-topic-grid .icon-tile { padding: 4px 6px; }
  .tt-topic-grid .icon-tile-icon { width: 16px; height: 16px; }
  .tt-topic-grid .icon-tile-label { font-size: 11px; }
  .tt-check-list { grid-template-columns: 1fr; }
  .tt-radio-group { grid-template-columns: 1fr; }
  .tt-pool-grid { grid-template-columns: 1fr 1fr; }
  .tt-corrective-fields { grid-template-columns: 1fr; }
  /* Walk-on adder stacks on narrow screens: name, company, then a full-width Add. */
  .tt-walkon-add { grid-template-columns: 1fr 1fr; }
  .tt-walkon-add-btn { grid-column: 1 / -1; }
  .tt-signoff-grid { grid-template-columns: 1fr; gap: var(--s8); }
}


/* ============================================================
   15. PRINT  —  the export path. report-export.js (Report.print) sets
   <html class="is-printing"> and fires window.print(). Here we FLATTEN the
   wizard: every absolutely-positioned, off-screen step returns to normal
   document flow and stacks, so the saved PDF contains the whole record (not
   just the on-screen step). Chrome gone, inputs read as printed text, the
   attendance table laid out with a repeated header, letter margins.
   ============================================================ */
/* The print letterhead is export-only (hidden on screen). */
.tt-print-only { display: none; }

@media print {

  /* 1" margin on EVERY page — including continuation pages — so content never
     spills a page edge. CSS cannot remove the browser's own URL/date header +
     footer; turn them off ONCE in the print dialog ("Headers and footers" → off,
     Chrome remembers it). No page counter — clean + client-facing. (Radik 2026-07-03) */
  @page { size: letter; margin: 0.75in; }

  html, body { background: #fff; color: #101820; }
  .portal { font-size: 10.5pt; line-height: 1.5; }   /* margins come from @page */

  /* --- Hide all interactive chrome / screen-only affordances --- */
  [data-print-hide],
  .tt-intro-head,
  .portal-nav,
  .wizard-nav,
  .tt-actions-note,
  .tt-filed,
  .tt-sign-gap,
  .repeat-add,
  .repeat-remove,
  .photo-drop,
  .photo-handle,
  .photo-remove,
  .tt-pool,
  .tt-topic-other-field,
  .tt-topic-filter,
  .tt-check-all,
  .tt-doc-record,
  .btn,
  .btn-icon,
  .btn-link {
    display: none !important;
  }

  /* Print-only letterhead: small logo · document title · generated date · record id. */
  .tt-print-only { display: block; }
  .tt-print-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24pt;
    padding-bottom: 10pt;
    margin-bottom: 18pt;
    border-bottom: 1px solid #DADADA;
  }
  .tt-print-logo svg { width: 87px; height: auto; display: block; }   /* 25% smaller */
  .tt-print-id { text-align: right; }
  .tt-print-doctitle { display: block; font-size: 15pt; font-weight: 800; letter-spacing: -0.01em; color: #101820; }
  .tt-print-gen { display: block; margin-top: 3pt; font-size: 8.5pt; font-weight: 500; color: #8A8A8A; }
  .tt-print-rec { display: block; margin-top: 1pt; font-size: 8.5pt; font-weight: 700; color: #646464; letter-spacing: 0.4px; }

  /* --- Flatten the wizard into document flow --- */
  .wizard {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .wizard-step {
    position: static !important;
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 0 !important;
    break-inside: auto;
  }
  .wizard-stage {
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Each section gets its OWN page — never cram sections together when there's
     unlimited paper. Every step after the first starts a fresh page; its 1" top
     margin comes from @page. (Radik 2026-07-03) */
  .wizard-step + .wizard-step {
    break-before: page; page-break-before: always;
  }
  .tt-step-head,
  .tt-subsection { break-inside: avoid; page-break-inside: avoid; }
  .tt-step-head { margin-bottom: 16pt; }                 /* section title → content */
  .tt-subsection { margin-top: 22pt; }                   /* clear air between sub-groups */

  /* --- Header band: title + record id --- */
  .tt-intro-head { margin-bottom: 8pt; }
  .page-title { font-size: 20pt; letter-spacing: -0.01em; }
  .tt-record-id {
    display: block !important;
    margin-top: 2pt;
    font-size: 9pt;
    font-weight: 700;
    color: #646464;
    letter-spacing: 0.4px;
  }
  .tt-record-id[hidden] { display: block !important; }

  .section-h { font-size: 14pt; font-weight: 700; text-transform: none; letter-spacing: -0.01em; color: #101820; }
  /* Keep every heading with the content below it — no orphaned title at a page foot. */
  .section-h, .tt-step-head, .tt-subhead { break-after: avoid; page-break-after: avoid; }
  .section-sub { display: none; }            /* helper text is screen-only */
  .required, .optional { display: none; }    /* badge tokens aren't part of the doc */
  .tt-section-head { display: block; }
  /* Sub-heads read as muted labels — clearly subordinate to the section title. */
  .tt-subhead { font-size: 9.5pt; font-weight: 700; color: #8A8A8A; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6pt; }

  /* Meta grid prints as a compact key/value block (reset the screen baseline pin). */
  .tt-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto !important;
    gap: 10pt 24pt;
    margin: 0;
  }
  .tt-meta-grid .field { display: block; }
  .tt-meta-grid .field > .input,
  .tt-meta-grid .field > .input-affix,
  .tt-meta-grid .field > .time-field,
  .tt-meta-grid .field > .toggle-row { margin-top: 0 !important; }
  .label { font-size: 7.5pt; font-weight: 700; color: #8A8A8A; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2pt; }
  .hint { display: none; }

  /* --- Flatten inputs to read as printed text --- */
  .input,
  .portal textarea,
  .portal select {
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: #101820 !important;
    font-size: 11pt;
    min-height: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  .portal textarea { resize: none; }

  /* type=date / type=time: suppress Chromium shadow indicators so they print
     as clean document text. (Verify Chromium + Safari.) */
  .portal input[type="date"],
  .portal input[type="time"] { color: #101820 !important; }
  .portal input[type="date"]::-webkit-calendar-picker-indicator,
  .portal input[type="time"]::-webkit-calendar-picker-indicator { display: none !important; }
  .portal input[type="date"]::-webkit-inner-spin-button,
  .portal input[type="date"]::-webkit-clear-button,
  .portal input[type="time"]::-webkit-inner-spin-button,
  .portal input[type="time"]::-webkit-clear-button {
    display: none !important; -webkit-appearance: none !important; appearance: none !important;
  }
  .portal input[type="date"]::-webkit-datetime-edit,
  .portal input[type="time"]::-webkit-datetime-edit { padding: 0 !important; color: #101820 !important; }

  /* --- Topics: hide the picker grid; print each chosen topic as a titled block
     with its read-aloud points. All topics stay together on the topic page. --- */
  .tt-topic-grid { display: none !important; }
  .tt-topics-chosen { display: block !important; }
  .tt-topic-block { break-inside: avoid; page-break-inside: avoid; }
  .tt-topic-block + .tt-topic-block {
    margin-top: 12pt; padding-top: 0; border-top: 0;
  }
  .tt-topic-block-title {
    margin: 0 0 3pt;
    font-size: 11.5pt; font-weight: 700; color: #101820;
    break-after: avoid; page-break-after: avoid;
  }
  .tt-talking-points {
    background: transparent !important; box-shadow: none !important;
    padding: 2pt 0 0 14pt; margin: 0;
  }
  .tt-talking-points li { font-size: 9.5pt; }
  .tt-talking-points li::before { background: #101820; top: 0.55em; }

  /* --- Toggle rows (Prime / checklist / incidents / doc-control) flatten to
     printed ☑ / ☐ lines (no box chrome). --- */
  .toggle-row {
    display: flex !important;
    align-items: center;
    gap: 6pt;
    min-height: 0 !important;
    padding: 1.5pt 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .toggle-row .toggle-label { font-size: 10.5pt; font-weight: 400; }
  .toggle-row .toggle-box {
    width: auto !important; height: auto !important;
    box-shadow: none !important; background: transparent !important;
    color: #101820 !important;
    order: -1;                 /* put the mark BEFORE the label on paper */
  }
  .toggle-row .toggle-box svg { display: none !important; }
  .toggle-row .toggle-box::before { content: "\2610"; font-size: 12pt; line-height: 1; }
  .toggle-row > input:checked ~ .toggle-box::before { content: "\2611"; }
  .toggle-row > input:checked ~ .toggle-box { color: #101820 !important; }

  /* Checklist prints in two compact columns; incidents stack. */
  .tt-check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2pt 18pt; }
  .tt-radio-group { display: block; }

  /* --- Corrective actions: a 3-column printed table feel --- */
  .tt-corrective-list { margin: 0; padding: 0; }
  .tt-corrective-row { display: block; break-inside: avoid; }
  .tt-corrective-row + .tt-corrective-row { margin-top: 4pt; }
  .tt-corrective-inner { display: block !important; }
  .tt-corrective-fields {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10pt;
  }

  /* --- Attendance: a clean numbered table # | Name | Company | Signature. --- */
  .tt-attestation {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 9.5pt;
    font-style: italic;
    color: #646464 !important;
    margin: 4pt 0 6pt;
  }
  .tt-signed-head { display: block; }
  .tt-count { display: none !important; }
  /* Grouped record: a small label above each group's table. */
  .tt-signed-group[hidden] { display: none !important; }
  .tt-signed-group + .tt-signed-group { margin-top: 16pt; }
  .tt-signed-group-label {
    margin: 0 0 4pt;
    font-size: 9pt; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: #646464;
    break-after: avoid; page-break-after: avoid;
  }

  .tt-attendee-list { display: table; width: 100%; border-collapse: collapse; }
  .tt-attendee-list .tt-print-head { display: table-header-group; }
  .tt-attendee-list .tt-print-head > span {
    display: table-cell;
    font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: #646464; border-bottom: 1px solid #101820; padding: 0 6pt 3pt;
  }
  .tt-attendee-row {
    display: table-row !important;
    break-inside: avoid; page-break-inside: avoid;
    box-shadow: none !important; background: transparent !important;
    padding: 0 !important; min-height: 0 !important;
  }
  .tt-attendee-row > .tap-row-main,
  .tt-attendee-row > .tt-attendee-controls { display: none !important; }
  .tt-attendee-row .tt-print-cell {
    display: table-cell;
    vertical-align: bottom;
    font-size: 10pt;
    color: #101820;
    border-bottom: 1px solid #d9d9d9;
    padding: 5pt 6pt;
  }
  .tt-attendee-row .tt-print-num { width: 24pt; color: #646464; }
  .tt-attendee-row .tt-print-sig { width: 150pt; }
  .tt-attendee-row .tt-print-sig img { height: 28pt; width: auto; }
  .tt-attendee-row .tt-print-sig-blank {
    border-bottom: 1px solid #101820;
    min-height: 20pt;
  }

  /* --- Sign-off: presenter + reviewer name + signature image --- */
  .tt-signoff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18pt; }
  .tt-signoff-sign { display: none !important; }
  .tt-signoff-thumb { display: block !important; height: 40pt; }
  .tt-signoff-thumb[hidden] { display: none !important; }
  .tt-signoff-name { font-size: 10.5pt; }
  .tt-signoff-print-mark {
    display: block !important;
    font-size: 10pt;
    color: #101820;
  }
  .tt-signoff-print-mark.is-image { display: none !important; }
  .tt-signoff-print-mark.is-blank {
    min-height: 22pt;
    border-bottom: 1px solid #101820;
  }

  /* (Section-per-page is handled by the .wizard-step + .wizard-step break above,
     so no per-section grouping rule is needed.) */

  /* Date value sits flush-left under its DATE label (the on-screen overlay is
     inset to match the input padding; the printed line has none). */
  .date-field-display { left: 0 !important; right: 0 !important; }

  /* --- Photos: tidy 2-column print grid with captions --- */
  .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 6pt; }
  .photo-tile { break-inside: avoid; page-break-inside: avoid; }
  /* Whole photo, at its real shape — identical to the on-screen grid + the editor. */
  /* WHOLE photo — NEVER cropped in the export. Hard-reset any on-screen tile
     constraints so a tall photo prints in full. (Radik 2026-07-03) */
  .photo-figure {
    box-shadow: none;
    border: 1px solid #DADADA;
    aspect-ratio: auto !important;
    overflow: visible !important;
    height: auto !important;
  }
  .photo-thumb {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: fill !important;
  }
  /* No photos attached → drop the photos section from the export. */
  .tt-photos:not(:has(.photo-tile)) { display: none !important; }
  .photo-caption {
    box-shadow: none !important; border: 0 !important; padding: 3pt 0 0 !important;
    font-size: 8.5pt !important; color: #6E6E6E !important;
  }
  /* An empty caption (still showing its placeholder) doesn't print — no stray
     "Add a caption" line under a photo. */
  .photo-caption:placeholder-shown { display: none !important; }

  /* Document control retention reads as a footer block. */
  .tt-retention { font-size: 9.5pt; font-weight: 700; }
}