@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --ink:#0C1418; --yta:#122029; --yta2:#1A2E38; --kant:#1E333D; --strec:#2A4450;
  --papper:#DEE7E5; --dim:#7C918D; --svag:#4E625F;
  --amber:#F0B429; --cyan:#5FB0C9; --rose:#D0708A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--ink); color:var(--papper);
  font:15px/1.5 Archivo,'Helvetica Neue',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.dold{display:none !important}

.laddar{padding:60px 20px;text-align:center;color:var(--svag);font-size:14px}

/* ---------------------------------------------------------------- skal */

#app{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
/* hidden-attributet måste slå igenom mot id-regeln ovan */
#app[hidden],#inloggning[hidden],[hidden]{display:none !important}
.sido{background:#0A1216;border-right:1px solid var(--kant);padding:22px 0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.marke{padding:0 20px 24px}
.m-namn{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.m-dom{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--svag);margin-top:4px}
#meny{display:flex;flex-direction:column}
#meny a{border-left:2px solid transparent;color:var(--dim);padding:11px 20px;font-size:14px}
#meny a:hover{color:var(--papper)}
#meny a.pa{color:var(--papper);border-color:var(--amber);background:var(--yta)}
.anv{margin-top:auto;padding:18px 20px 0;border-top:1px solid var(--kant)}
.a-namn{display:block;font-size:13px;font-weight:600}
.a-ut{background:none;border:0;color:var(--svag);font-size:12px;padding:6px 0 0;cursor:pointer}
.a-ut:hover{color:var(--rose)}

main{padding:26px 28px 44px;min-width:0;max-width:900px}
.mobilmeny{display:none}

/* ---------------------------------------------------------------- typografi */

h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:6px 0 0}
h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
.smul{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0}
.rubr{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 13px}
.meta{font-size:12px;color:var(--dim);margin:7px 0 0}
.fotnot{font-size:11px;color:var(--svag);line-height:1.55;margin:14px 0 0}
.tom{color:var(--svag);font-size:13px;padding:16px 0;margin:0}

.topp{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--kant);margin-bottom:18px}

/* ---------------------------------------------------------------- kort */

.kort{background:var(--yta);border:1px solid var(--kant);border-radius:2px;padding:16px;margin-bottom:10px}
.k-topp{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.k-topp .rubr{margin:0}
.rader{columns:2;column-gap:12px}
@media (min-width:1500px){.rader{columns:3}}
.rader>*{break-inside:avoid;margin:0 0 12px}
.rader .bred{column-span:all}

.tal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.t{background:var(--yta);border:1px solid var(--kant);border-radius:2px;padding:14px}
.t-num{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1}
.t-num em{font-size:14px;font-style:normal;color:var(--dim)}
.t-num.rose{color:var(--rose)}
.t-num.amber{color:var(--amber)}
.t-lab{display:block;font-size:12px;color:var(--dim);margin-top:8px}
.t-fot{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--svag);margin-top:7px}

/* ---------------------------------------------------------------- knappar */

.knapp{background:var(--amber);border:0;color:#0C1418;border-radius:2px;padding:10px 16px;
  font-size:14px;font-weight:700;cursor:pointer}
.knapp:hover{background:#FFC63F}
.knapp:disabled{opacity:.35;cursor:not-allowed}
.knapp.ghost{background:none;border:1px solid var(--strec);color:var(--papper);font-weight:600}
.knapp.ghost:hover{background:none;border-color:var(--dim)}
.knapp.liten{padding:7px 12px;font-size:12px}
.knapp.bred{width:100%}

.flikar{display:flex;border:1px solid var(--strec);border-radius:2px;overflow:hidden;width:max-content}
.flikar button{background:none;border:0;color:var(--dim);padding:7px 13px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:11px}
.flikar button.pa{background:var(--yta2);color:var(--papper)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{background:var(--yta);border:1px solid var(--kant);color:var(--dim);border-radius:2px;
  padding:10px 13px;font-size:13px;cursor:pointer;text-align:left}
.chips button.pa{border-color:var(--amber);color:var(--papper);background:var(--yta2)}
.chips em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--svag);margin-top:3px}
.chips.rutnat{display:grid;grid-template-columns:1fr 1fr;gap:7px}

/* ---------------------------------------------------------------- formulär */

.falt{margin-bottom:14px}
.falt label{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}
.falt input,.falt select,.falt textarea{
  width:100%;background:var(--ink);border:1px solid var(--strec);border-radius:2px;
  color:var(--papper);padding:10px 11px;font-size:14px}
.falt textarea{resize:vertical;line-height:1.5}
.falt input::placeholder,.falt textarea::placeholder{color:#3C4F4C}
.par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tre{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}

/* ---------------------------------------------------------------- listor */

table{width:100%;border-collapse:collapse}
th{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--svag);text-align:left;padding:0 10px 9px 0;font-weight:400}
th.hoger,td.hoger{text-align:right;padding-right:0}
td{padding:11px 10px 11px 0;border-top:1px solid var(--kant);font-size:13px}
.lista a.rad{display:block;color:inherit;text-decoration:none;
  margin:0 -8px;padding:6px 8px;border-radius:6px}
.lista a.rad:hover{background:#152530}
tbody tr.klick{cursor:pointer}
tbody tr.klick:hover td{background:#152530}
tbody tr.vald td{background:var(--yta2)}
td.namn{font-weight:600}
.bantyp{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px;color:var(--svag)}
.bantyp.short{color:var(--amber)}
.bantyp.medium{color:var(--cyan)}
.bantyp.long{color:var(--dim)}
td.mono{font-family:'JetBrains Mono',monospace;font-size:12px}

.lista{list-style:none;margin:0;padding:0}
.lista li{border-top:1px solid var(--kant);padding:12px 0}
.lista li:first-child{border-top:0}

.stapel{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.stapel li{display:grid;grid-template-columns:130px 1fr 44px;gap:11px;align-items:center;
  font-size:13px;border:0;padding:0}
.stapel .s-namn{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spar{height:8px;background:#16262E;border-radius:1px;overflow:hidden}
.spar i{display:block;height:100%;background:var(--amber)}
.spar i.cyan{background:var(--cyan)}
.spar i.rose{background:var(--rose)}
.s-tal{font-family:'JetBrains Mono',monospace;font-size:12px;text-align:right}

.staplar{display:flex;gap:6px;align-items:flex-end;height:180px;
  box-sizing:border-box;padding-top:15px}
.kol{flex:1;display:flex;flex-direction:column;gap:7px;height:100%}
.stav-yta{position:relative;flex:1;display:flex;align-items:flex-end}
.stav{width:100%;background:color-mix(in srgb,var(--amber) 15%,transparent);
  border-top:2px solid var(--amber);min-height:2px}
.stav-tal{position:absolute;top:-3px;left:0;right:0;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim)}
.kol-lab{text-align:center;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--svag)}

.markning{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--kant);border-radius:1px;padding:3px 7px;color:var(--dim)}
.markning.amber{color:var(--amber);border-color:#3A3320}
.markning.cyan{color:var(--cyan);border-color:#25454F}
.markning.rose{color:var(--rose);border-color:#4A2C34}

.notis{font-size:13px;line-height:1.6;color:var(--dim);margin:0;
  background:var(--ink);border-left:2px solid var(--cyan);border-radius:2px;padding:12px}
.notis.fel{border-color:var(--rose)}
.notis.ok{border-color:var(--amber)}

/* ---------------------------------------------------------------- logga pass */

.vapenlista{display:grid;gap:7px}
.vkort{background:var(--yta);border:1px solid var(--kant);border-radius:2px;overflow:hidden}
.vkort.pa{border-color:var(--amber)}
.vtoggle{width:100%;display:flex;align-items:center;gap:11px;background:none;border:0;
  padding:12px;color:inherit;cursor:pointer;text-align:left}
.ruta{width:20px;height:20px;flex:0 0 20px;border:1px solid var(--strec);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#0C1418}
.ruta.i{background:var(--amber);border-color:var(--amber)}
.v-namn{font-size:14px;font-weight:600}
.v-kal{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);display:block;margin-top:2px}
.v-rak{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--svag)}
.skottdel{padding:0 12px 12px;border-top:1px solid var(--kant)}
.matarrad{display:flex;align-items:baseline;gap:9px;margin:10px 0 11px}
.matare{width:118px;background:none;border:0;border-bottom:2px solid var(--strec);
  color:var(--amber);font-family:'JetBrains Mono',monospace;font-size:38px;font-weight:600;padding:0 0 3px}
.matare::-webkit-outer-spin-button,.matare::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.matare[type=number]{-moz-appearance:textfield}
.matarrad span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)}
.steg{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.steg button{background:var(--yta2);border:1px solid var(--strec);color:var(--papper);
  border-radius:3px;padding:10px 0;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:13px}

.sparrad{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:13px 0;
  border-top:1px solid var(--kant);background:var(--ink);margin-top:16px}
.summa{font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--amber);min-width:78px}
.summa em{font-style:normal;font-size:11px;color:var(--dim);margin-left:5px}

/* ---------------------------------------------------------------- inloggning */

#inloggning{max-width:392px;margin:0 auto;padding:48px 20px 60px;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.login-titel{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:12px 0 6px}
.login-under{color:var(--dim);font-size:13px;margin:0 0 22px;line-height:1.55}
.login-kort{background:var(--yta);border:1px solid var(--kant);border-radius:2px;
  padding:16px;margin-bottom:12px}
.login-kort input{background:var(--ink)}
#inloggning .notis{margin-bottom:14px}
#inloggning .knapp{padding:14px}
#inloggning .fotnot{margin-top:12px}
.ringar{width:64px;height:64px;margin-bottom:4px}
.ringar circle{fill:none;stroke:#223B46;stroke-width:1.5}
.ringar .hit{fill:var(--amber);stroke:none}

/* ---------------------------------------------------------------- mobil */

@media (max-width:860px){
  #app{grid-template-columns:1fr}
  .sido{display:none}
  main{padding:18px 16px 90px}
  .rader{columns:1}
  .tal{grid-template-columns:repeat(2,1fr)}
  h1{font-size:25px}
  .mobilmeny{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;
    background:var(--ink);border-top:1px solid var(--kant);padding-bottom:env(safe-area-inset-bottom)}
  .mobilmeny a{flex:1;text-align:center;padding:13px 0 11px;color:var(--svag);
    font-size:12px;font-weight:600;border-top:2px solid transparent;margin-top:-1px}
  .mobilmeny a.pa{color:var(--papper);border-color:var(--amber)}
  .stapel li{grid-template-columns:110px 1fr 40px}
  table.smal th:nth-child(n+4),table.smal td:nth-child(n+4){display:none}
}

/* ---------------------------------------------------------------- vad om */

.prickar{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0}
.prick{width:15px;height:15px;border-radius:2px}
.prick.a{background:var(--amber)}
.prick.c{background:#9A8440}
.prick.d{background:#5D6B5F}
.prick.m{background:var(--rose)}
.prick.ns{background:var(--rose);opacity:.5}

.zoner{display:grid;gap:6px}
.zon{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--ink);border:1px solid var(--kant);border-radius:2px;padding:9px 11px}
.zon.andrad{border-color:var(--cyan)}
.z-namn{font-size:13px;font-weight:600}
.z-namn.a{color:var(--amber)}
.z-namn.c{color:#9A8440}
.z-namn.d{color:#5D6B5F}
.z-namn.m,.z-namn.ns{color:var(--rose)}
.z-varde{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--svag);margin-top:3px}
.z-styr{display:flex;align-items:center;gap:3px}
.z-styr button{width:32px;height:32px;background:var(--yta2);border:1px solid var(--strec);
  color:var(--papper);border-radius:2px;font-size:15px;cursor:pointer;line-height:1}
.z-styr button:disabled{opacity:.25;cursor:not-allowed}
.z-antal{min-width:30px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:16px}

.snabb{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--kant)}
.snabb button{background:var(--yta2);border:1px solid var(--strec);color:var(--papper);
  border-radius:99px;padding:7px 12px;font-size:12px;cursor:pointer}
.snabb button:hover{border-color:var(--amber)}
.snabb button:disabled{opacity:.3;cursor:not-allowed}

input[type=range]{width:100%;accent-color:var(--amber);background:transparent}

/* ---------------------------------------------------------------- statistik */

.graf{margin-top:4px}
.graf svg{width:100%;height:auto;display:block}
.rutlinje{stroke:#1B2E37;stroke-width:1}
.axel{fill:var(--svag);font-family:'JetBrains Mono',monospace;font-size:9px;text-anchor:end}
.axel.mitt{text-anchor:middle}
.axel.start{text-anchor:start}
.linje{fill:none;stroke:var(--amber);stroke-width:2.5}
.linje.tunn{stroke:var(--strec);stroke-width:1.5}
.punkt{fill:var(--amber);stroke:var(--ink);stroke-width:1.5}
.punkt.cyan{fill:var(--cyan)}

.teckenrad{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--svag)}
.teckenrad span{display:flex;align-items:center;gap:5px}
.prov{display:block}
.prov.linje{width:14px;height:2.5px;background:var(--amber)}
.prov.tunn{width:14px;height:1.5px;background:var(--strec)}
.prov.punkt{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.prov.punkt.cyan{background:var(--cyan)}

.spannLista{display:grid;gap:18px}
.sr-huvud{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sr-namn{font-size:14px;font-weight:700}
.sr-namn.amber{color:var(--amber)}
.sr-namn.cyan{color:var(--cyan)}
.sr-namn.dov{color:var(--papper)}
.sr-antal{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--svag)}
.axel-yta{position:relative;height:22px;background:#16262E;border-radius:1px}
.band{position:absolute;top:7px;height:8px;background:var(--strec);border-radius:1px}
.snittprick{position:absolute;top:3px;width:2px;height:16px;background:var(--amber)}
.sr-spann{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--dim);margin-top:7px}

td.namn em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--svag);margin-top:3px}
td.namn.amber{color:var(--amber)}
td.namn.cyan{color:var(--cyan)}
.stav.rose{background:rgba(208,112,138,.25);border-top-color:var(--rose)}

.vapennr{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--svag);
  font-weight:400;letter-spacing:0}

.raknat-ruta{display:flex;align-items:center;gap:10px;background:var(--ink);
  border:1px solid var(--strec);border-radius:2px;padding:9px 11px;min-height:42px}
.raknat{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--amber);flex:1}
.raknat-ruta input{border:0;background:none;padding:0;flex:1}
.raknat-info{display:block}

/* ---------------------------------------------------------------- anmälningar */

.anmalan{width:100%;display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center;
  background:none;border:0;color:inherit;font-family:inherit;cursor:pointer;text-align:left;
  padding:13px 0}
.anmalan:hover{background:#152530}
.anmalan.nara{box-shadow:inset 2px 0 0 var(--amber)}
.an-datum{background:var(--ink);border:1px solid var(--kant);border-radius:2px;
  padding:6px 0;text-align:center}
.an-dag{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1}
.an-man{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--dim);margin-top:3px}
.an-namn{display:block;font-size:14px;font-weight:700}
.an-meta{display:block;font-size:11px;color:var(--dim);margin-top:4px}
.an-marken{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.an-hoger{text-align:center;min-width:40px}
.an-kvar{display:block;font-family:'JetBrains Mono',monospace;font-size:19px;color:var(--dim)}
.an-kvar.nara{color:var(--amber)}
.an-kvar-lab{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--svag);margin-top:2px}

.an-detalj{padding:4px 0 16px}
.an-rutnat{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--kant);
  border:1px solid var(--kant);margin:14px 0}
.an-rutnat .fakta{background:var(--yta);padding:10px 11px}
.f-etikett{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--svag)}
.f-varde{display:block;font-size:13px;margin-top:5px}
.f-varde.varning{color:var(--amber)}

@media (max-width:600px){
  .an-rutnat{grid-template-columns:1fr}
  .anmalan{grid-template-columns:42px 1fr auto;gap:10px}
}

.liveruta{border-top:1px solid var(--kant);margin-top:14px;padding-top:14px}
.live-topp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.live-marke{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.live-marke i{width:7px;height:7px;border-radius:50%;background:var(--rose);
  animation:blip 1.8s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.live-tid{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--svag);
  margin-right:auto}

.parningskod{font-family:'JetBrains Mono',monospace;font-size:34px;letter-spacing:.14em;
  text-align:center;background:var(--yta);border:1px solid var(--kant);border-radius:2px;
  padding:20px 12px;color:var(--amber);margin-top:6px}

.qr-yta{margin-top:22px;padding-top:18px;border-top:1px solid var(--kant);text-align:center}
.qr-rubr{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.qr-bild{width:168px;height:168px;margin:0 auto;background:var(--yta);
  border:1px solid var(--kant);border-radius:2px;padding:10px}
.qr-bild svg{width:100%;height:100%;display:block}
.qr-under{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:12px}
.qr-kod{font-family:'JetBrains Mono',monospace;font-size:16px;letter-spacing:.12em;
  color:var(--papper)}
.qr-status{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--svag)}

/* Verktygslänkar längst ner på utsidan. */
.dal-verktygsrad{margin:28px auto 0;text-align:center;font-size:13px;color:var(--dov,#8A9AA1)}
.dal-verktygsrad a{color:var(--dov,#8A9AA1);text-decoration:none;border-bottom:1px solid var(--kant,#1E2C33);padding-bottom:2px}
.dal-verktygsrad a:hover,.dal-verktygsrad a:focus-visible{color:var(--amber,#D8BE96);border-bottom-color:var(--amber,#D8BE96)}
.dal-prick{margin:0 10px;opacity:.5}

/* Utgångar ur appen. Skiljs från vyerna med en linje; externa får en pil. */
#meny a.ut{margin-top:2px;color:var(--svag)}
#meny a.ut:first-of-type{margin-top:10px}
#meny a.ut:hover{color:var(--papper)}
#meny a.ut.extern .ut-pil{margin-left:6px;font-size:11px;color:var(--svag)}
#meny a.ut.extern:hover .ut-pil{color:var(--amber)}
.mobilmeny a.ut,nav a.ut{color:var(--svag)}

/* Länkraden på utsidan */
.dal-verktygsrad .dal-pil{margin-left:5px;font-size:11px;opacity:.7}

/* AceVR-vyn */
.ace-slapp{border:1px dashed var(--strec);border-radius:3px;padding:30px 16px;text-align:center;cursor:pointer}
.ace-slapp.over{border-color:var(--amber);background:rgba(240,180,41,.06)}
.ace-pil{font-size:26px;color:var(--svag);line-height:1}
.ace-stor{margin:10px 0 0;font-size:14px}
.ace-liten{margin:4px 0 0;font-size:12px;color:var(--svag)}
.ace-fot{margin:10px 0 0;font-size:12px;color:var(--svag);line-height:1.6}
.ace-basta{background:var(--yta);border:1px solid var(--kant);border-radius:3px;padding:14px;margin-top:22px}
.ace-tal{margin:2px 0;font-size:34px;font-weight:600;color:var(--amber);line-height:1.1}
.ace-bana{background:var(--yta);border:1px solid var(--kant);border-radius:3px;padding:12px;margin-bottom:8px}
.ace-rad{display:flex;justify-content:space-between;align-items:baseline}
.ace-namn{font-size:14px;font-weight:600}
.ace-hf{font-size:14px;color:var(--amber)}
.ace-kurva{width:100%;height:30px;display:block;margin-top:8px}
.ace-meta{margin:6px 0 0;font-size:12px;color:var(--svag)}

/* AceVR: bandetalj */
.ace-bana.klickbar{display:block;width:100%;text-align:left;border:1px solid var(--kant);
  background:var(--yta);cursor:pointer;font:inherit;color:inherit}
.ace-bana.klickbar:hover{border-color:var(--strec)}
.ace-tal-rad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.ace-ruta{background:var(--yta);border:1px solid var(--kant);border-radius:3px;padding:12px}
.ace-ruta .smul{margin:0}
.ace-ruta .ace-tal{margin:3px 0 0;font-size:22px}
.ace-tal.dampad{color:var(--papper)}
.ace-tal.cyan{color:var(--cyan)}
.ace-filterrad{display:flex;gap:6px;margin:18px 0 8px;flex-wrap:wrap}
.ace-filter{background:none;border:1px solid var(--kant);border-radius:3px;color:var(--dim);
  font-size:12px;padding:5px 11px;cursor:pointer}
.ace-filter.pa{background:var(--yta2);border-color:var(--strec);color:var(--papper)}
.ace-tabell{background:var(--yta);border:1px solid var(--kant);border-radius:3px;overflow:hidden}
.ace-tr{display:grid;grid-template-columns:1.6fr .8fr .8fr .6fr .6fr;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--kant);font-size:13px}
.ace-tr:last-child{border-bottom:none}
.ace-tr span:not(:first-child){text-align:right}
.ace-tr .dampad{color:var(--dim)}
.ace-th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--svag)}
.ace-tr.noll{opacity:.5}
.ace-tr.pb{background:rgba(240,180,41,.06)}
.ace-tr.pb span:nth-child(2){color:var(--amber)}
.ace-avdelare{margin-top:34px;padding-top:20px;border-top:1px solid var(--kant)}
@media (max-width:640px){
  .ace-tal-rad{grid-template-columns:repeat(2,1fr)}
  .ace-tr{grid-template-columns:1.4fr .7fr .7fr;font-size:12px}
  .ace-tr span:nth-child(4),.ace-tr span:nth-child(5){display:none}
}

/* AceVR: kalender */
.ace-vaxel{display:flex;gap:6px}
.kal-kort{background:var(--yta);border:1px solid var(--kant);border-radius:3px;padding:14px 16px;margin-top:4px}
.kal-rad{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kal-manad{margin:0 0 7px;font-size:11px;color:var(--svag)}
.kal-manad.nu{color:var(--papper)}
.kal-rutnat{display:grid;grid-template-columns:repeat(7,10px);gap:3px}
.kal-tom{width:10px;height:10px}
.kal-dag{width:10px;height:10px;padding:0;border:0;border-radius:2px;background:#0F1A20;cursor:default}
.kal-dag.har{cursor:pointer}
.kal-dag.har:hover{outline:1px solid var(--strec);outline-offset:1px}
.kal-dag.vald{box-shadow:0 0 0 1.5px var(--amber)}
.kal-fot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--kant);font-size:11px;color:var(--dim)}
.kal-skala{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--svag)}
.kal-skala i{width:10px;height:10px;border-radius:2px;display:block}
.kal-dagrad{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;margin:20px 0 8px}
.kal-dagnamn{font-size:16px;font-weight:600}
.ace-tr.kal-tr{grid-template-columns:1.8fr .8fr .8fr .8fr}
.ace-tr.klickbar{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--kant);
  color:inherit;font:inherit;cursor:pointer}
.ace-tr.klickbar:hover{background:var(--yta2)}
@media (max-width:640px){
  .kal-rad{grid-template-columns:1fr;gap:16px}
  .ace-tr.kal-tr{grid-template-columns:1.6fr .7fr .7fr}
  .ace-tr.kal-tr span:nth-child(4){display:none}
}

/* ------------------------------------------- topprad och utfällbar sidomeny på mobil */
/* Ligger sist med flit: reglerna nedan ska vinna över 860px-blocket längre upp. */

.topprad{display:none}
.sido-skugga{display:none}

@media (max-width:860px){
  .topprad{display:flex;align-items:center;gap:11px;position:fixed;top:0;left:0;right:0;z-index:12;
    height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;
    background:var(--ink);border-bottom:1px solid var(--kant)}
  .topprad-meny{appearance:none;-webkit-appearance:none;background:none;border:0;
    padding:8px;margin-left:-8px;color:var(--dim);cursor:pointer;border-radius:3px;
    display:flex;align-items:center}
  .topprad-meny:hover{color:var(--papper)}
  .topprad-meny:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .topprad-streck{display:block;width:18px;height:1.5px;background:currentColor;
    box-shadow:0 5px currentColor,0 10px currentColor;margin:5px 0 10px}
  .topprad-titel{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--papper)}

  main{padding-top:calc(70px + env(safe-area-inset-top))}

  .sido{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:14;
    width:78%;max-width:272px;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(22px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
    transform:translateX(-101%);transition:transform .24s cubic-bezier(.3,.7,.3,1)}
  .sido .anv{margin-top:auto}
  #app.meny-oppen .sido{transform:none}

  .sido-skugga{display:block;position:fixed;inset:0;z-index:13;border:0;padding:0;
    appearance:none;-webkit-appearance:none;background:rgba(4,8,10,.62);cursor:pointer;
    opacity:0;pointer-events:none;transition:opacity .2s ease}
  #app.meny-oppen .sido-skugga{opacity:1;pointer-events:auto}
}

@media (prefers-reduced-motion:reduce){
  .sido,.sido-skugga{transition:none}
}

/* ------------------------------------------- bara hamburgare: mobilraden bort */
/* Sist i filen med flit — ska vinna över 860px-blocket och över topprads-blocket. */

@media (max-width:860px){
  /* Raden ligger kvar i markupen. Vill du ha tillbaka den räcker det att stryka
     den här regeln — resten av navigeringen rör den inte. */
  .mobilmeny{display:none}

  main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

  .genvag{margin-left:auto;text-decoration:none;white-space:nowrap;
    border:1px solid var(--strec);border-radius:3px;padding:6px 11px;
    color:var(--amber);font-size:12px;font-weight:700;letter-spacing:-.01em}
  .genvag:active{background:var(--yta2)}
}

/* utvecklingsfliken — staplar och divisionsmarkering */
.rutlinje.bryt{stroke:var(--amber);stroke-dasharray:3 3;opacity:.5}
.stapel{fill:var(--amber)}
.stapel.ns{fill:#4FA8C7}
.stapel.proc{fill:var(--strec)}
.ruta p.upp{color:#5FBF7F;font-size:11px;margin:2px 0 0}
.ruta p.ner{color:#D2705A;font-size:11px;margin:2px 0 0}
.t-fot.upp{color:#5FBF7F}
.t-fot.ner{color:#D2705A}
.rad.klick{cursor:pointer}
.rad.klick:hover{background:var(--yta)}

em.tagg{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.04em;background:var(--kant);color:var(--svag);
  padding:2px 7px;border-radius:2px}