/*
 * EV instrument panel for the public results page.
 * From the Text Connects "EV store diagnostic" developer kit (approved
 * direction): ID selectors replaced with the .ev-panel component class, font
 * set to the site's Assistant. Follows the visitor's light/dark preference.
 * Line drawings: HTML + CSS compositions; small symbols are Lucide icons
 * (ISC license, see licenses/lucide-LICENSE.txt).
 */


.ev-panel{color-scheme:light;font:14px/1.45 var(--sans);letter-spacing:normal;color:light-dark(#28302d,#edf2ed);--screen:light-dark(#e9ede5,#17221f);--ink:light-dark(#25312b,#e6eee6);--muted:light-dark(#5e6b61,#a7b7ad);--hair:light-dark(#cbd2c7,#3c4b42);--glass:light-dark(#f3f5ee,#24332b)}
.ev-panel *{box-sizing:border-box}
.ev-panel p,.ev-panel h2,.ev-panel h3{margin:0}
.ev-panel .mast{display:flex;justify-content:space-between;align-items:end;margin:0 0 18px;gap:18px}
.ev-panel .brand{font-size:11px;letter-spacing:2px;text-transform:uppercase}
.ev-panel .mast h2{font-size:26px;font-weight:500;margin-top:5px}
.ev-panel .meta{font-size:12px;color:var(--muted)}
.ev-panel .bezel{background:#171c1a;padding:9px;border-radius:27px;box-shadow:0 12px 25px #0002,inset 0 1px 1px #ffffff40}
.ev-panel .screen{background:var(--screen);color:var(--ink);border-radius:19px;padding:22px 24px 0;overflow:hidden}
.ev-panel .ribbon{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding-bottom:18px;gap:16px}
.ev-panel .ribbon span:last-child{color:var(--muted);letter-spacing:0;text-transform:none}
.ev-panel .instruments{display:grid;grid-template-columns:1.05fr 1fr .65fr;gap:24px;align-items:center;min-height:320px;padding-bottom:25px}
.ev-panel .warning{background:#bd3435;color:#fff6ed;min-height:300px;border-radius:9px;display:flex;flex-direction:column;padding:21px;gap:18px}
.ev-panel .warning-art{height:137px;display:grid;place-items:center;position:relative}
.ev-panel .warning-art>svg{width:95px;height:95px;stroke-width:1.15}
.ev-panel .alert-copy{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;margin-top:auto}
.ev-panel .alert-copy>svg{width:23px;height:23px;margin-top:3px}
.ev-panel .warning h3{font-size:19px;font-weight:600;line-height:1.2;margin-bottom:6px}
.ev-panel .warning p{font-size:13px}
.ev-panel .visualization{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;min-width:0}
.ev-panel .vehicle-label{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.ev-panel .store-wire{width:100%;max-width:240px;border:1.5px solid var(--ink);border-radius:7px;position:relative;background:var(--glass);padding:0 13px 15px;transform:perspective(700px) rotateY(-8deg);box-shadow:8px 10px 0 color-mix(in srgb,var(--ink) 7%,transparent)}
.ev-panel .wire-top{height:26px;border-bottom:1px solid var(--hair);margin:0 -13px 16px;padding:9px 10px;display:flex;gap:4px}
.ev-panel .wire-top b{width:4px;height:4px;border:1px solid var(--muted);border-radius:50%}
.ev-panel .wire-title{font-size:11px;letter-spacing:1.8px;text-align:center;margin-bottom:14px}
.ev-panel .wire-hero{height:66px;display:grid;place-items:center;border:1px solid var(--hair);color:var(--muted)}
.ev-panel .wire-hero svg{width:30px;height:30px;stroke-width:1}
.ev-panel .wire-products{display:flex;gap:8px;margin-top:10px}
.ev-panel .wire-products div{height:48px;flex:1;border:1px solid var(--hair);display:grid;place-items:center}
.ev-panel .wire-products svg{width:20px;height:20px;stroke-width:1;color:var(--muted)}
.ev-panel .fault-marker{position:absolute;right:-12px;top:50px;background:#bd3435;border:4px solid var(--screen);color:#fff;border-radius:50%;width:31px;height:31px;display:grid;place-items:center}
.ev-panel .fault-marker svg{width:16px;height:16px}
.ev-panel .system-caption{text-align:center;font-size:12px;color:var(--muted)}
.ev-panel .readout{align-self:center}
.ev-panel .score-label{font-size:12px;display:flex;gap:7px;align-items:center}
.ev-panel .score-label svg{width:17px;color:#bd3435}
.ev-panel .number{font-size:88px;line-height:1.1;font-weight:500;letter-spacing:-6px;margin:9px 0 0}
.ev-panel .outof{font-size:12px;color:var(--muted);margin-bottom:20px}
.ev-panel .battery{height:27px;position:relative;background:color-mix(in srgb,var(--ink) 10%,var(--screen));border-radius:4px;overflow:hidden}
.ev-panel .battery-fill{width:38%;height:100%;background:#b88727}
.ev-panel .battery-word{font-size:11px;display:flex;justify-content:space-between;margin-top:6px;color:var(--muted)}
.ev-panel .tell-strip{border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;padding:13px 0 15px;gap:15px;flex-wrap:wrap}
.ev-panel button{font:inherit;cursor:inherit}
.ev-panel .lights{display:flex;gap:18px;align-items:center}
.ev-panel .light{border:0;padding:3px 0;background:none;display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;min-height:44px}
.ev-panel .light svg{width:20px;height:20px;stroke-width:1.6}
.ev-panel .trip{font-size:11px;display:flex;gap:18px;color:var(--muted)}
.ev-panel .trip strong{color:var(--ink);font-weight:600}
.ev-panel .alert-control{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;gap:12px;font-size:12px;color:var(--muted)}
.ev-panel .alert-nav{display:flex;gap:7px}
.ev-panel .alert-nav button{border:1px solid var(--hair);background:var(--glass);color:var(--ink);border-radius:5px;min-width:44px;min-height:44px;font-size:18px}
.ev-panel .inventory{border-top:1px solid var(--hair);margin-top:2px}
.ev-panel .inventory>h3{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.3px;padding:20px 0 10px}
.ev-panel .alert-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.ev-panel .item{min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--ink);padding:13px 0;min-height:66px}
.ev-panel .item svg{width:23px;height:23px;flex-shrink:0;color:var(--signal)}
.ev-panel .item strong{display:block;font-size:12px;font-weight:500}
.ev-panel .item small{font-size:11px;color:var(--muted)}
.ev-panel .item[aria-pressed=true] strong{text-decoration:underline;text-underline-offset:4px}
.ev-panel .fineprint{font-size:11px;color:var(--muted);padding-top:16px}
@media(max-width:720px){.ev-panel .instruments{grid-template-columns:1.2fr 1fr;gap:20px}
.ev-panel .visualization{display:none}
.ev-panel .number{font-size:100px}
.ev-panel .alert-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.ev-panel .lights{gap:13px}
}
@media(max-width:420px){.ev-panel .screen{padding:16px 15px 0}
.ev-panel .instruments{grid-template-columns:1fr;gap:20px}
.ev-panel .readout{grid-row:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 15px}
.ev-panel .number{font-size:66px;grid-row:1/3;grid-column:1;letter-spacing:-3px}
.ev-panel .score-label{grid-column:2}
.ev-panel .outof{grid-column:2;margin:0}
.ev-panel .battery{grid-column:1/-1;margin-top:12px}
.ev-panel .battery-word{grid-column:1/-1}
.ev-panel .warning{min-height:270px}
.ev-panel .ribbon{font-size:10px}
.ev-panel .lights{width:100%;justify-content:space-between;gap:6px}
.ev-panel .light{flex-direction:column;font-size:9px}
.ev-panel .alert-list{grid-template-columns:1fr}
.ev-panel .mast{display:block}
.ev-panel .trip{width:100%;justify-content:space-between}
}



.ev-panel .warning-art{height:170px;width:100%;padding:6px 0;color:#fff6ed}

.ev-panel .drawing{position:relative;width:100%;max-width:230px;height:150px;color:inherit;--stroke:1.5px solid currentColor}

.ev-panel .outline{border:var(--stroke);border-radius:6px;position:absolute}

.ev-panel .ghost-line{opacity:.38}

.ev-panel .draw-browser{inset:9px 8px 10px}

.ev-panel .draw-browser:before{content:"";position:absolute;top:21px;left:0;right:0;border-top:var(--stroke)}

.ev-panel .draw-dots{position:absolute;top:8px;left:10px;display:flex;gap:5px}

.ev-panel .draw-dots b{width:4px;height:4px;border-radius:50%;border:1px solid currentColor}

.ev-panel .draw-code{position:absolute;inset:44px 18px 10px;display:flex;align-items:center;justify-content:space-between}

.ev-panel .draw-code svg{width:46px;height:46px;stroke-width:1.2}

.ev-panel .draw-code svg:nth-child(2){width:55px;height:65px}

.ev-panel .draw-product{top:10px;left:29px;width:124px;height:130px}

.ev-panel .draw-product.back{left:64px;top:1px;opacity:.28}

.ev-panel .draw-photo{position:absolute;inset:12px 12px 36px;border:1.5px dashed currentColor;border-radius:3px;display:grid;place-items:center}

.ev-panel .draw-photo svg{width:53px;height:53px;stroke-width:1.15;opacity:.65}

.ev-panel .draw-product:after{content:"";position:absolute;bottom:22px;left:13px;width:65px;border-top:var(--stroke);box-shadow:0 9px 0 -0.1px currentColor;opacity:.5}

.ev-panel .draw-slash{position:absolute;top:74px;left:19px;width:153px;border-top:var(--stroke);transform:rotate(-42deg);transform-origin:center}

.ev-panel .draw-tag{position:absolute;left:17px;right:28px;top:30px;height:89px;border:var(--stroke);border-radius:5px 25px 25px 5px;transform:rotate(-8deg)}

.ev-panel .draw-tag:after{content:"";position:absolute;right:14px;top:36px;width:10px;height:10px;border:var(--stroke);border-radius:50%}

.ev-panel .draw-price{position:absolute;top:12px;left:17px;font-size:23px;letter-spacing:2px;font-weight:400}

.ev-panel .draw-price s{display:block;font-size:17px;opacity:.5}

.ev-panel .draw-tag svg{position:absolute;left:116px;top:20px;width:33px;height:33px;stroke-width:1.2}

.ev-panel .draw-doc{top:6px;bottom:7px;left:56px;width:111px;border-radius:3px}

.ev-panel .draw-doc:before{content:"";position:absolute;left:13px;right:13px;top:26px;border-top:var(--stroke);opacity:.6}

.ev-panel .empty-lines{position:absolute;top:50px;left:14px;right:14px;display:grid;gap:17px}

.ev-panel .empty-lines b{height:0;border-top:1.5px dashed currentColor;opacity:.35}

.ev-panel .draw-cursor{position:absolute;left:15px;top:43px;height:21px;border-left:var(--stroke)}

.ev-panel .sku-product{position:absolute;top:14px;width:88px;height:106px;border:var(--stroke);border-radius:5px}

.ev-panel .sku-product:first-child{left:7px}

.ev-panel .sku-product:nth-child(2){right:7px}

.ev-panel .sku-product svg{position:absolute;left:22px;top:14px;width:40px;height:40px;stroke-width:1.15;opacity:.45}

.ev-panel .sku-code{position:absolute;left:7px;right:7px;bottom:10px;border:var(--stroke);border-radius:2px;height:24px;display:grid;place-items:center;font:11px/1.2 ui-monospace,monospace;letter-spacing:1px}

.ev-panel .sku-link{position:absolute;top:123px;left:48px;right:48px;height:14px;border:var(--stroke);border-top:0;border-radius:0 0 5px 5px}

.ev-panel .sku-link:after{content:"=";position:absolute;left:calc(50% - 8px);top:-12px;width:16px;text-align:center;font-size:20px}

.ev-panel .html-stack{top:31px;left:46px;width:139px;height:106px}

.ev-panel .html-stack.back{top:7px;left:26px;opacity:.28}

.ev-panel .html-stack.mid{top:19px;left:36px;opacity:.5}

.ev-panel .html-stack svg{position:absolute;left:40px;top:14px;width:55px;height:44px;stroke-width:1.2}

.ev-panel .html-lines{position:absolute;bottom:17px;left:15px;right:15px;display:grid;gap:7px;opacity:.5}

.ev-panel .html-lines b{border-top:1px solid currentColor}

.ev-panel .draw-barcode{position:absolute;inset:48px 15px 53px;border:1.5px dashed currentColor;border-radius:4px;padding:10px}

.ev-panel .barcode-bars{height:100%;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px,currentColor 6px 7px,transparent 7px 12px);opacity:.35}

.ev-panel .barcode-empty{position:absolute;bottom:16px;left:57px;right:57px;border-top:1.5px dashed currentColor;opacity:.5}

.ev-panel .draw-variants{position:absolute;inset:8px 15px 10px;display:flex;justify-content:space-between;align-items:start;border-top:var(--stroke);padding-top:19px}

.ev-panel .draw-variants:before{content:"";position:absolute;left:50%;height:12px;border-left:var(--stroke);top:-13px}

.ev-panel .variant-node{position:relative;width:54px;height:65px;border:var(--stroke);border-radius:4px;display:grid;place-items:center}

.ev-panel .variant-node svg{width:30px;height:30px;stroke-width:1;opacity:.55}

.ev-panel .variant-node:after{content:"A-01";position:absolute;top:72px;left:0;width:100%;text-align:center;font:10px/1.4 ui-monospace,monospace;border:var(--stroke);border-radius:2px;padding:4px 0}

.ev-panel .draw-checkout{inset:23px 17px 24px;border:1.5px dashed currentColor;opacity:.7}

.ev-panel .draw-checkout:before{content:"";position:absolute;left:0;right:0;top:25px;border-top:var(--stroke)}

.ev-panel .draw-checkout svg{position:absolute;right:13px;bottom:13px;width:40px;height:30px;stroke-width:1.2}

.ev-panel .draw-checkout:after{content:"";position:absolute;left:16px;bottom:25px;width:42px;border-top:var(--stroke);box-shadow:0 9px 0 -.1px currentColor}

.ev-panel .checkout-question{position:absolute;right:4px;top:6px;border:var(--stroke);border-radius:50%;width:37px;height:37px;text-align:center;font-size:26px;background:#58665e}

@media(max-width:420px){.ev-panel .warning{min-height:310px}
.ev-panel .warning-art{height:180px}
}


.ev-panel .cursor-interaction{cursor:pointer}


/* Site additions: fallback drawing for codes without a dedicated illustration. */
.ev-panel .drawing--icon{display:grid;place-items:center}
.ev-panel .drawing--icon svg{width:95px;height:95px;stroke-width:1.15}
.ev-panel .fault-marker{transition:top .3s ease,background-color .3s ease}
.ev-panel .light[disabled]{cursor:default}
.ev-panel .light:focus-visible,.ev-panel .item:focus-visible,.ev-panel .alert-nav button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ev-panel .warning h3,.ev-panel .warning p{overflow-wrap:anywhere}
/* Only the screen follows the visitor's light/dark preference; the controls
   and list below it sit on the site's light paper background. */
.ev-panel .bezel{color-scheme:light dark}
.ev-panel .drawing--icon .icon{width:95px;height:95px}
.ev-panel .drawing--icon .icon svg{width:100%;height:100%;stroke-width:1.15}

/* Storefront view switch and the screenshot view (site addition). The
   screenshot uses the schematic's frame, angle and offset shadow. */
.ev-panel .vehicle-head{display:flex;flex-direction:column;align-items:center;gap:8px}
.ev-panel .view-switch{display:inline-flex;padding:2px;border:1px solid var(--hair);border-radius:999px;background:var(--glass)}
.ev-panel .view-switch__option{border:0;background:none;color:var(--muted);font-size:11px;letter-spacing:.4px;padding:0 12px;min-height:28px;border-radius:999px}
.ev-panel .view-switch__option[aria-pressed=true]{background:var(--ink);color:var(--screen)}
.ev-panel .view-switch__option:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ev-panel .store-stage{position:relative;width:100%;max-width:240px}
.ev-panel .store-stage .store-wire{max-width:none}
.ev-panel .store-wire[hidden]{display:none}
.ev-panel .store-shot{padding:0;overflow:visible}
.ev-panel .store-shot .wire-top{margin:0;align-items:center}
.ev-panel .store-shot__url{margin-left:6px;font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-panel .store-shot__image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:0 0 6px 6px}
.ev-panel .store-stage .fault-marker{z-index:1}

/* Scanning mode (site addition): the tile cycles through checks, a scan
   line sweeps the drawing and the storefront, the active light glows. */
.ev-panel .warning.is-in .warning-art,.ev-panel .warning.is-in .alert-copy{animation:ev-fade-in .45s ease-out}
@keyframes ev-fade-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ev-panel .warning{transition:background-color .5s ease}
.ev-panel .warning-art{overflow:hidden}
.ev-panel.is-scanning .warning-art::after,.ev-panel.is-scanning .store-wire::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:currentColor;opacity:.55;box-shadow:0 0 12px 3px color-mix(in srgb,currentColor 45%,transparent);animation:ev-scan 2.2s ease-in-out infinite}
.ev-panel.is-scanning .store-wire::after{color:#c04623;border-radius:2px}
@keyframes ev-scan{0%{top:4%}50%{top:92%}100%{top:4%}}
.ev-panel .number--pending{opacity:.3;letter-spacing:-2px}
.ev-panel.is-scanning .battery-fill{background:#c04623;transition:width .3s linear}
.ev-panel.is-scanning .fault-marker{animation:ev-pulse 1.4s ease-out infinite}
@keyframes ev-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,#c04623 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.ev-panel .light.is-active{color:var(--ink)}
.ev-panel .light.is-active svg{color:#c04623;filter:drop-shadow(0 0 4px color-mix(in srgb,#c04623 60%,transparent))}
.ev-panel .light--off{opacity:.55}
.ev-panel .scan-state{display:inline-flex;align-items:center;gap:6px}
.ev-panel.is-scanning .scan-state::before{content:"";width:7px;height:7px;border-radius:50%;background:#c04623;animation:ev-blink 1s ease-in-out infinite alternate}
@keyframes ev-blink{from{opacity:.25}to{opacity:1}}
.ev-panel .battery-fill{transition:width .9s cubic-bezier(.2,.8,.2,1),background-color .4s ease}