/* Customer vehicle detail: everyday care first, deeper records on demand. */
#clientPortal #mgDetail{max-width:1240px;margin-inline:auto}
#clientPortal #mgDetail .back-link{margin-bottom:20px;min-height:44px}
#clientPortal #mgDetail .vr-top{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:20px;background:#fff;box-shadow:0 8px 30px rgb(32 38 44 / .04);margin-bottom:32px}
#clientPortal #mgDetail .vr-shot{min-height:340px;background:#edf0ed}
#clientPortal #mgDetail .vr-shot img{position:absolute;inset:0;object-fit:cover}
#clientPortal #mgDetail .vr-shot.is-empty img{position:static;width:90px;opacity:.35}
#clientPortal #mgDetail .vr-verdict{padding:32px}
#clientPortal #mgDetail .vr-verdict::before{display:none}
#clientPortal #mgDetail .vr-name{font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.045em;overflow-wrap:anywhere}
#clientPortal #mgDetail .vr-who{color:#59636c;letter-spacing:.08em}
#clientPortal #mgDetail .vr-blurb{color:#59636c;line-height:1.6}
#clientPortal #mgDetail .vr-say{display:inline-block;padding:7px 12px;margin-top:22px;border:1px solid currentColor;border-radius:8px;font:600 14px/1.4 Inter,sans-serif;letter-spacing:0;text-transform:none}
#clientPortal #mgDetail .vr-then{font-size:14px;color:#59636c;margin-top:10px}
#clientPortal #mgDetail .vr-odo{gap:8px;margin-top:22px;padding-top:20px}
#clientPortal #mgDetail .vr-odo-n{font-family:"Space Grotesk",sans-serif;font-size:28px;letter-spacing:-.04em}
#clientPortal #mgDetail .vr-odo-form{width:100%;margin:6px 0 0}
#clientPortal #mgDetail .vr-odo-form input{width:100%;height:44px;border-radius:8px;background:#f7f8f6}
#clientPortal #mgDetail .vr-do{margin-top:20px;gap:8px}
#clientPortal #mgDetail .btn{min-height:44px;border-radius:8px}
#clientPortal #mgDetail #mgDeleteBtn{margin-left:auto;color:#747b80;font-size:12px}
#clientPortal #mgDetail .vr-client-heading{margin:0;font:600 21px/1.3 "Space Grotesk",sans-serif;letter-spacing:-.025em;color:#20262c}
#clientPortal #mgDetail .vr-client-intro{margin:7px 0 20px;font-size:13px;line-height:1.6;color:#59636c}
#clientPortal #mgDetail .vr-more{gap:12px}
#clientPortal #mgDetail .vr-fold{border-radius:12px;background:#fff;border-color:#dce1dd}
#clientPortal #mgDetail .vr-fold>summary{min-height:58px;padding:16px 18px;box-sizing:border-box;font:600 14px/1.45 Inter,sans-serif;letter-spacing:0;text-transform:none}
#clientPortal #mgDetail .vr-fold[open]>summary{border-bottom:1px solid #edf0ed;margin-bottom:16px}
#clientPortal #mgDetail .vr-fold-b{padding:0 16px 16px}
#clientPortal #mgDetail .vr-fold .vr-block{padding:0;margin:0;border:0;border-radius:0}
#clientPortal #mgDetail .vr-fold .vr-block+.vr-block{margin-top:24px}
#clientPortal #mgDetail .vr-facts{grid-template-columns:repeat(2,minmax(0,1fr));border:0;background:transparent;gap:18px 12px}
#clientPortal #mgDetail .vr-facts>div{padding:0;min-width:0}
#clientPortal #mgDetail .vr-facts dd{overflow-wrap:anywhere;line-height:1.5}
#clientPortal #mgDetail .vr-facts dt{font:500 11px/1.5 Inter,sans-serif;letter-spacing:0;text-transform:none}
#clientPortal #mgDetail .vr-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
#clientPortal #mgDetail .vr-card{border-radius:12px;padding:20px;background:#fff}
#clientPortal #mgDetail .vr-card-name{font:600 18px/1.4 "Space Grotesk",sans-serif;text-transform:none}
#clientPortal #mgDetail .vr-h{font:600 20px/1.3 "Space Grotesk",sans-serif;letter-spacing:-.02em;text-transform:none;color:#20262c}
#clientPortal #mgDetail .vr-card-log{padding-top:16px;margin-top:16px}
#clientPortal #mgDetail :is(.vr-card-log,.vr-log) input{border-radius:7px;min-height:42px;box-sizing:border-box}
#clientPortal #mgDetail .vr-row-head{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:16px 12px}
#clientPortal #mgDetail .vr-row-when{grid-column:1/-1;text-align:left}
#clientPortal #mgDetail .vri-v{overflow-wrap:anywhere}
@media(max-width:960px){
 #clientPortal #mgDetail .vr-verdict{padding:24px}
}
@media(max-width:680px){
 #clientPortal #mgDetail .vr-top{grid-template-columns:minmax(0,1fr);border-radius:14px}
 #clientPortal #mgDetail .vr-shot{min-height:0;aspect-ratio:16/10}
 #clientPortal #mgDetail .vr-verdict{padding:22px}
 #clientPortal #mgDetail .vr-name{font-size:30px}
 #clientPortal #mgDetail .vr-do .btn{flex:1 1 auto}
 #clientPortal #mgDetail #mgDeleteBtn{margin-left:0;flex:0 1 auto}
 #clientPortal #mgDetail .vr-hist li{grid-template-columns:minmax(0,1fr) auto}
 #clientPortal #mgDetail .vr-h-name{grid-column:1/-1}
}

/* A single section at a time, with identical navigation on every screen. */
#clientPortal #mgDetail [role="tabpanel"][hidden]{display:none!important}
#clientPortal #mgDetail .vr-tabs{display:flex;gap:6px;padding:5px;margin-bottom:24px;background:#e9ede9;border-radius:12px}
#clientPortal #mgDetail .vr-tabs button{flex:1;min-width:0;min-height:48px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#59636c;font:600 14px/1.4 Inter,sans-serif;cursor:pointer}
#clientPortal #mgDetail .vr-tabs button[aria-selected="true"]{background:#fff;color:#20262c;box-shadow:0 2px 5px rgb(32 38 44 / .08)}
#clientPortal #mgDetail .vr-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#clientPortal #mgDetail .vr-overview-attention{margin-bottom:20px;padding:22px;border:1px solid #dce1dd;border-radius:12px;background:#fff}
#clientPortal #mgDetail .vr-alert-list{list-style:none;padding:0;margin:12px 0}
#clientPortal #mgDetail .vr-alert-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #edf0ed;font-size:14px}
#clientPortal #mgDetail .vr-detail-actions{display:flex;gap:10px;margin-bottom:20px}
#clientPortal #mgDetail [role="tabpanel"]{min-width:0}
@media(max-width:480px){
 #clientPortal #mgDetail .vr-tabs{gap:2px;padding:4px}
 #clientPortal #mgDetail .vr-tabs button{padding:10px 6px;font-size:12px}
 #clientPortal #mgDetail .vr-alert-list li{flex-wrap:wrap;gap:4px 12px}
}