/*
 * css/document-modules.css — shared UI for RAMS / Handover / Inspection
 * -----------------------------------------------------------------------
 * RAMS + INSPECTION/HANDOVER STRUCTURE PASS.
 *
 * rams.html, handover.html and inspection.html are project-scoped
 * document/log areas rather than drawing canvases, so they share one
 * plain scrollable-content shell under this file — unlike warehouse/
 * racking/layout's fixed-canvas app-canvas.css shell. Reuses existing
 * shared primitives (.btn, .status-pill, .ep-field, .panel-title,
 * .canvas-sheet, .app-sidebar/.app-topbar/.app-shell-*) rather than
 * reinventing them; only adds what those don't already cover
 * (file/document cards, snag/inspection row lists, finding chips, the
 * RAMS Generator "Coming Soon" card, colour status-pill variants).
 * Everything here is additive and scoped under a `.docmod-` prefix so it
 * cannot collide with or restyle any existing page.
 */

.docmod-main { flex: 1; min-height: 0; overflow-y: auto; }
.docmod-main-inner { max-width: 980px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-9); display: flex; flex-direction: column; gap: var(--space-6); }

.docmod-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.docmod-page-head h1 { font-family: var(--font-display); font-size: 1.5em; margin: 0 0 4px; }
.docmod-page-head p { margin: 0; color: var(--text-muted); font-size: 0.92em; max-width: 60ch; line-height: 1.55; }

.docmod-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.docmod-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.docmod-panel-head h2 { font-family: var(--font-display); font-size: 1.02em; margin: 0; }
.docmod-panel-sub { font-size: 0.82em; color: var(--text-faint); margin: 2px 0 0; }

.docmod-empty { color: var(--text-faint); font-size: 0.88em; padding: var(--space-4); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }

/* PASS 4 P0/PART 31 — ONE shared persistent warning component, used
   everywhere a data-integrity or hard-stop condition needs to stay
   visible without being a dismissible toast: design divergence,
   orphaned/unresolved evidence, RAMS hard stops, critical closeout
   issues. Two variants only — attention (amber, review needed) and
   critical (red, an actual conflict) — never a third ad-hoc style.
   js/job-tracker.js's earlier .jt-divergence-banner and js/hub-intel.js's
   .hub-plan-divergence predate this and share the same colour language;
   left as-is to avoid touching working code, but every NEW warning
   surface added in this pass uses .rm-warning. */
.rm-warning { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 0.88em; line-height: 1.5; }
.rm-warning-title { font-weight: 700; text-transform: uppercase; font-size: 0.82em; letter-spacing: 0.02em; }
.rm-warning-body { margin: 0; }
.rm-warning-detail-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.92em; max-height: 160px; overflow-y: auto; }
.rm-warning-detail-row { display: flex; gap: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rm-warning-detail-row span:first-child { flex: none; opacity: 0.85; }
.rm-warning-detail-more { opacity: 0.75; font-style: italic; }
.rm-warning-action { margin-top: 4px; }
.rm-warning-attention { background: rgba(226, 160, 63, 0.12); border: 1px solid rgba(226, 160, 63, 0.5); color: #b5791f; }
.rm-warning-critical { background: rgba(229, 72, 77, 0.12); border: 1px solid rgba(229, 72, 77, 0.5); color: var(--danger); }

/* ---- file/document cards (RAMS) ---- */
.docmod-file-list { display: flex; flex-direction: column; gap: var(--space-3); }
.docmod-file-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-elevated-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.docmod-file-card[data-status="Archived"] { opacity: 0.6; }
.docmod-file-icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.docmod-file-icon .icon { width: 18px; height: 18px; }
.docmod-file-id { flex: 1 1 220px; min-width: 0; }
.docmod-file-id b { display: block; font-size: 0.95em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docmod-file-id b span { display: inline; margin: 0; }
.docmod-file-id span { display: block; font-size: 0.78em; color: var(--text-faint); font-family: var(--font-mono); margin-top: 1px; }
/* CORE HARDENING PASS §4: honest, non-blocking badge for a document
   record whose binary content didn't survive a duplicate/import — the
   record itself is still shown normally, this just flags that Download
   won't have real bytes to return until a new version is uploaded. Uses
   the same warn tokens as the Issued Design "changed" state elsewhere
   in the app, for a consistent "needs attention, not broken" signal. */
.docmod-file-unavailable { display: inline-block; margin-left: 8px; padding: 1px 7px; font-family: var(--font-sans); font-size: 0.85em; font-weight: 700; color: var(--warn-line); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); }
.docmod-file-meta { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.docmod-file-meta select { min-height: 30px; padding: 0 8px; font-size: 0.78em; font-weight: 700; background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); }
/* GLOBAL CONSISTENCY PASS — this select had no focus treatment of its
   own (unlike .ep-field's inputs/selects, which already define one);
   same cyan outline every other themed control in the app uses. */
.docmod-file-meta select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.docmod-file-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.docmod-file-actions .btn { min-height: 32px; padding: 0 10px; font-size: 0.78em; }
.docmod-file-actions .icon { width: 13px; height: 13px; }

/* ---- status pill colour variants (shared across all three pages) ----
   GLOBAL CONSISTENCY PASS: now reads css/tokens.css's shared --ok/--danger
   pair (added by that pass) instead of a locally hardcoded fallback, so
   this matches app-canvas.css's .status-pill-success/health-error exactly
   rather than being its own slightly-different green/red. */
.status-pill-green { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.status-pill-amber { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.status-pill-red { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.status-pill-grey { background: var(--bg-elevated-2); border-color: var(--border-strong); color: var(--text-faint); }
/* JOB TRACKER / PROJECT LIFECYCLE PASS — accent variant for an
   in-progress job stage (Site Setup / Installation In Progress), the
   same restrained "signal, not decoration" cyan every other in-progress
   state in this app uses rather than a new one-off colour. */
.status-pill-blue { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ---- add-record forms ---- */
.docmod-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); align-items: end; }
.docmod-form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

/* UNIFY RUN/BAY IDENTITY PASS — the small "picked location" readout that
   sits under a Location free-text field once js/location-picker.js has
   returned a structured run/bay/component reference (js/location-
   reference.js). Reused wherever a location entry point gains the
   picker (currently Handover snags) so this only needs styling once. */
.docmod-loc-picked { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; padding: 6px 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 600; color: var(--accent); }
.docmod-loc-picked button { flex: none; }

/* ---- generic list rows (snags / inspection history) ---- */
.docmod-row-list { display: flex; flex-direction: column; gap: var(--space-3); }
.docmod-row-card { padding: var(--space-3) var(--space-4); background: var(--bg-elevated-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.docmod-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.docmod-row-head b { font-size: 0.95em; }
.docmod-row-sub { font-size: 0.8em; color: var(--text-faint); margin-top: 2px; }
.docmod-row-body { margin-top: var(--space-3); font-size: 0.86em; color: var(--text-muted); line-height: 1.55; }
.docmod-row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.docmod-row-actions .btn { min-height: 30px; padding: 0 10px; font-size: 0.76em; }

/* FINAL SCREEN-TO-SCREEN LIFECYCLE PASS: small compact label:value rows
   (As-Built finalisation reference/revision/date) — quieter than
   .docmod-row-card, no border/background, just a hairline separator,
   matching the "compact engineering status block, not a card" language
   used throughout this pass. */
.docmod-kv-row-list { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.docmod-kv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-top: 1px dashed var(--border); font-size: 0.86em; }
.docmod-kv-row:first-child { border-top: none; }
.docmod-kv-row span { color: var(--text-faint); }
.docmod-kv-row strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- finding chips inside an inspection record ---- */
.docmod-findings { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.docmod-finding { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.85em; }
.docmod-finding-loc { font-weight: 700; flex: none; }
.docmod-finding-desc { color: var(--text-muted); flex: 1 1 200px; }
.docmod-finding-repaired { font-size: 0.75em; color: var(--text-faint); font-style: italic; }

/* ---- "Coming Soon" generator card (RAMS) — matches the sidebar's own
   Soon-badge convention so it reads consistently with every other
   not-yet-built module in this app. ---- */
.docmod-soon-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); opacity: 0.75; }
.docmod-soon-card .docmod-file-icon { background: var(--bg-elevated-2); color: var(--text-faint); }
.docmod-soon-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.docmod-soon-flag { font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px 8px; }
.docmod-soon-card p { margin: 3px 0 0; font-size: 0.85em; color: var(--text-faint); }

/* ---- overall roll-up status banner (Inspection) ---- */
.docmod-rollup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.docmod-rollup .status-pill { font-size: 0.9em; padding: 8px 16px; }
.docmod-rollup-note { font-size: 0.82em; color: var(--text-faint); }

/* ---- findings mini-editor (add-inspection form) ---- */
.docmod-finding-editor-row { display: grid; grid-template-columns: 1fr 1fr 140px auto 32px; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.docmod-finding-editor-row input, .docmod-finding-editor-row select { min-height: 34px; padding: 5px 8px; font-family: var(--font-sans); font-size: 0.86em; font-weight: 600; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 100%; }
.docmod-finding-editor-row input:focus-visible, .docmod-finding-editor-row select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Inspection: location cell = free-text/picked label + "Pick from layout" (+ clear). */
.docmod-finding-loc-cell { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.docmod-finding-loc-cell input { flex: 1 1 auto; min-width: 0; }
.docmod-finding-loc-cell input.is-picked { background: var(--accent-soft); border-color: var(--accent); cursor: default; }
.docmod-finding-loc-cell .btn { flex: 0 0 auto; white-space: nowrap; }
.docmod-finding-classify { min-height: 28px; font-size: 0.78em; font-weight: 600; }
.docmod-finding-stale { font-size: 0.78em; color: var(--text-muted); }
@media (pointer: coarse) {
  .docmod-finding-editor-row input, .docmod-finding-editor-row select, .docmod-finding-loc-cell .btn { min-height: 44px; }
  .docmod-finding-classify { min-height: 40px; }
}
.docmod-finding-remove { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: none; color: var(--text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.docmod-finding-remove:hover { color: var(--danger); border-color: var(--danger); }
.docmod-finding-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docmod-finding-remove .icon { width: 13px; height: 13px; }

/* =========================================================================
   HANDOVER VISUAL/UX PASS — Handover-only additions, all under a
   `.docmod-ho-` sub-prefix so nothing here can affect RAMS or Inspection,
   which share this file's base `.docmod-` classes above unchanged.
   Navy/cyan (var(--accent)) throughout, matching the BOM/Installation
   passes' visual language rather than inventing a new one.
   ========================================================================= */

/* ---- commissioning overview strip — compact tiles, not generic cards:
   a single bordered row (same .docmod-panel surface language) split into
   label/value pairs, not three separate boxes with gaps between them. ---- */
.docmod-ho-overview {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.docmod-ho-tile { display: flex; flex-direction: column; gap: 2px; }
.docmod-ho-tile-num { font-family: var(--font-display); font-size: 1.6em; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.docmod-ho-tile-lbl { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
/* Unresolved Snags — the one figure this whole page is really about, so
   it gets the navy/cyan accent colour; flips to the shared danger colour
   once there's actually something outstanding, calm cyan when clear. */
.docmod-ho-tile-snags .docmod-ho-tile-num { color: var(--accent); }
.docmod-ho-tile-snags.has-open .docmod-ho-tile-num { color: var(--danger); }
.docmod-ho-tile-signoff { justify-content: center; }
.docmod-ho-pack-link { margin-left: auto; }

/* ---- snag status filter — thin wrapper around the app's existing
   .segmented pill toggle, just adding the per-status count badge and a
   little breathing room above the list it filters. ---- */
.docmod-ho-snag-filter { margin-top: var(--space-4); flex-wrap: wrap; }
.docmod-ho-filter-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 0.85em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- persistent open-snags caution above Final Sign-off — reuses the
   shared warn/danger tokens, not a one-off colour, so it reads as the
   same severity language as every other warning banner in the app. ---- */
.docmod-ho-warning {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-md);
  color: var(--warn);
  font-size: 0.86em;
  font-weight: 600;
}
.docmod-ho-warning .icon { width: 18px; height: 18px; flex: none; }

/* =========================================================================
   JOB TRACKER / PROJECT LIFECYCLE PASS — jobtracker.html-only additions,
   under a `.docmod-jt-` sub-prefix (same convention as the Handover-only
   `.docmod-ho-` block above) so nothing here can affect RAMS, Handover or
   Inspection, which continue to share only the base `.docmod-` classes.
   Dense, dark, engineering-tool feel — no generic SaaS card grid.
   ========================================================================= */

/* ---- JOB TRACKER PROJECT-GATING PASS — the "no valid active project"
   empty state (js/job-tracker.js's RMJobTrackerGate toggles this against
   #jtProjectContent). Same page-level empty-state language as Layout's
   own .layout-empty-state (icon/title/body), under the .docmod-jt- scope
   so it can't affect any other page. ---- */
.docmod-jt-empty-project {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  max-width: 440px;
  margin: var(--space-8) auto;
  padding: var(--space-6);
}
.docmod-jt-empty-project .icon { width: 40px; height: 40px; color: var(--text-faint); margin-bottom: 4px; }
.docmod-jt-empty-project-title { font-size: 1.1em; font-weight: 800; margin: 0; color: var(--text); }
.docmod-jt-empty-project-body { font-size: 0.88em; color: var(--text-muted); margin: 0 0 6px; line-height: 1.5; }

/* ---- overview strip — stage pill, progress bar, target completion,
   last update, one compact bordered row (same .docmod-panel surface
   language as Handover's overview strip). ---- */
.docmod-jt-overview {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.docmod-jt-overview-stage { display: flex; flex-direction: column; gap: 6px; }
.docmod-jt-overview-progress { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1 1 160px; }
.docmod-jt-progress-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.78em; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.docmod-jt-progress-head b { font-family: var(--font-mono); font-size: 1.3em; color: var(--text); text-transform: none; letter-spacing: normal; }
.docmod-jt-progress-track { height: 8px; border-radius: var(--radius-pill); background: var(--bg-sunken); border: 1px solid var(--border-strong); overflow: hidden; }
.docmod-jt-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--duration-med) var(--ease-out); }
.docmod-jt-overview-tile { display: flex; flex-direction: column; gap: 2px; }
.docmod-jt-overview-tile span { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.docmod-jt-overview-tile b { font-family: var(--font-display); font-size: 1.05em; color: var(--text); }
.docmod-jt-overview-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* ---- Job Complete banner (swaps in for the Mark Job Complete button,
   same pattern as Handover's signoffComplete/signoffForm swap). ---- */
.docmod-jt-complete-banner { display: flex; align-items: center; gap: var(--space-3); }
.docmod-jt-complete-banner .status-pill { font-size: 0.85em; }

/* ---- Pass 3 P0/P4: persistent design-divergence / orphaned-evidence
   warning — a factual notice, not a toast; RED only when built site
   evidence already conflicts with a stale design, AMBER for a review/
   reissue matter. ---- */
.jt-divergence-banner { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 0.9em; }
.jt-divergence-banner p { margin: 0; }
.jt-divergence-banner strong { font-weight: 600; }
.jt-divergence-attention { background: rgba(226, 160, 63, 0.12); border: 1px solid rgba(226, 160, 63, 0.5); color: #b5791f; }
.jt-divergence-critical { background: rgba(229, 72, 77, 0.12); border: 1px solid rgba(229, 72, 77, 0.5); color: var(--danger); }

/* ---- key dates + crew grid — plain label/input pairs, no boxed cards. ---- */
.docmod-jt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.docmod-jt-field-static { display: flex; flex-direction: column; gap: 4px; }
.docmod-jt-field-static .ep-field-label { margin: 0; }
.docmod-jt-field-static b { font-family: var(--font-mono); font-size: 0.95em; color: var(--text-muted); }

/* ---- add-blocker / add-update forms — reuse .docmod-form-row/.ep-field,
   only adding the note textarea + inline blocker note. ---- */
.docmod-jt-form textarea { width: 100%; resize: vertical; min-height: 64px; }
.docmod-jt-update-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }

/* ---- blocker-note callout inside a progress update card — same warn
   colour language as every other delay/blocker signal on this page. ---- */
.jt-update-blocker { display: flex; align-items: center; gap: 6px; color: var(--warn) !important; }
.jt-update-blocker .icon { width: 13px; height: 13px; flex: none; }

/* small "58 / 100 bays" readout next to the overview progress %. */
.docmod-jt-progress-bays { font-family: var(--font-mono); font-size: 0.72em; font-weight: 600; color: var(--text-faint); text-transform: none; letter-spacing: normal; margin-left: auto; }

/* =========================================================================
   VISUAL INSTALLATION TRACKING + AS-BUILT FOUNDATION PASS — the locked
   installation-tracking drawing (js/job-tracker-visual.js). Same dense,
   dark, engineering-tool language as the rest of `.docmod-jt-`; the
   drawing itself stays visually quiet (muted not-built bays) so Built/
   Changed evidence stands out, per the brief's "default drawing remains
   visually quiet" instruction.
   ========================================================================= */
.docmod-jt-tracker-panel .docmod-panel-head { flex-wrap: wrap; gap: var(--space-3); }
.docmod-jt-tracker-tools { display: flex; gap: var(--space-2); margin-left: auto; }
.docmod-jt-tracker-tools .btn.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
/* PASS 5 PART 10/24/26: Mark Built / Flag Change are the primary site
   actions on this screen, not secondary tools — on tablet landscape
   (~1024px and below, before the phone breakpoint takes over) they get
   the "up to 40px for site-primary controls" sizing the design system
   calls for, instead of staying at the default 36px .btn-sm. Same ids/
   wiring/is-active logic untouched. */
@media (max-width: 1180px) {
  .docmod-jt-tracker-tools .btn, .docmod-jt-overview-actions .btn { min-height: 40px; padding: 0 16px; font-size: 0.9em; }
}

.docmod-jt-tracker-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.docmod-jt-tracker-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.docmod-jt-tracker-stat span { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.docmod-jt-tracker-stat b { font-family: var(--font-mono); font-size: 1.15em; color: var(--text); }
.docmod-jt-tracker-bar { margin-top: var(--space-3); }

.docmod-jt-tracker-canvas-wrap { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-sunken); overflow: hidden; }
#jtTrackerSvg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 600; touch-action: none; cursor: crosshair; }

/* Bay cells — the primary interactive surface. Not Built stays close to
   invisible (a hairline outline only) so the drawing reads as quiet
   until evidence is recorded; Built/Changed are the only saturated
   colour on the canvas. */
.jt-run-outline { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.jt-frame-beam { stroke: var(--text-faint); stroke-width: 1.1; pointer-events: none; opacity: 0.8; }
.jt-frame-upright { fill: var(--text-faint); opacity: 0.55; pointer-events: none; }
.jt-frame-upright.is-end { opacity: 0.95; }
.jt-flue { stroke: var(--text-faint); stroke-width: 0.75; stroke-dasharray: 4 3; opacity: 0.55; pointer-events: none; }
.jt-run-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-faint); }
.jt-bay { stroke-width: 1; cursor: pointer; transition: fill var(--duration-fast) var(--ease-out), stroke var(--duration-fast) var(--ease-out); }
.jt-bay-notbuilt { fill: var(--bg-elevated); stroke: var(--border-strong); }
.jt-bay-notbuilt:hover { fill: var(--bg-elevated-2); }
.jt-bay-built { fill: var(--ok-soft); stroke: var(--ok); }
.jt-bay-changed { fill: var(--warn-soft); stroke: var(--warn); }

.docmod-jt-tracker-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); font-size: 0.78em; color: var(--text-muted); }
.docmod-jt-tracker-legend span { display: inline-flex; align-items: center; gap: 6px; }
.jt-legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border-width: 1.5px; border-style: solid; }
.jt-legend-dot.jt-bay-notbuilt { background: var(--bg-elevated); }
.jt-legend-dot.jt-bay-built { background: var(--ok-soft); border-color: var(--ok); }
.jt-legend-dot.jt-bay-changed { background: var(--warn-soft); border-color: var(--warn); }

/* Compact per-run breakdown — also where "flag a whole run as changed"
   lives, since that isn't a bay-shaped gesture on the drawing itself. */
.docmod-jt-tracker-runlist { display: flex; flex-direction: column; gap: 1px; margin-top: var(--space-4); border-top: 1px solid var(--border); }
.jt-run-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--border); font-size: 0.86em; }
.jt-run-row-label { font-weight: 600; color: var(--text); }
.jt-run-row-count { font-family: var(--font-mono); color: var(--text-faint); margin-left: auto; }

@media (max-width: 640px) {
  .docmod-main-inner { padding: var(--space-4); }
  .docmod-file-card, .docmod-row-head { flex-direction: column; align-items: flex-start; }
  /* Long filenames must wrap inside the card, not push it wider than the screen. */
  .docmod-file-card > .docmod-file-id { align-self: stretch; flex: 0 0 auto; max-width: 100%; }
  .docmod-file-id span { overflow-wrap: anywhere; }
  .docmod-file-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .docmod-finding-editor-row { grid-template-columns: 1fr; }
  .docmod-ho-overview { gap: var(--space-4); }
  .docmod-ho-pack-link { margin-left: 0; width: 100%; justify-content: center; }
  /* GLOBAL CONSISTENCY PASS — touch targets. These compact list/row
     action buttons are fine at their desktop size (a mouse pointer is
     precise), but on a touch screen a 30-32px target is below the usual
     44px guideline; bump them up on phone-width screens only, same
     "compact desktop, roomier touch" split the rest of the app already
     uses (see e.g. .ep-field input's own 640px rule below). */
  .docmod-file-actions .btn, .docmod-row-actions .btn { min-height: 40px; padding: 0 14px; }
  .docmod-finding-remove { width: 40px; height: 40px; }
  .docmod-file-meta select { min-height: 40px; }
  .docmod-jt-overview { gap: var(--space-3); }
  .docmod-jt-overview-actions { margin-left: 0; width: 100%; }
  .docmod-jt-overview-actions .btn { flex: 1 1 auto; min-height: 40px; }
  .docmod-jt-progress-bays { margin-left: 0; }
  .docmod-jt-tracker-tools { margin-left: 0; width: 100%; }
  .docmod-jt-tracker-tools .btn { flex: 1 1 auto; min-height: 40px; }
  .docmod-jt-tracker-stats { grid-template-columns: repeat(2, 1fr); }
  .jt-run-row { flex-wrap: wrap; }
  .jt-run-row .btn { min-height: 36px; }
}

/* INSPECTION STAGE 2 — expandable finding details, corrective-action panels, event history */
.docmod-finding-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--border); }
.docmod-finding-more[hidden], .docmod-fnav[hidden], .docmod-fpanel-err[hidden] { display: none; }
.docmod-finding-more textarea, .docmod-fpanel textarea { grid-column: 1 / -1; font-family: var(--font-sans); font-size: 0.86em; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 8px; width: 100%; }
.docmod-fnav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.docmod-fnav-chip { min-height: 32px; padding: 0 10px; font-size: 0.78em; font-weight: 700; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.docmod-fnav-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docmod-fcard { display: flex; flex-direction: column; gap: var(--space-2); }
.docmod-fdetails { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--border-strong); font-size: 0.82em; }
.docmod-fdetail { display: flex; gap: var(--space-2); }
.docmod-fdetail > span:first-child { flex: 0 0 150px; color: var(--text-muted); font-weight: 600; }
.docmod-fevents { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); }
.docmod-fevent { display: flex; gap: var(--space-2); color: var(--text-muted); }
.docmod-fevent-t { flex: 0 0 130px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.docmod-fdetail-actions, .docmod-fpanel-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.docmod-fpanel { padding: var(--space-3); background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.85em; }
.docmod-fpanel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.docmod-pf { display: flex; flex-direction: column; gap: 2px; font-size: 0.85em; }
.docmod-pf > span { color: var(--text-muted); font-weight: 600; }
.docmod-pf input:not([type=checkbox]), .docmod-pf select { min-height: 34px; padding: 5px 8px; font-family: var(--font-sans); font-size: 0.95em; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.docmod-pf-check { flex-direction: row; align-items: flex-start; gap: var(--space-2); grid-column: 1 / -1; }
.docmod-pf-check > span { color: var(--text); font-weight: 600; }
.docmod-pf-check input { width: 22px; height: 22px; flex: none; }
.docmod-fpanel-err { margin: var(--space-2) 0 0; color: var(--danger); font-weight: 600; }
@media (pointer: coarse) {
  .docmod-fnav-chip { min-height: 44px; min-width: 44px; }
  .docmod-pf input:not([type=checkbox]), .docmod-pf select { min-height: 44px; }
  .docmod-fdetail-actions .btn, .docmod-fpanel-actions .btn, .docmod-fcard .docmod-finding .btn { min-height: 44px; }
}
@media (max-width: 640px) { .docmod-fdetail, .docmod-fevent { flex-direction: column; gap: 0; } }

/* INSPECTION STAGE 3 — photos, scope, location history, void, report panel */
.docmod-photos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.docmod-photo-thumb { position: relative; width: 64px; height: 64px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-sunken); overflow: hidden; cursor: pointer; }
.docmod-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docmod-photo-thumb.is-missing { font-size: 0.62em; color: var(--text-muted); padding: 4px; }
.docmod-photo-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docmod-photo-msg { flex: 1 1 100%; font-size: 0.8em; color: var(--text-muted); }
.docmod-photo-msg.is-error { color: var(--danger); font-weight: 600; }
.docmod-photo-busy { font-size: 0.8em; color: var(--text-muted); }
.docmod-scope { margin-top: var(--space-3); }
.docmod-scope summary { cursor: pointer; font-weight: 600; font-size: 0.86em; min-height: 32px; display: flex; align-items: center; }
.docmod-scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.docmod-scope-grid textarea { width: 100%; font-family: var(--font-sans); font-size: 0.86em; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 8px; }
.docmod-prev { grid-column: 1 / -1; font-size: 0.8em; }
.docmod-prev summary { cursor: pointer; min-height: 28px; display: flex; align-items: center; color: var(--accent); font-weight: 600; }
.docmod-prev-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 4px 0; border-top: 1px solid var(--border); }
.docmod-prev-item .docmod-finding-desc { flex: 1 1 160px; }
.docmod-void-banner { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--danger); border-radius: var(--radius-sm); color: var(--danger); font-size: 0.82em; font-weight: 600; }
.docmod-row-card.is-voided { opacity: 0.85; border-style: dashed; }
.docmod-block-note { grid-column: 1 / -1; margin: 0; font-size: 0.85em; color: var(--text-muted); }
.docmod-report-panel { padding: 0; }
.docmod-report-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--border); }
.docmod-report-body { padding: var(--space-3); background: #e5e7eb; overflow: auto; }
.docmod-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); }
.docmod-lightbox img { max-width: 100%; max-height: 72vh; object-fit: contain; }
.docmod-lightbox-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; width: min(640px, 100%); }
.docmod-lightbox-bar input { flex: 1 1 200px; min-height: 40px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-sunken); color: var(--text); font: inherit; }
@media (pointer: coarse) { .docmod-photo-thumb { width: 72px; height: 72px; } .docmod-scope summary, .docmod-prev summary { min-height: 44px; } }
#inspNotice[hidden], #inspReportPanel[hidden], .docmod-photos[hidden], .docmod-lightbox[hidden] { display: none !important; }

/* RAMS: "documentation is missing" flag */
.ramsmissing-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-3, 12px); padding: 10px 12px; border: 1px solid var(--border-strong); border-left: 3px solid var(--warn, #d97706); border-radius: var(--radius-sm, 6px); font-size: 0.88em; font-weight: 600; cursor: pointer; }
.ramsmissing-row input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.ramsmissing-row small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 2px; }

/* Job Confirmation / Pre-Start (prestart.html) */
.pc-readonly { min-height: 38px; display: flex; align-items: center; font-size: 0.85em; color: var(--text-muted); }
.pc-panel-skipped { opacity: 0.6; }
.pc-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding: 10px 12px; border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-sm, 6px); }
.pc-scope-line { font-size: 0.88em; }
.pc-scope-line a, .pc-link { color: var(--accent); font-weight: 700; }
.pc-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88em; font-weight: 600; cursor: pointer; }
.pc-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.pc-check-inline { white-space: nowrap; }
.pc-checklist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 6px); }
.pc-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pc-item:last-child { border-bottom: none; }
.pc-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.9em; }
.pc-item-main small { color: var(--text-muted); font-size: 0.85em; }
/* State is always a word, never colour alone. */
.pc-state { flex: none; min-width: 112px; text-align: center; font-size: 0.7em; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.pc-done .pc-state { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pc-warn .pc-state { border-style: dashed; border-color: var(--warn, #d97706); color: var(--warn, #d97706); }
.pc-todo .pc-state { border-style: dashed; }
.pc-na { opacity: 0.6; }
@media (max-width: 640px) { .pc-item { flex-wrap: wrap; } .pc-state { min-width: 0; } }

/* Job Tracker overview progress: keep "Progress" and its value visibly separated at every width. */
.docmod-jt-progress-head { gap: var(--space-2); flex-wrap: wrap; }
.docmod-jt-progress-head .docmod-jt-progress-label { margin-right: var(--space-1); }