/* Your Car Data — shared report design system (report.html + check.html) */
:root{
  --navy:#0B1F3A; --navy-2:#0e2647;
  --plate:#FFD400; --plate-2:#ffe45c; --plate-band:#123A8F;
  --green:#1CA672; --green-2:#2bd4a0; --green-dark:#158257;
  --red:#d64545; --amber:#c9871f;
  --ink:#0f1723; --muted:#5a6577; --line:#e7eaf1;
  --bg:#ffffff; --bg-alt:#f4f7fb; --card:#ffffff;
  --shadow:0 10px 34px rgba(16,23,37,.09);
  --radius:16px; --maxw:820px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef2f8; --muted:#9aa6bb; --line:#243349;
    --bg:#081120; --bg-alt:#0c1a2f; --card:#0f2038;
    --red:#ff6b6b; --amber:#e0a23a;
    --shadow:0 10px 34px rgba(0,0,0,.42);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-alt);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:24px 18px 64px}
a{color:var(--green);text-decoration:none}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand .name b{color:var(--green)}
.plate{position:relative;display:inline-flex;flex-shrink:0;align-items:stretch;font-size:19px;height:34px;
  background:linear-gradient(180deg,var(--plate-2),var(--plate));color:#111;border-radius:8px;overflow:hidden;
  font-weight:800;font-family:"UKNumberPlate","Charles Wright",Arial,sans-serif;letter-spacing:.06em;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.25)}
/* Same lift-and-tilt as the home page logo. */
.plate{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.brand:hover .plate{transform:translateY(-1px) rotate(-1.5deg)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 46%)}
.plate .band{background:var(--plate-band);color:#fff;display:flex;align-items:center;justify-content:center;
  padding:0 8px;font-size:.6em}
.plate .reg{display:flex;align-items:center;padding:0 13px;white-space:nowrap}
.tag{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-dark);background:rgba(28,166,114,.12);border:1px solid rgba(28,166,114,.25);
  padding:5px 10px;border-radius:999px}
@media (max-width:420px){.top .tag{display:none}}

/* Plate input */
.plate-box{position:relative;display:flex;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--plate-2),var(--plate));
  box-shadow:0 14px 34px -14px rgba(0,0,0,.45),inset 0 0 0 3px rgba(0,0,0,.2)}
.plate-box .gb{background:var(--plate-band);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 14px;font-weight:800;line-height:1}
.plate-box .gb span{font-size:11px;margin-top:3px}
.plate-box input{flex:1;border:0;background:transparent;color:#111;font-weight:800;
  font-size:clamp(26px,7vw,38px);letter-spacing:.09em;text-transform:uppercase;
  text-align:center;padding:14px 8px;min-width:0;font-family:"Charles Wright",Arial,sans-serif}
.plate-box input::placeholder{color:rgba(0,0,0,.3)}
.plate-box input:focus{outline:none}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.btn{border:0;cursor:pointer;font-weight:700;font-size:15px;border-radius:11px;
  padding:13px 24px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;
  box-shadow:0 10px 22px -10px rgba(28,166,114,.7);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.wide{width:100%;justify-content:center;text-align:center;font-size:17px;padding:15px}
.btn.ghost{background:var(--navy);box-shadow:none}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-top:16px}
.card h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.muted{color:var(--muted)}
.empty{color:var(--muted);font-size:14px}

/* Report header */
.rep-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plate-tag{display:inline-flex;background:linear-gradient(180deg,var(--plate-2),var(--plate));
  color:#111;border-radius:8px;font-weight:800;font-size:22px;letter-spacing:.08em;
  padding:8px 14px;font-family:"Charles Wright",Arial,sans-serif;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.rep-title{font-size:22px;font-weight:800}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fact{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.fact b{color:var(--ink)}

/* Status tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg-alt)}
.tile .lab{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.tile .val{font-size:18px;font-weight:800;margin-top:4px}
.tile .val.good{color:var(--green)} .tile .val.bad{color:var(--red)}
.tile .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.tile .val.link{font-size:15px}
.tile .val.link a{color:var(--green);text-decoration:none}
.tile .val.link a:hover{text-decoration:underline}

/* Check rows (provenance) */
.checks{display:flex;flex-direction:column}
.chk-item{border-bottom:1px solid var(--line)}
.chk-item:last-child{border-bottom:0}
.chk{display:flex;align-items:center;gap:12px;padding:12px 0}
.chk.exp{cursor:pointer}
.chk .ic{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:900;color:#fff}
.ic.ok{background:var(--green)} .ic.warn{background:var(--red)} .ic.info{background:var(--muted)}
.ic.caution{background:var(--amber)}
.detail p{margin:0 0 10px;font-size:13.5px;line-height:1.5}
.chk .lab{font-weight:700;font-size:15px}
.chk .det{margin-left:auto;color:var(--muted);font-size:14px;text-align:right}
.chk .chev{flex:0 0 auto;margin-left:2px;color:var(--muted);font-size:11px;transition:transform .2s}
.chk.open .chev{transform:rotate(90deg)}
.detail{display:none;padding:0 0 14px 36px}
.detail.open{display:block}
.rec{background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px}
.rec:last-child{margin-bottom:0}
.rec dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.rec dt{color:var(--muted);font-weight:600;font-size:13px}
.rec dd{margin:0;text-align:right;font-size:13px;font-weight:700}
.spec-sub{color:var(--muted);font-size:14px;margin:-4px 0 14px}
.spec-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0 0 16px}
.spec-stat{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg-alt)}
.spec-stat .v{font-size:20px;font-weight:800;line-height:1.2}
.spec-stat .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-top:3px}
.stars{color:#f5b301;letter-spacing:1px} .stars-off{color:var(--line);letter-spacing:1px}
.spec-groups{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.spec-groups{grid-template-columns:1fr}}
.spec-group{break-inside:avoid}
.spec-group h3{font-size:13px;margin:0 0 6px}
.spec-group .rec{margin:0}
.spec-note{color:var(--muted);font-size:12.5px;margin:12px 0 0}
.spec-note--top{margin:12px 0 16px}
.est-note{font-size:12.5px;margin:10px 0 0}
.car-photo{margin:-4px 0 14px;text-align:center}
.car-photo img{display:block;width:100%;max-width:560px;max-height:240px;object-fit:contain;margin:0 auto}
.car-photo figcaption{color:var(--muted);font-size:11.5px;margin-top:4px}
.milerow{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.milerow:last-child{border-bottom:0}
.milerow .mm{font-weight:700}
.milerow .ms{width:100%;color:var(--muted);font-size:11.5px}
.milerow .ms.bad{color:var(--red);font-weight:600}

.verdict{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;
  padding:8px 14px;border-radius:999px;margin-bottom:6px}
.verdict.clear{color:var(--green-dark);background:rgba(28,166,114,.12)}
.verdict.flags{color:var(--red);background:rgba(214,69,69,.12)}

/* MOT history */
.mot{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px}
.mot-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px}
.pill.pass{color:#fff;background:var(--green)} .pill.fail{color:#fff;background:var(--red)}
.mot .mi{font-size:13px;color:var(--muted);margin-top:4px}
.defects{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--muted)}
.defects li.dang{color:var(--red);font-weight:600}

/* Locked purchase panel (check.html) */
.locked .lock-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px}
.price{font-size:15px;font-weight:800;color:var(--green);margin-left:auto}
.incl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.incl li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.incl li::before{content:"✓";color:var(--green);font-weight:900}
.buy-box{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.field{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 14px;font-size:15px;
  background:var(--bg-alt);color:var(--ink)}
.field:focus{outline:none;border-color:var(--green)}
.reassure{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}

/* Status / spinner */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px}
.spinner.dark{border-color:rgba(90,101,119,.35);border-top-color:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}
.centre{text-align:center;padding:40px 0;color:var(--muted)}
.centre .big{font-size:20px;font-weight:800;color:var(--ink);margin-top:14px}
.foot{margin-top:30px;font-size:12px;color:var(--muted);text-align:center}

/* Print (report.html) */
#printhead{display:none;align-items:flex-start;justify-content:space-between;
  padding-bottom:12px;margin-bottom:10px;border-bottom:2px solid var(--navy)}
#printhead .ph-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
#printhead .ph-brand .name{color:#0B1F3A}
#printhead .ph-brand .name b{color:#158257}
#printhead .ph-meta{font-size:12px;color:#555;text-align:right;line-height:1.5}
@media print{
  @page{margin:14mm}
  body{background:#fff}
  .no-print,details{display:none !important}
  .wrap{max-width:100%;padding:0}
  .card{box-shadow:none;break-inside:avoid;border-color:#ddd;margin-top:12px}
  .card.spec{break-inside:auto}          /* tall: may split between its sections */
  .spec-top{break-inside:avoid}
  .chev{display:none !important}
  .detail{display:block !important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printhead{display:flex !important}
  /* Print-safe plate: solid colours + explicit hex (no gradient, no gloss
     overlay, no CSS vars) so the logo renders reliably in the PDF. */
  #printhead .plate{background:#FFD400 !important;box-shadow:none;border:1px solid #b58b00}
  #printhead .plate::after{display:none !important}
  #printhead .plate .band{background:#123A8F !important;color:#fff !important}
  #printhead .plate .reg{color:#111 !important}
}

/* Mileage chart (renderMileage) */
.mchart-wrap{margin:14px 0 6px}
.mchart{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
.mchart .grid{stroke:var(--line);stroke-width:1}
.mchart text{fill:var(--muted);font-size:12px;font-family:inherit}
.mchart .ln{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.mchart .ar{fill:var(--green);opacity:.12}
.mchart .dot{fill:var(--green)}
.mchart .drop{fill:var(--red);stroke:var(--card);stroke-width:2}