/* ==========================================================================
   JPI report — structure layer

   Class names are prefixed `rcard` rather than `card` on purpose: report.css
   already defines `.card` twice (line 429 and 509), the second adding
   `display:flex; flex-direction:column`, plus a `.card:hover` shadow. Using
   `.card` here would inherit all of that. Renaming is cleaner than fighting
   the cascade.
   Loaded AFTER report.css. Scoped to the new decision-layer components only;
   nothing here restyles existing section markup.
   ========================================================================== */

:root {
  /* Severity ramp — maps directly to the `severity` values already present in
     findings: critical / major / minor. */
  --sev-critical: #c0392b;
  --sev-major:    #d97706;
  --sev-minor:    #c98a1a;
  --sev-ok:       #2e8b6f;
  --sev-review:   #7c3aed;

  /* Provenance markers */
  --src-measured:    #5b6572;
  --src-assessed:    #8b94a1;
  --src-third-party: var(--primary-color, #1e6fb8);

  --font-ui:   "IBM Plex Sans", "IBM Plex Sans SC",
               "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --line-soft:   #e3e6ea;
  --line-strong: #cdd3da;
  --wash:        #f7f8fa;
}

/* Measured values render monospaced with aligned figures. This is semantic,
   not decorative: it separates what was measured from what was concluded. */
.mono,
.fig-v, .att-c, .ci-c, .sum-c,
.kv dd.mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Provenance marker
   -------------------------------------------------------------------------- */
.src {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--text-muted, #8b94a1);
  vertical-align: 1px;
  white-space: nowrap;
}
.src::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 6px;
}
.src[data-source="measured"]::before    { background: var(--src-measured); }
.src[data-source="assessed"]::before    { background: transparent;
                                          border: 1.4px solid var(--src-assessed); }
.src[data-source="third-party"]::before { background: var(--src-third-party);
                                          border-radius: 1px; }

/* --------------------------------------------------------------------------
   Decision rcard
   -------------------------------------------------------------------------- */
.decision { border-top: 3px solid var(--primary-color, #1e6fb8); }

.figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
}
.fig { background: #fff; padding: 18px; }
.fig-k {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}
.fig-v {
  display: block;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.fig-n {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted, #8b94a1);
}
.fig-required  .fig-v { color: var(--sev-critical); }
.fig-suggested .fig-v { color: var(--sev-major); }
.fig-total     .fig-v { color: var(--text-primary, #1f2937); }

.figs-empty {
  padding: 22px 18px;
  color: var(--text-secondary, #5b6572);
  font-size: 14px;
}
.figs-empty p { margin: 0; }

.facts {
  display: grid;
  gap: 9px;
  padding: 16px 18px;
  border-top: 1px solid var(--line-soft);
}
.fact {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.fact i {
  flex: 0 0 15px;
  height: 15px;
  margin-top: 2.5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
}
.fact-yes  i { background: var(--sev-ok); }
.fact-no   i { background: var(--sev-critical); }
.fact-warn i { background: var(--sev-major); }

.basis {
  margin: 0;
  padding: 11px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted, #8b94a1);
}

/* --------------------------------------------------------------------------
   Card chrome (shared by the new partials)
   -------------------------------------------------------------------------- */
/* Card container for the decision layer.

   This was missing. The components were renamed .card -> .rcard to avoid
   report.css's two conflicting .card rules — but the card *appearance*
   (background, border, radius) had always come from report.css's .card, not
   from here. After the rename nothing matched, so the decision card, attention
   list, inspector summary, photo gallery and cost table all sat directly on
   the page background while every section below them had a proper white card.
   That is the "styles don't match" the report showed. */
.rcard {
  background: #fff;
  border: 1px solid var(--line-soft);
  /* Same radius report.css gives every section card (--radius-card: 8px), so
     the decision layer and the sections below it read as one document. */
  border-radius: var(--radius-card, 8px);
  overflow: hidden;
  margin-bottom: 16px;
}

.rcard-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.rcard-hd h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.rcard-sub  { margin-left: auto; font-size: 12.5px; color: var(--text-muted, #8b94a1); }
.rcard-bd   { padding: 18px; }

.prose p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: #2c343e; }
.prose p:last-child { margin-bottom: 0; }
.prose-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.prose-note-k {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}

/* --------------------------------------------------------------------------
   Attention list
   -------------------------------------------------------------------------- */
.att-row {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
}
.att-row:last-child { border-bottom: 0; }
.att-row:hover  { background: var(--wash); }
.att-row:focus-visible { outline: 2px solid var(--primary-color, #1e6fb8); outline-offset: -2px; }

.att-bar { width: 4px; min-height: 30px; height: 100%; border-radius: 2px; }
.sev-critical .att-bar { background: var(--sev-critical); }
.sev-major    .att-bar { background: var(--sev-major); }
.sev-minor    .att-bar { background: var(--sev-minor); }

.att-t { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.att-count {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #8b94a1);
}
.att-m {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-muted, #8b94a1);
}
.att-detail { flex-basis: 100%; }
.att-c { font-size: 13.5px; font-weight: 500; text-align: right; white-space: nowrap; }

.att-more { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.att-more a { color: var(--primary-color, #1e6fb8); }

.tag {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tag-req    { color: var(--sev-critical); border-color: #f0c9c4; background: #fdf3f2; }
.tag-sug    { color: var(--sev-major);    border-color: #f2d9b0; background: #fdf7ef; }
.tag-review { color: var(--sev-review);   border-color: #ded0f7; background: #f8f4ff; }

/* --------------------------------------------------------------------------
   Section verdict
   -------------------------------------------------------------------------- */
.sv {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.sv h2 { margin: 0; font-size: 15px; font-weight: 600; }
.sv-lede { padding-bottom: 14px; }

.rating {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
.rating[data-r="fix-now"]  { color: #fff;     background: var(--sev-critical); }
.rating[data-r="fix-soon"] { color: #fff;     background: var(--sev-major); }
.rating[data-r="monitor"]  { color: #7a5a10;  background: #fbf0d8; }
.rating[data-r="ok"]       { color: #fff;     background: var(--sev-ok); }

/* --------------------------------------------------------------------------
   Collapsibles — native <details>, no JS, auto-expanded for print
   -------------------------------------------------------------------------- */
.rcard details { border-top: 1px solid var(--line-soft); }
.rcard details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-secondary, #5b6572);
}
.rcard details > summary::-webkit-details-marker { display: none; }
.rcard details > summary::after {
  content: "\25BE";
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #8b94a1);
  transition: transform .15s;
}
.rcard details[open] > summary::after { transform: rotate(180deg); }
.rcard details > summary:hover { background: var(--wash); }
.rcard details > summary:focus-visible { outline: 2px solid var(--primary-color, #1e6fb8); outline-offset: -2px; }
.det-bd { padding: 4px 18px 18px; }

/* --------------------------------------------------------------------------
   Cost table
   -------------------------------------------------------------------------- */
.grp {
  margin: 0;
  padding: 16px 18px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}
.grp-note { font-weight: 400; text-transform: none; letter-spacing: 0; }

.ci {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.ci-d { display: block; font-size: 13.5px; }
.ci-s { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted, #8b94a1); }
.ci-c { margin-left: auto; font-size: 13.5px; white-space: nowrap; }

.sum-row {
  display: flex;
  align-items: baseline;
  padding: 13px 18px;
  border-top: 2px solid var(--line-strong);
  font-size: 14px;
  font-weight: 600;
}
.sum-c { margin-left: auto; }
.sum-total { border-top-width: 3px; }

.note-foot {
  padding: 14px 18px 16px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted, #8b94a1);
}

/* --------------------------------------------------------------------------
   Integrity panel — development only
   -------------------------------------------------------------------------- */
.integrity {
  margin: 0 18px 18px;
  padding: 12px 14px;
  border: 1px solid #e0d4f8;
  border-radius: 7px;
  background: #f9f6ff;
  font-size: 12.5px;
  line-height: 1.55;
  color: #4c2f8a;
}
.integrity-hd { margin: 0 0 8px; font-weight: 600; }
.integrity-note { font-weight: 400; opacity: .7; }
.integrity ul { margin: 0; padding-left: 18px; }
.integrity li { margin-bottom: 4px; }
.integrity code {
  font-family: var(--font-data);
  font-size: 11px;
  padding: 0 3px;
  border-radius: 2px;
  background: rgba(124, 58, 237, .09);
}
.integrity-error { font-weight: 500; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .figs { grid-template-columns: 1fr; }
  .att-row { grid-template-columns: 4px 1fr; row-gap: 6px; }
  .att-c { grid-column: 2; text-align: left; }
}

/* --------------------------------------------------------------------------
   Print — collapsibles open, integrity panel gone
   -------------------------------------------------------------------------- */
@media print {
  .rcard details > summary { display: none; }
  .rcard details          { display: block; }
  .det-bd                { display: block !important; }
  .integrity             { display: none; }
  .att-row:hover         { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rcard details > summary::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Panel condition summary — replaces the nine-swatch legend
   -------------------------------------------------------------------------- */
.panels { padding: 14px 18px 16px; border-top: 1px solid var(--line-soft); }

.panels-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}
.panels-count { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }

.panel-groups { display: grid; gap: 1px; background: var(--line-soft);
                border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; }
.panel-group { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; background: #fff; }
.pg-swatch { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 4px; border-radius: 2px; }
.pg-major .pg-swatch { background: var(--sev-major); }
.pg-minor .pg-swatch { background: var(--sev-minor); }
.pg-ok    .pg-swatch { background: var(--sev-ok); }
.pg-body { min-width: 0; }
.pg-k { display: block; font-size: 13px; font-weight: 500; }
.pg-n { font-family: var(--font-data); font-size: 11.5px; color: var(--text-muted, #8b94a1); }
.pg-v { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary, #5b6572); }

.panels-clear { margin: 0; font-size: 13px; color: var(--text-secondary, #5b6572); }
.panels-note {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 6px;
  background: #fdf7ef;
  border: 1px solid #f2d9b0;
  font-size: 12px;
  line-height: 1.5;
  color: #7a4a08;
}

/* 3D viewer — sized so it fits above the fold on a laptop instead of filling it */
.viewer-3d { height: 380px !important; border-radius: 8px; }
@media (max-width: 700px) { .viewer-3d { height: 260px !important; } }
@media print { .viewer-3d { height: 300px !important; } }

/* Panel status badge inside the exterior table — replaces the twelve-branch
   colour ladder with the same three-step ramp used everywhere else. */
.panel-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.pb-ok    { color: #1d6b55; border-color: #b8ded1; background: #eef8f4; }
.pb-minor { color: #7a5a10; border-color: #f0dfb4; background: #fdf8ec; }
.pb-major { color: #8a4b06; border-color: #f2d9b0; background: #fdf3e7; }

/* --------------------------------------------------------------------------
   Whole-report photo gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 7px;
}
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 5px;
  background: var(--wash);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 3px 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.2;
}
@media print {
  .gallery-grid { grid-template-columns: repeat(6, 1fr); }
  .gallery-tag  { display: none; }
}

/* Summary prose: headings and lists produced by render_prose() */
.prose h4, .prose h5, .prose h6 {
  margin: 18px 0 8px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary, #1f2937);
}
.prose h4 { font-size: 15px; }
.prose h5 { font-size: 14px; }
.prose h6 {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}
.prose > :first-child { margin-top: 0; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.6; color: #2c343e; }
.prose li:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }

/* ==========================================================================
   Visual consistency layer

   Loaded only by base_v2.html, so v1 is untouched. This overrides report.css
   rather than editing the nine section templates: those carry 283 Bootstrap
   badge classes across ~5,500 lines, and restyling them in place would mean
   283 edits for a change that is purely presentational.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typeface actually applies
   report.css line 64 pins body to the system stack, so the Plex webfont
   base_v2.html downloads was never used for anything but the numerals.
   -------------------------------------------------------------------------- */
body,
.report-content,
.prose,
.card,
.rcard {
  font-family: var(--font-ui);
}

/* Numerals stay tabular wherever they appear in tables and measurement rows */
table td, table th,
.info-value, .spec-value, .measure-value {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. Badge vocabulary collapses onto the severity ramp

   Section bodies use five Bootstrap colours whose meanings collide with the
   decision layer: bg-info is "Light Usage" in Interior but reads as the
   Monitor blue in the Mechanical brake gauge. Same colour, two meanings.

   Mapping:
     bg-success             -> ok        (green)
     bg-info                -> monitor   (amber, was blue)
     bg-warning             -> monitor   (amber)
     bg-danger              -> fix now   (red)
     bg-secondary / bg-light-> n/a       (grey)

   Flat with a hairline border, matching .tag in the decision layer, instead of
   Bootstrap's solid fills.
   -------------------------------------------------------------------------- */
.report-content .badge {
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid !important;
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  line-height: 1.5 !important;
  white-space: nowrap;
  /* default for any badge carrying no bg-* class, so the border rule above
     never produces an invisible outline on a transparent chip */
  color: #5b6572;
  background: #f4f5f7;
  border-color: #dfe3e8;
}

.report-content .badge.bg-success {
  color: #1d6b55 !important;
  background: #eef8f4 !important;
  border-color: #b8ded1 !important;
}
.report-content .badge.bg-primary {
  color: var(--primary-dark, #0f4470) !important;
  background: #eef4fb !important;
  border-color: #cfe0f2 !important;
}
.report-content .badge.bg-info,
.report-content .badge.bg-warning {
  color: #7a5a10 !important;
  background: #fdf8ec !important;
  border-color: #f0dfb4 !important;
}
.report-content .badge.bg-danger {
  color: #9b2f24 !important;
  background: #fdf3f2 !important;
  border-color: #f0c9c4 !important;
}
.report-content .badge.bg-secondary,
.report-content .badge.bg-light,
.report-content .badge.bg-dark {
  color: #5b6572 !important;
  background: #f4f5f7 !important;
  border-color: #dfe3e8 !important;
}
/* Bootstrap pairs bg-warning with text-dark; the override already sets colour */
.report-content .badge.text-dark,
.report-content .badge.text-white { color: inherit !important; }

/* --------------------------------------------------------------------------
   3. One accent, not two

   report.css puts a 4px blue bar on the left of every inner card header
   (.card-header, .info-card-header) plus a Font Awesome icon. The decision
   layer uses plain text headers with a hairline rule. Two competing header
   treatments in one document read as two products.
   -------------------------------------------------------------------------- */
.report-content .card-header,
.report-content .info-card-header {
  padding-left: 18px !important;
  font-size: 14.5px !important;
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* Keep the accent only where it encodes severity */
.report-content .repair-item {
  background: #fff !important;
  border: 1px solid var(--line-soft) !important;
  border-left: 3px solid var(--sev-minor) !important;
}
.report-content .repair-item.required  { border-left-color: var(--sev-critical) !important; }
.report-content .repair-item.suggested { border-left-color: var(--sev-major) !important; }

/* Soften the remaining card chrome so inner cards sit inside the outer card
   rather than competing with it */
.report-content .card {
  box-shadow: none !important;
  border: 1px solid var(--line-soft) !important;
}
.report-content .card:hover { box-shadow: none !important; }

/* --------------------------------------------------------------------------
   Inner card headers

   The section templates use four different filled header treatments —
   `bg-primary text-white`, `bg-info text-white`, `bg-gradient bg-primary`,
   `bg-secondary text-white`. report.css already forces them white, but the
   Bootstrap classes still fight it in some stacking orders, and the icons
   remain. Flatten all four to the same plain header the decision layer uses.
   -------------------------------------------------------------------------- */
.report-content .card-header,
.report-content .card-header.bg-primary,
.report-content .card-header.bg-info,
.report-content .card-header.bg-secondary,
.report-content .card-header.bg-gradient,
.report-content .info-card-header {
  background: #fff !important;
  background-image: none !important;
  color: var(--text-primary, #1f2937) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.report-content .card-header.text-white,
.report-content .card-header.text-white h5,
.report-content .card-header h5 {
  color: var(--text-primary, #1f2937) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}


/* One nesting level fewer: inner cards read as groups inside the section card
   rather than as cards competing with it */
.report-content .card.shadow-sm,
.report-content .card.h-100 {
  box-shadow: none !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 8px !important;
}

/* --------------------------------------------------------------------------
   Market valuation — sits under the PPSR block inside Vehicle Information,
   so it borrows that block's card chrome rather than the decision layer's.
   -------------------------------------------------------------------------- */
.valuation {
  margin: 16px 0 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card, 8px);
  overflow: hidden;
  background: #fff;
}
.valuation-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.valuation-title { font-size: 14.5px; font-weight: 600; }
.valuation-src {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--text-muted, #8b94a1);
}
.valuation-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
  align-items: flex-start;
  padding: 16px;
}
.valuation-figure { min-width: 168px; }
.valuation-k {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}
/* Deliberately NOT monospaced. The mono face exists to align columns of
   measured values (tread depths, paint microns); a single headline figure set
   in it reads like program output rather than a conclusion. The odometer below
   keeps mono because it IS a measurement. */
.valuation-v {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text-primary, #1f2937);
}
.valuation-range {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary, #5b6572);
}
.valuation-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  gap: 14px 28px;
  margin: 0;
}
.valuation-meta dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}
.valuation-meta dd { margin: 3px 0 0; font-size: 12.5px; }

.valuation-caveat {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: #fdf8ec;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7a5a10;
}
.valuation-note {
  margin: 0;
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted, #8b94a1);
}
@media (max-width: 600px) {
  .valuation-body { gap: 16px; }
  .valuation-meta { grid-template-columns: 1fr 1fr; }
}

/* Model match spans the full meta row — a full vehicle title does not fit a
   150px column alongside the numbers. */
.valuation-meta-wide { grid-column: 1 / -1; }

/* Dealer trade explanation. Collapsed by design: two prices side by side and
   the reader takes the lower one as the real value. */
.valuation-trade { border-top: 1px solid var(--line-soft); }
.valuation-trade > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  color: var(--text-secondary, #5b6572);
}
.valuation-trade > summary::-webkit-details-marker { display: none; }
.valuation-trade > summary::after {
  content: "\25BE";
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #8b94a1);
  transition: transform .15s;
}
.valuation-trade[open] > summary::after { transform: rotate(180deg); }
.valuation-trade > summary:hover { background: var(--wash); }
.valuation-trade > summary:focus-visible {
  outline: 2px solid var(--primary-color, #1e6fb8);
  outline-offset: -2px;
}
.valuation-trade-body { padding: 0 16px 14px; }
.valuation-trade-body p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary, #5b6572);
}
.valuation-trade-body p:last-child { margin-bottom: 0; }
.valuation-trade-body strong { font-weight: 600; color: var(--text-primary, #1f2937); }
@media (prefers-reduced-motion: reduce) {
  .valuation-trade > summary::after { transition: none; }
}

.valuation-trade-label { font-weight: 600; color: var(--text-primary, #1f2937); }
.valuation-trade-hint {
  font-size: 11.5px;
  color: var(--text-muted, #8b94a1);
}
.valuation-trade[open] .valuation-trade-hint { visibility: hidden; }

/* ==========================================================================
   Visual system — three channels, one job each

   The earlier pass flattened everything: it removed 44 blue bars and 28 icons
   so that one document would not have two header treatments. The direction was
   right but the target was wrong — it made the report quieter at the cost of
   the structure that made sections legible.

   The version below keeps the richness and removes the ambiguity instead, by
   giving each visual channel exactly one job:

     icon        what this block is about   — always one muted tone, never
                                              coloured by state
     left bar    how urgent it is           — the four-step severity ramp;
                                              this is the bar that used to be
                                              decorative blue
     badge       the state, in words        — same ramp, flat with a hairline

   Accent blue is reserved for things you can click. It no longer carries
   status, which is what removes the old collision where bg-info meant "Light
   Usage" in Interior and read as "Monitor" in the brake gauge.
   ========================================================================== */

/* --- icons: category only ------------------------------------------------ */
.report-content .card-header > i,
.report-content .info-card-header > i,
.report-content h5 > i,
.sgroup-hd > i,
.sv > i {
  color: var(--icon-tone, #97a1ae) !important;
  font-size: .92em;
  width: 1.15em;
  text-align: center;
  flex: 0 0 auto;
}

/* --- left bar: severity only --------------------------------------------- */
.report-content .card-header,
.report-content .info-card-header {
  border-left: 3px solid var(--line-strong) !important;
}
.report-content .card-header.bg-danger,
.report-content .card-header.sev-fix-now   { border-left-color: var(--sev-critical) !important; }
.report-content .card-header.bg-warning,
.report-content .card-header.sev-fix-soon  { border-left-color: var(--sev-major) !important; }
.report-content .card-header.bg-info,
.report-content .card-header.sev-monitor   { border-left-color: var(--sev-minor) !important; }
.report-content .card-header.bg-success,
.report-content .card-header.sev-ok        { border-left-color: var(--sev-ok) !important; }

/* Section headers carry the rating already; give them the matching bar.
   The class comes from the template rather than :has() — Safari only shipped
   :has() in 15.4 and a report gets forwarded to whatever browser the buyer's
   mechanic happens to have. */
.sv { border-left: 3px solid var(--line-strong); }
.sv.sev-fix-now  { border-left-color: var(--sev-critical); }
.sv.sev-fix-soon { border-left-color: var(--sev-major); }
.sv.sev-monitor  { border-left-color: var(--sev-minor); }
.sv.sev-ok       { border-left-color: var(--sev-ok); }
.sv h2 { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   Inspector summary groups
   -------------------------------------------------------------------------- */
.sgroups { display: grid; }
.sgroup {
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid var(--line-strong);
}
.sgroup:last-child { border-bottom: 0; }
.sgroup.sev-fix-now  { border-left-color: var(--sev-critical); }
.sgroup.sev-fix-soon { border-left-color: var(--sev-major); }
.sgroup.sev-monitor  { border-left-color: var(--sev-minor); }
.sgroup.sev-ok       { border-left-color: var(--sev-ok); }
.sgroup.sev-none     { border-left-color: transparent; }

.sgroup-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 0;
}
.sgroup-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary, #5b6572);
}
.sgroup-hd .rating { margin-left: auto; }
.sgroup-body { padding: 6px 18px 14px; }
.sgroup-body ul { margin: 0; padding-left: 18px; }
.sgroup-body li { margin-bottom: 6px; font-size: 14px; line-height: 1.6; }
.sgroup-body li:last-child { margin-bottom: 0; }
.sgroup-body > h5:first-child,
.sgroup-body > h6:first-child { margin-top: 0; }

@media (max-width: 600px) {
  .sgroup-hd { padding: 10px 14px 0; }
  .sgroup-body { padding: 6px 14px 12px; }
}


/* --------------------------------------------------------------------------
   Collapsible rows

   A grey chevron at the far right of a hairline row is easy to miss on a page
   this long — several readers scrolled past "Full written summary" and the
   photo galleries without registering they could open. The affordance now uses
   the interactive accent (the one colour reserved for things you can click)
   and puts a filled triangle at the *start* of the row, where the eye lands,
   rather than only at the end.
   -------------------------------------------------------------------------- */
.rcard details > summary,
.valuation-trade > summary {
  color: var(--primary-color, #1e6fb8) !important;
  font-weight: 500;
  background: #f7fafd;
  border-top: 1px solid #e4edf6;
}
.rcard details[open] > summary,
.valuation-trade[open] > summary {
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
.rcard details > summary::before,
.valuation-trade > summary::before {
  content: "\25B8";                 /* right-pointing triangle, rotates down */
  display: inline-block;
  margin-right: 2px;
  font-size: 11px;
  transition: transform .15s;
}
.rcard details[open] > summary::before,
.valuation-trade[open] > summary::before { transform: rotate(90deg); }

/* The trailing chevron is now redundant with the leading triangle. */
.rcard details > summary::after,
.valuation-trade > summary::after { content: none; }

.rcard details > summary:hover,
.valuation-trade > summary:hover { background: #eef5fc !important; }

@media (prefers-reduced-motion: reduce) {
  .rcard details > summary::before,
  .valuation-trade > summary::before { transition: none; }
}
@media print {
  .rcard details > summary,
  .valuation-trade > summary { background: none !important; }
}

/* --------------------------------------------------------------------------
   Reference scales and measurement bars

   These are two elements answering two different questions, and report.css had
   their visual weight backwards. The legend — what the ranges mean — was three
   saturated full-width bands with white text, while the actual reading for
   this car was an 8px bar in a pale tint that disappeared entirely.

   The reading is the finding. The legend is a footnote to it. So:

     legend      tinted panel, dark text, a 3px severity edge on top. Present,
                 readable, quiet.
     reading     14px bar in full severity colour on a visible track, sitting
                 directly under the number it belongs to.

   The blue second segment is gone for the same reason as before: on the brake
   scale it was labelled "Monitor", the word the badges show in amber, and blue
   everywhere else in this report means "you can click this".
   -------------------------------------------------------------------------- */
.report-content .brake-reference-scale,
.report-content .battery-reference-scale,
.report-content .voltage-reference-scale {
  display: flex;
  height: auto !important;
  margin: 0 0 14px !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.report-content .scale-segment,
.report-content .scale-segment:nth-child(1),
.report-content .scale-segment:nth-child(2),
.report-content .scale-segment:nth-child(3),
.report-content .scale-segment:nth-child(4) {
  flex: 1;
  display: block !important;
  padding: 7px 10px !important;
  border-top: 3px solid var(--line-strong);
  border-left: 1px solid var(--line-soft);
  background: #fbfcfd !important;
  color: var(--text-secondary, #5b6572) !important;
  text-align: left;
  transform: none !important;
}
.report-content .scale-segment:first-child { border-left: 0; }
.report-content .scale-segment.good    { border-top-color: var(--sev-ok); }
.report-content .scale-segment.warning { border-top-color: var(--sev-minor); }
.report-content .scale-segment.danger  { border-top-color: var(--sev-critical); }
.report-content .scale-segment::after { display: none !important; }
.report-content .scale-value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
.report-content .scale-label {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #8b94a1);
}

/* The reading: this is the finding, so it gets the weight. */
.report-content .thickness-visual,
.report-content .voltage-bar { margin-top: 6px !important; }
.report-content .thickness-visual .progress,
.report-content .voltage-bar .progress,
.report-content .info-card-body .progress {
  height: 14px !important;
  border-radius: 7px !important;
  background: #e8ebef !important;
  overflow: hidden;
}
.report-content .progress-bar {
  border-radius: 7px 0 0 7px;
  transition: none;
}
.report-content .progress-bar.bg-success { background: var(--sev-ok) !important; }
.report-content .progress-bar.bg-warning { background: var(--sev-minor) !important; }
.report-content .progress-bar.bg-danger  { background: var(--sev-critical) !important; }
.report-content .progress-bar.bg-info,
.report-content .progress-bar.bg-primary { background: var(--sev-ok) !important; }

/* Pull the reading up against the value it measures — it was sitting a full
   row away, reading as an unrelated divider. */
.report-content .condition-item + .thickness-visual,
.report-content .voltage-bar { margin-top: 4px !important; }

@media (max-width: 560px) {
  .report-content .brake-reference-scale,
  .report-content .battery-reference-scale,
  .report-content .voltage-reference-scale { flex-direction: column; }
  .report-content .scale-segment {
    display: flex !important;
    align-items: baseline;
    gap: 10px;
    border-left: 0;
    border-top-width: 0;
    border-bottom: 1px solid var(--line-soft);
    border-inline-start: 3px solid var(--line-strong);
  }
  .report-content .scale-segment.good    { border-inline-start-color: var(--sev-ok); }
  .report-content .scale-segment.warning { border-inline-start-color: var(--sev-minor); }
  .report-content .scale-segment.danger  { border-inline-start-color: var(--sev-critical); }
  .report-content .scale-segment:last-child { border-bottom: 0; }
  .report-content .scale-label { margin-left: auto; }
}