/* 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 ---- */
#result{margin:0 0 8px;}
#result:empty{display:none;}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 18px;}
.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:11px 0 4px;border:none;padding:0;font-size:21px;}
.vmeta{display:flex;flex-wrap:wrap;gap:6px 18px;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;}

.counts{font-size:13px;color:var(--faint);font-family:var(--mono);margin:0 0 12px;}

/* one test = one card, newest first */
.test{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:0 0 11px;border-left:4px solid var(--line);}
.test.pass{border-left-color:#2a9d4a;}
.test.fail{border-left-color:#a3151b;}
.test .thead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;}
.test .tdate{font-weight:700;font-size:15.5px;}
.test .todo{margin-left:auto;font-size:12.5px;color:var(--faint);font-family:var(--mono);}
.test .tsub{font-size:13px;color:var(--muted);margin-top:4px;}
.test ul{margin:10px 0 0;padding-left:19px;}
.test li{font-size:14px;margin-bottom:5px;}
.test li .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;font-weight:700;
  padding:1px 6px;border-radius:5px;margin-right:7px;white-space:nowrap;}
.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;}