/* רכבים — SPEC §9: one stylesheet, no build step, no JavaScript.
 *
 * Merged from two independent design passes. The visual system — indigo brand,
 * radius and shadow scale, full-bleed hero, timeline dots, the .plate::before
 * technique — comes from the design handoff. The plate search field, the
 * self-hosted font and the contrast corrections come from the pass done against
 * a running browser. Where the two disagreed the measured result won, and each
 * of those is commented at the point of disagreement.
 *
 * Budget: under 50KB for HTML+CSS. Measured 2026-08-08 against the live server.
 */

/* Assistant, subset to the Hebrew block, digits, A-Za-z and the punctuation the
 * templates use. 13.4KB covers the whole weight axis in one variable file.
 *
 * Self-hosted rather than fetched from fonts.googleapis.com, for two reasons
 * that both fail silently: the privacy policy promises no third-party requests,
 * and our own CSP is default-src 'none', so a Google stylesheet link is refused
 * and the page falls back to a system face with nothing on screen to say so.
 * See SecurityHeaders for the matching font-src.
 *
 * Latin is in the subset deliberately — digits live in that range, and model
 * names and VINs arrive from the registry in Latin.
 */
@font-face {
    font-family: 'Assistant';
    src: url('/fonts/assistant-he.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand: #4f46e5;
    --brand-dark: #3730a3;
    --brand-100: #e0e7ff;
    --brand-50: #eef2ff;
    --accent: #4f46e5;          /* old name, kept so nothing outside here breaks */

    --ink: #111827;
    /* Was #6b7280, which measures 4.39:1 against --bg and fails AA. This colour
       carries .lede, .help, .crumbs, .note, .facts dt and the footer — most of
       the secondary text on the site — so it is the worst possible place to sit
       under the line. #4b5563 measures 6.87:1. */
    --ink-soft: #4b5563;
    --line: #d1d5db;
    --bg: #f3f4f6;
    --card: #ffffff;

    /* Status colours, each checked at 4.5:1 or better against its own
       background. Text always repeats the state, so colour is never the only
       signal — SPEC §11. */
    --ok-bg: #dcfce7;      --ok-ink: #15803d;
    --warn-bg: #fef3c7;    --warn-ink: #b45309;
    --bad-bg: #fee2e2;     --bad-ink: #b91c1c;
    --unknown-bg: #f3f4f6; --unknown-ink: #374151;

    --plate-yellow: #f5c518;
    --plate-blue: #153a93;

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
    --shadow-brand: 0 10px 15px -3px rgba(79,70,229,.25);

    --font: 'Assistant', system-ui, "Segoe UI", Arial, sans-serif;
    --mono-font: ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    /* The hero breaks out of .wrap with a 50vw margin. On Windows 100vw counts
       the scrollbar, so without this the page gains a horizontal scrollbar the
       width of that scrollbar. clip rather than hidden, because hidden on body
       would also disable position:sticky anywhere below. */
    overflow-x: clip;
}

.wrap { width: min(56rem, 100% - 2rem); margin-inline: auto; }

.skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 10;
}
.skip-link:focus { inset-inline-start: 0; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* The face is declared 400–700, so nothing asks for 800: past the declared
   range the browser synthesises a heavier weight, which smears Hebrew counters. */
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }

/* ── header / footer ─────────────────────────────────────────────────────── */

.site-header { background: var(--card); border-bottom: 1px solid var(--line); padding: .8rem 0; }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.logo {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--ink);
}
/* Decorative, and generated rather than marked up, so a screen reader reads the
   site name on its own.
   The same file the tab and the home screen use, rather than a second drawing
   of the mark in CSS — which is what it was, and it had already drifted: an
   indigo square with a letter in it while the favicon was a yellow plate. One
   source, so they cannot disagree again. */
.logo::before {
    content: "";
    width: 32px; height: 32px;
    background: url('/favicon.svg') center / contain no-repeat;
}
.tagline { color: var(--ink-soft); font-size: .85rem; }

.site-nav { display: flex; gap: 1.25rem; font-size: .95rem; font-weight: 500; margin-inline-start: auto; }
.site-nav a { text-decoration: none; color: #374151; }
.site-nav a:hover { color: var(--brand); }

.site-footer {
    margin-top: 3rem; padding: 1.5rem 0 2.5rem;
    border-top: 1px solid var(--line); background: var(--card);
    color: #374151; font-size: .88rem;
}
/* `balance` was tried here and made it worse. It evens line lengths, which at
   390px produced a tidy block and at desktop width bought that evenness by
   breaking "משרד התחבורה / והבטיחות בדרכים" — one ministry split across two
   lines. Measuring a single viewport and shipping is what hid it.
   The fix is structural instead: two paragraphs, and non-breaking spaces
   holding the ministry's name together. `pretty` is inherited and is the right
   amount of help — it prevents a one-word last line and decides nothing else. */
.site-footer p { margin: .4rem 0; text-align: center; }
.site-footer p + p { margin-top: .5rem; }

/* One colour for the whole row. The consent control is a <button> and the rest
   are <a>, so they inherited from different places — the links took the brand
   indigo and the button took the footer's grey, and a row of five items had
   four of one colour and one of another for no reason a reader could see.
   Both are named here so neither can drift again.

   `justify-content: center` because the row wraps on a phone, and a wrapped
   flex row left-aligned drops one orphan item under a full line. Centred, a
   wrap reads as a second line of the same list. */
.footer-links {
    display: flex; gap: .5rem 1rem; flex-wrap: wrap;
    justify-content: center; margin-top: .9rem;
}
.footer-links a,
.footer-links .footer-link-button { color: var(--brand-dark); }
.footer-links a:hover,
.footer-links .footer-link-button:hover { color: var(--brand); }

main { padding-block: 2rem; }

/* ── the plate ───────────────────────────────────────────────────────────────
 *
 * Two forms, because one technique cannot do both jobs.
 *
 * .plate displays a number that is already known — the vehicle page, the
 * comparison columns, the not-found pages. It is always a <p> or an <a>, so the
 * blue strip is a ::before and no markup changes.
 *
 * .plate-field is for typing one in. An <input> is a replaced element and
 * generates no pseudo-elements at all, so the strip has to be a real box. The
 * handoff put it on the wrapping row instead, absolutely positioned with
 * inset-block: 0 — and because .search is capped at 40rem the button always
 * wraps to a second line, which made the strip stand 62px taller than the field
 * at every viewport width tested, 1280 and 1600 included. A flex sibling is
 * exactly as tall as the field by construction rather than by arithmetic.
 */

.plate {
    /* position + justify-content rather than the band being a flex item: the
       number has to centre in the yellow, and centring a flex row would have
       carried the band inwards with it. Out of flow, the band stays welded to
       the edge and inset-block: 0 reaches the border instead of stopping at the
       content box — which is what the negative margin here used to paper over.
       padding-inline-start reserves the lane it sits in. */
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    direction: ltr;
    background: var(--plate-yellow); color: #111827;
    border: 3px solid #111827; border-radius: 7px; overflow: hidden;
    font-size: 1.35rem; font-weight: 700; letter-spacing: .07em;
    padding: .2rem .7rem .2rem 1.35em; margin: 0; text-decoration: none;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.07);
}
.plate::before {
    content: "IL";
    position: absolute; inset-block: 0; inset-inline-start: 0;
    display: flex; align-items: flex-end; justify-content: center;
    width: 1.4em;
    background: var(--plate-blue); color: #fff;
    font-size: .45em; font-weight: 700; letter-spacing: 0;
    padding-bottom: .35em;
}
/* One physical plate size for 7 and 8 digits alike — see PlateNumber::isFullSize.
 *
 * 8.2em is deliberately above the widest plate that can occur rather than equal
 * to it, because plate width is not a function of digit count alone. Assistant
 * is proportional and has no tabular figures, so measured at 1280px an 8-digit
 * plate runs 158.3px as 111-11-111 and 166.1px as 000-00-000 — same length, 8px
 * apart. font-variant-numeric: tabular-nums was tried here first and does
 * nothing; the font has no tnum table to switch on.
 *
 * So the guarantee has to come from the box, not from the text: 8.2em is 177.1px
 * against a measured maximum of 166.1px (000-00-000, the widest of all ten digits
 * in both groupings), which puts every full-size plate on the same figure.
 * Re-measure if the font, font-size or letter-spacing above changes — the margin
 * is 11px, not arbitrary headroom.
 *
 * min() rather than min-width because min-width cannot yield. Two comparison
 * cards at 375px leave about 139px of inner width each, and a floor of 177px
 * would have overflowed them by nearly 40px — min-width beats max-width when the
 * two conflict, so there is no capping it afterwards. This way the plate takes
 * 8.2em wherever it fits and the card's full width where it does not; the two
 * cards are the same width either way, so the plates stay equal in both regimes,
 * which is the thing actually being asked for.
 */
.plate--wide { width: min(8.2em, 100%); }
a.plate:hover { color: #111827; box-shadow: inset 0 0 0 2px rgba(0,0,0,.07), var(--shadow-md); }

/* direction: ltr is not cosmetic. Without it the flex row inherits RTL from the
   page and the blue strip lands on the right — on a real Israeli plate it is
   always on the left, which is what made the field read as reversed. */
.plate-field {
    display: flex; align-items: stretch; overflow: hidden;
    direction: ltr;
    background: var(--plate-yellow);
    border: 3px solid #111827; border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.07);
}
.plate-field-il {
    display: flex; align-items: flex-end; justify-content: center;
    width: 2.1rem; flex: 0 0 auto;
    background: var(--plate-blue); color: #fff;
    font-size: .65rem; font-weight: 700; padding-bottom: .4rem;
}
.plate-field input {
    flex: 1; min-width: 0;
    font-family: var(--mono-font);
    border: 0; background: transparent; color: #111827;
    direction: ltr; text-align: center;
}
/* The field has no border of its own left to thicken, so the ring goes on the
   wrapper. */
.plate-field input:focus { outline: 0; }
.plate-field:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Supplementary only — the error text below carries role="alert" and says what
   is wrong, so nothing depends on noticing a border colour. */
.plate-field:has(input[aria-invalid="true"]) { border-color: var(--bad-ink); }
/* 4.89:1 on the plate yellow, measured. The intuitive soft brown around #8a7409
   comes out at 2.81:1: yellow sits near the light end and leaves very little
   room beneath it.
   Bold, because seeing it rendered showed the whole point failing: a real plate
   carries heavy black characters, and a thin olive placeholder made the field
   read as a form input that happened to be yellow. */
.plate-field input::placeholder { color: #5f5004; opacity: 1; font-weight: 700; }

/* ── home ────────────────────────────────────────────────────────────────── */

/* Full-bleed indigo band. The class stays .hero so the template is unchanged;
   the width comes from a negative margin out of .wrap. */
.hero {
    background: var(--brand-dark);
    color: #fff;
    margin-inline: calc(50% - 50vw);
    /* Was 3.5/4rem. Rendered, that left most of a screen of empty grey between
       the band and the three cards under it — the two read as unrelated pages
       rather than as one. */
    padding: 3rem calc(50vw - 50% + 1rem) 2.5rem;
    text-align: center;
}
.hero h1 { font-size: 2.4rem; line-height: 1.2; margin: 0 0 .6rem; }
.hero .lede { color: #c7d2fe; font-size: 1.08rem; margin: 0 auto 1.5rem; max-width: 40rem; }
.hero .count { color: #c7d2fe; }

.search {
    background: var(--card); border: 0; border-radius: var(--r-xl);
    padding: 1.25rem; max-width: 40rem; margin-inline: auto;
    text-align: start; box-shadow: var(--shadow-md);
}
.search label { display: block; font-weight: 600; font-size: .9rem; color: #374151; margin-bottom: .5rem; }
/* The button stays separate, and that was a correction.
   Joining them squared one corner of the plate, and a plate is a complete
   rounded rectangle — that shape is the whole reason the field is yellow. A
   tidier search control is not worth breaking the thing it is imitating. */
.search-row { display: flex; gap: .6rem; flex-wrap: wrap; }

.search .plate-field { flex: 1 1 14rem; min-height: 4rem; }
.search .plate-field input { font-size: 1.75rem; letter-spacing: .09em; padding: 0 .6rem; }

.search button {
    font: inherit; font-weight: 700; font-size: 1.05rem;
    padding: .7rem 2.2rem; border: 0; border-radius: var(--r-md);
    background: var(--brand); color: #fff; cursor: pointer;
    box-shadow: var(--shadow-brand);
}
@media (max-width: 34rem) {
    .search button { width: 100%; }
}
.search button:hover { background: var(--brand-dark); }

/* Folded away on purpose: most people arrive with a plate, and the ones who
   need a VIN know they do. Inside the white card so it reads as part of the
   search rather than as a second feature. */
.vin-search { max-width: 40rem; margin: .75rem auto 0; }
.vin-search summary {
    cursor: pointer; font-size: .88rem; color: #c7d2fe;
    padding: .3rem 0; list-style-position: inside;
}
.vin-search summary:hover { color: #fff; }
.vin-search form {
    background: var(--card); border-radius: var(--r-lg);
    padding: 1rem 1.1rem; margin-top: .5rem; text-align: start;
}
.vin-search label { display: block; font-weight: 600; font-size: .85rem; color: #374151; margin-bottom: .35rem; }
.vin-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.vin-row input {
    flex: 1 1 14rem; font: inherit; font-family: var(--mono-font); font-size: .95rem;
    letter-spacing: .04em; padding: .5rem .7rem;
    border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink);
}
.vin-row input:focus { border-color: var(--brand); }
.vin-row button {
    font: inherit; font-weight: 600; border: 0; cursor: pointer;
    background: var(--brand); color: #fff; border-radius: var(--r-md); padding: .5rem 1.4rem;
}
.vin-row button:hover { background: var(--brand-dark); }

.help { color: var(--ink-soft); font-size: .85rem; margin: .6rem 0 0; }
.error { color: var(--bad-ink); font-weight: 600; margin: .5rem 0 0; }
.count { color: var(--ink-soft); font-size: .9rem; margin-top: 1rem; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 1.5rem; }
.cards article { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg); padding: 1.25rem; }
.cards h2 { font-size: 1.05rem; margin: 0 0 .35rem; }
.cards p { margin: 0; color: #374151; font-size: .95rem; }

/* ── sub-page header ─────────────────────────────────────────────────────────
 *
 * The home page got the full-bleed indigo band and every other page got white
 * cards on grey, which read as though only the front door had been designed.
 * This is the same band at a smaller scale, carrying the breadcrumbs, the
 * heading and the standfirst, so a model listing and the home page look like
 * the same site.
 *
 * The negative block margin pulls it up through main's own padding so it sits
 * flush under the site header rather than floating below a grey gap.
 */
.page-head,
.vehicle-head {
    background: var(--brand-dark);
    color: #fff;
    margin-inline: calc(50% - 50vw);
    margin-block: -2rem 2rem;
    padding: 1.75rem calc(50vw - 50% + 1rem) 2rem;
}
.page-head .crumbs { color: #c7d2fe; margin: 0 0 .5rem; }
.page-head .crumbs a { color: #e0e7ff; }
.page-head h1 { margin: 0; font-size: 2rem; }
.page-head .lede { color: #c7d2fe; margin: .5rem 0 0; max-width: 42rem; }
/* The figure is the whole point of a model page, so it stays in the band
   rather than starting the body with a number and no context. */
.page-head .figure { margin-top: .75rem; }
.page-head .figure span { color: #c7d2fe; }

/* ── vehicle page ────────────────────────────────────────────────────────── */

/* The vehicle page gets the band too, and it is the best argument for the whole
   idea: a yellow plate on indigo is the brand stated in two colours. The layout
   below is what differs from a plain .page-head — the plate leads, the title
   takes its own line under it. */
.vehicle-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.vehicle-head .plate { order: -1; }
.vehicle-head h1 { font-size: 1.9rem; margin: 0; flex-basis: 100%; }
/* Muted greys are invisible on indigo, so anything secondary inside the band
   switches to the light tint the hero already uses. */
.vehicle-head .trim { color: #c7d2fe; }
.trim { color: var(--ink-soft); font-size: .9rem; margin: 0; }

.type-badge {
    display: inline-block; background: var(--unknown-bg); color: var(--unknown-ink);
    font-size: .82rem; font-weight: 600; border-radius: 999px; padding: .15rem .7rem; margin: 0;
}
/* Public-service registration reads as a fact about the vehicle, not a warning,
   so it is tinted rather than alarming. */
.type-badge--public { background: var(--ok-bg); color: var(--ok-ink); }

.note-inline { color: var(--ink-soft); font-weight: 400; font-size: .85rem; }

/* ── the four numbers a buyer looks for ──────────────────────────────────────
   Above everything else and before any scrolling, because they are the reason
   the page was opened. Each one states its own status in words; the tint is a
   second signal, never the only one. */
/* Two by two on a phone. auto-fit at 10.5rem dropped to a single column below
   about 420px and turned four short facts into four full-width slabs and most
   of a screen of scrolling — seen in a screenshot, not in any measurement. */
.headline-tiles {
    display: grid; gap: .75rem; margin-bottom: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 46rem) {
    .headline-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.headline-tiles > div {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1rem 1.1rem;
    text-align: center;
}
.headline-tiles dt { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .3rem; }
.headline-tiles dd {
    margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25;
    font-variant-numeric: tabular-nums; color: var(--brand-dark);
}
.headline-tiles .unit { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-soft); margin-top: .15rem; }
.headline-tiles .tile--ok   { background: var(--ok-bg);   border-color: var(--ok-bg); }
.headline-tiles .tile--ok dt, .headline-tiles .tile--ok dd { color: var(--ok-ink); }
.headline-tiles .tile--warn { background: var(--warn-bg); border-color: var(--warn-bg); }
.headline-tiles .tile--warn dt, .headline-tiles .tile--warn dd { color: var(--warn-ink); }
.headline-tiles .tile--bad  { background: var(--bad-bg);  border-color: var(--bad-bg); }
.headline-tiles .tile--bad dt, .headline-tiles .tile--bad dd { color: var(--bad-ink); }
/* An absent figure is set smaller and quieter than a real one, so a column of
   tiles still reads as data with gaps rather than as a wall of "no". */
.headline-tiles .tile--empty dd { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }

/* ── fact cards ──────────────────────────────────────────────────────────────
   A fixed set of fields in a fixed order, so the page has the same shape for
   every vehicle. Absent values stay in place and say which kind of absence
   they are. */
.fact-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.fact-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
}
.fact-card h3 {
    display: flex; align-items: center; gap: .5rem;
    font-size: .95rem; margin: 0 0 .5rem; color: var(--brand-dark);
    padding-bottom: .5rem; border-bottom: 2px solid var(--brand-100);
}
/* Icons as masks rather than images, so they take the heading's own colour and
   stay one file's worth of nothing. Inline data: URIs are within the CSP —
   img-src allows 'self' and data: — and need no request, no JS and no build. */
.fact-card h3::before {
    content: ""; flex: 0 0 auto; width: 17px; height: 17px;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.fact-card--identity   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M5 17a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm18 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM3 17v-5l2-5h12l3 5v5'/%3E%3C/svg%3E"); }
.fact-card--engine     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E"); }
.fact-card--body       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E"); }
.fact-card--regulatory { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.fact-card--extra      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E"); }
.fact-card--equipment  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-3a2 2 0 0 1-2-2V2'/%3E%3Cpath d='M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm12 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M9 18h6M3 18v-5l3-6h9l3 6v5'/%3E%3C/svg%3E"); }

/* The label column is bounded rather than left on `auto`. With auto it sized to
   the longest label in the card, and the two longest are glosses — "מקוריות
   סוג הרישום ברישיון", "מדינת היצרן (לפי השלדה)" — so one explanatory phrase
   squeezed every value beside it. The importer came out as three stacked
   words: קרסו / מוטורס / בע"מ.
   Percentages were guesses and both were wrong — 55% then 38%, each shipped
   blind and each still wrapping. Measured in the browser instead: the card is
   272px, which leaves 230px for two columns and a gap, and "קרסו מוטורס בע״מ"
   needs 139px. It was being given 128.
   Fixing the value column at 8.75rem fixed the importer and then broke the
   chassis number, which needs 151px and was given 140 — the same eleven-pixel
   miss, one row down. Any fixed width is wrong for some value, and picking it
   from whichever value was reported last is how this got measured three times.
   So the value column is `auto`: it takes what its widest value actually
   needs, and the label takes the rest and wraps, with a floor so it can never
   be squeezed away entirely. That is the right way round in any case — a label
   on two lines loses nothing, a value broken mid-string reads as corrupt. */
.fact-card dl { display: grid; grid-template-columns: minmax(4rem, 1fr) auto; gap: 0 .9rem; margin: 0; }
/* And the gloss drops under its label instead of widening the column. */
.fact-card dt .note-inline { display: block; }
/* A rule under every row rather than a gap between them. With the label at one
   edge and the value at the other, whitespace alone left the eye to cross an
   empty span and guess which value belonged to which label. */
.fact-card dt, .fact-card dd { padding: .45rem 0; border-bottom: 1px solid var(--bg); }
.fact-card dt { color: var(--ink-soft); font-size: .9rem; }
.fact-card dd { margin: 0; font-weight: 600; text-align: end; }
.fact-card dt:last-of-type, .fact-card dd:last-of-type { border-bottom: 0; }
/* Both absences are muted, and they differ in wording rather than in colour —
   the distinction is a fact about the registry, not a warning. */
.fact-card .empty { font-weight: 400; color: var(--ink-soft); font-size: .88rem; }

/* A yes/no answer, tinted so it reads at a glance. The word is always there —
   "רשום" / "לא רשום" — so the colour repeats the answer and never carries it,
   which is the whole of SPEC §11 on this. Measured, after I first wrote two
   flattering numbers here from memory: 4.57:1 for the green and 5.30:1 for the
   red. The green clears AA by seven hundredths, so it is not a pairing to
   darken the background of without checking again. */
/* justify-self, not inline-block. The class sits on the dd, and a dd is a grid
   item — inline-block does not shrink one, so the chip stretched the width of
   the whole column and looked like a bug rather than a badge. */
/* align-self as well as justify-self. Without it the chip sat at the top of its
   row while the label beside it sat in the middle, so the two read as belonging
   to different rows — visible immediately in a screenshot and in nothing else. */
.fact-card .answer {
    justify-self: end;
    align-self: center;
    border-radius: 999px;
    padding: .1rem .7rem;
    font-size: .88rem;
}
.fact-card .answer--ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.fact-card .answer--bad  { background: var(--bad-bg);  color: var(--bad-ink); }
/* Neither yes nor no: held once, under the plate this vehicle carried before.
   4.51:1, measured — the tightest pair on the page. */
.fact-card .answer--warn { background: var(--warn-bg); color: var(--warn-ink); }

/* A field whose name gives nothing away. The marker is decorative — the same
   text sits in an .sr-only span beside it — because a title attribute alone
   reaches neither keyboard nor touch. */
.hint {
    display: inline-grid; place-items: center;
    width: 1.05rem; height: 1.05rem; margin-inline-start: .25rem;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: .68rem; color: var(--ink-soft); cursor: help;
}
/* No marker on the value itself — and that was a retreat, not a refinement.
   The dotted underline was designed for the exception. On a private car the
   registry publishes so little that ten of fourteen values come from the model
   or from the previous registration, so nearly every row was underlined and
   the page read as a list of broken links. A mark that applies to most of a
   set marks nothing. The footnote below names the fields instead. */
.fact-card .from-model { text-decoration: none; }
.from-model-key {
    display: inline-block; width: 1.2rem;
    text-decoration: underline dotted var(--brand);
    text-underline-offset: 4px;
    margin-inline-end: .25rem;
}

/* Licence status: content on one side, the calendar link on the other, so the
   card is filled rather than a stack hugging one edge. */
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.status-row .badge { margin-bottom: .75rem; }
.status-row .cta { margin-top: 0; }
.facts--tight { grid-template-columns: auto auto; justify-content: start; gap: .35rem 1.25rem; }

.block {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1.25rem 1.4rem; margin-bottom: 1rem;
}
/* Section headings carry the brand colour and a short rule beneath them. This
   is the answer to "everything is grey": the pages were structurally fine and
   chromatically empty, and nine white cards in a column gave the eye nothing to
   catch on. 9.93:1 on the card, so the colour is decoration on top of contrast
   that would pass without it. */
.block h2 {
    font-size: 1.15rem; margin: 0 0 .9rem;
    color: var(--brand-dark);
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--brand-100);
}
/* The alert block already states its own colour, so the indigo would fight it. */
.block--alert h2 { border-bottom-color: #fecaca; }
.block--alert { background: #fef2f2; border-color: #fecaca; }
.block--alert h2 { color: var(--bad-ink); }
.block--muted { background: var(--unknown-bg); border-color: transparent; }
.block--ok { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok-ink); }

/* Brand name editor. One row per marque, so the control has to stay on the
   line it belongs to rather than growing the row it is in. */
.brand-form { display: flex; gap: .4rem; align-items: center; }
.brand-form input {
    font: inherit; font-size: .9rem; padding: .3rem .5rem; width: 11rem;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.brand-form input:focus { border-color: var(--brand); outline: 2px solid var(--brand-50); }
.brand-form button {
    font: inherit; font-size: .85rem; font-weight: 600; border: 0; cursor: pointer;
    background: var(--brand); color: #fff; border-radius: var(--r-sm); padding: .35rem .9rem;
}
.brand-form button:hover { background: var(--brand-dark); }

/* ── dashboard sign-in ────────────────────────────────────────────────────
 *
 * One field and two buttons, so it borrows .brand-form's button rather than
 * introducing a .btn the rest of the sheet does not have. The code input is
 * wide-tracked and monospaced because six digits copied off a phone are read
 * back one at a time, and proportional digits make that harder than it needs
 * to be. */
.login { max-width: 22rem; }
.login-error {
    background: var(--bad-bg); color: var(--bad-ink); font-weight: 600;
    border-radius: var(--r-md); padding: .55rem .8rem; margin: 0 0 .9rem;
}
.login-form { display: grid; gap: .5rem; margin-top: .9rem; }
.login-form label { font-size: .88rem; color: var(--ink-soft); }
.login-code {
    font: inherit; font-family: var(--mono-font); font-size: 1.5rem; font-weight: 700;
    letter-spacing: .35em; text-align: center; direction: ltr;
    border: 1px solid var(--line); border-radius: var(--r-md); padding: .55rem .4rem;
}
.login-code:focus { border-color: var(--brand); outline: 2px solid var(--brand-50); }
.login button {
    font: inherit; font-size: .9rem; font-weight: 600; border: 0; cursor: pointer;
    background: var(--brand); color: #fff; border-radius: var(--r-sm); padding: .5rem 1.1rem;
}
.login button:hover { background: var(--brand-dark); }
.login-resend {
    background: none; border: 0; padding: 0; margin-top: .9rem;
    font: inherit; font-size: .85rem; color: var(--ink-soft);
    text-decoration: underline; cursor: pointer;
}
.login-resend:hover { background: none; color: var(--brand); }

.badge { display: inline-block; font-weight: 700; border-radius: var(--r-md); padding: .5rem 1rem; margin: 0 0 .75rem; }
.badge--valid    { background: var(--ok-bg);      color: var(--ok-ink); }
.badge--expiring { background: var(--warn-bg);    color: var(--warn-ink); }
.badge--expired  { background: var(--bad-bg);     color: var(--bad-ink); }
.badge--unknown  { background: var(--unknown-bg); color: var(--unknown-ink); }

/* Definition lists carry the semantics; the grid is purely visual. */
.facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 2rem; margin: 0; }
.facts dt { color: var(--ink-soft); font-size: .93rem; }
.facts dd { margin: 0; font-weight: 600; }

.figure {
    font-size: 2.2rem; font-weight: 700; margin: 0; line-height: 1.2;
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
}
.figure span { font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
/* Inside the indigo band the figure is already on brand, so it inverts. */
.page-head .figure { color: #fff; }

.note { color: var(--ink-soft); font-size: .9rem; margin: .6rem 0 0; }
.note--warning { color: var(--warn-ink); background: var(--warn-bg); padding: .7rem .9rem; border-radius: var(--r-md); }

.subhead { font-size: 1rem; margin: 1.2rem 0 .4rem; }

.features { margin: 0; padding-inline-start: 1.2rem; columns: 2; column-gap: 1.5rem; font-size: .95rem; }
.features li { break-inside: avoid; margin-bottom: .2rem; }
@media (max-width: 34rem) { .features { columns: 1; } }

/* Ownership timeline. Dealer rows are muted so the eye lands on real owners. */
.timeline { list-style: none; margin: .5rem 0 0; padding: 0; }
.timeline li {
    display: flex; gap: .9rem; align-items: baseline;
    padding: .45rem 0; position: relative;
    border-inline-end: 2px solid var(--brand-100);
    padding-inline-end: 1.1rem; margin-inline-end: .35rem;
}
.timeline li::before {
    content: ""; position: absolute; inset-inline-end: -7px; top: .8rem;
    width: 12px; height: 12px; border-radius: 999px; background: var(--brand);
}
.timeline--dealer::before { background: var(--line); }
.timeline--dealer .timeline-type { color: var(--ink-soft); font-weight: 400; }
/* Was `direction: ltr`, and that was the whole of the reported problem. The
   span held "02/2019 ← 05/2022"; forced into LTR the arrow pointed from the
   later date back to the earlier one, so the range read backwards to anyone
   who looked at it rather than through it. The arrow is gone — the dates are
   joined by "מ־" and "עד" now, which no reading direction can invert — and
   each date carries its own <bdi>, which is what the container was really for. */
.timeline-date { color: var(--ink-soft); font-size: .88rem; min-width: 9rem; font-variant-numeric: tabular-nums; }
.timeline-type { font-weight: 600; }
/* How long the holding lasted, pushed to the far edge — it is the answer to the
   question the dates were making the reader work out for themselves. */
.timeline-span { margin-inline-start: auto; color: var(--ink-soft); font-size: .85rem; }

/* Past uses, as chips rather than as list items — they are read at a glance and
   in any order, and a bulleted list on top of a timeline made the section look
   like two lists of the same thing. */
/* ── מה כדאי לברר ─────────────────────────────────────────────────────────
 *
 * An index into the page, sitting between the headline tiles and everything
 * else. Deliberately plain: a card, a rule, and three short lists.
 *
 * No tint on the block itself, in either direction. A green wash would read as
 * a clean bill of health and no dataset here supports one; a red wash would
 * make every vehicle with an expired licence look condemned. The tiers carry
 * the colour, one row at a time, and each names its own severity in words —
 * SPEC §11, severity is never carried by colour alone.
 */
.signals {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.1rem 1.35rem; margin-top: 1.25rem;
}
.signals h2 { font-size: 1.05rem; margin: 0 0 .2rem; color: var(--ink); }
.signals-none { margin: .5rem 0 0; color: var(--ink-soft); }

.signals-tier {
    font-size: .82rem; font-weight: 700; letter-spacing: .01em;
    margin: 1rem 0 .35rem; padding-inline-start: .55rem;
    border-inline-start: 3px solid currentColor;
}
.signals-tier--act { color: var(--bad-ink); }
.signals-tier--identity { color: var(--warn-ink); }
.signals-tier--ask { color: var(--ink-soft); }
.signals-tier--unchecked { color: var(--ink-soft); }
.signals :is(.signals-tier):first-of-type { margin-top: .75rem; }

.signals-list { list-style: none; margin: 0; padding: 0; }
.signals-list li { padding: .25rem 0; }
.signals-list a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.signals-list a:hover { text-decoration-color: var(--brand); }
/* What could not be evaluated. Quieter than the findings above it, because it
   is not a claim about the vehicle — but present, because a list that hides
   what it did not check is a list that reads as complete. */
.signals-list--unchecked li { color: var(--ink-soft); font-size: .9rem; }

.former-uses { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .9rem 0 0; padding: 0; }
.former-uses li {
    background: var(--warn-bg); color: var(--warn-ink);
    font-size: .85rem; font-weight: 600;
    border-radius: 999px; padding: .2rem .8rem;
}

.flags { margin: .9rem 0 0; padding-inline-start: 1.2rem; }
.flags li { color: var(--warn-ink); font-weight: 600; }

.unknowns { margin: .6rem 0 0; padding-inline-start: 1.2rem; color: #374151; line-height: 1.9; }

.recall { border-top: 1px solid #fecaca; padding-top: .9rem; margin-top: .9rem; }
.recall:first-of-type { border-top: 0; padding-top: 0; }
.recall h3 { font-size: 1rem; margin: 0 0 .35rem; }
.recall p { margin: 0 0 .6rem; }

.cta {
    display: inline-block; text-decoration: none; font-weight: 600;
    background: var(--brand); color: #fff;
    border-radius: var(--r-md); padding: .7rem 1.5rem; margin-top: .75rem;
}
.cta:hover { background: var(--brand-dark); color: #fff; }

/* A 17-character chassis number contains no spaces, no hyphens and therefore no
   break opportunity. In a fixed-layout table on a phone its column is about
   110px and the string needs roughly 160px, so it did not wrap — it overflowed
   and the two vehicles' numbers printed on top of each other.

   overflow-wrap: anywhere rather than word-break: break-all, because it breaks
   only when the string would otherwise overflow, and because it is the one that
   also feeds the min-content width the table uses to lay the column out. */
.mono {
    font-family: var(--mono-font); direction: ltr; display: inline-block;
    font-size: .95em; max-width: 100%; overflow-wrap: anywhere;
}

.freshness { color: var(--ink-soft); font-size: .85rem; }
.freshness p { margin: .3rem 0; }

/* ── models, stats and compare ───────────────────────────────────────────── */

.crumbs { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1rem; }
.crumbs a { color: var(--ink-soft); }

.tiles {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.tiles a {
    display: flex; justify-content: space-between; gap: .5rem; text-decoration: none;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .6rem .9rem;
}
.tiles a:hover { border-color: var(--brand); }
.tiles a { align-items: center; }

/* Four tiles, and only ever four — FleetQueries::TYPES is a closed set, "the
   four ways a reader thinks about vehicles". The default grid is sized for a
   wall of brand names and fits three of them in the 56rem wrap, so the fourth
   type dropped alone onto a second row.

   A column count rather than an auto-fill minimum, because the requirement is
   "two, so four items make a square" and auto-fill cannot say that: a minimum
   small enough to give two columns on a 480px screen also gives three on a
   896px one, which is the orphan again. Tried it first and measured exactly
   that — a minimum wide enough to forbid three left a single stretched column
   out to a 640px container.

   34rem rather than the 30rem this was first set to: at 30rem the widest tile
   — "רכב פרטי ומסחרי" against the fleet total — had 8px between the label and
   the number, which is the flex gap itself. They were touching. The fixture
   hides that, because the local database holds 77,184 vehicles and production
   holds 4,773,610, and the number measured 18px wider once real digits were
   put in it. 34rem is also the breakpoint the rest of this stylesheet already
   turns on.

   The class was added to the view on 2026-08-07 in a commit that touched no
   stylesheet, so the rule it names is being written here for the first time.
   It had been rendering three-and-one for two weeks. */
.tiles--wide { grid-template-columns: 1fr; }
@media (min-width: 34rem) { .tiles--wide { grid-template-columns: 1fr 1fr; } }

/* Latin name over Hebrew name. The stack keeps the count on its own side of
   the tile, which is what makes a column of tiles scannable by number. */
.tile-id { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.tile-name { font-weight: 600; color: var(--ink); }
.tile-alt { font-size: .78rem; color: var(--ink-soft); line-height: 1.3; }
.tile-count { color: var(--ink-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* Heading for a second block on a page that already has an h1. */
.section-head { font-size: 1.15rem; margin: 2.25rem 0 .2rem; }
/* The Hebrew marque under a Latin h1 — same relationship as .tile-alt. */
.page-sub { margin: -.35rem 0 .4rem; color: var(--ink-soft); font-size: .95rem; }

.listing { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.listing th, .listing td { text-align: start; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.listing thead th { font-size: .85rem; color: var(--ink-soft); }
.listing tbody th { font-weight: 600; }
.listing td:last-child { text-align: end; font-variant-numeric: tabular-nums; }

/* Bar chart in plain markup: the value is text, the bar is decoration, so a
   screen reader gets the number without needing the visual. */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: flex; align-items: center; gap: .6rem; padding: .12rem 0; }
.bar-label { min-width: 3rem; font-size: .85rem; color: var(--ink-soft); }
.bar-track { flex: 1; background: var(--bg); border-radius: 999px; height: .7rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.bar-value { min-width: 4rem; text-align: end; font-size: .85rem; font-variant-numeric: tabular-nums; }

.compare-inputs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.compare-inputs label { display: block; font-weight: 600; font-size: .9rem; color: #374151; margin-bottom: .35rem; }
.compare-inputs .plate-field { min-height: 3.2rem; }
.compare-inputs .plate-field input { font-size: 1.3rem; letter-spacing: .06em; padding: 0 .5rem; }
.compare-inputs button {
    font: inherit; font-weight: 700; font-size: 1rem; border: 0; cursor: pointer;
    background: var(--brand); color: #fff; border-radius: var(--r-md);
    padding: .85rem 1.8rem; box-shadow: var(--shadow-brand);
}
.compare-inputs button:hover { background: var(--brand-dark); }

.compare { width: 100%; border-collapse: collapse; margin: 1.5rem 0; table-layout: fixed; }
.compare th, .compare td { padding: .65rem .8rem; border-bottom: 1px solid #e5e7eb; text-align: start; }
.compare thead th { text-align: center; border-bottom: 2px solid var(--line); }
.compare thead td { border-bottom: 2px solid var(--line); width: 32%; }
.compare tbody th { color: var(--ink-soft); font-weight: 400; font-size: .95rem; }
.compare tbody td { font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.compare .alert { color: var(--bad-ink); font-weight: 700; }

/* Who is being compared, stated before anything is compared. The page used to
   open on a table headed by two plate numbers, which named neither car. */
.cmp-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.cmp-head {
    padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: #fff; text-align: center;
}
/* No display of its own. .plate is inline-flex and the blue strip is a ::before
   stretched to full height by align-items: stretch — declaring inline-block here
   took the flex container away, the strip stopped stretching, and it rendered as
   a small badge in the top corner instead of the band down the edge. inline-flex
   is inline-level, so text-align: center above still centres it. */
.cmp-head .plate { margin-bottom: .6rem; }
.cmp-head h2 { font-size: 1.05rem; margin: 0 0 .25rem; line-height: 1.35; }
.cmp-head-sub { color: var(--ink-soft); font-size: .88rem; margin: 0; }
.cmp-head .is-missing { color: var(--ink-soft); font-weight: 400; }

.cmp { width: 100%; border-collapse: collapse; margin: 1rem 0 0; table-layout: fixed; }
.cmp th, .cmp td { padding: .6rem .8rem; border-bottom: 1px solid #e5e7eb; text-align: start; }
.cmp thead th { text-align: center; border-bottom: 2px solid var(--line); font-size: .9rem; }
.cmp thead td { border-bottom: 2px solid var(--line); width: 34%; }
.cmp tbody th { color: var(--ink-soft); font-weight: 400; font-size: .93rem; }
.cmp tbody td { font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

/* Two values that agree carry no information for someone choosing between
   them, so they recede rather than compete with the rows that differ. */
.cmp tr.is-same td { color: var(--ink-soft); font-weight: 400; }

/* Never the only signal: the marked cell is also the one holding the smaller
   number or the later date, and the legend names every field it can appear on.
   Colour alone would fail a reader who cannot see it — SPEC §11. */
.cmp-cell--lead { background: var(--ok-bg); }
.cmp-cell--lead::after {
    content: "✓"; color: var(--ok-ink); font-weight: 700;
    margin-inline-start: .4rem; font-size: .85em;
}
.cmp-cell.is-missing { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }

.cmp-hint { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: .15rem; }

/* When a figure was measured. A mileage reading without its date is worth much
   less — 86,447 km from last month and from 2014 say opposite things. */
.cmp-sub { display: block; font-size: .75rem; font-weight: 400; color: var(--ink-soft); margin-top: .2rem; }

.cmp--binary tbody td { font-weight: 600; }
.cmp .tone-ok { color: var(--ok-ink); }
.cmp .tone-bad { color: var(--bad-ink); }
.cmp .tone-warn { color: var(--warn-ink); }

.example-link { margin: 1.25rem 0 0; font-size: .95rem; }
.example-link a { font-weight: 600; }
.prose--compact { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.prose--compact h2:first-child { margin-top: 0; }
.prose--compact li { margin-bottom: .3rem; }

@media (max-width: 30rem) {
    .cmp th, .cmp td { padding: .5rem .35rem; font-size: .88rem; }
    .cmp thead td { width: 30%; }
    .cmp-head { padding: .75rem .5rem; }
    .cmp-head h2 { font-size: .95rem; }
    /* The wrap above stops the collision at any width; this is only so a
       chassis number lands on two comfortable lines rather than four. */
    .cmp .mono { font-size: .8em; letter-spacing: -.01em; }
}

/* ── guides ──────────────────────────────────────────────────────────────── */
/*
 * A single column, not a grid. The list is meant to be read top to bottom, and
 * it will be short for a long time — a responsive grid with one entry in it is
 * a lonely card in an empty row, which is what this looked like first.
 *
 * The whole card is the link. A title-only link means the description and the
 * date are dead pixels next to it, and on a phone they are most of the target.
 */
.guides { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.guides a {
    display: block; text-decoration: none;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.1rem 1.35rem;
}
.guides a:hover { border-color: var(--brand); }
.guides h2 {
    margin: 0; font-size: 1.15rem; color: var(--ink);
    /* The title is one sentence with a dash in it; balanced, it breaks at the
       dash rather than leaving "אומר" alone on a second line. */
    text-wrap: balance;
}
.guides a:hover h2 { color: var(--brand); }
.guides p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .92rem; max-width: 46rem; }
.guide-date { display: block; margin-top: .55rem; font-size: .8rem; color: var(--ink-soft); }

/* ── legal pages ─────────────────────────────────────────────────────────── */

.prose { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.75rem; }
.prose h1 + p, .prose h2 + p { margin-top: .4rem; }
.prose h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
.prose h2 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
.prose ul { padding-inline-start: 1.2rem; }
.prose li { margin-bottom: .3rem; }

/* Guides are Markdown, so their tables arrive as a bare <table> with no class
   to hang anything on. Styled by element for that reason — the same rule as
   .listing, which these should look like. */
/* display:block so a table too wide for a phone scrolls inside itself instead
   of pushing the whole page sideways. It also leaves the columns at their
   natural width instead of stretching two short columns across the card with
   a corridor of white between them. */
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 1rem 0; }
.prose th, .prose td { text-align: start; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
.prose thead th { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.prose tbody td:last-child { font-variant-numeric: tabular-nums; }

/* On a phone the three-column tables fit, but only by wrapping every cell to
   three lines — 73px rows, measured. The horizontal padding is 11px a side and
   there are six of them across a 300px table, so nearly a quarter of the width
   was gap. Tightening it is what buys the rows back; the alternative was
   rewriting the prose to suit the stylesheet, which is the wrong way round. */
@media (max-width: 30rem) {
    .prose th, .prose td { padding: .4rem .35rem; font-size: .88rem; }
    .prose thead th { font-size: .78rem; }
}
.prose blockquote {
    margin: 1rem 0; padding: .1rem 1rem; border-inline-start: 3px solid var(--brand-100);
    color: var(--ink-soft);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }
.prose .facts { margin-bottom: 1rem; }
.prose .facts dd { font-weight: 400; }
.prose details { margin: 1rem 0; }
.prose summary { cursor: pointer; font-weight: 600; }
.prose code { background: var(--bg); border-radius: 4px; padding: .05rem .3rem; font-size: .9em; }

/* ── installer ───────────────────────────────────────────────────────────── */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.steps { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .85rem; counter-reset: step; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem; color: var(--ink-soft); }
.steps li::before { content: counter(step) ". "; }
.steps li.current { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.steps li.done { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok-ink); }

.cmd {
    background: #111827; color: #e6e9ee; border-radius: var(--r-sm); padding: .8rem 1rem;
    overflow-x: auto; direction: ltr; text-align: left;
    font-family: var(--mono-font); font-size: .85rem; line-height: 1.6; white-space: pre;
}

.checks { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .92rem; }
.checks th, .checks td { text-align: start; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.checks thead th { color: var(--ink-soft); font-weight: 600; font-size: .85rem; }
.checks tbody th { font-weight: 400; }

.check { display: inline-block; border-radius: 999px; padding: .05rem .6rem; font-weight: 600; font-size: .82rem; }
.check--ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.check--warn { background: var(--warn-bg); color: var(--warn-ink); }
.check--bad  { background: var(--bad-bg);  color: var(--bad-ink); }

.stack .field { margin: 0 0 1rem; }
.stack label { display: block; font-weight: 600; margin-bottom: .25rem; }
.stack input[type="text"], .stack input[type="url"], .stack input[type="email"],
.stack input[type="password"], .stack input[type="number"], .stack input:not([type]) {
    width: 100%; font: inherit; padding: .55rem .75rem;
    border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink);
}
.stack input:focus { border-color: var(--brand); }
.stack .help { display: block; color: var(--ink-soft); font-size: .85rem; margin-top: .25rem; }
.stack .error { display: block; color: var(--bad-ink); font-weight: 600; font-size: .85rem; margin-top: .25rem; }
.stack .field--check label { font-weight: 400; }
.stack button, .prose button {
    font: inherit; font-weight: 600; padding: .6rem 1.6rem;
    border: 0; border-radius: var(--r-md); background: var(--brand); color: #fff; cursor: pointer;
}
.stack button:hover, .prose button:hover { background: var(--brand-dark); }

/* ── narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
    .hero { padding-top: 2.5rem; padding-bottom: 3rem; }
    .hero h1 { font-size: 1.8rem; }
    .search .plate-field input { font-size: 1.45rem; }
    .search button { width: 100%; }
    .site-nav { width: 100%; margin-inline-start: 0; }
}

@media (max-width: 30rem) {
    .facts { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .facts dd { margin-bottom: .5rem; }
    .timeline li { flex-wrap: wrap; gap: .2rem .9rem; }
}

/* No animations here, but this keeps a future transition from surprising
   anyone who asked the system not to move things. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── cookie consent ──────────────────────────────────────────────────────── */

/* Hidden before the first paint for anyone who already chose. The marker is set
   by the head script from the cookie, so this never waits on the deferred
   script — on the sister site, drawing the banner after hydration made it the
   LCP element at 1,490ms and the cookie notice set the site's speed score. */
html[data-consent="set"] .consent { display: none; }

/* A notice, sized like one. It was 24rem of card with three equal-weight
   buttons across the bottom, which is the shape of a decision the reader has to
   make before continuing — and under implied consent there is no such decision.
   20rem, tighter type and a button row that does not stretch reads as something
   to acknowledge rather than something blocking the way. */
.consent {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: .6rem;
}
@media (min-width: 40rem) {
    .consent { inset-inline: auto; inset-inline-start: 1rem; bottom: 1rem; max-width: 20rem; }
}
.consent-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: .85rem .95rem; box-shadow: 0 6px 24px rgb(0 0 0 / .13);
}
.consent-text { margin: 0; font-size: .82rem; line-height: 1.5; }
/* The [hidden] rule has to come after, and has to exist at all: `display: grid`
   overrides the user-agent stylesheet's `[hidden] { display: none }`, so the
   settings panel was rendered on the banner at all times — both checkboxes
   visible and on screen, ~95px of it, while the markup said hidden. That is
   why the notice was nearly square, and why "הגדרות" appeared to do nothing:
   it was opening a panel that was never closed. Found 2026-08-23 by measuring
   the card and finding 100px the visible content did not account for. */
.consent-options { display: grid; gap: .6rem; margin-bottom: .2rem; }
.consent-options[hidden] { display: none; }
.consent-options label { display: flex; align-items: start; gap: .55rem; font-size: .84rem; }
.consent-options input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: var(--brand); }
.consent-options .note { display: block; margin: 0; font-size: .78rem; }
/* Not flex: 1. Equal-width buttons made "סירוב" as prominent as "הבנתי" and the
   row as wide as the card, which is what made it read as a gate. */
.consent-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.consent-btn {
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    border-radius: var(--r-md); padding: .4rem .8rem;
}
.consent-btn:hover { border-color: var(--brand); }
.consent-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.consent-btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Looks like the links beside it, because it does the same kind of job. The
   colour is set with them in .footer-links rather than here — `color: inherit`
   is what made it grey among four indigo links. */
.footer-link-button {
    font: inherit; font-size: inherit; background: none; border: 0; padding: 0;
    text-decoration: underline; cursor: pointer;
}

/* ── licence card ─────────────────────────────────────────────────────────
 *
 * The registry's fields in the order the paper licence prints them, so the two
 * can be read across one against the other. It lives on its own route because
 * /car/{plate} already shows these sixty values grouped by subject, and a
 * second copy on the same page is the mistake that shipped earlier today.
 *
 * Styled as this site's card, not as a facsimile. The ministry's document is a
 * different kind of object with different rules attached to it, and something
 * that looked like it would invite being used as one.
 */
.licence {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.25rem 1.5rem; margin-top: 1rem;
}
.licence-head { border-bottom: 2px solid var(--brand-100); padding-bottom: .9rem; }
.licence-head h1 { font-size: 1.3rem; margin: 0 0 .75rem; }

.licence-top { display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; }
.licence-top dt { font-size: .78rem; color: var(--ink-soft); margin-bottom: .15rem; }
.licence-top dd { margin: 0; font-weight: 600; font-size: 1.05rem; }
.licence-plate { font-family: var(--mono-font); letter-spacing: .06em; direction: ltr; text-align: start; }

.licence-group { margin-top: 1.25rem; }
.licence-group h2 {
    font-size: .8rem; font-weight: 700; color: var(--brand-dark);
    margin: 0 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}
/* Label and value on one row, the value taking what it needs — the same
   arrangement the fact cards arrived at after being measured three times. */
.licence-group dl { display: grid; grid-template-columns: minmax(6rem, 1fr) auto; gap: 0 1rem; margin: 0; }
.licence-group dt { padding: .3rem 0; color: var(--ink-soft); font-size: .9rem; }
.licence-group dd { padding: .3rem 0; margin: 0; text-align: end; font-weight: 600; }
.licence-group dd.empty { font-weight: 400; color: var(--ink-soft); }

.licence-foot { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.licence-foot p { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.licence-url { direction: ltr; text-align: start; margin-top: .3rem !important; }

@media (min-width: 46rem) {
    /* Two columns of groups on anything wider than a phone, which is what
       keeps the whole card on one printed page. */
    .licence-groups { columns: 2; column-gap: 2rem; }
    .licence-group { break-inside: avoid; }
}

/* ── print ────────────────────────────────────────────────────────────────
 *
 * SPEC §7 lists a PDF report as phase-4 monetisation. This is most of it for a
 * fraction of the cost, free, with no library, no font embedding and none of
 * the Hebrew RTL bugs a PDF renderer brings. It applies to every page; the
 * licence card is the one it was designed around.
 *
 * The two paragraphs SPEC §12 requires — the tyre disclaimer and the "no lien,
 * insurance or accident data here" note — are deliberately NOT hidden. A print
 * stylesheet is exactly where a disclaimer gets dropped by accident, and the
 * printed page is the copy that gets kept and shown to somebody.
 */
@media print {
    /* Chrome and Firefox both strip backgrounds by default, and the yellow of
       the plate is the one piece of colour that carries meaning rather than
       decoration. */
    .plate, .licence-plate { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    body { background: #fff; font-size: 11pt; line-height: 1.45; }
    main { padding-block: 0; }
    .wrap { width: 100%; }

    /* Navigation, consent and anything that only does something when clicked.
       Checked against the rendered pages rather than written from memory: the
       consent banner's class is .consent, not .consent-banner, and .share was
       a selector for markup that does not exist. A print-only rule that matches
       nothing is discoverable exactly once, on paper, by whoever printed it. */
    .site-header, .site-nav, .site-footer, .skip-link,
    .consent, .cta, [data-print], [data-consent-reopen],
    .crumbs { display: none !important; }

    /* Cards lose their shadow and keep their rule — a border survives a
       photocopier and a shadow does not. */
    .licence, .fact-card, .block, .signals {
        box-shadow: none; border: 1px solid #999; background: #fff;
    }

    /* Nothing that is a unit of meaning may be split across a page break. */
    .fact-card, .licence-group, .signals, .recall, .timeline li, tr {
        break-inside: avoid; page-break-inside: avoid;
    }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

    /* Link targets, but only inside content. Expanding every href would put a
       URL after each item in the navigation and each legal link in the footer —
       which is how a print sheet turns a page into a wall of parentheses. */
    .block a[href^="http"]::after,
    .licence a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }

    /* The card is the page. Everything below it on the licence route is
       navigation back to somewhere. */
    .licence { border: 1px solid #666; padding: 0.8cm; }
    .licence-groups { columns: 2; column-gap: 1.2cm; }

    @page { margin: 1.2cm; }
}