:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #1b1f24;
  --muted: #5b6472;
  --border: #dfe3e8;
  --accent: #2454b3;
  --pass: #1e7d3a;
  --pass-bg: #e6f4ea;
  --fail: #b3261e;
  --fail-bg: #fbe9e7;
  --warn: #8a5a00;
  --warn-bg: #fff4dd;
  --info-bg: #eef2f9;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --panel: #1d2127;
    --ink: #e7eaee;
    --muted: #9aa4b2;
    --border: #2c323b;
    --accent: #6ea1ff;
    --pass: #6fd08c;
    --pass-bg: #163322;
    --fail: #ff8b83;
    --fail-bg: #3a1c1a;
    --warn: #f0c05a;
    --warn-bg: #3a2f10;
    --info-bg: #202634;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}

.app-header, .app-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 8px;
}

.app-header h1 { margin-bottom: 6px; font-size: 1.5rem; }
.brand-link {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
  vertical-align: middle;
}
.brand-link a { color: var(--muted); text-decoration: none; }
.brand-link a:hover { color: var(--accent); text-decoration: underline; }

.build-number { font-size: 0.75rem; font-weight: 400; color: var(--muted); margin-left: 4px; opacity: 0.7; }

.disclaimer {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.9rem;
}

.app-footer {
  color: var(--muted);
  font-size: 0.8rem;
  padding-bottom: 40px;
}

/* Sticky (not fixed) keeps this in normal document flow, so it reserves
   its own height and the checklist below naturally starts right after it --
   no overlap, no manual offset to maintain -- while still pinning to the
   top of the viewport once the page scrolls past it. A fixed/floating
   overlay was tried first but covered page content at every viewport size
   once the panel grew past a small corner widget. Collapsing it (the
   "Hide" button, which just hides the canvas underneath the header)
   shrinks the reserved space the same way, no extra JS needed. */
.cage-viewer-row {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Match #app's own box model exactly (max-width:900px, margin:0 auto,
     20px side padding) rather than guessing a fixed inner width (the old
     max-width:860px on .cage-viewer-panel below only lined up with #app's
     .panel children once the viewport was wide enough for #app's own
     max-width to actually kick in -- below 900px #app has no side margin
     of its own to subtract, so its panels render narrower than 860px and
     this one, still stuck at 860px, ends up wider than the rest of the
     page). Deriving both from the same formula keeps them equal at every
     width instead of matching at only one. */
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.cage-viewer-panel {
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.cage-viewer-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cage-viewer-header strong { font-size: 0.85rem; }
.cage-viewer-part3-controls { display: none; margin: -2px 0 8px; }
.cage-viewer-part3-controls:not(:empty) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; }
.cage-viewer-part3-controls .radio-group { gap: 14px; }
.cage-viewer-part3-controls label { font-size: 0.8rem; }
.cage-viewer-hint {
  /* Too little room for this at floating-widget width -- the button
     titles/tooltips still cover drag/scroll/pan. */
  display: none;
}
.cage-viewer-container {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.cage-viewer-container canvas { display: block; }
/* Branding watermark so a screenshot of the 3D view carries the Frog Racing
   logo -- positioned/sized to stay out of the way of the model itself, and
   pointer-events:none so it never intercepts the drag/zoom/click handlers
   cage_view.js attaches to the canvas underneath it. */
.cage-viewer-watermark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}
/* Names the exact weld/junction point under the cursor in Part 3, so it can
   be told apart from the others before committing to a double-click.
   pointer-events:none so it never itself becomes the raycast target;
   positioned by app.js from the last mousemove, offset from the cursor. */
.cage-viewer-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -130%);
  background: rgba(20, 22, 26, 0.92);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.cage-viewer-tooltip[hidden] { display: none; }
/* Total safety score, always-visible shortcut to the full breakdown below
   -- a real <button> (not just a styled div) so it's keyboard-reachable
   and gets a native click, positioned opposite the watermark so the 2
   never collide. */
.cage-viewer-safety-score {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(20, 22, 26, 0.85);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cage-viewer-safety-score:hover { border-color: var(--muted); }
.cage-viewer-safety-score.tier-green { color: var(--pass); border-color: var(--pass); }
.cage-viewer-safety-score.tier-orange { color: var(--warn); border-color: var(--warn); }
.cage-viewer-safety-score.tier-red { color: var(--fail); border-color: var(--fail); }
.cage-viewer-safety-score[hidden] { display: none; }
.cage-viewer-header-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* An ID selector (not a class) so this reliably beats
   .cage-viewer-header-buttons' own `display: flex` above regardless of
   stylesheet order -- an earlier version used a class selector here, which
   has the SAME specificity as that rule, so the [hidden] attribute set by
   JS silently did nothing and the button row stayed visible. */
#cageViewerHeaderButtons[hidden] { display: none; }
/* Replaces the normal header buttons while tagging a picture's visible
   parts in the 3D model -- an actual banner (not just a mode-colored
   button row) so it's obvious the viewer is in a different mode right now. */
.cage-viewer-picture-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink);
}
.cage-viewer-picture-banner[hidden] { display: none; }
/* Reference photo shown above the 3D model while tagging its elements, so
   the picture being tagged doesn't scroll out of view. ID selector for the
   same specificity reason as #cageViewerHeaderButtons above. */
.cage-viewer-picture-thumb {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  background: var(--bg);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
#cageViewerPictureModeThumb[hidden] { display: none; }
/* The Part switcher and View switch (Design/Tube size/Junctions/Welds) are
   suppressed while tagging a picture -- the 3D model and Done/Cancel should
   be the only interactive things on screen, see syncPictureModeUi(). ID
   selectors to beat .cage-viewer-part3-controls:not(:empty)'s own
   `display: flex`, which otherwise wins on equal class-selector specificity. */
#cageViewerPartDropdown[hidden] { display: none; }
#cageViewerPart3Controls[hidden] { display: none; }

#app {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.panel h2 { margin-top: 0; font-size: 1.1rem; }

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
}

.field label { font-size: 0.82rem; color: var(--muted); }

.vehicle-photo-slot { flex: 1 1 220px; }
.vehicle-photo-thumb {
  width: 100%;
  max-width: 280px;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  background: var(--bg);
  margin-bottom: 4px;
}

input[type="text"], input[type="date"], select, textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
}

textarea { resize: vertical; min-height: 50px; }

.radio-group { display: flex; gap: 14px; flex-wrap: wrap; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink); }

.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn.small { padding: 5px 10px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.category-heading {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 18px 0 4px;
}

.cage-viewer-part-dropdown:not(:empty) { margin-bottom: 10px; }
.part-switch-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.element-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  background: var(--panel);
}

.element-card.state-pass { border-left: 4px solid var(--pass); }
.element-card.state-fail { border-left: 4px solid var(--fail); }
.element-card.state-warn { border-left: 4px solid var(--warn); }
.element-card.state-neutral { border-left: 4px solid var(--border); }

.element-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.element-name { font-weight: 600; }

.collapsed-card { padding: 0; }
.collapsed-head {
  padding: 10px 14px;
  cursor: pointer;
  justify-content: flex-start;
}
.collapsed-head:hover { background: var(--info-bg); border-radius: var(--radius); }
.collapsed-summary {
  color: var(--muted);
  font-size: 0.82rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collapse-btn { margin-left: auto; }

.badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--muted);
  white-space: nowrap;
}
.badge.req { background: var(--fail-bg); color: var(--fail); }
.badge.rec { background: var(--info-bg); color: var(--accent); }
.badge.cond { background: var(--warn-bg); color: var(--warn); }
.badge.exc { background: var(--warn-bg); color: var(--warn); }
.badge.info { background: var(--info-bg); color: var(--muted); }

.element-ref {
  font-size: 0.75rem;
  color: var(--muted);
}

.element-desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 6px 0 10px;
  white-space: pre-line;
}

.answer-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.answer-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}
.answer-btn.active.yes { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
.answer-btn.active.no { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); }
.answer-btn.active.unsure { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.answer-btn.active.info { background: var(--info-bg); border-color: var(--accent); color: var(--accent); }

.choice-select { max-width: 420px; }

.element-diagram {
  width: 100%;
  max-width: 220px;
  margin: 4px 0 10px;
  color: var(--muted);
}
.element-diagram svg, .element-diagram img { width: 100%; height: auto; display: block; border-radius: 6px; }
/* A diagram made of 2+ separate images (e.g. installation constraints'
   253-48/253-49 drawings) gets more width to lay out side by side --
   wrapping to stacked automatically once that width won't fit. */
.element-diagram:has(.diagram-pair) { max-width: 480px; }
.diagram-pair { display: flex; gap: 10px; flex-wrap: wrap; }
.diagram-pair > div { flex: 1 1 200px; min-width: 140px; }
.diagram-cheat-sheet {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 0.68rem;
  line-height: 1.2;
}
.diagram-cheat-sheet th, .diagram-cheat-sheet td {
  padding: 2px 4px;
  text-align: center;
  border: 1px solid var(--border);
}
.diagram-cheat-sheet th { font-weight: 600; color: var(--ink); }

.choice-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}

.choice-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px 8px;
  cursor: pointer;
  text-align: center;
  background: var(--bg);
}
.choice-option.selected {
  border-color: var(--accent);
  background: var(--info-bg);
}
.choice-option input[type="radio"], .choice-option input[type="checkbox"] { align-self: flex-start; margin: 0; }
.choice-diagram { width: 100%; max-width: 110px; color: var(--muted); }
.choice-diagram svg, .choice-diagram img { width: 100%; height: auto; display: block; border-radius: 6px; }
.choice-label { font-size: 0.82rem; }

.diagram-legend {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2px;
}

.tubing-block { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.tubing-field {
  border-left: 3px solid var(--border);
  padding: 4px 0 4px 10px;
}
.tubing-field.state-pass { border-left-color: var(--pass); }
.tubing-field.state-fail { border-left-color: var(--fail); }
.tubing-field.state-warn { border-left-color: var(--warn); }
.tubing-label { font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; text-transform: capitalize; }
.tubing-field select { max-width: 340px; }

.tubing3-fields { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0; }
.tubing3-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: var(--muted); }
.tubing3-field select, .tubing3-field input { font-size: 0.85rem; }
.tubing3-field .dim-other-value { max-width: 90px; }

.numeric-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.extra-field-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.extra-field-row .answer-row { margin: 0; }
.numeric-input { max-width: 120px; }
.numeric-field-label { flex: 1; font-size: 0.85rem; }
.unit-label { color: var(--muted); font-size: 0.85rem; }
.numeric-warning { color: var(--fail); font-weight: 600; font-size: 0.85rem; margin: 2px 0 6px; }

.quick-check-row { margin: 8px 0; }
.quick-check-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.row-table-skipped { opacity: 0.5; }
.row-table-wrap { overflow-x: auto; margin: 8px 0; }
.row-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.row-table th, .row-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.row-table th { background: var(--info-bg); white-space: nowrap; }
.row-table th:has(.col-header-diagram) { white-space: normal; text-align: center; }
.col-header-diagram { max-width: 90px; margin: 0 auto 4px; color: var(--muted); }
.col-header-diagram img, .col-header-diagram svg { display: block; width: 100%; height: auto; max-height: 70px; object-fit: contain; border-radius: 4px; margin: 0 auto; }
.col-header-label { display: block; font-weight: inherit; }
.row-table td.state-pass { background: var(--pass-bg); }
.row-table td.state-fail { background: var(--fail-bg); }
.row-table td.state-warn { background: var(--warn-bg); }
.row-table-label { white-space: normal; font-weight: 600; max-width: 220px; }
@keyframes row-flash-fade {
  0% { background: var(--fail-bg); box-shadow: 0 0 0 2px var(--fail) inset; }
  100% { background: transparent; box-shadow: 0 0 0 2px transparent inset; }
}
.row-table tr.row-flash td { animation: row-flash-fade 1.6s ease-out; }
.element-card.card-flash { animation: row-flash-fade 1.6s ease-out; }
.row-table select, .row-table input[type="text"], .row-table input[type="number"] { width: 100%; min-width: 90px; font-size: 0.8rem; }
.row-table .tubing3-fields { flex-direction: column; gap: 4px; }
.row-table .cell-answer-row { display: flex; gap: 4px; flex-wrap: wrap; max-width: 220px; }
.answer-btn.small { padding: 3px 8px; font-size: 0.78rem; }

.area-cell { flex-wrap: wrap; align-items: center; }
.area-mode-toggle { width: 100%; gap: 4px; }
.row-table .cell-number.small { width: 55px; min-width: 55px; }
.area-xy-sep, .area-computed { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.row-table .length-unit-select { width: auto; min-width: 52px; flex: 0 0 auto; }
.cell-hint { font-size: 0.72rem; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.cell-not-applicable { color: var(--muted); text-align: center; }

.photo-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.photo-thumb { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb button {
  position: absolute; top: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff;
  border: none; width: 18px; height: 18px; font-size: 11px; line-height: 1; cursor: pointer;
}

.pictures-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.picture-card {
  width: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.picture-card-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  background: var(--bg);
}
.picture-card-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.picture-card-delete { align-self: flex-start; }
.picture-category-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 0.78rem;
  text-overflow: ellipsis;
}
.picture-category-section { margin-top: 18px; }
.picture-category-heading { margin: 0 0 4px; font-size: 1rem; }
.picture-autosort-field { margin-top: 10px; }
.picture-autosort-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.picture-elements { display: flex; flex-wrap: wrap; gap: 5px; }
.picture-element-chip {
  font-size: 0.72rem;
  background: var(--info-bg);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
}
.picture-elements-empty { font-size: 0.78rem; color: var(--muted); }
.picture-screenshot-label { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.picture-card-screenshot {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.picture-compare-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.picture-compare-panel h3 { margin: 0 0 6px; font-size: 1rem; }

.note-input { width: 100%; margin-top: 6px; }

.visual-flag { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }

.ai-status { margin-top: 10px; font-size: 0.88rem; color: var(--muted); }
.ai-error { color: var(--fail); }
.ai-suggestion-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ai-suggestion-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.ai-suggestion-row input[type="checkbox"] { margin-top: 3px; }
.ai-suggestion-text { font-size: 0.9rem; }

.results-panel {
  /* Used to be sticky-to-bottom, back when this only ever appeared alone on
     its own dedicated "Part 4" tab (a persistent status bar over that tab's
     own scrollable content). Now Safety score / Logbook / Vehicle
     description all render in-flow together below the checklist on every
     tab, so a fixed-to-viewport-bottom panel here would overlap whatever
     else is currently in view instead -- just a normal panel now. */
  max-height: min(60vh, 520px);
  overflow-y: auto;
}

.results-panel-collapsed {
  max-height: none;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
}
.results-panel-collapsed .results-summary { color: var(--muted); font-size: 0.85rem; flex: 1; }
.safety-score-placeholder { color: var(--muted); font-size: 0.9rem; }
.safety-tier-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.safety-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  /* A <button> (each row links to its item) -- reset the native look. */
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.safety-tier-row:hover, .safety-tier-row:focus-visible { border-color: var(--accent); }
.safety-tier-row:hover .safety-tier-label { color: var(--accent); text-decoration: underline; }
.safety-tier-dot { width: 10px; height: 10px; min-width: 10px; border-radius: 50%; }
.safety-tier-row.tier-green .safety-tier-dot { background: var(--pass); }
.safety-tier-row.tier-orange .safety-tier-dot { background: var(--warn); }
.safety-tier-row.tier-red .safety-tier-dot { background: var(--fail); }
.safety-tier-label { flex: 1 1 auto; }
.safety-tier-value { color: var(--muted); font-size: 0.85rem; }
.safety-tier-points { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.safety-score-total { margin-top: 10px; font-weight: 600; }
.verdict.compact { padding: 6px 12px; margin: 0; font-size: 0.9rem; }

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.results-header h2 { margin: 0; }

.verdict {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.verdict.pass { background: var(--pass-bg); color: var(--pass); }
.verdict.fail { background: var(--fail-bg); color: var(--fail); }
.verdict.warn { background: var(--warn-bg); color: var(--warn); }

.score-bar-outer {
  background: var(--border);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin: 6px 0 10px;
}
.score-bar-inner { height: 100%; background: var(--accent); }

.issue-list { margin: 0; padding-left: 20px; font-size: 0.88rem; }
.issue-list li { margin-bottom: 4px; }
.issue-list li.issue-list-link { cursor: pointer; }
.issue-list li.issue-list-link:hover { color: var(--accent); text-decoration: underline; }

.session-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
}
.session-bar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#sessionBarHolder:not(:empty) { margin-bottom: 10px; }
.session-bar-name-input {
  min-width: 180px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.85rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.load-dialog {
  width: 100%;
  max-width: 860px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.confirm-dialog { max-width: 440px; margin-top: 80px; }
.confirm-dialog h2 { margin: 0 0 8px; }
.confirm-dialog p { margin: 0 0 12px; color: var(--muted); }
.confirm-dialog-actions { justify-content: flex-end; }
.load-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.load-dialog-header h2 { margin: 0; }
.load-dialog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.load-dialog-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.load-dialog-card:hover, .load-dialog-card:focus-visible { border-color: var(--accent); }
.load-dialog-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--info-bg); }
.library-actions {
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.library-selection { flex: 1 1 auto; font-size: 0.85rem; color: var(--muted); }
.load-dialog-images { display: flex; gap: 6px; }
.load-dialog-model {
  flex: 1 1 auto;
  min-width: 0;
  height: 100px;
  object-fit: contain;
  border-radius: 6px;
  background: #1b1e22;
}
.load-dialog-photo { width: 80px; height: 100px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.load-dialog-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--panel);
}
.load-dialog-name { font-weight: 600; font-size: 0.9rem; }
.load-dialog-date { font-size: 0.75rem; color: var(--muted); }

@media print {
  .app-footer, .toolbar, .session-bar, .answer-row, .photo-row, .btn, .modal-overlay { display: none !important; }
  body { background: #fff; color: #000; }
}
.save-as-name-input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.save-as-error { color: var(--red, #e0483e); font-size: 0.85rem; margin-bottom: 8px; }
.library-section-heading { margin: 14px 0 6px; font-size: 0.95rem; color: var(--muted); }
.choice-option.unavailable { opacity: 0.5; cursor: not-allowed; }
.choice-unavailable-note { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.unsafe-explanation { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--fail); text-align: left; }
.unsafe-explanation-link { display: inline; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; color: inherit; }
.unsafe-explanation-link:hover { text-decoration-thickness: 2px; }
.image-viewer { align-items: center; cursor: zoom-out; }
.image-viewer-figure { margin: 0; max-width: min(1100px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.image-viewer-figure img { max-width: 100%; max-height: calc(100vh - 160px); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
.image-viewer-figure figcaption { color: #fff; font-size: 0.9rem; text-align: center; }
.video-viewer { cursor: default; }
.video-viewer-frame { width: min(1000px, calc(100vw - 32px), calc((100vh - 170px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
.video-viewer-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.verdict.neutral { background: var(--panel-2, rgba(127, 127, 127, 0.12)); color: var(--muted); }
.passtech-checks { list-style: none; padding-left: 0; }
.passtech-check { display: flex; gap: 6px; align-items: baseline; padding: 4px 6px; border-radius: 6px; }
.passtech-check.clickable { cursor: pointer; }
.passtech-check.clickable:hover { background: rgba(127, 127, 127, 0.12); }
.passtech-check-icon { flex: 0 0 1.2em; font-weight: 700; text-align: center; }
.passtech-pass .passtech-check-icon { color: var(--pass); }
.passtech-fail .passtech-check-icon, .passtech-fail strong { color: var(--fail); }
.passtech-pending .passtech-check-icon { color: var(--warn); }
.passtech-manual .passtech-check-icon { color: var(--muted); }
.passtech-rule-details { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.passtech-rule-details p { margin: 6px 0; }
.unsafe-explanation-warn { color: var(--warn); }
.results-header-buttons { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.tour-blocker { position: fixed; inset: 0; z-index: 200; }
.tour-spotlight { position: fixed; z-index: 201; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75); pointer-events: none; transition: top 0.15s, left 0.15s, width 0.15s, height 0.15s; }
.tour-callout { position: fixed; z-index: 202; max-height: 60vh; overflow-y: auto; box-sizing: border-box; padding: 14px 16px; border-radius: 10px; border: 2px solid #a78bfa; background: var(--panel); color: var(--ink); box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.15), 0 20px 50px rgba(0, 0, 0, 0.6); }
.tour-callout-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-step-count { font-size: 0.75rem; font-weight: 600; color: #c4b5fd; }
.tour-callout p { margin: 8px 0 10px; font-size: 0.9rem; line-height: 1.4; }
.tour-next { width: 100%; }
.picture-element-chip { display: inline-flex; align-items: center; gap: 4px; }
.picture-element-remove { background: none; border: none; padding: 0 2px; margin-left: 2px; cursor: pointer; color: var(--fail); font-size: 1rem; line-height: 1; font-weight: 700; }
.picture-element-remove:hover { color: #fff; background: var(--fail); border-radius: 4px; }
.tour-intro-overlay { z-index: 200; align-items: center; }
.tour-intro { position: static; width: min(440px, 100%); max-height: 85vh; }
.tour-intro h2 { margin: 0; font-size: 1.1rem; }
.tour-intro-logo { display: block; width: 96px; height: 96px; margin: 12px auto 0; border-radius: 18px; }
/* Logbook events (logbook app) */
.logbook-event-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.logbook-event { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.logbook-event.state-pass { border-left-color: var(--pass); }
.logbook-event.state-fail { border-left-color: var(--fail); }
.logbook-event.state-warn { border-left-color: var(--warn); }
.logbook-event-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.logbook-event-title { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.logbook-event-badge { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); white-space: nowrap; }
.logbook-event-badge.result-pass { background: var(--pass-bg); color: var(--pass); }
.logbook-event-badge.result-fail, .logbook-event-badge.damage { background: var(--fail-bg); color: var(--fail); }
.logbook-event-toggle { color: var(--muted); }
.logbook-event-body { padding: 0 12px 12px; }
.logbook-event-damage { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.checkbox-label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; cursor: pointer; }
.damage-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.damage-photo-grid .photo-thumb img { cursor: zoom-in; }
.damage-chip { background: var(--fail-bg); color: var(--fail); }