/* Signal Dark — detail screen styles (P4, epic #1525)
 *
 * Lifted VERBATIM from tests/parity/mockups/detail-full.html <style>.
 * Shared atoms (.frame, .sb, .cut, .mono, .bdg, .btn, .sect, .statgrid,
 * .trow, .fnav, tokens) live in signal-dark.css and are NOT duplicated here.
 * This file owns only the detail-specific modules + their animation rules.
 */

/* gallery */
.gal { position: relative; height: 230px; }
.gal .ph { height: 100%; }
.gal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,16,19,.22), transparent 30%, transparent 60%, var(--bg) 100%); }
.gal .ctr { position: absolute; top: 12px; right: 14px; z-index: 2; font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: var(--text); background: rgba(11,12,15,.65); padding: 3px 8px; letter-spacing: .08em; }
.gal .back { position: absolute; top: 10px; left: 12px; z-index: 2; width: 32px; height: 32px; background: rgba(11,12,15,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; color: #fff; border: none; cursor: pointer; padding: 0; }
/* share + save: moved out of the hero overlay (where they collided with the
   iOS/Telegram status bar) down into the masthead's empty right column, beside
   the title. Larger tap targets; tokenised surface so they read in both themes. */
.acts { display: flex; gap: 9px; flex-shrink: 0; }
.ab { width: 42px; height: 42px; background: var(--card); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; padding: 0; }
.ab.saved { color: var(--acc); border-color: var(--acc); }
.ab iconify-icon { transition: transform .16s cubic-bezier(.3,1.6,.5,1); }
.ab.pop iconify-icon { transform: scale(1.35); }

/* badges row position + masthead */
.badges { display: flex; gap: 7px; padding: 6px 18px 0; position: relative; z-index: 2; margin-top: -30px; }
.dmast { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 18px 0; }
.dmast .dmtxt { min-width: 0; flex: 1; }
.dmast .idx { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--acc); letter-spacing: .1em; }
.dmast h2 { font-weight: 900; font-size: 27px; letter-spacing: -.035em; line-height: .98; margin-top: 5px; }
.dmast .sub { font-size: 11px; color: var(--mut); margin-top: 5px; }

/* deal block */
.dealrow { display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 18px 0; }
.bigp { font-weight: 900; font-size: 40px; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.bigp small { font-size: 12px; color: var(--mut); font-weight: 700; letter-spacing: 0; display: block; margin-bottom: 4px; text-transform: uppercase; }
.scorechip { text-align: center; background: color-mix(in srgb, var(--fair) 14%, transparent); outline: 1.5px solid var(--fair); padding: 8px 14px; }
.scorechip b { font-family: "JetBrains Mono", monospace; font-size: 19px; color: var(--fair); display: block; line-height: 1; }
.scorechip small { font-size: 7.5px; font-weight: 800; color: var(--fair); letter-spacing: .12em; display: block; margin-top: 3px; }
/* verdict variants — chip recolors to the deal-semantic role */
.scorechip.good { background: color-mix(in srgb, var(--good) 14%, transparent); outline-color: var(--good); }
.scorechip.good b, .scorechip.good small { color: var(--good); }
.scorechip.high { background: color-mix(in srgb, var(--high) 14%, transparent); outline-color: var(--high); }
.scorechip.high b, .scorechip.high small { color: var(--high); }
.deltarow { display: flex; align-items: center; gap: 9px; padding: 10px 18px 0; }
.saveflag { background: var(--acc); color: var(--acc-ink); font-weight: 800; font-size: 11px; padding: 5px 10px; letter-spacing: .02em; }
.deltarow .ex { font-size: 10.5px; color: var(--mut); }
.deltarow .ex b { color: var(--text); }
.pexpl { padding: 9px 18px 0; font-size: 10.5px; color: var(--mut); line-height: 1.55; }
.pexpl b { color: var(--text); }
.pexpl i { color: var(--fair); font-style: normal; font-weight: 700; }

/* market position band */
.bandbox { margin: 14px 18px 0; background: var(--card); border: 1px solid var(--line); padding: 12px 14px 14px; }
.bandbox .bh { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: var(--mut2); letter-spacing: .14em; text-transform: uppercase; }
.bandbox .bh b { color: var(--text); }
.band { position: relative; margin-top: 24px; height: 12px; display: flex; gap: 2px; }
.band i { flex: 1; }
.band i:nth-child(1) { background: var(--good); }
.band i:nth-child(2) { background: color-mix(in srgb, var(--good) 55%, var(--card)); }
.band i:nth-child(3) { background: color-mix(in srgb, var(--fair) 70%, var(--card)); }
.band i:nth-child(4) { background: color-mix(in srgb, var(--high) 60%, var(--card)); }
.band i:nth-child(5) { background: color-mix(in srgb, var(--high) 85%, var(--card)); }
/* Median sits at the 50th percentile by definition (#1660) — no fabricated €. */
.band .median { position: absolute; top: -5px; bottom: -1px; left: 50%; width: 2px; background: var(--mut); }
.band .median small { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 7px; color: var(--mut); white-space: nowrap; letter-spacing: .06em; }
/* Price flag clamp (#5): the .you wrapper marks the data point. Previously the
   whole wrapper (flag + stick) was centred over the point with translateX(-50%),
   so the wide "THIS CAR €X" flag bled off the band's LEFT edge at low positions
   and during the 0% → 31% reveal. Fix: the wrapper sits AT the point (no -50%),
   the stick is centred on it, and the flag is LEFT-anchored — it grows rightward
   from the point so its left edge can never cross the band's left edge. Markup
   may add .clampR (JS) to flip the flag leftward when the point is near the
   band's RIGHT edge, so a wide flag does not overflow there either. */
.band .you { position: absolute; top: -22px; left: 0%; transition: left .6s cubic-bezier(.2,.8,.3,1); }
/* Marker target is data-driven via the inline --you-left custom property
   (#1660): the real price percentile from radar.axes.price. Fallback 50% keeps
   a sane centre if the var is ever absent. Was a constant 31%. */
.go .band .you { left: var(--you-left, 50%); }
.band .you .flag { position: absolute; bottom: 2px; left: 0; font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 700; background: var(--text); color: var(--bg); padding: 2px 7px; white-space: nowrap; }
.band .you.clampR .flag { left: auto; right: 0; }
.band .you .stick { position: absolute; bottom: -22px; left: 0; width: 2.5px; height: 22px; background: var(--text); transform: translateX(-50%); }
.band .lbls { position: absolute; top: 18px; left: 0; right: 0; display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--mut2); }
.bandfoot { margin-top: 30px; font-size: 10px; color: var(--mut); }
.bandfoot b { color: var(--good); }

/* deal radar */
.orbitbox { margin: 12px 18px 0; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; padding: 0; }
.radarhead { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 9px; border-bottom: 1px solid var(--line); }
.radarhead .oh { font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: var(--mut2); letter-spacing: .14em; text-transform: uppercase; }
.rbtns { display: flex; gap: 6px; }
.rbtn { font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .08em; padding: 5px 9px; background: var(--card2); color: var(--mut); outline: 1px solid var(--line2); cursor: pointer; border: none; transition: background .15s, color .15s; }
.rbtn.on { background: var(--acc); color: var(--acc-ink); outline: none; }
.pick { display: none; }
.pick.open { display: block; }
.pick .pkh { font-family: "JetBrains Mono", monospace; font-size: 7.5px; color: var(--mut2); letter-spacing: .14em; padding: 8px 14px 0; text-transform: uppercase; }
.pickrow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pickrow:hover { background: var(--card2); }
.pickrow .pthumb { width: 46px; height: 34px; background-size: cover; background-position: center; flex-shrink: 0; outline: 1px solid var(--line2); }
.pickrow .pn { flex: 1; font-size: 11px; font-weight: 700; min-width: 0; }
.pickrow .pn small { display: block; font-size: 9px; color: var(--mut); font-weight: 600; margin-top: 1px; }
.pickrow .ps { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--cmp, #6fb1ff); }
.radarrow { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px 4px; }
.rnotewrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; }
.rnotewrap .rnote { flex: 1 1 auto; }
.rnote { padding: 0 14px 11px; font-family: "JetBrains Mono", monospace; font-size: 7px; color: var(--mut2); letter-spacing: .08em; }
.rnote b { color: var(--mut); font-weight: 500; }
/* accent (i) — opens the "reading the radar" sheet (#1718) */
.rinfo {
  flex: 0 0 auto; width: 26px; height: 26px; margin: 0 12px 8px 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--accT);
  border: 1px solid var(--accT); border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.rinfo iconify-icon { display: block; }
.rinfo:hover, .rinfo:focus-visible { background: var(--accT); color: var(--acc-ink); outline: none; }
.rleg { display: none; padding: 4px 14px 12px; gap: 16px; font-family: "JetBrains Mono", monospace; font-size: 7.5px; color: var(--mut); letter-spacing: .05em; align-items: center; flex-wrap: wrap; }
.rleg.show { display: flex; }
/* honest empty state when /api/radar has no data for this listing (#1) */
.rempty { padding: 18px 14px 20px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--mut2); letter-spacing: .06em; text-align: center; }
.rleg .sw { width: 14px; height: 7px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.rleg .sw.this { background: var(--fair); }
.rleg .sw.avg { background: repeating-linear-gradient(90deg, #9aa4ad 0 3px, transparent 3px 6px); }
.rleg .sw.cmp { background: #6fb1ff; }
.radar .ovl.avg { fill: rgba(255,255,255,.05); stroke: #9aa4ad; stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; }
.radar .ovl.cmp { fill: rgba(111,177,255,.13); stroke: #6fb1ff; stroke-width: 1.5; stroke-linejoin: round; }
.radar .ovlg { transform-origin: 98px 82px; }
.radar .ovlg.pop { animation: polyin .45s cubic-bezier(.2,.8,.3,1) both; }
.tick { display: none; position: absolute; top: -3px; bottom: -3px; width: 2px; background: #9aa4ad; }
.tick.cmp { background: #6fb1ff; }
.radar { width: 182px; flex-shrink: 0; position: relative; }
.radar svg { width: 100%; display: block; }
.radar .ring { fill: none; stroke: var(--line2); stroke-width: 1; opacity: 0; }
.radar .axis { stroke: var(--line); stroke-width: 1; }
.radar .axlbl { font-family: "JetBrains Mono", monospace; font-size: 7.5px; fill: var(--mut); letter-spacing: .08em; }
.radar .poly { fill: color-mix(in srgb, var(--fair) 20%, transparent); stroke: var(--fair); stroke-width: 2; stroke-linejoin: round; }
.radar .poly.good { fill: color-mix(in srgb, var(--good) 20%, transparent); stroke: var(--good); }
.radar .poly.high { fill: color-mix(in srgb, var(--high) 20%, transparent); stroke: var(--high); }
.radar .vdot { fill: var(--fair); opacity: 0; }
.radar .vdot.good { fill: var(--good); }
.radar .vdot.high { fill: var(--high); }
.radar .polyg { transform-origin: 98px 82px; transform: scale(0); }
.play .radar .r1 { animation: ringin .35s ease-out .1s forwards; }
.play .radar .r2 { animation: ringin .35s ease-out .2s forwards; }
.play .radar .r3 { animation: ringin .35s ease-out .3s forwards; }
@keyframes ringin { to { opacity: 1; } }
.play .radar .polyg { animation: polyin .55s cubic-bezier(.2,.8,.3,1) .4s forwards; }
@keyframes polyin { to { transform: scale(1); } }
.play .radar .vdot { animation: ringin .25s ease-out forwards; }
.play .radar .vdot:nth-of-type(1) { animation-delay: .8s; }
.play .radar .vdot:nth-of-type(2) { animation-delay: .86s; }
.play .radar .vdot:nth-of-type(3) { animation-delay: .92s; }
.play .radar .vdot:nth-of-type(4) { animation-delay: .98s; }
.play .radar .vdot:nth-of-type(5) { animation-delay: 1.04s; }
.oside { flex: 1; min-width: 0; }
.oside .oh { font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: var(--mut2); letter-spacing: .14em; text-transform: uppercase; }
.osub { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.osr { display: flex; align-items: center; gap: 7px; position: relative; }
/* faint accent watermark behind the metric label (mirrors the spec-tile .bgic) */
.osr .osric { position: absolute; left: -3px; top: 50%; transform: translateY(-50%); color: var(--accT); opacity: .14; z-index: 0; pointer-events: none; }
.osr .k { font-size: 8.5px; font-weight: 700; color: var(--mut); width: 50px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em; position: relative; z-index: 1; }
.osr .bar { flex: 1; height: 5px; background: var(--line2); position: relative; }
.osr .bar b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); width: 0; transition: width .55s cubic-bezier(.2,.8,.3,1); }
.osr .bar b.fr { background: var(--fair); }
.osr .v { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--text); width: 26px; text-align: right; flex-shrink: 0; }

/* CTA row spacing (the .btn atom is shared; .ctas is the detail layout) */
.ctas { display: flex; gap: 10px; padding: 16px 18px 4px; }
/* Saved-state for the secondary "Save" CTA (#1b): when this listing is saved
   the button fills with the brand accent (mirrors .btn.p + the gallery heart's
   .gal .ab.saved accent), so the saved state is unmistakable. The icon swaps to
   tabler:bookmark-filled in JS (paintSaved). */
.btn.s.saved { background: var(--accFill); color: var(--acc-ink2); outline: none; }
.btn.s.saved iconify-icon { color: var(--acc-ink2); }

/* "Check depreciation" CTA (#1525 QA round 2): a standalone full-width
   affordance under the Economy block that prefills the depreciation tool with
   this car. The shared .btn.s atom is fixed-width (flex:0 0 104px) for the
   two-up Open/Save row, so this wrapper overrides the basis to full width and
   re-uses the secondary-button styling. An accent edge + accent label (vs the
   neutral --line2 outline of the shared .btn.s atom) signals that it's tappable —
   the flat grey card read as a static panel, not a button (#1525 QA round 5/6).
   It stays a ghost (un-filled) button so it sits below the filled "Open listing"
   primary in the CTA hierarchy.

   NOTE: the button carries .cut (clip-path corners), which clips an `outline`
   (painted OUTSIDE the border-box) away entirely — the first attempt at an
   accent outline was invisible on the clipped shape. Use an INSET box-shadow
   instead: it paints just inside the edges, within the clip region, so the
   accent edge follows the cut corners and is actually visible (#1658b). */
.deprcta { display: flex; padding: 10px 18px 0; }
/* Accent ghost button whose 1.5px edge FOLLOWS the .cut corners. An inset
   box-shadow (the old approach) is a rectangle, so .cut clipped its corners off
   and the cut edges showed no accent — the button read as square (#deprcta).
   Instead: the element bg is the accent (clipped to the OUTER .cut), and a
   ::before fills the interior with card2, inset 1.5px and clipped to a SMALLER
   cut — leaving a uniform 1.5px accent frame that traces every edge incl. the
   diagonals. isolation:isolate contains the z-index:-1 to this button. */
.deprcta .btn.s {
  flex: 1 1 auto;
  position: relative;
  isolation: isolate;
  outline: none;
  box-shadow: none;
  background: var(--accT);
  color: var(--accT);
}
.deprcta .btn.s::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--card2);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  z-index: -1;
}
.deprcta .btn.s iconify-icon { color: var(--accT); }

/* equipment chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 14px; }
.chip { font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .04em; padding: 5px 9px; background: var(--card2); color: var(--mut); outline: 1px solid var(--line2); }
.chip.hl { color: var(--acc); outline-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.chips .empty { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--mut2); letter-spacing: .04em; }

/* description (expandable) */
.seller-note { padding: 6px 14px 6px; font-size: 11px; line-height: 1.5; color: var(--mut); }
/* compact one-line seller kind, sits UNDER the seller note (#3) */
.seller-kind { padding: 0 14px 12px; font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 700; color: var(--mut2); letter-spacing: .08em; text-transform: uppercase; }
.desc { padding: 12px 14px 4px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.desc::before { content: "\201C"; color: var(--acc); font-weight: 900; font-size: 18px; margin-right: 3px; }
.desc .dtxt { display: inline; }
.desc.clamped .dtxt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dmore { display: block; background: none; border: none; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: var(--acc); padding: 6px 14px 12px; }

/* price history */
.spark { padding: 11px 14px 9px; }
.spark svg { display: block; }
/* dash length must exceed the real polyline's path length so the draw-on
   reveal uncovers the WHOLE line (#6). The line now traces actual price points
   (up to ~50 segments across the 330-unit viewBox), which can be far longer
   than the old fixed two-segment 420; 2000 covers any realistic jagged path. */
.spark .line { fill: none; stroke: var(--good); stroke-width: 2; stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.play .spark .line { animation: draw .7s cubic-bezier(.3,.6,.3,1) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark .ed { opacity: 0; }
.play .spark .ed { animation: ringin .3s ease-out .85s forwards; }
.histrows .trow .v i { font-style: normal; background: var(--acc); color: var(--acc-ink); font-size: 9.5px; font-weight: 800; padding: 2px 6px; margin-left: 7px; }

/* interest */
.intwrap { padding: 12px 14px 13px; }
.intstat { display: flex; align-items: baseline; gap: 10px; }
.intstat .n { font-weight: 900; font-size: 26px; letter-spacing: -.03em; }
.intstat .l { font-size: 10px; color: var(--mut); }
.intstat .spike { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 700; color: var(--acc); outline: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); padding: 3px 8px; letter-spacing: .08em; }
.vbars { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-top: 12px; }
.vbars i { flex: 1; background: var(--line2); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.2,.8,.3,1); }
.vbars i.pk { background: var(--acc); }
.go .vbars i { transform: scaleY(1); }
.vbars i:nth-child(2) { transition-delay: .04s; } .vbars i:nth-child(3) { transition-delay: .08s; } .vbars i:nth-child(4) { transition-delay: .12s; }
.vbars i:nth-child(5) { transition-delay: .16s; } .vbars i:nth-child(6) { transition-delay: .2s; } .vbars i:nth-child(7) { transition-delay: .24s; } .vbars i:nth-child(8) { transition-delay: .28s; }
.vlbls { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 7.5px; color: var(--mut2); margin-top: 6px; }

/* consider also */
.alt { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.alt:last-child { border-bottom: none; }
.alt .mid { flex: 1; min-width: 0; }
.alt h4 { font-weight: 800; font-size: 13.5px; }
.alt .m { font-size: 9.5px; color: var(--mut); margin-top: 2px; }
.alt .avg { font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700; color: var(--text); text-align: right; }
.alt .avg small { display: block; font-size: 7.5px; color: var(--mut2); letter-spacing: .08em; margin-top: 2px; }
.alt iconify-icon { color: var(--mut2); }

/* hide link */
.hide { margin: 16px 18px 0; text-align: center; }
.hide a { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--mut2); letter-spacing: .08em; text-decoration: none; border-bottom: 1px dashed var(--line2); padding-bottom: 2px; cursor: pointer; }
/* confirmed "HIDDEN ✓" state: positive accent, non-interactive (the JS also sets aria-disabled + guards re-fire). */
.hide a.done { color: var(--good); border-bottom-color: transparent; cursor: default; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .radar .ring, .radar .vdot, .spark .line, .spark .ed { opacity: 1 !important; animation: none !important; stroke-dashoffset: 0 !important; }
  .radar .polyg { transform: scale(1) !important; }
  .vbars i { transform: none !important; }
  .go .band .you { left: var(--you-left, 50%) !important; }
}

/* ── Deal Radar "how to read it" info sheet (#1718) ──────────────────────
 * Mirrors the about.js sheet pattern (home.css .about-*): a frame-level
 * slide-up overlay, scoped here so the detail screen owns its own copy. */
.ri-ov {
  position: absolute; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .18s ease;
}
.ri-ov.open { opacity: 1; }
.ri-sheet {
  position: relative;
  background: var(--card); border-top: 1px solid var(--line2);
  max-height: 92%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 16px 18px;
  transform: translateY(12px); transition: transform .18s ease;
}
.ri-ov.open .ri-sheet { transform: translateY(0); }
.ri-grab { width: 38px; height: 4px; margin: 0 auto 6px; background: var(--line2); border-radius: 2px; }
.ri-x {
  position: absolute; top: 8px; right: 10px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--card2); outline: 1px solid var(--line2); border: none;
  color: var(--mut); cursor: pointer;
}
.ri-h { font-weight: 900; font-size: 17px; letter-spacing: -.02em; margin: 0 0 8px; color: var(--text); }
.ri-intro { font-size: 12px; line-height: 1.55; color: var(--mut); margin: 0 0 4px; }
.ri-intro b { color: var(--text); font-weight: 800; }
.ri-k {
  font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accT); margin: 13px 0 2px;
}
.ri-metric { position: relative; overflow: hidden; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ri-metric:last-of-type { border-bottom: none; }
/* faint decorative watermark behind each axis description (mirrors .statgrid .bgic).
 * Large (~2x) and anchored off the bottom-right corner; the card's overflow:hidden
 * crops it so it never bleeds into the neighbouring row. */
.ri-bgic { position: absolute; right: -18px; bottom: -22px; width: 104px; height: 104px; color: var(--accT); opacity: .07; z-index: 0; pointer-events: none; }
.ri-mk { position: relative; z-index: 1; font-weight: 800; font-size: 13px; color: var(--accT); margin-bottom: 2px; }
.ri-md { position: relative; z-index: 1; font-size: 11.5px; line-height: 1.5; color: var(--text); margin: 0; }
.ri-mex { position: relative; z-index: 1; font-size: 11px; line-height: 1.5; color: var(--mut); margin: 3px 0 0; }
.ri-mex span { font-weight: 800; color: var(--mut2); text-transform: uppercase; font-size: 9px; letter-spacing: .06em; }
.ri-note { font-size: 11px; line-height: 1.5; color: var(--mut2); margin: 11px 0 0; font-style: italic; }
.ri-x:focus-visible { outline: 2px solid var(--accT); }

/* listed-on: cross-platform listing history (#1762). One row per platform the
 * car is listed on. icon | platform label | price + last-seen date. Dead
 * (delisted) rows are de-emphasised. Tokens only, no new colours. */
.lorow { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.lorow:last-child { border-bottom: none; }
.lorow .loic { color: var(--mut); flex: none; }
.lorow .lop { flex: 1; min-width: 0; font-weight: 800; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.lorow .loend { font-family: "JetBrains Mono", monospace; font-size: 7.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); outline: 1px solid var(--line); padding: 2px 6px; }
.lorow .lov { text-align: right; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; color: var(--text); }
.lorow .lov small { display: block; font-size: 8px; font-weight: 600; letter-spacing: .06em; color: var(--mut2); margin-top: 2px; }
.lorow.dead { opacity: .5; }
.lorow.dead .lov { text-decoration: line-through; }
.lorow[data-url] { cursor: pointer; }