: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;
  --template: #6b3fb3;
  --kit: #b4530f;
  --sample: #0e7490;
  --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;
    --template: #b794f6;
    --kit: #f6a85a;
    --sample: #5fd4e8;
  }
}

* { 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; }
/* The title, and How it works / User manual at its right (wrapping under it on a phone). */
.app-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.app-header-row h1 { margin-right: auto; }
.app-header-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.app-header-actions { align-items: center; }
.app-header-actions a.btn { text-decoration: none; }
/* The FIA tutorial video: PassTech's frog-on-YouTube logo (its title shows on hover). */
.header-video-link { display: block; height: 30px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--border); }
.header-video-link img { display: block; height: 100%; width: auto; }
.header-video-link:hover { border-color: var(--accent); }
.app-header h1 .app-logo { height: 1.8em; width: auto; vertical-align: middle; margin: -0.2em 0.35em 0 0; }
.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. */
/* The editor hidden until a logbook is opened (CFG.startHidden). */
body.workspace-hidden .cage-viewer-row, body.workspace-hidden #app { display: none; }
.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;
}
/* The first rollcage picture, bottom right -- no bigger than the logo. */
.cage-viewer-first-picture {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  cursor: zoom-in;
  z-index: 2;
}
.cage-viewer-first-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cage-viewer-first-picture:hover { border-color: var(--accent); }
#cageViewerFirstPicture[hidden] { display: none; }
/* 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; }
/* The model's own view controls, overlaid on its bottom-left corner (above
   the canvas, which cage_view.js appends after them). */
.cage-viewer-overlay-buttons { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.cage-viewer-overlay-buttons .btn.secondary { background: rgba(27, 30, 34, 0.75); }
#cageViewerHeader[hidden] { display: none; }
/* 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: 0 1 auto; font-size: 0.85rem; }
.numeric-fields { display: grid; grid-template-columns: minmax(0, auto) auto auto; justify-content: start; align-items: center; column-gap: 8px; row-gap: 6px; margin: 6px 0; }
.numeric-fields .numeric-row { display: contents; }
.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; align-items: flex-start; 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; }
/* Just the photo until clicked (renderPictureCard): a smaller tile. */
.picture-card.picture-card-collapsed { width: 150px; padding: 4px; }
.picture-card-collapsed .picture-card-photo { height: 110px; cursor: pointer; }
.picture-card-photo-wrap { position: relative; }
/* The number of elements tagged, over the photo's top-left corner;
   hovering it shows the tagged parts on the 3D model. */
.picture-tag-count {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; cursor: default;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.picture-tag-count.none { background: rgba(0, 0, 0, 0.55); }
.picture-tag-preview {
  display: none; position: absolute; top: 26px; left: 0; z-index: 30; width: 240px;
  padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); color: var(--ink); font-weight: 400; text-align: left;
}
.picture-tag-preview img { display: block; width: 100%; border-radius: 6px; background: var(--bg); }
.picture-tag-preview-names { display: block; margin-top: 4px; font-size: 0.72rem; line-height: 1.3; color: var(--muted); }
.picture-tag-count:hover .picture-tag-preview { display: block; }
.picture-card-collapse { align-self: flex-end; background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--accent); cursor: pointer; }
.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-video-overview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; }
.picture-video-overview.empty { color: var(--muted); }
.picture-video-title { flex: 1; min-width: 160px; }
.picture-video-input { flex: 1; min-width: 200px; }
.picture-video-error { flex-basis: 100%; }
.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; }
/* The whole snapshot, never cropped (it's already trimmed to the parts),
   on the 3D view's own background. */
.picture-card-screenshot {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: #1b1e22;
  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; }
.picture-compare-panel.agrees { margin: 16px 0 8px; padding: 10px 12px; border: 1px solid var(--pass); border-radius: var(--radius); background: var(--pass-bg); }
.picture-compare-panel.agrees h3 { margin: 0 0 4px; font-size: 0.95rem; }
.picture-compare-panel.agrees .ai-status { margin: 0; }

.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-vehicle-link { background: none; border: none; padding: 0; color: var(--accent, #6ea8fe); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.safety-score-missing { background: color-mix(in srgb, var(--fail) 18%, transparent); border: 1px solid var(--fail); color: var(--fail); border-radius: 8px; padding: 8px 10px; margin: 8px 0 10px; font-size: 0.85rem; }
.safety-score-missing-title { font-weight: 600; margin-bottom: 4px; }
.safety-score-missing ul { margin: 0; padding-left: 18px; }
.safety-score-missing .safety-score-vehicle-link { color: var(--fail); font-weight: 600; }
.safety-score-violation { background: color-mix(in srgb, var(--fail) 18%, transparent); border: 1px solid var(--fail); color: var(--fail); font-weight: 600; border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; font-size: 0.9rem; }
.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; }
.library-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.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); }
/* A subtitle with a link, laid over the card's own (invisible) subtitle line. */
.load-dialog-card-wrap { position: relative; display: flex; flex-direction: column; }
.load-dialog-date-placeholder { visibility: hidden; }
.load-dialog-date-link { position: absolute; left: 9px; bottom: 9px; pointer-events: none; }
.load-dialog-date-link a { pointer-events: auto; color: var(--accent); }
.load-dialog-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--info-bg); }
.pictures-group-heading { margin: 18px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
.video-frame-role { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.video-frame-role-btn { font: inherit; font-size: 0.72rem; padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--ink); cursor: pointer; }
.video-frame-role-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.video-frame-role-btn:disabled { opacity: 0.5; cursor: default; }
.library-current { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 6px; }
.library-current-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; width: 280px; max-width: 100%; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--info-bg); }
.library-current-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.library-current-unsaved { color: var(--warn); }
.session-bar-unsaved { font: inherit; font-size: 0.75rem; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 999px; padding: 1px 8px; white-space: nowrap; cursor: pointer; }
.session-bar-unsaved:hover { filter: brightness(1.15); }
/* Library sections, each in its own color: currently editing (blue), saved
   (green), design templates (purple). */
.library-section { --section: var(--accent); margin-top: 14px; padding: 4px 12px 12px; border-left: 4px solid var(--section); border-radius: var(--radius); background: color-mix(in srgb, var(--section) 7%, transparent); }
.library-section .library-section-heading { color: var(--section); margin-top: 8px; }
.library-section .load-dialog-list { margin-top: 8px; }
.library-section-current { --section: var(--accent); }
.library-section-saved { --section: var(--pass); }
.library-section-templates { --section: var(--template); }
.library-section-kit { --section: var(--kit); }
.library-section-sample { --section: var(--sample); }
.library-section-current .library-current-card { border-color: var(--section); }
.picture-coverage { margin: 16px 0 8px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); }
.picture-coverage.incomplete { border-color: var(--warn); background: var(--warn-bg); }
.picture-coverage.complete { border-color: var(--pass); background: var(--pass-bg); }
.picture-coverage h3 { margin: 0 0 4px; font-size: 0.95rem; }
.picture-coverage-label { font-size: 0.8rem; color: var(--muted); margin: 8px 0 4px; }
.picture-coverage-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.picture-coverage-chip { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.picture-coverage-chip.missing { border-color: var(--warn); color: var(--warn); }
.picture-coverage-chip.covered { border-color: var(--pass); color: var(--pass); }
button.picture-coverage-chip { font: inherit; font-size: 0.75rem; background: var(--bg); cursor: pointer; }
button.picture-coverage-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px currentColor; }
.picture-elements-toggle { font: inherit; font-size: 0.8rem; color: var(--accent); background: none; border: none; padding: 2px 0; cursor: pointer; text-align: left; }
.coverage-picture-dialog { max-width: 760px; width: calc(100vw - 32px); }
.coverage-picture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; margin: 8px 0; }
.coverage-picture-tile { position: relative; display: flex; }
.coverage-picture { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 4px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.coverage-picture-zoom { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; font-size: 0.9rem; line-height: 1; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: zoom-in; }
.coverage-picture-zoom:hover { background: rgba(0, 0, 0, 0.8); }
.coverage-picture img, .coverage-picture-loading { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - 2px); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--muted); }
.coverage-picture.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--info-bg); }
.coverage-picture-label { font-size: 0.75rem; text-align: left; }
.compare-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.compare-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.compare-row-name { font-weight: 600; margin-bottom: 6px; }
.compare-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare-option { text-align: left; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; }
.compare-option:hover:not(:disabled) { border-color: var(--accent); }
.compare-option:disabled { cursor: not-allowed; opacity: 0.75; }
.compare-option.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--info-bg); }
.compare-option-heading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 2px; }
.compare-option-value { font-size: 0.9rem; }
.compare-option-detail { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
@media (max-width: 520px) { .compare-options { grid-template-columns: 1fr; } }
.load-dialog-item { display: flex; flex-direction: column; }
.load-dialog-item.selected .load-dialog-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.library-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 2px solid var(--accent); border-top: none; border-radius: 0 0 var(--radius) var(--radius); background: var(--info-bg); }
.vehicle-part-heading { margin: 4px 0 8px; font-size: 1rem; }
.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; position: relative; }
/* A card's Frog Safety score, just the number, over its top-left corner. */
.library-card-score {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(20, 22, 26, 0.85); color: var(--ink);
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none;
}
.library-card-score.tier-green { color: var(--pass); border-color: var(--pass); }
.library-card-score.tier-orange { color: var(--warn); border-color: var(--warn); }
.library-card-score.tier-red { color: var(--fail); border-color: var(--fail); }
.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); }
/* Previous / next picture, at the screen's edges (they stay put while a zoomed photo scrolls). */
.image-viewer-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 101; width: 48px; height: 72px; padding: 0; border: none; border-radius: var(--radius); background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; }
.image-viewer-arrow:hover { background: rgba(0, 0, 0, 0.8); }
.image-viewer-arrow.prev { left: 8px; }
.image-viewer-arrow.next { right: 8px; }
.image-viewer-loading { color: #fff; padding: 80px 0; }
.image-viewer-figure figcaption { color: #fff; font-size: 0.9rem; text-align: center; }
.image-viewer-figure img { cursor: zoom-in; }
/* Zoomed: the photo at full resolution, scrolled around inside the overlay. */
.image-viewer.zoomed { align-items: flex-start; justify-content: flex-start; overflow: auto; }
.image-viewer.zoomed .image-viewer-figure { max-width: none; }
.image-viewer.zoomed .image-viewer-figure img { max-width: none; max-height: none; cursor: zoom-out; }
img.zoomable, #cageViewerPictureModeThumb { cursor: zoom-in; }
.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); }
/* Under a Part 8 safety score row: lined up with the row's label. */
.safety-tier-explain { margin: -2px 0 4px 28px; }
.safety-tier-explain .unsafe-explanation { margin-top: 0; }
/* A grandfathered rule item answered by the rollcage design (renderDerivedCard). */
.derived-source { margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.collapsed-card .derived-source { margin-top: 0; padding: 0 14px 10px; }
.derived-source-link { display: inline; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--accent); text-decoration: underline; text-align: left; }
.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); }
.footer-affiliate { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.footer-affiliate p { margin: 0; }
.footer-affiliate img { display: block; border: 0; }
.footer-affiliate-disclosure { max-width: 30rem; font-size: 0.72rem; opacity: 0.75; }
@media print { .footer-affiliate { display: none; } }
.video-walkaround-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.video-walkaround-anim { width: 96px; height: 72px; border-radius: 8px; border: 1px solid var(--border); flex: 0 0 auto; }
.picture-video-frame { font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.video-review-head { margin: 6px 0; }
.video-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.video-review-frame { position: relative; padding: 0; border: 3px solid transparent; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; opacity: 0.45; filter: grayscale(0.6); transition: opacity 0.1s; }
.video-review-frame.selected { border-color: var(--accent, #6b9bff); opacity: 1; filter: none; }
.video-review-frame img { display: block; width: 100%; height: auto; }
.video-review-time { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.72rem; }
.video-review-check { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--accent, #6b9bff); color: #fff; font-weight: 700; font-size: 0.8rem; }
/* In-progress AI states */
.ai-busy { color: var(--accent); font-weight: 700; }
.ai-spinning::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 6px; vertical-align: -0.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ai-spin 0.8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-spinning::before { animation-duration: 2.4s; } }
/* AI confidence on picture tags */
.picture-element-confidence { font-size: 0.68rem; font-weight: 700; padding: 0 5px; border-radius: 4px; background: rgba(127, 127, 127, 0.2); white-space: nowrap; }
.picture-element-chip.ai-low { border: 1px dashed var(--warn); }
.picture-element-chip.ai-low .picture-element-confidence { background: var(--warn-bg); color: var(--warn); }
/* Video frame review: zoom button + full-size viewer */
.video-review-cell { position: relative; }
.video-review-cell .video-review-frame { width: 100%; }
.video-review-zoom { position: absolute; left: 6px; top: 6px; width: 28px; height: 28px; border: none; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: zoom-in; font-size: 0.85rem; line-height: 28px; padding: 0; }
.video-review-zoom:hover { background: rgba(0, 0, 0, 0.85); }
.video-frame-viewer { align-items: center; z-index: 150; }
.video-frame-viewer:focus { outline: none; }
.video-frame-viewer-box { width: min(1200px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 8px; background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-sizing: border-box; }
.video-frame-viewer-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.video-frame-viewer-state { font-weight: 700; color: var(--muted); }
.video-frame-viewer-state.kept { color: var(--pass); }
.video-frame-viewer-image { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; background: #000; border-radius: 8px; cursor: zoom-in; }
.video-frame-viewer-image img { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; display: block; }
.video-frame-viewer-image.zoomed { cursor: zoom-out; justify-content: flex-start; }
.video-frame-viewer-image.zoomed img { max-width: none; max-height: none; }
.video-frame-viewer-actions { justify-content: center; }
.picture-pairing-note { margin: 4px 0; padding: 6px 8px; border-radius: 6px; font-size: 0.78rem; background: var(--warn-bg); color: var(--warn); }
.library-notice { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: var(--pass-bg); color: var(--pass); font-size: 0.85rem; }