/* Moto2Ride design v2 - "Instrument cluster": the SHARED part.
   Only rules that can match the static SEO pages too (colour tokens, base, header, footer, buttons, list marks ...).
   The SEO pages get this file inside css/seo-bundle.css (built by tools/build-dist.mjs); the finder pages link it as it is.
   Rules that match only the finder live in css/finder-v2.css, so a finder edit does not change the 12k SEO pages.
   Put a new rule here only if a SEO page needs it; tools/test-seo.mjs (tools/css-split.mjs) fails a rule in the wrong file.
   Fonts: Archivo (variable width) + JetBrains Mono (only when ?design=v2 turns the v3 layer off). */

:root {
  color-scheme: light dark;

  /* surfaces */
  --bg: #eeece6;
  --panel: #ffffff;
  --panel-2: #f5f4ef;
  --ink: #121418;
  --ink-2: #2b2f36;
  --muted: #555b65;
  --line: #dedbd2;
  --line-strong: #b9b5aa;

  /* accent: instrument amber (fill) + a darker amber for text on light surfaces */
  --accent: #ffb81c;
  --accent-hover: #ffc847;
  --accent-ink: #121418;
  --accent-text: #8a5300;
  --accent-soft: #fff1cf;
  --redline: #d93025;

  /* verdicts */
  --good: #17704a;
  --good-soft: #e1f2e8;
  --ok: #24539e;
  --ok-soft: #e4ecf8;
  --care: #855300;
  --care-soft: #fbefd6;
  --exp: #b3241b;
  --exp-soft: #fbe6e3;

  /* always-dark header, hero, footer */
  --night: #0f1114;
  --night-2: #1a1d22;
  --night-line: #2c3038;
  --night-ink: #f3f1ec;
  --night-muted: #a7acb5;
  --night-accent: #ffbe2e;

  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink), 0 0 0 7px var(--accent);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 0 rgba(18, 20, 24, .04), 0 10px 30px -18px rgba(18, 20, 24, .35);

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8f98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e11;
    --panel: #15181d;
    --panel-2: #1c2026;
    --ink: #eeece7;
    --ink-2: #d2d0cb;
    --muted: #9ea4ae;
    --line: #262a31;
    --line-strong: #3b4049;

    --accent: #ffbe2e;
    --accent-hover: #ffcc5c;
    --accent-ink: #121418;
    --accent-text: #ffc443;
    --accent-soft: #2a2210;
    --redline: #ff5a4e;

    --good: #55cc93;
    --good-soft: #13291f;
    --ok: #82adf2;
    --ok-soft: #152238;
    --care: #eab352;
    --care-soft: #2c2310;
    --exp: #ff7b70;
    --exp-soft: #351714;

    --night: #08090b;
    --night-2: #15181d;
    --night-line: #262a31;
    --shadow: 0 1px 0 rgba(0, 0, 0, .5);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Headings break into even lines and paragraphs avoid a lone last word (browsers without support just ignore it). */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Safety net: on phones overflow-x on body alone does not stop Chrome from widening the page when something sticks
   out. clip (not hidden) on both, so body never becomes a scroll container and the sticky header keeps working. */
html { overflow-x: clip; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a { color: inherit; }

/* ---------- header ---------- */
.top {
  background: var(--night); color: var(--night-ink);
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--night-line);
}
.top-in { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
.logo {
  display: flex; align-items: center; gap: 10px; color: var(--night-ink); text-decoration: none;
  font: 800 21px/1 var(--display); font-stretch: 118%; letter-spacing: .01em; text-transform: uppercase;
}
.logo b { color: var(--night-accent); font-weight: 800; }
.logo svg { width: 32px; height: 32px; flex: none; }
.logo { flex: none; }
.logo svg .bg { fill: var(--night-accent); }
.logo svg .s { fill: none; stroke: #121418; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.logo svg .f { fill: #121418; }
.logo:focus-visible { --panel: var(--night); --ink: var(--night-ink); }

/* ---------- hero ---------- */
.lead { max-width: 600px; color: var(--night-muted); font-size: 18px; line-height: 1.6; margin: 0 0 32px; }

.cta, .go {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius-sm); padding: 16px 24px;
  font: 800 17px/1 var(--display); font-stretch: 112%; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.cta { background: var(--night-accent); }
.cta:hover, .go:hover { background: var(--accent-hover); }
.cta:active, .go:active { transform: translateY(1px); }
.cta:focus-visible { --panel: var(--night); --ink: var(--night-ink); }

/* ---------- compare two models: "A vs B" search fields (finder hero, compare hub, model pages) ---------- */
.vs-box { margin: 28px 0 0; max-width: 760px; }
.vs-h { font: 800 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 10px; }
.vs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.vs-x { font: 800 18px/1 var(--display); text-transform: uppercase; color: var(--accent-text); padding-top: 15px; }
.vs-in {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); font: 500 16px var(--text); transition: border-color .12s;
}
.vs-in:hover { border-color: var(--ink); }
.vs-in::placeholder { color: var(--muted); opacity: 1; }
.vs-chip { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 4px 4px 14px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); }
.vs-chip[hidden] { display: none; }
.vs-fix { padding-right: 14px; } /* the page's own model on a model page: no remove button */
.vs-name { flex: 1; min-width: 0; line-height: 1.2; padding: 4px 0; }
.vs-name b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.vs-name small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.vs-del { flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; }
.vs-del:hover { color: var(--ink); }
.vs-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.pick-list { scroll-margin-bottom: 96px; }
.picker { position: relative; max-width: 560px; }
.pick-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 340px; overflow-y: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.pick-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.pick-list li small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.pick-list li.act, .pick-list li[data-pick]:hover { background: var(--accent-soft); }
.pick-list .pick-none { cursor: default; color: var(--muted); font-size: 14px; }
.pick-n { font-weight: 700; }
@media (max-width: 560px) {
  .vs-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vs-x { padding: 0; font-size: 15px; }
}

/* ---------- results ---------- */
/* shared-by-order: must stay before .foot p */
.card-title p { margin: 4px 0 0; color: var(--muted); font: 500 13px/1.35 var(--text); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 24px; }
.plus li::before { content: "+"; color: var(--good); background: var(--good-soft); }
.minus li::before { content: "!"; color: var(--care); background: var(--care-soft); }
.check li::before { content: "\2713"; color: var(--accent-ink); background: var(--accent); }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--night-muted); font-size: 13px; padding: 28px 0 32px; border-top: 3px solid var(--night-accent); }
.foot p { margin: 0; max-width: 760px; }
.foot .contact { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot .contact a { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; text-decoration: none; }
.foot .contact a:hover, .foot .contact a:focus-visible { color: #fff; text-decoration: underline; }
.foot .contact svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot .contact svg.brand { fill: currentColor; stroke: none; }
.foot .copy { margin-top: 10px; font-size: 12px; letter-spacing: .04em; opacity: .85; }
.foot .copy a { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.foot .copy a:hover, .foot .copy a:focus-visible { opacity: 1; color: #fff; }
/* language versions: plain links (robots follow them), the current one without a link */
.foot .langs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 14px; }
.foot .langs a { color: inherit; text-decoration: none; }
.foot .langs a:not([aria-current]):hover, .foot .langs a:not([aria-current]):focus-visible { color: #fff; text-decoration: underline; }
.foot .langs [aria-current] { color: var(--night-ink); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .lead { font-size: 16px; }
  .logo { font-size: 18px; }
}
@media (max-width: 720px), (pointer: coarse) {
  .foot .langs a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 420px) {
  .logo svg { width: 28px; height: 28px; }
}
@media (max-width: 400px) {
  .top-in { gap: 8px; }
  .logo { font-size: 16px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
}

/* ---------- empty search and loosened search ---------- */
@media (max-width: 600px) {
  /* Hero examples: full-width rows, so the chips line up instead of leaving a ragged right edge. */
  .cta { display: flex; justify-content: center; }
}