/* ===========================================================================
   The vehicle page. One stylesheet, both sides.

   Written entirely against the custom properties both scopes already define
   (--panel, --line, --muted, --accent …), so the same markup picks up the
   shop's palette under #mechanicApp and the customer's under #clientPortal
   without a second copy of any of this.

   The whole page has exactly one loud element: the verdict. Everything below
   it is deliberately quiet, because the point is to read the verdict and go.
   =========================================================================== */

.vr-over{--vr-tone:var(--danger,#F4826B)}
.vr-soon{--vr-tone:var(--warn,#E5B769)}

/* --- 1. the verdict ------------------------------------------------------- */
.vr-top{
  --vr-tone:var(--ok,#7FC8A0);
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:0;
  margin-bottom:26px;overflow:hidden;
  border:1px solid var(--line);border-radius:4px;background:var(--panel);
}
.vr-top.is-overdue{--vr-tone:var(--danger,#F4826B)}
.vr-top.is-soon{--vr-tone:var(--warn,#E5B769)}
.vr-top.is-unknown{--vr-tone:var(--muted,#BCCBC2)}

.vr-shot{position:relative;min-height:230px;background:#101F1B}
.vr-shot img{width:100%;height:100%;object-fit:cover;display:block}
.vr-credit{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 12px;
  background:linear-gradient(transparent,rgba(6,16,13,.9));
  color:#C7D4CC;font-size:11px;line-height:1.45}
.vr-credit a{color:#E7D9B6}
.vr-credit small{color:#9FB2A8}

.vr-verdict{position:relative;padding:26px 28px 24px 32px}
/* the tone lives on the edge, so the verdict text itself stays readable */
.vr-verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--vr-tone)}

.vr-who{margin:0;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vr-say{margin:10px 0 0;font-family:var(--display,"Saira Condensed","Arial Narrow",sans-serif);
  font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.005em;
  font-size:clamp(34px,4.6vw,54px);color:var(--vr-tone)}
.vr-then{margin:11px 0 0;max-width:46ch;font-size:14.5px;line-height:1.55;color:var(--text,#E4EAE6)}

.vr-odo{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.vr-odo-n{font-family:var(--mono,ui-monospace,monospace);font-size:31px;font-weight:700;
  line-height:1;color:var(--text,#E4EAE6);font-variant-numeric:tabular-nums}
.vr-odo-u{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* a 31px em dash where a mileage should be reads as broken, not as empty */
.vr-odo-none{font-size:14px;color:var(--muted)}
.vr-odo-form{display:flex;gap:7px;margin-left:auto}
.vr-odo-form input{width:118px;padding:9px 10px;border-radius:2px;
  border:1px solid var(--line);background:var(--panel2,#16302A);color:var(--text,#E4EAE6);
  font-family:var(--mono,ui-monospace,monospace);font-size:13px}
.vr-odo-form input:focus{border-color:var(--accent);outline:none}
.vr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

.vr-do{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}

/* Both scopes set a colour for every heading they contain
   (#mechanicApp h1,h2,h3,h4 in admin-theme.css), and an ID selector outranks a
   bare class no matter which stylesheet loads last. The verdict is an <h2> and
   the section label an <h3>, and on this page their colour is the whole point,
   so they are re-stated at a specificity that wins. */
#mechanicApp .vr-say,#clientPortal .vr-say{color:var(--vr-tone)}
#mechanicApp .vr-h,#clientPortal .vr-h{color:var(--muted)}

/* --- 2. what needs doing -------------------------------------------------- */
.vr-h{margin:0 0 13px;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.vr-attn{margin-bottom:26px}
.vr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:12px}

/* a column so the log forms line up across cards whose copy wraps differently */
.vr-card{--vr-tone:var(--warn,#E5B769);display:flex;flex-direction:column;
  padding:19px 20px;border:1px solid var(--line);border-top:3px solid var(--vr-tone);
  border-radius:3px;background:var(--panel)}
.vr-card.is-overdue{--vr-tone:var(--danger,#F4826B)}
.vr-card-name{display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--display,"Saira Condensed","Arial Narrow",sans-serif);
  font-weight:800;text-transform:uppercase;font-size:22px;line-height:1;
  color:var(--text,#E4EAE6)}
.vr-card-when{margin:9px 0 0}
.vr-card-why{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}

.vr-count{font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--vr-tone,inherit)}
.vr-count.is-overdue{color:var(--danger,#F4826B)}
.vr-count.is-soon{color:var(--warn,#E5B769)}
.vr-count.is-ok{color:var(--ok,#7FC8A0)}
.vr-count.is-unknown{color:var(--muted)}
.vr-detail{display:block;margin-top:3px;font-size:12px;color:var(--muted)}

/* the log form sits open inside the card — the action is the point */
.vr-card-log,.vr-log{display:grid;gap:9px;margin-top:15px;padding-top:15px;
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr));align-items:end;
  border-top:1px dashed var(--line)}
.vr-card-log label,.vr-log label{display:grid;gap:5px;min-width:0;
  font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vr-card-log input,.vr-log input{width:100%;min-width:0;padding:9px 10px;border-radius:2px;
  border:1px solid var(--line);background:var(--panel2,#16302A);color:var(--text,#E4EAE6);
  font-family:var(--sans,system-ui,sans-serif);font-size:13.5px}
.vr-card-log input:focus,.vr-log input:focus{border-color:var(--accent);outline:none}
.vr-card-log button,.vr-log button{grid-column:1/-1;justify-self:start}
/* pushed to the bottom of the flex card, so the forms align across the row
   even when one card's description or interval wraps to an extra line */
.vr-card-log{margin-top:auto}

/* --- 3. everything else, folded shut -------------------------------------- */
.vr-more{display:grid;gap:9px}
.vr-fold{border:1px solid var(--line);border-radius:3px;background:var(--panel);
  overflow:hidden}
.vr-fold>summary{display:flex;align-items:center;gap:11px;padding:15px 18px;cursor:pointer;
  list-style:none;font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text,#E4EAE6)}
.vr-fold>summary::-webkit-details-marker{display:none}
.vr-fold>summary:hover{background:rgba(231,217,182,.05)}
.vr-fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vr-fold-t{flex:1;min-width:0}
.vr-fold-n{padding:3px 8px;border-radius:99px;background:var(--panel2,#16302A);
  color:var(--muted);font-size:11px;letter-spacing:.06em}
/* chevron, drawn rather than a glyph so it matches the select chevron */
.vr-fold-x{width:8px;height:8px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease}
.vr-fold[open] .vr-fold-x{transform:rotate(225deg) translate(-2px,-2px)}
.vr-fold-b{padding:4px 18px 18px}

.vr-rows{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.vr-row{background:var(--panel)}
.vr-row-head{width:100%;display:grid;align-items:center;gap:12px;padding:13px 15px;
  grid-template-columns:minmax(0,1fr) auto minmax(90px,auto);
  border:0;background:transparent;color:var(--text,#E4EAE6);cursor:pointer;text-align:left}
.vr-row-head:hover{background:rgba(231,217,182,.05)}
.vr-row-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vr-row-name{display:flex;align-items:center;gap:9px;min-width:0;font-size:14.5px}
.vr-row-state{font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vr-row-state.is-overdue{color:var(--danger,#F4826B)}
.vr-row-state.is-due_soon{color:var(--warn,#E5B769)}
.vr-row-state.is-ok{color:var(--ok,#7FC8A0)}
.vr-row-when{text-align:right}
.vr-row-body{padding:2px 15px 16px}
.vr-row-body p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.vr-row-body strong{color:var(--text,#E4EAE6)}

.vr-note{margin:0 0 13px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.vr-conds{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
.vr-check{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:2px;
  border:1px solid var(--line);background:var(--panel2,#16302A);
  font-size:13.5px;color:var(--text,#E4EAE6);cursor:pointer}
.vr-check input{accent-color:var(--accent);width:16px;height:16px;flex:none}
.vr-oil{cursor:default}
.vr-oil select{margin-left:auto;padding:7px 9px;border-radius:2px;
  border:1px solid var(--line);background:var(--panel);color:var(--text,#E4EAE6);
  font-size:13px}

.vr-hist{margin:0;padding:0;list-style:none;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.vr-hist li{display:grid;gap:4px 14px;padding:12px 15px;background:var(--panel);
  grid-template-columns:minmax(96px,auto) minmax(0,1fr) minmax(74px,auto)}
.vr-h-date{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;
  letter-spacing:.05em;color:var(--muted)}
.vr-h-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;
  color:var(--text,#E4EAE6)}
.vr-h-odo{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;
  text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.vr-h-note{grid-column:2/-1;font-size:12.5px;line-height:1.5;color:var(--muted)}
.vr-none{margin:0;font-size:13.5px;color:var(--muted)}

.vr-int{margin:9px 0 0;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;
  letter-spacing:.05em;color:var(--muted)}

/* --- the parts each side supplies ----------------------------------------- */
.vr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;margin:0;background:var(--line);border:1px solid var(--line);
  border-radius:3px;overflow:hidden}
.vr-facts>div{padding:12px 14px;background:var(--panel)}
.vr-facts dt{font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vr-facts dd{margin:5px 0 0;font-size:14px;color:var(--text,#E4EAE6)}
.vr-vin{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;
  letter-spacing:.06em;word-break:break-all}
.vr-share{margin-top:10px}

.vr-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,210px) auto;
  gap:10px;align-items:end}
.vr-start label{display:grid;gap:5px;min-width:0;
  font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vr-start input,.vr-start select{width:100%;min-width:0;padding:10px 11px;border-radius:2px;
  border:1px solid var(--line);background:var(--panel2,#16302A);color:var(--text,#E4EAE6);
  font-family:var(--sans,system-ui,sans-serif);font-size:14px}
.vr-start input:focus,.vr-start select:focus{border-color:var(--accent);outline:none}

/* --- the manual shelf ------------------------------------------------------
   Shop side only. Quiet like the rest of the folds, with one exception: a
   manual for the wrong generation gets the warn tone, because that panel
   exists to stop somebody rather than to help them. Nothing here is a link —
   the PDFs are on disk and stay there.
   -------------------------------------------------------------------------- */
.vrm{display:grid;gap:14px}
.vrm-title{margin:0;font-family:var(--display,"Saira Condensed","Arial Narrow",sans-serif);
  font-size:19px;line-height:1.2;color:var(--text,#E4EAE6)}
.vrm-where{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.vrm code{padding:1px 5px;border-radius:2px;border:1px solid var(--line);
  background:var(--panel2,#16302A);color:var(--text,#E4EAE6);
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;word-break:break-all}

.vrm-files{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.vrm-files li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;
  align-items:baseline;padding:10px 12px;border-radius:3px;
  border:1px solid var(--line);background:var(--panel2,#16302A)}
.vrm-file{grid-column:1;justify-self:start}
.vrm-pages{grid-column:2;grid-row:1;font-family:var(--mono,ui-monospace,monospace);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vrm-covers{grid-column:1/-1;font-size:13px;line-height:1.5;color:var(--muted)}

.vrm-caveats{padding:12px 14px;border-radius:3px;
  border:1px solid var(--line);border-left:3px solid var(--warn,#E5B769)}
.vrm-h{margin:0 0 7px;font-family:var(--mono,ui-monospace,monospace);font-size:11px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vrm-caveats ul{margin:0;padding-left:17px;display:grid;gap:6px}
.vrm-caveats li{font-size:13.5px;line-height:1.55;color:var(--text,#E4EAE6)}

.vrm-prov{margin:0;font-size:12px;line-height:1.55;color:var(--muted)}

.vrm.is-wrong{gap:10px}
.vrm-warn{margin:0;padding:12px 14px;border-radius:3px;
  border:1px solid var(--line);border-left:3px solid var(--danger,#F4826B);
  font-size:14px;line-height:1.55;color:var(--text,#E4EAE6)}

/* --- narrow --------------------------------------------------------------- */
@media(max-width:860px){
  .vr-top{grid-template-columns:1fr}
  .vr-shot{min-height:0;aspect-ratio:16/9}
  .vr-verdict{padding:22px 20px 20px 24px}
  .vr-odo-form{margin-left:0;width:100%}
  .vr-odo-form input{flex:1;width:auto}
}
@media(max-width:700px){
  .vr-start{grid-template-columns:1fr}
  .vr-start button{justify-self:start}
}
@media(max-width:560px){
  .vrm-files li{grid-template-columns:minmax(0,1fr)}
  .vrm-pages{grid-column:1;grid-row:auto}
  .vr-row-head{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .vr-row-when{grid-column:1/-1;text-align:left}
  .vr-hist li{grid-template-columns:1fr auto}
  .vr-h-name{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.vr-fold-x{transition:none}}

/* --- title and ownership ---------------------------------------------------
   Three shapes for three kinds of content, where there used to be one label
   and value row doing all of it: hard facts as cells, the transfers as a
   chain, and the brand clearance as a single closing sentence.
   --------------------------------------------------------------------------- */
.vrp-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  margin:14px 0 0;background:var(--line,#e4e1da);
  border:1px solid var(--line,#e4e1da);border-radius:10px;overflow:hidden;
}
.vrp-fact{background:var(--panel,#fff);padding:11px 13px;min-width:0}
.vrp-fact > span{
  display:block;margin-bottom:4px;font:500 9.5px/1.3 var(--mono,monospace);
  letter-spacing:.08em;text-transform:uppercase;color:#8b8f92;
}
.vrp-fact > b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.vrp-fact.is-ok > b{color:#1c7c54}

/* The chain. Numbered because this genuinely is a sequence -- a car going
   from hand to hand -- and dated because that is what makes it one. */
.vrc{margin-top:18px}
.vrc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.vrc-head h4{margin:0;font-size:13.5px;font-weight:600}
.vrc-head span{font:400 11px/1.4 var(--mono,monospace);color:#8b8f92}
.vrc-list{list-style:none;margin:12px 0 0;padding:0}
.vrc-step{
  position:relative;display:grid;gap:2px 16px;padding:0 0 18px 24px;
  grid-template-columns:minmax(0,1fr);
}
.vrc-step:last-child{padding-bottom:0}
/* The rail and its marks, drawn rather than bulleted, so the line between
   two owners is visible as the years the car spent with one of them. */
.vrc-step::before{
  content:"";position:absolute;left:4px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--panel,#fff);border:2px solid var(--accent,#b93b10);
}
.vrc-step::after{
  content:"";position:absolute;left:8px;top:16px;bottom:0;width:1px;background:var(--line,#e4e1da);
}
.vrc-step:last-child::after{display:none}
.vrc-who{font-size:13.5px;font-weight:600}
.vrc-when{font:400 11.5px/1.4 var(--mono,monospace);color:#8b8f92}
.vrc-odo{display:block;margin-top:4px}
.vrc-odo b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.vrc-odo em{margin-left:7px;font-size:11.5px;font-style:normal;color:#8b8f92}
.vrc-drove{font-size:11.5px;color:#8b8f92}

.vrp-note{
  max-width:74ch;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line,#e4e1da);
  font-size:12.5px;line-height:1.65;color:#5a5f63;
}
.vrp-flags{margin-top:20px;padding-top:16px;border-top:1px solid var(--line,#e4e1da)}
.vrp-flags h4{margin:0 0 10px;font-size:13.5px;font-weight:600}

@media(min-width:640px){
  .vrc-step{grid-template-columns:minmax(96px,auto) minmax(110px,auto) minmax(0,1fr);align-items:baseline}
  .vrc-odo{margin-top:0}
  .vrc-drove{grid-column:3;font-size:11px}
}

/* --- odometer record -------------------------------------------------------
   Oldest first, matching the chain of custody beside it. The bar that used to
   sit under each reading is gone: its width was the reading as a fraction of
   the highest one, which is the number already printed next to it. The space
   holds the gap between readings instead, which is the thing a reading record
   is actually for.
   --------------------------------------------------------------------------- */
.vro-list{list-style:none;margin:14px 0 0;padding:0}
.vro-step{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:baseline;gap:2px 12px;
}
.vro-step b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.vro-step em{
  justify-self:end;font:400 11.5px/1.4 var(--mono,monospace);color:#8b8f92;font-style:normal;
}
.vro-step span{grid-column:1/-1;font-size:12px;color:#8b8f92}

/* The interval. Indented and ruled, so it reads as the distance between two
   readings rather than as a reading of its own. */
.vro-gap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:8px 0 8px 2px;padding:7px 0 7px 14px;
  border-left:2px solid var(--line,#e4e1da);
}
.vro-gap span{font-size:12px;color:#5a5f63;font-variant-numeric:tabular-nums}
.vro-gap em{
  font:500 11px/1.4 var(--mono,monospace);font-style:normal;color:var(--accent-ink,#b93b10);
}
.vr-block-head span.is-bad{color:#b3261e}