:root {
  --paper: #EEF1F4; --surface: #FFFFFF; --ink: #14213D; --muted: #46546F; --line: #C3CCD9;
  --plate: #FFC400; --plate-ink: #111111; --il: #1D4FB5;
  --ok: #17693F; --ok-bg: #DCF1E5; --soon: #8A4500; --soon-bg: #FFE7B8; --bad: #A8221B; --bad-bg: #FADFDC;
  --focus: #1D4FB5;
  --display: "Secular One", "Assistant", system-ui, sans-serif;
  --body: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --digits: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1524; --surface: #182238; --ink: #EEF2F8; --muted: #A9B6CC; --line: #33415E;
    --ok: #6FDC9F; --ok-bg: #143524; --soon: #FFC670; --soon-bg: #3D2A08; --bad: #FF9A91; --bad-bg: #451A17;
    --focus: #9DBBFF;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.55 var(--body); padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
a { color: inherit; overflow-wrap: anywhere; }
p, li, dd, dt, label, summary { overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

.top, main, footer { width: min(100% - 32px, 680px); margin-inline: auto; }
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 18px 6px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.625rem/1 var(--display); min-height: 44px; }
.brand svg { width: 34px; height: 34px; }
.b-page { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.b-head { fill: var(--ink); }
.b-pin { fill: var(--plate); stroke: var(--ink); stroke-width: 1.5; }
.b-check { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons ---------- */
.primary, .ghost, .danger { min-height: 48px; padding: 0 20px; border-radius: 12px; border: 2px solid var(--ink); font-weight: 700; cursor: pointer; }
.primary { background: var(--ink); color: var(--paper); }
.primary.small { min-height: 44px; padding: 0 18px; }
.ghost { background: transparent; color: var(--ink); min-height: 44px; }
.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
a.ghost, a.primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.primary[disabled] { opacity: 0.6; cursor: progress; }
.linklike { background: none; border: 0; padding: 10px 0; min-height: 44px; text-decoration: underline; cursor: pointer; font-weight: 600; }

/* ---------- hero with the licence plate ---------- */
.hero { padding-block: 22px 30px; }
.hero h1 { font-size: clamp(2.125rem, 9vw, 3.375rem); }
.lead { color: var(--muted); margin-top: 10px; max-width: 30em; }
.plateform { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.plate { flex: 1 1 260px; display: flex; direction: ltr; background: var(--plate); border: 3px solid var(--plate-ink); border-radius: 12px; overflow: hidden; min-height: 76px; box-shadow: 0 3px 0 var(--plate-ink); }
.plate:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.plate-il { flex: none; width: 34px; background: var(--il); color: #fff; display: grid; place-items: end center; padding-bottom: 8px; font: 700 0.875rem/1 var(--body); letter-spacing: 0.04em; }
.plate input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--plate-ink); text-align: center; font: 700 min(2.875rem, 11.5vw)/1 var(--digits); letter-spacing: 0.04em; padding: 6px 8px; outline: none; }
.plate input::placeholder { color: rgba(17, 17, 17, 0.38); }
.plateform .primary { flex: 0 0 auto; min-height: 76px; padding-inline: 30px; font-size: 1.25rem; }
.help { color: var(--muted); font-size: 0.96875rem; margin-top: 10px; }
.result:not(:empty) { margin-top: 18px; }
.found { background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; padding: 18px; }
.found h2 { font-size: 1.5rem; }
.found .car { color: var(--muted); margin-top: 2px; }
.found dl { margin: 14px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; }
.found dt { color: var(--muted); }
.found dd { margin: 0; font-weight: 700; }
.found .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.msg { border-inline-start: 5px solid var(--soon); background: var(--soon-bg); color: var(--ink); padding: 12px 14px; border-radius: 8px; }
.msg.bad { border-color: var(--bad); background: var(--bad-bg); }
.msg b { display: block; }

/* ---------- the list ---------- */
.listwrap { padding-block: 8px 30px; }
.listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.listhead h2 { font-size: 1.75rem; }
.listactions { display: flex; gap: 8px; }
.summary { color: var(--muted); margin-top: 4px; min-height: 1.55em; }
.list { list-style: none; padding: 0; margin-top: 12px; background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; }
.list:empty { display: none; }
.list li + li { border-top: 1px solid var(--line); }
.item { width: 100%; display: grid; grid-template-columns: min(5.75rem, 32%) minmax(0, 1fr) auto; align-items: stretch; gap: 0; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; min-height: 84px; }
.item:hover .when { filter: brightness(0.97); }
.when { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; background: var(--ok-bg); color: var(--ok); }
.when b { font: 400 min(2.125rem, 9vw)/1.05 var(--display); text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.when span { font-size: 0.875rem; font-weight: 700; margin-top: 3px; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.item.soon .when { background: var(--soon-bg); color: var(--soon); }
.item.bad .when { background: var(--bad-bg); color: var(--bad); }
.what { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.what strong { font-size: 1.1875rem; line-height: 1.25; overflow-wrap: anywhere; }
.what span { color: var(--muted); font-size: 0.96875rem; }
.what .state { font-weight: 700; }
.item.soon .state { color: var(--soon); }
.item.bad .state { color: var(--bad); }
.item.ok .state { color: var(--ok); }
.go { display: grid; place-items: center; padding-inline: 14px; color: var(--muted); }
.go svg { width: 12px; height: 20px; }
.empty { margin-top: 12px; border: 2px dashed var(--line); border-radius: 16px; padding: 22px 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 2px solid var(--ink); background: var(--surface); font-weight: 700; cursor: pointer; }

/* ---------- top links and the used-car prompt ---------- */
.topnav { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; }
.toplink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; }
.promo { background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; padding: 20px 18px; margin-bottom: 30px; display: grid; gap: 12px; justify-items: start; }
.promo h2 { font-size: 1.625rem; }
.promo p { max-width: 34em; }

/* ---------- the car report ---------- */
.status { color: var(--muted); margin-top: 10px; min-height: 1.55em; }
.status:empty { display: none; }
.report { background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; padding: 20px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rephead h2 { font-size: clamp(1.75rem, 7vw, 2.375rem); overflow-wrap: anywhere; outline-offset: 6px; }
.rephead .car { color: var(--muted); margin-top: 4px; }
.miniplate { display: inline-block; max-width: 100%; background: var(--plate); color: var(--plate-ink); border: 2px solid var(--plate-ink); border-radius: 7px; padding: 1px 12px 2px; font: 700 1.5rem/1.2 var(--digits); letter-spacing: 0.04em; margin-bottom: 10px; }
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border-top: 2px solid var(--ink); padding-top: 16px; }
.sec h3 { font-size: 1.375rem; }
.sec p { max-width: 38em; }
.sec .fine { margin-top: 0; }
.finds { list-style: none; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.finds li { display: grid; grid-template-columns: 92px 1fr; align-items: stretch; }
.finds li + li { border-top: 1px solid var(--line); }
.finds .tag { display: grid; place-items: center; text-align: center; padding: 10px 4px; min-width: 0; overflow-wrap: anywhere; font-weight: 700; font-size: 0.96875rem; background: var(--paper); color: var(--muted); }
.finds .ok .tag { background: var(--ok-bg); color: var(--ok); }
.finds .warn .tag { background: var(--soon-bg); color: var(--soon); }
.finds div { padding: 11px 14px; min-width: 0; }
.finds b { font-size: 1.1875rem; line-height: 1.3; overflow-wrap: anywhere; }
.finds p { color: var(--muted); font-size: 1rem; }
.cards { list-style: none; padding: 0; display: grid; gap: 10px; }
.cards li { border-inline-start: 5px solid var(--soon); background: var(--soon-bg); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; }
.cards b { font-size: 1.1875rem; }
.cards .kind, .cards .who { font-size: 1rem; }
.cards a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.spec { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 0 22px; }
.spec div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); flex: 0 1 auto; min-width: 0; }
.spec dd { margin: 0; font-weight: 700; text-align: end; overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto; }
.spec .vin { font-size: 0.96875rem; letter-spacing: 0.02em; }
.syslabel { font-weight: 700; }
.sys { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.sys li { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 1rem; }
.sys.yes li { border-color: var(--ok); background: var(--ok-bg); }
.sys.no li { color: var(--muted); }
.price { display: grid; gap: 2px; }
.price b { font: 400 clamp(1.5rem, 7vw, 2.5rem)/1.15 var(--display); white-space: nowrap; }
.price span { color: var(--muted); }
.sec h3.sub { margin-top: 10px; }
.valform { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px 16px; align-items: start; }
.valform .field select { min-height: 48px; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; background: var(--surface); width: 100%; }
.valform .field small { color: var(--muted); font-size: 0.9375rem; }
.valform .ads, .valform .err, .valform .btnrow { grid-column: 1 / -1; }
.valform .err { color: var(--bad); font-weight: 700; }
.valform .err:empty { display: none; }
.ads summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.ads[open] summary { margin-bottom: 4px; }
.adrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; margin-top: 10px; }
.valout:empty { display: none; }
.valout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.valbox { border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px; background: var(--paper); }
.vallabel { color: var(--muted); font-weight: 700; }
.valrange { font: 400 clamp(1.375rem, 6.2vw, 2.25rem)/1.2 var(--display); }
.valrange b { font-weight: 400; white-space: nowrap; }
.valnote { color: var(--muted); font-size: 1rem; }
.valout h4 { margin: 4px 0 0; font: 400 1.1875rem/1.2 var(--display); }
.calc { list-style: none; padding: 0; margin: 0; }
.calc li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.calc span { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.calc b { flex: 1 1 auto; text-align: end; min-width: 0; }
/* the short answer */
.verdict { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; }
.verdict b { font-size: min(2.25rem, 9.5vw); }
.verdict span { font-size: 1.125rem; font-weight: 600; }
.keys { margin: 0; display: grid; gap: 0; }
.keys div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.keys dt { color: var(--muted); }
.keys dd { margin: 0; font-weight: 700; font-size: 1.25rem; text-align: end; flex: 1 1 auto; }
.nomargin { margin-top: 0; }
.all { display: block; }
.all > summary { display: flex; align-items: center; justify-content: center; gap: 12px; list-style: none; min-height: 52px; border: 2px solid var(--ink); border-radius: 12px; font-weight: 700; }
.all > summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin-top: -5px; }
.all[open] > summary::after { transform: rotate(-135deg); margin-top: 5px; }
.allin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; }
.allin > .sec:first-child { border-top: 0; padding-top: 0; }

/* rows that open */
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.finds li { display: block; }
.finds summary { display: grid; grid-template-columns: min(5.75rem, 30%) minmax(0, 1fr) 44px; align-items: stretch; list-style: none; min-height: 54px; }
.finds summary b { padding: 10px 14px; align-self: center; min-width: 0; }
.finds summary::after, .fold > summary::after, .more > summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); place-self: center; flex: none; margin-top: -5px; }
.finds details[open] > summary::after, .fold[open] > summary::after, .more[open] > summary::after { transform: rotate(-135deg); margin-top: 5px; }
.finds details > p { padding: 0 14px 12px; margin-inline-start: min(5.75rem, 30%); }
.fold { display: block; }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; min-height: 48px; padding-inline-end: 6px; }
.foldin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 8px; }
.more > summary { display: inline-flex; align-items: center; gap: 12px; list-style: none; min-height: 48px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.official { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; justify-items: start; }
.was { color: var(--muted); }
.was b { color: var(--ink); }
.steps { padding-inline-start: 1.3em; display: grid; gap: 8px; max-width: 38em; }
.steps li::marker { font-family: var(--display); }
.plain { margin-top: 12px; padding-inline-start: 1.2em; display: grid; gap: 10px; max-width: 36em; }

/* ---------- how it works ---------- */
.how { padding-block: 10px 30px; }
.how h2 { font-size: 1.625rem; }
.how ol { margin-top: 12px; padding-inline-start: 1.3em; display: grid; gap: 10px; max-width: 34em; }
.how li::marker { font-family: var(--display); }
.fine { color: var(--muted); font-size: 0.96875rem; margin-top: 14px; max-width: 40em; }

footer { border-top: 2px solid var(--ink); padding-block: 14px 34px; }
.footrow { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footrow a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- sheets ---------- */
.sheet { border: 2px solid var(--ink); border-radius: 18px; padding: 0; background: var(--surface); color: var(--ink); width: min(100% - 24px, 560px); max-height: min(100dvh - 24px, 760px); }
.sheet::backdrop { background: rgba(10, 16, 30, 0.62); }
.sheet .in { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sheethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheethead h2 { font-size: 1.625rem; overflow-wrap: anywhere; }
.x { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ink); background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.typegrid button { min-height: 52px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; padding: 6px 10px; }
.typegrid button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.field { display: grid; gap: 5px; }
.field label { font-weight: 700; }
.field small { color: var(--muted); }
.field input, .field textarea { min-height: 48px; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; background: var(--surface); width: 100%; }
.field textarea { min-height: 76px; resize: vertical; }
.field .err { color: var(--bad); font-weight: 700; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; }
.big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); }
.big b { font: 400 min(2.5rem, 10.5vw)/1.1 var(--display); overflow-wrap: anywhere; min-width: 0; }
.big.soon { background: var(--soon-bg); color: var(--soon); }
.big.bad { background: var(--bad-bg); color: var(--bad); }
.guide h3 { font-size: 1.25rem; }
.guide ol { margin-top: 8px; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.guide a { font-weight: 700; display: inline-block; padding-block: 8px; }
.note { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }

.toast { position: fixed; inset-inline: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); margin-inline: auto; width: fit-content; max-width: min(100% - 32px, 520px); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; z-index: 20; }
.toast.show { opacity: 1; transform: none; }

/* ---------- accessibility: the button, the panel, the reading bar ---------- */
.a11y-fab { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 15; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 12px; border-radius: 24px; border: 2px solid #fff; background: var(--il); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(10, 16, 30, 0.35); }
.a11y-fab svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
#a11yDialog h3 { font-size: 1.25rem; margin-top: 4px; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; font-weight: 700; }
.a11y-step { display: flex; align-items: center; gap: 8px; }
.a11y-step button { width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--ink); background: transparent; font-size: 1.625rem; font-weight: 700; line-height: 1; cursor: pointer; }
.a11y-step button[disabled] { opacity: 0.4; cursor: default; }
.a11y-step output { min-width: 4ch; text-align: center; }
.a11y-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.a11y-grid button { text-align: start; display: grid; gap: 2px; align-content: center; min-height: 64px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.a11y-grid button span { color: var(--muted); font-size: 0.96875rem; }
.a11y-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.a11y-seg button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.a11y-grid button[aria-pressed="true"], .a11y-seg button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.a11y-grid button[aria-pressed="true"] span { color: inherit; }
.a11y-grid button[aria-pressed="true"] b::after, .a11y-seg button[aria-pressed="true"]::after { content: " ✓"; }
.a11y-end { align-items: center; justify-content: space-between; }
.a11y-end a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.a11y-player { position: fixed; top: calc(10px + env(safe-area-inset-top)); inset-inline: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 20px); z-index: 16; display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px 8px 8px; border-radius: 14px; font-weight: 700; box-shadow: 0 2px 10px rgba(10, 16, 30, 0.4); }
.a11y-player[hidden] { display: none; }
.a11y-player button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--paper); background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.a11y-say { bottom: calc(140px + env(safe-area-inset-bottom)); }
.a11y-now { outline: 4px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.a11y-guide { position: fixed; left: 0; right: 0; top: -7px; height: 14px; background: rgba(255, 196, 0, 0.4); border-block: 2px solid var(--ink); pointer-events: none; z-index: 14; }
.a11y-guide[hidden] { display: none; }

/* the modes themselves */
html.a11y-contrast { --paper: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --muted: #000000; --line: #000000; --ok: #004D1A; --ok-bg: #FFFFFF; --soon: #5A2B00; --soon-bg: #FFFFFF; --bad: #7A0000; --bad-bg: #FFFFFF; --focus: #0000C8; --plate: #FFD400; }
@media (prefers-color-scheme: dark) {
  html.a11y-contrast { --paper: #000000; --surface: #000000; --ink: #FFFFFF; --muted: #FFFFFF; --line: #FFFFFF; --ok: #7DFFA6; --ok-bg: #000000; --soon: #FFD27A; --soon-bg: #000000; --bad: #FFB0A8; --bad-bg: #000000; --focus: #FFFF00; }
}
html.a11y-contrast .when, html.a11y-contrast .big, html.a11y-contrast .finds .tag, html.a11y-contrast .cards li, html.a11y-contrast .msg, html.a11y-contrast .valbox { border: 2px solid currentColor; }
html.a11y-contrast .sys.yes li { border-width: 2px; }
html.a11y-contrast .a11y-fab { background: #000; }
html.a11y-read { --display: Arial, "Assistant", Helvetica, sans-serif; --body: Arial, "Assistant", Helvetica, sans-serif; }
html.a11y-read body { line-height: 1.9; letter-spacing: 0.03em; word-spacing: 0.16em; }
html.a11y-read h1, html.a11y-read h2, html.a11y-read h3, html.a11y-read .big b, html.a11y-read .when b, html.a11y-read .price b, html.a11y-read .valrange { font-weight: 700; line-height: 1.4; }
html.a11y-read p, html.a11y-read li { max-width: 32em; }
html.a11y-read p + p, html.a11y-read li + li { margin-top: 0.5em; }
html.a11y-links a, html.a11y-links summary { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
html.a11y-links a, html.a11y-links button, html.a11y-links summary { outline: 2px dashed var(--ink); outline-offset: 2px; }
html.a11y-links .plateform .primary, html.a11y-links .a11y-fab { outline-color: var(--ink); }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11h-7.500l4 8-3 1.500-4-8L4 19z' fill='%23000' stroke='%23fff' stroke-width='1.500' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important; }

/* ---------- text pages ---------- */
.page { padding-block: 18px 40px; }
.page h1 { font-size: clamp(1.875rem, 7vw, 2.75rem); margin-bottom: 6px; }
.page h2 { font-size: 1.4375rem; margin-top: 26px; margin-bottom: 6px; }
.page p, .page li { max-width: 40em; }
.page p + p { margin-top: 10px; }
.page ul { padding-inline-start: 1.3em; display: grid; gap: 6px; margin-top: 8px; }
.page .upd { color: var(--muted); font-size: 0.96875rem; }
.page .back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

@media (max-width: 420px) {
  .finds summary { grid-template-columns: min(4.75rem, 30%) minmax(0, 1fr) 40px; }
  .finds details > p { margin-inline-start: min(4.75rem, 30%); }
  .report { padding: 16px 14px; }
  .plateform .primary { flex: 1 1 100%; min-height: 56px; }
  .item { grid-template-columns: min(5rem, 32%) minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media (max-width: 420px) { .a11y-fab { padding: 0 14px 0 10px; } }
@media (forced-colors: active) { .when, .big, .finds .tag, .cards li { border: 1px solid CanvasText; } }