/* MOT Pass Rate — mobile-first, no framework, no webfonts.
   System fonts only: a webfont is 15-40KB and a render-blocking round trip
   on 4G, and the plate is the only place typography carries meaning — that is
   solved with weight and letter-spacing instead. */

:root {
  --ink:        #12263a;

  --ink-soft:   #55677d;
  --line:       #dde3ea;
  --bg:         #f4f6f9;
  --surface:    #ffffff;
  --plate:      #ffd200;
  --plate-ink:  #111111;
  --pass:       #0a7d3f;
  --pass-bg:    #e6f4ec;
  --fail:       #b3261e;
  --fail-bg:    #fdeceb;
  --advisory:   #8a6100;
  --advisory-bg:#fdf5e3;
  --accent:     #12263a;
  --radius:     12px;
  --shadow:     0 1px 2px rgba(18,38,58,.06), 0 4px 12px rgba(18,38,58,.05);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

.wrap { width: 100%; max-width: 34rem; margin: 0 auto; padding: 0 1rem; }

.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;
}

/* ---------- masthead ---------- */

.masthead { background: var(--ink); color: #fff; padding: 1.25rem 0 1.5rem; }
.wordmark { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.wordmark span { color: var(--plate); }
.strapline { margin: .35rem 0 0; font-size: .9375rem; color: #b9c6d4; }

/* ---------- the plate ---------- */

.plate {
  display: flex; align-items: stretch; gap: 0;
  background: var(--plate);
  border: 2px solid #101010;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.plate__band {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: #003399; color: #fff;
  padding: .4rem .5rem;
  min-width: 2.25rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .04em;
}
.plate__band b { font-weight: 800; }

.plate input,
.plate--static span:not(.plate__band) {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--plate-ink);
  /* Charles Wright is not a system font anywhere. Heavy weight plus generous
     tracking on a condensed-ish system stack reads as a plate without the
     download. */
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.75rem, 9vw, 2.5rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  padding: .35rem .5rem;
  line-height: 1.2;
}
/* The placeholder must read as an INSTRUCTION, never as a filled-in plate.
   On a real phone the old one (same weight, same size, same tracking, just
   32% alpha) looked like a registration was already entered — so an empty
   submit showed an error contradicting what the plate appeared to say.

   Measured on a 390x844 render: the old placeholder was 2.05:1 against the
   yellow. Contrast was never the problem — MASS was. At weight 800, 2.5rem,
   with plate tracking, that is a lot of ink, and volume reads as real text
   however faint it is.

   So mass comes down on four axes at once and contrast goes UP, because a
   lighter, smaller, italic hint needs to stay legible:
     weight  800 -> 500      much less ink
     size     1em -> .62em   clearly not plate-sized
     style   roman -> italic no registration is ever italic
     track   .06em -> .01em  loses the plate cadence
   opacity is pinned because Firefox applies its own 0.54 to placeholders,
   which would undo the contrast decision on one browser only. */
.plate input::placeholder {
  color: #6f6212;
  font-weight: 500;
  font-style: italic;
  font-size: .62em;
  letter-spacing: .01em;
  /* The input is uppercased so typed input always looks like a plate. That
     transform reaches the placeholder too, which turned the hint into a
     shouted "E.G. AA19 AAA" — undoing the very softness this rule adds. */
  text-transform: none;
  opacity: 1;
}
.plate:focus-within { box-shadow: 0 0 0 3px rgba(18,38,58,.35), var(--shadow); }

/* The SAME plate as the search box — band, stars, size — so the two never
   read as two different registrations. app.js copies the band across. */
.plate--static { margin: 0 0 1rem; }

/* ---------- search ---------- */

.search { margin: -1rem 0 1.5rem; }

.btn {
  position: relative;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem;
  border: 0; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600;
  cursor: pointer;
  margin-top: .75rem;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:active { transform: translateY(1px); }
.btn--secondary {
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); width: auto; margin: 0; padding: 0 1rem;
  min-height: 2.75rem; white-space: nowrap;
}
.btn[disabled] { opacity: .65; cursor: default; }

.spinner { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.field-error {
  margin: .5rem 0 0; padding: .5rem .7rem;
  background: var(--fail-bg); color: var(--fail);
  border-left: 3px solid var(--fail); border-radius: 4px;
  font-size: .9375rem;
}

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin: 0 0 1rem;
}
.card__title {
  margin: 0 0 .75rem; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
}
.card--error { border-color: #f3c9c6; background: var(--fail-bg); }
.card--unlock { background: linear-gradient(180deg,#fff, #f7f9fc); }

.muted { color: var(--ink-soft); font-size: .9375rem; margin: 0 0 .75rem; }

/* A fabricated-data label. Deliberately louder than .muted — it is the only
   thing separating a demo page from a real one when the registration is real.
   Reuses the house advisory palette: #8a6100 on #fdf5e3 clears AA at this
   size, checked because the plate placeholder taught us not to assume. */
.demo-notice {
  margin: .5rem 0 .75rem;
  padding: .625rem .75rem;
  border-left: 4px solid var(--advisory);
  border-radius: 6px;
  background: var(--advisory-bg);
  color: var(--advisory);
  font-size: .9375rem;
  font-weight: 600;
}

/* ---------- vehicle facts ---------- */

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin: 0; }
.facts div { min-width: 0; }
.facts dt {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: 600;
}
.facts dd { margin: .1rem 0 0; font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }

.pending {
  display: flex; gap: .6rem; align-items: flex-start;
  background: #f0f4f8; border-radius: 8px; padding: .75rem;
  color: var(--ink-soft); font-size: .9375rem;
}
.pending::before { content: "⋯"; font-weight: 800; font-size: 1.1rem; line-height: 1; }

/* ---------- MOT status ---------- */

.status-line {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem; border-radius: 8px; margin: 0 0 1rem;
  font-weight: 600;
}
.status-line--pass { background: var(--pass-bg); color: var(--pass); }
.status-line--fail { background: var(--fail-bg); color: var(--fail); }
.status-line--unknown { background: #f0f4f8; color: var(--ink-soft); }
/* Questions for the seller (app/buyer_flags.py). Amber, like an advisory:
   something to ask about, not a fault. */
.flags { margin: .75rem 0 1rem; padding: .6rem .8rem; border-left: 4px solid var(--advisory);
  border-radius: 6px; background: var(--advisory-bg); }
.flags h3 { margin: 0 0 .3rem; font-size: .875rem; color: var(--advisory); }
.flags ul { margin: 0; padding-left: 1.1rem; font-size: .9375rem; line-height: 1.5; }
.status-line small { display: block; font-weight: 400; opacity: .85; }

/* ---------- mileage chart ---------- */

.chart { margin: 0 0 1.25rem; }
.chart figcaption {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: 600; margin-bottom: .4rem;
}
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: rgba(18,38,58,.07); }
.chart .dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.chart .lbl { font-size: 10px; fill: var(--ink-soft); }

/* ---------- timeline ---------- */

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: .3125rem; top: .4rem; bottom: .4rem;
  width: 2px; background: var(--line);
}
.tl-item { position: relative; padding: 0 0 1.25rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -1.5rem; top: .45rem;
  width: .75rem; height: .75rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
}
.tl-item--pass::before { border-color: var(--pass); background: var(--pass); }
.tl-item--fail::before { border-color: var(--fail); background: var(--fail); }

.tl-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.badge {
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: .15rem .45rem; border-radius: 4px;
}
.badge--pass { background: var(--pass-bg); color: var(--pass); }
.badge--fail { background: var(--fail-bg); color: var(--fail); }
.badge--other { background: #eef1f5; color: var(--ink-soft); }
.tl-date { font-weight: 600; }
.tl-meta { color: var(--ink-soft); font-size: .875rem; margin: .15rem 0 0; }

details.defects { margin: .5rem 0 0; }
details.defects > summary {
  cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--accent);
  list-style: none; display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem 0;
}
details.defects > summary::-webkit-details-marker { display: none; }
details.defects > summary::after { content: "▾"; font-size: .7em; transition: transform .15s; }
details.defects[open] > summary::after { transform: rotate(180deg); }
.defect-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.defect-list li {
  font-size: .875rem; padding: .4rem .6rem; margin: 0 0 .3rem;
  border-radius: 6px; border-left: 3px solid;
}
.defect--fail { background: var(--fail-bg); border-color: var(--fail); }
.defect--advisory { background: var(--advisory-bg); border-color: var(--advisory); }
.defect-type {
  font-size: .625rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; display: block; opacity: .8;
}

/* ---------- comparison ---------- */

.compare-row { display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.compare-row:last-child { border-bottom: 0; }
.compare-row b { font-weight: 700; white-space: nowrap; }
.compare-row--head { border-bottom: 0; padding-bottom: .2rem; color: var(--ink-soft);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.compare-row--bar { align-items: center; gap: .6rem; }
.compare-row--bar span:first-child { flex: 0 0 42%; }
.bar { flex: 1; height: .5rem; background: #eef1f5; border-radius: 999px; overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.compare-note { margin: .75rem 0 0; font-size: .8125rem; }

/* ---------- tell us your car ---------- */

.card--ask,
.card--thin { background: linear-gradient(180deg,#fff,#f7f9fc); }
.ask-grid { display: grid; gap: .75rem; }
.field { display: block; }
.field > span {
  display: block; margin-bottom: .3rem;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: 600;
}
.field select {
  width: 100%; min-height: 2.75rem;
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0 2rem 0 .75rem; font-size: 1rem; color: var(--ink);
  background-color: #fff;
  /* Chevron drawn inline: a background-image URL would be a second request
     for 300 bytes, and the native arrow is inconsistent across platforms. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  -webkit-appearance: none; appearance: none;
}
.field select:disabled { background-color: #f4f6f9; color: var(--ink-soft); }
.field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.note--quiet { background: #f0f4f8; color: var(--ink-soft); }

@media (min-width: 30rem) {
  .ask-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- freshness / links ---------- */

.freshness {
  font-size: .875rem; color: var(--ink-soft);
  margin: 0 0 1rem; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap;
}
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent); font-weight: 600; text-decoration: underline;
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
}
.freshness .linkbtn { min-height: auto; }
/* .linkbtn's display would otherwise beat the hidden attribute (app.js hides
   the link on today's data). */
.linkbtn[hidden] { display: none; }

/* ---------- unlock ---------- */

.inline-field { display: flex; gap: .5rem; }
/* width:100%: a stacked .field input is sized by its card, not a sibling .btn. */
.inline-field input,
.field input {
  flex: 1; min-width: 0; min-height: 2.75rem; width: 100%;
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0 .75rem; font-size: 1rem; color: var(--ink); background: #fff;
}
.inline-field input:focus,
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; gap: .55rem; align-items: flex-start; margin: .75rem 0 0;
  font-size: .875rem; color: var(--ink-soft); cursor: pointer; }
.check input { margin: .15rem 0 0; width: 1.1rem; height: 1.1rem; flex: none; }
.note { margin: .75rem 0 0; font-size: .875rem; color: var(--pass);
  background: var(--pass-bg); padding: .5rem .7rem; border-radius: 6px; }

.footer { padding: 1.5rem 1rem 2rem; }
.footer p { margin: 0; font-size: .8125rem; color: var(--ink-soft); }

/* ---------- wider screens ---------- */

@media (min-width: 40rem) {
  .wrap { max-width: 40rem; }
  .facts { grid-template-columns: repeat(3, 1fr); }
}

/* Vehicle image. Hidden outright when absent, so a missing one collapses
   nothing. */
.vehicle-image {
  display: block; width: 100%; max-width: 22rem; height: auto;
  margin: 0 0 1rem; border-radius: 8px; background: #f2f2f2;
}

/* Paid tier. Heavier than .card--unlock on purpose: the two gates stack, and
   must not read as equal asks. Free first, paid second. */
.card--paid { border: 2px solid #1b1b1b; background: #fbfbfb }
.paid__list { margin: .75rem 0 1rem; padding-left: 1.15rem; line-height: 1.7 }
.paid__terms { font-size: .9rem }
.btn--primary { background: #1b1b1b; color: #fff; border: 1px solid #1b1b1b }
.btn--primary:hover:not(:disabled) { background: #000 }
.btn--primary:disabled { opacity: .6; cursor: not-allowed }

/* Headlines: the statistic as a sentence, above the detail that supports it.
   .headline leads a model page (no subject stated yet, so it carries weight);
   .card__title--headline leads a section on a page that already has one. */
.card__title--headline { font-size: 1.15rem; line-height: 1.35 }
.compare-sub { margin: -.25rem 0 .9rem; font-size: .875rem }