/* =============================================================================
   twg.css — TireWheelGuide design system on top of Bootstrap 5.3.
   Tokens mirror the "twg compare" Claude Design (ink / brand / tireA / tireB).
   Load order: lib/bootstrap/css/bootstrap.min.css → this file.
   ============================================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --ink-900: #0b1220;
  --ink-800: #111a2c;
  --ink-700: #1f2937;
  --ink-600: #334155;
  --ink-500: #475569;
  --ink-400: #64748b;
  --ink-300: #94a3b8;
  --ink-200: #cbd5e1;
  --ink-100: #e2e8f0;
  --ink-50:  #f1f5f9;
  --paper:   #f7f8fb;
  --brand:     #1d4ed8;
  --brand-700: #1e40af;
  --brand-500: #2563eb;
  --brand-100: #dbe6ff;
  --brand-50:  #eff4ff;
  --tire-a: #1d4ed8;  --tire-a-soft: #dbe6ff;
  --tire-b: #ea580c;  --tire-b-soft: #ffe4d2;
  --tire-a-ink: #1d4ed8;   /* tire-A as text: already AA on white and on tire-a-soft */
  --tire-b-ink: #b23c0b;   /* tire-B as text: 5.9:1 on white, 4.9:1 on tire-b-soft (AA; #c2410c measured 4.26:1 there) */
  --win:  #15803d;
  /* status tones (owner sentiment, rank chips, would-buy-again): the only greens and roses; amber stays for buying */
  --pos: #059669; --pos-bg: #ecfdf5; --pos-line: #a7f3d0; --pos-ink: #065f46;
  --neg: #f43f5e; --neg-bg: #fff1f2; --neg-line: #fecdd3; --neg-ink: #9f1239;
  /* score bands (bars, single-tire rings): never blue or amber */
  --score-good: var(--pos); --score-ok: #64748b; --score-meh: #a3adbb; --score-bad: var(--neg);
  --warn: #b45309;
  --loss: #b91c1c;
  --shadow-card: 0 1px 0 rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.06);
  --shadow-lift: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.18);
  --shadow-btn:  0 1px 0 rgba(15,23,42,.08), inset 0 -1px 0 rgba(15,23,42,.12);
  --sticky-stack: 124px;

  /* Bootstrap overrides */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--ink-900);
  --bs-body-color-rgb: 11,18,32;
  --bs-body-bg: var(--paper);
  --bs-secondary-color: var(--ink-500);
  --bs-border-color: var(--ink-100);
  --bs-primary: var(--brand);
  --bs-primary-rgb: 29,78,216;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 29,78,216;
  --bs-link-hover-color: var(--brand-700);
  --bs-link-hover-color-rgb: 30,64,175;
  --bs-border-radius-sm: 3px;
  --bs-border-radius: 4px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 6px;
  --bs-border-radius-xxl: 6px;
  --bs-font-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { scroll-padding-top: var(--sticky-stack); }
body { font-feature-settings: "ss01","cv11"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--ink-900); }
.num { font-variant-numeric: tabular-nums; }
.text-pretty { text-wrap: pretty; }
.text-ink-300 { color: var(--ink-300) !important; }
.text-ink-400 { color: var(--ink-400) !important; }
.text-ink-500 { color: var(--ink-500) !important; }
.text-ink-700 { color: var(--ink-700) !important; }
.text-ink-900 { color: var(--ink-900) !important; }
.text-brand   { color: var(--brand) !important; }
.text-tire-a  { color: var(--tire-a) !important; }
.text-tire-b { color: var(--tire-b-ink) !important; }
.fw-800 { font-weight: 800 !important; }
.tracking-tight { letter-spacing: -.02em; }
.min-w-0 { min-width: 0; }

/* Layout wrapper — design uses max-w-6xl (72rem) + 16px gutters */
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.section { padding-block: 3rem; }

/* ---------- Icons (SVG sprite: /img/icons.svg) ---------- */
.ic { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  box-shadow: var(--shadow-btn);
}
.btn-quiet {
  --bs-btn-bg: #fff; --bs-btn-color: var(--ink-700); --bs-btn-border-color: var(--ink-200);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--ink-900); --bs-btn-hover-border-color: var(--ink-300);
  --bs-btn-active-bg: var(--ink-50); --bs-btn-active-border-color: var(--ink-300);
}
.btn-cta { height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-inline: 1rem; border-radius: 4px; transition: transform .15s, background-color .15s, border-color .15s; }
.btn-cta:hover { transform: translateY(-1px); }

/* ---------- Site header ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--ink-100); }
@supports (backdrop-filter: blur(4px)) { .site-header { background: rgba(255,255,255,.75); backdrop-filter: blur(8px); } }
.site-header .hbar { height: 3.5rem; display: flex; align-items: center; gap: 1rem; }
.brand-mark { display: flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); text-decoration: none; flex-shrink: 0; }
.brand-mark:hover { color: var(--ink-900); }
.brand-mark .logo { width: 1.75rem; height: 1.75rem; border-radius: 3px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.brand-mark .tld { color: var(--brand); }
.site-nav a { font-size: 13px; font-weight: 600; color: var(--ink-500); text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink-900); }
.site-nav-toggle { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-700); }
.site-nav-mobile { border-top: 1px solid var(--ink-100); background: #fff; }
.site-nav-mobile a { display: block; padding: .5rem 0; font-size: 14px; font-weight: 600; color: var(--ink-700); text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
/* "Українською" in the language list is the only Cyrillic on en/de pages: set it in the system font
   rather than download Inter's Cyrillic file (18 KB) for one word */
html:not([lang="uk"]) .site-footer a[lang="uk"] { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.site-footer .footer-h { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink-700); margin: 0 0 .75rem; }
.site-footer a { color: var(--ink-600); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: .375rem; }
.site-footer .legal { border-top: 1px solid var(--ink-100); font-size: 12px; color: var(--ink-400); }
.chip-link { height: 2rem; padding-inline: .625rem; display: inline-flex; align-items: center; border-radius: 4px; border: 1px solid var(--ink-200); font-size: 12px; font-weight: 600; color: var(--ink-500) !important; }
.chip-link:hover { color: var(--brand) !important; border-color: var(--brand); }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: 12px; margin: 0; --bs-breadcrumb-divider-color: var(--ink-300); --bs-breadcrumb-item-active-color: var(--ink-500); }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }

/* ---------- Surfaces ---------- */
.card-twg { position: relative; background: #fff; border: 1px solid var(--ink-100); border-radius: 6px; }
.card-twg.rounded-xl { border-radius: 6px; }
.tile { background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: 4px; }
.panel-dark { background: var(--ink-900); color: #fff; border-radius: 6px; }

/* ---------- Pills & badges ---------- */
.pill { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
.pill-neutral  { background: var(--ink-50);  color: var(--ink-700); border-color: var(--ink-100); }
.pill-brand    { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
/* "Your market": a status, so neutral ink, not brand blue (Three Jobs Rule) */
.pill-mine     { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.pill-positive { background: var(--pos-bg); color: var(--pos-ink); border-color: var(--pos-line); }
.pill-mixed    { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-200); }   /* neutral: amber means "buy" */
.pill-negative { background: var(--neg-bg); color: var(--neg-ink); border-color: var(--neg-line); }
.pill-a { background: var(--tire-a-soft); color: var(--tire-a); border-color: #bfdbfe; }
.pill-b { background: var(--tire-b-soft); color: var(--tire-b-ink); border-color: #fed7aa; }   /* 4.9:1; #ea580c was 2.9:1 */
.tag { display: inline-flex; padding: .125rem .5rem; border-radius: 4px; background: #fff; border: 1px solid var(--ink-100); font-size: 11.5px; font-weight: 500; color: var(--ink-700); }

/* ---------- Section head ---------- */
.kicker { display: flex; align-items: center; gap: .5rem; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.section-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.section-sub { margin: .25rem 0 0; color: var(--ink-500); max-width: 42rem; text-wrap: pretty; }
@media (min-width: 576px) { .section-title { font-size: 28px; } }
.label-xs { font-size: 12.5px; font-weight: 600; color: var(--ink-500); }

/* ---------- Score ring (server-rendered SVG) ---------- */
.ring { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring .track { stroke: var(--ink-100); }
.ring.dark .track { stroke: rgba(255,255,255,.14); }
.ring .val { transition: stroke-dasharray .9s cubic-bezier(.2,.7,.2,1); }
.ring .inner { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .n { font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ring .of { margin-top: .25rem; font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--ink-500); }   /* ink-400 is 4.3:1 on ink-50 */
.ring.dark .n { color: #fff; }
.ring.dark .of { color: rgba(255,255,255,.55); }

/* ---------- Bars ---------- */
@keyframes barfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar { position: relative; height: .5rem; border-radius: 1px; background: var(--ink-50); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 1px; transform-origin: left center; animation: barfill .8s cubic-bezier(.2,.7,.2,1) both; }
.bar-a > i { background: var(--tire-a); }
.bar-b > i { background: var(--tire-b); }
@media (prefers-reduced-motion: reduce) { .bar > i { animation: none; } .ring .val { transition: none; } }

/* ---------- Tables ---------- */
.table-twg { --bs-table-bg: transparent; font-size: 13.5px; margin: 0; }
.table-twg > thead th { background: var(--ink-50); color: var(--ink-500); font-weight: 600; border-bottom: 0; }
.table-twg > :not(caption) > * > * { padding: .625rem 1rem; border-color: var(--ink-100); }
.table-twg.table-sm > :not(caption) > * > * { padding: .375rem .75rem; font-size: 12px; }
.table-twg tbody tr:last-child > * { border-bottom: 0; }

/* ---------- Details / disclosure ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform .15s; }

/* ---------- Chip nav (sticky, in-page) ---------- */
.chipnav { position: sticky; top: 3.5rem; z-index: 1020; background: rgba(247,248,251,.85); border-bottom: 1px solid var(--ink-100); }
@supports (backdrop-filter: blur(4px)) { .chipnav { background: rgba(247,248,251,.7); backdrop-filter: blur(8px); } }
.chiprow { display: flex; gap: .5rem; overflow-x: auto; padding-block: .75rem; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; height: 2rem; padding-inline: .75rem; display: inline-flex; align-items: center; border-radius: 4px; font-size: 12px; font-weight: 600; background: #fff; color: var(--ink-700); border: 1px solid var(--ink-200); text-decoration: none; transition: background-color .15s, color .15s; }
.chip:hover { border-color: var(--ink-300); color: var(--ink-900); }
.chip.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.chip.active :is(.text-ink-400, .text-ink-500) { color: var(--ink-300) !important; }   /* counts stay legible on the dark chip */

/* ---------- Segmented toggle ---------- */
.seg { display: inline-flex; border: 1px solid var(--ink-200); border-radius: 4px; overflow: hidden; font-size: 12px; font-weight: 600; }
.seg button { height: 2.25rem; padding-inline: .75rem; border: 0; background: #fff; color: var(--ink-700); }
.seg button[aria-pressed="true"] { background: var(--ink-900); color: #fff; }

/* ---------- Range slider ---------- */
.form-range { accent-color: var(--brand); }
.form-range::-webkit-slider-thumb { background: var(--brand); }
.form-range::-moz-range-thumb { background: var(--brand); }
.ring-name { max-width: 8.5rem; margin: .375rem auto 0; font-size: 12px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.pick-hint { color: var(--ink-500); }
.pick-hint.is-warn { color: var(--ink-800); font-weight: 600; }
.stops { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-500); }   /* was 9.5px at 2.56:1 */

/* ---------- Image placeholder ---------- */
.stripes { background-image: repeating-linear-gradient(135deg, #eef2f7 0 14px, #e6ebf2 14px 28px); }
.tire-shot { width: 100%; aspect-ratio: 4/3; border-radius: 6px; border: 1px solid var(--ink-100); background: #fff; object-fit: contain; padding: .75rem; }
.tire-shot.empty { display: grid; place-items: center; padding: 0; }
.tire-shot .disc { width: 6rem; height: 6rem; border-radius: 999px; background: #fff; display: grid; place-items: center; font-size: 28px; }
.accent-a .disc { box-shadow: 0 0 0 10px rgba(29,78,216,.25); color: var(--tire-a); }

/* ---------- Mobile sticky CTA ---------- */
.sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 1040; padding: .5rem .75rem .75rem; background: linear-gradient(to top, var(--paper), rgba(247,248,251,.95), rgba(247,248,251,0)); transform: translateY(110%); transition: transform .25s; }
.sticky-cta.show { transform: none; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---------- Small utilities Bootstrap lacks ---------- */
@media (min-width: 992px) { .border-lg-start { border-left: 1px solid var(--ink-100) !important; } }
.clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Forms ---------- */
.field-label { display: block; margin-bottom: .25rem; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.form-select-twg { height: 2.75rem; border-color: var(--ink-200); border-radius: 4px; font-size: 14px; font-weight: 500; }
.form-select-twg:focus, .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(29,78,216,.15); }
.form-select-twg:disabled { background-color: var(--ink-50); color: var(--ink-300); }
.btn-lg-twg { height: 2.75rem; padding-inline: 1.25rem; border-radius: 4px; }
.link-brand:hover { color: var(--brand) !important; }

/* Segmented tabs (hero search) */
.seg-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 4px; background: var(--ink-50); }
.seg-tabs .nav-link { display: inline-flex; align-items: center; gap: .375rem; height: 2rem; padding: 0 .75rem; border-radius: 3px; font-size: 12.5px; font-weight: 600; color: var(--ink-500); border: 0; background: none; }
.seg-tabs .nav-link:hover { color: var(--ink-700); }
.seg-tabs .nav-link.active { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-card); }

/* Section head + "all" link on one row */
.head-row > header { margin-bottom: 0 !important; }
.more-link { display: none; align-items: center; gap: .25rem; flex-shrink: 0; padding-bottom: .25rem; font-size: 13px; font-weight: 600; text-decoration: none; }
@media (min-width: 576px) { .more-link { display: inline-flex; } }
button.chip { cursor: pointer; }

/* Make chips */
.make-chip { display: flex; align-items: center; gap: .625rem; height: 2.75rem; padding-inline: .75rem; border-radius: 4px; background: #fff; border: 1px solid var(--ink-100); font-size: 13px; font-weight: 600; color: var(--ink-700); text-decoration: none; transition: border-color .15s, background-color .15s; min-width: 0; }
.make-chip .mono { width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 3px; background: var(--ink-50); border: 1px solid var(--ink-100); display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--ink-500); }
.make-chip:hover { border-color: var(--brand); background: rgba(239,244,255,.5); color: var(--ink-900); }
.make-chip:hover .mono { color: var(--brand); }
.az > summary { list-style: none; }
.az-link { font-size: 13px; color: var(--ink-600); text-decoration: none; }
.az-link:hover { color: var(--brand); text-decoration: underline; }

/* Brand tiles */
.brand-tile { height: 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; border-radius: 6px; border: 1px solid var(--ink-100); background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--ink-700); text-decoration: none; transition: border-color .15s, background-color .15s; }
.brand-tile .disc { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: #fff; border: 1px solid var(--ink-100); display: grid; place-items: center; color: var(--ink-400); }
.brand-tile:hover { border-color: var(--brand); background: rgba(239,244,255,.4); color: var(--ink-900); }
.brand-tile:hover .disc { color: var(--brand); }

/* Content cards (reviews, articles) */
.tile-card { display: flex; flex-direction: column; height: 100%; border-radius: 6px; background: #fff; border: 1px solid var(--ink-100); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.tile-card:hover { box-shadow: 0 4px 12px -6px rgba(15,23,42,.18); color: inherit; }
.tile-card:hover .title { color: var(--brand); }
.tile-card .thumb { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: contain; background: #fff; padding: .75rem; border-bottom: 1px solid var(--ink-50); }
.tile-card .disc-sm { width: 4rem; height: 4rem; border-radius: 999px; background: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: 0 0 0 6px rgba(29,78,216,.15); }
.score-badge { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border-radius: 4px; background: var(--ink-900); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px #fff; }

/* Head-to-head rows */
.vs-row { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border-radius: 6px; background: #fff; border: 1px solid var(--ink-100); font-size: 13px; font-weight: 600; color: var(--ink-800); text-decoration: none; transition: border-color .15s; }
.vs-row .a, .vs-row .b { flex: 1 1 0; min-width: 0; line-height: 1.3; text-wrap: balance; overflow-wrap: break-word; }
.vs-row .a { text-align: right; }
.vs-row .vs { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink-500); }
.vs-row .go { color: var(--ink-300); }
.vs-row:hover { border-color: var(--brand); color: var(--brand); }
.vs-row:hover .go { color: var(--brand); }
/* Link rows with a name and a quiet meta line: size-page vehicles and nearest sizes */
.fit-row { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; height: 100%; padding: .625rem 1rem; border-radius: 6px; background: #fff; border: 1px solid var(--ink-100); font-size: 13px; font-weight: 600; color: var(--ink-800); text-decoration: none; transition: border-color .15s, color .15s; }
.fit-row .meta { margin-left: auto; text-align: right; font-size: 12px; font-weight: 500; color: var(--ink-500); }
.fit-row .go { flex-shrink: 0; color: var(--ink-300); }
.fit-row.fit-car { flex-direction: column; align-items: flex-start; justify-content: center; gap: .125rem; line-height: 1.3; }
.fit-row.fit-car .meta { margin-left: 0; text-align: left; }
.fit-row:hover { border-color: var(--brand); color: var(--brand); }
.fit-row:hover .go { color: var(--brand); }

/* ---------- Score bars (review) ---------- */
.track { position: relative; display: block; height: .375rem; border-radius: 1px; background: var(--ink-50); overflow: hidden; }
.track > i { position: absolute; inset: 0 auto 0 0; border-radius: 1px; }
/* score scale: green good, two slates between, rose bad — blue means "go" and amber "buy", so neither is a score */
.t-good { background: var(--score-good); } .t-ok { background: var(--score-ok); } .t-meh { background: var(--score-meh); } .t-bad { background: var(--score-bad); }
.sbar { display: grid; grid-template-columns: 1fr 3.25rem; align-items: end; column-gap: .75rem; }
.sbar .v { transform: translateY(2px); }
.sbar .lbl { margin-bottom: .25rem; font-size: 12.5px; font-weight: 500; color: var(--ink-600); }
.sbar .v { font-size: 12.5px; font-weight: 600; text-align: right; color: var(--ink-700); line-height: 1; }
.sbar.strong .lbl { font-weight: 700; color: var(--ink-900); }
.sbar.strong .v { font-weight: 800; color: var(--ink-900); }

/* Score view toggle: section[data-scoreview] > .score-views > [data-pane] */
.score-col { flex: 0 0 auto; width: 100%; }
[data-scoreview="drivers"] [data-pane="tests"], [data-scoreview="tests"] [data-pane="drivers"] { display: none; }
.group-col { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) { .group-col { width: 50%; } }
@media (min-width: 992px) {
  [data-scoreview="both"] .score-col { width: 50%; }
  [data-scoreview="both"] .group-col { width: 100%; }
  [data-scoreview="drivers"] .group-col, [data-scoreview="tests"] .group-col { width: 33.333%; }
}

/* Placement chips */
.rank { display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; padding: .25rem .5rem; border-radius: 4px; font-size: 12px; font-weight: 700; border: 1px solid; }
.rank-pos { background: var(--pos-bg); color: var(--pos-ink); border-color: var(--pos-line); }
.rank-mid { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-200); }
.rank-neg { background: var(--neg-bg); color: var(--neg-ink); border-color: var(--neg-line); }
.test-card > summary:hover { background: rgba(241,245,249,.6); }
.test-card[open] .chev-r { transform: rotate(90deg); }
.chev-r { transition: transform .15s; }

/* Amazon button */
.btn-amz { --bs-btn-bg: #fbbf24; --bs-btn-color: var(--ink-900); --bs-btn-border-color: #fbbf24; --bs-btn-hover-bg: #fcd34d; --bs-btn-hover-border-color: #fcd34d; --bs-btn-hover-color: var(--ink-900); font-weight: 700; font-size: 12.5px; }

/* Long-form editorial content (legacy HTML from the DB) */
.prose { max-width: 48rem; font-size: 15px; line-height: 1.7; color: var(--ink-600); }
.prose h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2rem 0 .75rem; color: var(--ink-900); }
.prose h3 { font-size: 17px; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--ink-900); }
.prose > :first-child { margin-top: 0; }
.prose a { overflow-wrap: anywhere; } /* long URLs in legal copy */
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; }
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.prose table { width: 100%; margin-bottom: 1rem; font-size: 14px; border-collapse: collapse; }
.prose th, .prose td { padding: .5rem .75rem; border-bottom: 1px solid var(--ink-100); text-align: left; }
.prose a { color: var(--brand); }
.refs ul { padding-left: 1.1rem; }

/* ---------- Brand index cards ---------- */
.text-ink-600 { color: var(--ink-600) !important; }

/* ---------- Tire size index ---------- */
.size-row { display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem; align-items: start; }
.size-row .w { padding-top: .5rem; font-size: 13px; font-weight: 700; color: var(--ink-500); }
.size-chip { height: 2.25rem; padding-inline: .625rem; display: inline-flex; align-items: center; border-radius: 4px; background: #fff; border: 1px solid var(--ink-100); font-size: 12.5px; font-weight: 600; color: var(--ink-700); text-decoration: none; transition: border-color .15s, color .15s; }
.size-chip:hover { border-color: var(--brand); color: var(--brand); background: rgba(239,244,255,.5); }
/* /tires/s/ index: sizes with rated tires stand out; the rest recede (conversions + rim fitment only) */
[data-size-list] .size-chip:not(.rated) { background: transparent; color: var(--ink-500); font-weight: 500; }
[data-size-list] .size-chip.rated { color: var(--ink-900); font-weight: 700; border-color: var(--ink-200); }
[data-size-list] .size-chip:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.sx-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; font-size: 13.5px; color: var(--ink-600); }
.sx-legend p { max-width: 44rem; line-height: 1.9; }
.sx-legend p .size-chip { height: 1.5rem; padding-inline: .4rem; font-size: 12px; vertical-align: baseline; pointer-events: none; }
.sx-legend .chip { margin-left: auto; }
.sx-car .car-h { margin-top: 1rem; }
.sx-legend .chip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.sx-car { max-width: none; }
/* size page: the ideal rim width is the answer, min/max recede (no blue: it isn't a link) */
.rim-ideal { border-color: var(--ink-900) !important; box-shadow: inset 0 0 0 1px var(--ink-900); }
@media (hover: none), (pointer: coarse) { .kbd-hint { display: none; } }
.sx-h { margin: 0 0 .75rem; font-size: 14px; font-weight: 700; color: var(--ink-800); }
@media (min-width: 992px) { .sx-h { margin-top: .5rem; } }
@media (max-width: 767.98px) { .sx-legend .chip { margin-left: 0; } }
/* touch: every size, rim and filter chip on the index is a full 44px target */
@media (pointer: coarse) { [data-size-list] a.size-chip, .sx-legend .chip { height: 2.75rem; } }
a.car-chip { text-decoration: none; }
a.car-chip:hover { border-color: var(--brand); color: var(--brand); }
a.car-chip:hover small { color: var(--ink-600); }
.chip.disabled { background: var(--ink-50); color: var(--ink-300); border-color: var(--ink-100); pointer-events: none; }

/* ---------- Ranked tire cards (size / vehicle pages) ---------- */

/* ---------- Vehicle pages (/sizes/) ---------- */
.jump-link { display: flex; align-items: center; gap: .625rem; height: 2.75rem; padding-inline: .75rem; border-radius: 4px; background: #fff; border: 1px solid var(--ink-100); font-size: 13px; font-weight: 600; color: var(--ink-700); text-decoration: none; }
.jump-link:hover { border-color: var(--brand); color: var(--ink-900); }
.model-tile { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: .375rem .875rem; border-radius: 4px; background: #fff; border: 1px solid var(--ink-100); text-decoration: none; transition: border-color .15s, background-color .15s; }
.model-tile b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-tile small { display: block; font-size: 11px; color: var(--ink-400); }
.model-tile:hover { border-color: var(--brand); background: rgba(239,244,255,.5); }
.model-tile:hover b { color: var(--ink-900); }
.year-chip { height: 2.5rem; min-width: 4.25rem; padding-inline: .75rem; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; flex-shrink: 0; border-radius: 4px; background: var(--paper); border: 1px solid var(--ink-200); font-size: 13.5px; font-weight: 600; color: var(--ink-700); text-decoration: none; transition: border-color .15s, color .15s; }
.year-chip:hover { border-color: var(--brand); color: var(--brand); background: rgba(239,244,255,.5); }
.year-chip.current { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.size-chip.oe { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-700); }
.btn-xs { --bs-btn-padding-y: 0; --bs-btn-padding-x: .625rem; --bs-btn-font-size: 11.5px; height: 1.75rem; display: inline-flex; align-items: center; font-weight: 700; border-radius: 3px; }

/* Trim fitment tables */
details.trim { border-top: 1px solid var(--ink-100); }
.gen-card > header + details.trim { border-top: 0; }
details.trim > summary { display: flex; flex-wrap: wrap; align-items: center; column-gap: .75rem; row-gap: .25rem; padding: .875rem 1.25rem; }
details.trim > summary:hover { background: rgba(241,245,249,.6); }
details.trim[open] .chev-r { transform: rotate(90deg); }
@media (max-width: 575.98px) { details.trim .summary-size { margin-left: 0 !important; width: 100%; } }
.fit-table { font-size: 13px; }
.fit-table thead th { font-size: 12px; font-weight: 700; color: var(--ink-500); padding: .625rem .75rem; border-bottom-color: var(--ink-100); white-space: nowrap; }
.fit-table td { padding: .375rem .75rem; border: 0; vertical-align: top; background: transparent; }
.fit-table tbody { border-top: 1px solid var(--ink-100); }
.fit-table tbody.striped td { background: rgba(241,245,249,.45); }
.fit-table th:first-child, .fit-table td:first-child { padding-left: 1.25rem; }
.fit-table th:last-child, .fit-table td:last-child { padding-right: 1.25rem; }
.fit-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fit-table td:nth-last-child(3) { font-weight: 600; color: var(--ink-900); }
.fit-table td:nth-last-child(3) a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-200); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fit-table td:nth-last-child(3) a:hover { color: var(--brand); text-decoration-color: currentColor; }
.fit-table td:nth-last-child(2), .fit-table td:last-child { color: var(--ink-700); }
.fit-table td:last-child, .fit-table th:last-child { text-align: right; }
.fit-table td small { display: none; }
.fit-table td em { display: none; }
.fit-table i { font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.fit-table b.oe { display: inline-flex; padding: .125rem .5rem; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .025em; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.fit-table u { display: inline-block; width: 3rem; text-decoration: none; font-size: 11.5px; color: var(--ink-500); }
.fit-table s { text-decoration: none; color: var(--ink-500); }
.size-chip.current { background: var(--ink-900) !important; border-color: var(--ink-900); color: #fff; }
/* vehicle page: factory size tabs, two across on phones, four on desktop */
.vh-fit { margin: 0 0 .75rem; max-width: 42rem; font-size: 13.5px; color: var(--ink-600); }
.vh-fit b { color: var(--ink-900); }
.vh-ev { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 0 0; max-width: 42rem; font-size: 13.5px; color: var(--ink-600); }
.vh-ev .ic { flex-shrink: 0; margin-top: .2rem; color: var(--ink-500); }
/* make pages and link columns: whole names on phones, 44px rows on touch */
@media (max-width: 575.98px) { .link-cols a .nm { white-space: normal; overflow: visible; text-overflow: clip; } }
@media (pointer: coarse) { .link-cols a, .size-links a { min-height: 2.75rem; align-items: center; } .fold > summary { min-height: 2.75rem; } }
/* home lookup: one search box, then the car picker as the second path */
.lookup-or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .75rem; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.lookup-or::before, .lookup-or::after { content: ""; flex: 1; height: 1px; background: var(--ink-100); }
.lookup-mine { margin: 0 0 .75rem; font-size: 13.5px; color: var(--ink-600); }
.lookup-pop { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: .25rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--ink-100); font-size: 13px; }
.lookup-pop a { color: var(--brand); font-weight: 500; text-decoration: none; }
.lookup-pop a:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (pointer: coarse) { .lookup-pop a { display: inline-flex; align-items: center; min-height: 2.75rem; } .az-jump a { min-width: 2.75rem; height: 2.75rem; } .az-list a { min-height: 2.75rem; align-items: center; } }
/* ═══ Review page: reader reviews (written here) and the review form ═══ */
.or-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; max-width: 48rem; margin-bottom: 1.5rem; }
.or-stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.or-stars .ic { width: 16px; height: 16px; }
.or-stars.sm .ic { width: 13px; height: 13px; }
.or-stars.md .ic { width: 18px; height: 18px; }
.or-stars .on .ic { fill: var(--ink-900); stroke: var(--ink-900); }
.or-stars .off .ic { fill: none; stroke: var(--ink-300); }
.or-list { display: grid; gap: .75rem; max-width: 48rem; }
.or-item { padding: 1.1rem 1.2rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.or-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.or-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.or-body { margin-top: .5rem; max-width: 68ch; font-size: 15px; line-height: 1.65; color: var(--ink-700); overflow-wrap: anywhere; }
.or-facts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-600); }
.or-facts li { display: inline-flex; align-items: center; gap: .35rem; }
.or-again { font-weight: 700; }
.or-again.yes { color: var(--pos-ink); }
.or-again.no { color: var(--neg-ink); }
.or-meta { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin: .75rem 0 0; font-size: 12.5px; color: var(--ink-500); }
.or-meta > * + *::before { content: "·"; margin-right: .5rem; color: var(--ink-300); }
.or-meta b { font-weight: 700; color: var(--ink-800); }
.or-empty { display: flex; align-items: flex-start; gap: 1rem; max-width: 48rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--ink-200); border-radius: 6px; background: #fff; }
.or-empty-ic { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--ink-50); color: var(--ink-500); }
.or-empty-h { margin: 0 0 .25rem; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.rf-fold { max-width: 48rem; margin-top: 1.25rem; }
.rf-fold > summary { display: inline-flex; align-items: center; gap: .5rem; list-style: none; }
.rf-fold > summary::-webkit-details-marker { display: none; }
.rf-fold > summary .chev { transition: transform .2s; }
.rf-fold[open] > summary .chev { transform: rotate(180deg); }
.rf-card { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
@media (min-width: 576px) { .rf-card { padding: 1.5rem 1.75rem; } }
.rf-card:has(.rf-done:not([hidden])) { padding: 0; border: 0; background: none; }
.rf-form { display: grid; gap: 1.5rem; }
.rf-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rf-group > legend, .rf-field > .form-label { float: none; width: auto; margin: 0 0 .4rem; padding: 0; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.rf-opt { font-weight: 500; color: var(--ink-500); }
.rf-hint { margin: .35rem 0 0; font-size: 12.5px; color: var(--ink-500); }
.rf-error { margin: .35rem 0 0; font-size: 13px; font-weight: 600; color: var(--neg-ink); }
.rf-form [data-field].is-invalid > legend, .rf-form [data-field].is-invalid > .form-label, .rf-form [data-field].is-invalid .form-check-label { color: var(--neg-ink); }
.rf-form [data-field].is-invalid .form-control, .rf-form [data-field].is-invalid .form-select, .rf-form [data-field].is-invalid .form-check-input { border-color: var(--neg); box-shadow: 0 0 0 3px var(--neg-bg); }
.rf-row { display: grid; gap: 1.5rem; }
@media (min-width: 576px) { .rf-row { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.rf-form .form-control, .rf-form .form-select { min-height: 2.75rem; border-color: var(--ink-200); font-size: 15px; }
/* stars: real radios, drawn as stars filled up to the chosen one (hover previews) */
.rf-stars { display: flex; flex-wrap: wrap; align-items: center; }
.rf-stars input, .rf-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rf-stars .rf-star + label { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--ink-300); cursor: pointer; }
.rf-stars .rf-star + label .ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: color .1s, fill .1s; }
.rf-stars-sm .rf-star + label { width: 2.25rem; height: 2.25rem; }
.rf-stars-sm .rf-star + label .ic { width: 20px; height: 20px; }
.rf-stars label:has(~ .rf-star:checked), .rf-stars .rf-star:checked + label { color: var(--ink-900); }
.rf-stars label:has(~ .rf-star:checked) .ic, .rf-stars .rf-star:checked + label .ic { fill: currentColor; }
@media (hover: hover) {
  .rf-stars:has(.rf-star + label:hover) .rf-star + label { color: var(--ink-300); }
  .rf-stars:has(.rf-star + label:hover) .rf-star + label .ic { fill: none; }
  .rf-stars .rf-star + label:hover, .rf-stars .rf-star + label:has(~ .rf-star + label:hover) { color: var(--ink-900) !important; }
  .rf-stars .rf-star + label:hover .ic, .rf-stars .rf-star + label:has(~ .rf-star + label:hover) .ic { fill: currentColor !important; }
}
.rf-stars .rf-star:focus-visible + label { border-radius: 6px; outline: 2px solid var(--brand); outline-offset: -4px; }
.rf-stars .rf-skip + label { display: inline-flex; align-items: center; min-height: 2.25rem; margin-left: .5rem; padding: 0 .6rem; border: 1px solid var(--ink-100); border-radius: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-500); cursor: pointer; }
.rf-stars .rf-skip:checked + label { border-color: var(--ink-200); background: var(--ink-50); color: var(--ink-700); }
.rf-stars .rf-skip:focus-visible + label, .rf-choice input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (pointer: coarse) { .rf-stars-sm .rf-star + label { width: 2.75rem; height: 2.75rem; } .rf-stars .rf-skip + label { min-height: 2.75rem; } }
.rf-cats > legend { margin-bottom: .5rem; }
.rf-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; padding: .3rem 0; border-top: 1px solid var(--ink-50); }
.rf-cat > legend { float: left; width: auto; margin: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-700); }
@media (min-width: 576px) { .rf-cat > legend { min-width: 9rem; } }
.rf-choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.rf-choice label { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--ink-200); border-radius: 4px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; }
.rf-choice input:checked + label { border-color: var(--ink-900); background: var(--ink-900); color: #fff; }
.rf-form .form-check { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding-left: 0; }
.rf-form .form-check-input { flex-shrink: 0; float: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; }
.rf-form .form-check-label { font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.rf-form .form-check .rf-error { flex-basis: 100%; }
.rf-form .form-check { flex-wrap: wrap; }
.rf-privacy { margin: -.75rem 0 0; }
.rf-submit { justify-self: start; }
.rf-status { margin: -.75rem 0 0; font-size: 13.5px; color: var(--ink-600); }
.rf-status-error { margin: 0; font-weight: 600; color: var(--neg-ink); }
.rf-done { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--pos-line); border-radius: 6px; background: var(--pos-bg); color: var(--pos-ink); }
.rf-done .ic { flex-shrink: 0; width: 22px; height: 22px; margin-top: .1rem; }
.rf-done p { margin: 0; font-size: 15px; font-weight: 600; }
/* bolt pattern pages: what else must match (with the schematic), make list folded by make */
.pcd-check { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; max-width: 46rem; padding: 1rem 1.1rem; border: 1px solid var(--ink-100); border-radius: 6px; background: var(--paper); }
.pcd-fig { width: 104px; height: 104px; flex-shrink: 0; }
.pcd-check > .min-w-0 { flex: 1 1 18rem; }
.pcd-check-h { margin: 0 0 .5rem; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.pcd-check-l { margin: 0; padding-left: 1.1rem; font-size: 13.5px; color: var(--ink-600); }
.pcd-check-l li + li { margin-top: .2rem; }
.pcd-check-l b { color: var(--ink-900); font-weight: 700; }
.pcd-check-f { margin: .5rem 0 0; font-size: 13.5px; color: var(--ink-600); }
.pcd-az { display: flex; flex-wrap: wrap; gap: .3rem; }
.pcd-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; border: 1px solid var(--ink-100); border-radius: 4px; background: #fff; font-size: 13px; font-weight: 700; color: var(--ink-700); text-decoration: none; }
.pcd-az a:hover { border-color: var(--brand); color: var(--brand); }
.pcd-make { border-bottom: 1px solid var(--ink-100); }
.pcd-make > summary { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; list-style: none; }
.pcd-make > summary::-webkit-details-marker { display: none; }
.pcd-make > summary .nm { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.pcd-make > summary .num { font-size: 13px; font-weight: 600; color: var(--ink-500); }
.pcd-make > summary .chev { margin-left: auto; color: var(--ink-400); transition: transform .2s; }
.pcd-make[open] > summary .chev { transform: rotate(180deg); }
.pcd-make > summary:hover .nm { color: var(--brand); }
.pcd-chip .c { margin-left: .35rem; font-weight: 500; color: var(--ink-500); }
.pcd-chip.big { font-weight: 800; color: var(--ink-900); }
.pcd-chip.current .c { color: var(--ink-300); }
.pcd-ad { max-width: 46rem; }
@media (max-width: 575.98px) { .pcd-fig { display: none; } }   /* phones: the text says it; the list comes sooner */
@media (pointer: coarse) { .pcd-az a { min-width: 2.75rem; height: 2.75rem; } .pcd-chip { height: 2.75rem; } }
/* touch: 44px targets for the vehicle page's small links; small phones keep the buy in the first screen */
@media (pointer: coarse) {
  .vh-all { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .vh-years .year-links a { height: 2.75rem; }
}
@media (max-width: 375px) {
  .vh-sizes .size-pick { padding: .5rem .75rem; }
  .vh-sizes .size-pick .num { font-size: 15px !important; }
}
.vh-near-h { margin: 1.75rem 0 .35rem; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.best-buys { grid-area: buy; display: flex; flex-wrap: wrap; gap: .4rem; }
.best-buys .best-buy { grid-area: auto; }
@media (max-width: 767.98px) { .best-buys { justify-self: stretch; } .best-buys .best-buy { flex: 1 1 100%; } }
.vh-sizes { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; }
@media (min-width: 992px) { .vh-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.size-pick { text-align: left; padding: .75rem 1rem; border-radius: 6px; background: #fff; border: 1px solid var(--ink-200); color: var(--ink-900); transition: border-color .15s, background-color .15s; }
.size-pick .sub { margin-top: .125rem; font-size: 12px; color: var(--ink-500); }
.size-pick:hover { border-color: var(--brand); }
.size-pick.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.size-pick.active .sub { color: rgba(255,255,255,.7); }

/* ---------- Calculator ---------- */
.calc-inputs { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 768px) { .calc-inputs { grid-template-columns: 1fr auto 1fr; } }
.calc-swap { justify-self: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: #fff; border: 1px solid var(--ink-200); display: grid; place-items: center; color: var(--ink-400); box-shadow: var(--shadow-card); }
.calc-swap:hover { color: var(--brand); border-color: var(--brand); }
.calc-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; gap: .375rem; }
.calc-grid .sep { padding-bottom: .75rem; font-weight: 700; color: var(--ink-300); }
.calc-sel { height: 3rem; font-size: 16px; font-weight: 700; }
.calc-side[data-mode="metric"] [data-when="flotation"], .calc-side[data-mode="flotation"] [data-when="metric"] { display: none; }
.verdict { border: 1px solid; }
.v-safe { background: #ecfdf5; border-color: #a7f3d0; color: #064e3b; } .v-safe .v-icon { color: #047857; }
.v-ok   { background: #fffbeb; border-color: #fde68a; color: #78350f; } .v-ok .v-icon { color: #b45309; }
.v-risk, .v-extreme { background: #fff1f2; border-color: #fecdd3; color: #881337; } .v-risk .v-icon, .v-extreme .v-icon { color: #be123c; }
.v-same { background: var(--ink-50); border-color: var(--ink-200); color: var(--ink-800); } .v-same .v-icon { color: var(--ink-500); }
.d-up { color: #047857 !important; } .d-down { color: #be123c !important; } .d-z { color: var(--ink-400) !important; }
.calc-table td:nth-child(2), .calc-table td:nth-child(3) { color: var(--ink-900); }

/* ---------- Articles ---------- */
.lead-thumb { aspect-ratio: auto !important; height: 100%; min-height: 14rem; object-fit: cover !important; padding: 0 !important; }
@media (min-width: 768px) { .tile-card.flex-md-row .lead-thumb { width: 42%; flex-shrink: 0; border-bottom: 0; border-right: 1px solid var(--ink-50); } }
.toc { position: sticky; top: calc(3.5rem + 1.5rem); }
.toc ol li a { display: block; padding: .375rem .75rem; border-left: 2px solid var(--ink-100); font-size: 13px; line-height: 1.35; color: var(--ink-500); text-decoration: none; }
.toc ol li a:hover { color: var(--ink-900); }
.toc ol li a.active { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
.article-body h2 { scroll-margin-top: 5rem; }
/* articles: a readable measure (the prose was full column width, ~100 characters a line) */
.article-body { font-size: 16px; }
.article-body > p, .article-body > ul, .article-body > ol, .article-body > h2, .article-body > h3, .article-body > h4 { max-width: 62ch; }   /* ~75 characters a line in Inter 16px */
.toc-m { border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.toc-m > summary { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .9rem; font-size: 14px; font-weight: 700; color: var(--ink-900); cursor: pointer; list-style: none; }
.toc-m > summary::-webkit-details-marker { display: none; }
.toc-m > summary .chev { margin-left: auto; color: var(--ink-400); transition: transform .2s; }
.toc-m[open] > summary .chev { transform: rotate(180deg); }
.toc-m ol { padding: 0 .9rem .5rem; }
.toc-m li a { display: flex; align-items: center; min-height: 2.75rem; border-top: 1px solid var(--ink-50); font-size: 14px; color: var(--ink-700); text-decoration: none; }
@media (pointer: coarse) { .toc ol li a { padding-block: .7rem; } }
.article-body table { border: 1px solid var(--ink-100); border-radius: 6px; overflow: hidden; }
.article-body thead th, .article-body tr:first-child th { background: var(--ink-50); }
.article-body tbody tr:nth-child(even) td { background: rgba(241,245,249,.45); }
.article-body img { display: block; margin-inline: auto; border: 1px solid var(--ink-100); }
.article-body .table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.trim-tools .seg-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.trim-tools .seg-tabs::-webkit-scrollbar { display: none; }
.head-row { flex-wrap: wrap; }
.head-row > header { min-width: 0; flex: 1 1 20rem; }

/* ---------- Link columns: long lists of similar links (makes, models) as light text
   columns instead of boxed tiles. <ul class="link-cols link-cols-2 link-cols-md-4"> ---------- */
.link-cols { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 2rem; }
.link-cols-2 { columns: 2; }
@media (min-width: 768px) { .link-cols-md-4 { columns: 4; } }
@media (min-width: 992px) { .link-cols-lg-3 { columns: 3; } .link-cols-lg-5 { columns: 5; } }
.link-cols li { break-inside: avoid; }
.link-cols a { display: flex; align-items: baseline; gap: .5rem; padding-block: .3rem; border-bottom: 1px solid var(--ink-50); font-size: 14px; font-weight: 500; color: var(--ink-800); text-decoration: none; }
.link-cols .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-cols .n { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--ink-500); }   /* ink-400 is 4.48:1 on the page ground */
.link-cols-wrap .nm { white-space: normal; line-height: 1.3; }
@media (max-width: 575.98px) { .link-cols-wrap .n { display: none; } }
.link-cols a:hover { color: var(--brand); }
.link-cols a:hover .nm { text-decoration: underline; text-underline-offset: .2em; }
.region + .region { margin-top: 2.25rem; }
.region-title { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--ink-200); }
.region-title h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-900); }
.region-title .num { font-size: 12.5px; font-weight: 600; color: var(--ink-400); }
.region { scroll-margin-top: 5rem; }

/* ---------- Make page: fact line and popular-model rows ---------- */
.make-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 1.25rem 0 0; }
.make-facts dt { font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.make-facts dd { margin: .1rem 0 0; font-size: 17px; font-weight: 800; color: var(--ink-900); }
.make-facts dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-200); text-underline-offset: .2em; }
.make-facts dd a:hover { color: var(--brand); text-decoration-color: currentColor; }
.model-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; }
@media (min-width: 768px) { .model-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .model-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.model-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .75rem; padding-block: .55rem; border-bottom: 1px solid var(--ink-100); }
.model-rows .nm { min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--ink-900); text-decoration: none; }
.model-rows .nm:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.model-rows .yr { font-size: 12px; color: var(--ink-400); }
.model-rows .sz { font-size: 13px; font-weight: 600; color: var(--ink-700); text-decoration: none; border-bottom: 1px dotted var(--ink-300); }
.model-rows .sz:hover { color: var(--brand); border-bottom-color: currentColor; }

/* ---------- Model page: generations as ruled rows in one container ---------- */
.gen-list { overflow: hidden; }
/* Generation groups (XII, XI…) with their market versions as compact rows */
.gen-group + .gen-group, .gen-more, .gen-more > .gen-group { border-top: 1px solid var(--ink-200); }
.gen-group-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .35rem; padding: 1.15rem 1.25rem .5rem; }
.gen-group-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); }
.gen-group-head .num { font-size: 13px; font-weight: 600; }
.gen-count { font-size: 12.5px; color: var(--ink-500); }
.gen-cols { display: none; }
.gen { padding: .8rem 1.25rem; }
.gen + .gen { border-top: 1px solid var(--ink-100); }
.gen-group-head + .gen-cols + .gen { padding-top: .35rem; }
.gen:last-child { padding-bottom: 1.15rem; }
.gen-ver { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: .2rem; margin-bottom: .55rem; }
.gen-ver h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.gen-span { font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.gen-bodies { flex-basis: 100%; font-size: 12.5px; color: var(--ink-500); }
.size-links-sm li:has(> .oe-tag) { align-self: center; }
.size-links-sm .oe-tag { margin: 0 .15rem 0 0; }
.gen-specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; }
@media (min-width: 768px) and (max-width: 991.98px) { .gen-specs { grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.5rem; row-gap: .45rem; } .gen-specs > div { display: contents; } }
.gen-specs dt { font-size: 12.5px; font-weight: 600; color: var(--ink-500); padding-top: .3rem; }
.gen-specs dd { margin: 0; font-size: 13.5px; color: var(--ink-700); }
.gen-specs dd.num { padding-top: .3rem; }
@media (min-width: 992px) {
  /* one table-like grid per group: Version | Tire sizes | Bolt pattern | Years; column heads once */
  .gen-cols, .gen { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 7.5rem 16.5rem; column-gap: 1.5rem; }
  .gen-cols { padding: .1rem 1.25rem .45rem; font-size: 12px; font-weight: 600; color: var(--ink-500); }
  .gen-specs { grid-column: 2 / -1; grid-template-columns: subgrid; column-gap: 1.5rem; }
  .gen-specs > div { min-width: 0; }
  .gen-specs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gen-ver { display: block; margin: 0; padding-top: .3rem; }
  .gen-ver > * { display: block; width: fit-content; }
  .gen-ver .gen-span { margin-top: .1rem; }
  .gen-ver .pill { margin-top: .35rem; }
  .gen-ver .pill[hidden] { display: none; }
  .gen-bodies { margin-top: .3rem; line-height: 1.4; }
  .gen-years .year-links a { min-width: 2.9rem; }
}
.size-links-sm { gap: .35rem; }
.year-links { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.year-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 3.1rem; height: 1.9rem; padding-inline: .4rem; border-radius: 3px; background: var(--ink-50); border: 1px solid var(--ink-100); font-size: 12.5px; font-weight: 600; color: var(--ink-700); text-decoration: none; }
.year-links a:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }
.gen .year-links a { height: 2.25rem; }
.gen-more > summary { padding: .85rem 1rem; font-size: 13.5px; font-weight: 600; color: var(--brand); background: var(--paper); }
.gen-more > summary:hover { background: var(--brand-50); }

/* ---------- Model page: year router, market notes, at-a-glance panel ---------- */
.year-router { border-top: 1px solid var(--ink-100); padding-top: 1rem; }
.year-index-title { margin: 0 0 .5rem; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); }
.decade { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: start; gap: .5rem; padding-block: .4rem; border-top: 1px solid var(--ink-100); }
.decade .dec { padding-top: .6rem; font-size: 12.5px; font-weight: 700; color: var(--ink-500); }
.year-links-lg { gap: .35rem; }
.year-links-lg a, .year-links-lg .off { min-width: 3.4rem; height: 2.5rem; font-size: 14px; font-weight: 700; }
.year-links-lg a { background: #fff; border-color: var(--ink-200); color: var(--ink-900); }
.year-links .off { display: inline-flex; align-items: center; justify-content: center; min-width: 3.1rem; height: 1.9rem; padding-inline: .4rem; border-radius: 3px; border: 1px dashed var(--ink-300); background: repeating-linear-gradient(135deg, transparent 0 5px, var(--ink-50) 5px 7px); font-size: 12.5px; font-weight: 500; color: var(--ink-500); cursor: default; }
.year-legend { display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0; font-size: 12.5px; color: var(--ink-500); }
.year-legend .swatch { width: 1.25rem; height: .9rem; flex-shrink: 0; border-radius: 2px; border: 1px dashed var(--ink-300); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--ink-100) 3px 5px); }
.year-links-lg .off { min-width: 3.4rem; height: 2.5rem; font-size: 14px; font-weight: 500; }
.year-earlier { border-top: 1px solid var(--ink-100); }
.year-earlier > summary { display: flex; align-items: center; gap: .4rem; padding-block: .6rem; font-size: 13px; font-weight: 600; color: var(--brand); }
details .when-open, details[open] > summary .when-closed { display: none; }
details[open] > summary .when-open { display: inline; }
.market-note { display: flex; gap: .5rem; align-items: flex-start; margin: .75rem 0 0; padding: .65rem .8rem; border-radius: 4px; background: var(--brand-50); border: 1px solid var(--brand-100); font-size: 13px; line-height: 1.5; color: var(--ink-700); }
.market-note .ic { margin-top: .2rem; color: var(--brand); flex-shrink: 0; }
/* The one-line bolt-pattern answer: under the title on phones, leading the bolt-pattern section */
.pcd-answer { margin: -.75rem 0 1.25rem; font-size: 14px; line-height: 1.5; color: var(--ink-700); max-width: 36rem; }
.pcd-answer .lbl { display: block; margin-bottom: .1rem; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.pcd-answer b, .market-note b, .pcd-lead b { color: var(--ink-900); }
.pcd-answer a { font-weight: 600; white-space: nowrap; }
.pcd-lead { display: block; margin-bottom: .35rem; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink-800); }
.glance { margin: 0; border: 1px solid var(--ink-100); border-radius: 6px; background: var(--paper); }
.glance > div { padding: .8rem 1rem; }
.glance > div + div { border-top: 1px solid var(--ink-100); }
.glance > div.mine { background: var(--ink-50); }
.glance dt { font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.glance dd { margin: .15rem 0 0; font-size: 17px; font-weight: 800; color: var(--ink-900); }
.glance dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-200); text-underline-offset: .2em; }
.glance dd a:hover { color: var(--brand); text-decoration-color: currentColor; }
.fact-pcds { display: flex; flex-direction: column; gap: .2rem; }
.fact-pcds small { font-size: 12px; font-weight: 500; color: var(--ink-500); }
.fact-pcds .data-end { display: block; margin-top: .15rem; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ink-500); }
.fact-pcds .older { font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--brand); }
.gen-pre { font-weight: 600; color: var(--ink-500); }
.gen-market { font-weight: 600; color: var(--ink-500); }
.gen.mine { background: var(--ink-50); }
.gen:target { background-color: #fffbeb; transition: background-color .6s; }
.oe-tag { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 .45rem; border-radius: 3px; border: 1px solid var(--ink-300); background: #fff; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-700); cursor: pointer; }
.oe-tag abbr { text-decoration: none; cursor: inherit; }
.oe-tag:hover, .oe-tag[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.oe-note { display: block; margin-top: .4rem; font-size: 12.5px; line-height: 1.45; color: var(--ink-600); }
.pcd-table td, .pcd-table th { font-size: 13.5px; }

/* ---------- Size / bolt-pattern links: short codes as quiet outlined tags ---------- */
.size-links { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.size-links a { display: inline-flex; align-items: center; height: 2.25rem; padding-inline: .75rem; border: 1px solid var(--ink-200); border-radius: 4px; background: #fff; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-800); text-decoration: none; }
.size-links a:hover { border-color: var(--brand); color: var(--brand); }
.size-links .n { margin-left: .5rem; font-size: 11.5px; font-weight: 500; color: var(--ink-400); }

/* =============================================================================
   Home page (home/home_view.php)
   ============================================================================= */
.home-h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.04; }
.home-h1 span { display: block; }

/* Top test scores */
.leaders { font-size: 13.5px; }
.leaders > :not(caption) > * > * { padding: .6rem .5rem; vertical-align: middle; }
.leaders > :not(caption) > * > *:first-child { padding-left: 1rem; }
.leaders > :not(caption) > * > *:last-child { padding-right: 1rem; }
@media (min-width: 576px) { .leaders > :not(caption) > * > *:first-child { padding-left: 1.5rem; } .leaders > :not(caption) > * > *:last-child { padding-right: 1.5rem; } }
.leaders .rk { width: 2rem; font-weight: 800; color: var(--ink-400); }
.leaders .tn { font-weight: 700; line-height: 1.25; }
.leaders .tn a { color: var(--ink-900); text-decoration: none; }
.leaders .tn a:hover { color: var(--brand); }
.leaders .sc { width: 8.5rem; }
@media (min-width: 576px) { .leaders .sc { width: 11rem; } }
.scale { position: relative; display: block; padding-top: 1.35rem; }
.scale .val { position: absolute; top: 0; left: clamp(.75rem, var(--x), calc(100% - .75rem)); transform: translateX(-50%); font-size: 17px; font-weight: 800; line-height: 1; color: var(--ink-900); }
.field-comb { display: block; width: 100%; height: 1.1rem; color: var(--ink-300); fill: currentColor; border-bottom: 1px solid var(--ink-200); }
.field-comb .mark { fill: var(--brand); }

/* Driver quotes */
.quote-card { background: #fff; border: 1px solid var(--ink-100); border-radius: 6px; padding: 1rem 1.1rem; }
.quote-card blockquote p { font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.quote-card blockquote p::before { content: "\201C"; }
.quote-card blockquote p::after { content: "\201D"; }

/* Fact line under the hero */
.home-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.home-facts .ic { color: var(--brand); margin-right: .15rem; }

/* A–Z make index */
.az-jump { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; }
.az-jump a { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 3px; background: var(--ink-50); border: 1px solid var(--ink-100); font-size: 12.5px; font-weight: 700; color: var(--ink-700); text-decoration: none; }
.az-jump a:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }
.az-all > summary { display: flex !important; }   /* folded on every screen since 2026-09-25 (letters open it) */
.az-cols { columns: 2 10rem; column-gap: 1.5rem; }
@media (min-width: 768px) {
  .az-cols { columns: 4 10rem; max-height: 26rem; overflow-y: auto; padding-right: .5rem; scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
  .az-cols { mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent); padding-bottom: 1.5rem; }
}
.az-group { break-inside: avoid; margin-bottom: 1rem; scroll-margin-top: 5rem; }
.az-letter { margin: 0 0 .25rem; font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--ink-900); }
.az-group:target .az-letter { text-decoration: underline; text-underline-offset: .2em; }
.az-list { list-style: none; margin: 0; padding: 0; }
.az-list a { display: flex; align-items: baseline; gap: .5rem; padding-block: .15rem; font-size: 13px; color: var(--ink-600); text-decoration: none; }
.az-list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-list .n { margin-left: auto; font-size: 12px; color: var(--ink-500); }
.az-list a:hover { color: var(--brand); }
.az-list a:hover .nm { text-decoration: underline; }

/* How scores are made */
.basis > div { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding-block: .9rem; border-top: 1px solid var(--ink-100); }
.basis dt { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.basis dd { margin: 0; }
.basis dd.num { grid-row: 1 / span 2; grid-column: 2; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ink-900); }
.basis dd.w { font-size: 12.5px; color: var(--ink-500); margin-top: .15rem; }

/* Head-to-head: each side's Relative Score as a bar, tire A blue / tire B orange */
.hh-list { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 992px) { .hh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hh-list .hh-row:nth-child(odd) { border-right: 1px solid var(--ink-100); } }
.hh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--ink-100); color: var(--ink-800); text-decoration: none; transition: background-color .15s; }
.hh-row:hover { background: var(--brand-50); color: var(--ink-900); }
.hh-row .side { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm nm" "bar v"; align-items: center; column-gap: .5rem; row-gap: .35rem; min-width: 0; }
.hh-row .side.a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nm nm" "v bar"; text-align: right; }
.hh-row .nm { grid-area: nm; font-size: 13px; font-weight: 600; line-height: 1.25; }
.hh-row .win .nm { font-weight: 800; }
.hh-row .hh-bar { grid-area: bar; position: relative; height: .5rem; border-radius: 1px; background: var(--ink-50); overflow: hidden; }
.hh-row .hh-bar i { position: absolute; top: 0; bottom: 0; border-radius: 1px; }
.hh-row .hh-bar.a i { right: 0; background: var(--tire-a); }
.hh-row .hh-bar.b i { left: 0; background: var(--tire-b); }
.hh-row .side:not(.win) .hh-bar i { opacity: .45; }
.hh-row .v { grid-area: v; font-size: 13px; font-weight: 800; line-height: 1.1; }
.hh-row .v small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-400); white-space: nowrap; }
.hh-row .vs { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--ink-400); }

/* Guides list */
.guide-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; color: var(--ink-800); text-decoration: none; }
.guide-row + .guide-row { border-top: 1px solid var(--ink-100); }
.guide-row img { width: 6rem; height: 4.25rem; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: #fff; border: 1px solid var(--ink-50); }
.guide-row .title { font-size: 14px; }
.guide-row:hover .title { color: var(--brand); }

/* Home: quieter fact icons and ruled driver quotes */
.home .home-facts .ic { color: var(--ink-400); }
.home .said { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-100); }
.home .said li { padding-block: 1rem; border-bottom: 1px solid var(--ink-100); }
.home .said blockquote p { font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.home .said blockquote p::before { content: "\201C"; }
.home .said blockquote p::after { content: "\201D"; }


/* ---------- Model page: one link language ----------
   Data links (a bolt pattern, a size inside text): ink, bold, quiet underline → brand on hover.
   Action links (Details, +3 older, Pick your year, calculator): brand, semibold, underline on hover. */
:is(.model-page, .year-page) :is(.glance dd, .gen-specs dd, .pcd-table td) a:not(.older) { color: var(--ink-900); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ink-200); text-decoration-thickness: 1px; text-underline-offset: .2em; }
:is(.model-page, .year-page) :is(.glance dd, .gen-specs dd, .pcd-table td) a:not(.older):hover { color: var(--brand); text-decoration-color: currentColor; }
:is(.model-page, .year-page) :is(p, .data-end) a:not(.btn):not(.size-chip), :is(.model-page, .year-page) .older { color: var(--brand); font-weight: 600; text-decoration: none; }
:is(.model-page, .year-page) :is(p, .data-end) a:not(.btn):not(.size-chip):hover, :is(.model-page, .year-page) .older:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Year ranges never break across lines */
.gen-span, .gen-group-head .num, .fact-pcds small, .glance dd.num, .pcd-table td:last-child, .pcd-table th { white-space: nowrap; }

/* ---------- Focus: one designed ring for every interactive element ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(29, 78, 216, .14); }
/* inside clipped containers the ring sits inset so overflow never cuts it */
:where(.gen-more, .year-earlier, details) > summary:focus-visible, .card-twg > :where(a):focus-visible { outline-offset: -3px; box-shadow: none; }
/* Bootstrap resets .btn and .nav-link focus (outline: 0) with more specificity than :where(); restate the ring */
.btn:focus-visible, .seg-tabs .nav-link:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(29, 78, 216, .14); }
/* on dark surfaces the blue ring is too dim (≈2.6:1): white ring instead */
.panel-dark :is(a, button, .btn):focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .18); }

/* ---------- Year page: the money path first, then every trim ---------- */
/* Top block: sizes on the most trims, each with its Amazon action and the best-rated page */
.buy-block { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--ink-200); }
.buy-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); }
.buy-sub { margin: .25rem 0 .75rem; max-width: 36rem; font-size: 13.5px; color: var(--ink-500); }
.buy-mine { margin: 0 0 .5rem; padding: .5rem .75rem; border-radius: 4px; background: var(--ink-50); border: 1px solid var(--ink-200); font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.buy-mine b { color: var(--ink-900); }
.buy-mine p { margin: 0; }
.buy-mine-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .5rem; }
.buy-mine-acts .btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; padding-inline: .7rem; }
.buy-mine-acts .older { margin-left: .25rem; display: inline-flex; align-items: center; gap: .2rem; min-height: 2.25rem; }
.buy-rows { list-style: none; margin: 0; padding: 0; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; padding: .85rem 0; border-top: 1px solid var(--ink-100); }
.buy-size { flex: 1 1 13rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: .15rem; }
.buy-size .sz { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); }
.buy-size .meta { flex-basis: 100%; font-size: 12.5px; color: var(--ink-500); }
/* inline links keep the line compact but get a 44px hit area (padding offset by negative margin) */
.buy-size .best-link, .buy-mine .older { margin-left: auto; min-height: 0; padding-block: .8rem; margin-block: -.8rem; }
.buy-mine p .older { display: inline-block; margin-left: .5rem; white-space: nowrap; }
.buy-size .pill[hidden], .mkt-head .pill[hidden] { display: none; }
.buy-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.btn-buy { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding-inline: 1rem; font-size: 13.5px; }
.best-link { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.5rem; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--brand); text-decoration: none; }
.best-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.buy-more { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .6rem 0 0; font-size: 12.5px; color: var(--ink-500); }
.buy-more .size-chip { height: 2.25rem; }
.buy-note { display: flex; align-items: flex-start; gap: .4rem; margin: .75rem 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-500); }   /* ink-400 was 4.48:1 on paper */
.buy-note .ic { margin-top: .15rem; flex-shrink: 0; }
/* phones: one compact row per size (size + best-rated, a one-line note, then the button with the size in it) */
@media (max-width: 575.98px) {
  .buy-row { gap: .45rem; padding: .6rem 0; }
  .buy-block { margin-top: 1rem; padding-top: .85rem; }
  .buy-mine-acts .lbl { flex-basis: 100%; }
  .buy-mine-acts .older { margin-left: auto; }
  .buy-size .mk { display: none; }
  .buy-acts { flex-basis: 100%; gap: .5rem; }
  .btn-buy { flex: 1 1 100%; min-height: 2.75rem; white-space: normal; text-align: center; }
}
.buy-mine-acts .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.buy-best { margin: .75rem 0 0; }
.buy-best a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-size: 14px; font-weight: 700; color: var(--brand); text-decoration: none; }
.buy-best a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* At a glance */
.fact-gens { display: flex; flex-direction: column; gap: .15rem; font-size: 15px; }
.fact-gens small { font-size: 12px; font-weight: 500; color: var(--ink-500); }
.glance .year-links { margin-top: .35rem; }
.glance .year-links a, .glance .year-links .current { height: 2.25rem; min-width: 3.25rem; font-size: 13px; }
.year-links .current { display: inline-flex; align-items: center; justify-content: center; padding-inline: .4rem; border-radius: 3px; background: var(--ink-900); border: 1px solid var(--ink-900); font-weight: 700; color: #fff; }
.glance dd > .older { display: inline-block; margin-top: .5rem; font-size: 12.5px; }
/* Generation cards: market versions as sub-groups, identical-fitment trims share one row */
.gen-card .gen-pre { font-weight: 600; color: var(--ink-500); }
.mkt-group + .mkt-group { border-top: 1px solid var(--ink-200); }
.mkt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; padding: .65rem 1.25rem .55rem; background: var(--paper); border-bottom: 1px solid var(--ink-100); }
.mkt-head h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.mkt-head .num { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.mkt-group.mine .mkt-head { background: var(--ink-100); }
.mkt-head + details.trim, .gen-card > header + .mkt-group > details.trim:first-child { border-top: 0; }
.trim-name { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.trim-also { font-size: 12.5px; font-weight: 600; color: var(--ink-500); white-space: nowrap; }
details.trim .summary-count { font-size: 12px; }
.size-legend { margin: .6rem 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); max-width: 48rem; }
.size-legend b { color: var(--ink-800); }
.trim-same { margin: 0 0 .6rem; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); }
.trim-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0 0 .75rem; padding: .55rem .8rem; border-radius: 4px; background: rgba(241,245,249,.7); }
.trim-facts > div { display: flex; align-items: baseline; gap: .45rem; }
.trim-facts dt { font-size: 12px; font-weight: 600; color: var(--ink-500); }
.trim-facts dd { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
/* One Amazon action per trim, for its own size; wheels as a quiet link (never blue: blue is navigation) */
.trim-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 0 0 .9rem; }
.wheel-link { display: inline-block; padding-block: .6rem; line-height: 1.35; font-size: 13px; font-weight: 600; color: var(--ink-700); text-decoration: underline; text-decoration-color: var(--ink-300); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.wheel-link:hover { color: var(--ink-900); text-decoration-color: currentColor; }
.wheel-link .ic { margin-left: .15rem; color: var(--ink-400); vertical-align: -.1em; }
@media (max-width: 575.98px) { .trim-buy .btn-buy { width: 100%; } }
/* Phones: each fitment row stacks (size + pressure, then rim and bolt pattern): nothing hides off-screen */
@media (max-width: 575.98px) {
  .trim .table-responsive { overflow: visible; }
  .fit-table, .fit-table tbody { display: block; }
  .fit-table thead { display: none; }
  .fit-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .1rem; padding: .55rem 1rem; }
  .fit-table tbody.striped tr { background: rgba(241,245,249,.45); }
  .fit-table tbody.striped td { background: transparent; }
  .fit-table td { display: block; padding: 0 !important; white-space: normal; box-shadow: none; }
  .fit-table td:nth-last-child(3) { grid-column: 1; grid-row: 1; }
  .fit-table td:last-child { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .fit-table td:nth-last-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--ink-500); }
  .fit-table td:nth-last-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .fit-table td:nth-last-child(4):empty { display: none; }
  .fit-table td small { display: inline; color: var(--ink-500); font-weight: 500; }
  .fit-table td em { display: inline; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-400); }
}
/* Glossary: only the terms this page uses, folded next to the tables */
.glossary { border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.glossary > summary { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.1rem; font-size: 14px; font-weight: 700; color: var(--ink-900); cursor: pointer; list-style: none; }
.glossary > summary::-webkit-details-marker { display: none; }
.glossary > summary .chev { margin-left: auto; transition: transform .2s; }
.glossary[open] > summary .chev { transform: rotate(180deg); }
.glossary dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem 2rem; margin: 0; padding: 0 1.1rem 1.1rem; }
@media (min-width: 768px) { .glossary dl { grid-template-columns: 1fr 1fr; } }
.glossary dt { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.glossary dd { margin: .2rem 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-600); }

/* Jump to market version: the same row for everyone; twg.js tints the visitor's chip */
.mkt-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1.25rem; }
.mkt-jump .lbl { margin-right: .25rem; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.mkt-jump .chip { height: 2.5rem; gap: .4rem; font-size: 13px; }
.mkt-jump .chip .n { font-weight: 500; color: var(--ink-500); }
.mkt-jump .chip.mine { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); color: var(--ink-900); font-weight: 700; }
.mkt-jump .chip.mine .n { color: var(--ink-700); }
/* anchors land below the sticky header via html's scroll-padding-top; the landed group is marked briefly */
.mkt-group:target > .mkt-head { background: #fffbeb; transition: background-color .6s; }
/* touch: 44px targets for the small links and chips on coarse pointers */
@media (pointer: coarse) {
  .wheel-link, .buy-mine-acts .btn, .btn-buy { min-height: 2.75rem; }
  .mkt-jump .chip, .glance .year-links a, .glance .year-links .current, .buy-more .size-chip { height: 2.75rem; }
  .glance dd > .older { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .glance dd a:not(.older) { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
  .trim-tools .form-control, .trim-tools [data-expand-all] { height: 2.75rem !important; }
  .trim-tools .seg-tabs .nav-link { min-height: 2.75rem; }
}

/* ---------- Calculator: the verdict leads straight into the new size's tires ---------- */
.calc-buy { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.calc-fit { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: .15rem; margin: 0 0 .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
.calc-fit a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; font-size: 14px; font-weight: 700; color: var(--brand); text-decoration: none; }
.calc-fit a:hover { text-decoration: underline; text-underline-offset: .2em; }
.calc-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.calc-buy-size { flex: 1 1 10rem; margin: 0; font-size: 13px; color: var(--ink-500); }
.calc-buy-size b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); }
.calc-buy-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.calc-buy .buy-note { margin-top: .6rem; }
@media (max-width: 575.98px) {
  .calc-buy-acts { flex-basis: 100%; }
  .calc-buy-acts .btn-buy { flex: 1 1 100%; }
}
/* Verdict facts, and consequence colours: differences stay neutral ink; only rows the verdict names are coloured */
.v-facts { margin: .5rem 0 0; padding-left: 1.1rem; font-size: 13px; font-weight: 600; line-height: 1.5; }
.v-facts li + li { margin-top: .15rem; }
.calc-table .dcell { color: var(--ink-700); }
.calc-table tr.f-warn .dcell { color: #b45309; }
.calc-table tr.f-bad .dcell { color: #be123c; }
.s-info { color: var(--ink-600); } .s-warn { color: #b45309; } .s-bad { color: #be123c; }
.calc-hint { display: none; margin: .6rem 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-500); }
.calc-inputs:has([data-mode="metric"]) ~ .calc-hint-metric, .calc-inputs:has([data-mode="flotation"]) ~ .calc-hint-flot { display: block; }
.calc-example { margin: .75rem 0 0; font-size: 13.5px; color: var(--ink-600); }
/* ---------- Calculator: start from your car (make → model → year → factory size chips) ---------- */
.calc-car { margin-top: 1rem; max-width: 46rem; }
.calc-car > summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-size: 14px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; }
.calc-car > summary::-webkit-details-marker { display: none; }
.calc-car > summary b { color: var(--ink-900); }
.calc-car > summary .chev { transition: transform .2s; }
.calc-car[open] > summary .chev { transform: rotate(180deg); }
.calc-car-hint { font-weight: 500; color: var(--ink-500); }
.calc-car-body { padding: .25rem 0 .5rem; }
.calc-car-sel { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) 6.5rem; grid-template-areas: "make make" "model year"; }
.calc-car-sel .car-make { grid-area: make; } .calc-car-sel .car-model { grid-area: model; } .calc-car-sel .car-year { grid-area: year; }
@media (min-width: 576px) { .calc-car-sel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 7.5rem; grid-template-areas: "make model year"; } }
.car-group { margin-top: 1rem; }
.car-h { margin: 0 0 .5rem; font-size: 13px; font-weight: 700; color: var(--ink-800); }
.car-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .car-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.car-chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 2.75rem; padding: .375rem .75rem; border: 1px solid var(--ink-200); border-radius: 6px; background: #fff; color: var(--ink-900); text-align: left; line-height: 1.2; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.car-chip b { font-size: 14px; font-weight: 700; }
.car-chip small { margin-top: .15rem; font-size: 12px; font-weight: 500; color: var(--ink-500); }
.car-chip:hover { border-color: var(--ink-400); }
.car-g-a .car-chip[aria-pressed="true"] { border-color: var(--tire-a); background: var(--tire-a-soft); box-shadow: inset 0 0 0 1px var(--tire-a); }
.car-g-a .car-chip[aria-pressed="true"] b { color: var(--tire-a-ink); }
.car-g-b .car-chip[aria-pressed="true"] { border-color: var(--tire-b); background: var(--tire-b-soft); box-shadow: inset 0 0 0 1px var(--tire-b); }
.car-g-b .car-chip[aria-pressed="true"] b { color: var(--tire-b-ink); }
.car-chip[aria-pressed="true"] small { color: var(--ink-600); }
.car-chip .d-out { color: #be123c; font-weight: 600; }                 /* past the 3% rule: the verdict's red */
.car-more { min-height: 2.75rem; padding-inline: .75rem; border: 1px dashed var(--ink-200); border-radius: 6px; background: transparent; font-size: 13px; font-weight: 600; color: var(--brand); }
.car-more:hover { border-color: var(--brand); }
.car-msg { margin: .85rem 0 0; font-size: 13.5px; color: var(--ink-600); }
.car-msg a, .car-result a, .car-foot a { font-weight: 600; color: var(--brand); text-decoration: none; }
.car-msg a:hover, .car-result a:hover, .car-foot a:hover { text-decoration: underline; text-underline-offset: .2em; }
.car-retry { margin-left: .25rem; padding: 0; border: 0; background: none; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.car-result { margin: .75rem 0 0; font-size: 13.5px; color: var(--ink-700); }
.car-result b { color: var(--ink-900); }
.car-result a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
.car-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin: .75rem 0 0; font-size: 13.5px; }
.car-foot a, .car-forget { display: inline-flex; align-items: center; min-height: 2.75rem; }
.car-forget { padding: 0; border: 0; background: none; font-size: 13px; color: var(--ink-500); text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: .2em; }
.car-forget:hover { color: var(--ink-800); }
/* ---------- Calculator on every screen ---------- */
.calc-intro { margin: .75rem 0 0; font-size: 15px; max-width: 42rem; }
.calc-side .seg-tabs { padding: .125rem; background: rgba(255,255,255,.7); }
.calc-side .seg-tabs .nav-link { height: 1.75rem; }
.calc-aside { width: 100%; }
@media (min-width: 992px) { .calc-aside { width: 320px; } }
/* phones: inputs compact, the swap floats over the join, results start right under them */
@media (max-width: 575.98px) {
  .calc-intro { font-size: 14px; }
  .calc-inputs { gap: .5rem; margin-top: 1rem !important; }
  .calc-swap { position: relative; z-index: 2; margin-block: -1.25rem; }
  .calc-side > header { padding-block: .5rem !important; }
  .calc-side > .p-4 { padding: .75rem 1rem 1rem !important; }
  .verdict { padding: .9rem 1rem !important; }
  .calc-intro.is-pair { display: none; }                 /* the H1 already names the pair */
  .v-safe [data-vb] { display: none; }                   /* reassurance only; the title and facts carry the decision */
  .calc-buy { padding: .75rem .85rem; }
  .calc-buy-size { display: none; }                      /* the size is in the button */
  .calc-table tr { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
  .calc-table td:nth-child(1) { grid-column: 1 / 4; }
  /* the table stacks: name with its change on one line, "old → new" under it; no hidden columns */
  [data-results] .table-responsive { overflow: visible; }
  .calc-table, .calc-table tbody { display: block; }
  .calc-table thead { display: none; }
  .calc-table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; column-gap: .6rem; row-gap: .1rem; align-items: baseline; padding: .6rem 1rem; border-top: 1px solid var(--ink-100); }
  .calc-table tr:first-child { border-top: 0; }
  .calc-table td { display: block; padding: 0 !important; border: 0; background: transparent !important; white-space: nowrap; min-width: 0; }
  .calc-table td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; white-space: normal; font-size: 13.5px; }
  .calc-table td:nth-child(4) { grid-column: 4; grid-row: 1; }
  .calc-table td:nth-child(5) { grid-column: 5; grid-row: 1; }
  .calc-table td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left !important; font-size: 13px; color: var(--ink-500) !important; }
  .calc-table td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: left !important; font-size: 13px; font-weight: 700; color: var(--ink-900) !important; }
  .calc-table td:nth-child(3)::before { content: "→ "; color: var(--ink-400); }
  .calc-table tr[data-row="clear"] td:nth-child(2), .calc-table tr[data-row="clear"] td:nth-child(3) { display: none; }
  .calc-table tr[data-row="clear"] td:nth-child(4) { grid-column: 4 / 6; }
}
@media (pointer: coarse) {
  .calc-side .seg-tabs .nav-link { height: 2.75rem; }
  [data-speed] { height: 2.75rem; }
  .calc-swap { width: 2.75rem; height: 2.75rem; }
  .calc-buy .best-link, .calc-fit a { min-height: 2.75rem; }
}
/* Calculator hardening: second units, stale results, focus on selects and the slider */
.calc-table small.alt { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-500); }
.alt-speed { margin-top: .2rem; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.calc-invalid { display: flex; align-items: flex-start; gap: .45rem; margin: .75rem 0 0; padding: .6rem .8rem; border-radius: 4px; background: #fff1f2; border: 1px solid #fecdd3; font-size: 13.5px; font-weight: 600; color: #881337; }
.calc-invalid .ic { margin-top: .15rem; flex-shrink: 0; color: #be123c; }
[data-results].is-stale { opacity: .45; }
.form-select:focus-visible, .form-range:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
fieldset.calc-side { min-width: 0; }
@media (max-width: 575.98px) {
  .calc-table small.alt { display: inline; margin-left: .3rem; }
}
/* Calculator polish: reading measure, one-line speedometer labels */
.calc-intro { max-width: 36rem; }
[data-vb] { max-width: 62ch; }
[data-results] ~ section .prose p { max-width: 68ch; }
.speedo-lbl { margin-bottom: .25rem; font-size: 12.5px; font-weight: 500; color: var(--ink-500); white-space: nowrap; }

/* ---------- Compare: the answer bar (who leads, one Amazon action, your size) ---------- */
.cmp-answer { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.cmp-lead { margin: 0 0 .65rem; font-size: 16px; line-height: 1.4; color: var(--ink-800); }
.cmp-lead b { font-weight: 800; }
.cmp-lead .pill { vertical-align: 2px; }
.cmp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.cmp-acts .btn-buy .nm { font-weight: 800; }
.cmp-other { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.5rem; font-size: 13.5px; font-weight: 600; color: var(--ink-700); text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: .2em; }
.cmp-other:hover { color: var(--ink-900); text-decoration-color: currentColor; }
.cmp-other .ic { color: var(--ink-400); }
.cmp-size { margin-top: .65rem; border-top: 1px solid var(--ink-100); padding-top: .5rem; }
.cmp-size > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; font-size: 13.5px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; }
.cmp-size > summary::-webkit-details-marker { display: none; }
.cmp-size > summary b { color: var(--ink-900); }
.cmp-size > summary .chev { transition: transform .2s; }
.cmp-size[open] > summary .chev { transform: rotate(180deg); }
.cmp-size-body { max-width: 26rem; padding: .25rem 0 .25rem; }
.cmp-size-body .form-select { height: 2.75rem; font-size: 16px; font-weight: 700; }
.cmp-size-hint { margin: .5rem 0 0; font-size: 12.5px; color: var(--ink-500); }
.cmp-size-clear { margin-left: .5rem; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: .2em; min-height: 2rem; }
.cmp-answer .buy-note { margin-top: .5rem; }
/* ---------- Tire review: the answer block under the H1 (score, amber buy, your size) ---------- */
.rv-answer { max-width: 40rem; }
.rv-score { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; }
.rv-score .ring { flex-shrink: 0; }
.rv-score-l { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-800); }
.rv-score-l span { font-weight: 500; color: var(--ink-500); }
.rv-score .duel-split { margin-top: .2rem; }
.sz-pick { margin: .1rem 0 0; font-size: 17px; font-weight: 800; line-height: 1.25; }
.sz-pick a { color: var(--ink-900); text-decoration: none; }
.sz-pick a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.sz-answer .duel-split { margin-top: .15rem; }
.rv-how { display: inline-block; margin-top: .2rem; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--brand); text-decoration: underline; text-decoration-color: rgba(29,78,216,.35); text-underline-offset: .2em; }
.rv-how:hover { text-decoration-color: currentColor; }
/* review: neutral status surfaces (amber belongs to the buy button) */
.rv-notice { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .75rem; padding: .55rem .8rem; border: 1px solid var(--ink-200); border-radius: 6px; background: var(--ink-50); font-size: 14px; color: var(--ink-800); }
.rv-notice .ic { margin-top: .2rem; flex-shrink: 0; color: var(--ink-500); }
.rv-mood { max-width: 40rem; margin-top: 1rem; padding: .6rem .9rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.rv-mood-l { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; font-weight: 700; color: var(--ink-700); }
.rv-mood-l .ic { color: var(--ink-500); }
.rv-again { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .5rem .8rem; border: 1px solid var(--pos-line); border-radius: 6px; background: var(--pos-bg); color: var(--pos-ink); }
.dot-pro { background: var(--pos); } .dot-con { background: var(--neg); } .dot-note { background: var(--ink-300); }
.score-cap { margin: -.35rem 0 .9rem; font-size: 12.5px; line-height: 1.45; color: var(--ink-500); }
.how-scores { max-width: 48rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.how-scores > summary { display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem; font-size: 14px; font-weight: 600; color: var(--ink-800); cursor: pointer; list-style: none; }
.how-scores > summary::-webkit-details-marker { display: none; }
.how-scores > summary .chev { margin-left: auto; transition: transform .2s; }
.how-scores[open] > summary .chev { transform: rotate(180deg); }
.how-scores dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .5rem 1.25rem; margin: 0; padding: .25rem 1rem 1rem; font-size: 13.5px; line-height: 1.5; }
.how-scores dt { font-weight: 700; color: var(--ink-800); }
.how-scores dd { margin: 0; color: var(--ink-600); }
@media (max-width: 575.98px) { .how-scores dl { grid-template-columns: 1fr; gap: .15rem; } .how-scores dd { margin-bottom: .6rem; } }
@media (max-width: 575.98px) {
  /* one text flow when the label wraps (a flex button would split it into ragged columns) */
  .cmp-acts .btn-buy { display: block; flex: 1 1 100%; min-height: 2.75rem; padding-block: .6rem; white-space: normal; text-align: center; line-height: 1.35; }
  .cmp-acts .btn-buy .ic { vertical-align: -.15em; margin-right: .2rem; }
}
/* the sticky bar: a readable score chip (white on tire colour at AA), a one-line Amazon button */
.sticky-score { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 999px; font-size: 14px; font-weight: 800; color: #fff; }
.sticky-buy { height: 2.5rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
@media (max-width: 767.98px) { body:has(.sticky-cta.show) .site-footer { padding-bottom: 6.5rem; } }
@media (pointer: coarse) { .cmp-size > summary, .cmp-other, .cmp-size-clear { min-height: 2.75rem; } }
/* Compare hardening: sliders that change nothing say so; targets for touch; the skip link over the sticky header */
.w-off .form-range { opacity: .45; }
.w-off-note { margin: .35rem 0 0; font-size: 12px; color: var(--ink-500); }
.w-reset { min-height: 2.5rem; padding-inline: .5rem; }
.skip-link:focus { z-index: 1100; }
@media (pointer: coarse) {
  details > summary.fw-semibold.text-brand { min-height: 2.75rem; }
  .w-reset { min-height: 2.75rem; }
  .chipnav .chip { height: 2.75rem; }
  [data-tests] .btn-sm, .sticky-buy { min-height: 2.75rem; }
  /* standalone text links in the duel blocks: 44px hit area without moving the layout */
  .duel-brand, .duel-quote footer a { display: inline-block; padding-block: .8rem; margin-block: -.8rem; }
  .duel-name a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
}

/* ---------- Compare, distilled: evidence-first duel blocks, one head-to-head list ---------- */
.duel-pair { display: grid; gap: .75rem; }
@media (min-width: 768px) { .duel-pair { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.duel { position: relative; padding: .9rem 1rem 1rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.duel::before { content: ""; position: absolute; top: -1px; left: 1rem; right: 1rem; height: 3px; border-radius: 0 0 3px 3px; }
.duel-a::before { background: var(--tire-a); } .duel-b::before { background: var(--tire-b); }
.duel-head { display: flex; align-items: center; gap: .85rem; }
.duel-thumb { flex-shrink: 0; width: 72px; height: 72px; object-fit: contain; border-radius: 4px; background: var(--paper); border: 1px solid var(--ink-100); }
.duel-thumb.empty { display: grid; place-items: center; color: var(--ink-300); font-size: 22px; }
.duel-brand { font-size: 12.5px; font-weight: 600; color: var(--ink-500); text-decoration: none; }
.duel-brand:hover { color: var(--brand); }
.duel-name { margin: .25rem 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.duel-name a { color: var(--ink-900); text-decoration: none; }
.duel-name a:hover { color: var(--brand); }
.duel-cat { margin: .1rem 0 0; font-size: 12.5px; color: var(--ink-500); }
.duel-split { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .75rem 0 0; font-size: 13px; color: var(--ink-600); }
.duel-split b { font-size: 15px; color: var(--ink-900); }
.duel-split small { font-size: 12px; color: var(--ink-500); }
.duel-evidence { display: flex; align-items: flex-start; gap: .4rem; margin: .5rem 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-700); }
.duel-evidence .ic { margin-top: .15rem; flex-shrink: 0; color: var(--ink-400); }
.duel-quote { margin: .65rem 0 0; padding: .55rem .75rem; border-radius: 4px; background: var(--paper); border: 1px solid var(--ink-100); }
.duel-quote p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-800); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.duel-quote footer { margin-top: .3rem; font-size: 12px; color: var(--ink-500); }
.duel-quote footer a { font-weight: 600; }
/* one head-to-head row per category: A bar (right-aligned) | category + difference | B bar */
.h2h { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.h2h-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.5rem, auto) minmax(0, 1fr); align-items: center; column-gap: .75rem; padding: .7rem 1rem; }
.h2h-row + .h2h-row { border-top: 1px solid var(--ink-100); }
.h2h-side { display: flex; align-items: center; gap: .5rem; }
.h2h-side .bar { flex: 1; }
.h2h-side.a .bar { transform: scaleX(-1); }            /* A grows leftwards from the middle */
.h2h-side .v { width: 2.2rem; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.h2h-side.a .v { text-align: right; }
.h2h-side.lose .bar { opacity: .45; }
.h2h-side.lose .v { font-weight: 600; color: var(--ink-500); }
.h2h-mid { text-align: center; }
.h2h-mid h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.h2h-diff { display: block; font-size: 12px; font-weight: 700; color: var(--ink-500); }
.h2h-why { grid-column: 1 / -1; margin-top: .35rem; text-align: center; }
.h2h-why > summary { display: inline-flex; align-items: center; gap: .25rem; min-height: 2rem; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; }
.h2h-why > summary::-webkit-details-marker { display: none; }
.h2h-why[open] > summary .chev { transform: rotate(180deg); }
.h2h-why .table-responsive { margin-top: .5rem; text-align: left; }
@media (max-width: 575.98px) {
  .h2h-row { grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr); column-gap: .5rem; padding: .65rem .75rem; }
  .h2h-mid h3 { font-size: 13px; }
  /* the colour and the bold score already say who leads; the name stays for screen readers */
  .h2h-diff .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.glance-fold > summary { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.5rem; font-size: 14px; font-weight: 700; color: var(--ink-900); cursor: pointer; list-style: none; }
.glance-fold > summary::-webkit-details-marker { display: none; }
.glance-fold[open] > summary .chev { transform: rotate(180deg); }
/* pros / cons: the top three of each, side by side */
.pc-card { padding: 1rem 1.1rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.pc-name { margin: 0 0 .5rem; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.pc-h { margin: .75rem 0 .35rem; font-size: 12.5px; font-weight: 700; color: var(--ink-500); }
.pc-list { margin: 0; padding-left: 1.1rem; font-size: 13.5px; line-height: 1.45; color: var(--ink-700); }
.pc-list li + li { margin-top: .3rem; }
.pc-pro li::marker { color: #047857; } .pc-con li::marker { color: #be123c; }
.pc-more { display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem; min-height: 2.5rem; font-size: 13px; font-weight: 600; }
@media (pointer: coarse) { .h2h-why > summary, .glance-fold > summary, .pc-more { min-height: 2.75rem; } }
/* Community buzz on the compare page: a neutral card (the amber-cream tint gave amber a fourth job) */
.buzz-card { padding: 1.25rem; border: 1px solid var(--ink-100); border-radius: 6px; background: var(--paper); }

/* ---------- Tire reviews: brand hub + index (ranked rows, compact model list, search) ---------- */
.hub-facts { margin: .75rem 0 0; font-size: 13.5px; color: var(--ink-500); }
.hub-facts b { color: var(--ink-800); font-weight: 700; }
.best-groups { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 992px) { .best-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.best-h { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: 15px; font-weight: 800; color: var(--ink-900); }
.best-h .ic { color: var(--ink-500); }
.best-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
.best-row { display: grid; grid-template-columns: 1.25rem 3.5rem minmax(0, 1fr) auto; grid-template-areas: "rank thumb main score" ". . buy buy"; align-items: center; column-gap: .75rem; row-gap: .5rem; padding: .75rem .9rem; }
.best-row + .best-row { border-top: 1px solid var(--ink-100); }
.best-rank { grid-area: rank; font-size: 13px; font-weight: 800; color: var(--ink-500); text-align: center; }
.best-thumb { grid-area: thumb; width: 3.5rem; height: 3.5rem; object-fit: contain; border: 1px solid var(--ink-100); border-radius: 4px; background: #fff; padding: .2rem; }
.best-thumb.empty { display: grid; place-items: center; color: var(--ink-300); background: var(--ink-50); }
.best-main { grid-area: main; min-width: 0; }
.best-name { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink-900); text-decoration: none; }
.best-name:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.best-meta { margin: .15rem 0 0; font-size: 12.5px; color: var(--ink-500); }
.best-score { grid-area: score; display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding-inline: .3rem; border-radius: 4px; background: var(--ink-900); color: #fff; font-size: 13px; font-weight: 800; }
.best-buy { grid-area: buy; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.75rem; white-space: nowrap; }
@media (max-width: 767.98px) {   /* phones: the buy spans the row (a size-labelled button would overflow the text column) */
  .best-row { grid-template-areas: "rank thumb main score" "buy buy buy buy"; }
  .best-buy { justify-self: stretch; white-space: normal; text-align: center; }
}
@media (min-width: 768px) {
  .best-row { grid-template-columns: 1.25rem 3.5rem minmax(0, 1fr) auto auto; grid-template-areas: "rank thumb main score buy"; }
  .best-buy { min-height: 2.25rem; }
}
.ml-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.ml-chips { flex: 1 1 20rem; min-width: 0; }
.ml-sort { flex: 0 0 13rem; }
.ml-find { flex: 1 1 14rem; max-width: 22rem; }
@media (max-width: 767.98px) { .ml-find { order: -1; flex-basis: 100%; max-width: none; } }   /* phones: the search before ~500px of chips */
.ml-find .ic { width: 1rem; height: 1rem; }
.ml-empty { padding: 1rem 0; }
.model-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; }
@media (min-width: 768px) { .model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; padding-inline: .9rem; } }
.model-list li { border-top: 1px solid var(--ink-100); }
.model-list li:first-child { border-top: 0; }
@media (min-width: 768px) { .model-list li:nth-child(2) { border-top: 0; } }
.ml-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .5rem .9rem; color: var(--ink-900); text-decoration: none; }
@media (min-width: 768px) { .ml-row { padding-inline: 0; } }
.ml-row:hover .ml-name { color: var(--brand); }
.ml-name { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.ml-name small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-500); }
.ml-score { flex-shrink: 0; min-width: 2rem; text-align: right; font-size: 15px; font-weight: 800; }
.ml-score.none { color: var(--ink-300); }
.ml-all { margin-top: 1rem; min-height: 2.75rem; }
.tire-search { max-width: 40rem; }
.search-results { margin-top: .75rem; padding: .5rem 0; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; box-shadow: var(--shadow-card, 0 1px 2px rgba(15,23,42,.06)); }
.search-results .sr-h { margin: .4rem .9rem .2rem; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: .35rem .9rem; color: var(--ink-900); text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--ink-50); }
.search-results b { display: block; font-size: 14px; }
.search-results small { display: block; font-size: 12.5px; color: var(--ink-500); }
.pop-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 576px) { .pop-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .pop-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pop-brand { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.25rem; padding: .55rem .9rem; border: 1px solid var(--ink-100); border-radius: 6px; background: #fff; color: var(--ink-900); text-decoration: none; }
.pop-brand:hover { border-color: var(--ink-300); }
.pop-brand b { display: block; font-size: 14.5px; }
.pop-brand small { display: block; font-size: 12.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* /tires/ brand A–Z (was .az-list, which collided with the home page's make index) */
.brand-az { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
@media (min-width: 768px) { .brand-az { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .brand-az { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.az-brand { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; border-bottom: 1px solid var(--ink-100); font-size: 14px; font-weight: 600; color: var(--ink-900); text-decoration: none; }
.az-brand:hover { color: var(--brand); }
.az-brand small { font-size: 12.5px; font-weight: 500; color: var(--ink-500); }
.seg-tabs[data-tabs] .nav-link { white-space: nowrap; }
@media (max-width: 575.98px) { .seg-tabs[data-tabs] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg-tabs[data-tabs] .nav-link { min-height: 2.75rem; justify-content: center; } }
/* ---------- Tire reviews on phones and touch ---------- */
.ml-chips { flex-wrap: wrap; overflow: visible; padding-block: 0; }          /* six seasons wrap instead of scrolling off-screen */
.test-card > summary { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; }   /* the chevron stays beside its title */
.test-card > summary > .rank, .test-card > summary > .small { grid-column: 2; justify-self: start; }
@media (min-width: 576px) { .test-card > summary { grid-template-columns: auto minmax(0, 1fr) auto; } .test-card > summary > .rank, .test-card > summary > .small { grid-column: 3; } }
.rv-mood .tag, #community .tag { padding: 0; border: 0; background: none; color: var(--ink-600); }   /* themes are words, not buttons */
@media (pointer: coarse) {
  .rv-buzz-link, .rv-how { display: inline-flex; align-items: center; min-height: 2.75rem; }
  #scores .seg-tabs .nav-link, .ml-chips .chip { min-height: 2.75rem; height: auto; }
  td .btn-amz { min-height: 2.75rem; }
  .site-nav-toggle { min-width: 2.75rem; min-height: 2.75rem; }
  .best-name { padding-block: .8rem; margin-block: -.8rem; }                 /* 44px hit area, same layout */
  .best-buy, .seg-tabs[data-tabs] .nav-link, .vs-row { min-height: 2.75rem; }
  .more-link, td a.text-reset { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
/* size page: ranked rows per season */
.sz-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.best-metric { font-weight: 700; color: var(--ink-800); }