/* NATT — produktens utseende (Filips val 4/10: riktning A).
   OLED-svart grund, kort som knappt syns mot den, EN lysande grön accent
   för det man gör och det som mäts. Blått för vatten och REM, rött bara
   för varning. Inget gult eller orange någonsin (husets järnregel).
   Talen i Smide-snittet (signatur.css). Laddas efter stil.css och
   signatur.css och gäller bara med data-palett="natt" på <html>. */
html[data-palett="natt"]{
  --grund:#000000; --panel:#0d1012; --panel2:#151a1c; --lina:#1d2427;
  --text:#f2f4f3; --dov:#8b9692;
  --lyft:#1fbf78; --lyft-rgb:31,191,120; --lyftbg:#0e2a1d; --stal:#5fd99f;
  --ok:#2fd18a; --okbg:#0e2a1d; --okram:#1d4d36;
  --framsteg:#1fbf78; --framsteg-rgb:31,191,120;
  --bla:#4f8fff; --blabg:#0f1a2e;
  --fail:#ff5a6a; --failbg:#2a0f13;
  --pa-lyft:#03130b;           /* text på accentytor */
  --jarn:#2b3530;              /* smidessignaturens "gjort"-yta i mörkt */
  --glod:0 0 24px rgba(31,191,120,.35);
  color-scheme:dark;
}
html[data-palett="natt"],html[data-palett="natt"] body{background:var(--grund);color:var(--text)}

/* Text på accent: mörk, inte vit (grönt + vitt läser dåligt). */
html[data-palett="natt"] .stor-knapp:not(.lugn):not(.fara),
html[data-palett="natt"] .snabb .prim i,
html[data-palett="natt"] .badge.tagen .badge-ikon{color:var(--pa-lyft)}
html[data-palett="natt"] .stor-knapp.lugn{background:var(--panel2);color:var(--text)}
html[data-palett="natt"] .w-rad.pa i::after{border-color:var(--pa-lyft)}

/* Kort: ingen skugga, en hårfin kant mot det svarta. */
html[data-palett="natt"] .kort,
html[data-palett="natt"] .ovning,
html[data-palett="natt"] section.hjalte,
html[data-palett="natt"] .band-kort{border:1px solid var(--lina);box-shadow:none}

/* Övningsbilderna är svarta streck på vitt: inverterade blir de ljusa
   streck på mörkt och smälter in i kortet. */
html[data-palett="natt"] .tumnagel,
html[data-palett="natt"] .fokus-bild,
html[data-palett="natt"] .rutin-rad img{filter:invert(.92) hue-rotate(180deg);background:#fff}

/* Smidessignaturens sexkanter i mörkt. */
html[data-palett="natt"][data-signatur="smide"] .setknapp.klar,
html[data-palett="natt"][data-signatur="smide"] .setknapp.klar::before,
html[data-palett="natt"][data-signatur="smide"] .fokus-set .setknapp.klar{background:var(--lyft);color:var(--pa-lyft)}

/* Fält och ark. */
html[data-palett="natt"] input,
html[data-palett="natt"] textarea,
html[data-palett="natt"] select{background:var(--panel2);color:var(--text);border-color:var(--lina)}
html[data-palett="natt"] .ark{background:var(--panel);color:var(--text);border-top:1px solid var(--lina)}

/* ==================== NYA HEM: bandet + JÄRN ==================== */
.nh{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.nh-ring{display:flex;flex-direction:column;align-items:center;padding:6px 0 4px}
.nh-ring svg{display:block;overflow:visible}
.nh-ring .ring-spar{stroke:var(--panel2)}
.nh-ring .ring-bage{stroke:var(--lyft);filter:drop-shadow(var(--glod))}
.nh-ring.lage-lugnare .ring-bage{stroke:var(--bla);filter:drop-shadow(0 0 22px rgba(79,143,255,.35))}
.nh-ring.lage-vila .ring-bage{stroke:var(--fail);filter:drop-shadow(0 0 22px rgba(255,90,106,.35))}
.nh-tal{font:800 66px/1 var(--mono);letter-spacing:0;fill:var(--text)}
.nh-etik{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;fill:var(--dov)}
.nh-dom{font:800 22px/1.15 var(--sans);margin-top:10px;text-align:center}
.nh-under{font-size:13px;color:var(--dov);margin-top:4px;text-align:center;line-height:1.4}
.nh-kort{background:var(--panel);border:1px solid var(--lina);border-radius:20px;padding:14px 16px}
.nh-etikett{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dov)}
.nh-rad{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nh-stor{font:800 26px/1.05 var(--mono);margin-top:5px}
.nh-liten{font-size:12px;color:var(--dov);margin-top:3px}
.nh-knapp{background:var(--lyft);color:var(--pa-lyft,#fff);font-weight:800;font-size:14px;padding:11px 18px;border-radius:999px;border:0;flex:none}
.nh-faser{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:10px 0 8px;gap:2px}
.nh-faser i{display:block;height:100%}
.nh-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--dov)}
.nh-legend span{display:flex;align-items:center;gap:5px}
.nh-legend em{width:8px;height:8px;border-radius:2px;display:inline-block}
.nh-tre{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nh-tre .nh-kort{padding:12px}
.nh-tre b{display:block;font:800 24px/1 var(--mono);margin-top:7px;font-variant-numeric:tabular-nums}
.nh-tre span{font-size:11px;color:var(--dov)}
.nh-kurva{margin-top:10px}
.nh-insikt{background:linear-gradient(135deg,rgba(31,191,120,.16),rgba(31,191,120,.03));border-color:rgba(31,191,120,.3)}
.nh-insikt .nh-etikett{color:var(--stal)}
.nh-insikt p{font-size:14px;line-height:1.45;margin-top:7px}
.nh-insikt p+p{margin-top:6px;padding-top:6px;border-top:1px solid rgba(31,191,120,.15)}
.nh-tom{font-size:13px;color:var(--dov);margin-top:6px;line-height:1.4}

/* Fliklisten: svart glas mot det svarta. */
html[data-palett="natt"] .flikar{background:rgba(8,10,11,.88);-webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);border-top:1px solid var(--lina);color:var(--dov)}

/* ==================== Grafer och rörelse ==================== */
@keyframes ring-in{from{stroke-dashoffset:var(--O)}to{stroke-dashoffset:var(--fyllt)}}
.nh-ring .ring-bage{stroke-dashoffset:var(--fyllt);animation:ring-in 1.1s cubic-bezier(.2,.8,.2,1) both}
.nh-ring[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.nh-ring[role="button"]:active svg{transform:scale(.97)}
.nh-ring svg{transition:transform .15s}
@keyframes rita{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes tona{from{opacity:0}to{opacity:1}}
.graf-linje{animation:rita 1.2s .1s cubic-bezier(.3,.7,.2,1) both;filter:drop-shadow(0 0 6px rgba(31,191,120,.45))}
.graf-yta{animation:tona .9s .4s both}
.graf{position:relative;margin-top:8px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.graf-svg{display:block;width:100%;height:auto;overflow:visible}
.graf-axel{font:600 9px/1 var(--sans);fill:var(--dov);text-transform:uppercase}
.graf-tips{position:absolute;top:-6px;transform:translate(-50%,-100%);background:#1b2124;color:var(--text);
  font:600 12px/1.2 var(--sans);padding:6px 9px;border-radius:9px;white-space:nowrap;pointer-events:none;
  border:1px solid var(--lina);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.graf-tid{display:flex;justify-content:space-between;font-size:10px;color:var(--dov);margin-top:2px;padding:0 6px}
.nh-forklaring{font-size:12px;color:var(--dov);margin-top:8px;line-height:1.4}
.nh-avsnitt{font:800 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dov);margin:14px 2px 2px}
.laddark h2{font:800 28px/1.1 var(--mono)}
.ld-rad{margin-top:14px}
.ld-rad b{font-size:15px}
.ld-rad .nh-rad span{font:800 18px/1 var(--mono)}
.ld-spar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;margin:7px 0 5px}
.ld-spar i{display:block;height:100%;background:var(--lyft);border-radius:4px;box-shadow:var(--glod)}
@media (prefers-reduced-motion:reduce){.nh-ring .ring-bage,.graf-linje,.graf-yta{animation:none}}

/* Löpningen: live-panel, karta, kilometertider */
.lop-live{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0 6px}
.lop-live div{background:var(--panel2);border-radius:14px;padding:12px}
.lop-live b{display:block;font:800 34px/1 var(--mono);font-variant-numeric:tabular-nums}
.lop-live span{font-size:11px;color:var(--dov);letter-spacing:.06em;text-transform:uppercase}
.lop-fel{grid-column:1/-1;font-size:12px;color:var(--fail);margin:0}
.lop-karta{height:200px;border-radius:16px;overflow:hidden;margin:10px 0 8px;border:1px solid var(--lina);background:#0b0e10}
.lop-splits{display:grid;gap:4px;margin-top:6px}
.lop-splits div{display:grid;grid-template-columns:56px 1fr auto;align-items:center;font-size:13px;padding:6px 2px;border-bottom:1px solid var(--lina)}
.lop-splits b{font:800 16px/1 var(--mono)}
.lop-splits span{color:var(--dov)}
.kond-kort .lank{display:block;margin:10px auto 0}
.maplibregl-ctrl-attrib{font-size:9px!important;background:rgba(0,0,0,.5)!important;color:#888!important}
.maplibregl-ctrl-attrib a{color:#aaa!important}
.fri-val{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.fri-chip{padding:10px 14px;border-radius:999px;background:var(--panel2);border:1px solid var(--lina);color:var(--text);font-weight:700;font-size:14px}
.fri-chip:active{background:var(--lyftbg);border-color:var(--lyft)}
.fri-egen{display:flex;gap:8px;align-items:center}
.fri-egen input{flex:1}
.nh-annat{display:block;margin:10px 0 0;padding:0}