/* TriPuls felles stilark: tokens, komponenter, veiviser og store knapper-modus */
:root{
  --ground:#F2F6F8; --panel:#FFFFFF; --panel2:#E9F0F3; --ink:#14232B; --ink2:#3F545F; --muted:#6E838D;
  --linje:#D6E1E7; --linje2:#C3D2DA;
  --svom:#0E86A8; --sykkel:#C96A1B; --lop:#B33A5B;
  --svom-bg:#E2F1F5; --sykkel-bg:#F7EBDD; --lop-bg:#F5E4E9;
  --ok:#5E8F5A; --advarsel:#C0842A; --kritisk:#B3423A;
  --skjerm-bg:#0F1B21; --skjerm-ink:#E8F0F3; --skjerm-linje:#26383F; --skjerm-muted:#8AA0AA;
  --skjerm-svom:#3DB9DB; --skjerm-sykkel:#EFA050; --skjerm-lop:#EE7D9D;
  --skygge:0 1px 2px rgba(20,35,43,.06), 0 5px 18px rgba(20,35,43,.07);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0C1418; --panel:#131E24; --panel2:#182630; --ink:#E8F0F3; --ink2:#AFC2CB; --muted:#7E939D;
    --linje:#22323A; --linje2:#2D414B;
    --svom:#1E9DBF; --sykkel:#D07B2A; --lop:#C7527B;
    --svom-bg:#12262D; --sykkel-bg:#271D10; --lop-bg:#271219;
    --ok:#6FA36B; --advarsel:#CE9740; --kritisk:#C25850;
    --skygge:0 1px 2px rgba(0,0,0,.4), 0 5px 18px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground); color:var(--ink); margin:0; font-size:16px; line-height:1.55;
  font-family:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif}
button{font:inherit; cursor:pointer}
input,select{font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--linje2);
  border-radius:9px; padding:11px 13px; width:100%}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--svom); outline-offset:2px}
a{color:var(--svom)}
.mono{font-family:"IBM Plex Mono",Consolas,monospace; font-variant-numeric:tabular-nums}
.ramme{max-width:1080px; margin:0 auto; padding:18px 16px 90px}

/* Topplinje */
.topp{display:flex; align-items:center; gap:12px; padding:10px 0 12px; border-bottom:2px solid var(--ink);
  margin-bottom:18px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.logo svg{width:30px; height:30px; flex:none}
.logo b{font-family:Anton,"Arial Narrow",Impact,sans-serif; font-weight:400; font-size:24px; letter-spacing:.01em}
.logo b span{color:var(--svom)}
.topp .fyll{flex:1}
.toppknapp{border:1px solid var(--linje2); background:var(--panel); color:var(--ink2); border-radius:99px;
  padding:6px 14px; font-weight:600; font-size:13.5px}
.toppknapp.pa{background:var(--svom); border-color:var(--svom); color:#fff}

/* Kort og seksjoner */
.kort{background:var(--panel); border:1px solid var(--linje); border-radius:13px; padding:17px 17px 15px;
  box-shadow:var(--skygge); margin-bottom:14px}
.kort h2{font-family:Anton,"Arial Narrow",Impact,sans-serif; font-weight:400; font-size:22px; margin:0 0 10px;
  letter-spacing:.015em}
.kort h3{font-size:15px; font-weight:700; margin:14px 0 8px}
.etikett{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700;
  margin:0 0 4px; display:block}
.hjelpetekst{font-size:13.5px; color:var(--muted); margin:4px 0 0}
.rad2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rad3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
@media (max-width:560px){ .rad3{grid-template-columns:1fr 1fr} }

/* Knapper */
.primar{border:none; background:var(--svom); color:#fff; border-radius:10px; padding:12px 18px;
  font-weight:700; font-size:15px}
.primar:disabled{opacity:.5; cursor:default}
.sekundar{border:1px solid var(--linje2); background:var(--panel); color:var(--ink2); border-radius:10px;
  padding:11px 16px; font-weight:600; font-size:14px}
.farlig{border:1px solid var(--kritisk); background:none; color:var(--kritisk); border-radius:10px;
  padding:10px 15px; font-weight:600; font-size:13.5px}
.lenkeknapp{background:none; border:none; color:var(--muted); font-size:13px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; padding:6px 2px}

/* Faner */
.faner{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.fane{border:1px solid var(--linje2); background:var(--panel); color:var(--ink2); border-radius:99px;
  padding:8px 15px; font-weight:600; font-size:13.5px}
.fane.pa{background:var(--ink); border-color:var(--ink); color:var(--ground)}

/* Tabeller */
.tabellramme{overflow-x:auto; border:1px solid var(--linje); border-radius:11px; background:var(--panel)}
table.liste{border-collapse:collapse; width:100%; font-size:13.5px}
.liste th{text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  padding:9px 11px; border-bottom:1px solid var(--linje2); font-weight:700; white-space:nowrap}
.liste td{padding:8px 11px; border-bottom:1px solid var(--linje); white-space:nowrap; vertical-align:middle}
.liste tr:last-child td{border-bottom:none}
.pill{font-size:11px; font-weight:700; border-radius:5px; padding:2px 8px; background:var(--panel2); color:var(--ink2)}
.pill.svom{background:var(--svom-bg); color:var(--svom)}
.pill.sykkel{background:var(--sykkel-bg); color:var(--sykkel)}
.pill.lop{background:var(--lop-bg); color:var(--lop)}
.pill.ok{background:var(--svom-bg); color:var(--ok)}
.status-prikk{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px}

/* Dommerkort */
.dommerkort{background:var(--panel); border:1px solid var(--linje); border-radius:14px; padding:13px 14px;
  box-shadow:var(--skygge); margin-bottom:12px}
.dommerkort .navnlinje{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap}
.dommerkort .navn{font-weight:700; font-size:17px}
.dommerkort .status{font-size:12.5px; color:var(--muted)}
.fremdrift{height:8px; border-radius:99px; background:var(--panel2); margin:10px 0 8px; overflow:hidden}
.fremdrift i{display:block; height:100%; border-radius:99px; width:0%; transition:width .3s}
.talltekst{display:flex; justify-content:space-between; font-size:13px; color:var(--ink2); margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.tapp{width:100%; border:none; border-radius:13px; padding:17px 10px; font-size:19px; font-weight:800;
  color:#fff; letter-spacing:.02em; touch-action:manipulation}
.tapp:active{transform:scale(.985)}
.tapp.svom{background:var(--svom)} .tapp.lop{background:var(--lop)} .tapp.sykkel{background:var(--sykkel)}
.tapp.ferdig{background:var(--ok); cursor:default}
.tapp:disabled{opacity:.95}

/* Bannere */
.banner{border-radius:11px; padding:11px 15px; font-size:14px; font-weight:600; margin-bottom:12px;
  display:flex; gap:10px; align-items:flex-start}
.banner.info{background:var(--svom-bg); color:var(--svom)}
.banner.advarsel{background:var(--sykkel-bg); color:var(--advarsel)}
.banner.kritisk{background:var(--lop-bg); color:var(--kritisk)}
.banner .lukk{margin-left:auto; background:none; border:none; color:inherit; font-weight:800; font-size:16px; padding:0 2px}

/* Veiviser */
.veiviser-bak{position:fixed; inset:0; background:rgba(8,16,20,.55); z-index:60}
.veiviser-kort{position:fixed; z-index:61; background:var(--panel); color:var(--ink); border-radius:14px;
  padding:16px 18px 14px; max-width:340px; width:calc(100vw - 32px); box-shadow:0 12px 40px rgba(0,0,0,.35);
  left:50%; transform:translateX(-50%); bottom:18px}
.veiviser-kort .steg-nr{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--svom);
  font-weight:800; margin-bottom:4px}
.veiviser-kort h4{margin:0 0 6px; font-size:16.5px}
.veiviser-kort p{margin:0 0 12px; font-size:14px; color:var(--ink2)}
.veiviser-kort .knapper{display:flex; gap:8px; align-items:center}
.veiviser-mal{position:relative; z-index:62 !important; box-shadow:0 0 0 3px var(--svom), 0 0 0 7px rgba(14,134,168,.3) !important;
  border-radius:12px}

/* Store knapper-modus */
body.store-knapper{font-size:18px}
body.store-knapper .tapp{padding:26px 10px; font-size:24px}
body.store-knapper .primar{padding:16px 20px; font-size:18px}
body.store-knapper .sekundar,body.store-knapper .fane,body.store-knapper .toppknapp{padding:13px 18px; font-size:16px}
body.store-knapper input,body.store-knapper select{padding:15px 15px; font-size:18px}
body.store-knapper .dommerkort .navn{font-size:21px}
body.store-knapper .liste td{padding:12px 12px; font-size:15px}

/* Live-tavle (mørk arena uansett tema) */
.tavleflate{background:var(--skjerm-bg); color:var(--skjerm-ink); border-radius:12px;
  border:1px solid var(--skjerm-linje); overflow:hidden}
table.tavle{border-collapse:collapse; width:100%; font-size:clamp(12px,1.9vw,17px)}
.tavle th{text-align:left; font-size:.72em; letter-spacing:.11em; text-transform:uppercase;
  color:var(--skjerm-muted); padding:9px 13px; border-bottom:1px solid var(--skjerm-linje);
  font-weight:600; white-space:nowrap}
.tavle td{padding:8px 13px; border-bottom:1px solid var(--skjerm-linje); white-space:nowrap;
  color:var(--skjerm-ink)}
.tavle tr:last-child td{border-bottom:none}
.tavle .pos{font-family:Anton,"Arial Narrow",Impact,sans-serif; font-size:1.15em; color:var(--skjerm-muted); width:38px}
.tavle tr.leder .pos{color:var(--skjerm-sykkel)}
.tavle .navn{font-weight:700}
.tavle .kl-liten{font-size:.76em; color:var(--skjerm-muted); font-weight:500}
.tavle td.tall{font-family:"IBM Plex Mono",Consolas,monospace; font-variant-numeric:tabular-nums}
.tavle tr{transition:transform .5s}
@media (prefers-reduced-motion: reduce){ .tavle tr{transition:none} .fremdrift i{transition:none} }
.stolpe{height:6px; background:var(--skjerm-linje); border-radius:99px; overflow:hidden; min-width:64px}
.stolpe i{display:block; height:100%; border-radius:99px}
.sone{display:inline-block; min-width:50px; text-align:center; border-radius:5px; padding:1px 7px;
  font-weight:600; color:#fff; font-family:"IBM Plex Mono",Consolas,monospace; font-size:.88em}

/* v2: hovedtavla (dommer og utøver) – de viktigste tallene stort, mørk som arenaskjermen */
.ht{background:var(--skjerm-bg); color:var(--skjerm-ink); border-radius:14px; padding:12px 14px 12px; margin-bottom:10px}
.ht.ferdig{box-shadow:inset 0 0 0 2px var(--ok)}
.ht-topp{display:flex; justify-content:space-between; gap:8px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--skjerm-muted); font-weight:700}
.ht.sykkel .ht-gren{color:var(--skjerm-sykkel)} .ht.lop .ht-gren{color:var(--skjerm-lop)} .ht.svom .ht-gren{color:var(--skjerm-svom)}
.ht.ferdig .ht-status{color:#7BC98B}
.ht-klokke{font-family:Anton,"Arial Narrow",Impact,sans-serif; font-size:clamp(52px,17vw,84px); line-height:1; text-align:center;
  margin:4px 0 2px; letter-spacing:.02em}
.ht.ferdig .ht-klokke{color:#7BC98B}
.ht-rad{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px}
.ht-rad.tre{grid-template-columns:1fr 1fr 1fr}
.ht-celle{background:rgba(255,255,255,.05); border-radius:9px; padding:6px 8px; text-align:center; min-width:0}
.ht-celle b{display:block; font-size:clamp(17px,5.4vw,24px); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ht-celle.stor b{font-size:clamp(24px,8vw,34px)}
.ht-celle small{display:block; font-size:11px; color:var(--skjerm-muted); line-height:1.25}
.ht-stolpe{background:rgba(255,255,255,.12); margin:8px 0 4px; height:10px}
.ht.sykkel .ht-stolpe i{background:var(--skjerm-sykkel)} .ht.lop .ht-stolpe i{background:var(--skjerm-lop)} .ht.svom .ht-stolpe i{background:var(--skjerm-svom)}
.ht-plass{display:flex; flex-wrap:wrap; gap:4px 14px; justify-content:space-between; font-size:13.5px; margin-top:8px;
  color:var(--skjerm-muted)}
.ht-plass b{color:var(--skjerm-ink); font-size:16px}
.mt-tabell tr.beste td{background:var(--svom-bg)}
.lagret{display:flex; align-items:center; gap:8px; border-radius:11px; padding:10px 13px; font-weight:700; font-size:14.5px; margin:8px 0}
.lagret.ok{background:#E3F2E1; color:#2D5A2A}
.lagret.vent{background:#FFF1D6; color:#7A4A00}
@media (prefers-color-scheme: dark){ .lagret.ok{background:#1B3320; color:#9ED39A} .lagret.vent{background:#33260F; color:#F0C277} }
.godkjenn{background:#FFF7E8; border:2px solid #E3B055; border-radius:14px; padding:12px 14px; margin:8px 0}
.godkjenn .tittel{font-weight:800; color:#7A4A00}
@media (prefers-color-scheme: dark){ .godkjenn{background:#2B210F; border-color:#8A6420} .godkjenn .tittel{color:#F0C277} }

.skjult{display:none !important}
.fotnote{margin-top:22px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--linje); padding-top:12px}

/* Stoppeklokke i dommerpanelet */
.stoppeklokke { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; padding:8px 10px;
  border:1px solid var(--linje); border-radius:10px; }
.stoppeklokke .sk-tittel { font-size:13px; opacity:.7; }
.stoppeklokke .sk-tid { font-size:26px; font-weight:700; flex:1; min-width:110px; }
.stoppeklokke.gaar .sk-tid { color:#1a8a3a; }

/* Øvelse som ikke er med i stevnet (distanse 0): strek over */
s.hoppet-gren, .fane.hoppet { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .55; }
.fane.hoppet { cursor: default; }

/* «Er du sikker?»-dialogen: mørkt kort i TriPuls-stil (ikke nettleserens hvite boks) */
.tp-dialog-bak{position:fixed; inset:0; z-index:1000; background:rgba(8,14,18,.58); -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; animation:tpInn .14s ease-out}
.tp-dialog{background:var(--skjerm-bg); color:var(--skjerm-ink); border:1px solid var(--skjerm-linje); border-top:5px solid var(--svom);
  border-radius:16px; padding:20px 20px 16px; width:100%; max-width:430px; box-shadow:0 22px 60px rgba(0,0,0,.5);
  animation:tpOpp .16s ease-out}
.tp-dialog.fare{border-top-color:var(--kritisk)}
.tp-dialog h3{font-family:Anton,"Arial Narrow",Impact,sans-serif; font-weight:400; font-size:25px; letter-spacing:.015em; margin:0 0 8px}
.tp-dialog p{margin:0 0 16px; color:var(--skjerm-muted); white-space:pre-line; font-size:15.5px; line-height:1.5}
.tp-dialog input{background:#0A1418; color:var(--skjerm-ink); border:1px solid var(--skjerm-linje); font-size:22px; margin:0 0 16px}
.tp-dialog-knapper{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tp-dialog-knapper button{border-radius:11px; padding:14px 10px; font-weight:700; font-size:16px; border:1px solid transparent}
.tp-dialog .nei{background:transparent; color:var(--skjerm-ink); border-color:var(--skjerm-linje)}
.tp-dialog .ja{background:var(--skjerm-svom); color:#06222B}
.tp-dialog.fare .ja{background:var(--kritisk); color:#fff}
@keyframes tpInn{from{opacity:0}to{opacity:1}}
@keyframes tpOpp{from{transform:translateY(10px) scale(.98)}to{transform:none}}

/* Knapper som viser tilstand */
button.jobber{opacity:.75; cursor:progress}
button.lyktes{background:var(--ok) !important; border-color:var(--ok) !important; color:#fff !important}
button.feilet{background:var(--kritisk) !important; border-color:var(--kritisk) !important; color:#fff !important}
.bryter{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--linje2); background:var(--panel); color:var(--ink2);
  border-radius:99px; padding:7px 14px 7px 8px; font-weight:600; font-size:14px; text-align:left}
.bryter::before{content:""; flex:none; width:34px; height:20px; border-radius:99px; background-color:var(--linje2);
  background-image:radial-gradient(circle at 10px 10px, #fff 7px, transparent 7.5px); transition:background .15s}
.bryter.pa{border-color:var(--ok); color:var(--ink); background:color-mix(in srgb, var(--ok) 13%, var(--panel))}
.bryter.pa::before{background-color:var(--ok); background-image:radial-gradient(circle at 24px 10px, #fff 7px, transparent 7.5px)}
button.laast-pa{background:var(--advarsel) !important; border-color:var(--advarsel) !important; color:#fff !important}
button.lyktes:disabled, button.feilet:disabled{opacity:1}