/* Moto2Ride design v3 - finder-only rules, loaded after css/style-v3.css on the finder pages (index.html, /<lang>/).
   Everything here matches no element of a static SEO page, so the SEO pages do not download it and an edit here
   does not change their HTML or CSS. New finder rules go here; a rule that also styles the header, footer or other
   markup of the SEO pages belongs in css/style-v3.css. ?design=v2 turns this file off together with style-v3.css.
   tools/test-seo.mjs checks both files (tools/css-split.mjs). */

/* ---------- browser surfaces ---------- */
input, textarea { caret-color: var(--accent-text); }
.stats b, .budget-out, .score b, .match b { font-variant-numeric: tabular-nums; }

/* ---------- header pickers ---------- */
.pickers select { font: 600 14px var(--text); letter-spacing: 0; }

/* ---------- hero ---------- */
.kicker { display: none; }
.hero h1 {
  font: 850 clamp(48px, 8.4vw, 116px)/.9 var(--display);
  letter-spacing: -.005em; word-spacing: .1em; max-width: 18ch;
  text-wrap: balance;
}
/* a block of its own, so the balanced wrap evens out the second sentence (no lone last word) */
.hero h1 em { font-weight: 850; display: block; }
/* the dial keeps its centre near the end of the headline's longest line, as in v2. With this face and the
   balanced wrap that line is 6.6 font-sizes wide in pl/en and 7.2 in de, so 7.0 sits between them (v2: 10.85);
   the shorter fr/es/it headlines (about 5) end further left, as the Italian one did in v2.
   Below 901px the phone rules of v2 apply. */
@media (min-width: 901px) {
  .hero { --dial-r: max(0px, calc(100% - max(16px, 50% - 564px) - 7.0 * min(116px, 8.4vw) - 305px)); }
  .hero::before { right: var(--dial-r); }
  .hero::after { right: calc(var(--dial-r) + 300px - 1.5px); }
}
/* the catalogue size as one plain line, not a row of big numbers */
.stats { gap: 0; margin-bottom: 30px; align-items: center; }
.stats div { flex-direction: row; align-items: baseline; gap: .32em; padding: 0; margin: 0; border: 0; }
.stats div + div::before {
  content: ""; align-self: center; width: 2px; height: 14px; margin: 0 14px; border-radius: 1px;
  background: var(--night-accent); opacity: .7; transform: translateY(-1.5px);
}
.stats b { font: 750 18px/1.3 var(--text); letter-spacing: 0; color: var(--night-ink); }
.stats span { font: 500 18px/1.3 var(--text); text-transform: none; letter-spacing: 0; color: var(--night-muted); }
.go { font-size: 24px; padding: 17px 40px 16px; }
.go.sm { font-size: 17px; padding: 9px 16px 8px; }
/* the arrow: a drawn icon in place of the text glyph */
.cta span[aria-hidden], .go span[aria-hidden] {
  font-size: 0; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}

/* ---------- finder ---------- */
.preset { font: 600 14.5px/1.3 var(--text); }
.hero .preset { font-size: 14px; }
.preset::after, .preset-more::before, .hero .pick summary::before {
  content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}
.preset::after { color: var(--accent-text); }
.hero .preset::after { color: var(--night-accent); }
.preset-more::before, .hero .pick summary::before { color: var(--night-accent); -webkit-mask-image: var(--i-plus); mask-image: var(--i-plus); }
.preset-more[aria-expanded="true"]::before, .hero .pick[open] summary::before { content: ""; -webkit-mask-image: var(--i-minus); mask-image: var(--i-minus); }
.preset-more, .hero .pick summary { font: 600 14px/1.3 var(--text); }
.quick-label { font-size: 15px; }

.step legend { font: 800 22px/1.1 var(--display); letter-spacing: .025em; }
.step legend i { font: 800 17px/1 var(--display); letter-spacing: 0; min-width: 30px; height: 26px; padding: 1px 7px 0; }
.hint { font-size: 15px; }
.note { font-size: 14px; border-left-width: 1px; }

/* chips: a real radio ring and a real check box in place of the 7px dots */
.chip span { font-size: 15px; gap: 9px; }
.chip span::before { width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 50%; box-sizing: border-box; }
.chip input[type=checkbox] + span::before { border-radius: 3px; }
.chip input:checked + span::before {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent-ink) 0 2.6px, transparent 3.2px), var(--accent);
}
.chip input[type=checkbox]:checked + span::before,
.chips.big .chip input[type=checkbox]:checked[value="a"] + span::before { background: var(--check-dark) center / 12px 12px no-repeat, var(--accent); }
.chips.big .chip input[type=radio]:checked[value="a"] + span::before {
  background: radial-gradient(circle, var(--accent-ink) 0 2.6px, transparent 3.2px), var(--accent);
}
.chips.big .chip span { font: 800 21px/1.15 var(--display); letter-spacing: .02em; }

.budget-out { font: 850 clamp(36px, 5.4vw, 52px)/1 var(--display); word-spacing: .08em; }
.ticks button { font: 600 13.5px var(--text); letter-spacing: 0; }

/* small field labels: the text face, a little tracking, no monospace */
.years label, .sort, .match, .sub { font: 700 12.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.years label, .sort, .match { color: var(--muted); }
.sub { color: var(--ink-2); }
select, .text { font: 500 16px var(--text); }
.check-line { font-size: 15px; }
.ghost { font: 600 15.5px var(--text); }

/* ---------- results ---------- */
.res-head h2 { font: 800 clamp(32px, 4.6vw, 48px)/1.02 var(--display); letter-spacing: 0; word-spacing: .06em; max-width: 24ch; }
.muted { font-size: 15px; }
.prices-note {
  position: relative; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 14px 11px 42px;
}
.prices-note::before {
  content: ""; position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; background: var(--accent-text);
  -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat;
}

.mono { font: 800 19px/1 var(--display); letter-spacing: .03em; }
.card-title h3 { font: 800 26px/1.02 var(--display); letter-spacing: .005em; word-spacing: .06em; }
.card-title p { font-size: 14px; }
.card-title .yrs { font: 650 13px/1.3 var(--text); }
.card-title .gen-badge { font: 700 14px/1.3 var(--text); }
.label { font-size: 13px; }
.specs { font-size: 14.5px; }
.lic { font: 750 13px/1.2 var(--text); }
.match b { font: 850 28px/1 var(--display); letter-spacing: 0; }
.reasons { font-size: 15px; }
.price strong { font: 850 32px/1.05 var(--display); letter-spacing: 0; word-spacing: .08em; }
.price span { font-size: 14px; }
.price small { font-size: 13px; }
.toggle { font: 650 15px var(--text); }

.score { font-size: 14px; }
.score b { font: 750 14px var(--text); }
.details h4 { font: 800 19px/1.15 var(--display); letter-spacing: .05em; }
.details ul { font-size: 15px; }
.extra { font: 500 13.5px/1.5 var(--text); }
.bdg { font-size: 13px; }

.lnk { font-size: 14px; }
.lnk::after {
  content: ""; width: 13px; height: 13px; background: var(--muted);
  -webkit-mask: var(--i-ext) center / contain no-repeat; mask: var(--i-ext) center / contain no-repeat;
}
.sh, .cmp-btn { font-size: 14.5px; }
.cmp-btn { display: inline-flex; align-items: center; gap: 7px; }
.cmp-btn[aria-pressed="true"]::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.cmp-item button, .cmp-x { font-size: 0; display: grid; place-items: center; }
.cmp-item button::before, .cmp-x::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--i-x) center / contain no-repeat; mask: var(--i-x) center / contain no-repeat;
}
.cmp-x { width: 28px; height: 28px; padding: 0; }
.cmp-top h2 { font: 800 34px/1.05 var(--display); letter-spacing: .02em; }
.cmp thead th { font: 800 22px/1.1 var(--display); letter-spacing: .01em; }
.avail::before {
  content: ""; display: inline-block; vertical-align: -2px; width: 13px; height: 13px; margin-right: 5px; background: currentColor;
  -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat;
}
.pick-h { font: 800 27px/1.1 var(--display); letter-spacing: .02em; }
.empty.zero .fun, .rx-note .fun { font: 800 24px/1.2 var(--display); }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .stats b, .stats span { font-size: 16px; }
  .stats div + div::before { margin: 0 11px; }
}
@media (max-width: 600px) {
  .cmp-top h2 { font-size: 27px; }
  .cmp thead th { font-size: 17px; }
  .cmp-n3 thead th { font-size: 16px; }
  .cmp tbody th { font: 700 11.5px/1.3 var(--text); letter-spacing: .08em; }
  /* bold Sofia Sans is wider than Archivo: in three narrow columns the "best" cell keeps its green fill but a
     medium weight, so a price range such as "4 200 € - 6 900 €" stays on one line, as in v2 */
  .cmp td.best { font-weight: 600; }
  .cmp-n3 td.best { font-weight: 500; }
}
@media (max-width: 400px) {
  .pickers select { font-size: 13px; }
}

/* report an error: a flag instead of the outbound arrow, the title in the display face like the compare title */
.lnk.rep::before {
  content: ""; width: 13px; height: 13px; margin-right: 7px; background: currentColor;
  -webkit-mask: var(--i-flag) center / contain no-repeat; mask: var(--i-flag) center / contain no-repeat;
}
.rep-dlg h2 { font: 800 34px/1.05 var(--display); letter-spacing: .02em; }
.rep-lbl { font: 600 15px var(--text); }
.rep-dlg textarea.text { font: 500 16px/1.45 var(--text); }

/* step 12 brand chips: drawn arrows and cross instead of the glyphs */
.bpick button { font-size: 0; }
.bpick button::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; }
.bpick .bmv.l::before { transform: rotate(180deg); }
.bpick .bdel::before { width: 14px; height: 14px; -webkit-mask-image: var(--i-x); mask-image: var(--i-x); }
.bq::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; background: var(--accent-text);
  -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }
.bgroup { font: 800 26px/1.1 var(--display); letter-spacing: 0; }