/* Roadworthy — MOT / annual test history lookup. Builds on legal.css + guide.css. */

/* ---- the search box ---- */
.lookup{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 18px;margin:0 0 22px;box-shadow:0 2px 10px rgba(31,56,100,.07);}
.lookup h2{margin:0 0 10px;border:none;padding:0;font-size:17px;}
.lookform{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;}

/* A UK number plate, because that is what people are holding when they use this.
   Charles Wright is not on most machines, so the system stack in bold caps is the
   honest approximation — never a webfont for decoration. */
.plate{flex:1 1 240px;min-width:0;display:flex;align-items:stretch;border-radius:8px;
  overflow:hidden;border:2px solid #111;background:#f5c400;}
.plate .gb{flex:none;width:34px;background:#0b3d91;color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.04em;}
.plate .gb::before{content:"";display:block;width:14px;height:14px;margin-bottom:4px;border-radius:50%;
  background:radial-gradient(circle,#ffd700 0 3px,transparent 3px),#0b3d91;
  box-shadow:0 0 0 1px rgba(255,215,0,.5) inset;}
.plate input{flex:1;min-width:0;border:0;background:transparent;color:#111;
  font-family:var(--sans);font-size:26px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:10px 12px;text-align:center;}
.plate input::placeholder{color:rgba(0,0,0,.35);font-weight:700;letter-spacing:.06em;}
.plate input:focus{outline:none;}
.plate:focus-within{box-shadow:0 0 0 3px var(--amber-2);}

.lookform button{flex:0 0 auto;padding:12px 22px;border:0;border-radius:10px;
  background:var(--navy);color:#fff;font-weight:800;font-size:15.5px;cursor:pointer;}
.lookform button:hover{background:var(--navy-deep);}
.lookform button:disabled{opacity:.6;cursor:default;}
.lookhint{margin:10px 0 0;font-size:12.5px;color:var(--faint);}
.lookmsg{margin:12px 0 0;font-size:14.5px;min-height:1.2em;}
.lookmsg.err{color:#a3151b;}
:root[data-theme="dark"] .lookmsg.err{color:#ff9a9a;}

/* the offline / not-yet-configured state — honest, not a broken form */
.notlive{background:#fff8e6;border:1px solid var(--amber-2);border-left:4px solid var(--amber-2);
  color:#6b4e00;border-radius:10px;padding:14px 16px;font-size:14px;margin:0 0 22px;}
:root[data-theme="dark"] .notlive{background:#33280c;color:#ffd98a;}

/* ==========================================================================
   THE RESULT
   Rebuilt 6 Aug 2026. The first version stacked one card per test with every
   defect spelled out, and the verdict on it was fair: just a lot of text. A
   lorry with five advisories a year buried the answer under tester shorthand.

   Grounded in the KB (graphics-design 01 visual-fundamentals, 07 interface):
   - Hierarchy decided before styling. One: is it legal right now. Two: what it
     has done (the mileage shape). Three: per-test detail, on demand.
   - One accent owns state. Status colour appears on the status tile and the
     timeline dots and nowhere else, so it stays pre-attentive.
   - Never colour alone: every coloured dot has a word beside it.
   - Spacing on a 4px scale, so it all sits on one invisible grid.
   - Subtractive. The defect lists are closed by default, and that single change
     cut more text than every other edit put together.
   ========================================================================== */

#result{margin:0 0 8px;}
#result:empty{display:none;}

/* Local-preview-only warning. Deliberately ugly — it must be impossible to mistake a
   fixture answer for a real one, which is exactly what happened on 6 Aug 2026. */
.fixture-warn{background:#a3151b;color:#fff;border-radius:10px;padding:12px 15px;
  margin:0 0 12px;font-size:13.5px;line-height:1.45;}
.fixture-warn a{color:#fff;font-weight:700;}

/* ---- vehicle identity ---- */
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin:0 0 12px;}
.vcard .vreg{display:inline-block;background:#f5c400;color:#111;border:2px solid #111;border-radius:6px;
  padding:4px 12px;font-size:20px;font-weight:800;letter-spacing:.08em;}
.vcard h2{margin:10px 0 0;border:none;padding:0;font-size:22px;letter-spacing:-.01em;}
.vmeta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:13.5px;color:var(--muted);}
.vmeta b{color:var(--ink);font-weight:600;}

.recall{margin-top:12px;border-radius:9px;padding:10px 13px;font-size:13.5px;
  background:#fde8e8;color:#a3151b;border:1px solid #f2b8b8;}
:root[data-theme="dark"] .recall{background:#3a1414;color:#ff9a9a;border-color:#5c2020;}

/* ---- the status strip: the answer, before any detail ---- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px;}
@media (max-width:560px){.strip{grid-template-columns:1fr;}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;}
.tile .tl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.tile .tv{display:block;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink);}
.tile .tv em{font-style:normal;font-size:13px;font-weight:700;color:var(--faint);margin-left:5px;}
.tile .tn{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;}

/* Status is the one tile allowed a colour, so it wins the eye without competing. */
.tile.good{border-color:#9fd8b1;background:#e8f6ec;}
.tile.good .tv{color:#1c7a3e;}
.tile.warn{border-color:#f0d488;background:#fff4d6;}
.tile.warn .tv{color:#8a5a00;}
.tile.bad{border-color:#f2b8b8;background:#fde8e8;}
.tile.bad .tv{color:#a3151b;}
:root[data-theme="dark"] .tile.good{background:#123123;border-color:#1f5c3a;}
:root[data-theme="dark"] .tile.good .tv{color:#7fe0a3;}
:root[data-theme="dark"] .tile.warn{background:#33280c;border-color:#5c4a12;}
:root[data-theme="dark"] .tile.warn .tv{color:#ffd98a;}
:root[data-theme="dark"] .tile.bad{background:#3a1414;border-color:#5c2020;}
:root[data-theme="dark"] .tile.bad .tv{color:#ff9a9a;}

/* ---- mileage sparkline: one series, so no legend — the heading names it ---- */
.mileage,.history{margin:0 0 20px;}
.mileage h3,.history h3{font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px;font-weight:700;border:none;padding:0;}
.spark{display:block;width:100%;height:96px;overflow:visible;}
.sp-line{fill:none;stroke:var(--navy-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;}
.sp-area{fill:rgba(40,73,126,.10);stroke:none;}
.sp-dot{fill:var(--surface);stroke:var(--navy-2);stroke-width:2;vector-effect:non-scaling-stroke;}
:root[data-theme="dark"] .sp-line,:root[data-theme="dark"] .sp-dot{stroke:var(--amber);}
:root[data-theme="dark"] .sp-area{fill:rgba(255,183,3,.12);}
.sp-foot{display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  font-size:13.5px;font-weight:700;color:var(--ink);}
.sp-foot small{display:block;font-weight:400;font-size:11.5px;color:var(--faint);margin-top:1px;}
.sp-foot .sp-rate{text-align:center;color:var(--muted);}
.sp-foot .sp-last{text-align:right;}

/* ---- one boxed card per test ----
   ⚠️ SETTLED — do not change this again without asking. A timeline rail (left border,
   coloured dots) was built and shipped, then compared against these cards on two frozen
   deployments with real data; John picked the cards, 6 Aug 2026. It has been swapped
   twice already. The coloured left border carries pass/fail, so no dot is needed. */
.test{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:12px;padding:14px 16px;margin:0 0 10px;}
.test:last-child{margin-bottom:0;}
.test.pass{border-left-color:#2a9d4a;}
.test.fail{border-left-color:#a3151b;}
.thead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.tdate{font-size:15.5px;font-weight:700;color:var(--ink);}
.tverdict{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;}
.test.pass .tverdict{background:#e5f6ec;color:#1c7a3e;}
.test.fail .tverdict{background:#fde8e8;color:#a3151b;}
:root[data-theme="dark"] .test.pass .tverdict{background:#123123;color:#7fe0a3;}
:root[data-theme="dark"] .test.fail .tverdict{background:#3a1414;color:#ff9a9a;}
.tsub{font-size:13px;color:var(--muted);margin-top:4px;}

/* ---- defects, closed by default ---- */
.dets{margin-top:8px;}
.dets summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);}
.dets summary::-webkit-details-marker{display:none;}
.dets summary::after{content:"\25BE";font-size:10px;}
.dets[open] summary::after{content:"\25B4";}
.dets summary:hover{border-color:var(--faint);}
.dets summary.dangerous{background:#fde8e8;border-color:#f2b8b8;color:#a3151b;}
.dets summary.major{background:#fff3d6;border-color:#f0d488;color:#8a5a00;}
:root[data-theme="dark"] .dets summary.dangerous{background:#3a1414;border-color:#5c2020;color:#ff9a9a;}
:root[data-theme="dark"] .dets summary.major{background:#33280c;border-color:#5c4a12;color:#ffd98a;}
.dets ul{margin:10px 0 0;padding-left:0;list-style:none;}
.dets li{font-size:13.5px;margin-bottom:6px;line-height:1.45;color:var(--ink);}
.dt{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;font-weight:700;
  padding:1px 6px;border-radius:5px;margin-right:7px;white-space:nowrap;vertical-align:1px;}
.dt.dangerous{background:#fde8e8;color:#a3151b;border:1px solid #f2b8b8;}
.dt.major,.dt.fail{background:#fff3d6;color:#8a5a00;border:1px solid #f0d488;}
.dt.minor,.dt.advisory{background:#eef2f8;color:#51617e;border:1px solid #d5deee;}
:root[data-theme="dark"] .dt.dangerous{background:#3a1414;color:#ff9a9a;border-color:#5c2020;}
:root[data-theme="dark"] .dt.major,:root[data-theme="dark"] .dt.fail{background:#33280c;color:#ffd98a;border-color:#5c4a12;}
:root[data-theme="dark"] .dt.minor,:root[data-theme="dark"] .dt.advisory{background:#1b2942;color:#a7b6cf;border-color:#26374f;}

/* "nothing here" is a real answer for a pre-2018 heavy vehicle — say why */
.nores{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;font-size:14.5px;color:var(--muted);}
.nores b{color:var(--ink);}

.ogl{font-size:12.5px;color:var(--faint);font-family:var(--mono);margin:22px 0 0;}

/* A worked example of a record, below the prose that describes one. Deliberately NOT
   above it: a live lookup renders into #result higher up the page, and two records on
   screen at once would leave a reader unsure which one is theirs. */
.example{margin:24px 0 0;text-align:center;}
.example img{display:block;margin:0 auto;width:min(100%,520px);height:auto;
  border-radius:14px;border:1px solid var(--line);background:var(--surface);}
.example figcaption{font-size:12.5px;color:var(--muted);margin-top:9px;}