/* console.css — the charging console. One dark visual world, three zones:
   A charge point, B security chain, C session flow. */
:root{
  --bg:#05070b; --panel:#0b1018; --panel2:#0f1621; --line:#1a2331; --line2:#263246;
  --ink:#e9eef6; --muted:#8a96a9; --dim:#566275;
  --accent:#f2842a; --accent2:#f6b13f;
  --ok:#35d39a; --warn:#f5b545; --info:#7fa6f2; --bad:#f2716b;
  --sans:-apple-system,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(900px 500px at 85% -10%,rgba(242,132,42,.08),transparent 60%),var(--bg);
  color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.app{max-width:1320px;margin:0 auto;padding:18px clamp(14px,3vw,28px) 22px;display:flex;flex-direction:column;gap:16px;min-height:100vh}
body.embed{min-height:0}
body.embed .app{min-height:0;padding-top:12px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:34px;height:34px;flex:none;fill:var(--accent);filter:drop-shadow(0 0 3px rgba(242,132,42,.45))}
.brand-t{font-weight:700;letter-spacing:.08em;font-size:15px;line-height:1.15}
.brand-t small{display:block;font:500 11px/1.3 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.top-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.navlink{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 10px;border-radius:8px}
.navlink:hover{color:var(--ink);background:var(--panel)}
.conn{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--mono);letter-spacing:.12em;
  color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:8px 12px;text-transform:uppercase}
.conn i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.conn.live{color:var(--ok)} .conn.live i{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 1.6s ease-in-out infinite}
.conn.rec{color:var(--info)} .conn.rec i{background:var(--info)}
.conn.emu{color:var(--accent2)} .conn.emu i{background:var(--accent2);box-shadow:0 0 8px var(--accent2);animation:pulse 1.6s ease-in-out infinite}
.conn.off{color:var(--bad)} .conn.off i{background:var(--bad)}
.lang{font:500 12px/1 var(--mono);color:var(--muted);text-decoration:none;border:1px solid var(--line2);border-radius:8px;padding:8px 10px;letter-spacing:.06em}
.lang b{color:var(--ink)} .lang span{margin:0 4px;color:var(--dim)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* zones */
.zones{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;flex:1}
@media (min-width:980px){
  .zones{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);grid-template-rows:1fr auto;grid-template-areas:"a b" "c c"}
  .za{display:flex;flex-direction:column;justify-content:center}
  .za .zh{margin-bottom:auto;padding-bottom:14px}
  .za > :last-child{margin-bottom:auto}
  .za{grid-area:a} .zb{grid-area:b} .zc{grid-area:c}
}
.zone{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:18px 20px;min-width:0}
.zh{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.zl{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--line);color:var(--ink);font-size:11px;letter-spacing:0}

/* A: charge point — the scene follows the phase: cable, light, energy, battery */
.scene{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 16px;overflow:visible}
.sc-ground{stroke:var(--line);stroke-width:1.5}
.sc-post{fill:var(--panel2);stroke:var(--line2);stroke-width:1.5}
.sc-screen{fill:#070b11;stroke:var(--line2);stroke-width:1}
.sc-bolt{fill:var(--dim);transition:fill .4s}
.sc-led{fill:var(--dim);transition:fill .4s}
.sc-socket{fill:var(--line);stroke:var(--line2);stroke-width:1}
.sc-cable{fill:none;stroke:#3b4659;stroke-width:3.5;stroke-linecap:round}
.sc-energy{fill:none;stroke:var(--accent2);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 10;opacity:0;transition:opacity .4s}
.sc-car,.sc-win{stroke:#46536b;stroke-width:1.6;stroke-linejoin:round}
.sc-car{fill:var(--panel2)} .sc-win{fill:#070b11}
.sc-pillar{stroke:#46536b;stroke-width:1.4}
.sc-wheel{fill:#070b11;stroke:#46536b;stroke-width:2}
.sc-batt{fill:none;stroke:#46536b;stroke-width:1.4} .sc-batt-cap{stroke:#46536b;stroke-width:2}
.sc-batt-fill{fill:var(--dim);transition:width .8s ease,fill .4s}
.sc-port{fill:var(--dim);transition:fill .4s}
.scene .sc-plug{display:none}
.scene.plugged .sc-plug{display:inline} .scene.plugged .sc-free{display:none} .scene.plugged .sc-port{fill:var(--warn)}
.scene.auth .sc-led{fill:var(--info)}
.scene.charging .sc-led,.scene.charging .sc-port,.scene.done .sc-led{fill:var(--ok)}
.scene.charging .sc-bolt{fill:var(--accent)}
.scene.charging .sc-energy{opacity:1;animation:flow .7s linear infinite}
.scene.charging .sc-batt-fill,.scene.done .sc-batt-fill{fill:var(--ok)}
@keyframes flow{to{stroke-dashoffset:-12}}
.meter{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.gauge{position:relative;width:min(230px,58vw);aspect-ratio:1;flex:none}
.gauge svg{width:100%;height:100%;transform:rotate(135deg)}
.g-bg,.g-val{fill:none;stroke-width:10;stroke-linecap:round}
.g-bg{stroke:var(--line)}
.g-val{stroke:url(#gg);transition:stroke-dashoffset .5s ease}
.g-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.g-kw{font-size:40px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.g-kw small{font-size:16px;color:var(--muted);font-weight:500}
.g-ph{font:600 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.gauge.on .g-ph{color:var(--accent)}
.nums{display:grid;gap:12px;margin:0;flex:1;min-width:150px}
.nums div{border-top:1px solid var(--line);padding-top:8px}
.nums dt{font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nums dd{margin:4px 0 0;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
.nums small{font-size:13px;color:var(--muted);font-weight:500}

.qrcard{margin-top:18px;display:flex;gap:16px;align-items:center;border:1px dashed var(--line2);border-radius:14px;padding:14px}
.qr{width:132px;height:132px;background:#fff;border-radius:10px;padding:6px;flex:none}
.qr-t{display:grid;gap:6px;min-width:0}
.qr-t b{font-size:17px}
.qr-t span{font-size:13px;color:var(--muted)}
.qrcard.noqr .qr{display:none}
.startbtn{justify-self:start;margin-top:4px;font:600 13px/1 var(--sans);color:var(--ink);background:var(--line);border:1px solid var(--line2);border-radius:9px;padding:9px 12px;cursor:pointer}
.startbtn:hover{border-color:var(--accent)}
.startbtn:disabled{opacity:.55;cursor:default}
.donecard{margin-top:18px;display:grid;gap:4px;border:1px solid rgba(53,211,154,.35);background:rgba(53,211,154,.06);border-radius:14px;padding:14px 16px}
.donecard b{font-size:16px}
.donecard span{font-size:13px;color:var(--muted)}

/* B: security chain */
.zb-hint{margin:-4px 0 12px;color:var(--muted);font-size:13.5px}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:relative}
.step{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 14px;align-items:center;
  padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.012);
  opacity:.42;transition:opacity .35s ease,border-color .35s ease,background .35s ease}
.step .ic{grid-row:1/3;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--line);color:var(--muted)}
.step .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step .ic svg.fill{fill:currentColor;stroke:none}
.step .t{font-weight:650;font-size:15px}
.step .d{grid-column:2/3;font:400 12px/1.35 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step .st{grid-row:1/3;grid-column:3;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--line);color:var(--muted);white-space:nowrap}
.step.active{opacity:1;border-color:var(--line2)}
.step.active .ic{color:var(--accent);box-shadow:0 0 0 0 rgba(242,132,42,.5);animation:ring 1.2s ease-out infinite}
.step.ok,.step.warn,.step.sim,.step.bad{opacity:1}
.step.ok{border-color:rgba(53,211,154,.30)}
.step.ok .ic{background:rgba(53,211,154,.12);color:var(--ok)}
.step.ok .st{background:rgba(53,211,154,.12);color:var(--ok)}
.step.warn{border-color:rgba(245,181,69,.32)}
.step.warn .ic{background:rgba(245,181,69,.12);color:var(--warn)}
.step.warn .st{background:rgba(245,181,69,.12);color:var(--warn)}
.step.sim{border-color:rgba(127,166,242,.30)}
.step.sim .ic{background:rgba(127,166,242,.12);color:var(--info)}
.step.sim .st{background:rgba(127,166,242,.12);color:var(--info)}
.step.bad{border-color:rgba(242,113,107,.4)}
.step.bad .ic{background:rgba(242,113,107,.12);color:var(--bad)}
.step.bad .st{background:rgba(242,113,107,.12);color:var(--bad)}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(242,132,42,.45)}100%{box-shadow:0 0 0 10px rgba(242,132,42,0)}}

/* C: session flow */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.flow li{position:relative;padding:10px 8px 0;border-top:3px solid var(--line);font:600 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.flow li.done{border-top-color:rgba(242,132,42,.45);color:var(--muted)}
.flow li.now{border-top-color:var(--accent);color:var(--ink)}
@media (max-width:640px){ .flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px} }
.ocpp{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:500 12.5px/1.4 var(--mono)}
.ocpp-k{color:var(--info);letter-spacing:.1em}
.ocpp-v{color:var(--muted)}
.ocpp-v b{color:var(--ink);font-weight:600}

.foot{display:flex;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.foot a{color:var(--muted)}

/* narrow screens: the status goes under the title, the detail wraps */
@media (max-width:560px){
  .step{grid-template-columns:36px minmax(0,1fr);row-gap:5px;column-gap:12px}
  .step .ic{grid-row:1/4;width:36px;height:36px;align-self:start}
  .step .t{grid-column:2;grid-row:1}
  .step .st{grid-column:2;grid-row:2;justify-self:start}
  .step .d{grid-column:2;grid-row:3;white-space:normal}
}

/* the phone after a scan: only the chain */
body.chain-only .za, body.chain-only .zc, body.chain-only .foot, body.chain-only .navlink{display:none}
body.chain-only .zones{grid-template-columns:minmax(0,1fr);grid-template-areas:"b";grid-template-rows:auto}
body.chain-only .app{min-height:0;padding:12px}
body.chain-only .step .d{white-space:normal}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}