/* ==========================================================================
   WheelPeek fitment lab — the interactive offset / tire-size calculators.
   Ported from the "WheelPeek Offset Simulator" UI (Next.js + Tailwind demo)
   to plain CSS, scoped under .fitment-lab so the site's guide chrome is
   untouched. Dark theme, mint accent, responsive: on phones the diagram and
   the quick ET slider come before the full inputs.

   v4 adds the spacer field (the setup card's numbers are a 2x2 grid now), the
   clearance-grade pills, the "what to measure" list, the alternative-size
   tables and the diagram's CURRENT / NEW tags. The grade colors are
   deliberately NOT the mint accent — mint means "the new setup" everywhere
   else in the lab — and the pill text always carries the meaning on its own.
   ========================================================================== */
.tool-head { padding: 12px 0 6px; }
.tool-head .eyebrow { margin-bottom: 8px; }
.tool-head .dek { max-width: 62ch; }
.tools-hub .guide-grid { margin-top: 18px; }

.fitment-lab {
  --lab-bg: #0b0e13; --lab-fg: #eef2f6; --lab-card: #12171f; --lab-panel: #10151d;
  --lab-border: #2a323e; --lab-border-2: #29323f; --lab-muted: #9ba6b8; --lab-muted-2: #929eaf;
  --lab-primary: #44e8b5; --lab-primary-ink: #08261c; --lab-gray: #9ba6b8; --lab-amber: #ecca8c;
  color: var(--lab-fg); font-size: 16px; line-height: 1.5; max-width: 1516px; margin: 0 auto; padding: 6px 0 22px;
}
.fitment-lab * { box-sizing: border-box; }
.fitment-lab button, .fitment-lab input { font: inherit; }
.fitment-lab button { cursor: pointer; transition: background .15s, border-color .15s, color .15s; color: inherit; }
.fitment-lab button:disabled { cursor: not-allowed; opacity: .45; }
.fitment-lab button:hover:not(:disabled) { filter: brightness(1.12); }
.fitment-lab button:focus-visible, .fitment-lab a:focus-visible, .fitment-lab summary:focus-visible, .fitment-lab input:focus-visible { outline: 2px solid var(--lab-primary); outline-offset: 3px; }
.fitment-lab a { text-decoration: none; }
.fitment-lab svg.ico { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }

/* ---------- intro row: title + actions ------------------------------------ */
.fitment-lab .page-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.fitment-lab .page-intro .lab-eyebrow { color: #99a6b8; font-size: 12px; letter-spacing: 2px; font-weight: 650; margin-bottom: 7px; text-transform: uppercase; }
.fitment-lab .page-intro h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.8px; font-weight: 600; margin: 0; color: var(--lab-fg); }
.fitment-lab .page-intro p { color: var(--lab-muted-2); font-size: 16px; margin: 8px 0 0; }
.fitment-lab .page-actions { display: flex; gap: 11px; align-items: center; }
.fitment-lab .page-actions button { border-radius: 7px; padding: 10px 13px; font-size: 14px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fitment-lab .ghost-button { color: #aab5c4; border: 1px solid #303945; background: transparent; }
.fitment-lab .share-button { border: 1px solid #376052; background: #17332a; color: #83edc8; }
.fitment-lab .copy-error { color: #f6c982; margin: -10px 0 16px; font-size: 14px; }

/* ---------- workspace: setup cards + results ------------------------------ */
.fitment-lab .workspace { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 22px; align-items: start; }
.fitment-lab .setup-card { border: 1px solid var(--lab-border); background: var(--lab-card); border-radius: 11px; padding: 20px 19px 18px; }
.fitment-lab .setup-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.fitment-lab .setup-heading h3 { font-size: 16px; line-height: 1.2; font-weight: 600; margin: 0; color: var(--lab-fg); }
.fitment-lab .setup-dot { width: 8px; height: 8px; border: 1.5px solid #b2bdcc; border-radius: 50%; }
.fitment-lab .setup-dot.mint { border-color: var(--lab-primary); background: var(--lab-primary); }
.fitment-lab .setup-letter { margin-left: auto; color: #929eb0; font: 12px 'SFMono-Regular', Consolas, monospace; border: 1px solid #343e4b; padding: 2px 6px; border-radius: 4px; }
.fitment-lab .proposed-card { border-color: #355447; background: linear-gradient(125deg, #141e20, #11171e 80%); }
.fitment-lab .proposed-card h3 { color: #b8f6df; }
.fitment-lab .proposed-card .setup-letter { color: #83dabb; border-color: #355447; }
/* Four numbers per card (diameter, width, ET, spacer) in a 2x2 grid. Label,
   input and error message share row tracks across both columns (subgrid), so a
   label that wraps on a narrow card cannot leave the row of boxes stepped and
   an error message under one field cannot push its neighbor's input down.
   The row gap is a margin, not a grid gap, so it is not repeated inside a cell. */
.fitment-lab .field-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9px; row-gap: 0; }
.fitment-lab .field-grid .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.fitment-lab .field-grid .field:nth-child(n+3) { margin-top: 9px; }
.fitment-lab .field-grid .field label { align-self: end; white-space: normal; }
.fitment-lab .field label { font-size: 14px; color: #abb5c5; display: block; margin-bottom: 7px; white-space: nowrap; }
.fitment-lab .field label span { color: #8190a3; font-size: 12px; margin-left: 4px; }
.fitment-lab .field input, .fitment-lab .preset-row select {
  width: 100%; min-width: 0; background: #0c1118; border: 1px solid #2d3744; border-radius: 6px; color: #e9eef4;
  font-size: 16px; line-height: 1.4; padding: 9px 11px; font-variant-numeric: tabular-nums; outline: none; transition: border-color .15s;
}
.fitment-lab .field input:focus, .fitment-lab .preset-row select:focus { border-color: var(--lab-primary); box-shadow: 0 0 0 2px #44e8b514; outline: none; }
.fitment-lab .field input[aria-invalid="true"] { border-color: #cf7a69; }
.fitment-lab .input-wrap { position: relative; }
.fitment-lab .input-wrap input { padding-right: 28px; padding-left: 9px; appearance: textfield; -moz-appearance: textfield; }
.fitment-lab .input-wrap input::-webkit-inner-spin-button, .fitment-lab .input-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fitment-lab .input-wrap > span { position: absolute; right: 9px; top: 12px; font-size: 12px; color: #8997ac; pointer-events: none; }
.fitment-lab .tire-field { margin-top: 16px; }
.fitment-lab .tire-field input { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 16px; letter-spacing: .2px; }
.fitment-lab .error { font-size: 12px; line-height: 1.4; color: #ffa692; display: block; margin-top: 5px; }
.fitment-lab .preset-row { margin: 0 0 13px; }
.fitment-lab .preset-row label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #8fa0b3; display: block; margin-bottom: 7px; font-weight: 600; }
.fitment-lab .preset-row select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8997ac 50%), linear-gradient(135deg, #8997ac 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; color: #d6dfe9; }
.fitment-lab .preset-row .hint { display: block; font-size: 12px; color: #8190a3; margin-top: 6px; line-height: 1.45; }
.fitment-lab .preset-link { display: inline-block; font-size: 12px; color: var(--lab-primary); margin-top: 6px; line-height: 1.45; }
.fitment-lab .preset-link:hover { text-decoration: underline; }
.fitment-lab .preset-link[hidden] { display: none; }
.fitment-lab .swap-row { display: flex; align-items: center; gap: 10px; padding: 11px 19px; }
.fitment-lab .swap-row > span { height: 1px; background: #28313d; flex: 1; }
.fitment-lab .swap-button { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: #9fadc0; font-size: 12px; padding: 2px 7px; }
.fitment-lab .offset-control { margin-top: 20px; border-top: 1px solid #283a35; padding-top: 16px; }
.fitment-lab .offset-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #adbdc3; margin-bottom: 17px; }
.fitment-lab .help-wrap { position: relative; display: inline-flex; }
.fitment-lab .help { display: inline-flex; background: none; border: 0; color: #7d91a2; padding: 0; font-size: 14px; }
.fitment-lab .help-content { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); width: 250px; font-size: 14px; line-height: 1.5; background: #e6edf3; color: #12202d; padding: 10px 12px; border-radius: 6px; z-index: 5; text-align: left; }
.fitment-lab .help-content::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #e6edf3; }
.fitment-lab .help-content[hidden] { display: none; }
.fitment-lab .range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #94a99c; margin-top: 8px; }
.fitment-lab .input-note { display: flex; align-items: flex-start; gap: 8px; color: #90a0b5; font-size: 12px; line-height: 1.5; padding: 17px 4px 0; }
.fitment-lab .input-note svg { flex-shrink: 0; margin-top: 2px; }

/* range slider (native input, styled like the demo's) */
.fitment-lab .offset-slider { --pct: 50%; width: 100%; height: 18px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; display: block; }
.fitment-lab .offset-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #338a6e 0, #338a6e var(--pct), #2b3c38 var(--pct), #2b3c38 100%); }
.fitment-lab .offset-slider::-moz-range-track { height: 4px; border-radius: 2px; background: #2b3c38; }
.fitment-lab .offset-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: #338a6e; }
.fitment-lab .offset-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: #9af4d5; border: 3px solid #192b26; box-shadow: 0 0 0 1px #69e5ba; margin-top: -6.5px; }
.fitment-lab .offset-slider::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #9af4d5; border: 3px solid #192b26; box-shadow: 0 0 0 1px #69e5ba; }

/* ---------- results panel -------------------------------------------------- */
.fitment-lab .results-panel { min-width: 0; }
.fitment-lab .simulator { border: 1px solid #2d3541; border-radius: 12px; overflow: hidden; background: var(--lab-panel); }
.fitment-lab .sim-toolbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--lab-border-2); padding: 15px 17px; gap: 10px; }
.fitment-lab .view-tab-list { display: inline-flex; background: #0b1017; border: 1px solid #29323e; height: 41px; padding: 3px; gap: 2px; border-radius: 7px; }
.fitment-lab .view-tab-list button { height: 33px; font-size: 14px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; color: #a3afbf; font-weight: 500; background: transparent; border: 0; border-radius: 5px; white-space: nowrap; }
.fitment-lab .view-tab-list button[aria-selected="true"] { background: #28323e; color: #edf5f5; box-shadow: 0 1px 4px #0004; }
.fitment-lab .live-label { display: flex; gap: 7px; align-items: center; color: #9bafb6; letter-spacing: 1px; font-size: 12px; white-space: nowrap; }
.fitment-lab .live-label > span { width: 5px; height: 5px; background: #60dcb2; border-radius: 50%; }
.fitment-lab .diagram-meta { display: flex; justify-content: space-between; align-items: center; padding: 16px 21px 9px; gap: 12px; }
.fitment-lab .legend { display: flex; gap: 18px; align-items: center; font-size: 14px; color: #aeb8c8; }
.fitment-lab .legend > span { display: flex; align-items: center; gap: 7px; }
.fitment-lab .legend i { height: 10px; width: 16px; border-radius: 1px; display: inline-block; }
.fitment-lab .legend-a { border: 1px dashed var(--lab-gray); }
.fitment-lab .legend-b { border: 1px solid var(--lab-primary); background: #44e8b52c; }
.fitment-lab .layer-switch { display: flex; background: #171e28; border: 1px solid #2b3644; padding: 2px; border-radius: 5px; }
.fitment-lab .layer-switch button { font-size: 12px; padding: 4px 9px; color: #a4b1c3; background: transparent; border-radius: 3px; border: 0; white-space: nowrap; }
.fitment-lab .layer-switch button[aria-pressed="true"] { color: #b3f1d9; background: #294037; }
.fitment-lab .meta-caption { font-size: 12px; color: #9caabe; }
.fitment-lab .tabpanel[hidden] { display: none; }
.fitment-lab .clearance-svg, .fitment-lab .diameter-svg { width: 100%; height: auto; display: block; max-height: 430px; }
.fitment-lab .svg-direction { font-size: 12px; letter-spacing: 1.2px; fill: #94a5bb; font-family: 'SFMono-Regular', Consolas, monospace; }
.fitment-lab .svg-hub { font-size: 12px; letter-spacing: 1px; fill: #d0d9e6; paint-order: stroke; stroke: #10151d; stroke-width: 7px; }
.fitment-lab .svg-caption { font-size: 14px; fill: #a4b5c7; }
.fitment-lab .svg-delta { font-size: 25px; font-weight: 500; fill: var(--lab-primary); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.fitment-lab .svg-value { font-size: 20px; font-variant-numeric: tabular-nums; }
.fitment-lab .svg-small { font-size: 12px; fill: #98a8bd; }
/* Which drawn shape is which: the tag sits on the outer top corner of the shape
   it names, with a dark halo so it stays readable over the grid. */
.fitment-lab .svg-tag { font-size: 12px; letter-spacing: 1.4px; paint-order: stroke; stroke: #10151d; stroke-width: 6px; stroke-linejoin: round; }
.fitment-lab .svg-tag-a { fill: var(--lab-gray); }
.fitment-lab .svg-tag-b { fill: var(--lab-primary); }
.fitment-lab .diagram-footer { padding: 12px 20px; border-top: 1px solid #252e3a; display: flex; justify-content: space-between; align-items: center; color: #92a0b5; gap: 12px; font-size: 12px; }
.fitment-lab .diagram-footer > span:first-child { display: flex; align-items: center; gap: 6px; }
.fitment-lab .diagram-empty { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8293a7; text-align: center; padding: 30px; }
.fitment-lab .diagram-empty svg.ico { font-size: 38px; }
.fitment-lab .diagram-empty h4 { color: #d3dce6; font-size: 20px; margin: 18px 0 5px; font-weight: 600; }
.fitment-lab .diagram-empty p { font-size: 16px; max-width: 280px; margin: 0; }

/* metric cards */
.fitment-lab .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.fitment-lab .metric { border: 1px solid #28323e; border-radius: 9px; background: #111720; padding: 17px 17px 15px; min-width: 0; }
.fitment-lab .metric-label { display: flex; justify-content: space-between; align-items: center; color: #a0afc1; font-size: 12px; letter-spacing: 1px; gap: 6px; text-transform: uppercase; }
.fitment-lab .metric-label svg { color: #91a8bb; flex-shrink: 0; }
.fitment-lab .metric-value { font-size: 34px; letter-spacing: -1.1px; line-height: 1.2; color: var(--lab-primary); margin: 10px 0 6px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fitment-lab .metric-value > span { font-size: 16px; color: #8cae9f; letter-spacing: 0; }
.fitment-lab .metric p { font-size: 14px; line-height: 1.5; color: #c1ccd7; margin: 0; }
.fitment-lab .metric small { display: block; font-size: 12px; color: #93a2b7; margin-top: 7px; line-height: 1.5; }
.fitment-lab .diameter-metric .metric-value { color: var(--lab-amber); }
.fitment-lab .diameter-metric .metric-value > span { color: #bbaa8c; }

/* How big the move is. Never color alone: the pill always spells the grade
   out, and the "what to measure" list repeats it as a full sentence. */
.fitment-lab .pill { display: inline-block; font-size: 12px; line-height: 1.35; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; border: 1px solid #39434f; background: #182027; color: #c6d1e0; margin: 0 0 8px; }
.fitment-lab .pill:empty { display: none; }
.fitment-lab .pill[data-level="check"] { border-color: #6d5631; background: #2b2213; color: #f4d39c; }
.fitment-lab .pill[data-level="high"] { border-color: #7d4436; background: #301b16; color: #ffb9a8; }
.fitment-lab .check-list { margin-top: 22px; border: 1px solid #28323e; border-radius: 10px; background: #111720; padding: 17px 18px 16px; }
.fitment-lab .check-list[hidden] { display: none; }
.fitment-lab .check-list h3 { font-size: 16px; font-weight: 600; color: #d3dce6; margin: 0 0 11px; }
.fitment-lab .check-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fitment-lab .check-list li { position: relative; padding-left: 17px; font-size: 14px; line-height: 1.55; color: #c1ccd7; }
.fitment-lab .check-list li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 50%; background: #5f6b7c; }
.fitment-lab .check-list li[data-level="check"]::before { background: var(--lab-amber); }
.fitment-lab .check-list li[data-level="high"]::before { background: #ff9d85; }

/* Alternative tire sizes (tire page) */
.fitment-lab .alt-sizes { margin-top: 22px; border-top: 1px solid #28323b; padding: 21px 3px 2px; }
.fitment-lab .alt-sizes h3 { font-size: 16px; font-weight: 600; color: #d3dce6; margin: 0 0 6px; }
.fitment-lab .alt-note { font-size: 14px; color: #97a6b9; margin: 0 0 14px; line-height: 1.55; }
.fitment-lab .alt-tables { display: grid; gap: 13px; }
.fitment-lab .alt-tables[hidden] { display: none; }
.fitment-lab .alt-tables .table-scroll { border: 1px solid #28323e; border-radius: 9px; background: #111720; }
.fitment-lab .alt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fitment-lab .alt-table caption { text-align: left; color: #c4d0d9; font-size: 14px; font-weight: 500; padding: 12px 12px 10px; white-space: nowrap; }
.fitment-lab .alt-table th { color: #b3c2ce; background: #151c25; text-align: left; font-weight: 500; white-space: nowrap; padding: 9px 10px; border-top: 1px solid var(--lab-border-2); border-bottom: 1px solid var(--lab-border-2); }
.fitment-lab .alt-table td { color: #adbed0; padding: 10px; white-space: nowrap; border-bottom: 1px solid #1f2731; font-variant-numeric: tabular-nums; }
.fitment-lab .alt-table tbody tr:last-child td { border-bottom: 0; }
/* The size cell is the row's header (so "Compare" has a row to belong to), but
   it reads as the plain first column it looks like. */
.fitment-lab .alt-table tbody th { background: none; border-top: 0; border-bottom: 1px solid #1f2731; color: #c4d0d9; font-weight: 400; font-family: 'SFMono-Regular', Consolas, monospace; padding: 10px; font-variant-numeric: tabular-nums; }
.fitment-lab .alt-table tbody tr:last-child th { border-bottom: 0; }
.fitment-lab .alt-pick { background: #17332a; border: 1px solid #376052; color: #83edc8; border-radius: 6px; padding: 5px 11px; font-size: 12px; }
.fitment-lab .alt-caveat { font-size: 12px; color: #91a0b7; line-height: 1.6; margin: 14px 0 0; max-width: 970px; }
.fitment-lab .alt-caveat[hidden] { display: none; }

/* takeaway + details */
.fitment-lab .takeaway { margin-top: 23px; display: flex; align-items: center; gap: 15px; border-top: 1px solid #28323b; border-bottom: 1px solid #28323b; padding: 22px 3px; }
.fitment-lab .takeaway-icon { background: #152920; color: #6cddaf; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; font-size: 21px; }
.fitment-lab .takeaway strong { display: block; font-size: 16px; font-weight: 500; color: #d7e6dd; }
.fitment-lab .takeaway p { font-size: 14px; color: #97a6b9; margin: 4px 0 0; }
.fitment-lab .geometry-tag { font-size: 12px; letter-spacing: 1px; white-space: nowrap; color: #95a7b8; margin-left: auto; border: 1px solid #2b3944; border-radius: 4px; padding: 4px 7px; }
.fitment-lab .measurement-details { margin-top: 4px; }
.fitment-lab .measurement-details > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-size: 14px; color: #a8b5c6; padding: 20px 3px; }
.fitment-lab .measurement-details > summary::-webkit-details-marker { display: none; }
.fitment-lab .measurement-details > summary > span { display: flex; gap: 9px; align-items: center; }
.fitment-lab .measurement-details[open] > summary > svg.chev { transform: rotate(180deg); }
.fitment-lab .detail-content { padding: 0 1px 20px; }
.fitment-lab .table-scroll { overflow-x: auto; }
.fitment-lab .detail-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fitment-lab .detail-content th { color: #b3c2ce; font-size: 14px; background: #151c25; text-align: left; padding: 10px; font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--lab-border-2); }
.fitment-lab .detail-content td { color: #adbed0; padding: 11px 10px; border-bottom: 1px solid #1f2731; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fitment-lab .detail-content tr:last-child td { border-bottom: 0; }
.fitment-lab .detail-content td:first-child { color: #c4d0d9; }
.fitment-lab .detail-content td:last-child { color: #8adeb9; }
.fitment-lab .detail-content caption { text-align: left; color: #a8b5c6; font-size: 14px; padding: 14px 0 8px; }
.fitment-lab .formula-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 24px; }
.fitment-lab .formula-notes h4 { font-size: 16px; font-weight: 600; color: #ced9e2; margin: 0 0 8px; }
.fitment-lab .formula-notes p { font-size: 16px; color: #9eacbd; margin: 0 0 12px; line-height: 1.65; }
.fitment-lab .formula-notes code { display: block; font-size: 14px; padding: 12px; background: #151c25; border-radius: 5px; color: #abd5c2; line-height: 1.8; font-family: 'SFMono-Regular', Consolas, monospace; }
.fitment-lab .formula-notes a { font-size: 14px; color: var(--lab-primary); display: inline-flex; align-items: center; gap: 5px; }
.fitment-lab .lab-footer { border-top: 1px solid #222c37; padding: 16px 3px; display: flex; gap: 9px; align-items: flex-start; color: #91a0b7; }
.fitment-lab .lab-footer svg { flex-shrink: 0; margin-top: 2px; }
.fitment-lab .lab-footer p { font-size: 12px; line-height: 1.6; margin: 0; max-width: 970px; }
.fitment-lab .mobile-offset { display: none; }

/* ---------- responsive ------------------------------------------------------ */
@media (min-width: 1500px) { .fitment-lab .clearance-svg, .fitment-lab .diameter-svg { max-height: 480px; } }
@media (max-width: 1150px) {
  .fitment-lab .workspace { grid-template-columns: 287px minmax(0, 1fr); gap: 17px; }
  .fitment-lab .setup-card { padding: 18px 15px; }
  .fitment-lab .live-label { display: none; }
  .fitment-lab .sim-toolbar { padding: 13px; }
  .fitment-lab .diagram-meta { padding: 14px 14px 8px; }
  .fitment-lab .diagram-footer { padding: 10px 12px; }
  .fitment-lab .diagram-footer > span:last-child { display: none; }
  .fitment-lab .metric-grid { gap: 8px; }
  .fitment-lab .metric { padding: 13px 11px; }
  .fitment-lab .metric-value { font-size: 30px; }
  .fitment-lab .geometry-tag { display: none; }
  .fitment-lab .legend { gap: 11px; }
  .fitment-lab .layer-switch button { padding: 4px 6px; }
}
@media (max-width: 850px) {
  .fitment-lab .page-intro { align-items: flex-start; margin-bottom: 20px; }
  .fitment-lab .page-intro h2 { font-size: 24px; }
  .fitment-lab .page-actions { gap: 8px; }
  .fitment-lab .page-actions button { padding: 9px; }
  .fitment-lab .workspace { grid-template-columns: 1fr; }
  .fitment-lab .setup-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; order: 2; margin-top: 5px; }
  .fitment-lab .preset-row { grid-column: 1 / -1; margin-bottom: 0; }
  .fitment-lab .swap-row { grid-column: 1 / -1; grid-row: 3; padding: 0; max-width: 190px; margin: auto; width: 100%; }
  .fitment-lab .input-note { grid-column: 1 / -1; padding: 0; justify-content: center; }
  .fitment-lab .setup-card { height: 100%; padding: 18px; }
  .fitment-lab .setup-heading { margin-bottom: 17px; }
  .fitment-lab .tire-field { margin-top: 12px; }
  .fitment-lab .setup-panel .offset-control { display: none; }
  .fitment-lab .results-panel { order: 1; margin-top: 3px; }
  .fitment-lab .mobile-offset { display: block; padding: 14px 18px 9px; border-top: 1px solid #25312e; background: #121d1b; }
  .fitment-lab .mobile-offset > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: #afc5be; margin-bottom: 13px; }
  .fitment-lab .mobile-offset strong { color: #83edc8; font-weight: 500; font-variant-numeric: tabular-nums; }
  .fitment-lab .mobile-offset .range-labels { margin-top: 5px; }
  .fitment-lab .sim-toolbar { padding: 12px 15px; }
  .fitment-lab .live-label { display: flex; }
  .fitment-lab .diagram-meta { padding: 15px 19px 7px; }
  .fitment-lab .diagram-footer { padding: 12px 18px; }
  .fitment-lab .metric-grid { gap: 11px; }
  .fitment-lab .metric { padding: 16px; }
  .fitment-lab .metric-value { font-size: 34px; }
  .fitment-lab .takeaway { margin-top: 20px; }
  .fitment-lab .formula-notes { gap: 20px; }
}
@media (max-width: 560px) {
  .fitment-lab .page-intro { flex-wrap: wrap; gap: 15px; margin-bottom: 19px; }
  .fitment-lab .page-actions { width: 100%; justify-content: flex-end; }
  .fitment-lab .page-actions button { font-size: 14px; padding: 7px 11px; }
  .fitment-lab .setup-panel { gap: 10px; }
  .fitment-lab .setup-card { padding: 14px 11px; border-radius: 8px; }
  .fitment-lab .setup-heading { gap: 7px; margin-bottom: 14px; }
  .fitment-lab .setup-heading h3 { font-size: 14px; }
  .fitment-lab .setup-letter { padding: 1px 4px; }
  .fitment-lab .setup-dot { width: 7px; height: 7px; }
  /* ET and Spacer each take a full row: "44.45" and "52.5" have to fit. */
  .fitment-lab .field-grid { column-gap: 7px; }
  .fitment-lab .field-grid .field:nth-child(n+3) { grid-column: 1 / -1; margin-top: 10px; }
  .fitment-lab .field label { margin-bottom: 5px; }
  .fitment-lab .field input { padding: 7px 9px; }
  .fitment-lab .input-wrap input { padding-right: 27px; }
  .fitment-lab .input-wrap > span { top: 10px; }
  .fitment-lab .tire-field input { font-size: 14px; padding: 9px 7px; }
  .fitment-lab .input-note { margin: 2px 4px; justify-content: flex-start; }
  .fitment-lab .sim-toolbar { padding: 10px; }
  .fitment-lab .view-tab-list { width: 100%; height: 42px; }
  .fitment-lab .view-tab-list button { flex: 1; justify-content: center; padding: 7px; gap: 5px; }
  .fitment-lab .live-label { display: none; }
  .fitment-lab .diagram-meta { padding: 11px 12px 8px; gap: 6px; }
  .fitment-lab .legend { font-size: 12px; gap: 10px; }
  .fitment-lab .legend > span { gap: 5px; }
  .fitment-lab .legend i { width: 13px; height: 9px; }
  .fitment-lab .layer-switch button { padding: 4px 5px; }
  .fitment-lab .clearance-svg, .fitment-lab .diameter-svg { min-height: 260px; }
  .fitment-lab .svg-direction { font-size: 21px; letter-spacing: .3px; }
  .fitment-lab .svg-caption { font-size: 27px; }
  .fitment-lab .svg-delta { font-size: 33px; }
  .fitment-lab .svg-hub { font-size: 21px; }
  .fitment-lab .svg-small { font-size: 23px; }
  .fitment-lab .svg-tag { font-size: 23px; letter-spacing: .6px; stroke-width: 10px; }
  .fitment-lab .svg-value { font-size: 29px; }
  .fitment-lab .diagram-footer { padding: 9px 12px; }
  .fitment-lab .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
  .fitment-lab .metric { padding: 14px; }
  .fitment-lab .metric-label { letter-spacing: .5px; }
  .fitment-lab .metric-value { font-size: 31px; }
  .fitment-lab .metric-value > span { font-size: 15px; }
  .fitment-lab .diameter-metric { grid-column: 1 / -1; }
  .fitment-lab .takeaway { padding: 17px 1px; gap: 11px; align-items: flex-start; }
  .fitment-lab .takeaway-icon { width: 33px; height: 33px; border-radius: 7px; font-size: 17px; }
  .fitment-lab .takeaway p { margin-top: 6px; }
  .fitment-lab .measurement-details > summary { padding: 18px 0; }
  .fitment-lab .detail-content td { padding: 10px 8px; }
  .fitment-lab .formula-notes { grid-template-columns: 1fr; gap: 19px; }
  .fitment-lab .diagram-empty { min-height: 260px; }
  .fitment-lab .check-list { padding: 15px 14px; margin-top: 18px; }
  .fitment-lab .alt-sizes { margin-top: 18px; padding-top: 18px; }
  .fitment-lab .alt-table td, .fitment-lab .alt-table th, .fitment-lab .alt-table tbody th { padding: 9px 8px; }
  .fitment-lab .alt-table caption { padding: 11px 10px 9px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .fitment-lab * { transition: none !important; animation: none !important; } }