/* Brikkeklargjøring – eget stilsett, uavhengig av stil.css (testbenken). */
:root{
  --bg:#EFF1EE; --surface:#FFFFFF; --raised:#F7F9F6; --sunk:#E6EAE3;
  --line:#D2D9CD; --line-soft:#E3E8DE;
  --ink:#141A12; --ink-2:#3C4A38; --muted:#6D7C68;
  --accent:#2F6B3A; --accent-ink:#FFFFFF; --accent-soft:#DDEEDF;
  --ok:#2F6B3A; --ok-soft:#DDEEDF;
  --warn:#9A6400; --warn-soft:#F8E9CC;
  --bad:#A63228; --bad-soft:#F8DED9;
  --idle:#9AA795; --idle-soft:#E9EDE6;
  --shadow:0 1px 2px rgba(20,26,18,.06), 0 10px 26px -18px rgba(20,26,18,.22);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E120C; --surface:#161C13; --raised:#1D2519; --sunk:#111610;
    --line:#2A3426; --line-soft:#1F281C;
    --ink:#E7EDE3; --ink-2:#B4C2AE; --muted:#81907B;
    --accent:#6FBF7C; --accent-ink:#06220B; --accent-soft:#14301A;
    --ok:#6FBF7C; --ok-soft:#14301A;
    --warn:#DFA94B; --warn-soft:#31260F;
    --bad:#F08A78; --bad-soft:#381A16;
    --idle:#5C6B57; --idle-soft:#192016;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -20px rgba(0,0,0,.85);
  }
}

*{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:860px; margin:0 auto; padding:0 16px 56px}
.lbl{font:600 10.5px/1.2 "Archivo",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
h1{margin:0; font:700 21px/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)}
a{color:var(--accent)}
.narrow{display:none}

/* ---- 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:12px 16px;
}
.topin{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.brandrow{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.brandrow p{margin:0; color:var(--muted); font-size:13px}
.brandrow .who{margin-left:auto; font-size:12.5px; color:var(--muted)}
.brandrow .who a{margin-left:8px}
.seek{display:flex; gap:8px; flex-wrap:wrap}
.seek input{
  flex:1 1 150px; min-width:0; padding:10px 12px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink);
  font:500 16px/1.3 "IBM Plex Mono",monospace;
}
.seek input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
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){filter:brightness(1.08); color:var(--accent-ink)}
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)}
.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.tid b{font-variant-numeric:tabular-nums}
.chip.bil{background:var(--accent-soft, #eef2ff); border-color:transparent; color:var(--ink, inherit); text-decoration:none}
/* Forklaringen om tidtakingen til scoreboardet (Tom 31.10). */
.tidinfo{margin:12px 0 0; padding:10px 13px; border-radius:9px; background:var(--accent-soft); color:var(--ink); font-size:13.5px; line-height:1.5}
.tidinfo b{font-weight:600}
.tidinfo a{white-space:nowrap}
.chip.err{background:var(--bad-soft); border-color:transparent; color:var(--bad)}

/* ---- skanner ---- */
.scan-wrap{position:fixed; inset:0; z-index:50; background:#000; display:flex; flex-direction:column}
.scan-hd{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 16px; color:#fff; background:rgba(0,0,0,.6)}
.scan-hd h2{color:#fff; font-size:15px; letter-spacing:0; text-transform:none}
.scan-hd .sub{margin:3px 0 0; font-size:12.5px; color:rgba(255,255,255,.75)}
.scan-hd .sp{display:flex; gap:8px}
.scan-hd button{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3)}
.scan-view{flex:1; position:relative; overflow:hidden}
.scan-view video{width:100%; height:100%; object-fit:cover; display:block}
.scan-box{position:absolute; inset:18% 10%; border:2px solid rgba(255,255,255,.85); border-radius:10px; box-shadow:0 0 0 100vmax rgba(0,0,0,.25)}
.scan-foot{padding:12px 16px; color:#fff; font-size:13.5px; background:rgba(0,0,0,.6); text-align:center}
.scan-foot.bad{color:#F08A78}

/* ---- enhetsplate ---- */
.plate{background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); margin-top:16px; overflow:hidden}
.plate-hd{display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--line-soft); background:var(--raised); flex-wrap:wrap}
.regno{font:700 23px/1 "IBM Plex Mono",monospace; margin:0 0 4px}
.plate-hd .sub{color:var(--muted); font-size:13px; margin:0}
.seenbox{text-align:right}
.seenbox .big{font:600 16px/1.2 "IBM Plex Mono",monospace; margin-top:3px}
.rail{display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:1px; background:var(--line-soft)}
.cell{background:var(--surface); padding:10px 15px 11px; 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}
.fresh{color:var(--ok)} .stale{color:var(--warn)} .cold{color:var(--bad)}

/* ---- innlogging ---- */
.portfelt{margin:0 0 12px}
.portfelt label{display:block; font:600 12px/1.4 "Archivo",sans-serif; color:var(--muted); margin-bottom:4px}
.portfelt input{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink); font:500 16px/1.3 "Archivo",sans-serif;
}
.portfelt input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.tmeta{color:var(--muted); font-size:12.5px}

/* ---- trapp ---- */
.steps{margin-top:20px; display:flex; flex-direction:column; gap:0}
.step{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:14px 15px 14px 52px; box-shadow:var(--shadow); margin-bottom:10px;
}
.step.ok{border-left:3px solid var(--ok); padding-left:50px}
.step.warn{border-left:3px solid var(--warn); padding-left:50px}
.step.bad{border-left:3px solid var(--bad); padding-left:50px}
.step.run{border-left:3px solid var(--accent); padding-left:50px}
.step .num{
  position:absolute; left:14px; top:14px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 "Archivo",sans-serif; background:var(--idle-soft); color:var(--muted);
}
.step.ok .num{background:var(--ok); color:var(--surface)}
.step.warn .num{background:var(--warn); color:var(--surface)}
.step.bad .num{background:var(--bad); color:var(--surface)}
.step.run .num{background:var(--accent); color:var(--accent-ink); animation:puls 1.4s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.step.run .num{animation:none}}
.sname{font:600 15.5px/1.25 "Archivo",sans-serif; margin:0}
.smeta{margin:3px 0 0; color:var(--muted); font-size:12.5px}
.sverdict{margin:8px 0 0; font:500 14px/1.45 "Archivo",sans-serif}
.sverdict.ok{color:var(--ok)} .sverdict.warn{color:var(--warn)} .sverdict.bad{color:var(--bad)} .sverdict.run{color:var(--accent)}
.checks{margin:9px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.checks li{display:flex; gap:8px; align-items:baseline; font-size:13.5px; color:var(--ink-2)}
.dot{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--idle); margin-top:5px}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .dot.run{background:var(--accent)}
.checks b{font:600 13px/1.4 "IBM Plex Mono",monospace; color:var(--ink)}
.act{margin:11px 0 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.act .cmdtag{font:400 11.5px/1.4 "IBM Plex Mono",monospace; color:var(--muted); width:100%}
.ask{margin:11px 0 0; padding:11px 13px; border-radius:8px; background:var(--accent-soft); font-size:13.5px}
.ask p{margin:0 0 9px}
.ask .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ask input{
  padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:var(--surface);
  color:var(--ink); font:600 16px/1.2 "IBM Plex Mono",monospace; width:9ch; letter-spacing:.08em;
}
.regnr{padding:12px 15px 13px; border-top:1px solid var(--line-soft)}
.regnr .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px}
.regnr input{
  padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:var(--surface);
  color:var(--ink); font:600 16px/1.2 "IBM Plex Mono",monospace; width:11ch; letter-spacing:.08em; text-transform:uppercase;
}
.regnr input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.regnr .svar{margin:9px 0 0; font-size:13.5px; color:var(--ink-2)}
.regnr .svar.bad{color:var(--bad)}
.regnr .svar.ok{color:var(--ok)}
.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 .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}

/* ---- logg og fot ---- */
.logbox{margin-top:22px; background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow)}
.logbox .hd{padding:11px 15px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:10px; align-items:center}
.logrows{max-height:300px; overflow:auto; padding:4px 0}
.logrow{display:grid; grid-template-columns:70px 44px minmax(0,1fr); gap:10px; padding:5px 15px; 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:15px; color:var(--muted); font-size:13.5px}
.note{margin-top:22px; padding:14px 15px; 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)}
/* ---- venteboks: nedtelling mens server og brikke jobber ---- */
.vente{margin:12px 0 0; padding:13px; border-radius:9px; background:var(--accent-soft); display:flex; gap:14px; align-items:flex-start}
.vring{position:relative; flex:0 0 72px; width:72px; height:72px}
.vring svg{display:block; width:100%; height:100%; transform:rotate(-90deg)}
.vring circle{fill:none; stroke-width:6}
.vring .spor{stroke:var(--surface)}
.vring .fyll{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1s linear}
.vring.spinn svg{animation:vspinn 1.6s linear infinite}
@keyframes vspinn{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.vtid{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 15px/1 "IBM Plex Mono",monospace; color:var(--ink)}
.vtekst{flex:1 1 auto; min-width:0}
.vtittel{margin:0; font:600 14.5px/1.35 "Archivo",sans-serif; color:var(--ink)}
.vunder{margin:3px 0 0; font-size:12.5px; color:var(--ink-2)}
.vbar{margin:9px 0 2px; height:7px; border-radius:99px; background:var(--surface); overflow:hidden}
.vbar span{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width 1s linear}
.vliste{margin:9px 0 6px; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--muted)}
.vliste li{display:flex; gap:7px; align-items:baseline}
.vliste li small{color:var(--muted)}
.vliste li.ok{color:var(--ink-2)} .vliste li.na{color:var(--ink); font-weight:600}
.vprikk{flex:0 0 auto; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--idle); position:relative; top:-1px}
.vliste li.ok .vprikk{background:var(--ok); border-color:var(--ok)}
.vliste li.na .vprikk{background:var(--accent); border-color:var(--accent); animation:puls 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vring.spinn svg,.vliste li.na .vprikk{animation:none} .vring .fyll,.vbar span{transition:none}}
@media (max-width:620px){.vente{padding:11px; gap:11px} .vring{flex-basis:60px; width:60px; height:60px}}
.rule{border:0; border-top:1px solid var(--line-soft); margin:13px 0}

@media (max-width:620px){
  .top{padding:10px 16px}
  h1{font-size:18px}
  .brandrow p:not(.who){display:none}
  .wide{display:none} .narrow{display:inline}
  .qbar{font-size:11.5px}
  .chip{padding:2px 8px; font-size:11px}
  .plate-hd{padding:12px 13px}
  .seenbox{text-align:left}
  .regno{font-size:20px}
  .rail{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
  .step{padding:13px 13px 13px 48px}
  .step.ok,.step.warn,.step.bad,.step.run{padding-left:46px}
  button{min-height:42px}
  button.sm{min-height:40px; padding:9px 12px}
  .act button{flex:1 1 auto}
  .logrows{max-height:250px}
  .logrow{grid-template-columns:64px 38px minmax(0,1fr); gap:8px; padding-left:12px; padding-right:12px}
}