/* ============================================================
   VIN decoder — /vin-decoder/ only.

   Scales the homepage's .stamp component up to page size and
   dresses the results the ported script generates. The script
   emits `car-vin-*` class names and those are left ALONE — the
   restyle happens here, so the decoder logic never had to be
   touched to change how it looks.

   site.css is not edited: it must stay byte-identical to the
   approved mockup (verify-design-fidelity.js asserts it).
   ============================================================ */

.dec-head{padding:clamp(40px,6vw,76px) 0 clamp(22px,3vw,34px)}
.dec-head h1{font-size:clamp(38px,5.6vw,68px)}
.dec-head h1 .split{display:block;color:var(--cobalt)}
.dec-head .lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:54ch;margin:20px 0 0}

.dec-tool{padding:0 0 clamp(36px,5vw,60px)}

/* --- the stamp at page scale --------------------------------------------
   Same component, bigger. Only the sizes change; every colour, radius and
   border comes from site.css so the homepage card and this one cannot drift. */
.dec-stamp{max-width:820px}
.dec-stamp .stamp-body{padding:clamp(26px,4vw,40px) clamp(20px,3vw,34px) clamp(24px,3vw,32px)}
.dec-stamp .stamp-body h2{font-size:clamp(26px,3.4vw,34px)}
.dec-stamp .stamp-body>p{max-width:46ch;font-size:15.5px}
.dec-stamp .vin-field input{font-size:clamp(17px,2.2vw,21px);padding:17px 18px}
.dec-stamp .vin-field .btn{padding:17px 26px}
.dec-stamp .vin-field input:disabled,.dec-stamp .btn:disabled{opacity:.55;cursor:not-allowed}

/* Cold-start notice. Amber, because it is a wait rather than a fault. */
.dec-waking{
  margin-top:16px;padding:12px 14px;border-radius:var(--r);
  background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.4);
  color:var(--amber);font-size:14px;line-height:1.45;
}

/* --- status lines the script writes into #carVinResults ------------------ */
.car-vin-status{
  margin-top:26px;padding:16px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--white);font-size:15.5px;
}
.car-vin-status.loading{color:var(--ink-2)}
.car-vin-status.error{background:#FDECEA;border-color:#E7B4AE;color:#8C2018}
.car-vin-status.warning{background:#FBF3E2;border-color:#E6D3A8;color:var(--amber-dk)}

/* --- the ledger ---------------------------------------------------------- */
.dec-results{margin-top:30px}
.car-vin-result-header{
  font-family:var(--display);font-weight:800;font-stretch:90%;
  font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1.08;
}
.car-vin-result-sub{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--steel);
  margin-top:8px;word-break:break-all;
}
.car-vin-ledger-group{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin-top:18px;
}
.car-vin-ledger-title{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
/* A real dotted leader, so label and value stay tied across a wide row. */
.car-vin-ledger-row{display:flex;align-items:baseline;gap:6px;padding:7px 0;font-size:15.5px}
.car-vin-ledger-row .label{color:var(--steel);flex:0 0 auto}
.car-vin-ledger-row .leader{
  flex:1 1 auto;min-width:14px;align-self:flex-end;margin-bottom:5px;
  border-bottom:1px dotted var(--steel-2);opacity:.65;
}
.car-vin-ledger-row .value{
  flex:0 1 auto;text-align:right;color:var(--ink);font-weight:500;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

/* --- the matched-engine card --------------------------------------------- */
.dec-engine{margin-top:22px}
.car-vin-engine-card{
  background:var(--ink);color:var(--paper-2);border-radius:var(--r);
  padding:clamp(24px,3.5vw,34px);border-left:5px solid var(--amber);
}
.car-vin-engine-card h3{
  font-family:var(--display);font-weight:800;font-stretch:88%;
  font-size:clamp(22px,2.8vw,30px);color:var(--white);letter-spacing:-.02em;line-height:1.08;
}
.car-vin-engine-vehicle{color:var(--steel-2);margin:8px 0 20px;font-size:15px}
.car-vin-spec-table{display:grid;gap:1px;background:rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden}
.car-vin-spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--ink);padding:11px 14px;font-size:15px;
}
.car-vin-spec-label{color:var(--steel-2)}
.car-vin-spec-value{color:var(--white);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.car-vin-engine-years,.car-vin-fitments{margin-top:16px;font-size:14.5px;color:var(--steel-2);line-height:1.5}
.car-vin-fitments strong{color:var(--paper-2)}
.car-vin-cta-btn{
  display:inline-flex;align-items:center;margin-top:22px;
  font-family:var(--body);font-size:16px;font-weight:600;text-decoration:none;
  padding:14px 22px;border-radius:var(--r);background:var(--amber);color:var(--ink);
}
.car-vin-cta-btn:hover{background:#E89C10}

/* Source citation. Tap-toggled by the script, so it works where hover does
   not — the popover is shown by a class the script adds, never by :hover. */
.car-vin-info-btn{
  position:relative;margin-left:7px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--steel-2);font-size:12px;line-height:1;
}
.car-vin-info-btn:hover{color:var(--white)}
.car-vin-info-popover{
  display:none;position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;
  width:max-content;max-width:260px;text-align:left;
  background:var(--white);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);padding:9px 12px;font-size:12.5px;line-height:1.4;font-weight:400;
  box-shadow:0 10px 26px rgba(20,24,28,.3);
}
.car-vin-info-popover.car-vin-info-open{display:block}

/* --- the truck referral --------------------------------------------------- */
.car-vin-truck-banner{
  margin-top:30px;background:var(--white);
  border:1px solid var(--line);border-left:5px solid var(--amber);
  border-radius:var(--r);padding:clamp(24px,3.5vw,34px);
}
.car-vin-truck-banner-title{
  font-family:var(--display);font-weight:800;font-stretch:90%;
  font-size:clamp(21px,2.6vw,28px);letter-spacing:-.02em;line-height:1.1;
}
.car-vin-truck-banner p{color:var(--ink-2);margin:12px 0 0;max-width:56ch}
.car-vin-truck-cta{
  display:inline-flex;align-items:center;margin-top:20px;
  font-family:var(--body);font-size:16px;font-weight:600;text-decoration:none;
  padding:14px 22px;border-radius:var(--r);background:var(--ink);color:var(--white);
}
.car-vin-truck-cta:hover{background:var(--ink-2)}

/* --- noscript + explainer -------------------------------------------------- */
.dec-noscript{
  margin-top:28px;background:var(--white);border:1px dashed rgba(20,24,28,.28);
  border-radius:var(--r);padding:26px 24px;
}
.dec-noscript h2{font-size:20px}
.dec-noscript p{color:var(--ink-2);margin:10px 0 0;max-width:60ch}

.dec-what{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line)}
.dec-what-grid{display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.dec-what h2{font-size:clamp(24px,3vw,34px)}
.dec-what p{color:var(--ink-2);margin:14px 0 0;max-width:46ch}
.dec-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dec-list li{position:relative;padding-left:26px;color:var(--ink-2);font-size:16px}
.dec-list li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:2px;background:var(--cobalt)}
.dec-list strong{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .dec-what-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .car-vin-ledger-row{flex-wrap:wrap;gap:2px}
  .car-vin-ledger-row .leader{display:none}
  .car-vin-ledger-row .value{text-align:left;width:100%}
}

/* --- the earned offer, under the result ---------------------------------
   Cobalt-edged rather than amber: this is the buying proposition, and amber
   on this site means parts. Rendered only after a successful car decode. */
.dec-offer{
  margin-top:26px;background:var(--white);
  border:1px solid var(--line);border-left:5px solid var(--cobalt);
  border-radius:var(--r);padding:clamp(22px,3vw,30px);
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.dec-offer-line{
  font-family:var(--display);font-weight:800;font-stretch:90%;
  font-size:clamp(20px,2.4vw,27px);letter-spacing:-.02em;line-height:1.15;margin:0;
}
.dec-offer-line strong{color:var(--cobalt);font-weight:800}
.dec-offer-sub{color:var(--ink-2);margin:10px 0 0;font-size:15px;max-width:52ch}