/*
 * V5 lab · Visualizer (layout C) — styles.
 * Stage look, spin-in + rim-light glint, orange pill switch, colour dots and the "flying spec" callout
 * style come from the V5 homepage hook (mockups/h-dunkel-hell.html, mockups/shared/bike.css + studio.css).
 */

.lv {
  --accent: #FF5A00; --accent-hover: #E85200; --accent-soft: rgba(255,90,0,.1);
  --bg: #f4f3f1; --card: #fff; --ink: #1a1a1a; --ink-2: #5f5f5f; --ink-3: #8f8f8f; --line: #e2e0dc;
  --st-ink: #1a1a1a; --st-ink-2: #5f5f5f; --st-ink-3: #8f8f8f; --st-line: rgba(0,0,0,.1); --st-chip: rgba(255,255,255,.88); --st-solid: #fff; --st-floor: rgba(40,30,20,.3);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  background: var(--bg); color: var(--ink);
}
/* clip, not hidden: hidden would make <body> a scroll container */
html, .lv.showmybike-root { overflow-x: clip; }
.lv main { background: var(--bg); }
.lv :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.lv) button { font: inherit; color: inherit; }   /* zero specificity: component colours win */
.lv [hidden] { display: none !important; }
.lv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- page layout: the stage fills the screen, caption + bar float on it ---------- */
.c-main { position: relative; height: calc(100svh - var(--nav-height)); min-height: 540px; transition: height .38s var(--ease-out); }
.c-stage.lv-stage, .c-stage { position: absolute; inset: 0; --inset-top: 148px; --inset-bottom: 200px; container-type: size; }
/* the page's one H1, in the type of the old Visualizer page (Montserrat 600, tight), sized with the window so its
   full stop lands between the mode switch (ends at ~201 px) and the centred frame-colour pill; chrome from 76 px */
.c-h1 { position: absolute; z-index: 13; top: 22px; left: 24px; right: 16px; margin: 0; font: 600 clamp(20px, calc(1.772vw - 1.74px), 34px)/1.15 var(--font-display, Montserrat), sans-serif; letter-spacing: -.045em; color: var(--ink); pointer-events: none; }
.c-captions { position: absolute; z-index: 20; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); transition: opacity .25s; }
.lv[data-mode=compare] .c-captions { width: min(880px, calc(100% - 32px)); }
.c-bar { position: absolute; z-index: 21; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: #121212; box-shadow: 0 14px 40px rgba(0,0,0,.28); transition: left .5s var(--ease-out), opacity .25s; }
.c-bar button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: #d8d8d8; font: 600 14px Inter, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.c-bar button:hover { color: #fff; background: rgba(255,255,255,.08); }
.c-bar button[aria-expanded=true] { background: var(--accent); color: #fff; }
.c-bar button[data-lv-open=compare][aria-pressed=true][aria-expanded=false] { background: rgba(255,90,0,.22); color: #fff; }
.c-bar svg { width: 18px; height: 18px; }
.c-bar :focus-visible { outline-color: #fff; }
.c-foot { padding: 18px clamp(16px, 4vw, 48px) 40px; }
.lv-sheet-open .c-captions { opacity: 0; pointer-events: none; }
@media (min-width: 900px) {
  .lv-sheet-open .c-stage { --inset-right: 480px; --inset-bottom: 110px; --inset-top: 212px; }
  /* with a panel open the free width is narrower: frame colour moves onto its own line */
  .lv-sheet-open .lv-stage__top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "modes actions" "colour colour"; row-gap: 10px; }
  .lv-sheet-open .lv-modes { grid-area: modes; } .lv-sheet-open .lv-stage__actions { grid-area: actions; } .lv-sheet-open .lv-swatches { grid-area: colour; }
  .lv-sheet-open .c-bar { left: calc(50% - 240px); }
}

/* ---------- start setup in the HTML (scripts/build-visualizer-page.js) ----------
   Same geometry as the engine's layout(), in container units, so the swap to the live stage does not move the bike */
.lv-ssr { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .45s ease;
  --aw: 100cqw; --ah: calc(100cqh - var(--inset-top, 0px) - var(--inset-bottom, 0px));
  --vsw: min(calc(var(--aw) * 1.392857), calc(var(--ah) * 2.3));
  --vh: calc(var(--vsw) * .65);
  --hoff: calc((var(--aw) - var(--vsw)) / 2);
  --voff: calc(var(--inset-top, 0px) + (var(--ah) - var(--vh)) / 2);
  --sz: calc(var(--vsw) * var(--d) / 100 * var(--sc));
  --cy: calc(var(--voff) + var(--vh) / 2 + var(--vh) * var(--wy) / 100); }
@container (max-width: 599px) { .lv-ssr { --vsw: min(calc(var(--aw) * 1.678571), calc(var(--ah) * 2.3)); } }
/* phones: saddle to tyres fits between the controls and the card, centred (bikeBox() in the engine) */
@container (max-width: 760px) { .lv-ssr { --kh: calc(var(--kb) - var(--kt));
  --vsw: min(calc(var(--aw) * 1.392857), calc(var(--ah) / var(--kh)));
  --voff: calc(var(--inset-top, 0px) + (var(--ah) - var(--kh) * var(--vsw)) / 2 - var(--kt) * var(--vsw)); } }
@container (max-width: 599px) { .lv-ssr { --vsw: min(calc(var(--aw) * 1.678571), calc(var(--ah) / var(--kh))); } }
.lv-ssr:not(.is-ready), .lv-ssr.is-out { opacity: 0; }
.lv-ssr img { position: absolute; max-width: none; }
.lv-ssr__wheel { width: var(--sz); height: var(--sz); top: calc(var(--cy) - var(--sz) / 2); }
.lv-ssr__wheel--rear { left: calc(var(--hoff) + var(--vsw) / 2 + var(--vsw) * var(--rx) / 100 - var(--sz) / 2); }
.lv-ssr__wheel--front { left: calc(var(--hoff) + var(--vsw) / 2 + var(--vsw) * var(--fx) / 100 - var(--sz) / 2); }
.lv-ssr__frame { z-index: 1; object-fit: contain; left: calc(var(--hoff) + var(--vsw) * (20 + var(--ox)) / 100); top: calc(var(--voff) + var(--vh) * (10 + var(--oy)) / 100); width: calc(var(--vsw) * .6); height: calc(var(--vh) * .8); }

/* ---------- stage ---------- */
.lv-stage { overflow: hidden; isolation: isolate; color: var(--st-ink); background: radial-gradient(65% 70% at 50% 46%, #ffffff 0%, #f1efeb 62%, #e6e3de 100%); }
.lv-stage__canvas { position: absolute; inset: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.lv-stage__canvas img { -webkit-user-drag: none; }
/* soft floor shadow under the bike, placed by the engine (--floor-*) */
.lv-stage__canvas::after { content: ""; position: absolute; left: var(--floor-l, 20%); width: var(--floor-w, 60%); top: var(--floor-y, 80%); height: var(--floor-h, 5%); transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--st-floor), transparent); z-index: 0; pointer-events: none; }
.lv-side { position: absolute; inset: 0; z-index: 1; transition: opacity .5s ease; }
.lv-stage.is-loading .lv-side, .lv-stage.is-loading .lv-stage__canvas::after { opacity: 0; }
.lv-frame, .lv-wheel, .lv-shadow { position: absolute; pointer-events: none; user-select: none; }
.lv-frame { z-index: 3; object-fit: contain; max-width: none; transition: opacity .35s ease; }
.lv-frame.is-swapping { opacity: 0; }
.lv-wheel { z-index: 2; }
.lv-wheel img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: opacity .45s ease, transform .6s var(--ease-out); }
.lv-wheel img.is-entering { opacity: 0; transform: rotate(-38deg) scale(.985); }
.lv-shadow { z-index: 1; background: url(../bilder/wheel-shadow.png) center / 100% 100% no-repeat; }

/* spin-in + rim light, from the hook (bike.css) */
.lv-spin .lv-wheel img:last-child { animation: lv-spin 1.4s cubic-bezier(.15,.6,.25,1) both; }
@keyframes lv-spin { from { rotate: -300deg; } to { rotate: 0deg; } }
.lv-glint { position: absolute; inset: 0; border-radius: 50%; z-index: 4; pointer-events: none;
  background: conic-gradient(from var(--gl, 0deg), transparent 0 300deg, rgba(255,214,160,0) 310deg, rgba(255,214,160,.75) 330deg, rgba(255,255,255,.9) 334deg, rgba(255,214,160,0) 350deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 18.2%, #000 18.8% 22.2%, transparent 22.6%);
          mask: radial-gradient(circle, transparent 0 18.2%, #000 18.8% 22.2%, transparent 22.6%);
  opacity: 0; }
@property --gl { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lv-spin .lv-glint, .lv-glint-on .lv-glint { animation: lv-glint 1.4s ease-out .1s both; }
@keyframes lv-glint { 0% { --gl: -80deg; opacity: 0; } 15% { opacity: 1; } 100% { --gl: 200deg; opacity: 0; } }

/* drag line with its handle and the A / B labels right beside it */
.lv-line { --line-top: max(6%, calc(var(--inset-top, 0px) - 10px)); position: absolute; top: var(--line-top); bottom: max(6%, calc(var(--inset-bottom, 0px) - 14px)); left: 50%; width: 2px; margin-left: -1px; background: var(--accent); z-index: 10; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lv[data-mode=compare] .lv-line { opacity: 1; }
.lv-line__handle { position: absolute; top: calc(var(--tag-y, 50%) - var(--line-top)); left: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); pointer-events: auto; cursor: ew-resize; border: 0; padding: 0; }
.lv-line__handle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent); }
.lv[data-mode=single] .lv-line__handle { visibility: hidden; }
.lv-line__tag { position: absolute; top: calc(var(--tag-y, 50%) - var(--line-top)); transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; border: 2px solid #fff; box-shadow: 0 6px 18px rgba(40,30,20,.18); font: 700 14px Inter, sans-serif; pointer-events: none; transition: box-shadow .25s; }
.lv-line__tag--b { background: var(--accent); }
.lv-line__tag--a { right: 34px; }
.lv-line__tag--b { left: 34px; }
.lv-line__tag.is-active { box-shadow: 0 0 0 3px var(--accent), 0 6px 18px rgba(40,30,20,.18); }
.lv-line__tag.is-flash { animation: lv-flash 1.1s ease-out; }
@keyframes lv-flash { 0% { box-shadow: 0 0 0 0 rgba(255,90,0,.55), 0 6px 18px rgba(40,30,20,.14); } 100% { box-shadow: 0 0 0 16px rgba(255,90,0,0), 0 6px 18px rgba(40,30,20,.14); } }

/* rim-depth measure line — in the style of the hook's flying specs */
.lv-measure { position: absolute; z-index: 9; pointer-events: none; height: 0; opacity: 0; transition: opacity .35s ease; }
.lv-measure.is-on { opacity: 1; }
.lv-measure__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: var(--mo, 100%) 50%; transition: transform .5s var(--ease-out); }
.lv-measure__bar::before, .lv-measure__bar::after { content: ""; position: absolute; top: -6px; width: 2px; height: 14px; background: var(--accent); }
.lv-measure__bar::before { left: 0; } .lv-measure__bar::after { right: 0; }
.lv-measure.is-on .lv-measure__bar { transform: none; }
.lv-measure__lead { position: absolute; top: -.5px; height: 1px; width: var(--lead, 28px); background: var(--accent); opacity: .7; }
.lv-measure__label { position: absolute; top: 0; transform: translate(var(--lx, 0), -50%); white-space: nowrap; font: 500 12px/1.2 Inter, sans-serif; color: var(--st-ink-2); opacity: 0; transition: opacity .3s .2s, transform .45s .15s var(--ease-out); }
.lv-measure__label b { display: block; font: 600 clamp(17px, 1.7vw, 24px)/1.1 Montserrat, sans-serif; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.lv-measure.is-on .lv-measure__label { opacity: 1; transform: translate(0, -50%); }
.lv-measure--right .lv-measure__lead { left: 100%; }
.lv-measure--right .lv-measure__label { left: calc(100% + var(--lead, 28px) + 8px); --lx: -8px; }
.lv-measure--left .lv-measure__lead { right: 100%; }
.lv-measure--left .lv-measure__label { right: calc(100% + var(--lead, 28px) + 8px); text-align: right; --lx: 8px; }
/* not enough room beside the wheel: the label moves inside the wheel, next to the bar */
.lv-measure--inside .lv-measure__lead { display: none; }
.lv-measure--inside .lv-measure__label { padding: 3px 7px; border-radius: 8px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lv-measure--right.lv-measure--inside .lv-measure__label { left: auto; right: calc(100% + 8px); text-align: right; --lx: 8px; }
.lv-measure--left.lv-measure--inside .lv-measure__label { right: auto; left: calc(100% + 8px); text-align: left; --lx: -8px; }

/* frame, wheels, line and labels glide while a panel opens/closes */
.lv-glide .lv-frame, .lv-glide .lv-wheel, .lv-glide .lv-shadow, .lv-glide .lv-measure, .lv-glide .lv-line { transition: left .55s var(--ease-out), top .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out), opacity .35s; }
.lv-glide .lv-side { transition: clip-path .55s var(--ease-out); }
.lv-glide .lv-stage__canvas::after { transition: left .55s var(--ease-out), top .55s var(--ease-out), width .55s var(--ease-out); }

/* ---------- stage chrome: mode switch · frame colour · share + reset ---------- */
.lv-stage__top { position: absolute; z-index: 12; top: 76px; left: 16px; right: calc(16px + var(--inset-right, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; pointer-events: none; transition: right .55s var(--ease-out); }
.lv-stage__top > * { pointer-events: auto; }
.lv-modes { justify-self: start; }
.lv-stage__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.lv-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--st-chip); border: 1px solid var(--st-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lv-seg button { border: 0; background: none; color: var(--st-ink-2); font: 500 14px Inter, sans-serif; padding: 9px 18px; min-height: 40px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.lv-seg button:hover { color: var(--st-ink); }
.lv-seg button[aria-pressed=true] { background: var(--accent); color: #fff; }
/* frame colour: centred and prominent, with the colourway name */
.lv-swatches { justify-self: center; display: flex; align-items: center; gap: 14px; max-width: 100%; min-width: 0; padding: 7px 9px 7px 18px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.07); box-shadow: 0 8px 24px rgba(40,30,20,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lv-swatches__txt { flex: 0 0 auto; width: 210px; min-width: 0; line-height: 1.22; }
.lv-swatches__txt small, .lv-swatches__txt em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-swatches__txt small { font: 600 10.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lv-swatches__txt em { font: 500 11.5px Inter, sans-serif; font-style: normal; color: var(--ink-2); }
.lv-swatches__txt b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px Montserrat, sans-serif; color: var(--ink); }
.lv-swatches__dots { display: flex; gap: 8px; flex-wrap: nowrap; }
.lv-swatch { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.14); cursor: pointer; padding: 0; transition: box-shadow .2s, transform .2s; position: relative; }
.lv-swatch:hover { transform: scale(1.08); }
.lv-swatch[aria-pressed=true] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); }
/* share + reset: clearly visible */
.lv-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px; border: 0; background: #121212; color: #fff; font: 600 14px Inter, sans-serif; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: background .2s; }
.lv-pill:hover { background: #2a2a2a; }
.lv-pill svg { width: 18px; height: 18px; }
/* Share | Reset: one quiet capsule, the counterpart of the mode switch (same chip, line, height and type as .lv-seg) */
.lv-stage__actions { gap: 0; padding: 4px; border-radius: 999px; background: var(--st-chip); border: 1px solid var(--st-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lv-stage__actions .lv-pill, .lv-stage__actions .lv-reset { position: relative; min-height: 40px; height: auto; border: 0; border-radius: 999px; background: none; box-shadow: none; color: var(--st-ink-2); -webkit-tap-highlight-color: transparent; transition: background .15s, color .25s; }
.lv-stage__actions .lv-pill { gap: 7px; padding: 0 16px 0 14px; font: 500 14px Inter, sans-serif; }
.lv-stage__actions .lv-reset { width: 44px; height: 40px; }
.lv-stage__actions .lv-pill svg, .lv-stage__actions .lv-reset svg { width: 17px; height: 17px; }
.lv-stage__actions .lv-pill:hover, .lv-stage__actions .lv-reset:hover { background: none; color: var(--st-ink); border: 0; }
.lv-stage__actions .lv-pill:active, .lv-stage__actions .lv-reset:active { background: rgba(0,0,0,.06); }
/* taps: at least 44 x 44 px, reaching into the capsule's padding */
.lv-stage__actions .lv-pill::after, .lv-stage__actions .lv-reset::after { content: ''; position: absolute; inset: -4px 0; }
/* thin divider in the capsule's line colour */
.lv-stage__actions .lv-reset::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--st-line); }
.lv-round { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); background: #fff; color: var(--ink); cursor: pointer; padding: 0; box-shadow: 0 8px 22px rgba(40,30,20,.1); transition: color .2s, border-color .2s, transform .3s; }
.lv-round:hover { color: var(--accent); border-color: rgba(255,90,0,.5); }
.lv-reset:hover svg { transform: rotate(-60deg); }
.lv-round svg { width: 20px; height: 20px; transition: transform .3s; }
.lv-share { position: relative; }
.lv-menu { position: absolute; z-index: 60; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px; border-radius: 14px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.lv-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; background: none; border-radius: 9px; font: 500 14px Inter, sans-serif; color: var(--ink); cursor: pointer; text-align: left; }
.lv-menu button:hover, .lv-menu button:focus-visible { background: #f4f3f1; }
.lv-menu svg { width: 16px; height: 16px; color: var(--ink-2); }
/* Share on phones: busy while the picture is made; if the browser has forgotten the tap by then, one more tap */
.lv-pill.is-busy { pointer-events: none; }
.lv-pill.is-busy svg { animation: lv-pulse .9s ease-in-out infinite alternate; }
@keyframes lv-pulse { to { opacity: .35; transform: translateY(-2px); } }
.lv-shareready { position: fixed; z-index: 400; left: 50%; top: calc(var(--nav-height, 64px) + 16px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.2); font: 600 14px Inter, sans-serif; white-space: nowrap; }
.lv-shareready .lv-pill { width: auto; padding: 0 18px 0 14px; background: var(--accent); box-shadow: none; }
.lv-shareready .lv-pill:hover { background: var(--accent-hover); }
.lv-shareready__x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.lv-shareready__x svg { width: 14px; height: 14px; }

/* ---------- slot cards (caption on the stage) ---------- */
.lv-slots { display: grid; gap: 10px; }
.lv[data-mode=compare] .c-captions.lv-slots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lv-slot { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px 14px; transition: border-color .25s, box-shadow .25s; }
.c-captions .lv-slot { background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(0,0,0,.06); box-shadow: 0 8px 30px rgba(40,30,20,.08); }
.lv-slot__pick { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 12px; padding: 0 48px 0 0; }
.lv-slot__badge { flex: 0 0 auto; display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 13px Inter, sans-serif; }
[data-slot=b] .lv-slot__badge, [data-slot-switch=b] .lv-slot__badge { background: var(--accent); }
.lv[data-mode=compare] .lv-slot__badge { display: grid; }
.lv-slot__name { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.lv-slot__name small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lv-slot__name b { display: block; font: 600 16px Montserrat, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.lv-specs dt { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.lv-specs dd { margin: 0; font: 600 15px/1.3 Inter, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-specs dd small { font-weight: 500; color: var(--ink-3); font-size: 11px; }
/* the manufacturer's page, under the specs of each card (scripts/visualizer-v5.js maker) */
.lv-slot__maker { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 0; color: var(--ink); font: 600 13px/1.3 Inter, sans-serif; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 3px; white-space: nowrap; }
.lv-slot__maker:hover { color: var(--accent); text-decoration-color: currentColor; }
.lv-heart { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.lv-heart:hover { color: var(--accent); border-color: rgba(255,90,0,.5); }
.lv-heart svg { width: 19px; height: 19px; }
.lv-heart[aria-pressed=true] { color: #fff; background: var(--accent); border-color: var(--accent); }
.lv-heart[aria-pressed=true] svg path { fill: currentColor; }
.lv-heart.is-pop { transform: scale(1.15); }

/* wheel thumbnails: web/laufraeder/256 (square canvas, wheel fills the middle 44.7 %) cropped to a circle */
.lv-thumb { position: relative; flex: 0 0 var(--t, 44px); width: var(--t, 44px); height: var(--t, 44px); border-radius: 50%; overflow: hidden; background: #f7f6f3; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.lv-thumb img { position: absolute; left: 50%; top: 50%; width: 223.7%; height: auto; max-width: none; transform: translate(-50%, -50%); }

/* ---------- panel ---------- */
.lv-sheet { position: fixed; z-index: 300; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: var(--sheet-h, 62svh); background: var(--bg); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px rgba(0,0,0,.22); transform: translateY(105%); transition: transform .38s var(--ease-out), visibility 0s .38s; visibility: hidden; }
.lv-sheet.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease-out); }
.lv-sheet__grab { width: 40px; height: 4px; border-radius: 4px; background: #cfccc6; margin: 8px auto 0; flex: 0 0 auto; }
.lv-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 10px; flex: 0 0 auto; }
.lv-sheet__title { font: 600 18px Montserrat, sans-serif; display: flex; align-items: center; gap: 10px; }
.lv-sheet__for { display: inline-flex; align-items: center; gap: 6px; font: 500 13px Inter, sans-serif; color: var(--ink-2); }
.lv-sheet__for b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px Inter, sans-serif; color: #fff; background: var(--ink); }
.lv-sheet__for b.lv-for--b { background: var(--accent); }
.lv-sheet__close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.lv-sheet__close svg { width: 16px; height: 16px; }
/* scrolls only up and down: nothing in the panel may move it sideways (iOS let it wobble) */
.lv-sheet__body { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 2px 16px calc(18px + env(safe-area-inset-bottom)); }
.lv-sheet__slots, .lv-sheet__tyres { margin-bottom: 14px; }
.lv-sheet .lv-slot__pick { cursor: default; }
@media (min-width: 900px) {
  .lv-sheet { left: auto; right: 20px; bottom: 20px; top: calc(var(--nav-height, 64px) + 20px); width: min(460px, calc(100vw - 40px)); max-height: none; border-radius: 22px; transform: translateX(calc(100% + 40px)); box-shadow: 0 24px 70px rgba(0,0,0,.25); }
  .lv-sheet__grab { display: none; }
  .lv-sheet__head { padding-top: 16px; }
}

/* compare: which wheelset you change — two compact cards */
.lv-pslots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.lv-pslot { position: relative; min-width: 0; }
.lv-pslot__btn { display: flex; align-items: flex-start; gap: 10px; width: 100%; height: 100%; padding: 11px 44px 12px 11px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s, background .2s; }
.lv-pslot__btn:hover { border-color: rgba(255,90,0,.45); }
.lv-pslot.is-active .lv-pslot__btn { border-color: var(--accent); background: #fffaf6; box-shadow: 0 0 0 3px rgba(255,90,0,.12); }
.lv-pslot__btn .lv-slot__badge { display: grid; }
.lv-pslot__txt { min-width: 0; line-height: 1.3; }
.lv-pslot__txt small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lv-pslot__txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.25 Montserrat, sans-serif; margin: 1px 0 4px; }
.lv-pslot__txt em { display: block; font-style: normal; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lv-pslot .lv-heart { width: 34px; height: 34px; top: 8px; right: 8px; }
.lv-pslot .lv-heart svg { width: 16px; height: 16px; }
/* tyre toggle (global) */
.lv-tyres { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.lv-tyres .lv-seg { background: #fff; border-color: var(--line); backdrop-filter: none; }
.lv-tyres .lv-seg button { padding: 6px 12px; min-height: 34px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.lv-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.lv-dot--black { background: #1b1b1b; } .lv-dot--tan { background: #b98a5a; } .lv-dot--pink { background: #e58fb3; }
.lv-seg button[aria-pressed=true] .lv-dot { box-shadow: 0 0 0 1.5px #fff; }
/* compare: the side the tyre bar changes, and each card's tyre colour */
.lv-tyres--ab { gap: 6px; }   /* one line with the A/B circle down to 360 px phones */
.lv-tyres__side { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 12px Inter, sans-serif; }
.lv-tyres__side--b { background: var(--accent); }
.lv-slot__tyre { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 500 13px/1.3 Inter, sans-serif; color: var(--ink-2); }
.lv-pslot__txt .lv-pslot__tyre { display: flex; align-items: center; gap: 5px; }
.lv-slot__tyre .lv-dot, .lv-pslot__tyre .lv-dot { width: 10px; height: 10px; }

/* wheel picker */
.lv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.lv-tab { border: 0; background: none; padding: 10px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 600 14px Inter, sans-serif; color: var(--ink-2); cursor: pointer; border-radius: 8px 8px 0 0; }
.lv-tab[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); }
.lv-tab:hover { color: var(--ink); }
.lv-filters { display: grid; gap: 12px; margin-bottom: 12px; }
.lv-search { position: relative; display: block; }
.lv-search input { width: 100%; min-height: 44px; padding: 10px 14px 10px 38px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 400 14px Inter, sans-serif; color: var(--ink); }
.lv-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,0,.15); }
.lv-search svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.lv-frow { display: grid; gap: 6px; }
.lv-flabel { font: 600 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
/* chips wrap onto lines: nothing scrolls sideways */
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 13px Inter, sans-serif; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; }
.lv-chip small { color: var(--ink-3); font-size: 11px; }
.lv-chip--s { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }
.lv-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.lv-chip[aria-pressed=true] { color: var(--ink); border-color: rgba(255,90,0,.6); background: var(--accent-soft); }
.lv-count { font-size: 12px; color: var(--ink-3); }
/* price: one segmented bar with a count per band */
.lv-segbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.lv-segbar button { display: grid; gap: 1px; padding: 12px 4px; border: 0; border-left: 1px solid var(--line); background: none; cursor: pointer; text-align: center; color: var(--ink); transition: background .2s, color .2s; }
.lv-segbar button:first-child { border-left: 0; }
.lv-segbar b { font: 600 12.5px/1.2 Inter, sans-serif; white-space: nowrap; }
.lv-segbar small { font: 500 11px Inter, sans-serif; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lv-segbar button:hover:not(:disabled) { background: #faf8f5; }
.lv-segbar button[aria-pressed=true] { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lv-segbar button[aria-pressed=true] small { color: var(--accent); }
/* rim depth: three tiles, the ring gets thicker with the depth */
.lv-depths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lv-depths button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; color: var(--ink-3); transition: border-color .2s, background .2s, color .2s; }
.lv-depths svg { flex: 0 0 26px; width: 26px; height: 26px; }
.lv-depths span { min-width: 0; line-height: 1.2; }
.lv-depths b { display: block; font: 600 13px Inter, sans-serif; color: var(--ink); }
.lv-depths small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.lv-depths button:hover:not(:disabled) { border-color: rgba(255,90,0,.45); }
.lv-depths button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* brand: a quiet row that opens an even grid */
.lv-brandtoggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; }
.lv-brandtoggle b { flex: 1 1 auto; font: 600 13.5px Inter, sans-serif; color: var(--ink); }
.lv-brandtoggle i { width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.lv-brandtoggle[aria-expanded=true] i { transform: rotate(-135deg) translateY(-1px); }
.lv-brandtoggle:hover { border-color: var(--ink-3); }
.lv-brandgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.lv-brandgrid button { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; font: 500 13px Inter, sans-serif; color: var(--ink); }
.lv-brandgrid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-brandgrid small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lv-brandgrid button:hover:not(:disabled) { border-color: rgba(255,90,0,.45); }
.lv-brandgrid button[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); }
.lv-segbar button:disabled, .lv-depths button:disabled, .lv-brandgrid button:disabled { opacity: .4; cursor: default; }
.lv-link { border: 0; background: none; padding: 0; color: var(--accent); font: 600 12px Inter, sans-serif; cursor: pointer; }
.lv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lv-list > li { min-width: 0; }   /* a long name ends in … instead of widening the row */
.lv-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 12px 7px 7px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s; }
.lv-item:hover { border-color: rgba(255,90,0,.5); }
.lv-item[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,0,.13); }
.lv-item__txt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.lv-item__txt b { display: block; font: 600 14px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-item__txt small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lv-item__depth { flex: 0 0 auto; display: flex; align-items: flex-end; height: 26px; }
.lv-item__depth i { display: block; width: 8px; height: var(--h); border-radius: 3px 3px 0 0; background: #d9d6d1; }
.lv-item[aria-pressed=true] .lv-item__depth i { background: var(--accent); }
.lv-item__slot { position: absolute; top: -6px; left: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 11px Inter, sans-serif; color: #fff; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.lv-item__slot--b { background: var(--accent); }
.lv-item__slot--next { left: 12px; z-index: 1; }   /* B beside A when both have this wheelset, in front of the wheel thumbnail */
.lv-picker__foot { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.lv-picker__foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.lv-picker__foot a:hover { text-decoration: underline; }
.lv-empty { padding: 18px 4px; color: var(--ink-3); font-size: 14px; }

/* frame picker: a tile per model, the colourways as dots underneath; any choice closes the panel */
.lv-fsticky { position: sticky; top: -2px; z-index: 2; margin: 0 -16px; padding: 2px 16px 10px; background: var(--bg); }
.lv-frow--frames { margin-bottom: 12px; }
.lv-frow--frames + .lv-fgroup { margin-top: 16px; }
.lv-fgroup + .lv-fgroup { margin-top: 18px; }
.lv-fgroup h4 { margin: 0 0 8px; font: 600 12px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); scroll-margin-top: 64px; }
.lv-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.lv-ftile { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; border-radius: 14px; border: 1px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s; }
.lv-ftile:hover { border-color: rgba(255,90,0,.45); }
.lv-ftile.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,0,.13); }
.lv-ftile__main { display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 8px; }
.lv-ftile__img { aspect-ratio: 16 / 10; display: grid; place-items: center; margin-bottom: 3px; }
.lv-ftile__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lv-ftile b { font: 600 13px Inter, sans-serif; line-height: 1.2; }
.lv-ftile small { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.lv-ftile.is-current small { color: var(--accent); font-weight: 600; }
.lv-ftile__dots { display: flex; flex-wrap: wrap; gap: 7px; }
.lv-fdot { position: relative; width: 20px; height: 20px; border-radius: 50%; padding: 0; background: var(--c); border: 1px solid rgba(0,0,0,.15); cursor: pointer; transition: transform .15s; }
.lv-fdot::after { content: ""; position: absolute; inset: -5px; }   /* 30 px touch target */
.lv-fdot:hover { transform: scale(1.15); }
.lv-fdot[aria-pressed=true] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }

/* ---------- notes under the stage ---------- */
.lv-notes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.lv-notes a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.lv-notes a:hover { color: var(--accent); text-decoration: underline; }
.lv-notes__mybike a { color: var(--accent); }
.lv-notes__compat { max-width: 620px; }
.c-foot { justify-content: center; text-align: center; }
.c-foot .lv-notes__compat { margin: 0 auto; }

/* ---------- text under the tool: calm, light, clearly apart from the tool ---------- */
.c-about { background: #fff; border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(44px, 6vw, 80px); }
.c-about__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.c-about h2 { margin: 0 0 14px; font: 700 clamp(24px, 2.6vw, 34px)/1.12 Montserrat, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.c-about__lead { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 520px; }
.c-about__h3 { margin: 0 0 10px; font: 600 12px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.c-faq { border-top: 1px solid var(--line); }
.c-faq details { border-bottom: 1px solid var(--line); }
.c-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 2px; cursor: pointer; list-style: none; font: 600 15px/1.35 Inter, sans-serif; color: var(--ink); border-radius: 6px; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform .25s; }
.c-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.c-faq summary:hover { color: var(--accent); }
.c-faq details p { margin: -4px 0 16px; padding-right: 28px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.c-links { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.c-links__setups { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.c-links__label { font: 600 12px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.c-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.c-links a:hover { color: var(--accent); text-decoration: underline; }
.c-links a.c-links__more { color: var(--accent); font-weight: 600; }
@media (max-width: 860px) { .c-about__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; } .c-about__lead { font-size: 15px; } .c-links__setups { gap: 8px 14px; } .c-faq summary { padding: 13px 2px; font-size: 14.5px; } }

/* toast + export notice (export.js adds .visualizer-export-ready) */
.lv-toast { position: fixed; z-index: 400; left: 50%; top: calc(var(--nav-height, 64px) + 16px); transform: translate(-50%, -12px); padding: 11px 18px; border-radius: 999px; background: #111; color: #fff; font: 500 14px Inter, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 10px 30px rgba(0,0,0,.3); white-space: nowrap; }
.lv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.lv .visualizer-export-ready { position: fixed; z-index: 401; left: 50%; top: calc(var(--nav-height, 64px) + 16px); transform: translateX(-50%); padding: 11px 18px; border-radius: 999px; background: #111; color: #fff; font: 500 14px Inter, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.3); white-space: nowrap; }
.lv .visualizer-export-ready a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lv .visualizer-export-ready { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.lv .visualizer-export-share { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--accent); color: #fff; font: 600 13px Inter, sans-serif; cursor: pointer; }
/* Safari on the Mac: the picture opens on the page, saved with "Save Image As…" */
.lv .visualizer-export-sheet { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(12,12,12,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lv .visualizer-export-sheet__box { width: min(920px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 16px 18px 18px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.lv .visualizer-export-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font: 600 17px Montserrat, sans-serif; }
.lv .visualizer-export-sheet img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.lv .visualizer-export-sheet p { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.lv .visualizer-export-sheet .visualizer-export-share { margin-top: 12px; }
.lv .visualizer-export-sheet .visualizer-export-close { background: #f1efeb; color: var(--ink); }
.lv .visualizer-export-close { border: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font: 400 18px/1 Inter, sans-serif; cursor: pointer; }

/* ---------- narrower screens ---------- */
@media (max-width: 1099px) {
  /* frame colour moves to its own line under mode switch and actions */
  .lv-stage__top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "modes actions" "colour colour"; row-gap: 10px; }
  .lv-modes { grid-area: modes; } .lv-stage__actions { grid-area: actions; } .lv-swatches { grid-area: colour; }
  .c-stage { --inset-top: 198px; }
  .c-h1 { font-size: 28px; }   /* the colour pill sits on its own line here */
}
@media (max-width: 899px) {
  .lv { --sheet-h: 60svh; }
  .c-stage { --inset-top: 186px; }
  .lv[data-mode=compare] .c-stage { --inset-top: 232px; }   /* room for the A / B labels between colour pill and saddle */
  .lv-sheet-open .c-main { height: calc(100svh - var(--nav-height) - 60svh + 20px); min-height: 220px; }
  .lv-sheet-open .c-stage { --inset-bottom: 34px; --inset-top: 124px; }
  .lv-sheet-open .lv-swatches { display: none; }
  .lv-sheet-open .c-bar { opacity: 0; pointer-events: none; }
  .c-bar { bottom: calc(14px + env(safe-area-inset-bottom)); width: calc(100% - 32px); justify-content: space-between; }
  .c-bar button { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  .c-captions { bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  /* phones: a compact head - the H1 on one line, the chrome right below it, the frame bar across the full width */
  .lv-stage__top { top: 50px; left: 10px; right: 10px; }
  .c-h1 { top: 14px; left: 14px; font-size: min(21px, 5.6vw); white-space: nowrap; }
  .c-stage { --inset-top: 160px; }   /* just under the frame bar; the engine measures it too */
  .lv[data-mode=compare] .c-stage { --inset-top: 208px; }
  .lv-sheet-open .c-stage { --inset-bottom: 34px; --inset-top: 104px; }
  .lv-seg button { padding: 8px 14px; min-height: 38px; font-size: 13px; }
  .lv-stage__actions .lv-pill { min-height: 38px; padding: 0 13px 0 12px; font-size: 13px; }
  .lv-stage__actions .lv-reset { height: 38px; min-height: 38px; }
  /* frame bar: from the left edge of the mode switch to the right edge of Reset; text left, colours right */
  .lv-swatches { justify-self: stretch; gap: 10px; padding: 5px 6px 5px 16px; }
  .lv-swatches__txt { flex: 1 1 auto; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* model on top, colour · groupset below (the groupset gives way first) */
  .lv-swatches__txt small { font-size: 10px; }
  .lv-swatches__txt b { display: inline; font-size: 14px; }
  .lv-swatches__txt em { display: inline; font-size: 11.5px; }
  .lv-swatches__txt em:not(:empty)::before { content: ' · '; color: var(--ink-3); }
  .lv-swatches__dots { flex: 0 0 auto; margin-left: auto; }
  .lv-swatch { width: 28px; height: 28px; }
  .lv-measure__label { font-size: 10px; }
  .lv-measure__label b { font-size: 15px; }
  .lv-specs dd { font-size: 14px; }
  .lv-slot__name b { font-size: 15px; }
  /* compare: two slim cards, no taller than the single card, so the bike keeps its single size */
  .lv[data-mode=compare] .c-captions.lv-slots { gap: 8px; }
  .lv[data-mode=compare] .lv-slot { padding: 9px 10px 10px; border-radius: 16px; }
  /* badge and brand on the first line (beside the heart), the model on its own full-width line */
  .lv[data-mode=compare] .lv-slot__pick { flex-wrap: wrap; gap: 4px 7px; padding-right: 0; }
  .lv[data-mode=compare] .lv-slot__pick .lv-thumb { display: none; }
  .lv[data-mode=compare] .lv-slot__badge { width: 22px; height: 22px; font-size: 12px; }
  .lv[data-mode=compare] .lv-slot__name { display: contents; }
  .lv[data-mode=compare] .lv-slot__name small { flex: 1 1 0; min-width: 0; padding-right: 30px; font-size: 10px; letter-spacing: .08em; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lv[data-mode=compare] .lv-slot__name b { flex-basis: 100%; font-size: 14px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lv[data-mode=compare] .lv-specs { display: flex; flex-wrap: wrap; gap: 2px 5px; margin-top: 7px; }
  .lv[data-mode=compare] .lv-specs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lv[data-mode=compare] .lv-specs dd { font-size: 13px; }
  .lv[data-mode=compare] .lv-specs > div:nth-child(2) { order: 3; flex-basis: 100%; }
  .lv[data-mode=compare] .lv-specs > div:nth-child(2) dd::after { content: ' rim'; font-weight: 500; color: var(--ink-3); }
  .lv[data-mode=compare] .lv-specs > div:nth-child(3) dd::before { content: '· '; font-weight: 500; color: var(--ink-3); }
  .lv[data-mode=compare] .lv-slot__maker { margin-top: 4px; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .lv[data-mode=compare] .lv-heart { width: 30px; height: 30px; top: 7px; right: 7px; }
  .lv[data-mode=compare] .lv-heart svg { width: 15px; height: 15px; }
  .lv-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-segbar b { font-size: 11px; }
  .lv-depths button { padding: 8px; gap: 7px; }
  .lv-depths svg { flex-basis: 22px; width: 22px; height: 22px; }
}
@media (max-width: 380px) { .c-bar button svg { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .lv-spin .lv-wheel img:last-child, .lv-spin .lv-glint, .lv-glint-on .lv-glint, .lv-line__tag.is-flash { animation: none; }
  .lv-wheel img, .lv-frame, .lv-measure, .lv-measure__bar, .lv-measure__label, .lv-sheet, .lv-toast, .c-main, .c-bar, .lv-stage__top { transition: none !important; }
  .lv-wheel img.is-entering { transform: none; }
}