/* KOL — produktens identitet (Filips val 4/10: Is-upplägget i Kols färger).
   Svart och vitt. Accenten är vit; det enda med färg är pulsen (röd),
   för den lever. Siffror i Sora, text i Inter. Inga sexkanter, inget
   JÄRN-snitt. Laddas sist och gäller med data-palett="kol" på <html>. */
html[data-palett="kol"]{
  --grund:#0b0b0c; --panel:#141416; --panel2:#1d1d20; --lina:#26262a;
  --text:#f4f4f4; --dov:#8a8a90;
  --lyft:#f4f4f4; --lyft-rgb:244,244,244; --lyftbg:#1f1f22; --stal:#d6d6da;
  --ok:#f4f4f4; --okbg:#1f1f22; --okram:#3a3a3f;
  --framsteg:#f4f4f4; --framsteg-rgb:244,244,244;
  --bla:#9fb4cc; --blabg:#171b21;
  --fail:#ff2d55; --failbg:#2a0d14;
  --puls:#ff2d55;
  --pa-lyft:#0b0b0c;
  --jarn:#2a2a2e;
  --glod:0 0 22px rgba(255,255,255,.28);
  --mono:Sora,Inter,system-ui,sans-serif;
  --sans:Inter,-apple-system,system-ui,sans-serif;
  --r-kort:22px; --r-inre:14px;
  color-scheme:dark;
}
html[data-palett="kol"],html[data-palett="kol"] body{background:var(--grund);color:var(--text);font-family:var(--sans)}

/* Kort: mjuk gradient och hårfin kant, som i skissen. */
html[data-palett="kol"] .kort,html[data-palett="kol"] .ovning,html[data-palett="kol"] section.hjalte,
html[data-palett="kol"] .nh-kort,html[data-palett="kol"] .band-kort{background:linear-gradient(180deg,#151517,#111113);border:1px solid var(--lina);box-shadow:none}

/* Text på vita ytor är svart. */
html[data-palett="kol"] .stor-knapp:not(.lugn):not(.fara),
html[data-palett="kol"] .nh-knapp,
html[data-palett="kol"] .snabb .prim i,
html[data-palett="kol"] .badge.tagen .badge-ikon{color:var(--pa-lyft)}
html[data-palett="kol"] .stor-knapp.lugn{background:var(--panel2);color:var(--text)}
html[data-palett="kol"] .w-rad.pa i::after{border-color:var(--pa-lyft)}

/* Inga sexkanter: runda setknappar och snabbknappar. */
html[data-palett="kol"] .setknapp,html[data-palett="kol"] .snabb i{clip-path:none!important;border-radius:50%!important;
  background:var(--panel2)!important;border:1px solid #2e2e33!important;font-family:var(--mono)}
html[data-palett="kol"] .setknapp::before,html[data-palett="kol"] .snabb i::before{display:none!important}
html[data-palett="kol"] .setknapp.klar{background:var(--lyft)!important;color:var(--pa-lyft)!important;border-color:var(--lyft)!important}
html[data-palett="kol"] .snabb .prim i{background:var(--lyft)!important;border-color:var(--lyft)!important}
html[data-palett="kol"] .stor-knapp{clip-path:none!important;border-radius:999px!important}

/* Siffrorna i Sora. */
html[data-palett="kol"] .hjalte-tal b,html[data-palett="kol"] .nh-stor,html[data-palett="kol"] .nh-tre b,
html[data-palett="kol"] .lop-live b,html[data-palett="kol"] .lp-tal,html[data-palett="kol"] .vila b,
html[data-palett="kol"] .fokus-vila b,html[data-palett="kol"] .kort-tal,html[data-palett="kol"] .vecka-tal b{font-family:var(--mono);letter-spacing:-.02em}

/* Övningsbilderna: ljusa streck på mörkt. */
html[data-palett="kol"] .tumnagel,html[data-palett="kol"] .fokus-bild,html[data-palett="kol"] .rutin-rad img{filter:invert(.92);background:#fff}

/* Fält, ark, fliklist. */
html[data-palett="kol"] input,html[data-palett="kol"] textarea,html[data-palett="kol"] select{background:var(--panel2);color:var(--text);border-color:var(--lina)}
html[data-palett="kol"] .ark{background:#121214;color:var(--text);border-top:1px solid var(--lina)}
html[data-palett="kol"] .flikar{background:rgba(11,11,12,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--lina);color:var(--dov)}

/* Ringen: vit glöd när du är redo, grå när det ska gå lugnare, röd vid vila. */
html[data-palett="kol"] .nh-ring .ring-spar{stroke:#1d1d20}
html[data-palett="kol"] .nh-ring .ring-bage{stroke:url(#kol-ring);filter:drop-shadow(0 0 14px rgba(255,255,255,.35))}
html[data-palett="kol"] .nh-ring.lage-lugnare .ring-bage{stroke:#9a9aa0;filter:none}
html[data-palett="kol"] .nh-ring.lage-vila .ring-bage{stroke:var(--puls);filter:drop-shadow(0 0 14px rgba(255,45,85,.4))}
html[data-palett="kol"] .nh-tal{font:800 64px/1 var(--mono);letter-spacing:-.03em}
html[data-palett="kol"] .nh-dom{font:700 21px/1.15 var(--mono)}

/* Graferna i vitt; pulsen i rött. */
html[data-palett="kol"] .graf-linje{filter:drop-shadow(0 0 5px rgba(255,255,255,.35))}
html[data-palett="kol"] .graf-puls .graf-linje{stroke:var(--puls);filter:drop-shadow(0 0 5px rgba(255,45,85,.45))}
html[data-palett="kol"] .graf-tips{background:#1d1d20;border-color:#2e2e33}
html[data-palett="kol"] .ld-spar i{background:var(--lyft)}

/* Insikten: neutral, inte varningsröd. */
html[data-palett="kol"] .nh-insikt{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:#2e2e33}
html[data-palett="kol"] .nh-insikt .nh-etikett{color:var(--text)}
html[data-palett="kol"] .nh-insikt p+p{border-top-color:#26262a}

/* Livepulsen: zonen i vitt, över zonen rött. */
html[data-palett="kol"] .livepuls.i-zon{border-left-color:var(--lyft)}
html[data-palett="kol"] .livepuls .lp-tal{color:var(--text)}
html[data-palett="kol"] .livepuls.over-zon{border-left-color:var(--puls)}
html[data-palett="kol"] .livepuls.over-zon .lp-status{color:var(--puls)}

/* Löpningen. */
html[data-palett="kol"] .lop-live div{background:var(--panel2)}

/* Inloggning och onboarding utan JÄRN-märket. */
html[data-palett="kol"] .las h1,html[data-palett="kol"] .las .signatur-rad{display:none}
html[data-palett="kol"] .ob-prickar i.pa{background:var(--lyft)}
html[data-palett="kol"] .ob-alt.vald{border-color:var(--lyft);box-shadow:inset 0 0 0 1px var(--lyft)}
html[data-palett="kol"] .ob-inre h1,html[data-palett="kol"] .konto-rubrik{font-family:var(--mono)}
html[data-palett="kol"] .fri-chip:active{background:#26262a;border-color:var(--lyft)}
/* Sömnfaserna i gråskala; vaken i rött. */
html[data-palett="kol"]{--fas-djup:#f4f4f4;--fas-latt:#8a8a90;--fas-rem:#4a4a50;--fas-vaken:#ff2d55}

/* ==================== Hem 2: en blick ==================== */
.hem2{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}
.h2-topp h2{font:700 24px/1.15 var(--mono);letter-spacing:-.02em;margin:2px 2px 2px}
.h2-last{font-size:12px;color:var(--dov);margin:4px 2px 0}
/* Status: ringen + nattens tre tal + en rad om dagen */
.hs{display:grid;grid-template-columns:140px 1fr;grid-template-areas:"ring hoger" "dom dom";gap:6px 16px;align-items:center;
  background:linear-gradient(180deg,#151517,#111113);border:1px solid var(--lina);border-radius:24px;padding:14px 16px 14px 10px}
.hs-ring{grid-area:ring;padding:0}
.hs-tal{font:800 46px/1 var(--mono);letter-spacing:-.03em;fill:var(--text)}
.hs-etik{font:600 9px/1 var(--sans);letter-spacing:.2em;fill:var(--dov)}
.hs-hoger{grid-area:hoger;display:flex;flex-direction:column;gap:9px}
.hs-rad{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px}
.hs-rad span{font-size:12px;color:var(--dov)}
.hs-rad b{font:700 19px/1 var(--mono);text-align:right}
.hs-rad small{grid-column:1/-1;text-align:right;font-size:11px;color:var(--dov);margin-top:2px}
.hs-faser{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px;margin-top:-3px;cursor:pointer}
.hs-faser i{display:block;height:100%}
.hs-dom{grid-area:dom;padding:6px 6px 0;border-top:1px solid var(--lina);margin-top:4px}
.hs-dom b{display:block;font:700 18px/1.2 var(--mono);margin-top:8px}
.hs-dom span{display:block;font-size:13px;color:var(--dov);margin-top:3px;line-height:1.35}
.hs.lage-vila .hs-dom b{color:var(--puls)}
/* Snabbknapparna i en rad */
.h2-snabb{margin:2px 0}
/* Rutorna */
.h2-bento{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bento{display:flex;flex-direction:column;min-height:150px}
.bento.tryck{cursor:pointer}
.bento-tal{font:800 32px/1 var(--mono);letter-spacing:-.03em;margin-top:auto}
.bento-enh{font-size:12px;color:var(--dov);margin-top:3px}
.bento-bar{height:5px;border-radius:3px;background:var(--panel2);overflow:hidden;margin-top:10px}
.bento-bar i{display:block;height:100%;background:var(--lyft);border-radius:3px}
.bento-under{font-size:11px;color:var(--dov);margin-top:5px}
/* Trender som flikar */
.tf-flikar{display:flex;gap:4px;background:var(--panel2);border-radius:12px;padding:3px;margin-bottom:6px}
.tf-flik{flex:1;padding:8px 0;border-radius:9px;font:600 13px/1 var(--sans);color:var(--dov)}
.tf-flik.vald{background:#2c2c30;color:var(--text)}
.tf-mening{font-size:14px;line-height:1.4;margin-top:10px}
/* Grafernas text */
.graf-varde{font:700 11px/1 var(--mono);fill:var(--text)}
.graf-axel{font:600 9px/1 var(--sans);fill:var(--dov)}
/* Sömnarket */
.somn-lista{display:grid;gap:6px;margin-top:12px}
.somn-lista div{display:grid;grid-template-columns:14px 1fr auto 44px;align-items:center;gap:8px;font-size:14px}
.somn-lista em{width:10px;height:10px;border-radius:3px;display:block}
.somn-lista b{font:700 15px/1 var(--mono)}
.somn-lista small{color:var(--dov);text-align:right}
/* Vattenkortet i samma stil som rutorna */
html[data-palett="kol"] .vattenkort .glasrad svg.full path{fill:var(--bla)}
html[data-palett="kol"] .vatten-knappar button{background:var(--panel2);color:var(--text);border:1px solid var(--lina)}

/* ==================== Hem 3: Natten · Idag · Utveckling ==================== */
.h3-rubrik{display:flex;align-items:center;gap:8px;margin:14px 4px 2px;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dov)}
.h3-rubrik::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--puls)}
.h3-snabb{margin:6px 0 0}
/* Listraderna i Revolut-anda: ikon, namn/undertext, värde till höger */
.dm{padding:4px 14px}
.dm-rad{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--lina)}
.dm-rad:last-child{border-bottom:0}
.dm-rad.tryck{cursor:pointer}
.dm-rad.tryck:active{opacity:.7}
.dm-ikon{width:40px;height:40px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center}
.dm-ikon svg{width:20px;height:20px;fill:var(--text)}
.dm-text b{display:block;font:600 15px/1.2 var(--sans)}
.dm-text small{display:block;font-size:12px;color:var(--dov);margin-top:2px}
.dm-spar{height:4px;border-radius:2px;background:var(--panel2);overflow:hidden;margin-top:7px}
.dm-spar i{display:block;height:100%;background:var(--lyft);border-radius:2px}
.dm-hoger{text-align:right}
.dm-hoger b{display:block;font:700 18px/1 var(--mono);letter-spacing:-.02em}
.dm-hoger small{display:block;font-size:11px;color:var(--dov);margin-top:3px}
.dm-pil{font:700 13px/1 var(--sans);color:var(--text);background:var(--panel2);padding:8px 12px;border-radius:999px;display:inline-block}
.h3-annat{display:block;margin:4px auto 0;font-size:13px;color:var(--dov)}
/* Det röda, som i Kol-skissen: insikten, kurvornas punkter, indikatorn */
html[data-palett="kol"] .nh-insikt{background:linear-gradient(180deg,#151517,#111113);border:1px solid var(--lina);border-left:3px solid var(--puls)}
html[data-palett="kol"] .nh-insikt .nh-etikett{color:var(--puls)}
html[data-palett="kol"] .h3-snabb .prim i{box-shadow:0 0 0 3px rgba(255,45,85,.0)}

/* Visuella glapp (Filip 4/10): en rubrik, allt i linje, en hjälte, jämna rader. */
/* DATUMRADEN FÅR INTE ÄNDRA VYNS HÖJD. Den låg i #app-kolumnen: när den
   göms på Hem växte vyerna 44 px, och eftersom klassen byts först när
   svepet landat kom hoppet EFTER bytet — det såg ut som att något laddades
   in och rycktes bort igen. Nu ligger raden som ett lager ovanpå, och de
   vyer som behöver den reserverar sin plats själva. Vyhöjden är därmed
   densamma på alla flikar och ingenting flyttar sig vid svep. */
html[data-palett="kol"] #app{position:relative}
/* Ingen svart kant mot klockan och batteriet: raden har ingen egen färg
   utan suddar det som ligger bakom, och tonas ut nedåt med en mask så den
   inte får någon kant alls. På Hem syns den inte, och där flyter sidan
   redan ihop med statusraden — samma känsla ska gälla överallt. */
html[data-palett="kol"] .topp{position:absolute;top:0;left:0;right:0;z-index:12;
  background:transparent;pointer-events:none;isolation:isolate;
  opacity:1;transition:opacity .12s ease}
/* Suddet och uttoningen ligger i ett eget lager BAKOM texten. Låg masken
   på hela raden tonades datumet bort med den: på telefonen är raden hög
   (statusradens safe-area ovanför), så texten hamnade mitt i uttoningen
   och såg ut att ligga under en skugga. */
html[data-palett="kol"] .topp::before{content:"";position:absolute;inset:0;z-index:-1;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);
  mask-image:linear-gradient(180deg,#000 72%,transparent)}
html[data-palett="kol"] .topp #topp-datum{pointer-events:auto;position:relative;z-index:1;color:var(--text)}
html[data-palett="kol"] body.hem-aktiv .topp{opacity:0;visibility:hidden}
html[data-palett="kol"] #vy-passet,html[data-palett="kol"] #vy-tallriken,
html[data-palett="kol"] #vy-rutinen,html[data-palett="kol"] #vy-historik{
  padding-top:calc(48px + env(safe-area-inset-top))}
.h2-topp{padding:0 2px}
.h2-datum{display:block;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dov);margin:4px 0 6px}
.h3-rubrik{margin:16px 0 4px}
.dm-rad{grid-template-columns:40px 1fr auto 14px;row-gap:9px}
.dm-spar{grid-column:2/5;margin-top:0}
.dm-chev{font:400 22px/1 var(--sans);color:var(--dov);text-align:right}
.dm-gora{font:700 15px/1 var(--sans)!important;letter-spacing:0!important}
.hs{padding:16px}
/* Toppmarginalen får ALDRIG hänga på hem-aktiv. Klassen slås av mitt i
   svepet, och då tappade Hem sin padding i samma ögonblick: hälsningen och
   datumet såg ut att försvinna och allt hoppade upp i kanten på skärmen
   medan man drog. Hem reserverar sin plats hela tiden. */
html[data-palett="kol"] .hem2{padding-top:calc(10px + env(safe-area-inset-top))}

/* ==================== Djup och rött som ramar in (Filip 4/10) ==================== */
/* Rummet: en svag röd glöd uppifrån, så skärmen har ljus och riktning. */
html[data-palett="kol"] body{background:
  radial-gradient(120% 38% at 85% -6%, rgba(255,45,85,.16), transparent 60%),
  radial-gradient(90% 30% at 0% 0%, rgba(255,255,255,.04), transparent 60%),
  var(--grund);background-attachment:fixed}
html[data-palett="kol"] .vyer,html[data-palett="kol"] .vy{background:transparent}
/* Korten: gradient, ljus överkant, mjuk skugga under. */
html[data-palett="kol"] .nh-kort,html[data-palett="kol"] .hs,html[data-palett="kol"] .kort,html[data-palett="kol"] .ovning{
  background:linear-gradient(180deg,#19191c 0%,#121214 55%,#0f0f11 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 40px -28px rgba(0,0,0,.9)}
/* Statuskortet: röd gradientkant och röd glöd bakom ringen. */
html[data-palett="kol"] .hs{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(70% 90% at 22% 40%, rgba(255,45,85,.13), transparent 70%),
             linear-gradient(180deg,#1a1a1d 0%,#121214 60%,#0e0e10 100%)}
html[data-palett="kol"] .hs::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(135deg,rgba(255,45,85,.55),rgba(255,255,255,.06) 40%,rgba(255,255,255,.03) 70%,rgba(255,45,85,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Förloppen: från vitt till rött. */
html[data-palett="kol"] .dm-spar i,html[data-palett="kol"] .bento-bar i{background:linear-gradient(90deg,#f4f4f4 0%,#ffd1da 55%,var(--puls) 100%)}
html[data-palett="kol"] .dm-spar,html[data-palett="kol"] .bento-bar{background:rgba(255,255,255,.06)}
/* Ikonerna och snabbknapparna: liten gradient och ljus överkant. */
html[data-palett="kol"] .dm-ikon{background:linear-gradient(180deg,#26262a,#18181b);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html[data-palett="kol"] .snabb i{background:linear-gradient(180deg,#232327,#151518)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 20px -12px rgba(0,0,0,.8)}
/* Trendflikarna: vald flik med samma ljusa överkant. */
html[data-palett="kol"] .tf-flik.vald{background:linear-gradient(180deg,#303035,#232327);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
/* Fliklisten: svart glas med röd hårlinje upptill på vald flik. */
html[data-palett="kol"] .flikar button.vald{color:var(--text);position:relative}
html[data-palett="kol"] .flikar button.vald::before{content:"";position:absolute;top:-6px;left:30%;right:30%;height:2px;border-radius:2px;background:var(--puls);box-shadow:0 0 10px rgba(255,45,85,.7)}
.konto-info{font-size:14px;color:var(--dov);line-height:1.45;margin:10px 0 4px}

/* ==================== Pass och Mat i samma grammatik som Hem ==================== */
/* Passhjälten */
.ph{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:16px 18px;
  background:radial-gradient(80% 90% at 85% 0%, rgba(255,45,85,.14), transparent 65%),linear-gradient(180deg,#1a1a1d,#121214 60%,#0e0e10);
  border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 40px -28px rgba(0,0,0,.9)}
.ph::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(135deg,rgba(255,45,85,.5),rgba(255,255,255,.06) 45%,rgba(255,45,85,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ph-rad{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ph-vanster{min-width:0}
.ph-namn{font:800 24px/1.1 var(--mono);letter-spacing:-.02em}
.ph-info{font-size:13px;color:var(--dov);margin-top:5px}
.ph-starta{flex-shrink:0;padding:12px 22px;border-radius:999px;border:0;
  background:#f4f4f4;color:#0b0b0c;font:800 15px/1 var(--sans);
  box-shadow:0 10px 24px -12px rgba(244,244,244,.35)}
.ph-starta:active{transform:scale(.96);opacity:.9}
.ph-val{display:flex;gap:14px;margin-top:12px}
.ph-chip{padding:7px 0;border:0;background:none;color:var(--dov);font:600 13px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.ph-chip:active{color:var(--text)}
html[data-palett="kol"] .anpassning{background:linear-gradient(180deg,#1a1a1d,#141416);border:1px solid var(--lina);border-left:3px solid var(--puls);border-radius:16px}
/* Övningskorten: numrerade, namnet tydligt */
.pass-lista{counter-reset:ovn;display:flex;flex-direction:column;gap:10px}
.pass-lista .ovning{counter-increment:ovn;margin:0}
.pass-lista .ovning .ovning-topp b::before{content:counter(ovn,decimal-leading-zero);display:block;font:700 10px/1 var(--mono);color:var(--puls);letter-spacing:.12em;margin-bottom:4px}
.pass-lista .ovning .ovning-topp b{font:700 17px/1.2 var(--sans)}
.pass-lista .ordination b{color:var(--text)}
html[data-palett="kol"] .vikt{background:rgba(255,255,255,.07)!important;color:var(--text)!important;border-radius:999px}
/* Mat-hjälten */
.mh-tal{font-size:34px!important}
.mh-av{font-size:12px;font-weight:600;color:var(--dov);font-family:var(--sans)}
.mh-spar{margin:-3px 0 2px}
.mh-dom{display:flex;justify-content:space-between;align-items:center}
.mh-dom span{margin:8px 0 0!important}
.mh-dom .lank{margin-top:8px;color:var(--text);font-weight:700}
.mh-snabb{margin:6px 0 0;justify-content:space-around}
/* Den loggade maten som listrader i ett kort */
html[data-palett="kol"] #matlista{background:none;border:0;padding:0}
html[data-palett="kol"] .mat-del h3{display:flex;justify-content:space-between;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dov);padding:14px 0 6px;margin:0}
html[data-palett="kol"] .mat-del h3 span{font-family:var(--mono);letter-spacing:0;color:var(--text)}
html[data-palett="kol"] .matrad{border-bottom:1px solid var(--lina);padding:11px 0}
html[data-palett="kol"] .matrad .kcal{font:700 16px/1 var(--mono)}
html[data-palett="kol"] #matlista .tomt{border:0;padding:22px 6px;color:var(--dov)}
.mh-snabb{display:grid!important;grid-template-columns:repeat(3,1fr);justify-items:center}
#vy-passet > .ledtext{margin:14px 4px 2px;font-size:13px;line-height:1.4;color:var(--dov)}
/* Passet före start: förhandsvisning */
.forhand{padding:4px 16px}
.fh-rad{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--lina)}
.fh-rad:last-child{border-bottom:0}
.fh-nr{font:700 11px/1 var(--mono);color:var(--puls);letter-spacing:.08em}
.fh-rad b{font:600 15px/1.25 var(--sans)}
.fh-ord{font:600 13px/1 var(--mono);color:var(--dov);white-space:nowrap}
.fh-ord em{font-style:normal;color:var(--text)}
.fh-not{font-size:12px;color:var(--dov);margin:10px 4px 0;text-align:center}

/* Pulsen under passet: en siffra, i hjälten eller fokuslägets topp */
html[data-palett="kol"] .ph-puls{display:inline-flex;align-items:baseline;gap:6px;margin-top:8px;font-size:13px;color:var(--dov)}
html[data-palett="kol"] .ph-puls[hidden]{display:none}
html[data-palett="kol"] .ph-puls i{font-style:normal;color:var(--puls);animation:slag 1s ease-in-out infinite}
html[data-palett="kol"] .ph-puls b{font:700 20px/1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
html[data-palett="kol"] .fokus-puls{margin:0 0 0 auto;padding-right:12px}
@keyframes slag{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}}
/* Vilans sista tre sekunder: röd siffra som slår i takt */
html[data-palett="kol"] .vila.slut b,html[data-palett="kol"] .fokus-vila.slut b{color:var(--puls);animation:nedrakning 1s ease-out infinite}
@keyframes nedrakning{0%{transform:scale(1.25)}60%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){html[data-palett="kol"] .ph-puls i,html[data-palett="kol"] .vila.slut b,html[data-palett="kol"] .fokus-vila.slut b{animation:none}}
/* Pulsen i löprutan: överst, hela bredden, med zonen */
html[data-palett="kol"] .lop-live .lop-puls{grid-column:1/-1;margin:0;background:var(--panel2);border-radius:14px;border-left:3px solid var(--lina)}
html[data-palett="kol"] .lop-live .lop-puls .lp-tal{font-size:46px}
html[data-palett="kol"] .lop-live .lop-puls .lp-enh{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dov)}
html[data-palett="kol"] .lop-live .lop-puls .lp-status{font-size:13px;letter-spacing:0;text-transform:none;color:var(--text);font-weight:600}

/* Luft mellan rutor som annars hamnade kant i kant */
html[data-palett="kol"] .anpassning{margin:12px 0 14px}

/* Vilan: texten på en rad, aldrig tre */
html[data-palett="kol"] .vila{white-space:nowrap;max-width:calc(100vw - 32px)}
html[data-palett="kol"] .vila .vila-puls{display:inline;margin:0 0 0 4px;font-size:12px}
/* Målkällan i maten: en riktig ruta med luft ovanför (signatur.css nollar den annars) */
html[data-palett="kol"] #vy-tallriken>.mal-kalla{margin-top:16px;background:linear-gradient(180deg,#1a1a1d,#141416);border:1px solid var(--lina);border-radius:16px;padding:14px 16px}
html[data-palett="kol"] #vy-tallriken>.mal-kalla.adaptiv{border-left:3px solid var(--puls)}

/* Min träning i profilen: inriktningen som tre tydliga val, upplägget under */
html[data-palett="kol"] .trv-etikett{font:600 11px/1 var(--sans,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--dov);margin:14px 0 8px}
html[data-palett="kol"] .trv-val{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
html[data-palett="kol"] .trv-alt{padding:12px 6px;border-radius:14px;border:1px solid var(--lina);background:var(--panel2);color:var(--dov);font-size:13px;font-weight:600;line-height:1.2}
html[data-palett="kol"] .trv-alt.vald{border-color:var(--puls);color:var(--text);background:linear-gradient(180deg,rgba(255,45,85,.14),rgba(255,45,85,.05))}
html[data-palett="kol"] .trv-upplagg{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel2);border:1px solid var(--lina);border-radius:14px;padding:12px 14px}
html[data-palett="kol"] .trv-upplagg b{display:block;font-size:15px}
html[data-palett="kol"] .trv-upplagg .dov{font-size:12.5px}

/* Undersidornas sidhuvud (profilen m.fl.): kol, inte det gamla ljusa */
html[data-palett="kol"] .sida-topp{background:rgba(11,11,12,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--lina);color:var(--text)}
html[data-palett="kol"] .sida-topp span{color:var(--text)}
html[data-palett="kol"] .sida-tillbaka{color:var(--text)}

/* Profilsidan: hjälten med djup och rött, samma gravyr-rytm som Hem */
html[data-palett="kol"] .rang-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;border:1px solid var(--lina);
  background:linear-gradient(180deg,#16161a,#0e0e10);padding:24px 14px 18px;margin:6px 0 4px}
html[data-palett="kol"] .rang-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 60% at 50% -10%,rgba(255,45,85,.17),transparent 70%)}
html[data-palett="kol"] .rang-hero h1{font-size:clamp(34px,10vw,42px);letter-spacing:.05em}
html[data-palett="kol"] .rang-niva{letter-spacing:.14em;text-transform:uppercase;font-size:11px}
html[data-palett="kol"] .rang-bana{height:10px;border-radius:5px;max-width:420px;margin:0 auto 10px}
html[data-palett="kol"] .rang-bana i{background:linear-gradient(90deg,var(--puls),#ff5f7e);box-shadow:0 0 14px rgba(255,45,85,.45)}
html[data-palett="kol"] .rang-tal div{background:var(--panel2);border-color:var(--lina)}
html[data-palett="kol"] .rang-hero .fotnot{margin-top:12px}
/* Gravyr-rubriker med handling eller värde till höger */
html[data-palett="kol"] .h3-rubrik .lank{margin-left:auto;letter-spacing:0;text-transform:none;font:600 13px/1 var(--sans)}
html[data-palett="kol"] .h3-rubrik .h3-hoger{margin-left:auto;letter-spacing:0;text-transform:none;font:600 12px/1 var(--mono);color:var(--dov)}
html[data-palett="kol"] .sida-inre .h3-rubrik{margin:18px 4px 8px}
html[data-palett="kol"] .kort-fot{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
html[data-palett="kol"] .kort-trv .trv-etikett:first-child{margin-top:2px}
.pb-rad.dold{display:none}

/* Logg: jag-kortet som hjälte, widgetrubrikerna i gravyr */
html[data-palett="kol"] .kort.jag{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--lina);
  background:linear-gradient(180deg,#16161a,#0e0e10)}
html[data-palett="kol"] .kort.jag::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 60% at 88% -10%,rgba(255,45,85,.16),transparent 70%)}
html[data-palett="kol"] #vy-historik .h3-rubrik .dov{margin-left:auto;font:600 12px/1 var(--mono);letter-spacing:0;text-transform:none}
html[data-palett="kol"] #vy-historik .h3-rubrik{margin:18px 4px 8px}

/* Mat: samma glow-up som Logg och profilen — hjälte med djup, gravyr-avsnitt */
html[data-palett="kol"] .hs.mh{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--lina);
  background:linear-gradient(180deg,#16161a,#0e0e10)}
html[data-palett="kol"] .hs.mh::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 60% at 88% -10%,rgba(255,45,85,.14),transparent 70%)}
html[data-palett="kol"] .mat-kort{padding:4px 14px}
html[data-palett="kol"] .mat-kort .matrad{border-bottom:1px solid var(--lina)}
html[data-palett="kol"] .mat-kort .matrad:last-child{border-bottom:0}
html[data-palett="kol"] .h3-hoger{margin-left:auto;font:600 12px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--dov)}
html[data-palett="kol"] .mal-fot{margin:10px 6px 0;font-size:12.5px;color:var(--dov);line-height:1.5}

/* Hem: coachens råd kapade till tre, snabbvalets betyg i fast hörn */
html[data-palett="kol"] .crad.dold{display:none}
html[data-palett="kol"] .cradkort .lank{display:block;margin:10px 2px 4px}
html[data-palett="kol"] .h3-hoger.gron{color:var(--lyft)}
/* Snabbvalen i Mat: betyget sitter alltid uppe till höger — namnen i jämnhöjd */
html[data-palett="kol"] .vanligt-val{position:relative;padding-right:34px}
html[data-palett="kol"] .vanligt-val .betyg.mini{position:absolute;top:8px;right:8px;margin:0}

/* Rundan som film: karta, räknare och checkpoints */
html[data-palett="kol"] .lopfilm{margin:10px 0 4px}
html[data-palett="kol"] .lf-karta{height:270px;border-radius:18px;overflow:hidden;border:1px solid var(--lina);
  background:#0f0f11;box-shadow:0 2px 6px rgba(0,0,0,.5),0 26px 46px -30px rgba(255,45,85,.45)}
html[data-palett="kol"] .lf-tal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
html[data-palett="kol"] .lf-tal div{background:var(--panel2);border:1px solid var(--lina);border-radius:14px;padding:11px 12px}
html[data-palett="kol"] .lf-tal b{display:block;font:800 26px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
html[data-palett="kol"] .lf-tal span{font:600 10.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dov)}
html[data-palett="kol"] .lf-knappar{display:flex;justify-content:center;gap:6px;margin-top:10px}
html[data-palett="kol"] .lf-knappar .lank{padding:8px 12px}
html[data-palett="kol"] .lf-dela{color:var(--puls)}

/* Delningskortet: en 9:16-bild att lägga upp, ritad i telefonen */
html[data-palett="kol"] .dela-ram{display:flex;justify-content:center;margin:2px 0 12px}
html[data-palett="kol"] .dela-duk{width:auto;max-width:100%;max-height:46vh;aspect-ratio:9/16;
  border-radius:16px;border:1px solid var(--lina);background:#0b0b0c;
  box-shadow:0 2px 8px rgba(0,0,0,.5),0 26px 46px -30px rgba(255,45,85,.4)}
html[data-palett="kol"] .dela-val{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
html[data-palett="kol"] .dela-chip{padding:10px 16px;border-radius:999px;background:var(--panel2);
  border:1px solid var(--lina);color:var(--dov);font:700 13px/1 var(--sans)}
html[data-palett="kol"] .dela-chip.pa{border-color:var(--puls);color:var(--text)}
html[data-palett="kol"] .dela-ark .dela-fel:empty{display:none}
html[data-palett="kol"] .dela-fel.kvitto{color:var(--dov)}
/* Pulssiffran ligger kvar dämpad medan bandet mäter om — att den försvann
   och kom tillbaka var värre än att den stod still en stund. */
html[data-palett="kol"] .ph-puls.gammal{opacity:.4}
html[data-palett="kol"] .pv-dela{display:block;margin:14px auto 4px;color:var(--puls);padding:10px 14px}
html[data-palett="kol"] .dela-flytt{margin:-4px 0 12px}
html[data-palett="kol"] .dela-tips{text-align:center;color:var(--dov);font:600 12px/1.4 var(--sans);margin:0 0 8px}
html[data-palett="kol"] .dela-zoom{display:block;width:100%;max-width:300px;margin:0 auto;accent-color:var(--puls)}
/* Markören positioneras av kartan med en transform på sitt eget element.
   Allt vi animerar måste därför ligga INNANFÖR den — en animation med
   transform på markören själv tar över positionen medan den spelas, och
   checkpointen hoppade då till kartans hörn och tillbaka. */
html[data-palett="kol"] .lf-cp{pointer-events:none}
html[data-palett="kol"] .lf-cp.dold{visibility:hidden}
html[data-palett="kol"] .lf-cp-in{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 9px;
  background:rgba(11,11,12,.9);border:1px solid var(--puls);border-radius:11px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.6);animation:cp-in .32s cubic-bezier(.2,1.3,.4,1)}
html[data-palett="kol"] .lf-cp b{font:800 12px/1 var(--mono);color:var(--text)}
html[data-palett="kol"] .lf-cp span{font:600 10.5px/1 var(--sans);color:var(--dov)}
@keyframes cp-in{from{opacity:0;transform:translateY(6px) scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html[data-palett="kol"] .lf-cp-in{animation:none}}

/* Passhistoriken: loggboksposten går att öppna, och passet visas som en sida */
html[data-palett="kol"] .lb-post{display:block;width:100%;text-align:left;background:var(--panel2);
  border:1px solid var(--lina);border-radius:16px;padding:13px 15px;margin-bottom:8px;color:inherit;
  transition:background .15s}
html[data-palett="kol"] .lb-post:active{background:#1e1e22}
html[data-palett="kol"] .lb-topp{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
html[data-palett="kol"] .lb-topp b{font:800 17px/1.2 var(--sans)}
html[data-palett="kol"] .lb-topp time{font:600 12px/1 var(--mono);color:var(--dov)}
html[data-palett="kol"] .lb-sum{margin:3px 0 0;font-size:13px;color:var(--dov)}
html[data-palett="kol"] .lb-lyft{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:13.5px;color:var(--dov)}
html[data-palett="kol"] .lb-lyft u{flex:1;border-bottom:1px dotted var(--lina);text-decoration:none}
html[data-palett="kol"] .lb-lyft b{color:var(--text);font-family:var(--mono)}
html[data-palett="kol"] .lb-lyft i{font-style:normal;font-size:11px;color:var(--dov);margin-left:1px}
html[data-palett="kol"] .pv-hero h1{font:800 clamp(30px,8vw,38px)/1.05 var(--sans);letter-spacing:-.02em;margin:2px 0 4px}
html[data-palett="kol"] .pv-ovning{margin-bottom:8px}
html[data-palett="kol"] .pv-namn{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
html[data-palett="kol"] .pv-namn b{font:700 16px/1.2 var(--sans)}
html[data-palett="kol"] .pv-namn span{font-size:12.5px;color:var(--dov)}
html[data-palett="kol"] .pv-set{display:flex;flex-wrap:wrap;gap:7px}
html[data-palett="kol"] .pv-set span{background:var(--panel2);border:1px solid var(--lina);border-radius:10px;
  padding:7px 10px;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
html[data-palett="kol"] .pv-set i{font-style:normal;color:var(--puls);margin-left:6px;font-size:11.5px}
/* Rangen i jag-kortet: en signatur bredvid profillänken, inte en rubrik */
html[data-palett="kol"] .jag-fot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
html[data-palett="kol"] .jag-rang{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dov)}
html[data-palett="kol"] .lf-prick{width:13px;height:13px;border-radius:50%;background:#fff;
  border:3px solid var(--puls);box-shadow:0 0 14px rgba(255,45,85,.8)}
/* Duken ligger ovanpå kartan och tar inga tryck */
html[data-palett="kol"] .lf-karta{position:relative}
html[data-palett="kol"] .lf-duk{position:absolute;inset:0;z-index:2;pointer-events:none}
html[data-palett="kol"] .maplibregl-marker{z-index:3}
/* Passidan: hjälten smalnar av när filmen äger siffrorna, och kortet
   runt filmen klär sig tätt om den i stället för att lägga till en ram till */
html[data-palett="kol"] .pv-hero{padding:18px 14px 16px;margin-bottom:10px}
html[data-palett="kol"] .pv-smal{padding:14px 14px 12px}
html[data-palett="kol"] .pv-smal .rang-tal{margin:12px 0 0}
html[data-palett="kol"] .pv-runda{padding:12px}
html[data-palett="kol"] .pv-runda .lopfilm{margin:0}
html[data-palett="kol"] .pv-runda .lop-splits{margin-top:12px}
/* Passidan: en lugn rubrik högst upp, siffrorna sist som kvittens */
html[data-palett="kol"] .pv-huvud{padding:4px 4px 12px}
html[data-palett="kol"] .pv-nar{margin:0 0 2px;font:700 11px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dov)}
html[data-palett="kol"] .pv-huvud h1{font:800 clamp(30px,8vw,38px)/1.05 var(--sans);letter-spacing:-.025em;margin:0}
html[data-palett="kol"] .pv-tal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
html[data-palett="kol"] .pv-tal div{background:var(--panel2);border:1px solid var(--lina);border-radius:14px;padding:11px 12px;text-align:left}
html[data-palett="kol"] .pv-tal b{display:block;font:800 22px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
html[data-palett="kol"] .pv-tal span{font:600 10.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dov)}
/* Blir det ändå en ensam ruta sist tar den hela bredden, aldrig ett hål bredvid */
html[data-palett="kol"] .pv-tal.sista-bred > div:last-child{grid-column:1/-1}

/* DAGSTEGAREN. Svepet över dagrubriken finns kvar, men flikarna byts också
   med svep i sidled — gesten kan därför bara bo på en smal yta, och då
   måste det gå att trycka också. Pilarna är dova tills man rör dem: de ska
   finnas när man letar, inte dra blicken från laddningen. */
.h2-topp{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.h2-dag{min-width:0}
.dagstyr{display:flex;gap:6px;flex:none;margin-top:2px}
.dagpil{width:34px;height:34px;flex:none;display:grid;place-items:center;
  font:400 20px/1 var(--sans);color:var(--dov);background:var(--panel);
  border:1px solid var(--lina);border-radius:10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.dagpil:active{background:var(--panel2);color:var(--text)}
.dagpil:disabled{opacity:.3;cursor:default}

/* HRV i laddningsarket: ett stort tal i Sora, som laddningen själv. */
html[data-palett="kol"] .ld-rad .nh-rad b.ld-stor{font:800 36px/1 var(--mono);letter-spacing:-.02em}
.hrvk{display:block;width:100%;height:auto;margin-top:8px}
.hrvk text{font:600 10px var(--sans);fill:var(--dov);text-transform:uppercase;letter-spacing:.04em}
.hrvk .bas{stroke:var(--dov);stroke-dasharray:3 4;stroke-width:1}
.hrvk .lin{fill:none;stroke:var(--text);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hrvk .lag{fill:var(--fail)}

.ld-prel{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dov);vertical-align:middle;margin-left:8px}

/* Sömnarket: total, tidslinje, natt och tupplur var för sig, sedan faser. */
.sv-topp{display:grid;gap:4px;margin:2px 0 16px}
.sv-topp span,.sv-etikett,.sv-per span{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dov)}
.sv-topp b{font:800 40px/1 var(--mono);letter-spacing:-.02em}
.sv-topp small{color:var(--dov);font-size:13px}
.sv-linje{margin:0 0 16px}
.sv-spar{position:relative;height:14px;border-radius:7px;background:var(--panel2)}
.sv-spar i{position:absolute;top:0;bottom:0;border-radius:7px;min-width:6px}
.sv-skala{position:relative;height:16px;margin-top:6px}
.sv-skala span{position:absolute;transform:translateX(-50%);font:600 11px/1 var(--mono);color:var(--dov)}
.sv-skala span:first-child{transform:none}.sv-skala span:last-child{transform:translateX(-100%)}
.sv-per{display:grid;gap:10px;margin-bottom:20px}
.sv-per.tva{grid-template-columns:1fr 1fr}
.sv-per>div{display:grid;gap:7px;padding:14px;border:1px solid var(--lina);border-radius:var(--r-inre);background:var(--panel2)}
.sv-per span{display:flex;align-items:center;gap:7px}
.sv-per em{width:8px;height:8px;border-radius:50%;display:block}
.sv-per b{font:800 22px/1 var(--mono)}
.sv-per small{color:var(--dov);font:600 13px/1 var(--mono)}
.sv-etikett{margin:0 0 10px}
.sv-fakta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--lina)}
.sv-fakta div{display:grid;gap:6px}
.sv-fakta span{color:var(--dov);font-size:12px}
.sv-fakta b{font:700 17px/1 var(--mono)}

/* Kroppen: belastning, sömnbehov och tidig varning på Hem */
.nh-kropp .kr-rad{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
.nh-kropp .nh-etikett + .kr-rad{border-top:0;padding-top:6px}
.nh-kropp .kr-rad span{font-size:15px;color:var(--text)}
.nh-kropp .kr-rad b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nh-kropp .kr-rad small{grid-column:1/-1;font-size:13px;color:var(--dov)}
.nh-kropp .kr-rad p{grid-column:1/-1;margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--dov)}
.nh-kropp .kr-hog b,.nh-kropp .kr-hojd b{color:var(--puls)}
.nh-kropp .kr-varning{margin:4px 0 6px;padding:12px 14px;border-radius:14px;background:rgba(255,45,85,.1);border:1px solid rgba(255,45,85,.35)}
.nh-kropp .kr-varning b{display:block;font-size:15px;color:var(--puls);margin-bottom:4px}
.nh-kropp .kr-varning p{margin:0;font-size:13.5px;line-height:1.45;color:var(--text)}