:root{
  --bg:#EDF1F3; --surface:#FFFFFF; --raised:#F6F9FA; --sunk:#E3EAED;
  --line:#CDD9DE; --line-soft:#E1E9EC;
  --ink:#0F1C21; --ink-2:#36505A; --muted:#68818B;
  --accent:#0B6C84; --accent-ink:#FFFFFF; --accent-soft:#D7EDF2;
  --ok:#17784D; --ok-soft:#D9F0E2;
  --warn:#A56706; --warn-soft:#FAEACF;
  --bad:#AC3325; --bad-soft:#FADFDB;
  --idle:#91A5AD; --idle-soft:#E6ECEF;
  --shadow:0 1px 2px rgba(15,28,33,.06), 0 8px 24px -16px rgba(15,28,33,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1317; --surface:#111E23; --raised:#17272D; --sunk:#0C181C;
    --line:#24383F; --line-soft:#1A2A30;
    --ink:#E3EDF0; --ink-2:#ADC3CB; --muted:#7B949E;
    --accent:#42B7CF; --accent-ink:#06222A; --accent-soft:#0F343E;
    --ok:#4CC28C; --ok-soft:#0F3029;
    --warn:#E2A84A; --warn-soft:#33250F;
    --bad:#EF7361; --bad-soft:#381B17;
    --idle:#597078; --idle-soft:#16242A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0A1317; --surface:#111E23; --raised:#17272D; --sunk:#0C181C;
  --line:#24383F; --line-soft:#1A2A30;
  --ink:#E3EDF0; --ink-2:#ADC3CB; --muted:#7B949E;
  --accent:#42B7CF; --accent-ink:#06222A; --accent-soft:#0F343E;
  --ok:#4CC28C; --ok-soft:#0F3029;
  --warn:#E2A84A; --warn-soft:#33250F;
  --bad:#EF7361; --bad-soft:#381B17;
  --idle:#597078; --idle-soft:#16242A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.5 "Archivo", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px; margin:0 auto; padding:0 16px 56px}
.mono{font-family:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric:tabular-nums}
.lbl{font:600 10.5px/1.2 "Archivo",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
h1{margin:0; font:700 22px/1.15 "Archivo",sans-serif; letter-spacing:-.01em}
h2{margin:0; font:600 12px/1.2 "Archivo",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* ---- topp ---- */
.top{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:5;
  background:var(--bg); border-bottom:1px solid var(--line);
  margin:0 -16px; padding:14px 16px 12px;
}
.topin{max-width:940px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.brandrow{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.brandrow p{margin:0; color:var(--muted); font-size:13px}
.seek{display:flex; gap:8px; flex-wrap:wrap; align-items:stretch}
.seek input{
  flex:1 1 220px; min-width:0; padding:9px 12px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink);
  font:500 15px/1.3 "IBM Plex Mono", monospace; letter-spacing:.02em;
}
.seek input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
/* Programnummer står under hovedraden: samme felt, men det er ikke det
   montøren taster først, så det skal ikke konkurrere om plassen. */
.seek.prog{margin-top:8px}
.seek.prog input{flex:0 1 200px}
button{
  font:600 13px/1 "Archivo",sans-serif; border-radius:7px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:10px 13px; transition:background .12s, border-color .12s;
}
button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
button:disabled{opacity:.45; cursor:default}
button.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
button.pri:hover:not(:disabled){background:var(--accent); color:var(--accent-ink); filter:brightness(1.08)}
button.sm{padding:7px 10px; font-size:12px}
button.warnbtn{border-color:var(--warn); color:var(--warn)}

.qbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2)}
.narrow{display:none}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  background:var(--sunk); border:1px solid var(--line-soft);
  font:600 11.5px/1.5 "Archivo",sans-serif;
}
.chip.q{background:var(--warn-soft); border-color:transparent; color:var(--warn)}
.chip.calm{background:var(--ok-soft); border-color:transparent; color:var(--ok)}
.chip.err{background:var(--bad-soft); border-color:transparent; color:var(--bad)}

/* ---- enhetsstripe ---- */
/* To ruter side om side: bilen til venstre, brikka til høyre. Brikkeruta
   har flere felter, så den får mer plass. */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:12px; align-items:start}
.duo .plate{margin-top:18px}
.kortnavn{
  margin:0 0 5px; color:var(--muted);
  font:600 10.5px/1.3 "Archivo",sans-serif; text-transform:uppercase; letter-spacing:.09em;
}
.regno.sm{font-size:19px}
.mangler{color:var(--muted); font-style:italic; font-weight:400}
/* Bilruta har tre felter. Uten dette blir det en tom celle ved siden av det
   siste — og VIN er lang nok til å fortjene hele bredden. */
.duo .plate:first-child .rail .cell:first-child{grid-column:1 / -1}
@media (max-width:760px){
  .duo{grid-template-columns:minmax(0,1fr); gap:0}
  .duo .plate + .plate{margin-top:12px}
}

.plate{
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow); margin-top:18px; overflow:hidden;
}
.plate-hd{
  display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line-soft); background:var(--raised); flex-wrap:wrap;
}
.regno{font:700 26px/1 "IBM Plex Mono", monospace; letter-spacing:.02em; margin:0 0 4px}
.plate-hd .sub{color:var(--muted); font-size:13px; margin:0}
.seenbox{text-align:right}
.seenbox .big{font:600 17px/1.2 "IBM Plex Mono", monospace; margin-top:3px}
.rail{display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)); gap:1px; background:var(--line-soft)}
.cell{background:var(--surface); padding:11px 16px 12px; min-width:0}
.cell .v{font:500 14px/1.35 "IBM Plex Mono", monospace; margin-top:3px; word-break:break-word}
.cell .v.plain{font-family:"Archivo",sans-serif; font-weight:500}
.cell .v small{display:block; font:400 12px/1.4 "Archivo",sans-serif; color:var(--muted); margin-top:2px; word-break:normal}
.fresh{color:var(--ok)} .stale{color:var(--warn)} .cold{color:var(--bad)}

/* ---- benk ---- */
.bench{margin-top:22px; display:flex; flex-direction:column; gap:10px}
.benchhd{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:2px}
/* Testen er slått sammen til én rad. Detaljene ligger i .tbody, som bare
   tegnes når raden er foldet ut. */
.test{
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow); overflow:hidden;
}
.test.ok{border-left:3px solid var(--ok)}
.test.warn{border-left:3px solid var(--warn)}
.test.bad{border-left:3px solid var(--bad)}
.test.wait{border-left:3px solid var(--accent)}
.thd{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 16px; background:none; border:0; text-align:left;
  font:inherit; color:inherit; cursor:pointer; min-width:0;
}
.thd:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.thd-navn{
  font:600 15.5px/1.25 "Archivo",sans-serif; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.thd .cmdtag{
  font:400 11.5px/1.4 "IBM Plex Mono", monospace; color:var(--muted);
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chev{
  flex:0 0 auto; width:8px; height:8px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(-45deg); margin-left:2px;
  transition:transform .15s ease;
}
.test.open .chev{transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce){.chev{transition:none}}
.tbody{
  /* minmax(0,1fr), ikke 1fr: et 1fr-spor nekter å krympe under innholdets
     min-bredde, og da presser et langt svar hele raden utenfor skjermen. */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,auto); gap:0 14px;
  padding:0 16px 14px; align-items:start;
}
.tbody > div{min-width:0}
.lamp{flex:0 0 auto; width:14px; height:14px; border-radius:50%; background:var(--idle); box-shadow:0 0 0 3px var(--idle-soft)}
.lamp.ok{background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft)}
.lamp.warn{background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft)}
.lamp.bad{background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft)}
.lamp.wait{background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.lamp.wait{animation:none}}
.tname{font:600 15.5px/1.25 "Archivo",sans-serif; margin:0}
.tmeta{margin:3px 0 0; color:var(--muted); font-size:12.5px}
.verdict{margin:8px 0 0; font:500 14px/1.4 "Archivo",sans-serif}
.verdict.ok{color:var(--ok)} .verdict.warn{color:var(--warn)} .verdict.bad{color:var(--bad)} .verdict.wait{color:var(--accent)}
.facts{margin:7px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 16px}
.facts li{font-size:12.5px; color:var(--ink-2)}
.facts b{font:600 12.5px/1.4 "IBM Plex Mono", monospace; color:var(--ink)}
/* Svaret er sammenslått til én linje — hele teksten ligger ett trykk unna,
   og i loggen. Lange getstatus-svar skal ikke skyve dommen ut av syne. */
.raw{
  margin:9px 0 0; padding:7px 10px; background:var(--sunk); border-radius:6px;
  font:400 12.5px/1.5 "IBM Plex Mono", monospace; color:var(--ink-2); min-width:0;
}
.raw summary{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;
  list-style:none; cursor:pointer; min-height:22px;
}
.raw summary::-webkit-details-marker{display:none}
.raw summary::after{
  content:'vis'; margin-left:auto; flex:0 0 auto; color:var(--accent);
  font:600 10px/1.6 "Archivo",sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.raw[open] summary::after{content:'skjul'}
.raw summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.raw .peek{flex:1 1 60px; min-width:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.raw[open] .peek{display:none}
.raw .rawtxt{margin-top:6px; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere}
.tact{display:flex; flex-direction:column; gap:6px; align-items:stretch}
.tact .cmdtag{font:400 11.5px/1.4 "IBM Plex Mono", monospace; color:var(--muted); text-align:right}
.ask{
  grid-column:1 / -1; margin:11px 0 0; padding:11px 13px; border-radius:8px;
  background:var(--accent-soft); border:1px solid transparent; font-size:13.5px; color:var(--ink);
}
.ask p{margin:0 0 9px}
.ask .row{display:flex; gap:8px; flex-wrap:wrap}

/* Kommandolinje nederst i benken: kommandoen og svaret i samme rute. */
.konsoll{
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow); padding:13px 16px 14px;
}
.konsoll .benchhd{margin:0 0 10px}
.kut{
  background:var(--sunk); border-radius:7px; padding:9px 11px;
  max-height:240px; overflow-y:auto; overscroll-behavior:contain;
  font:400 12.5px/1.6 "IBM Plex Mono", monospace;
}
.kut .empty{margin:0; color:var(--muted); font-family:"Archivo",sans-serif; font-size:13px}
.kl{display:flex; gap:8px; align-items:baseline; min-width:0}
.kl .kt{flex:0 0 auto; color:var(--muted); font-size:11px; min-width:38px}
.kl .kp{flex:0 0 auto; width:9px; color:var(--muted)}
.kl .kx{flex:1 1 auto; min-width:0; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere}
.kl.ut .kx{color:var(--ink)}
.kl.ut .kp{color:var(--accent)}
.kl.inn .kx{color:var(--ink-2)}
.kl.inn .kp{color:var(--ok)}
.kl.sys .kx, .kl.sys .kp{color:var(--bad)}
.kl.vent .kx{color:var(--muted)}
.kinn{display:flex; align-items:center; gap:8px; margin-top:10px}
.kinn .kp{flex:0 0 auto; color:var(--accent); font:400 13px/1 "IBM Plex Mono", monospace}
.kinn input{
  flex:1 1 auto; min-width:0; padding:9px 11px; border:1px solid var(--line);
  border-radius:7px; background:var(--surface); color:var(--ink);
  font:400 13px/1.4 "IBM Plex Mono", monospace;
}
.kinn input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.kinn input:disabled{background:var(--sunk); color:var(--muted)}

@media (max-width:620px){
  .tbody{grid-template-columns:minmax(0,1fr)}
  .tact{flex-direction:row; flex-wrap:wrap; margin-top:11px; gap:8px}
  .tact button{flex:1 1 auto}
  /* Kommandoen er ofte lengre enn navnet på en smal skjerm. La navnet vinne
     plassen, og la kommandoen ryke først. */
  .thd .cmdtag{max-width:40%}
}

/* ---- telefon ---- */
@media (max-width:620px){
  /* Den klistrede toppen skal ikke spise en tredel av skjermen. */
  .top{padding:10px 16px}
  .topin{gap:9px}
  h1{font-size:18px}
  .brandrow{align-items:center; gap:8px}
  .brandrow p{display:none}
  .seek{gap:7px}
  /* 16px hindrer at iOS zoomer inn når feltet får fokus. */
  .seek input{flex:1 1 120px; padding:11px 12px; font-size:16px}
  #btn-hent{flex:0 0 auto}
  #btn-alle{flex:1 1 100%}
  .qbar{gap:6px; font-size:11.5px}
  .wide{display:none}
  .narrow{display:inline}
  .chip{padding:2px 8px; font-size:11px}
  .plate-hd{gap:10px; padding:13px 14px}
  .seenbox{text-align:left}
  .regno{font-size:22px}
  .rail{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))}
  .cell{padding:10px 14px 11px}
  .bench{margin-top:18px}
  .thd{padding:13px 14px}
  .tbody{padding:0 14px 13px}
  /* Fingertupp, ikke musepeker. */
  button{min-height:42px}
  button.sm{min-height:40px; padding:9px 12px}
  .logbox .hd{padding:11px 14px}
  .logrows{max-height:260px}
  .note{padding:13px 14px}
}

/* ---- logg ---- */
.logbox{margin-top:24px; background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow)}
.logbox .hd{padding:12px 16px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:10px; align-items:center}
.logrows{max-height:320px; overflow:auto; padding:4px 0}
.logrow{display:grid; grid-template-columns:70px 44px minmax(0,1fr); gap:10px; padding:5px 16px; font:400 12.5px/1.5 "IBM Plex Mono", monospace; align-items:start}
.logrow + .logrow{border-top:1px solid var(--line-soft)}
.logrow .t{color:var(--muted)}
.logrow .d{font:600 10.5px/1.6 "Archivo",sans-serif; letter-spacing:.08em; text-transform:uppercase}
.logrow .d.ut{color:var(--accent)} .logrow .d.inn{color:var(--ok)} .logrow .d.sys{color:var(--muted)}
.logrow .x{word-break:break-word; overflow-wrap:anywhere}
.empty{padding:16px; color:var(--muted); font-size:13.5px}
/* 64px, ikke 58: et klokkeslett som 14:06:32 trenger 60 og ble klippet. */
@media (max-width:560px){.logrow{grid-template-columns:64px 38px minmax(0,1fr); gap:8px; padding-left:12px; padding-right:12px}}

/* ---- fot ---- */
.note{
  margin-top:24px; padding:14px 16px; border-radius:11px;
  background:var(--sunk); border:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-2);
}
.note h2{margin-bottom:7px}
.note p{margin:0 0 8px} .note p:last-child{margin:0}
.note code{font:400 12.5px/1.4 "IBM Plex Mono", monospace; background:var(--surface); padding:1px 5px; border-radius:4px; border:1px solid var(--line-soft)}
.msg{margin-top:12px; padding:9px 12px; border-radius:8px; background:var(--accent-soft); font-size:13.5px}
.msg.bad{background:var(--bad-soft); color:var(--bad)}
.rule{border:0; border-top:1px solid var(--line-soft); margin:14px 0}
a{color:var(--accent)}

/* ---- QR-skanner ---- */
.scan-wrap{
  position:fixed; inset:0; z-index:90; background:#05141A;
  display:flex; flex-direction:column;
}
.scan-hd{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:14px 16px; color:#fff; background:rgba(5,20,26,.9);
  padding-top:calc(14px + env(safe-area-inset-top));
}
.scan-hd h2{margin:0; font:600 15px/1.2 "Archivo",sans-serif}
.scan-hd .sub{margin:2px 0 0; font-size:12px; color:#9DB6BF}
.scan-hd .sp{margin-left:auto; display:flex; gap:8px}
.scan-hd button{
  background:rgba(255,255,255,.12); border-color:transparent; color:#fff;
}
.scan-hd button:hover:not(:disabled){background:rgba(255,255,255,.2); border-color:transparent; color:#fff}
.scan-hd button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent)}
.scan-view{position:relative; flex:1 1 auto; overflow:hidden; background:#05141A}
.scan-view video{width:100%; height:100%; object-fit:cover; display:block}
/* Siktefirkanten: ren dekorasjon, skjermleser trenger den ikke. */
.scan-box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(74vw,300px); aspect-ratio:1; border-radius:16px;
  box-shadow:0 0 0 100vmax rgba(5,20,26,.55);
  outline:2px solid rgba(255,255,255,.85); outline-offset:-2px;
}
.scan-box::after{
  content:""; position:absolute; inset:14px; border-radius:8px;
  border:2px solid var(--accent); opacity:.9;
}
.scan-foot{
  flex:0 0 auto; padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  background:rgba(5,20,26,.9); color:#C7DBE2; font-size:13px; text-align:center;
}
.scan-foot.bad{color:#FFC9C0}
@media (prefers-reduced-motion:no-preference){
  .scan-box{animation:scanpulse 1.8s ease-in-out infinite}
  @keyframes scanpulse{0%,100%{outline-color:rgba(255,255,255,.85)}50%{outline-color:var(--accent)}}
}

/* ---- programnummer på CAN-adapteren ---- */
.progrow{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  width:100%; margin:0 0 8px;
}
.progrow label{font-size:12px; color:var(--muted)}
.progrow input{
  width:7.5em; padding:7px 9px;
  border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink);
  font:500 14px/1.2 "IBM Plex Mono", monospace; letter-spacing:.04em;
}
.progrow input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.sub.ok{color:var(--ok)}
.sub.bad{color:var(--bad)}

/* ---- fjernstyring ---- */
.styring{
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:14px 16px; margin:14px 0; box-shadow:var(--shadow);
  border-left:3px solid var(--warn);
}
.styrhd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.styrhd h2{margin:0; font:600 15px/1.2 "Archivo",sans-serif}
.styrhd .lbl{font-size:12px; color:var(--ok); background:var(--ok-soft); padding:2px 8px; border-radius:999px}
.styrrad{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px}