/* DESIGNET (3/11 2026). Ligger OVEN PAA forma.css. Regler og begrundelser:
 * .claude/rules/design.md. Farver kun som variabler i :root.
 *
 * Tre beslutninger:
 *  1. LYS, varm creme-grund mod hvide og navy kort. Mint, indigo og den gule grund er vaek paa
 *     brugerens ord. Hele paletten er rav, dens modfarve navy, creme, hvid og zonerne.
 *  2. ÉT skriftsystem: Anybody til overskrifter, tal og al kort tekst, Instrument Sans til hele
 *     saetninger; aldrig tyndt (afsnittet SKRIFTEN I APPEN nederst). Serifen er vaek. Skalaen staar i --t-*.
 *  3. Faa, store, daekkende kort (se "KORTENE" nederst). Detaljer bor i ark.
 */
/* ALT KORT TEKST I APPEN (3/11, brugeren: den tynde skrift "oedelaegger udtrykket"): samme Anybody
   som overskrifterne, aldrig under 600, uanset hvad en gammel regel beder om: browseren
   haever en lavere vaegt til fladens bund. + og x er for smaa i Anybody og kommer fra Instrument.
   'Instrument Tekst' er det samme for hele saetninger, med bund 500. */
@font-face{
  font-family:'Anybody Tekst'; font-style:normal; font-weight:600 900; font-stretch:50% 150%; font-display:swap;
  src:url('/static/fonts/anybody-latin.woff2') format('woff2');
  unicode-range:U+20-2A, U+2C-D6, U+D8-2FF, U+2000-2211, U+2213-FFFF;
}
@font-face{
  font-family:'Instrument Tekst'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('/static/fonts/instrument-sans-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Anybody'; font-style:normal; font-weight:500 900; font-stretch:var(--bredde) 150%;
  font-display:swap;
  src:url('/static/fonts/anybody-latin.woff2') format('woff2');
}

:root{
  /* ── Grunden ─────────────────────────────────────────────── */
  --g1:#FFF6E6; --g2:#FFF6E6; --g3:#FFF6E6;
  /* --kort-2 er knappernes flade paa grunden, og lysere inde i et hvidt kort (se KORTENE). */
  --bg:var(--g1); --kort:#FFFFFF; --kort-2:#FFEBC9; --felt:#FFE9C4;
  --felt-glas:rgba(23,35,58,.06);
  /* Al moerk tone er den samme navy; daempet er navy med gennemsigtighed, saa den passer paa baade sol og hvid. */
  --tekst:#17233A; --daempet:rgba(23,35,58,.76); --daempet-2:rgba(23,35,58,.6);
  --kant:rgba(23,35,58,.14); --kant-svag:rgba(23,35,58,.08); --kant-staerk:rgba(23,35,58,.26);
  --skinne-2:rgba(23,35,58,.18);
  --streg:linear-gradient(90deg, transparent, rgba(23,35,58,.18) 12%, rgba(23,35,58,.18) 88%, transparent);
  --skygge:rgba(120,78,20,.34);
  --top-taage:rgba(255,246,230,.62); --top-taage-taet:rgba(255,246,230,.86); --top-skygge:rgba(23,35,58,.28);
  --enh-prik-kant:var(--kort);
  --himmel-top:var(--bg); --himmel-1:var(--bg); --himmel-2:var(--bg); --dis:var(--bg); --top-skaer:transparent;

  /* ── De moerke kort ──────────────────────────────────────── */
  --ink:#17233A; --ink-2:#22314C; --ink-3:#31425F;

  /* ── Handling ────────────────────────────────────────────── */
  --rav:#FFB224; --rav-tekst:#B86200; --rav-dyb:#B86200; --paa-rav:#2A1700; --rav-kant:#E8920A; --rav-lav:#FFB224; --rav-dim:rgba(23,35,58,.08);
  --knap-flade:var(--rav); --knap-tekst:var(--paa-rav); --knap-kant:var(--rav-kant);
  --flade-kant:#FFFFFF; --valgt-flade:#FFFFFF;

  /* ── Signaler og zoner ───────────────────────────────────── */
  --z1:#6F97C4; --z2:#0B9C75; --z3:#C48F00; --z4:#DD6A14; --z5:#DB3448; --top:#0B9C75;
  --zone1:#9CC1EC; --zone2:#1E9BFF; --zone3:#12C796;
  --zone4:#FFC400; --zone5:#FF7A1F;
  --zone6:#F03E5E; --zone7:#A66BFF;
  /* Zonens farve som TEKST: --zone1..7 er fyld og for lyse paa hvid. */
  --zt1:#2F6FA8; --zt2:#0A6DBF; --zt3:#087A5A; --zt4:#876800; --zt5:#B4500A; --zt6:#C4203F; --zt7:#7440D0;
  --gul-tekst:#946000;
  --zone-styrke:#F4529F;

  --kant-hoejde:3px;
  --skrift-tal:'Anybody','Instrument Sans',-apple-system,sans-serif;
  --skrift-display:var(--skrift-tal); --skrift-dom:var(--skrift);
  --bredde:92%;
  --ark-flade:#FFFFFF;
  --enh-straem:var(--z2);
}

html, body{background:var(--g1)}
body{background:transparent}
body::after{display:block; content:''; position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg, var(--g1) 0, var(--g2) 40%, var(--g3) 100%)}
#s-idag::before, #s-aktiviteter::before, #s-mig::before, body::before{display:none !important}
body{text-rendering:geometricPrecision}

/* ══ HEADEREN ════════════════════════════════════════════════════════════
   Flyder altid frit: ingen flade, ingen streg, ingen overgang, heller ikke naar der rulles
   (brugerens valg 3/11). Laget lader tryk gaa igennem til siden, kun knapperne fanger dem. */
.app-top, .app-top.kompakt{background:none; box-shadow:none; transition:none; pointer-events:none}
/* Brugerens billede 3/11: i toppen gaar ikonerne i et med grunden; naar der rulles, ligger der en
   let skygge bag dem, og det bagved bliver sloeret. Laget toner ud nedad, saa det aldrig
   laeses som en bjaelke, og er taettest under uret, der ellers forsvinder paa et navy kort. */
.app-top::before{display:block; content:''; position:absolute; inset:0 0 -24px 0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .18s;
  background:linear-gradient(180deg, var(--top-taage-taet) 0, var(--top-taage-taet) calc(env(safe-area-inset-top) + 6px), var(--top-taage) 72%, transparent 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 0, #000 70%, transparent 100%)}
.app-top.kompakt::before{opacity:1}
.app-top.kompakt .header-gruppe, .app-top.kompakt .logo{filter:drop-shadow(0 1px 4px var(--top-skygge))}
@media (prefers-reduced-motion: reduce){ .app-top::before{transition:none} }
.app-top::after{display:none !important}
.app-top a, .app-top button, .app-top .header-pil{pointer-events:auto}
header{padding-top:calc(4px + env(safe-area-inset-top)); padding-bottom:2px}
.header-raekke{padding:4px 0}
.header-raekke .logo{font-size:clamp(15px, 4.3vw, 17px)}
.header-pil-ikon{width:38px; height:38px}
.header-fold:not(:has(#trial-etiket:not([hidden]))){display:none}
.dag-etiket{display:none}
.header-fold-linje{border-top:none; padding:0 0 6px}
#profil-ikon-knap{width:38px; height:38px; padding:0; box-shadow:0 0 0 1.5px var(--rav); border-radius:50%; background:var(--ink)}
#profil-ikon-knap.aktiv{box-shadow:0 0 0 2px var(--rav)}
#profil-ikon-knap .header-pil-ikon{width:100%; height:100%}
.header-avatar{border:none; background:var(--ink); color:#fff}
.header-avatar{font-size:15px}
.logo{font-family:var(--skrift-tal); font-weight:800; font-stretch:var(--bredde); font-feature-settings:normal}
.logo .ord{letter-spacing:.02em}
.logo-maerke{color:var(--ink)}
.ordmaerke .peaks{color:var(--daempet)}
.logo .ord{color:var(--tekst)}
.header-raekke .logo .tier-etiket{font-family:var(--skrift-tal); font-weight:800; font-stretch:var(--bredde); font-feature-settings:normal; font-size:10px; padding:2px 5px 1px; border-radius:6px}

/* ══ SKRIFTEN ═════════════════════════════════════════════════════════════════════
   Overskrifter og tal i Anybody, alt andet i Instrument Sans. Anybody har sit eget
   tegnsaet, saa body's "ss01" skal af. */
.hh-titel, .forside h1, .pris-hoved, .midt h1, .tur-side h1, .pw-h, .enh-helt h2, .enh-ark-titel,
.tur-fg-win h3, .krop-overskrift, .enh-dom, .goal h2, .pas-navn, .profil-navn, .udg-nyhed h4,
.ark h2, .ark h3, .fa-ark h3, .dag-krop > .ark-top h3, .bib-r > summary .bib-navn, .dayview .pd-navn, .pd-navn-t,
.sh h3, .morgen .tilstand, .morgen .hvor-titel, .gs-spm, .ul-navn b, .bib-sport-k, .brik-navn, .fk-navn, .sb-titel,
.pw-plan b, .ul-top > span > b, .ov-c b, .fa-t b, .styrke-tillaeg b,
.ring-midt b, .kdial .v b, .kdial .v .kolon, .ev-stor b, .wkg .n b, .ul-t b, .flise-tal, 
.cockpit-akt .trend .n b, .sb-nat b, .tal .v, .bue-midt .v, .maaling-tal, .maal-tal .v, .pd-sum.pd-sum-top b, .gh-koer-tal b,
.datagrund-tal b, .lag-v, .maal-enheder b, .lspor-load b, .ul-tal2 b, .ul-sigte2 b, .pd-min, .dag-tid-r1 > b, .rc b, .rc em,
.gr, .rpe-k, .kam-dag, .us-dag small{
  font-family:var(--skrift-tal); font-feature-settings:normal; font-variant-numeric:normal; letter-spacing:-.005em}
/* Tre tunge trin */
.forside h1, .midt h1, .tur-side h1, .pw-h{font-weight:800; font-stretch:var(--bredde); font-size:clamp(25px, 7.4vw, 31px); line-height:1.1}
.tur-side h1 em, .forside h1 em, .pw-h em, .midt h1 em{font-style:normal; color:inherit}
.hh-titel, .pris-hoved, .enh-helt h2, .enh-ark-titel, .tur-fg-win h3, .krop-overskrift, .enh-dom, .goal h2, .pas-navn, .profil-navn, .udg-nyhed h4,
.ark h2, .ark h3, .fa-ark h3, .dag-krop > .ark-top h3, .sh h3, .sb-titel{font-weight:750; font-stretch:var(--bredde); font-size:19px; line-height:1.15}
.bib-r > summary .bib-navn, .dayview .pd-navn, .pd-navn-t, .ul-navn b, .ul-top > span > b, .pw-plan b, .fk-navn, .fa-t b, .styrke-tillaeg b, .brik-navn, .bib-sport-k{font-weight:700; font-stretch:var(--bredde)}
/* Tal */
.ring-midt b, .kdial .v b, .kdial .v .kolon, .ev-stor b, .wkg .n b, .ul-t b, .flise-tal, 
.cockpit-akt .trend .n b, .sb-nat b, .tal .v, .bue-midt .v, .maaling-tal, .maal-tal .v, .pd-sum.pd-sum-top b, .gh-koer-tal b,
.datagrund-tal b, .lag-v, .maal-enheder b, .lspor-load b, .ul-tal2 b, .ul-sigte2 b, .pd-min, .dag-tid-r1 > b, .rc b, .ov-c b, .gr, .rpe-k{font-weight:700; font-stretch:var(--bredde)}
/* Traenerens saetninger */
.morgen-dom, .maal-lead, .bib-fokus-tekst, .krop-konkl p, .fk-voice, .dagsdom-helt,
.tur-side p.tur-signatur, .tur-side p.tur-loefte{font-family:var(--skrift); font-weight:500; letter-spacing:-.005em; font-size:16px; line-height:1.35; color:var(--tekst)}
.morgen-dom em, .dagsdom-helt em, .tur-side p.tur-loefte em, .tur-side p em, .fk-voice em{font-style:normal; color:inherit}
.lbl, .lbl b{color:var(--tekst); font-weight:600}
.lbl span{color:var(--daempet)}

/* ══ KNAPPERNE ══════════════════════════════════════════════════════════════════
   Rav = den ene handling, med en lille underkant, der trykkes ned. Alt andet er en rolig
   flade uden kant. */
.knap, .handling.rav{
  background:var(--knap-flade); color:var(--knap-tekst); border:none; border-radius:14px; min-height:50px;
  font-family:var(--skrift-tal); font-weight:750; font-stretch:var(--bredde); font-feature-settings:normal; font-size:15px; letter-spacing:0;
  box-shadow:0 var(--kant-hoejde) 0 var(--knap-kant); margin-bottom:var(--kant-hoejde);
  transition:transform .09s ease-out, box-shadow .09s ease-out}
.knap:active, .handling.rav:active{transform:translateY(2px); box-shadow:0 1px 0 var(--knap-kant); filter:none}
.knap.sekundaer, .handling:not(.rav), .tur-ark-tilbage, .pd-fold, .fk-knap, .fk-knap.fk-ghost{
  background:var(--kort-2) !important; color:var(--tekst) !important; border:none !important; border-radius:14px !important;
  font-family:var(--skrift); font-weight:600; font-stretch:var(--bredde); font-size:14px; box-shadow:none !important; margin-bottom:0;
  transition:transform .09s ease-out, background .12s}
.knap.sekundaer:active, .handling:not(.rav):active, .tur-ark-tilbage:active, .pd-fold:active, .fk-knap:active{transform:scale(.98)}
.krusning{display:none}
.pd-fold{min-height:42px}
.pd-fold svg{color:var(--rav-tekst); stroke:var(--rav-tekst)}
.foldbar.rpe-mangler .pd-fold{background:var(--rav) !important; color:var(--paa-rav) !important}
.foldbar.rpe-mangler .pd-fold svg{color:var(--paa-rav); stroke:var(--paa-rav)}
#tid-aabn, #cockpit #tid-aabn{background:none !important; color:var(--rav-tekst) !important; border:none !important; box-shadow:none !important; min-height:40px; margin:0 auto; font-family:var(--skrift); font-weight:600; font-size:14px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px}
.tur-ark-tilbage{min-height:50px}

.rpe-k, .rpe-raekke .rpe-k, .bar .rpe-k{background:var(--kort-2) !important; border:none !important; border-radius:10px !important; color:var(--tekst); box-shadow:none}
.rpe-k.on, .rpe-k.aktiv, .bar .rpe-k.on{background:var(--rav) !important; color:var(--paa-rav)}
.rpe-k.lt{background:color-mix(in srgb, var(--rav) 38%, var(--kort-2)) !important}

/* De sekundaere fil-knapper er smaa: Send er handlingen. */

/* ══ BUNDBJAELKEN ═══════════════════════════════════════════════════════════════ */
nav::after{background:var(--kort); box-shadow:0 -1px 0 var(--kant)}
nav button{font-weight:600; color:var(--daempet-2)}
nav button svg{stroke-width:1.9}
nav button.aktiv{color:var(--rav-tekst)}
nav:not(.side-nav) button.aktiv{color:var(--nav-aktiv)}

/* ══ FLADER: ingen bokse ════════════════════════════════════════════════════════ */
.cockpit{border-color:transparent !important; overflow:visible !important; overflow-x:clip !important; background:none !important}
.cockpit::before, .cockpit::after{display:none}
main{background:none}

/* ══ ARK ══════════════════════════════════════════════════════════════════════════
   .ark og fold-arket er samme figur. Fold-arket er et <details>: indholdet staar i DOM'en,
   hvor det hoerer til, og CSS'en stiller det i fuld skaerm. */
.ark, .fa-ark, #dagskort .dag.foldbar[open] > .dag-krop{background:var(--ark-flade); border:none; border-radius:24px 24px 0 0; box-shadow:0 -14px 40px var(--skygge)}
.ark-baggrund, .fa-slor{background:rgba(23,35,58,.5)}
.ark-greb{background:var(--kant-staerk)}
.ark-luk{color:var(--rav-tekst); font-weight:600}
.fa-slor{position:fixed; inset:0; z-index:40}
.fa-ark, #dagskort .dag.foldbar[open] > .dag-krop{position:fixed; left:0; right:0; bottom:0; z-index:41; max-width:var(--spalte); margin:0 auto;
  max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:8px var(--rende) calc(20px + env(safe-area-inset-bottom));
  font-size:14px; color:var(--daempet); line-height:1.45; animation:fa-op .28s var(--ud) both}
@keyframes fa-op{from{transform:translateY(40px); opacity:0}}
@media (prefers-reduced-motion: reduce){ .fa-ark, #dagskort .dag.foldbar[open] > .dag-krop{animation:none} }
html:has(details.fold-ark[open]), html:has(#dagskort details.foldbar[open]){overflow:hidden}
html:has(details.fold-ark[open]) body, html:has(#dagskort details.foldbar[open]) body{overflow:hidden}
#dagskort .dag.foldbar:not([open]) > .fa-slor{display:none}
/* Raekken, der aabner et ark */
.fold-ark > summary{list-style:none; cursor:pointer}
.fold-ark > summary::-webkit-details-marker{display:none}
.fa-raekke{display:flex; align-items:center; gap:12px; padding:13px 2px; min-height:48px; color:var(--tekst);
  border-top:1px solid; border-image:var(--streg) 1}
.fa-ikon{flex:0 0 22px; display:flex; justify-content:center; color:var(--rav-tekst)}
.fa-ikon svg{width:18px; height:18px}
.fa-t{flex:1; min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.fa-t b{font-size:14px}
.fa-t small{font-size:13px; color:var(--daempet); white-space:nowrap}
.fa-pil{flex:0 0 auto; color:var(--daempet-2)}
.fa-ark .ark-top{margin-bottom:10px}
.fa-ark .selvrapport{margin:0; padding:0; border:none; background:none}

/* ══ TODAY ══════════════════════════════════════════════════════════════════════ */
.cockpit-idag{margin-top:0}
.cockpit-idag .cockpit-in, #v-app #idag-cockpit .cockpit-in{padding:4px var(--rende) 0; gap:12px}
.morgen{gap:14px; align-items:center}
.morgen .lbl, .morgen .src{display:none}
.morgen .tilstand, .morgen .hvor-titel{margin-top:0; color:var(--tekst); font-weight:800; font-stretch:var(--bredde); font-size:clamp(26px, 8vw, 32px); line-height:1.05; gap:8px}
.morgen .tilstand i{display:none}
.morgen-dom{margin-top:5px; font-size:clamp(14px, 4.1vw, 16px)}
.morgen .ring, #v-app #idag-cockpit .morgen .ring{width:72px; height:72px; margin-top:0; flex:0 0 72px}
.morgen .ring circle{stroke-width:8.5}
.morgen .ring .ring-skinne{stroke:var(--kant-staerk)}
.morgen .ring .ring-bue{stroke:var(--daggry, var(--tekst))}
.morgen .ring-midt b, #v-app #idag-cockpit .morgen .ring-midt b{font-size:21px; color:var(--tekst)}
.morgen .ring-midt small{color:var(--daempet); font-size:11px; font-weight:500}
/* Kroppens tal: tre kolonner, ingen flade */
#idag-krop{margin-top:0; gap:10px}
#idag-krop .kdial, #idag-krop .kdial.trykbar, #v-app #idag-cockpit #idag-krop .kdial{padding:0; background:none !important; border:none !important; box-shadow:none !important; overflow:visible}
.kdial .hd2{color:var(--daempet); font-weight:500; font-size:12px}
.kdial .hd2 svg, .kdial .hd2 path, .kdial .hd2 circle{stroke:currentColor}
.kdial .v b{font-size:clamp(18px, 5.4vw, 22px); color:var(--tekst)}
.kdial .v small, .kdial .v .of{color:var(--daempet); font-weight:500}
.kdial .cap{color:var(--daempet); font-size:12px; line-height:1.3; overflow:visible; white-space:normal}
.kdial .cap b{color:var(--tekst)}
.kdial .spor{height:4px; border-radius:2px; background:var(--kant-staerk)}
.kdial .spor .fyld{border-radius:2px; background:var(--tekst)}
.kdial .maal-maerke{background:var(--bg)}
.nat-dag{font-size:11px; color:var(--daempet); border-color:var(--kant-staerk); font-family:var(--skrift); font-weight:500}
.kdial-pil{opacity:.7}
.spor-note{font-size:12px; color:var(--daempet); line-height:1.35; margin-top:8px; padding:0; background:none; border:none}

/* Ugen */
.uge-strimmel{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); margin:12px 0 4px; padding-top:12px; border-top:1px solid; border-image:var(--streg) 1}
.us-dag{appearance:none; background:none; border:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; color:var(--daempet); min-height:44px}
.us-s{display:flex; align-items:flex-end; justify-content:center; height:28px; width:100%}
.us-s i{display:block; width:min(22px, 60%); height:calc(var(--h) * 28px); min-height:5px; border-radius:5px 5px 2px 2px; background:var(--c); box-sizing:border-box}
.us-dag:not(.us-k) .us-s i{background:color-mix(in srgb, var(--c) 16%, transparent); box-shadow:inset 0 0 0 1.5px var(--c)}
.us-dag.us-h .us-s i{width:6px; height:6px; min-height:6px; border-radius:50%; background:var(--kant-staerk); box-shadow:none}
.us-dag small{font-size:12px; font-weight:700; font-stretch:var(--bredde)}
.us-dag.us-nu small{color:var(--rav-tekst)}
.us-dag.us-nu:not(.us-k):not(.us-h) .us-s i{background:color-mix(in srgb, var(--c) 55%, transparent)}
.us-dag:focus-visible{outline:2px solid var(--rav); outline-offset:2px; border-radius:8px}

/* Dagens pas */
#dagskort, #v-app #dagskort, #idag-indhold #dagskort{margin-top:4px; position:static !important; z-index:auto !important}
.dag-krop{border-top:none}
.pdag{gap:0}
.dayview .pd-navn{font-size:18px}
.pd-min{font-size:14px; color:var(--daempet)}
.pd-dag{color:var(--daempet)}
.dag.i-dag .pd-dag{color:var(--rav-tekst)}
.dag.i-dag .pd-dag b{color:var(--tekst)}
.segs{background:none}
.segs i{background:var(--c, var(--zone2))}
.segs i.rampe{background:color-mix(in oklab, var(--zone1) 78%, var(--bg))}
.segs:not(.kompakt), .dag-krop .segs:not(.kompakt){height:64px}
.segs.kompakt{height:30px}
.segs-ftp{border-top:1.5px dashed var(--kant-staerk)}
.segs-ftp span{background:var(--bg); border:none; font-size:11px; letter-spacing:.02em; text-transform:none; color:var(--daempet); font-weight:600}
.fa-ark .segs-ftp span, .dag.foldbar .dag-krop .segs-ftp span, .ark .segs-ftp span{background:var(--ark-flade)}

/* De tre tal */
.idag-efter{margin-top:4px}
.ov-raekke{appearance:none; width:100%; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:10px; background:none; border:none; padding:14px 0 6px; text-align:left; color:var(--tekst); cursor:pointer; border-top:1px solid; border-image:var(--streg) 1}
.ov-c{display:flex; flex-direction:column; gap:2px; min-width:0}
.ov-c small{font-size:12px; color:var(--daempet)}
.ov-c b{font-size:20px; line-height:1.15; color:var(--tekst)}
.ov-c span{font-size:12px; color:var(--daempet); white-space:nowrap; overflow:hidden}
#ark-dagstal .dials{margin:8px 0 14px}
#ark-dagstal .kdial{padding:0; background:none; border:none}
#ark-dagstal .formrow{padding:0; background:none; border:none; margin:0}

/* ══ PLAN ═══════════════════════════════════════════════════════════════════════ */
#cockpit .cockpit-in{padding:4px var(--rende) 0; gap:10px}
.cockpit:has(.plan-pro.skjul) .cockpit-in{padding-bottom:0}
.goal{gap:12px}
#plan-etape:not(.etape-laast){display:none !important}
.rail-head:empty{display:none}
.goal .ring{width:64px; height:64px; flex:0 0 64px}
.goal .ring-midt b{font-size:18px}
.goal .ring-midt small, .goal .ring-midt{font-size:11px}
.goal .ring circle{stroke-width:7}
.goal .ring .ring-skinne{stroke:var(--kant-staerk)}
.goal .fk, .goal .chip, .fokus .fk{background:var(--kort); border:none; box-shadow:none; font-size:12px; font-weight:500; color:var(--tekst); min-height:30px}

/* Kalenderen: to uger, syv dage pr. raekke, ingen vandret rul */
.rail{position:static !important; z-index:auto !important; margin:10px 0 0 !important; padding:0 !important; overflow:visible !important; mask:none !important; -webkit-mask:none !important}
.rail-in{display:grid !important; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0; padding:0 !important; width:auto !important; min-width:0 !important}
.rh{grid-column:1 / -1; margin:10px 0 4px; padding:0; background:none !important; border:none !important}
.rh:first-child{margin-top:0}
.ul-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 3px}
.ul-top > span > b{font-size:14px; color:var(--tekst)}
.ul-tid{font-size:13px; color:var(--daempet)}
.ul-sigte2{font-size:12px; color:var(--daempet)}
.ul-sigte2 small{font-size:12px; color:var(--daempet)}
.ul-sigte2 b{font-size:12px; color:var(--tekst)}
.ul-rk{display:flex; align-items:center; gap:10px}
.ul-tal2{font-size:12px; color:var(--daempet); white-space:nowrap}
.ul-tal2 b{font-size:12px; color:var(--tekst)}
.ul-tal2 small{font-size:11px}
.ul-bar{height:5px; border-radius:3px; flex:1; min-width:30px}
.ul-gjort, .ul-plan{border-radius:3px}
.ul-note{font-size:12px; color:var(--daempet); line-height:1.35; margin-top:4px}
.rc{appearance:none; width:auto !important; min-width:0 !important; height:auto !important; flex:none !important; background:none !important; border:none !important; box-shadow:none !important;
  border-radius:10px; padding:3px 0 4px; margin:0; display:grid; grid-template-columns:1fr; justify-items:center; align-content:start; gap:1px; position:relative; scroll-snap-align:none}
.rc small{order:1; font-size:11px; font-weight:500; letter-spacing:0; color:var(--daempet); line-height:1.2}
.rc b{order:2; font-size:14px; line-height:1.2; color:var(--tekst)}
.rc .stalk{order:3; height:30px; margin:2px 0; display:flex; align-items:flex-end; justify-content:center; gap:3px; width:100%}
.rc .sk{width:auto; flex:0 1 14px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; height:100%}
.rc .sk .bar{flex:1; display:flex; align-items:flex-end; justify-content:center; width:100%; min-height:0}
.rc .stalk i{width:12px; border-radius:4px 4px 1px 1px; min-height:4px; height:calc(var(--h, .1) * 100%)}
.rc .stalk i.rest{width:5px; height:5px; min-height:5px; border-radius:50%; background:var(--daempet-2)}
.rc .akt-ikon{width:11px; height:11px; color:var(--daempet)}
.rc em{order:4; font-style:normal; font-size:11px; font-weight:500; font-stretch:var(--bredde); color:var(--daempet); white-space:nowrap; line-height:1.2}
.rc .sk-flere{font-size:10px; color:var(--daempet)}
.rc.past{opacity:.62}
.rc.today small{color:var(--rav-tekst); font-weight:700}
.rc.today b{color:var(--rav-tekst)}
.rc.sel{background:rgba(255,255,255,.14) !important}
.rc.wk2{margin-left:0}
.rc.wk2::before{display:none}
.rc .grade{position:absolute; top:4px; right:4px}
.rail-note{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 0; padding:0}
.rail-note .legend, .rail-note .etape-legend{position:static; display:flex; gap:9px; margin:0; font-size:11px; background:none; padding:0}
.rail-info{font-size:12px; color:var(--daempet)}
.legend{color:var(--daempet)}

/* Dagen */
#plan-dage{margin-top:4px}
#plan-dage .dag.vis{border-top:1px solid; border-image:var(--streg) 1; padding-top:10px}
.loadblk{padding:6px 0 8px}
.maal-enheder{margin:12px 0 0; column-gap:18px; font-size:13px; color:var(--daempet)}
.maal-enheder b{font-size:15px; color:var(--tekst)}
.maal-enheder i{color:var(--daempet)}
.dag-detalje{color:var(--daempet); font-size:14px}
.instr li{color:var(--daempet); font-size:14px; border-color:var(--kant-svag)}
.instr li::before{color:var(--rav-tekst)}
.dag-tid-blok{margin:0; border:none}
.dag-tid{display:block; width:100%; padding:13px 2px 11px; margin:0; background:none; border:none; border-top:1px solid; border-image:var(--streg) 1}
.dag-tid-r1{display:flex; align-items:center; gap:12px}
.dag-tid-ur{flex:0 0 22px; color:var(--rav-tekst)}
.dag-tid-navn{flex:1; font-family:var(--skrift-tal); font-feature-settings:normal; font-weight:700; font-size:14px; color:var(--tekst); text-align:left}
.dag-tid-navn .tid-arv{font-family:var(--skrift); font-weight:400; color:var(--daempet)}
.dag-tid-r1 > b{font-size:13px; font-weight:600; font-family:var(--skrift); color:var(--daempet); white-space:nowrap}
.dag-tid-pil{color:var(--daempet-2)}
.dag-tid .tid-spor{display:block; height:3px; margin:8px 0 0 34px}
.styrke-tillaeg{border-left:none; padding:0; margin:0 0 10px}
.styrke-liste{font-size:14px}
.styrke-oevelse .n{color:var(--tekst)}
.styrke-oevelse .t{color:var(--daempet)}
.styrke-note, .styrke-udstyr-note{color:var(--daempet); font-size:13px}
.ekstra-tid.kompakt{margin:0; padding:0; border:none}
.selvrapport .sr-valg{display:grid; gap:8px; grid-template-columns:1fr}
.sr-k{display:block; width:100%; background:var(--kort-2); border:none; border-radius:14px; padding:13px 16px; text-align:left; color:var(--tekst); font-family:var(--skrift-tal); font-feature-settings:normal; font-weight:700; font-size:15px; min-height:0}
.sr-k .lille{display:block; font-family:var(--skrift); font-weight:400; font-size:13px; color:var(--daempet); margin-top:2px}

/* ══ ACTIVITIES ═════════════════════════════════════════════════════════════════ */
.road, #cockpit .road{height:auto; overflow:visible; background:none; margin:6px var(--rende) 0}
.road .sky{position:static; height:auto}
.road .sky::after{display:none}
.road .stagecap{position:static; left:auto; right:auto; bottom:auto; margin:6px 0 0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.road .cap, .pick b, .pick span{font-size:12px; color:var(--daempet)}
.pick b{color:var(--tekst); font-weight:600}
.akt-road .stagecap{left:auto; right:auto}
.g-uger{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:4px; height:118px; align-items:end}
.g-uge{appearance:none; background:none; border:none; padding:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; cursor:pointer; color:var(--daempet); min-width:0; position:relative}
.g-soejle{display:flex; flex-direction:column-reverse; gap:1px; height:calc((100% - 18px) * var(--h)); min-height:3px; border-radius:5px 5px 2px 2px; overflow:hidden; transform-origin:bottom; animation:g-op .45s var(--ud) both}
.g-uge.rest .g-soejle{background:var(--kant); height:3px; min-height:3px}
.g-soejle i{display:block; min-height:1px; flex-basis:0}
.g-uge small{height:14px; font-size:11px; line-height:14px; font-weight:500; text-align:center; white-space:nowrap; overflow:visible; letter-spacing:0; text-transform:capitalize}
.g-uge.nu small{color:var(--rav-tekst)}
.g-uge.valgt .g-soejle{outline:2px solid var(--tekst); outline-offset:1px}
.cockpit-akt.picked .g-uge:not(.valgt) .g-soejle{opacity:.45}
@keyframes g-op{from{transform:scaleY(.04)} to{transform:scaleY(1)}}
.g-dage{display:flex; align-items:flex-end; gap:4px; height:100%; min-height:90px}
.g-dag{flex:1; height:100%; display:flex; align-items:flex-end; min-width:0}
.g-dag.skel{margin-left:10px}
.g-dag i{display:block; width:100%; height:calc(var(--h) * 100%); min-height:4px; border-radius:5px 5px 2px 2px; transform-origin:bottom; animation:g-op .45s var(--ud) both}
.g-dag.rest i{height:4px; background:var(--kant-staerk) !important}
.g-dag:not(.gaaet):not(.nu) i{opacity:.75}
.g-dag.nu i{box-shadow:0 0 0 2px var(--tekst)}
@media (prefers-reduced-motion: reduce){ .g-soejle, .g-dag i{animation:none} }
.etape-scene{height:96px}
#plan-etape.etape-laast{display:block; height:auto; position:relative; cursor:pointer; margin:8px 0}
#plan-etape.etape-laast .g-dag i{opacity:.5}
.akt-seg, .se-som-toggle{background:var(--felt); border:none}
.akt-seg button.aktiv, .akt-seg button.on, .akt-seg button[aria-selected="true"]{color:var(--tekst); background:none}
.akt-seg .thumb{background:var(--kort-2); border:none; box-shadow:none}
.cockpit-akt .trend, .trend{background:none !important}

/* ══ WORKOUTS, CHIPS, FANER ═════════════════════════════════════════════════════ */
.bib-sport{border-bottom:none}
.bib-sport-k{color:var(--daempet); font-size:17px}
.bib-sport-k.aktiv{color:var(--tekst)}
.bib-sport-k.aktiv::after{height:3px; border-radius:2px; background:var(--rav)}
.bib-fokus-k, .chip{background:var(--kort); border:none; color:var(--tekst); font-weight:500; box-shadow:none; font-variant-numeric:normal; font-feature-settings:normal}
.bib-fokus-k.aktiv, .chip.on{background:var(--rav); color:var(--paa-rav); font-weight:600}
.bib-fokus-tekst{font-size:15px; color:var(--daempet); font-weight:400}
.fk-voice{font-size:17px}
.fk-lbl{color:var(--daempet)}
.fk-tick{color:var(--paa-rav)}
.fk-tick svg{stroke:var(--paa-rav) !important}
.brik{background:var(--kort); border:none; border-radius:16px; box-shadow:none; margin-bottom:0; transition:background .12s, transform .09s}
.brik:active{transform:scale(.98)}
.brik:has(.valg-felt:checked){background:var(--rav)}
.brik:has(.valg-felt:checked) .brik-navn, .brik:has(.valg-felt:checked) .brik-u, .brik:has(.valg-felt:checked) .brik-ikon{color:var(--paa-rav)}
.brik:has(.valg-felt:checked) .brik-tjek{background:var(--paa-rav); border-color:var(--paa-rav)}
.brik:has(.valg-felt:checked) .brik-tjek svg{stroke:var(--rav-tekst)}
.brik-navn{font-size:14px}

/* ══ ONBOARDINGEN: kun trinene ══════════════════════════════════════════════════ */
#v-tur, .tur-ark{background:var(--bg)}
.tur-ark-fod{background:var(--bg)}
.tur-ark-fod::before{background:linear-gradient(to top, var(--bg), transparent)}
.tur-ark-krop{justify-content:flex-start}
.tur-skinne{height:6px; border-radius:3px; background:var(--kant)}
.tur-skinne i{height:100%; border-radius:3px; background:var(--rav)}
.tur-ark-top .link{color:var(--daempet); font-weight:500}
.tur-side p{color:var(--daempet); font-size:15px; line-height:1.5}
.tur-under{color:var(--daempet)}
/* Mens et ark staar oppe, skjules appen bagved. */
body:has(#tur-ark:not([hidden])):has(#v-tur:not(.skjul)) #v-app{visibility:hidden}

/* ══ FORSIDEN OG BETALINGSVAEGGEN ═══════════════════════════════════════════════ */
.forside{background:none}
.forside-lys{display:none}
.forside-helt .graf{height:112px; margin:12px 0 8px}
.forside-helt .graf::after, .forside-helt .graf::before{display:none}
.forside-under{margin:6px 0 0; color:var(--daempet)}
.forside .knap.udbyder{background:var(--tekst); color:var(--paa-rav); box-shadow:0 var(--kant-hoejde) 0 var(--daempet-2)}
.forside .knap.udbyder:active{box-shadow:0 1px 0 var(--daempet-2)}
.mail-raekke input{background:var(--kort); border:none; border-radius:14px; min-height:50px; color:var(--tekst)}
.pw{background:var(--bg)}
.pw-plan{border:none; background:var(--kort); box-shadow:none}
.pw-gets span{color:var(--daempet)}
.pw-gets b{color:var(--tekst)}
.pw-p{color:var(--daempet)}
.pw-plan.on{background:var(--valgt-flade); box-shadow:inset 0 0 0 2px var(--rav)}
.pw-plan.on .radio{background:var(--rav); border-color:var(--rav)}
.pw-plan.on .radio::after{width:6px; height:11px; border-radius:0; background:none; border:solid var(--paa-rav); border-width:0 2.5px 2.5px 0; box-sizing:border-box; transform:translateY(-1px) rotate(45deg)}

/* ══ FEJRINGEN ═══════════════════════════════════════════════════════════════════ */
#v-fejr{position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden}
.fejr-konfetti{position:absolute; left:50%; top:46%}
.fejr-k{position:absolute; width:9px; height:15px; border-radius:2px; background:var(--rav); opacity:0; animation:fejr-fk 2.3s cubic-bezier(.16,.72,.3,1) var(--d) both}
.fejr-k.b{width:12px; height:8px}
.fejr-k.z2{background:var(--zone2)} .fejr-k.z3{background:var(--zone3)} .fejr-k.z4{background:var(--zone4)} .fejr-k.z5{background:var(--zone5)}
.fejr-k.z6{background:var(--zone6)} .fejr-k.z7{background:var(--zone7)} .fejr-k.styrke{background:var(--zone-styrke)}
@keyframes fejr-fk{0%{opacity:1; transform:translate(0,0) rotate(0) scale(.4)}
  32%{opacity:1; transform:translate(var(--x), var(--y)) rotate(calc(var(--r) * .5)) scale(1)}
  100%{opacity:0; transform:translate(calc(var(--x) * 1.15), calc(var(--y) + 92vh)) rotate(var(--r)) scale(1)}}

/* Ugens linje med en note: hele linjen aabner noten som et ark. */
.rh .fold-ark > .fa-raekke{display:block; border:none; padding:0; min-height:0}
.ul-info{display:inline-flex; vertical-align:-2px; margin-left:4px; color:var(--daempet-2)}
.ul-info svg{width:13px; height:13px}
.fa-ark .ul-note{font-size:14px; line-height:1.45; margin:0}

/* ══ RUNDE TO ═══════════════════════════════════════════════════════════════════ */
.fa-ark h3, .dag-krop > .ark-top h3, .ark h3, .ark h2{color:var(--tekst)}
.sr-valg .sr-k, .selvrapport .sr-valg .sr-k{background:var(--kort-2) !important; padding:13px 16px !important; border-radius:14px !important; border:none !important}
/* Et valg lyser ikke i fuld rav: rav er handlingen. Valgt = lys flade + rav flueben. */
.brik:has(.valg-felt:checked){background:var(--valgt-flade); box-shadow:inset 0 0 0 2px var(--rav)}
.brik:has(.valg-felt:checked) .brik-navn{color:var(--tekst)}
.brik:has(.valg-felt:checked) .brik-u{color:var(--daempet)}
.brik:has(.valg-felt:checked) .brik-ikon{color:var(--rav-tekst)}
.brik:has(.valg-felt:checked) .brik-tjek{background:var(--rav); border-color:var(--rav)}
.brik:has(.valg-felt:checked) .brik-tjek svg{stroke:var(--paa-rav)}
.fk-tick{background:var(--z2)}
/* You: navnet staar alene; avataren er allerede i headeren. */
.cockpit-mig .wkg, .wkg{background:none !important; border:none !important; box-shadow:none !important}

/* Skrift-tjekket (alle faner og ark): det, der stadig stod i den gamle stil. Knapper arver
   ikke skrift af sig selv. */
.ov-raekke, .g-uge, .us-dag{font-family:var(--skrift)}
.uge-navn, .lspor-tal, .pd-dag b, .hvor-titel, .pd-tid, .ark h4, .avatar, .header-avatar, .fase-navn, .valg-t,
.dag.akt .pd-navn, .streak .t b, .ark-punkt b, .indbakke-titel, .ib-titel, .own b, .fk-t, .enh-navn, .bib-navn, .g-uge small{
  font-family:var(--skrift-tal); font-feature-settings:normal; font-variant-numeric:normal; font-stretch:var(--bredde); font-weight:700; letter-spacing:-.005em}
.g-uge small{font-family:var(--skrift); font-weight:500; font-stretch:100%; letter-spacing:0}
.uge-navn{font-size:17px}
.nat-dag{font-size:11px}
.ring-midt small, .goal .ring-midt small{font-size:11px}
/* Ventetilstanden: ingen pulserende stribe, kun et daempet tal */
.kdial.venter::after{display:none !important}
.kdial.venter .v b{color:var(--daempet); font-weight:700; font-size:clamp(18px, 5.4vw, 22px) !important}
.dials.n3 .kdial.venter .v b{font-size:clamp(18px, 5.4vw, 22px)}
/* Activities: rene raekker */
.dayview .dag{background:none; border:none; box-shadow:none !important}
.dag.akt{border:none !important; border-radius:0 !important; background:none !important; border-top:1px solid !important; border-image:var(--streg) 1 !important; padding:2px 0}
.dag.akt .pdag{padding-left:0; padding-right:0}
.pd-sport, .pd-sport.maalt{background:none !important; border:none !important; box-shadow:none !important; width:26px; height:26px}
.pd-sport svg{width:20px; height:20px}
.akt-art .maerke, .akt-art .maerke.art{background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; min-height:0; font-size:13px; font-weight:600}
.akt-art .maerke::before{box-shadow:none}
.dag.akt .pd-navn{font-size:15px}
.dag.akt .pd-tid{color:var(--tekst)}
/* Onboarding */

/* Kalenderen med flere sportsgrene: ikonet maa ikke aede soejlen. */
.rail-in .rc .stalk{height:39px; padding:2px 0 0}
/* Ikonet centreret under sin soejle: .akt-ikon har 6 px margin til hoejre, som hoerer til tekstlinjer. */
.rail-in .rc .sk .akt-ikon{margin:0}
/* You: navnet staar alene, avataren er allerede i headeren. */
.rider{grid-template-columns:minmax(0,1fr)}
.rider .avatar{display:none}
/* Mindre luft mellem talblokkene: uden bokse behoeves ingen polstring. */
.dials{gap:10px}
.dials .kdial, #akt-dials .kdial, .cockpit-mig .kdial{padding:4px 0 !important}
.cockpit-mig .cockpit-in{gap:8px}
.cockpit-akt .cockpit-in.low{padding:8px var(--rende) 8px; gap:8px}
.cockpit-akt .trend, .cockpit-akt .streak{padding-left:0; padding-right:0}
.dag-skift.pd-skift{background:var(--kort-2) !important; border:none !important; color:var(--rav-tekst)}

/* Free: stilladset maa ikke kunne laeses gennem teksten ovenover. */
.pro-laas-indhold{filter:blur(5px) saturate(.6); opacity:.14}
.pro-laas-punkter li{background:var(--kort) !important; color:var(--tekst) !important; border:none !important}
.pro-pille{background:var(--rav) !important; color:var(--paa-rav) !important; border:none !important; font-family:var(--skrift-tal); font-feature-settings:normal; font-stretch:var(--bredde); font-weight:750; border-radius:14px !important; min-height:48px; box-shadow:0 var(--kant-hoejde) 0 var(--rav-kant)}
.pro-pille svg{color:var(--paa-rav); stroke:var(--paa-rav)}
.laas-boks{background:none !important; border:none !important}

/* De offentlige sider */
.side{background:none}
.side h1, .side h2, .side h3{font-family:var(--skrift-tal); font-feature-settings:normal; font-stretch:var(--bredde); font-weight:750; letter-spacing:-.005em}
.side h1{font-weight:800; font-size:clamp(28px, 8vw, 38px); line-height:1.08}
.side .side-nav button, .side .side-nav a{font-weight:500}

/* Sygdoms-kortet staar paa grunden som alt andet. */
.selvrapport.sr-dag{background:none !important; border:none !important; padding:6px 0 !important; box-shadow:none !important}

/* Skillelinjer er lige: en rund kasse med kun en topkant tegnede en krum stribe. */
.dag + .dag > .pdag{border-top:none}
.dag-valg{border-radius:0}
.dag-valg:active{border-radius:12px}
.ark .knap.sekundaer{min-height:42px}

/* Et ark maa aldrig ligge under en forfaelder med opacity/filter/overflow: det ville fange
   det som et lag, og arket blev gennemsigtigt, klippet og laa under menuerne. Daempningen
   af en gaaet, misset eller pauset dag sidder derfor paa det, der staar i dagen, ikke paa dagen. */
.dayview .dag{overflow:visible}
.dayview .dag.fortid{opacity:1}
.dayview .dag.fortid > summary{opacity:.62}
#dagskort.pauset > .dag{opacity:1; filter:none}
#dagskort.pauset > .dag > summary{opacity:.45; filter:saturate(.25)}
.dag.misset > .dag-krop, .dag.misset > .fa-slor{opacity:1 !important; filter:none !important}
.dag.misset > .dag-krop > :not(.fold-ark):not(.ikke-gennemfoert):not(.dag-tid-blok):not(.ark-top):not(.ark-greb){opacity:.45; filter:grayscale(.9)}
/* Proeveperiodens etiket bliver staaende: en header, der skifter hoejde ved rul, kan flimre. */
.app-top.kompakt .header-fold{grid-template-rows:1fr; opacity:1}

/* ══ KORTENE (3/11 2026) ═════════════════════════════════════════════════════════
   Faa, store, helt daekkende kort med hoej kontrast mod grunden, ikke kant- eller
   glaskort. Hvid = det, man skal goere. Moerk = ugen og tallene. Variablerne skiftes
   inde i et moerkt kort, saa alt indhold virker uden egne regler. */
#idag-uge, .ov-raekke, .rail, .akt-road, .ugev, .cockpit-mig .cockpit-in, .maal-kort, .tur-live, .tk-kort, .ref-helt{
  --tekst:#FFFFFF; --daempet:rgba(255,255,255,.76); --daempet-2:rgba(255,255,255,.58);
  --kant:rgba(255,255,255,.14); --kant-svag:rgba(255,255,255,.08); --kant-staerk:rgba(255,255,255,.28);
  --kort:var(--ink-2); --kort-2:var(--ink-3); --felt:var(--ink-2); --bg:var(--ink); --rav-tekst:var(--rav);
  --streg:linear-gradient(90deg, transparent, rgba(255,255,255,.18) 12%, rgba(255,255,255,.18) 88%, transparent);
  --z1:#9BBBDD; --z2:#34DEB2; --z3:#FFD24A; --z4:#FF9745; --z5:#FF6470; --top:#6BFFD0;
  --zt1:var(--zone1); --zt2:var(--zone2); --zt3:var(--zone3); --zt4:var(--zone4); --zt5:var(--zone5); --zt6:var(--zone6); --zt7:var(--zone7); --gul-tekst:var(--gul);
}
#idag-uge, .ov-raekke, .rail, .akt-road, .ugev, .cockpit-mig .cockpit-in, .maal-kort, .tur-live, .tk-kort, .ref-helt{background:var(--ink); color:#fff; box-shadow:0 18px 32px -16px var(--skygge)}
#dagskort, #plan-dage .dag.vis, .cockpit-akt .cockpit-in.low, .grp, .fk-kilder, .bib-r, .dag.akt{background:#fff !important; --bg:#fff}
#dagskort, #plan-dage .dag.vis, .cockpit-akt .cockpit-in.low, .grp, .fk-kilder, .bib-r{border-radius:24px; box-shadow:0 18px 32px -18px var(--skygge), 0 1px 2px rgba(23,35,58,.05)}
/* Inde i et hvidt kort er knappernes flade lysere end paa grunden. */
#dagskort, #plan-dage .dag.vis, .cockpit-akt .cockpit-in.low, .grp, .fk-kilder, .bib-r, .dag.akt{--kort-2:#FFF3DC}
/* Inde i et hvidt kort er "kortet" den lysegraa flade */
#dagskort, #plan-dage .dag.vis, .grp, .fk-kilder{--kort:var(--kort-2)}
/* Ark er hvide uanset hvor de staar i DOM'en */
.fa-ark, .dag-krop{--bg:#fff; --kort:#fff}
nav:not(.side-nav){--nav-aktiv:#C85F00; --rav-tekst:#C85F00; --kort:#fff; --bg:#fff}
nav:not(.side-nav)::after{background:#fff; box-shadow:0 -1px 0 var(--kant-svag)}
nav:not(.side-nav) button{color:var(--daempet)}

/* Today: dom og krop paa grunden, saa passet, saa ugen og tallene som ét kort */
#idag-indhold{display:flex; flex-direction:column; padding-bottom:12px}
#idag-cockpit{order:1} #dagskort{order:2} #idag-uge{order:3} #idag-efter{order:4} #idag-naeste{order:5}
.morgen-dom{font-weight:600}
.morgen .ring .ring-bue{stroke:var(--tekst)}
.morgen .ring .ring-skinne{stroke:var(--felt); opacity:1}
.kdial .spor{background:var(--kant-staerk)}
#dagskort{margin:12px 0 0 !important; padding:14px 14px 4px}
#idag-uge{margin:12px 0 0; padding:14px 16px 4px; border:none; border-radius:24px 24px 0 0}
#idag-efter{margin:0 0 12px}
.ov-raekke{position:relative; border:none !important; border-image:none !important; border-radius:0 0 24px 24px; padding:10px 16px 14px}
.ov-raekke::before{content:''; position:absolute; left:16px; right:16px; top:0; height:1px; background:var(--kant)}
.ov-c b{font-size:19px}
.uge-kort-top{grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px}
.uge-kort-top b{font-family:var(--skrift-tal); font-weight:800; font-stretch:var(--bredde); font-size:18px}
.uge-kort-top span{font-family:var(--skrift-tal); font-weight:700; font-stretch:var(--bredde); font-size:15px; white-space:nowrap}
.uge-kort-top small{font-size:12px; font-weight:600; color:var(--daempet)}
.uge-kort-top + .ul-bar{grid-column:1 / -1; height:9px; border-radius:5px; margin:0 0 8px}
.us-s{height:40px}
.us-s i{width:min(36px, 82%); height:calc(var(--h) * 40px); min-height:12px; border-radius:7px}
.us-dag:not(.us-k) .us-s i{background:transparent; box-shadow:inset 0 0 0 2px var(--c)}
.us-dag.us-k .us-s i, .us-dag.us-nu:not(.us-k):not(.us-h) .us-s i{background:var(--c); box-shadow:none}
.us-dag.us-nu small{color:var(--rav)}
.us-dag.us-h .us-s i, .us-dag.us-h:not(.us-k) .us-s i{width:8px; height:8px; min-height:8px; background:rgba(255,255,255,.45); border-radius:50%; box-shadow:none}
.us-dag small{font-size:13px; font-weight:700; color:rgba(255,255,255,.86)}

/* Passets kort, paa Today og Plan: brik + navn, grafen i fuld bredde, saa knapperne */
#dagskort .pdag, #plan-dage .dag.vis > .pdag{padding:0; display:grid; grid-template-columns:58px minmax(0,1fr); column-gap:12px; align-items:start}
#dagskort .pd-dag, #plan-dage .dag.vis .pd-dag{grid-column:1; grid-row:1; width:58px; height:58px; border-radius:16px; background:var(--ink); color:var(--rav) !important; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:600; line-height:1.1; margin:0}
#dagskort .pd-dag b, #plan-dage .dag.vis .pd-dag b{color:#fff !important; font-size:22px; font-family:var(--skrift-tal); font-weight:800; font-stretch:var(--bredde)}
#dagskort .pd-midt, #plan-dage .dag.vis .pd-midt{grid-column:2; grid-row:1; min-width:0}
#dagskort .pd-navn, #plan-dage .dag.vis .pd-navn{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; font-size:23px; font-weight:800; line-height:1.12}
#dagskort .pd-navn .akt-ikon, #plan-dage .dag.vis .pd-navn .akt-ikon, #dagskort .pd-navn > svg, #plan-dage .dag.vis .pd-navn > svg{display:none}
#dagskort .pd-navn-t, #plan-dage .dag.vis .pd-navn-t{flex:1 0 100%}
#dagskort .pd-min, #plan-dage .dag.vis .pd-min{margin:0; padding:0; font-weight:600}
#dagskort .pd-midt .segs, #plan-dage .dag.vis .pd-midt .segs{margin:14px 0 0 -70px; width:calc(100% + 70px)}
#dagskort .pd-skift-tom, #plan-dage .dag.vis .pd-skift-tom{display:none}
#dagskort .pd-handlinger, #plan-dage .dag.vis .pd-handlinger{grid-column:1 / -1; margin-top:14px}

/* Plan */
.goal-hint{display:none}
#cockpit .cockpit-in{padding-bottom:0}
.rail{margin:12px 0 0 !important; padding:14px 12px 8px !important; border-radius:24px}
.rh{margin:12px 2px 6px !important}
.rh:first-child{margin-top:0 !important}
.ul-tal2 small{display:none}
.rc em{font-size:11px; font-weight:600; line-height:13px; height:13px}
.rc .stalk{margin:0; height:30px}
.rc .stalk i{min-height:10px}
#idag-uge .ul-bar, .rail .ul-bar{background:rgba(255,255,255,.14); overflow:visible}
#idag-uge .ul-gjort, .rail .ul-gjort{background:var(--rav); opacity:1; border:none; box-shadow:none; border-radius:6px}
#idag-uge .ul-plan, .rail .ul-plan{background:#4C5F82; border:none; opacity:1; box-shadow:none; border-radius:0 6px 6px 0}
#idag-uge .ul-baand, .rail .ul-baand, .rail-head .l2 .ulbar .ul-baand{top:0; bottom:0; background:transparent; border:none; box-shadow:inset 0 0 0 1.5px var(--rav); border-radius:6px; opacity:1}
#idag-uge .ul-baand::before, #idag-uge .ul-baand::after, .rail .ul-baand::before, .rail .ul-baand::after{display:none}
#plan-dage .dag.vis .pd-skift{grid-column:2; grid-row:1; justify-self:end; align-self:start; margin:0}
.rc small{font-size:12px}
.rail-note{margin:8px 2px 0}
.rail #tid-aabn{min-height:40px; margin-top:2px}
#plan-dage{margin-top:12px}
#plan-dage .dag.vis{border:none; border-image:none; padding:14px}

/* Activities */
.cockpit-akt .lbl span, .akt-vink{display:none}
.akt-road, #cockpit .akt-road{margin:12px var(--rende) 0; padding:14px; border-radius:24px}
.akt-seg{background:var(--felt)}
.akt-seg .thumb{background:#fff; box-shadow:0 2px 6px var(--kant)}
.akt-seg button, .akt-seg button.aktiv, .akt-seg button.on, .akt-seg button[aria-selected="true"]{color:var(--tekst)}
.cockpit-akt .cockpit-in.low{margin:12px var(--rende) 0; padding:14px 16px; gap:10px}
.cockpit-akt .trend, .cockpit-akt .streak{border-top:1px solid var(--kant-svag); padding-top:12px}
.cockpit-akt .trend .ic, .cockpit-akt .streak .ic{display:none}
.cockpit-akt .trend{grid-template-columns:auto minmax(0,1fr)}
.cockpit-akt .streak{display:block}
.cockpit-akt .streak .sc{width:100%}
.maaned-skel{margin:18px 2px 8px; border:none}
.dag.akt{border-top:1px solid var(--kant-svag) !important; border-image:none !important; padding:2px 14px}
.maaned-skel + .dag.akt{border-top:none !important; border-radius:20px 20px 0 0 !important}
.dag.akt:has(+ .maaned-skel), .dag.akt:last-child{border-radius:0 0 20px 20px !important}
.maaned-skel + .dag.akt:has(+ .maaned-skel), .maaned-skel + .dag.akt:last-child{border-radius:20px !important}
.lspor-info{font-size:0}

/* Workouts, You, Connections */
.cockpit-mig .cockpit-in{margin:0 var(--rende); padding:16px; border-radius:24px}
.cockpit-mig .lbl span{display:none}
.bib-r{padding:14px; margin-bottom:12px; border:none}
.grp{padding:16px; margin:12px 0; border:none}
.fk-kilder{padding:16px; border:none}

/* Et lukket ark maa aldrig kunne ses: det lukkede ark glider ellers et halvt sekund over
   skaermen, hver gang fanen vises (fanen gaar fra display:none, og procenten i transform
   regnes om). Paa den moerke grund var det usynligt, paa den lyse er det et blink. */
.ark:not(.vis){visibility:hidden; transition:transform .38s var(--fjeder), visibility 0s linear .38s}
.ark.vis{visibility:visible}
/* "Know you'll train longer?" er en flade i arket, og linkene skal kunne laeses paa den. */
.ekstra-tid{background:var(--kort-2); border:none}
.ekstra-tid .et-rk.hvil .tid-pille, .ekstra-tid .et-rk.aaben .tid-pille{color:var(--rav-tekst)}
/* Lys grund: login-knapperne er hvide kort, og de offentlige siders menu skal kunne laeses. */
.forside .knap.udbyder{background:#fff; color:var(--tekst); box-shadow:0 var(--kant-hoejde) 0 var(--kant-staerk)}
.forside .knap.udbyder:active{box-shadow:0 1px 0 var(--kant-staerk)}

/* Kroppens tal paa Today (3/11 2026): et farvet glas med ikonet i, tallet stort ved siden af.
   Ordene Sleep/HRV/Resting HR bliver staaende for skaermlaesere. Soevn faar mest bredde: den
   baerer ogsaa "of 7h 10m". Farven er maalingens egen, ikke godt/daarligt. */
#idag-krop{grid-template-columns:1.42fr 1fr 1fr; gap:12px}
#idag-krop .m-soevn{--m:var(--zone2)} #idag-krop .m-hrv{--m:var(--zone3)} #idag-krop .m-puls{--m:var(--zone6)}
#idag-krop .kdial, #v-app #idag-cockpit #idag-krop .kdial{display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-rows:auto auto; align-content:center; align-items:center; column-gap:5px; row-gap:1px; padding:0 !important; min-width:0}
#idag-krop .kdial > .kring{grid-column:1; grid-row:1 / 3; width:36px; height:36px; margin:0; position:static; display:block}
#idag-krop .kring svg{width:36px; height:36px; display:block; overflow:visible}
.kg-flade{fill:#fff}
.kg-niveau{fill:var(--m); animation:kg-op .7s var(--ud) both}
.kg-kant{fill:none; stroke:var(--m); stroke-width:3}
.kg-streg{stroke:var(--ink); stroke-width:2.4; stroke-linecap:round}
@keyframes kg-op{from{transform:translateY(20px)}}
@media (prefers-reduced-motion: reduce){ .kg-niveau{animation:none} }
#idag-krop .kdial .hd2{grid-column:1; grid-row:1 / 3; justify-self:center; font-size:0; gap:0; overflow:visible; color:var(--tekst); position:relative}
#idag-krop .kdial .hd2 svg{width:15px; height:15px; color:var(--tekst)}
#idag-krop .kdial .hd2 svg, #idag-krop .kdial .hd2 path, #idag-krop .kdial .hd2 circle{stroke:var(--tekst)}
#idag-krop .kdial .v{grid-column:2; grid-row:1; flex-wrap:wrap; align-items:baseline; gap:0 3px; min-width:0; white-space:nowrap}
#idag-krop .kdial .v b{font-size:21px; font-weight:800; line-height:1.1}
#idag-krop .kdial .v small{font-size:11px; font-weight:600}
#idag-krop .kdial .v .of{flex:1 0 100%; font-size:11.5px; line-height:1.25}
#idag-krop .kdial .nat-dag{border:none; padding:0; background:none; font-size:11px; margin-left:2px}
#idag-krop .kdial .cap{grid-column:2; grid-row:2; font-size:11.5px; line-height:1.25; white-space:normal}
#idag-krop .kdial .cap-nb, #idag-krop .kdial .cap b{white-space:nowrap}
#idag-krop .kdial-pil{display:none}
#idag-krop .kdial.venter .kring, #idag-krop .kdial.venter .hd2{filter:saturate(0); opacity:.6}
#idag-krop .kdial.venter .cap{font-size:11px}
@media (max-width:359px){ #idag-krop{gap:10px} #idag-krop .kdial, #v-app #idag-cockpit #idag-krop .kdial{grid-template-columns:minmax(0,1fr)} #idag-krop .kdial .hd2, #idag-krop .kdial > .kring{display:none} #idag-krop .kdial .v, #idag-krop .kdial .cap{grid-column:1} #idag-krop .kdial .v b{font-size:18px} #idag-krop .kdial .cap{white-space:normal} }
#idag-cockpit .cockpit-in, #v-app #idag-cockpit .cockpit-in{gap:10px}
.spor-note{margin-top:6px}

/* ══ LUFT (3/11 2026, brugeren: "ikke saa komprimeret ... se luften i Zwift") ══════════════
   Today strammet samme dag (brugeren: "kan ikke se det hele uden at scrolle"): dommen, kroppen,
   passet, ugen og tallene skal staa paa én skaerm paa hans iPhone (402x874), ogsaa med fire
   linjers dom og noten om gamle maalinger. Tallenes undertekst bor i arket #ark-dagstal. */
.cockpit-idag .cockpit-in, #v-app #idag-cockpit .cockpit-in{padding:6px var(--rende) 0; gap:10px}
.morgen .ring, #v-app #idag-cockpit .morgen .ring{width:76px; height:76px; flex:0 0 76px}
.morgen .ring-midt small{font-size:10.5px}
.morgen-dom{margin-top:6px; line-height:1.3}
#dagskort{margin:12px 0 0 !important; padding:14px 18px 2px}
#dagskort .pd-midt .segs{margin-top:16px; margin-left:-72px; width:calc(100% + 72px)}
#dagskort .segs:not(.kompakt){height:48px}
#dagskort .pdag{column-gap:14px}
#dagskort .pd-handlinger{margin-top:12px}
#idag-uge{margin:10px 0 0; padding:14px 18px 8px; border-radius:24px}
.uge-kort-top{margin-bottom:8px}
.uge-kort-top + .ul-bar{height:10px; border-radius:6px; margin-bottom:10px}
.us-s{height:52px}
.us-s i{width:min(28px, 70%); height:calc(16px + var(--h) * 36px); border-radius:7px}
#idag-efter{margin:16px 0 0}
/* Passer Today paa skaermen, maa siden heller ikke kunne rulles (brugeren: "fjollet"): bunden er kun bundbjaelken + 6 px. */
main:has(> #s-idag:not(.skjul)){padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--browser-bund) + 6px)}
main:has(> #s-idag:not(.skjul)) #idag-indhold{padding-bottom:0}
html:has(#s-idag:not(.skjul)){overscroll-behavior-y:none}
html.idag-passer, html.idag-passer body{overflow:hidden}
.ov-raekke{border-radius:24px; padding:10px 18px 12px}
.ov-raekke::before{display:none}
/* Samme afstand paa de andre faner */
.rail{margin-top:16px !important; padding:18px 14px 10px !important}
#plan-dage{margin-top:16px}
#plan-dage .dag.vis{padding:18px}
.akt-road, #cockpit .akt-road{margin-top:16px; padding:18px 16px}
.cockpit-akt .cockpit-in.low{margin-top:16px; padding:18px; gap:14px}
.bib-r{padding:18px; margin-bottom:16px}
.grp{padding:18px; margin:16px 0}
.fk-kilder{padding:18px}
.cockpit-mig .cockpit-in{padding:20px 18px 12px}

/* ── GENNEMGANGEN 3/11 2026 ──────────────────────────────────── */
/* Uden plan (Free) er ugekortet tomt: ingen tom moerk bjaelke. */
#idag-uge:empty{display:none}

/* Hviledagen paa Today: invitationen er en hel raekke under teksten, ikke en 58 px-celle. */
/* Plans dag: teksten maa ikke loebe ind under knappen oeverst til hoejre. */
#plan-dage .dag.vis .pdag:has(.pd-skift) .pd-navn, #plan-dage .dag.vis .pdag:has(.pd-skift) .pd-under{padding-right:46px; box-sizing:border-box}

/* Free paa Plan: indholdet staar oeverst i kortet, saa knappen ses uden at rulle. */
.pro-laas-plan .pro-laas-overlay{justify-content:flex-start; padding-top:22px}
#plan-dage .dag.vis .pd-hvile, #plan-dage .dag.vis .pd-rest{margin-bottom:8px}

/* Prisplanerne i onboarding: fuld bredde uanset antal; valgt = hvid flade, rav kant og flueben. */

/* Zonens ord paa lys grund: prikken beholder fyldfarven, teksten faar den moerke. */
.art-z1{--art-tekst:var(--zt1)} .art-z2{--art-tekst:var(--zt2)} .art-z3{--art-tekst:var(--zt3)} .art-z4{--art-tekst:var(--zt4)}
.art-z5{--art-tekst:var(--zt5)} .art-z6{--art-tekst:var(--zt6)} .art-z7{--art-tekst:var(--zt7)}
.maerke.art, .pd-sport.maalt, .akt-plan b{color:var(--art-tekst)}
.maerke.art.art-spoegelse{color:var(--daempet)}
.art-afveg .maerke small{opacity:.9}
.besked.advarsel{--besked-farve:var(--gul-tekst)}

/* ── ONBOARDINGENS FORBINDELSER 3/11 2026 ──────────────────────── */
/* Logoerne er appernes rigtige ikoner og fylder fladen, ogsaa paa vejen og i kortene. */
.tur-fg-dev{padding:12px 6px 11px}
.tur-fg-dev .tur-fg-lg{width:64px; height:64px; border-radius:16px; background:none}
.tur-fg-dev .tur-fg-lg img{width:100%; height:100%; object-fit:cover; border-radius:16px}
.tur-fg-dev .tur-fg-lg.tur-fg-ic{background:var(--kort-2)}
.tur-fg-dev .tur-fg-lg.tur-fg-ic svg{width:30px; height:30px}
.tur-fg-disc.tur-fg-dsrc{min-height:60px; height:auto; padding:6px 8px}
.tur-fg-stack img, .tur-fg-stack .tur-fg-ic, .tur-fg-stack .tur-fg-mere{width:44px; height:44px; border-radius:12px; padding:0; object-fit:cover}
.tur-fg-stack>*+*{margin-left:-14px}
.tur-fg-dkh{grid-template-columns:44px minmax(0,1fr) auto}
.tur-fg-dkh img, .tur-fg-dkh .tur-fg-ic{width:44px; height:44px; border-radius:12px; padding:0; object-fit:cover}
.tur-fg-wsum img{border-radius:10px; object-fit:cover}
.fk-logos img{height:36px; width:36px; max-width:none; padding:0; border-radius:10px; object-fit:cover}
/* Uden en enhed via intervals.icu staar den ikke paa vejen. */
.tur-fg-road.tur-fg-uden-icu .tur-fg-ndicu, .tur-fg-road.tur-fg-uden-icu #tur-fg-wa{display:none}
.tur-fg-road.tur-fg-uden-icu .tur-fg-nodes, #tur-fg-dirvej{grid-template-columns:auto minmax(24px, 1fr) auto}
#tur-fg-dirvej[hidden]{display:none}
#tur-fg-dirvej{padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid var(--kant-svag)}
.tur-side ol.tur-fg-dtrin{margin:10px 0 0; padding:0 0 0 20px; display:grid; gap:8px; font-size:14px; line-height:1.45; color:var(--daempet)}
.tur-fg-dtrin b{color:var(--tekst)}

/* ── UGENS TID I ONBOARDING 3/11 2026: soejler, der traekkes ─────── */
.ugev{--ugev-h:clamp(110px, calc(100vh - 525px), 300px); --ugev-h:clamp(110px, calc(100dvh - 525px), 300px); border-radius:24px; padding:12px 10px 12px; margin-top:12px; font-family:var(--skrift)}
.ugev-top{display:grid; grid-template-columns:48px minmax(0, 1fr) 48px; align-items:center; gap:8px; padding:0 4px 10px}
.ugev-knap{appearance:none; border:0; width:48px; height:48px; border-radius:50%; background:var(--ink-3); color:#fff; font:600 26px/1 var(--skrift); touch-action:manipulation; transition:background .12s}
.ugev-knap:active{background:var(--rav); color:var(--paa-rav)}
.ugev-knap:disabled{opacity:.35}
.ugev-laes{text-align:center; line-height:1}
.ugev-laes small{display:block; font-size:13px; font-weight:600; color:var(--daempet); margin-bottom:4px}
.ugev-laes b{display:block; font-family:var(--skrift-tal); font-stretch:var(--bredde); font-size:38px; font-weight:800; color:var(--rav); font-variant-numeric:tabular-nums}
.ugev-laes b.hvil{color:var(--daempet)}
.ugev-sojler{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px}
.ugev-s{min-width:0; display:grid; grid-template-rows:20px var(--ugev-h) 22px; justify-items:center; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:ns-resize; border-radius:14px; outline:none}
.ugev-s:focus-visible{box-shadow:0 0 0 2px var(--rav)}
.ugev-v{align-self:center; white-space:nowrap; font-family:var(--skrift-tal); font-stretch:var(--bredde); font-weight:800; font-size:clamp(10.5px, 3.2vw, 13px); color:#fff}
.ugev-s.hvil .ugev-v{font-family:var(--skrift); font-weight:600; font-size:clamp(10px, 3vw, 12px); color:var(--daempet-2)}
.ugev-bane{position:relative; display:flex; align-items:flex-end; justify-content:center; width:min(36px, 88%); height:100%; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.07)
  ; background-image:repeating-linear-gradient(to top, transparent 0, transparent calc(var(--ugev-h) / 7 - 1px), rgba(255,255,255,.1) calc(var(--ugev-h) / 7 - 1px), rgba(255,255,255,.1) calc(var(--ugev-h) / 7))}
.ugev-bane i{display:block; width:100%; height:calc(var(--a) * 100%); min-height:12px; border-radius:12px; background:linear-gradient(180deg, #FFC65C, var(--rav)); opacity:.9; transition:height .1s ease-out}
.ugev-s.hvil .ugev-bane i{width:8px; height:8px; min-height:8px; margin-bottom:12px; border-radius:50%; background:var(--kant-staerk); opacity:1}
.ugev-s small{align-self:end; font-size:13px; font-weight:700; color:var(--daempet)}
.ugev-s.aktiv .ugev-bane{background-color:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1.5px rgba(255,178,36,.55)}
.ugev-s.aktiv .ugev-bane i{opacity:1; box-shadow:0 0 18px -3px rgba(255,178,36,.8)}
.ugev-s.aktiv .ugev-v, .ugev-s.aktiv small{color:var(--rav)}
.ugev-s.traek .ugev-bane i{transition:none}
.ugev-sum{display:flex; justify-content:space-between; align-items:baseline; padding:10px 6px 0; font-size:13px; color:var(--daempet)}
.ugev-sum b{font-family:var(--skrift-tal); font-stretch:var(--bredde); font-size:16px; font-weight:800; color:#fff}
@media (max-height:620px){ .tur-side[data-tur="uge"] .tur-traed > p{display:none} }

/* Soejlerne i Plans tidsark: ét saet ad gangen, saa arket ikke skal rulles. */
#ark-tid .ugev{--ugev-h:clamp(110px, calc(100vh - 590px), 280px); --ugev-h:clamp(110px, calc(100dvh - 590px), 280px); margin-top:8px}
#ark-tid .uger{margin-top:6px}
#ark-tid .uge-linje{margin:8px 2px 0; font-size:12px}
.ugev-s.laast{cursor:default}
.ugev-s.laast .ugev-bane i{background:var(--kant-staerk); opacity:1; box-shadow:none}
.ugev-s.laast .ugev-v, .ugev-s.laast small{color:var(--daempet-2)}
.ugev-s small{display:flex; align-items:center; gap:2px}
.ugev-ik{display:inline-flex; width:13px; height:13px; overflow:hidden}
.ugev-ik svg{width:13px; height:13px}
.tid-dagrk.tid-sport-rk{border:none; padding:0; margin:8px 0 0}
.tid-sport-rk .tid-sport{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px; padding:3px; background:var(--felt); border-radius:14px}
@media (max-height:720px){ #ark-tid .ark-intro{display:none} #ark-tid .ugev{--ugev-h:150px} }

/* ── CREMEN 3/11 2026 ─────────────────────────────────────────── */
/* Forma.css siger color-scheme:dark: indfoedte felter og datovaelgere skal foelge den lyse grund. */
:root{color-scheme:light}
/* Et ark kan bo inde i et navy kort (".rail > .rh > .fold-ark"), men er altid hvidt: de lyse
   variabler skal tilbage, ellers staar teksten hvid paa hvid. */
.fa-ark, .ark{
  --tekst:#17233A; --daempet:rgba(23,35,58,.76); --daempet-2:rgba(23,35,58,.6);
  --kant:rgba(23,35,58,.14); --kant-svag:rgba(23,35,58,.08); --kant-staerk:rgba(23,35,58,.26);
  --kort:#fff; --kort-2:#FFF3DC; --felt:#FFE9C4; --bg:#fff;
  --streg:linear-gradient(90deg, transparent, rgba(23,35,58,.18) 12%, rgba(23,35,58,.18) 88%, transparent);
  --z1:#6F97C4; --z2:#0B9C75; --z3:#C48F00; --z4:#DD6A14; --z5:#DB3448; --top:#0B9C75;
  --zt1:#2F6FA8; --zt2:#0A6DBF; --zt3:#087A5A; --zt4:#876800; --zt5:#B4500A; --zt6:#C4203F; --zt7:#7440D0;
  --gul-tekst:#946000; --rav-tekst:var(--rav-dyb);
  color:var(--daempet)}
/* Teksten er centreret og brydes: prikken stod alene ude i venstre kant. */
/* Alle pop-ups er hvide (brugerens ord 3/11 2026): ark, onboardingens lag og bekraeftelser, kvitteringen. */
.tur-lag, .tur-bekraeft-ark{background:var(--ark-flade); border:none; box-shadow:0 -14px 40px var(--skygge)}
.gem-bjaelke .bar{background:var(--ark-flade); box-shadow:0 10px 26px -10px var(--skygge)}
.toast{background:var(--ark-flade); color:var(--tekst); box-shadow:0 10px 26px -8px var(--skygge)}
.toast-fortryd{color:var(--rav-tekst)}


/* Lave skaerme (320x568): knappen paa startkortene skal ses uden at rulle, og punkterne er det, der kan undvaeres. */
@media (max-height:620px){ .start-punkter, .laas-boks .laas-proeve, .pro-laas-plan .pro-laas-tekst, .pro-laas-plan .pro-laas-ikon{display:none} }

/* Free paa Today ved 320 px: gitterets spor voksede med indholdet, og teksten loeb ud over kortet. */
.laas-boks{grid-template-columns:minmax(0, 1fr)}

/* ── KOERT DAG (3/11, planDagBlok: `faerdig`) ─────────────────────────────────────
   Det koerte, Load og vurderingen; planen bag én raekke. Skalaen er ét samlet spor, der
   fyldes op til det valgte tal, ikke ti smaa knapper. */
.koert-art{margin:0 0 14px; font-size:15px; line-height:1.35; color:var(--tekst)}
.koert-art b{font-weight:700; color:var(--art-tekst)}
.lspor-forskel{background:none; border:none; padding:0; font-size:13px; font-weight:500}
.rpe2{margin-top:20px; padding-top:0; border-top:none}
.rpe2 + .rpe2{margin-top:20px; padding-top:0}
.rpe2 .q{font-size:15px; font-weight:600}
.rpe2 .bar{gap:2px; margin-top:10px}
.rpe2 .bar .rpe-k{display:flex; align-items:center; justify-content:center; height:44px; min-height:44px; padding:0;
  border-radius:4px !important; font-size:14px}
.rpe2 .bar .rpe-k:first-child{border-radius:12px 4px 4px 12px !important}
.rpe2 .bar .rpe-k:last-child{border-radius:4px 12px 12px 4px !important}
.rpe2 .anchors{font-size:12px; margin-top:6px}
.rpe2 .hint{font-size:12px; margin-top:6px}
.rpe2:has(.rpe-k.on) .hint{display:none}
#plan-dage .dag.vis > .dag-krop{padding:12px 0 0}
.rpe2 + .fold-ark{margin-top:14px}
.dag-krop > .fold-ark:last-child > .fa-raekke{padding-bottom:0; min-height:0}
/* Inde i Todays ark foldes en raekke ud paa stedet: et ark i et ark er klemt inde i det
   ydre (position:fixed + animation), og dets Close kan ikke naas. */
#dagskort .dag-krop .fold-ark > .fa-slor,
#dagskort .dag-krop .fold-ark > .fa-ark > .ark-greb,
#dagskort .dag-krop .fold-ark > .fa-ark > .ark-top{display:none}
#dagskort .dag-krop .fold-ark > .fa-ark{position:static; inset:auto; z-index:auto; max-width:none; max-height:none; margin:0; padding:4px 0 8px;
  overflow:visible; border-radius:0; box-shadow:none; background:none; animation:none}
#dagskort .dag-krop .fold-ark > .fa-raekke .fa-pil{transition:transform .15s}
#dagskort .dag-krop .fold-ark[open] > .fa-raekke .fa-pil{transform:rotate(90deg)}
html:has(#dagskort .dag-krop .fold-ark[open]) #dagskort .dag.foldbar[open] > .dag-krop{overflow-y:auto}

/* ── SKRIFTEN I APPEN (3/11) ───────────────────────────────────────────────────────
   body.forma-app: alt kort tekst i 'Anybody Tekst' (bund 600). Hele saetninger i Instrument
   Sans 500 (--skrift-saetning). De offentlige sider og admin er uaendrede. */
:root{--skrift-saetning:'Instrument Tekst','Instrument Sans',-apple-system,sans-serif}
body.forma-app{--skrift:'Anybody Tekst','Instrument Sans',-apple-system,sans-serif; --daempet:rgba(23,35,58,.84); --daempet-2:rgba(23,35,58,.72);
  font-family:var(--skrift); font-stretch:100%; font-feature-settings:normal; letter-spacing:0}
body.forma-app button, body.forma-app input, body.forma-app select, body.forma-app textarea{font-family:var(--skrift); font-stretch:100%}
body.forma-app .morgen-dom, body.forma-app .maal-lead, body.forma-app .bib-fokus-tekst, body.forma-app .krop-konkl p, body.forma-app .fk-voice, body.forma-app .dagsdom-helt,
body.forma-app .tur-side p.tur-signatur, body.forma-app .tur-side p.tur-loefte, body.forma-app .dag-detalje, body.forma-app .ul-note{font-family:var(--skrift-saetning); color:var(--tekst)}
/* Specificitet 0: en klasse med sin egen skrift (titler i <p>) vinder altid. */
:where(body.forma-app) :where(p, ul li, .lille, .bib-hvornaar, .bib-struktur, .styrke-note, .st-tekst, .valg-u, .nvi, .pd-hvile, .feedback-diag span){font-family:var(--skrift-saetning)}
.haard-traek .ht-titel{font-family:var(--skrift)}
.segs-axis{justify-content:flex-end}
#kalender-feed-apple{white-space:nowrap; font-size:14px; padding-inline:10px}
@media (max-width:360px){#kalender-feed-apple{white-space:normal}}
.koert-art, .koert-art b{font-family:var(--skrift)}

/* ══ YOU (3/11 2026, brugeren: "rodet og ikke i traad med resten af appen") ═════════
   Som Today: ét navy kort med tallene, hvide kort til det, man vaelger. Alle tal staar paa
   samme tre-kolonners gitter med samme stoerrelse og samme streg, redigerbare eller ej.
   Kilder er ét ord under tallet; forklaringer bor i (i)-arket. */
#s-mig .cockpit-mig .cockpit-in{gap:0}
.cockpit-mig .rider{animation:none; display:block}
.navn-felt{display:flex; align-items:center; gap:8px; border-bottom:1px solid transparent; color:var(--daempet-2); cursor:text}
.navn-felt:focus-within{border-bottom-color:var(--rav)}
.navn-felt svg{flex:none}
.cockpit-mig .rider .profil-navn{flex:1; width:auto; min-width:0; padding:0; border:none; font-size:28px; font-weight:800; line-height:1.15; color:var(--tekst)}
.cockpit-mig .rider .profil-navn:focus, .cockpit-mig .rider .profil-navn:hover{border:none}
.cockpit-mig .rider-sub{margin-top:4px; font-size:14px; line-height:1.3; color:var(--daempet)}
.cockpit-mig .rider-sub b{color:inherit; font-weight:600}

/* W/kg: det ene store tal. Trappen er niveauet, fyldt op til rytterens trin. */
.cockpit-mig .wkg{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:0; margin:16px 0 0; border-radius:0}
.wkg .n b{font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em}
.wkg .n small{font-size:14px; color:var(--daempet)}
.wkg .sc{justify-items:end; gap:6px; text-align:right}
.wkg .steps{align-items:flex-end; gap:4px}
.wkg .steps i{flex:none; width:12px; border-radius:3px; background:var(--kant-staerk)}
.wkg .steps i:nth-child(1){height:7px}
.wkg .steps i:nth-child(2){height:12px}
.wkg .steps i:nth-child(3){height:17px}
.wkg .steps i:nth-child(4){height:22px}
.wkg .steps i:nth-child(5){height:27px}
.wkg .steps i.on{background:var(--rav); box-shadow:none}
.wkg .lv{font-size:14px; font-weight:700; color:var(--tekst)}
.wkg .fn{display:block; max-width:150px; font-size:12px; color:var(--daempet)}

.cockpit-mig .lbl{margin-top:20px; min-height:24px}
.cockpit-mig .lbl b{font-size:15px; font-weight:750; color:var(--tekst)}
.cockpit-mig .inf{width:28px; height:28px; border-color:var(--kant-staerk); color:var(--daempet)}

/* Gitteret: samme for motor, loeb og krop */
#s-mig .cockpit-mig .dials{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 12px; margin:6px 0 0}
#s-mig .cockpit-mig .kdial{display:flex; flex-direction:column; gap:3px; min-width:0; padding:0 !important; border:none !important; border-radius:0; background:none; box-shadow:none; overflow:visible}
#s-mig .cockpit-mig .kdial::before, #s-mig .cockpit-mig .kdial::after{display:none}
#s-mig .cockpit-mig .kdial .hd2{min-height:0; font-size:12.5px; font-weight:600; font-stretch:90%; color:var(--daempet)}
#s-mig .cockpit-mig .kdial .v{display:flex; flex-wrap:nowrap; align-items:baseline; gap:4px; min-height:32px; padding-bottom:3px; border-bottom:1px solid var(--kant-staerk); transition:border-color .15s}
#s-mig .cockpit-mig .kdial .v:focus-within{border-bottom-color:var(--rav)}
#s-mig .cockpit-mig .kdial .v input, #s-mig .cockpit-mig .kdial .v select, #s-mig .cockpit-mig .kdial .v b, #s-mig .cockpit-mig .kdial .v .kolon{
  border:none; padding:0; font-family:var(--skrift-tal); font-size:22px; font-weight:750; font-stretch:var(--bredde); line-height:1.25; letter-spacing:-.01em; color:var(--tekst)}
#s-mig .cockpit-mig .kdial .v input::placeholder{color:var(--daempet-2)}
#s-mig .cockpit-mig .kdial .v select{flex:1; width:100%; padding-right:14px; background:none}
#s-mig .cockpit-mig .kdial .v select option{color:#17233A; background:#fff}
#s-mig .cockpit-mig .kdial .v select:has(option[value=""]:checked){font-size:15px; font-weight:650; color:var(--daempet)}
#s-mig .cockpit-mig .kdial .v small{font-size:12px; font-weight:600; color:var(--daempet)}
#s-mig .cockpit-mig .kdial .cap{min-height:0; font-size:12px; line-height:1.3; font-stretch:90%; white-space:normal; color:var(--daempet-2)}
#s-mig .cockpit-mig .kdial .kilde.dev{color:var(--z2)}
#s-mig .cockpit-mig .kdial .kilde:not(:empty) + .kilde:not(:empty){margin-left:4px}
#s-mig .cockpit-mig .kdial .v:has(.kolon){gap:1px}
#s-mig .cockpit-mig .kdial .v:has(.kolon) small{margin-left:3px}
#s-mig .cockpit-mig .ev{padding:6px 0; border:none; border-radius:0; background:none; font-size:13px; color:var(--daempet)}
#s-mig .cockpit-mig .ev b{color:var(--tekst)}
#s-mig .cockpit-mig .ev .dt{margin-left:3px}
#ftp-ev-raekke:not(:empty), #taerskelfart-ev-raekke:not(:empty){margin-top:2px}
#loeb-tal-felt .dials{margin-top:12px}
@media (max-width:359px){
  #s-mig .cockpit-mig .dials{gap:0 10px}
  #s-mig .cockpit-mig .kdial .hd2, #s-mig .cockpit-mig .kdial .cap{font-size:11.5px; font-stretch:75%}
  #s-mig .cockpit-mig .kdial .v input, #s-mig .cockpit-mig .kdial .v select, #s-mig .cockpit-mig .kdial .v b, #s-mig .cockpit-mig .kdial .v .kolon{font-size:19px}
  #s-mig .cockpit-mig .kdial .v small{font-size:11px}
  .wkg .n b{font-size:40px}
}

/* Abonnementet: én hvid raekke under kortet. Hele raekken aabner Manage for Pro. */
#abonnement-kort.abon{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin:12px 0 0; padding:12px 14px 12px 18px; border-radius:24px; background:#fff; box-shadow:0 18px 32px -18px var(--skygge), 0 1px 2px rgba(23,35,58,.05)}
#abonnement-kort .abon-navn{flex:1 1 150px; min-width:0; display:grid; gap:1px}
#abonnement-kort .abon-navn b{display:flex; align-items:center; gap:5px; font-size:15px; font-weight:750; color:var(--tekst)}
#abonnement-kort .abon-navn small{font-size:13px; line-height:1.3; color:var(--daempet)}
#abonnement-kort .st svg{width:13px; height:13px; fill:var(--rav); stroke:var(--rav-tekst); stroke-width:1}
#abonnement-kort .abon-knapper{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px}
#abonnement-kort .abon-knapper:empty{display:none}
.abon-link{display:inline-flex; align-items:center; gap:2px; min-height:36px; padding:0; border:none; background:none; font:inherit; font-size:14px; font-weight:700; color:var(--rav-tekst); cursor:pointer}
.abon-link svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
#abonnement-kort .pill{min-height:36px; font-size:13px}
#abonnement-kort.abon.med-trial{display:block; padding:14px 18px; background:#fff; border:none}
#abonnement-kort.med-trial .planline-top{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px}

/* De hvide kort under */
#s-mig .mig-indst{margin-top:12px}
#s-mig .mig-indst .brikker{margin-top:12px}
.mig-fokus-liste{margin-top:6px; border-top:1px solid var(--kant-svag)}
#s-mig .own .ic{border:none; background:var(--kort-2)}
/* Gem-bjaelken: den ene handling paa siden, altsaa rav. */
#mig-gem-bjaelke .bar{padding:6px 6px 6px 18px}
#mig-gem-bjaelke #gem-mig{width:auto; min-height:44px; margin:0; padding:0 22px; border-radius:999px; box-shadow:none}

/* ══ DEN KOERTE DAG (3/11 2026, brugeren: "mangler karakter ... ikke balanceret ligesom navy
   boksene") ═════════════════════════════════════════════════════════════════════════
   Dag-brikken til venstre, karakteren i samme stoerrelse til hoejre, turen som farvebaand,
   tallene paa navy-kortenes gitter, knappen i fuld bredde. */
#dagskort .pdag:has(.pd-karakter), #plan-dage .dag.vis > .pdag:has(.pd-karakter){grid-template-columns:58px minmax(0,1fr) 58px; align-items:center}
.pd-karakter{grid-column:3; grid-row:1}
.pd-karakter .gr{position:relative; width:58px; height:58px; display:flex; justify-content:center; font-family:var(--skrift-tal); font-size:20px; font-weight:800; font-stretch:var(--bredde); color:var(--tekst)}
.pd-karakter .gr svg{position:absolute; inset:0; width:100%; height:100%}
.pd-karakter .gr circle{stroke-width:2.4}
.pd-karakter .gr .t{stroke:var(--kort-2)}
.pd-karakter .gr .a{stroke:var(--rav)}
.pd-karakter .gr small{display:none}
.pd-karakter .gr.tom{color:var(--daempet)}
.pd-baand{grid-column:1 / -1; display:flex; gap:2px; height:14px; margin:14px 0 0; border-radius:7px; overflow:hidden}
.pd-baand i{min-width:4px}
.pd-tal{grid-column:1 / -1; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:10px; margin:12px 0 0}
.pd-tal .ov-c b{font-size:19px; white-space:nowrap}
.pdag:has(.pd-karakter) .pd-handlinger, .pdag:has(.pd-tal) .pd-handlinger{grid-template-columns:minmax(0,1fr)}
.koert-grund{margin:0 0 12px; font-size:14px; line-height:1.4; color:var(--daempet)}
@media (max-width:360px){
  #dagskort .pdag:has(.pd-karakter) .pd-navn, #plan-dage .dag.vis > .pdag:has(.pd-karakter) .pd-navn{font-size:20px}
  #dagskort .pdag:has(.pd-karakter), #plan-dage .dag.vis > .pdag:has(.pd-karakter){column-gap:10px}
}

/* Sessionens slags og knapperne foer turen (3/11 2026). Maerket er zonens fyld med navy tekst,
   saa det haenger sammen med grafen; knapperne staar i hoejre spalte, grafen slutter foer dem. */
.pd-art-maerke{display:inline-flex; align-items:center; min-height:28px; padding:0 11px; border-radius:9px; background:var(--art-flade); color:var(--ink); font-family:var(--skrift-tal); font-size:15px; font-weight:800; font-stretch:var(--bredde); line-height:1; white-space:nowrap}
#dagskort .pd-navn:has(.pd-art-maerke), #plan-dage .dag.vis .pd-navn:has(.pd-art-maerke){align-items:center; row-gap:7px}
#dagskort .pdag:has(.pd-rail){grid-template-columns:58px minmax(0,1fr) 44px; align-items:start}
#dagskort .pd-handlinger.pd-rail{grid-column:3; grid-row:1; align-self:stretch; display:flex; flex-direction:column-reverse; justify-content:space-between; gap:8px; margin:0}
#dagskort .pd-rail .pd-fold{position:relative; width:44px; height:44px; min-height:44px; padding:0; gap:0; flex:none}
#dagskort .pd-rail svg{width:20px; height:20px}
#dagskort .pdag:has(.pd-rail) .pd-midt .segs{height:46px}
#dagskort .pd-rail .pd-fold > span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* MAALARKET (brugeren 3/11 2026: "simpelhen for daarligt"). Maalet er ét navy kort som Today og
   You; fokus er ét gitter med synlige felter, hvor det valgte er hvidt med rav kant og flueben.
   Stregen under datoen betyder "kan aendres", samme sprog som tallene paa You. */
#ark-maal .ark-rul{padding-top:6px; padding-bottom:calc(10px + env(safe-area-inset-bottom))}
/* Uden skygge: arkets rulleflade klipper den i siderne, og navy staar klart nok paa hvidt. */
.maal-kort{padding:18px; border-radius:22px; box-shadow:none}
#ark-maal #maal-navn{display:block; width:100%; min-height:0; margin:0; padding:0; border:none; border-radius:0; background:none; box-shadow:none; resize:none; overflow:hidden; font-family:var(--skrift-tal); font-size:28px; font-weight:800; font-stretch:var(--bredde); line-height:1.15; letter-spacing:-.01em; color:var(--tekst); caret-color:var(--rav)}
#ark-maal #maal-navn:focus{outline:none; box-shadow:0 2px 0 var(--rav)}
#ark-maal #maal-navn::placeholder{color:var(--daempet-2); opacity:1}
.mk-tal{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:0 16px; margin-top:16px}
.mk-celle{position:relative; display:flex; flex-direction:column; gap:3px; min-width:0; margin:0}
.mk-celle[hidden]{display:none}
.mk-celle > span{font-size:12.5px; font-weight:600; font-stretch:90%; color:var(--daempet)}
.mk-celle > b{display:block; min-height:32px; padding-bottom:3px; font-family:var(--skrift-tal); font-size:22px; font-weight:750; font-stretch:var(--bredde); line-height:1.25; letter-spacing:-.01em; color:var(--tekst)}
.mk-dato{cursor:pointer}
.mk-dato > b{position:relative; padding-right:18px; border-bottom:1px solid var(--kant-staerk); transition:border-color .15s}
.mk-dato > b::after{content:''; position:absolute; right:3px; top:9px; width:7px; height:7px; border:solid var(--daempet); border-width:0 2px 2px 0; transform:rotate(45deg)}
.mk-dato > b.tom{color:var(--rav)}
.mk-dato:focus-within > b{border-bottom-color:var(--rav)}
#ark-maal #maal-dato{position:absolute; inset:0; width:100%; height:100%; min-width:0; margin:0; padding:0; border:none; background:none; opacity:0; appearance:none; -webkit-appearance:none; font-size:16px; cursor:pointer}
#ark-maal #maal-dato::-webkit-calendar-picker-indicator{position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer}
.mk-tom{margin:14px 0 0; font-size:14px; line-height:1.4; color:var(--daempet)}
.mk-tom[hidden]{display:none}
.maal-kort .maal-ark-status{margin:14px 0 0; padding:0; border:none; border-radius:0; background:none}
.maal-kort .maal-ark-status p{font-size:14px; line-height:1.4; color:var(--daempet)}
.maal-kort .maal-ark-status .traenet b{color:var(--tekst)}
#ark-maal .maal-fokus{margin:22px 0 0}
#ark-maal .maal-fokus-titel{margin:0; font-size:17px; font-weight:750; color:var(--tekst)}
#ark-maal .maal-fokus .fl{margin:14px 0 0}
#ark-maal .maal-fokus > div:first-of-type > .fl{margin-top:8px}
/* Sporten navngives kun, naar der er to at skelne imellem. */
#ark-maal .maal-fokus:not(:has(#cykel-fokus-felt:not(.skjul) ~ #loeb-fokus-felt:not(.skjul))) .fl:not(#sport-vaegtning-felt .fl){display:none}
#ark-maal .chips{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; overflow:visible; margin:10px 0 0; padding:0}
#ark-maal .chip{position:relative; display:flex; align-items:center; min-height:50px; padding:6px 12px; border:none; border-radius:14px; background:var(--kort-2); color:var(--tekst); font-size:14px; font-weight:650; line-height:1.2; text-align:left; white-space:normal}
#ark-maal .chip.on{padding-right:30px; background:var(--valgt-flade); box-shadow:inset 0 0 0 2px var(--rav); color:var(--tekst); font-weight:750}
#ark-maal .chip.on::after{content:''; position:absolute; right:14px; top:50%; width:6px; height:12px; border:solid var(--rav-tekst); border-width:0 2.5px 2.5px 0; transform:translateY(-60%) rotate(45deg)}
#ark-maal .chip:focus-visible{outline:2px solid var(--rav-tekst); outline-offset:2px}
/* Ulige antal (loeb har ni): All-round tager hele raekken, saa ingen felter staar alene nederst. */
#ark-maal .chip:first-child:nth-last-child(odd){grid-column:1 / -1}
.maal-fokus-note{margin:10px 0 0; min-height:2.8em; font-size:14px; line-height:1.4; color:var(--daempet)}
#ark-maal .ark-valg{margin-top:8px; padding:12px 0}
#ark-maal .maal-fjern{margin:6px auto 0; min-height:44px}
/* Slaaet fra = tomt spor med hvid knop (en moerk knop laeses som slaaet til). */
.boks{background:var(--kant-staerk); border-color:transparent}
.boks::after{background:var(--valgt-flade); box-shadow:0 1px 3px var(--kant-staerk)}

/* ONBOARDINGEN (3/11 2026, brugeren: "sletter hvad der er spild og faar det gjort fedt hurtigt
   og interaktivt"). Ét spoergsmaal pr. ark, store raekker, ét tryk er et svar. Det eneste
   pynt-frie blikfang er plankortet, der vokser med svarene, og som ender i rytterens uge. */
.tur-ark-top{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 4px; min-height:54px}
.tur-ark-tilbage, .tur-ark-tilbage:active{width:44px; height:44px; min-height:44px; margin-left:-10px; padding:0; display:grid; place-items:center; background:none; border:none; box-shadow:none; color:var(--tekst)}
#tur-ark-tilbage{background:none !important; box-shadow:none !important}
.tur-ark-tilbage[hidden]{display:none}
.tur-skinne{position:static; grid-column:2; height:10px; margin:0; max-width:none; border-radius:5px; background:var(--kant); overflow:hidden}
.tur-skinne i{height:100%; border-radius:5px; background:var(--rav); transition:width .35s var(--ud)}
#tur-ark-spring{grid-column:3; min-height:44px; padding:0 2px 0 6px; color:var(--daempet); font-weight:600}
#tur-ark-spring[hidden]{visibility:hidden}
.tur-ark-krop{padding-top:14px}
.tur-side h1{margin:0 0 6px}
.tur-side .tur-traed > p{margin:0 0 14px; font-size:16px; line-height:1.4}
.tur-side:not(.skjul) .tur-traed > *{animation:none}
.tur-side:not(.skjul) .tur-traed{animation:tur-ind .2s var(--ud) backwards}
#tur-ark[data-retning="tilbage"] .tur-side:not(.skjul) .tur-traed{animation-name:tur-ind-tilbage}
@keyframes tur-ind{from{opacity:0; transform:translateX(16px)}}
@keyframes tur-ind-tilbage{from{opacity:0; transform:translateX(-16px)}}
.tur-fod-raekke, .tur-fod-raekke:has(.tur-ark-tilbage[hidden]){display:block}
.tur-fod-raekke .knap{width:100%; min-height:56px; font-size:17px}
.tur-under[hidden]{display:none}
.tur-under{margin:14px auto 2px}

/* Velkomsten: fotoet fylder toppen, Skip ligger oven paa det */
#tur-ark[data-side="velkomst"] .tur-ark-top{position:absolute; top:0; left:0; right:0; z-index:5}
#tur-ark[data-side="velkomst"] .tur-skinne{visibility:hidden}
#tur-ark[data-side="velkomst"] #tur-ark-spring{color:var(--ink)}
#tur-ark[data-side="velkomst"] .tur-ark-krop{padding-top:0}
.tur-side[data-tur="velkomst"] .tur-portraet{height:min(46dvh, 400px); margin:0 -16px 6px; background:var(--bg)}
.tur-side[data-tur="velkomst"] .tur-portraet img{filter:none}
.tur-side[data-tur="velkomst"] h1{font-size:clamp(30px, 9vw, 38px); line-height:1.04; margin:0 0 12px}
.tur-side[data-tur="velkomst"] .tur-signatur-blok{display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:center; margin:18px 0 0; padding:0; border:none}
.tur-side[data-tur="velkomst"] .tur-avatar{width:48px; height:48px; margin:0; border-radius:50%; object-fit:cover}
.tur-side[data-tur="velkomst"] p.tur-signatur{margin:0; font-size:15px; font-weight:750; color:var(--tekst)}
.tur-side[data-tur="velkomst"] p.tur-signatur span{display:block; margin-top:1px; font-family:var(--skrift-saetning); font-size:13.5px; font-weight:500; line-height:1.35; color:var(--daempet)}

.tur-navn{margin-top:14px; width:100%; min-height:64px; padding:0 18px; border:none; border-radius:18px; background:var(--kort); box-shadow:0 12px 24px -18px var(--skygge); font-family:var(--skrift-tal); font-size:24px; font-weight:750; color:var(--tekst)}
.tur-navn:focus{outline:none; box-shadow:inset 0 0 0 2px var(--rav)}

/* Raekkerne: hele fladen er knappen, valgt = rav kant + rav flueben */
.tur-rk-liste{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.tur-rk{position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:60px; margin:0; padding:10px 14px; border:none; border-radius:18px; background:var(--kort); box-shadow:0 10px 20px -18px var(--skygge); color:var(--tekst); text-align:left; cursor:pointer; transition:transform .12s, box-shadow .12s; -webkit-tap-highlight-color:transparent}
.tur-rk:active{transform:scale(.985)}
.tur-rk:focus-visible, .tur-rk:has(.valg-felt:focus-visible){outline:2px solid var(--rav-tekst); outline-offset:2px}
.tur-rk-ikon{flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--kort-2); color:var(--tekst)}
.tur-rk-ikon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.tur-rk-t{flex:1 1 auto; min-width:0; display:block}
.tur-rk-t b{display:block; font-family:var(--skrift-tal); font-size:16px; font-weight:750; line-height:1.2; color:var(--tekst)}
.tur-rk-t small{display:block; margin-top:2px; font-family:var(--skrift-saetning); font-size:13.5px; font-weight:500; line-height:1.3; color:var(--daempet)}
.tur-rk-tjek{flex:0 0 auto; position:relative; width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--kant-staerk); transition:background .12s, box-shadow .12s}
.tur-rk.on, .tur-rk:has(.valg-felt:checked){box-shadow:inset 0 0 0 2px var(--rav)}
.tur-rk.on .tur-rk-tjek, .tur-rk:has(.valg-felt:checked) .tur-rk-tjek{background:var(--rav); box-shadow:none}
.tur-rk.on .tur-rk-tjek::after, .tur-rk:has(.valg-felt:checked) .tur-rk-tjek::after{content:''; position:absolute; left:9px; top:5px; width:6px; height:11px; border:solid var(--paa-rav); border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.tur-rk-liste .tur-opfoelg{margin:-2px 0 2px 16px; padding-left:14px}
.tur-rk-liste .tur-opfoelg .valg{padding:6px 0}
.tur-side[data-tur="fokus"] .fl{display:none; margin:14px 0 0}
#v-tur.to-sport .tur-side[data-tur="fokus"] .fl{display:flex}
.tur-side[data-tur="fokus"] .tur-felt-gruppe .fl{display:flex}
.tur-side[data-tur="fokus"] .tur-rk{min-height:56px; padding:8px 14px}
.tur-side[data-tur="fokus"] .tur-rk-liste{gap:6px; margin-top:8px}

/* Maalet */
.tur-maal-felter{display:grid; gap:8px; padding:2px 0 4px}
.tur-maal-felter[hidden]{display:none}
.tur-maal-felter input{width:100%; min-height:56px; padding:0 16px; border:none; border-radius:16px; background:var(--kort-2); font-family:var(--skrift-tal); font-size:18px; font-weight:700; color:var(--tekst)}
.tur-maal-felter #t-maal-navn:focus{outline:none; box-shadow:inset 0 0 0 2px var(--rav)}
.tur-maal-felter input::placeholder{color:var(--daempet); opacity:1; font-weight:600}
.tur-dato{position:relative; display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:0 16px; border-radius:16px; background:var(--kort-2); cursor:pointer}
.tur-dato:focus-within{box-shadow:inset 0 0 0 2px var(--rav)}
.tur-dato > span{font-size:14px; font-weight:600; color:var(--daempet)}
.tur-dato > b{flex:0 0 auto; width:auto; font-family:var(--skrift-tal); font-size:18px; font-weight:750; color:var(--tekst)}
.tur-dato > b.tom{color:var(--rav-tekst)}
.tur-maal-felter #t-maal-dato{position:absolute; inset:0; height:100%; min-height:0; padding:0; background:none; opacity:0; appearance:none; -webkit-appearance:none; font-size:16px; cursor:pointer}
.tur-maal-felter #t-maal-dato::-webkit-calendar-picker-indicator{position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer}

/* Plankortet */
.tur-live{flex:0 0 auto; display:flex; justify-content:space-between; gap:14px; margin:0 0 16px; padding:14px 16px; border-radius:20px; box-shadow:none}
.tur-live[hidden]{display:none}
.tl-tekst{min-width:0; flex:1 1 auto}
.tl-tekst b{display:block; font-family:var(--skrift-tal); font-size:17px; font-weight:800; line-height:1.2; color:var(--tekst)}
.tl-tekst span{display:block; margin-top:3px; font-size:13.5px; font-weight:600; line-height:1.25; color:var(--daempet)}
.tl-tekst span.ny{animation:tl-ny .5s var(--ud)}
@keyframes tl-ny{from{color:var(--rav); transform:translateY(5px); opacity:0}}
.tl-uge{flex:0 0 auto; width:96px; display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.tl-uge[hidden]{display:none}
.tl-sojler{display:flex; align-items:flex-end; gap:4px; width:100%; height:38px}
.tl-sojler i{flex:1 1 0; height:calc(10% + 90% * var(--a)); border-radius:3px; background:var(--rav)}
.tl-sojler i.hvil{height:4px; background:var(--kant-staerk)}
.tl-uge small{font-size:12px; font-weight:650; color:var(--daempet); white-space:nowrap}
@media (max-height:700px){
  .tur-live{display:none}
  .tk-uge span{height:64px}
  .tur-side[data-tur="velkomst"] .tur-portraet{height:30dvh}
  .tur-side[data-tur="velkomst"] h1{font-size:27px; margin-bottom:8px}
  .tur-side[data-tur="velkomst"] .tur-signatur-blok{margin-top:10px}
}

/* Afslutningen: ugen er det store */
.tk-kort{margin-top:12px; padding:18px; border-radius:24px}
.tk-sum{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.tk-sum b{white-space:nowrap; font-family:var(--skrift-tal); font-size:clamp(26px, 8.4vw, 34px); font-weight:800; line-height:1; color:var(--tekst)}
.tk-sum span{font-size:14px; font-weight:600; color:var(--daempet); white-space:nowrap}
.tk-uge{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; margin-top:16px}
.tk-uge > div{display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0}
.tk-uge small{min-height:15px; font-size:11.5px; font-weight:650; color:var(--daempet); white-space:nowrap}
.tk-uge span{position:relative; display:block; width:100%; height:112px}
.tk-uge i{position:absolute; left:0; right:0; bottom:0; height:calc(8% + 92% * var(--a)); border-radius:8px; background:var(--rav); transform-origin:bottom; animation:tk-stig .5s var(--ud) calc(var(--i) * 45ms) backwards}
.tk-uge .hvil i{height:5px; background:var(--kant-staerk)}
.tk-uge em{font-style:normal; font-size:13px; font-weight:700; color:var(--tekst)}
.tk-uge .hvil em{color:var(--daempet)}
@keyframes tk-stig{from{transform:scaleY(0)}}
.tur-side p.tk-plan{margin:14px 0 0; font-size:14px; line-height:1.4; color:var(--daempet)}
.tur-side p.tk-plan.skjul{display:none}
.tur-side p.tk-plan b{color:var(--tekst)}
.tk-rk{margin-top:14px; border-radius:20px; background:var(--kort); overflow:hidden; box-shadow:0 10px 20px -18px var(--skygge)}
.tk-rk button{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:54px; padding:9px 34px 9px 16px; border:none; border-top:1px solid var(--kant-svag); background:none; position:relative; text-align:left; cursor:pointer}
.tk-rk button:first-child{border-top:none}
.tk-rk button::after{content:''; position:absolute; right:16px; top:50%; width:7px; height:7px; border:solid var(--daempet); border-width:2px 2px 0 0; transform:translateY(-50%) rotate(45deg)}
.tk-rk span{flex:0 0 auto; font-size:14px; font-weight:600; color:var(--daempet)}
.tk-rk b{min-width:0; font-size:14.5px; font-weight:750; line-height:1.25; color:var(--tekst); text-align:right}
.tk-rk b.rav{color:var(--rav-tekst)}
.tk-rk button:focus-visible{outline:2px solid var(--rav-tekst); outline-offset:-2px}

/* Soevn paa enhedsvalget */
.tur-fg-iforvejen{display:flex; align-items:center; gap:7px; margin:0; font-size:13px; line-height:1.3; color:var(--tekst)}
.tur-fg-iforvejen svg{flex:none; width:14px; height:14px; fill:none; stroke:var(--zone3); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}

/* Sportsraekkerne har kun et ord og maa gerne vaere store */
.tur-side[data-tur="sport"] .tur-rk{min-height:72px}
.tur-side[data-tur="sport"] .tur-rk-t b{font-size:18px}

/* Plankortet i foden: spoergsmaalet staar samme sted paa alle ark */
.tur-ark-fod .tur-live{margin:0 0 10px; padding:10px 14px; border-radius:16px; align-items:center}
.tur-ark-fod .tl-tekst b{font-size:14.5px}
.tur-ark-fod .tl-tekst .tl-linjer{display:block; margin-top:2px; font-size:13px; line-height:1.25}
.tur-ark-fod .tl-tekst .tl-linjer span{display:inline; margin:0; font-size:inherit; line-height:inherit}
.tur-ark-fod .tl-uge{width:78px; gap:3px}
.tur-ark-fod .tl-sojler{height:22px; gap:3px}
.tur-ark-fod .tl-uge small{font-size:11px}

/* Enhedsarket uden valg: knappen er vejen forbi, ikke en doed knap */
#tur-videre.tur-fg-senere{background:var(--kort-2); color:var(--tekst); box-shadow:none}

/* Den laaste Plan-fane: rytterens egen uge og proeveperioden */
.plan-tilbud{margin-top:16px}
.pt-maerke{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--rav)}
.pt-maerke svg{width:14px; height:14px}
.pt-titel{margin:8px 0 0; text-wrap:balance; font-family:var(--skrift-tal); font-size:clamp(23px, 6.6vw, 27px); font-weight:800; line-height:1.1; color:var(--tekst)}
.plan-tilbud p.pt-tekst{margin:6px 0 14px; font-family:var(--skrift-saetning); font-size:15px; font-weight:500; line-height:1.35; color:var(--daempet)}
.plan-tilbud .tk-uge{margin-top:10px}
.plan-tilbud .tk-uge span{height:72px}
.pt-punkter{margin:14px 0 16px; padding:0; list-style:none; display:grid; gap:7px}
.pt-punkter li{position:relative; padding-left:24px; font-family:var(--skrift-saetning); font-size:14.5px; font-weight:500; line-height:1.3; color:var(--tekst)}
.pt-punkter li::before{content:''; position:absolute; left:3px; top:2px; width:6px; height:11px; border:solid var(--rav); border-width:0 2.4px 2.4px 0; transform:rotate(42deg)}
.plan-tilbud .knap{width:100%}
.plan-tilbud p.pt-fin{margin:10px 0 0; font-family:var(--skrift-saetning); font-size:12.5px; font-weight:500; line-height:1.35; text-align:center; color:var(--daempet)}

/* Laasen paa Plan-fanen: samme plads som Connections' prik */
nav:not(.side-nav) button.laast{position:relative}
html:not(.uden-koeb) nav:not(.side-nav) button.laast::before{content:''; position:absolute; top:5px; left:calc(50% + 7px); width:17px; height:17px; border-radius:50%; background:var(--rav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317233A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/11px no-repeat; box-shadow:0 0 0 2px #fff}
@media (prefers-reduced-motion:reduce){
  .tur-side:not(.skjul) .tur-traed, .tl-tekst span.ny, .tk-uge i{animation:none}
}

/* ══ TODAY ZOOMET UD (3/11 2026, brugeren: "zoome hele today lidt ud ... god plads imellem det hele
   og stadig vise det uden at scrolle") ═════════════════════════════════════════════════════════
   Ca. 15 % mindre, men ikke ens: overskrifter og flader skrumper mest, den mindste tekst bliver.
   Ingen CSS-zoom: den ville ogsaa ramme arkene, der bor inde i #dagskort.
   idagTilpas() maaler rummet og vaelger laget (data-lag), det ledige fordeles med auto-margener. */
#idag-indhold{min-height:min(var(--idag-rum, 0px), 820px);
  --luft:14px; --f-dom:28px; --f-saetning:14.5px; --ring:88px; --f-ring:28px; --f-ring-ord:11.5px; --f-krop:18px;
  --f-navn:18px; --brik:48px; --kort-top:14px; --pas-luft:12px; --knap:36px; --soejle:42px; --soejle-gulv:10px; --uge-top:13px}
#idag-indhold[data-lag="stor"]{--luft:18px; --f-dom:31px; --f-saetning:15.5px; --ring:98px; --f-ring:31px; --f-ring-ord:12.5px; --f-krop:20px;
  --f-navn:20px; --brik:54px; --kort-top:16px; --pas-luft:14px; --knap:40px; --soejle:52px; --soejle-gulv:12px; --uge-top:15px}
#idag-indhold[data-lag="taet"]{--luft:11px; --f-dom:26px; --f-saetning:14px; --ring:80px; --f-ring:25px; --f-ring-ord:10.5px; --f-krop:17px;
  --kort-top:12px; --pas-luft:10px; --knap:34px; --soejle:34px; --soejle-gulv:9px; --uge-top:11px}
#idag-indhold[data-lag="taettest"]{--luft:8px; --f-dom:24px; --f-saetning:13.5px; --ring:72px; --f-ring:22px; --f-ring-ord:9.5px; --f-krop:16px;
  --f-navn:16px; --brik:44px; --kort-top:10px; --pas-luft:8px; --knap:32px; --soejle:26px; --soejle-gulv:8px; --uge-top:10px}
/* body (forma.css) har safe-area i bunden, og main har den ogsaa: paa Today gav det 34 px at rulle paa
   iPhone, som var den rest, html.idag-passer ikke kunne fjerne ("fjollet", 3/11). */
body:has(#v-app:not(.skjul) #s-idag:not(.skjul)){padding-bottom:0}
#idag-cockpit{margin-top:auto; padding-bottom:var(--luft)}
#dagskort, #idag-indhold #dagskort{margin:auto 0 var(--luft) !important; padding:var(--kort-top) 16px 4px}
#idag-uge{margin:auto 0 0; padding:var(--uge-top) 16px 8px}
#idag-indhold:not(:has(#idag-uge:not(:empty))) #idag-efter{margin-top:auto}

/* Dommen og kroppen */
.cockpit-idag .cockpit-in, #v-app #idag-cockpit .cockpit-in{gap:var(--luft); padding-top:calc(var(--luft) * .5)}
#v-app #idag-cockpit .morgen .tilstand, #v-app #idag-cockpit .morgen .hvor-titel{font-size:var(--f-dom); line-height:1.08}
#v-app #idag-cockpit .morgen-dom{font-size:var(--f-saetning); line-height:1.32; margin-top:5px}
#v-app #idag-cockpit .morgen .ring{width:var(--ring); height:var(--ring); flex:0 0 var(--ring); align-self:center}
#v-app #idag-cockpit .morgen .ring-midt b{font-size:var(--f-ring)}
#v-app #idag-cockpit .morgen .ring-midt small{font-size:var(--f-ring-ord); margin-top:1px}
#idag-krop{gap:10px}
@media (min-width:360px){
  #idag-krop .kdial, #v-app #idag-cockpit #idag-krop .kdial{grid-template-columns:32px minmax(0,1fr)}
  #idag-krop .kdial > .kring, #idag-krop .kring svg{width:32px; height:32px}
  #idag-krop .kdial .hd2 svg{width:13px; height:13px}
}
#idag-krop .kdial .v b{font-size:var(--f-krop)}
/* "Tonight 6:50–7:30" kraever 106 px; under det staar maanen for ordet, ellers bliver raekken tre linjer. */
@container (max-width:107px){ .cap-ord{display:none} .cap-maane{display:inline-block} }

/* Passets kort. Slagsen staar i forlaengelse af navnet, ikke paa sin egen linje. */
#dagskort .pdag{grid-template-columns:var(--brik) minmax(0,1fr); column-gap:12px}
#dagskort .pdag:has(.pd-karakter){grid-template-columns:var(--brik) minmax(0,1fr) var(--brik)}
#dagskort .pdag:has(.pd-rail){grid-template-columns:var(--brik) minmax(0,1fr) 40px}
#dagskort .pd-dag{width:var(--brik); height:var(--brik); border-radius:14px; font-size:10.5px}
#dagskort .pd-dag b{font-size:calc(var(--brik) * .375)}
#dagskort .pd-navn, #dagskort .pdag:has(.pd-karakter) .pd-navn{font-size:var(--f-navn); line-height:1.18}
#dagskort .pd-navn:has(.pd-art-maerke){display:block; line-height:1.28}
#dagskort .pd-navn:has(.pd-art-maerke) .pd-navn-t{display:inline}
#dagskort .pd-navn:has(.pd-art-maerke) .pd-navn-t::after{content:' '}
#dagskort .pd-navn .pd-art-maerke{min-height:22px; padding:0 8px; margin-right:6px; border-radius:7px; font-size:12.5px; vertical-align:2px}
#dagskort .pd-navn .pd-min{font-size:14px; white-space:nowrap}
#dagskort .pd-karakter .gr{width:var(--brik); height:var(--brik); font-size:calc(var(--brik) * .35)}
#dagskort .pd-baand{height:10px; margin-top:var(--pas-luft); border-radius:5px}
/* Turens tal ER knappen til arket (brugeren 3/11: "komprimer ... ser fantastisk ud"): én creme flade med
   tallene paa navy-kortets spalter og pilen for enden. Mangler en vurdering, staar den rave knap under. */
#dagskort .pd-tal{grid-row:3; position:relative; align-items:center; min-height:var(--knap); gap:10px; margin-top:var(--pas-luft); border-radius:12px; background:var(--kort-2)}
#dagskort .pd-tal b{font-family:var(--skrift-tal); font-size:15.5px; font-weight:800; font-stretch:var(--bredde); line-height:1; white-space:nowrap; color:var(--tekst)}
#dagskort .pd-tal b:first-child{padding-left:12px}
#dagskort .pd-tal small{font-size:12px; font-weight:700; color:var(--daempet)}
#dagskort details:not(.rpe-mangler) > .pdag:has(.pd-tal) .pd-handlinger{grid-row:3; grid-column:1 / -1; justify-self:end; align-self:end; display:block; position:relative; z-index:1; width:40px; margin:0}
#dagskort details:not(.rpe-mangler) > .pdag:has(.pd-tal) .pd-handlinger .pd-fold{position:relative; width:40px; min-height:var(--knap); padding:0; gap:0; background:none; box-shadow:none}
#dagskort details:not(.rpe-mangler) > .pdag:has(.pd-tal) .pd-fold > span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
#dagskort details.rpe-mangler > .pdag:has(.pd-tal) .pd-handlinger{grid-row:4}
#dagskort .pd-midt .segs{margin-top:var(--pas-luft); margin-left:calc(var(--brik) * -1 - 12px); width:calc(100% + var(--brik) + 12px)}
#dagskort .segs:not(.kompakt), #dagskort .pdag:has(.pd-rail) .pd-midt .segs{height:38px}
#dagskort .pd-handlinger{margin-top:calc(var(--pas-luft) - 2px)}
#dagskort .pd-handlinger.pd-rail{margin:0; gap:6px}
#dagskort .pd-rail .pd-fold{width:40px; height:40px; min-height:40px}
#dagskort .pd-handlinger:not(.pd-rail) .pd-fold{min-height:var(--knap); font-size:14px}

/* Ugekortet: hele planen som skinne, ugens nummer og retningen, saa ugens load og dagene */
.plan-skinne{grid-column:1 / -1; display:flex; align-items:center; gap:3px; height:9px; margin:0 0 9px}
.plan-skinne.taet{gap:1.5px}
.plan-skinne i{flex:1 1 0; min-width:0; height:4px; border-radius:2px; background:rgba(255,255,255,.22)}
.plan-skinne i.g{background:var(--rav)}
.plan-skinne i.nu{height:9px; border-radius:3px; background:#fff}
.plan-skinne.ind i{animation:skinne-ind .34s var(--ud) both; animation-delay:calc(var(--i) * 26ms)}
@keyframes skinne-ind{from{transform:scaleY(0); opacity:0}}
@media (prefers-reduced-motion: reduce){ .plan-skinne.ind i{animation:none} }
.uge-kort-top{align-items:center; min-height:24px; margin:0 0 7px}
.uge-kort-top b{font-size:17px; white-space:nowrap}
.uge-retning{display:inline-flex; align-items:center; gap:4px; flex:none; width:auto; min-height:24px; padding:0 9px 0 7px; margin:0; border:none; border-radius:7px; background:var(--z2); color:var(--ink); font-family:var(--skrift-tal); font-size:13px; font-weight:800; font-stretch:var(--bredde); line-height:1; white-space:nowrap; cursor:pointer}
.uge-retning svg{stroke-width:3}
.uge-retning.gul{background:var(--z3)}
.uge-retning.daempet{background:rgba(255,255,255,.16); color:#fff}
.uge-kort-load{grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin:0 0 8px}
.uge-kort-load .ul-bar{flex:1 1 0; min-width:0; height:8px; border-radius:5px; margin:0}
.uge-kort-load > span:last-child{flex:none; font-family:var(--skrift-tal); font-weight:700; font-stretch:var(--bredde); font-size:14px; white-space:nowrap}
.uge-kort-load small{font-size:12px; font-weight:600; color:var(--daempet)}
#idag-uge .us-s{height:var(--soejle)}
#idag-uge .us-dag:not(.us-h) .us-s i{width:min(24px, 62%); height:calc(var(--soejle-gulv) + var(--h) * (var(--soejle) - var(--soejle-gulv))); border-radius:6px}
#idag-uge .us-dag small{font-size:12px}
@media (max-width:359px){
  .uge-kort-top b{font-size:15px}
  .uge-retning{font-size:11.5px; padding:0 7px 0 5px; gap:3px}
  .uge-retning svg{width:12px; height:12px}
  #idag-indhold, #idag-indhold[data-lag]{--f-navn:16px}
}

/* ══ TODAY UDEN SOEVNMAALER (3/11 2026, brugeren: "mere brugbart og fedt med det data vi har") ══
   Formen i ringen, seks ugers Base og Fatigue paa kroppens plads. Fladen mellem linjerne er Form. */
button.ring.form-ring{display:block; padding:0; border:none; background:none; color:inherit; cursor:pointer}
.form-ring .ring-midt{display:grid}
.form-ring.neg svg{transform:rotate(-90deg) scaleY(-1)}
#idag-krop:empty{display:none}
.form-kurve{display:grid; grid-template-columns:minmax(0,1fr) 84px; column-gap:8px; width:100%; margin:0; padding:0; border:none; background:none; color:var(--tekst); text-align:left; cursor:pointer}
.form-kurve[hidden]{display:none}
.fk-plot{position:relative; display:block; height:calc(var(--soejle) + 42px); margin-bottom:17px}
.fk-plot svg{display:block; width:100%; height:100%; overflow:visible}
.fk-plot path{fill:none; vector-effect:non-scaling-stroke}
.fk-b{stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.fk-f{stroke:var(--zone5); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.fk-plot path.fk-graver{fill:var(--zone5); fill-opacity:.2}
.fk-plot path.fk-frisk{fill:var(--zone3); fill-opacity:.26}
.fk-p{position:absolute; right:-4px; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; box-shadow:0 0 0 2px var(--g1, #FFF6E6)}
.fk-pf{background:var(--zone5)} .fk-pb{background:var(--ink)}
.fk-akse{position:absolute; left:0; right:0; top:100%; display:flex; justify-content:space-between; margin-top:3px; font-family:var(--skrift-tal); font-size:11.5px; font-weight:600; color:var(--daempet)}
.fk-navne{position:relative; display:block; height:calc(var(--soejle) + 42px)}
.fk-n{position:absolute; left:0; transform:translateY(-50%); font-family:var(--skrift-tal); font-size:12px; font-weight:700; color:var(--daempet); white-space:nowrap; line-height:1}
.fk-n b{font-size:calc(var(--f-krop) - 1px); font-weight:800; color:var(--tekst)}
/* "Your sleep is already here": et lille hvidt kort, ikke en ny hovedperson. */
#idag-krop-note .soevn-tilbud{margin-top:8px; padding:10px 12px; border:none; border-radius:18px; background:#fff; box-shadow:0 10px 20px -16px var(--skygge)}
#idag-krop-note .soevn-tilbud::before{display:none}
#idag-krop-note .sb-top{align-items:flex-start; gap:10px}
#idag-krop-note .sb-ikon{flex:none; width:32px; height:32px; background:var(--ink); box-shadow:none}
#idag-krop-note .sb-midt{flex:1 1 auto; min-width:0}
#idag-krop-note .sb-titel{margin:0; font-size:15px; line-height:1.2}
#idag-krop-note .sb-tekst{margin:2px 0 0; font-size:12.5px; line-height:1.3}
#idag-krop-note .sb-tekst b{color:var(--tekst)}
#idag-krop-note .sb-knapper{gap:12px; margin-top:8px}
#idag-krop-note .sb-ja{min-height:34px; padding:0 14px; font-size:14px; border-radius:11px}
#idag-krop-note .sb-aldrig{padding:6px 2px; font-size:12.5px}


/* ══ DAGSLYS (4/11 2026, brugeren: "relativ lys nuance men med lidt mere spil", Zwift skifter efter
   tidspunktet paa dagen, stjerner og bjerge; mock docs/mockups/dagslys.html, fortaelling
   docs/historik/design-4-11.md) ═══════════════════════════════════════════════════════════
   Himlen foelger uret: dagslysTid() i forma.js saetter body[data-tid] (daggry 05-09, dag 09-16,
   gylden 16-20, nat 20-05). Toppen er himlens to toner, der toner over i cremen (--g1) fra ca. 60 %;
   kort, tal og skrift er uaendrede. Et sol-/maaneskaer ligger i himlen og bag capacity-ringen; om natten
   svage stjerner oeverst. Horisonten er en bloed kam i himlens egen tone (--horisont); saet den til
   transparent, hvis den skal vaek. Kun i appen (body.forma-app): de offentlige sider beholder cremen.
   Variablerne staar paa html (html::after arver fra html, ikke body). Lagene: html::after = himmel + skaer (+ stjerner), body::after = horisonten (maske). Begge z-index -1,
   og html::after staar foerst i traeet, saa horisonten ligger oven paa himlen. */
html:has(body.forma-app){--himmel-a:#C6E0FF; --himmel-b:#E6F1FF; --skaer:#FFFDF2; --skaer-x:70%; --skaer-y:6%; --horisont:rgba(40,80,140,.07);
  --top-taage:color-mix(in srgb, var(--himmel-b) 62%, transparent); --top-taage-taet:color-mix(in srgb, var(--himmel-a) 86%, transparent)}
html:has(body.forma-app[data-tid="daggry"]){--himmel-a:#FFCFB8; --himmel-b:#FFE6D3; --skaer:#FFB084; --skaer-x:18%; --skaer-y:30%; --horisont:rgba(140,70,60,.09)}
html:has(body.forma-app[data-tid="gylden"]){--himmel-a:#FFCB80; --himmel-b:#FFE3B5; --skaer:#FFA83A; --skaer-x:84%; --skaer-y:34%; --horisont:rgba(150,80,20,.10)}
html:has(body.forma-app[data-tid="nat"]){--himmel-a:#AEB6DC; --himmel-b:#DDDCEF; --skaer:#F4F3FF; --skaer-x:78%; --skaer-y:14%; --horisont:rgba(40,45,90,.10)}
html:has(body.forma-app)::after{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at var(--skaer-x) var(--skaer-y), var(--skaer) 0, color-mix(in srgb, var(--skaer) 55%, transparent) 9%, transparent 32%),
             linear-gradient(180deg, var(--himmel-a) 0, var(--himmel-b) 34%, var(--g1) 62%)}
html:has(body.forma-app[data-tid="nat"])::after{
  background:radial-gradient(1.2px 1.2px at 12% 9%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 28% 4%, #fff 60%, transparent 61%),
             radial-gradient(1.4px 1.4px at 41% 12%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 57% 7%, #fff 60%, transparent 61%),
             radial-gradient(1.2px 1.2px at 66% 15%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 83% 4%, #fff 60%, transparent 61%),
             radial-gradient(1.6px 1.6px at 91% 13%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 8% 20%, #fff 60%, transparent 61%),
             radial-gradient(1.2px 1.2px at 35% 22%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 73% 23%, #fff 60%, transparent 61%),
             radial-gradient(1px 1px at 50% 18%, #fff 60%, transparent 61%), radial-gradient(1.3px 1.3px at 21% 15%, #fff 60%, transparent 61%),
             radial-gradient(circle at var(--skaer-x) var(--skaer-y), var(--skaer) 0, color-mix(in srgb, var(--skaer) 55%, transparent) 9%, transparent 32%),
             linear-gradient(180deg, var(--himmel-a) 0, var(--himmel-b) 34%, var(--g1) 62%)}
/* Horisonten: body::after var cremens flade (ovenfor); nu er den kammen. Masken er to kamme, den bageste svagere. */
body.forma-app::after{inset:auto; top:34%; left:-4%; right:-4%; height:26%; background:var(--horisont);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 72 L40 58 L75 66 L110 44 L150 60 L185 38 L215 52 L250 30 L285 50 L320 40 L355 56 L400 46 L400 100 L0 100Z' fill='%23fff' fill-opacity='.55'/%3E%3Cpath d='M0 86 L60 74 L120 82 L180 68 L240 78 L300 66 L360 76 L400 70 L400 100 L0 100Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 72 L40 58 L75 66 L110 44 L150 60 L185 38 L215 52 L250 30 L285 50 L320 40 L355 56 L400 46 L400 100 L0 100Z' fill='%23fff' fill-opacity='.55'/%3E%3Cpath d='M0 86 L60 74 L120 82 L180 68 L240 78 L300 66 L360 76 L400 70 L400 100 L0 100Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
/* Skaeret bag ringen: isolation, ellers ligger ::before (z -1) under html::after, som staar sidst i traeet. */
.morgen .ring, .goal .ring{isolation:isolate}
.morgen .ring::before, .goal .ring::before{content:''; position:absolute; inset:-16px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--skaer) 78%, transparent) 0, transparent 70%)}
/* Datolinjen over dommen (fra mocken): ugedag + tid paa dagen, saa dagen kendes uden Plan. */
.morgen-dato{display:flex; align-items:center; gap:7px; font-family:var(--skrift-tal); font-feature-settings:normal; font-weight:700; font-size:13px; color:var(--daempet); margin-bottom:4px}
.morgen-dato i{width:6px; height:6px; border-radius:50%; background:var(--rav); flex:0 0 6px}
/* Faserne paa Plan i almindelig skrift (versalerne var det eneste sted i appen). */
.fase-spor span{text-transform:none; letter-spacing:0; font-size:11px; font-weight:700; font-stretch:var(--bredde); font-family:var(--skrift-tal); font-feature-settings:normal}

/* ══ ACTIVITIES OG WORKOUTS SOM I DAGSLYS-MOCKEN (4/11 2026, brugerens billeder: "Dine farver er bedre i
   mock up her! Stoerrelsen paa workouts er ogsaa bedre!") ══════════════════════════════════════
   Farverne i soejlerne var de samme (maalt: #4A99F8/#5DC499/#EE813C); forskellen var, at titlen og
   All/Ride stod paa cremen over det navy kort. Nu er overskrift, (i) og valget inde i kortet, som i mocken,
   og soejlerne har ingen streger mellem lagene. Workouts: kortet havde dobbelt polstring (18 px paa kortet
   + 14 px paa summary): nu 16/18 som mockens kort. */
.cockpit-akt > .cockpit-in:not(.low){background:var(--ink); color:#fff; margin:16px var(--rende) 0; padding:16px 16px 2px; border-radius:24px 24px 0 0; gap:12px;
  --tekst:#fff; --daempet:rgba(255,255,255,.72); --daempet-2:rgba(255,255,255,.55); --kant:rgba(255,255,255,.14); --kant-svag:rgba(255,255,255,.1); --felt:rgba(255,255,255,.1); --kort-2:rgba(255,255,255,.12)}
.cockpit-akt > .cockpit-in:not(.low) .lbl{margin-top:0; min-height:28px; justify-content:space-between; font-family:var(--skrift-tal); font-feature-settings:normal}
.cockpit-akt > .cockpit-in:not(.low) .lbl b{font-size:19px; font-weight:750; font-stretch:var(--bredde); color:#fff; letter-spacing:-.01em}
.cockpit-akt > .cockpit-in:not(.low) .lbl .inf{width:28px; height:28px; border:1.5px solid rgba(255,255,255,.3); color:#fff; background:none; border-radius:50%}
.cockpit-akt .akt-seg{background:rgba(255,255,255,.1); border:none}
.cockpit-akt .akt-seg .thumb{background:#fff; box-shadow:none}
.cockpit-akt .akt-seg button{color:rgba(255,255,255,.7); font-family:var(--skrift-tal); font-feature-settings:normal; font-weight:700; font-size:14px}
.cockpit-akt .akt-seg button.on, .cockpit-akt .akt-seg button.aktiv, .cockpit-akt .akt-seg button[aria-selected="true"]{color:var(--ink)}
.akt-road, #cockpit .akt-road{margin-top:0; border-radius:0 0 24px 24px; padding-top:10px}
.g-uger{gap:5px}
.g-soejle{gap:0}
/* Workouts: én polstring, mockens afstande. */
.bib-r{padding:16px 18px; margin-bottom:14px}
.bib-r > summary{padding:0}
.bib-graf{margin-top:12px}
.bib-load{margin-top:10px}

/* ══ PLANS DAGKORT SOM I DAGSLYS-MOCKEN (4/11 2026, brugerens billeder: "Din mock up er ogsaa bedre her") ══
   Stoerre brik (84), titlen 21 px, byttet som 44 px flise, raekkerne med en flise om ikonet og en
   undertekst under titlen, filerne samlet midt under Send. Today's kort paa forsiden er uroert (det skal
   passe paa én skaerm); Todays aabne ark (.dag-krop) faar raekkerne. */
#plan-dage .dag.vis > .pdag{grid-template-columns:84px minmax(0,1fr); column-gap:14px}
#plan-dage .dag.vis .pd-dag{width:84px; height:84px; border-radius:18px; font-size:13px; font-weight:700}
#plan-dage .dag.vis .pd-dag b{font-size:30px}
/* Koert dag: karakteren er brikkens modstykke. Grid-reglen med :has(.pd-karakter) (58 px) er staerkere end
   reglen ovenfor, saa uden denne laa den 84 px store brik ind over passets navn. */
#plan-dage .dag.vis > .pdag:has(.pd-karakter){grid-template-columns:84px minmax(0,1fr) 84px; column-gap:14px}
#plan-dage .dag.vis .pd-karakter .gr{width:84px; height:84px; font-size:28px}
#plan-dage .dag.vis .pd-navn{font-size:21px; line-height:1.1; row-gap:8px}
#plan-dage .dag.vis .pd-navn .pd-min{font-size:14px}
#plan-dage .dag.vis .pd-midt .segs{margin:14px 0 0 -98px; width:calc(100% + 98px)}
#plan-dage .dag.vis .pd-skift{position:relative; z-index:2; width:44px; height:44px; flex-basis:44px; border-radius:13px}
#plan-dage .dag.vis .pdag:has(.pd-skift) .pd-navn, #plan-dage .dag.vis .pdag:has(.pd-skift) .pd-under{padding-right:54px}
/* Raekkerne under passet */
.dag-krop .fa-raekke, .dag-krop .dag-tid-r1{gap:14px}
.dag-krop .fa-raekke{padding:11px 0; min-height:62px}
.dag-krop .dag-tid{padding:11px 0}
.dag-krop .fa-ikon, .dag-krop .dag-tid-ur{flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:var(--kort-2); display:grid; place-items:center; color:var(--rav-tekst)}
.dag-krop .fa-ikon svg{width:20px; height:20px}
/* .dag-tid-ur ER selve svg'en: polstring goer stregen 20 px inde i flisen. */
.dag-krop .dag-tid-ur{padding:10px; box-sizing:border-box}
.dag-krop .fa-t b, .dag-krop .dag-tid-navn{font-size:15px}
.dag-krop .fa-t small, .dag-krop .dag-tid-r1 > b{font-family:var(--skrift-tal); font-feature-settings:normal; font-weight:700; font-size:14px; color:var(--daempet)}
.dag-krop .fa-t.fa-t-under{flex-direction:column; align-items:flex-start; gap:2px}
.dag-krop .fa-t .fa-under{font-family:var(--skrift); font-weight:500; font-size:13px; white-space:normal}
.dag-krop .dag-tid-navn .tid-arv{display:block; font-size:13px; font-weight:500; margin-top:2px}
.dag-krop .dag-tid .tid-spor{margin-left:54px}
/* Filerne samlet midt under Send */
/* To pas paa én dag (brugerens billede 4/11): den LILLE graf i paslisten (.segs.kompakt) maa ikke traekkes ud
   under brikken som den store; kun grafen i fuld bredde under navnet gaar ud over brikkens spalte. */
#plan-dage .dag.vis .pd-midt .segs.kompakt, #dagskort .pd-midt .segs.kompakt{margin-left:0; width:100%}
/* Dag med flere pas (brugerens billede 4/11): foerste navn maa ikke loebe ind under Plans byt-knap, og hvert pas
   viser sin slags som paa en dag med ét pas. Paa Plan staar maerke og tid paa linjen under navnet. */
#plan-dage .dag.vis .pdag:has(.pd-skift) .pd-r:first-child .pd-navn-t{padding-right:54px; box-sizing:border-box}
@media (max-width:359px){
  #plan-dage .dag.vis .pdag:has(.pd-skift) .pd-r:first-child .pd-navn-t{padding-right:48px}
  #plan-dage .dag.vis .pd-r-t .pd-navn-t{font-size:15px}
}
.pd-r-t:has(.pd-art-maerke){align-items:center; row-gap:6px}
#plan-dage .dag.vis .pd-r-t:has(.pd-art-maerke) .pd-navn-t{flex:1 0 100%}
.pd-r-t .pd-art-maerke{min-height:22px; padding:0 8px; border-radius:7px; font-size:12.5px}
/* Todays regel er ingen rul: de to maerker maa ikke skubbe kortet ud over bundbjaelken. */
#dagskort .pd-r-t:has(.pd-art-maerke){row-gap:2px}
#dagskort .pd-r-t .pd-art-maerke{min-height:20px}

/* ══ SESSIONSARKET (4/11 2026, brugeren med Zwift: "mere vaerdig til appen") ═════════════════════
   Toppen er navy helt ud til arkets kant, og passets graf staar paa arkets hvide bund. Under den
   staar trappen: hvert trin er en blok fra grafen, vendt paa siden. Laengden = intensiteten paa
   grafens skala, hoejden = tiden, farven = zonen. Teksten er navy, som zonemaerkerne. */
.pa-helt, .stige{--st-neutral:color-mix(in oklab, var(--ink) 30%, #fff); --st-rampe:color-mix(in oklab, var(--zone1) 72%, #fff)}
.fa-ark.pa-ark, #dagskort .dag.foldbar[open] > .dag-krop.pa-ark{max-height:92vh; max-height:92dvh; padding-top:0}
.fa-ark.pa-ark > .ark-greb, #dagskort .dag-krop.pa-ark > .ark-greb{position:absolute; z-index:2; top:8px; left:50%; margin:0 0 0 -20px; width:40px; background:rgba(255,255,255,.4)}
.pa-helt{--tekst:#FFFFFF; --daempet:rgba(255,255,255,.76); --daempet-2:rgba(255,255,255,.58); --kant-staerk:rgba(255,255,255,.28);
  --bg:var(--ink); --kort:var(--ink); --skinne:rgba(255,255,255,.14); --felt:rgba(255,255,255,.1);
  background:var(--ink); color:#fff; margin:0 calc(-1 * var(--rende)); padding:24px var(--rende) 0; border-radius:24px 24px 0 0}
.pa-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.pa-top h3{margin:0; color:#fff; font-size:27px; font-weight:800; line-height:1.08; font-stretch:var(--bredde)}
.pa-top .ark-luk{flex:none; color:var(--rav); font-size:16px; font-weight:700; min-height:44px; margin:-11px 0 0; padding:0 0 0 12px; background:none; border:none}
.pa-art{display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin-top:7px}
.pa-art > span:not(.pd-art-maerke){font-family:var(--skrift-saetning); font-size:14px; line-height:1.3; color:rgba(255,255,255,.84)}
.pa-tal{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:14px}
.pa-tal > span{display:flex; flex-direction:column; gap:1px; min-width:0}
.pa-tal b{font-family:var(--skrift-tal); font-size:25px; font-weight:800; line-height:1.1; color:#fff; white-space:nowrap; font-stretch:var(--bredde)}
.pa-tal small{font-size:13px; font-weight:600; color:rgba(255,255,255,.72)}
.pa-load{margin-top:30px}
.pa-load .lspor{height:6px}
.pa-helt .lspor-normal{background:#fff}
.pa-helt .lspor-normal > span{color:rgba(255,255,255,.84); font-size:12px}
.pa-ark .pa-helt .segs:not(.kompakt), .fold-ark .pa-helt .segs:not(.kompakt), #dagskort .pa-helt .segs:not(.kompakt){height:118px; margin:6px calc(-1 * var(--rende)) 0; background:none}
.pa-helt .segs i{background:var(--c, var(--zone2))}
.pa-helt .segs i.rampe{background:var(--st-rampe)}
.pa-helt .segs-ftp{border-top:1.5px dashed rgba(255,255,255,.34)}
.fa-ark .pa-helt .segs-ftp span, #dagskort .dag.foldbar .dag-krop .pa-helt .segs-ftp span{right:var(--rende); background:var(--ink); color:rgba(255,255,255,.84)}
/* Pladen paa Plan: grafen og maalene er vejen ind i arket, i arkets egen navy. Rav betyder handling her
   som paa Close og Adjust availability. Grafen staar paa pladens bund som i arket. */
.dag-krop .fold-ark > summary.pas-plade{display:block; position:relative; margin:14px 0 4px; padding:12px 14px 0; border-radius:18px; overflow:hidden; background:var(--ink); color:#fff;
  --tekst:#FFFFFF; --daempet:rgba(255,255,255,.76); --bg:var(--ink); --ark-flade:var(--ink); --kort:var(--ink);
  -webkit-tap-highlight-color:transparent; transition:transform .12s}
.dag-krop .fold-ark > summary.pas-plade:active{transform:scale(.985)}
.dag-krop .fold-ark > summary.pas-plade:focus-visible{outline:3px solid var(--rav); outline-offset:2px}
.pp-top{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px}
.pp-load{font-family:var(--skrift-tal); font-size:15px; font-weight:800; font-stretch:var(--bredde); color:#fff}
.pp-aabn{display:inline-flex; align-items:center; gap:3px; margin-left:auto; font-family:var(--skrift-tal); font-size:15px; font-weight:700; color:var(--rav)}
.pas-plade .maal-enheder{margin:4px 0 0}
.pas-plade .maal-enheder b, .pas-plade .maal-enheder i{color:#fff}
.dag-krop .pas-plade .segs:not(.kompakt){height:92px; margin:6px -14px 0; background:none}
.pas-plade .segs i{background:var(--c, var(--zone2))}
.pas-plade .segs i.rampe{background:color-mix(in oklab, var(--zone1) 72%, #fff)}
.pas-plade .segs-ftp{border-top:1.5px dashed rgba(255,255,255,.34)}
.fa-ark .pas-plade .segs-ftp span, .pas-plade .segs-ftp span{right:14px; background:var(--ink); color:rgba(255,255,255,.84)}
.dag.kan-aabne > .pdag{cursor:pointer}
/* To pas: turens lille graf er overfloedig, naar pladen staar lige under. Styrkens prikker bliver. */
.dag.kan-aabne:has(.pas-plade) > .pdag .pd-r-fig:has(.segs){display:none}
/* Et kort sprint paa en lang tur: en soejle i stedet for en haarfin streg. */
.segs i.smal{flex-shrink:0; min-width:5px; border-radius:3px 3px 0 0}
/* Under toppen */
.pa-krop{padding-top:16px; color:var(--daempet)}
.pa-tekst{margin:0 0 14px; font-family:var(--skrift-saetning); font-size:15px; line-height:1.45; color:var(--tekst)}
/* Formaalet staerkt, udfoerelsen i samme afsnit: to-tre linjer uden etiketter. */
.pa-vej{margin:0 0 12px; font-family:var(--skrift-saetning); font-size:15px; line-height:1.38; color:var(--tekst)}
.pa-vej b{font-weight:700; color:var(--ink)}
/* Trappen */
/* --st-fuld: fyldet naar aldrig ind under tallene til hoejre; forholdet mellem trinene er det samme.
   Hvert trin er én linje (4/11 2026, "fylder lidt for meget"): tid til venstre, watt og puls i hver
   sin spalte til hoejre, saa et helt pas kan ses uden at rulle. Hoejden siger stadig, hvor laenge. */
.stige{--st-fuld:52%; --st-puls:76px; display:flex; flex-direction:column; gap:2px}
.st{position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:var(--rh, 34px); padding:3px 10px;
  border-radius:10px; overflow:hidden; color:var(--ink); background:color-mix(in oklab, var(--c) 15%, #fff)}
.st-fyld{position:absolute; inset:0 auto 0 0; width:calc(var(--a) * var(--st-fuld)); background:var(--c); border-radius:0 10px 10px 0; transform-origin:left;
  animation:st-ud .5s cubic-bezier(.2,.9,.3,1) backwards; animation-delay:calc(180ms + var(--i, 0) * 40ms)}
@keyframes st-ud{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){ .st-fyld{animation:none} }
.st-rampe{background:color-mix(in oklab, var(--zone1) 16%, #fff)}
.st-rampe .st-fyld{width:var(--st-fuld); border-radius:0; clip-path:polygon(0 0, var(--top) 0, var(--bund) 100%, 0 100%)}
.st-v, .st-h{position:relative; display:flex; align-items:baseline; min-width:0; line-height:1.15}
.st-v{flex:1 1 auto; gap:6px}
.st-h{flex:0 1 auto; gap:6px; justify-content:flex-end; text-align:right}
.st b{font-family:var(--skrift-tal); font-size:15px; font-weight:800; font-stretch:var(--bredde); white-space:nowrap}
.st b small{font-size:11px; font-weight:700}
.st-v > small, .st-h > small{font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap}
/* Pulsen i sin egen spalte, ogsaa naar raekken ingen puls har: saa staar watten lodret over hinanden. */
.st-h > b + small{min-width:var(--st-puls)}
.st-h-tom > b:only-child{margin-right:calc(var(--st-puls) + 6px)}
/* En test: ordet er instruktionen og maa gerne fylde to linjer; tallet staar under "expect around". */
.st-maksimal .st-v{flex-direction:column; gap:0}
.st-maksimal .st-v > small{white-space:normal; max-width:190px}
.st-maksimal .st-h{flex-direction:column; align-items:flex-end; gap:0}
.st-saet{position:relative; display:flex; flex-direction:column; gap:2px}
.st-saet .st{padding-left:48px}
.st-gange{position:absolute; z-index:1; inset:0 auto 0 0; width:40px; display:flex; align-items:baseline; justify-content:center; align-content:center; flex-wrap:wrap; gap:1px;
  background:var(--ink); color:#fff; border-radius:10px; font-family:var(--skrift-tal); font-stretch:var(--bredde)}
.st-gange b{font-size:19px; font-weight:800; line-height:1}
.st-gange small{font-family:var(--skrift-saetning); font-size:14px; font-weight:700; line-height:1}
.pa-krop .restitution-note{margin-top:12px}
/* Et kapitel mere i samme ark (styrken efter turen) og et ark i Todays ark: kort i stedet for kant-til-kant */
.pa-helt.pa-naeste{margin:26px calc(-1 * var(--rende)) 0; border-radius:24px 24px 0 0; padding-top:20px}
#dagskort .dag-krop .fold-ark .pa-helt{margin:8px 0 0; border-radius:20px}
#dagskort .dag-krop .fold-ark .pa-helt .ark-luk{display:none}
#dagskort .dag-krop .fold-ark .pa-helt .segs:not(.kompakt){border-radius:0 0 20px 20px; overflow:hidden}
/* Styrken */
.pa-styrke .se-som-toggle{margin-top:16px; background:rgba(255,255,255,.1)}
.pa-styrke .se-som-knap{color:rgba(255,255,255,.84)}
.pa-styrke .se-som-knap.aktiv{background:#fff; color:var(--ink); border-color:transparent; box-shadow:none}
.pa-saet{display:flex; justify-content:space-between; gap:6px; margin-top:16px; padding-bottom:16px}
.pa-saet span{display:flex; gap:4px}
.pa-saet i{display:block; width:10px; height:10px; border-radius:50%; background:var(--zone-styrke)}
.ov-liste{display:flex; flex-direction:column; gap:2px}
.ov{padding:6px 10px; border-radius:10px; background:color-mix(in oklab, var(--zone-styrke) 11%, #fff); color:var(--ink)}
.ov-top{display:flex; align-items:center; gap:8px; min-height:34px}
.ov-navn{flex:1; min-width:0; font-family:var(--skrift-tal); font-size:15px; font-weight:800; line-height:1.15; font-stretch:var(--bredde)}
.ov-saet{flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.1}
.ov-saet b{font-family:var(--skrift); font-size:15px; font-weight:800; white-space:nowrap; font-stretch:var(--bredde)}
.ov-saet small{font-size:11px; font-weight:600}
.ov-kg{flex:none}
.ov-kg .kg-pille{background:#fff; height:34px; min-height:34px}
.ov .styrke-kg{margin-top:2px; font-size:13px; font-weight:600; color:var(--daempet)}
.ov-note{margin:1px 0 0; font-family:var(--skrift-saetning); font-size:13px; line-height:1.34; color:var(--tekst)}
/* Hele cue-linjen aabner teknikken; pilen siger, at der er mere. */
.ov-teknik > summary, .ov-rm > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:22px}
.ov-teknik > summary::-webkit-details-marker, .ov-rm > summary::-webkit-details-marker{display:none}
.ov-teknik > summary .ov-note{flex:1; margin:0}
.ov-teknik > summary > svg{flex:none; color:var(--rav-tekst); transition:transform .15s}
.ov-teknik[open] > summary > svg{transform:rotate(90deg)}
.ov-hvordan, .ov-rm > summary{font-weight:700; font-size:13px; color:var(--rav-tekst)}
.ov-hvordan{flex:1}
.ov-teknik p, .ov-rm p{margin:6px 0 2px; font-family:var(--skrift-saetning); font-size:14px; line-height:1.45; color:var(--tekst)}
.ov-rm{margin-top:10px; padding:0 2px}
.pa-krop .styrke-tillaeg{margin:12px 0 0}
.pa-krop .st-tekst{margin:0; font-size:14px; line-height:1.45; color:var(--tekst)}
.pa-krop .st-link{display:inline-flex; align-items:center; min-height:36px; padding:0; background:none; border:none; font-weight:700; font-size:14px; color:var(--rav-tekst)}
.pa-krop .styrke-log{margin-top:12px}
/* Workouts-kortet: samme trappe og samme oevelser i kortets krop. */
.bib-krop .stige, .bib-krop .ov-liste{margin:12px 0}
.bib-krop .ov-rm{margin:0 0 10px}
/* Lave skaerme: trappen skal kunne anes under toppen. */
@media (max-height:700px){
  .pa-ark .pa-helt .segs:not(.kompakt), .fold-ark .pa-helt .segs:not(.kompakt), #dagskort .pa-helt .segs:not(.kompakt){height:72px}
  .pa-load{margin-top:22px}
  .pa-art > span:not(.pd-art-maerke){display:none}
}
@media (max-width:350px){
  /* Raekkens vaerdi maa bryde: "Planned session / Steady endurance" loeb ind i pilen. */
  .dag-krop .fa-raekke .fa-t small:not(.fa-under){min-width:0; white-space:normal; text-align:right}
  .pa-top h3{font-size:23px}
  .pa-tal b{font-size:21px}
  #plan-dage .dag.vis > .pdag:has(.pd-karakter){grid-template-columns:58px minmax(0,1fr) 58px; column-gap:10px}
  #plan-dage .dag.vis > .pdag:has(.pd-karakter) .pd-dag{width:58px; height:58px; font-size:12px}
  #plan-dage .dag.vis > .pdag:has(.pd-karakter) .pd-dag b{font-size:22px}
  #plan-dage .dag.vis .pd-karakter .gr{width:58px; height:58px; font-size:20px}
  /* For smalt til to spalter: pulsen under watten, og trinet maa vokse til to linjer. */
  .stige{--st-fuld:60%}
  .st{min-height:max(var(--rh, 34px), 38px); padding:3px 9px}
  .st-h{flex-direction:column; align-items:flex-end; gap:0}
  .st-h > b + small{min-width:0}
  .st-h-tom > b:only-child{margin-right:0}
  .st-saet .st{padding-left:44px}
  .st-gange{width:36px}
  .st-gange b{font-size:17px}
  .ov-navn{font-size:14px}
}

/* ══ TODAY: LUFT OG FREMGANG (4/11 2026, brugeren med Zwift: "mere luft", "for kompakt", "den nederste linje
   med form ... er forvirrende") ═══════════════════════════════════════════════════════════════════
   Raekken Load today/Next hard/Form er vaek, ugen er et helt kort, og kroppen har to linjer pr. flise.
   Under kroppen staar fremgangen som en resultattavle: tallet stort og bredt, ordet under, pilen ved tallet.
   Det ledige rum gaar til afstanden mellem grupperne, ikke over datoen (idagTilpas() og auto-margenerne). */
#idag-indhold{--luft:20px; --f-fr:25px; --fr-felt:30px}
#idag-indhold[data-lag="stor"]{--luft:24px; --f-fr:27px; --fr-felt:32px}
#idag-indhold[data-lag="taet"]{--luft:15px; --f-fr:23px; --fr-felt:28px}
#idag-indhold[data-lag="taettest"]{--luft:9px; --f-fr:21px; --fr-felt:26px}
#idag-cockpit{margin-top:0; padding-bottom:calc(var(--luft) * 1.4)}
#dagskort, #idag-indhold #dagskort{margin:auto 0 calc(var(--luft) * 1.4) !important}
#idag-cockpit .cockpit-in, #v-app #idag-cockpit .cockpit-in{padding-top:calc(var(--luft) * .6)}
/* Samme tre spalter som fremgangen under, saa de to raekker staar paa hinanden */
#idag-krop.dials, #v-app #idag-cockpit #idag-krop{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.fremgang{appearance:none; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); width:100%; margin:var(--luft) 0 0; padding:0; border:none; background:none; color:var(--tekst); text-align:center; cursor:pointer}
.fremgang[hidden]{display:none}
.fr-c{display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0}
.fr-tal{display:flex; align-items:center; justify-content:center; gap:5px; height:var(--fr-felt); font-family:var(--skrift-tal); font-feature-settings:normal}
.fr-tal b{font-size:var(--f-fr); font-weight:800; font-stretch:112%; line-height:1}
.fr-pil{display:inline-flex; align-items:center; gap:0; font-size:13.5px; font-weight:800; font-stretch:var(--bredde); line-height:1}
.fr-pil svg{stroke-width:3}
.fr-pil.op{color:#0A8A68}
.fr-pil.ned{color:var(--daempet)}
.fr-pil.flad{color:var(--daempet)}
/* Hvad pilene er maalt imod (brugeren 4/11: "eksplicit men laekkert og anonymt"): én lille linje, samme ordvalg
   som kroppens "vs usual". Over to spalter er den en klamme, der samler dem: samme maal, samme pejlepunkt. */
.fr-mod{grid-row:2; display:flex; align-items:flex-start; justify-content:center; gap:7px; margin-top:3px; font-family:var(--skrift-tal); font-feature-settings:normal; font-size:11.5px; font-weight:700; font-stretch:var(--bredde); line-height:1; color:var(--daempet); white-space:nowrap}
.fr-mod.to::before, .fr-mod.to::after{content:""; flex:1; max-width:64px; height:5px; margin-top:1px; border-bottom:1.5px solid var(--kant-staerk); border-left:1.5px solid var(--kant-staerk); border-bottom-left-radius:5px}
.fr-mod.to::after{border-left:none; border-right:1.5px solid var(--kant-staerk); border-bottom-left-radius:0; border-bottom-right-radius:5px}
.fr-c small{font-family:var(--skrift-tal); font-feature-settings:normal; font-size:12.5px; font-weight:700; font-stretch:var(--bredde); line-height:1.1; color:var(--daempet); white-space:nowrap}
.fr-stime .fr-tal{gap:3px}
.fr-stime i{display:grid; place-items:center; width:calc(var(--fr-felt) * .8); height:var(--fr-felt); border-radius:8px; background:var(--ink); color:#fff; font-style:normal; font-size:calc(var(--f-fr) * .8); font-weight:800; font-stretch:112%; line-height:1}
/* Dagens fod: de to udveje side om side, samme sprog som arkenes raekker (ikonflise + ord) */
.dag-hale{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 12px; margin:8px 0 0; padding:3px 0 0; border-top:1px solid var(--kant-svag)}
.dag-hale > :only-child{grid-column:1 / -1}
.dag-hale .dh-celle, .dag-hale > .fold-ark > .fa-raekke{display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; height:auto; min-height:42px; margin:0; padding:0; border:none; border-radius:12px; background:none; color:var(--tekst); text-align:left; cursor:pointer}
.dag-hale .dh-celle:hover{background:none; color:var(--tekst)}
.dag-hale .dh-celle:active, .dag-hale > .fold-ark > .fa-raekke:active{transform:scale(.98)}
.dag-hale .dh-celle:focus-visible, .dag-hale > .fold-ark > .fa-raekke:focus-visible{outline:2px solid var(--rav-tekst); outline-offset:2px}
.dh-flise{flex:0 0 32px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--kort-2); color:var(--rav-tekst)}
.dh-ord{min-width:0; font-family:var(--skrift); font-size:13.5px; font-weight:700; font-stretch:var(--bredde); line-height:1.15; text-wrap:balance}
/* Efter turen er der kun én udvej: lavere, saa det koerte kort stadig kan vaere paa skaermen */
.dag-hale > .fold-ark:only-child > .fa-raekke{min-height:36px}
.dag-hale > .fold-ark:only-child .dh-flise{flex-basis:28px; width:28px; height:28px; border-radius:9px}
/* Passet foer turen: ⟳ er flyttet til foden, saa grafen faar hele bredden, og ⌄ staar for sig selv oppe ved navnet */
#dagskort .pdag:has(.pd-rail){position:relative; grid-template-columns:var(--brik) minmax(0, 1fr)}
#dagskort .pd-handlinger.pd-rail{position:absolute; top:0; right:0; grid-column:auto; grid-row:auto; display:block; margin:0}
#dagskort .pdag:has(.pd-rail) .pd-navn{padding-right:46px; box-sizing:border-box}
#dagskort .pdag:has(.pd-rail) .pd-midt .segs.kompakt{margin-left:calc(var(--brik) * -1 - 12px); width:calc(100% + var(--brik) + 12px)}
/* Send-pladen: samme familie som arkets top og pladen paa Plan. Rav er kun skiven. */
.send-plade{display:block; margin:16px 0 14px; padding:0; border:none; border-radius:18px; background:var(--ink); color:#fff; overflow:hidden; box-shadow:0 14px 26px -16px var(--skygge)}
.send-knap{appearance:none; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:64px; margin:0; padding:10px 12px 10px 18px; border:none; border-radius:0; background:none; color:#fff; font-family:var(--skrift-tal); font-feature-settings:normal; font-size:16px; font-weight:800; font-stretch:var(--bredde); line-height:1.15; text-align:left; cursor:pointer; box-shadow:none}
.send-knap:focus-visible{outline:3px solid var(--rav); outline-offset:-3px; border-radius:18px}
.send-knap:disabled{cursor:default}
.send-skive{flex:0 0 44px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--rav); color:var(--paa-rav, #17233A); transition:transform .16s ease-out}
.send-knap:active .send-skive{transform:scale(.92)}
.send-knap.sender .send-skive{opacity:.6}
.send-knap.sendt .send-skive{background:var(--zone3); color:var(--ink)}
.send-filer{display:flex; align-items:center; gap:6px; min-height:48px; padding:6px 12px 6px 18px; border-top:1px solid rgba(255,255,255,.12); font-family:var(--skrift-tal); font-feature-settings:normal; font-size:13px; font-weight:700; font-stretch:var(--bredde); color:rgba(255,255,255,.72)}
.send-filer > span{margin-right:auto; white-space:nowrap}
.send-filer a{display:grid; place-items:center; min-width:48px; min-height:36px; padding:0 8px; border-radius:10px; background:rgba(255,255,255,.1); color:#fff; font-size:13px; font-weight:700; text-decoration:none}
.send-filer a:active{background:rgba(255,255,255,.2)}
.send-filer a:focus-visible{outline:2px solid var(--rav); outline-offset:1px}
@media (max-width:359px){
  .dh-ord{font-size:12.5px}
  .dag-hale{gap:0 8px}
  .dh-flise{flex-basis:30px; width:30px; height:30px; border-radius:10px}
  .dag-hale .dh-celle, .dag-hale > .fold-ark > .fa-raekke{gap:7px}
  .send-filer a{min-width:42px; padding:0 6px}
  .fr-mod{font-size:11px}
}
@media (prefers-reduced-motion:reduce){ .send-skive{transition:none} }
/* Ugen er et helt kort, nu den ikke deler bund med raekken */
#idag-uge:not(:empty){border-radius:24px; padding-bottom:12px; margin-bottom:8px; box-shadow:0 18px 32px -16px var(--skygge)}
#idag-uge .uge-kort-load{margin-bottom:12px}
#idag-efter:not(:has(*:not(:empty))){margin:0}
/* Arket: hvad tallene betyder */
#idag-fremgang-ark{margin:6px 0 16px}
.fr-r{display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--kant-svag)}
.fr-r:last-child{border-bottom:none}
.fr-r-t{display:flex; flex-direction:column; gap:2px; font-family:var(--skrift-tal); font-feature-settings:normal}
.fr-r-t b{font-size:19px; font-weight:800; font-stretch:var(--bredde); line-height:1.1; white-space:nowrap; color:var(--tekst)}
.fr-r-t small{font-size:12px; font-weight:700; color:var(--daempet)}
.fr-r p{margin:0; font-size:14px; line-height:1.35; color:var(--tekst)}
@media (max-width:359px){
  .fr-tal b{font-size:calc(var(--f-fr) - 3px)}
  .fr-c small{font-size:11.5px}
}


/* ══ STARTGAETTET (5/11 2026, brugeren: "laekkert, simpelt og interaktivt") ══════════════════
   sgTegn(): samme navy kort og samme tal som "When can you train?" (.ugev), men en trappe, man
   traekker hen over. Trappens farve er hvor haardt: rav uden svar og ved A mix, zonernes groen
   og roed ved Easy og Hard. #sg-vink er advarslen over bundbjaelken, #ark-startgaet pop-up'en. */
.sgv{padding:18px 16px 16px; --sgv-farve:var(--rav)}
.sgv[data-haard="let"]{--sgv-farve:var(--z2)}
.sgv[data-haard="haard"]{--sgv-farve:var(--z5)}
.sgv-laes{min-height:62px; text-align:center; line-height:1}
.sgv-laes b{display:block; font-family:var(--skrift-tal); font-stretch:var(--bredde); font-size:44px; font-weight:800; color:var(--sgv-farve); font-variant-numeric:tabular-nums; letter-spacing:-.01em; transition:color .25s}
.sgv-laes b.sgv-tom{font-size:26px; line-height:44px; color:#fff}
.sgv-laes small{display:block; margin-top:4px; font-size:13px; font-weight:600; color:var(--daempet)}
.sgv-laes b.sgv-puf{animation:sgv-puf .22s cubic-bezier(.2,.9,.3,1.3)}
@keyframes sgv-puf{from{transform:scale(.9)}to{transform:none}}
.sgv-trappe{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:5px; align-items:end; margin-top:14px; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:pointer}
.sgv-trin{appearance:none; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; height:clamp(112px, 22dvh, 168px); padding:0; border:none; background:none; color:var(--daempet); font:inherit; cursor:inherit; -webkit-tap-highlight-color:transparent; touch-action:pan-y}
.sgv-trin:focus-visible{outline:2px solid var(--rav); outline-offset:2px; border-radius:10px}
.sgv-bane{flex:0 0 auto; display:block; height:calc((100% - 24px) * var(--h)); border-radius:10px; background:var(--ink-3); overflow:hidden; position:relative}
.sgv-bane i{position:absolute; inset:0; border-radius:inherit; background:var(--sgv-farve); transform:translateY(112%); transition:transform .22s cubic-bezier(.2,.8,.2,1), background .25s}
.sgv-trin.paa .sgv-bane i{transform:none}
.sgv-trin small{flex:0 0 17px; font-size:12px; font-weight:700; line-height:17px; font-variant-numeric:tabular-nums; white-space:nowrap}
.sgv-trin[aria-checked="true"] small{color:#fff}
.sgv-haard{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:16px}
.sgv-haard button{appearance:none; min-height:44px; padding:0 6px; border:none; border-radius:14px; background:var(--ink-2); color:#fff; font-family:var(--skrift-tal); font-size:15px; font-weight:700; cursor:pointer; transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent}
.sgv-haard button[aria-checked="true"]{background:var(--sgv-farve); color:var(--ink)}
.sgv-haard button:focus-visible{outline:2px solid #fff; outline-offset:2px}
.sgv-hint{margin:10px 0 0; text-align:center; font-family:var(--skrift-saetning); font-size:13.5px; font-weight:500; line-height:1.3; color:var(--daempet)}
.sgv-klar{padding:26px 16px 22px}
.sgv-klar .sgv-laes b{font-size:68px}
.sgv-klar .sgv-laes small{margin-top:8px; font-size:14px}

/* Today for en ny direkte kobling: samme trappe som pop-up'en, som figur. Rejser sig een gang. */
.sg-start{appearance:none; display:block; width:100%; margin-top:0; padding:22px 18px 18px; border:none; text-align:center; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
.sg-start:active{transform:scale(.99)}
.sg-start:focus-visible{outline:2px solid var(--rav); outline-offset:2px}
.sg-start-titel{display:block; font-family:var(--skrift-tal); font-stretch:var(--bredde); font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.01em; color:#fff}
.sg-start-tekst{display:block; margin-top:8px; font-family:var(--skrift-saetning); font-size:15px; font-weight:500; line-height:1.35; color:var(--daempet)}
.sg-start-trappe{margin-top:20px; cursor:inherit; touch-action:auto; pointer-events:none}
.sg-start-trappe .sgv-trin{height:clamp(84px, calc(100dvh - 500px), 280px); gap:0; transform-origin:bottom; animation:sg-trin-ind .5s cubic-bezier(.2,.9,.3,1.1) calc(var(--i) * 50ms + .1s) backwards}
.sg-start-trappe .sgv-bane{height:calc(100% * var(--h))}
.sg-start-svar .sgv-trin{height:clamp(72px, calc(100dvh - 590px), 220px)}
.sg-start-plan .sgv-trin{height:64px}
@keyframes sg-trin-ind{from{transform:scaleY(.15); opacity:0}to{transform:none; opacity:1}}
.sg-start .sgv-laes b{font-size:68px; min-height:68px; color:#fff}
.sg-start .sgv-laes small{margin-top:8px; font-size:14px}
.sg-start-ord{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:12px; font-size:14.5px; font-weight:700; color:#fff; text-align:left}
.sg-start-ord em{flex:0 0 auto; font-style:normal; color:var(--rav)}
.sg-start-ord + .sg-start-tekst{margin-top:6px; font-size:14px; text-align:left}
/* Naetterne i startkortet (5/11 2026): samme tre spalter som de andre navy kort. Fylder de, giver trappen plads. */
.sg-nat{display:block; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); text-align:left}
.sg-nat-titel{display:block; margin-bottom:8px; font-family:var(--skrift-saetning); font-size:13px; font-weight:600; line-height:1.2; color:var(--daempet)}
.sg-nat-raekke{display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); gap:10px}
.sg-nat-raekke b{display:block; font-family:var(--skrift-tal); font-stretch:var(--bredde); font-size:17px; font-weight:800; line-height:1.15; white-space:nowrap; color:#fff; font-variant-numeric:tabular-nums}
.sg-nat-raekke b small{font-size:12px; font-weight:700; color:var(--daempet)}
.sg-nat-raekke > span > small{display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--daempet)}
.sg-start-nat .sg-start-trappe .sgv-trin{height:clamp(72px, calc(100dvh - 590px), 230px)}
.sg-start-nat.sg-start-svar .sgv-trin{height:clamp(64px, calc(100dvh - 670px), 190px)}
/* Base + trappe + naetter + pas + uge skal kunne ses uden at rulle paa en iPhone (784 px til bundbjaelken). */
.sg-start-nat.sg-start-plan{padding:14px 18px 14px}
.sg-start-nat.sg-start-plan .sgv-laes{min-height:0}
.sg-start-nat.sg-start-plan .sgv-laes b{font-size:52px; min-height:52px}
.sg-start-nat.sg-start-plan .sgv-laes small{margin-top:4px; font-size:13px}
.sg-start-nat.sg-start-plan .sg-start-trappe{margin-top:12px}
.sg-start-nat.sg-start-plan .sgv-trin{height:44px}
.sg-start-nat.sg-start-plan .sg-start-ord{margin-top:8px}
.sg-start-nat.sg-start-plan .sg-nat{margin-top:10px; padding-top:9px}
.sg-start-nat.sg-start-plan .sg-nat-titel{margin-bottom:5px}
#forbindelse-kort:has(.sg-start-plan){margin-bottom:calc(var(--luft) * 1.4)}
/* Kun operatoerens preview: oven paa kortet, saa det fylder det samme som for en rigtig rytter. */
#forbindelse-kort:has(.sg-slut){position:relative}
#forbindelse-kort .sg-slut{position:absolute; top:6px; right:8px; margin:0; padding:8px; font-size:12px; font-weight:600; color:#fff}
#forbindelse-kort:has(.sg-start){margin-top:14px}

#sg-vink{height:70px}
#sg-vink[hidden]{display:none}
#sg-vink.sg-i-flow{height:auto; margin-top:14px}
#sg-vink.sg-i-flow .sg-vink{position:static; width:100%; max-width:none}
@media (prefers-reduced-motion:reduce){.sg-start-trappe .sgv-trin{animation:none}}
.sg-vink{position:fixed; z-index:19; left:12px; right:12px; bottom:calc(var(--browser-bund, 0px) + 74px + env(safe-area-inset-bottom)); max-width:calc(var(--spalte, 640px) - 24px); margin:0 auto; display:flex; align-items:center; gap:12px; min-height:60px; padding:8px 14px 8px 8px; border:none; border-radius:20px; background:var(--rav); color:var(--paa-rav); text-align:left; font:inherit; box-shadow:0 14px 28px -10px rgba(120,78,20,.7); cursor:pointer; -webkit-tap-highlight-color:transparent; animation:sg-vink-ind .5s cubic-bezier(.2,.9,.3,1.15) .35s backwards}
.sg-vink:active{transform:scale(.985)}
.sg-vink:focus-visible{outline:2px solid var(--rav); outline-offset:2px}
@keyframes sg-vink-ind{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
.sg-vink-ikon{flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--ink); color:var(--rav)}
.sg-vink-ikon svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round}
.sg-vink-t{flex:1 1 auto; min-width:0}
.sg-vink-t b{display:block; font-family:var(--skrift-tal); font-size:15.5px; font-weight:750; line-height:1.2; color:var(--paa-rav)}
.sg-vink-t small{display:block; margin-top:2px; font-size:13px; font-weight:600; color:var(--paa-rav)}
.sg-vink-pil{flex:0 0 auto; width:22px; height:22px; fill:none; stroke:var(--paa-rav); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

#ark-startgaet .ark-rul{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.sg-leder{margin:0 0 14px; font-family:var(--skrift-saetning); font-size:15px; font-weight:500; line-height:1.4; color:var(--tekst)}
#ark-startgaet .sgv{margin-top:0}
.sg-gem{display:block; width:100%; margin-top:14px}
.sg-gem:disabled{opacity:.45}
.sg-fejl{margin:6px 0 0; font-size:13.5px; color:var(--z5)}
.sg-fejl:empty{display:none}
.sg-garmin{margin-top:16px; text-align:left}
.sg-garmin-t{margin:0 0 10px; font-family:var(--skrift-saetning); font-size:14px; font-weight:500; line-height:1.4; color:var(--daempet)}
.sg-garmin-knap{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:#fff; color:var(--tekst); box-shadow:inset 0 0 0 2px var(--ink)}
.fr-estimat .fr-tal{justify-content:center}
.fr-estimat small{white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .sg-vink{animation:none}
  .sgv-laes b.sgv-puf{animation:none}
  .sgv-bane i{transition:none}
}
/* I onboardingen er der plads: trappen fylder skaermen, og turens p-regel maa ikke flytte hintet. */
#t-sg .sgv-trin{height:clamp(120px, calc(100dvh - 570px), 230px)}
.tur-traed .sgv-hint{margin:10px 0 0; font-size:13.5px; line-height:1.3}

/* ══ REFERRALS (6/11 2026, brugeren: "den fedeste referral side der passer til de nye tema. Simpel,
   og laekker") ══════════════════════════════════════════════════════════════════════════════
   Ét navy kort med koden som et startnummer: hvid brik med rav top, fire nålehuller i kortets
   farve og koden saa stor, som laengden tillader (refNummerStr: bred skrift til korte koder).
   Tryk = kopiér, med et stempel paa brikken; "QR code" vender brikken. Under: vennerne som én
   kaede og trappen 15/20/25 % i samme sprog som You's niveau-trappe. Resten bag raekker -> ark. */
#s-referral .tilbage{margin-bottom:8px}
.ref-helt{margin:4px 0 0; padding:22px 18px 18px; border:none; border-radius:24px}
.ref-titel{margin:0; font-family:var(--skrift-tal); font-size:28px; font-weight:800; line-height:1.08; letter-spacing:-.01em; color:var(--tekst); text-wrap:balance}
.ref-helt .ref-loefte{margin:8px 0 0; max-width:34em; font-size:15px; line-height:1.45; color:var(--daempet)}

.ref-nummer-ramme{display:grid; place-items:center; margin:22px 0 20px; perspective:900px}
.ref-nummer{position:relative; display:block; width:min(100%, 304px); aspect-ratio:16 / 10; padding:0; border:none; background:none; cursor:pointer;
  transform:rotate(-2deg); transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,.7,.2,1); -webkit-tap-highlight-color:transparent}
.ref-nummer.vendt{transform:rotate(-2deg) rotateY(180deg)}
.ref-nummer:active:not(.vendt){transform:rotate(-2deg) scale(.98)}
.ref-nummer:focus-visible{outline:none}
.ref-nummer:focus-visible .rn-for, .ref-nummer:focus-visible .rn-bag{box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--rav)}
.rn-for, .rn-bag{position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; border-radius:10px; background:#fff; color:#17233A;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 16px 30px -12px rgba(0,0,0,.55)}
.rn-bag{transform:rotateY(180deg); grid-template-rows:1fr auto; justify-items:center; padding-top:16px}
/* Naalehullerne har kortets farve, saa de ser gennemstukne ud */
.rn-hul{position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:var(--ink); box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.rn-hul:nth-child(1){top:9px; left:10px} .rn-hul:nth-child(2){top:9px; right:10px}
.rn-hul:nth-child(3){bottom:9px; left:10px} .rn-hul:nth-child(4){bottom:9px; right:10px}
.rn-top{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; padding:0 26px; background:var(--rav);
  font-family:var(--skrift-tal); font-size:14px; font-weight:800; font-stretch:125%; color:var(--paa-rav)}
.rn-id{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; font-stretch:100%}
.rn-id .founder-badge, .rn-id .creator-badge{width:13px; height:13px; color:var(--paa-rav)}
.rn-kode > span{display:inline-block}
.rn-kode{display:grid; place-items:center; min-width:0; padding:0 18px; font-family:var(--skrift-tal); font-weight:800; line-height:1; letter-spacing:-.01em;
  white-space:nowrap; font-variant-numeric:tabular-nums; color:#17233A}
.rn-bund{display:block; padding:0 26px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
  font-family:var(--skrift); font-size:12px; font-weight:600; color:rgba(23,35,58,.7)}
.rn-bag .referral-qr{display:block; width:112px; height:112px; margin:0; padding:0; background:none}
.rn-bag .referral-qr svg{display:block; width:100%; height:100%}
.rn-stempel{position:absolute; left:50%; top:52%; z-index:3; padding:4px 12px; border:2.5px solid #087A5A; border-radius:8px; background:rgba(255,255,255,.92);
  font-family:var(--skrift-tal); font-size:18px; font-weight:800; color:#087A5A; opacity:0; pointer-events:none; transform:translate(-50%, -50%) rotate(-9deg) scale(1.5)}
.ref-nummer.kopieret .rn-stempel{animation:rn-stempel 1.5s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes rn-stempel{
  0%{opacity:0; transform:translate(-50%, -50%) rotate(-9deg) scale(1.5)}
  14%{opacity:1; transform:translate(-50%, -50%) rotate(-9deg) scale(1)}
  75%{opacity:1; transform:translate(-50%, -50%) rotate(-9deg) scale(1)}
  100%{opacity:0; transform:translate(-50%, -50%) rotate(-9deg) scale(1)}}

.ref-knapper{display:grid; gap:10px}
.ref-knapper .handling.rav{width:100%; margin-top:0}
.ref-smaa-knapper{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ref-sek{min-height:44px; padding:0 12px; border:none; border-radius:14px; background:var(--kort-2); color:var(--tekst);
  font-family:var(--skrift); font-size:14px; font-weight:700; cursor:pointer; transition:transform .09s ease-out}
.ref-sek:active{transform:scale(.98)}
.ref-sek[aria-pressed="true"]{background:#fff; color:#17233A}
#referral-svar{margin-top:10px}
#referral-svar:empty{display:none}

.ref-kort{margin-top:12px; padding:18px; border:none; border-radius:24px; background:#fff; box-shadow:0 18px 32px -18px var(--skygge), 0 1px 2px rgba(23,35,58,.05)}
.ref-kort h3{margin:0 0 14px; font-size:15px; font-weight:750; color:var(--tekst)}
.rf-kaede{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:0 6px}
.rf-led{display:grid; gap:3px; min-width:0}
.rf-led b{font-family:var(--skrift-tal); font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--tekst)}
.rf-led span{font-size:12px; font-weight:600; color:var(--daempet); white-space:nowrap}
.rf-pil{width:14px; height:14px; margin:7px 4px 0 -4px; fill:none; stroke:var(--daempet-2); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.rf-kaede.lang .rf-led b{font-size:21px; font-stretch:82%}
.rf-tom{margin:0; font-size:14px; line-height:1.4; color:var(--daempet)}

/* Trinene er display:contents, saa blokkene deler én raekke (bunden flugter, ogsaa naar en tekst brydes) */
.ref-trappe{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:auto auto; grid-auto-flow:column; gap:6px; align-items:end; margin-top:18px}
.rt-trin{display:contents}
.rt-blok{position:relative; display:flex; align-items:flex-end; height:var(--h); padding:0 10px 8px; overflow:hidden; border-radius:10px 10px 4px 4px; background:#FFF3DC}
.rt-blok i{position:absolute; left:0; right:0; bottom:0; background:var(--rav); opacity:.42}
.rt-blok b{position:relative; font-family:var(--skrift-tal); font-size:17px; font-weight:800; line-height:1; color:var(--daempet)}
.rt-trin.naaet .rt-blok{background:var(--rav)}
.rt-trin.naaet .rt-blok b{color:var(--paa-rav)}
.rt-trin.nu .rt-blok b{font-size:22px}
.rt-trin > span{display:block; align-self:start; margin-top:0; font-size:12px; font-weight:600; color:var(--daempet)}
.rt-trin.nu > span{color:var(--tekst); font-weight:750}
.ref-trappe-linje{margin:12px 0 0; font-size:14px; line-height:1.4; color:var(--daempet)}
.ref-trappe-linje b{font-family:var(--skrift); font-weight:750; color:var(--tekst)}

.rp-stor{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px}
.rp-stor b{font-family:var(--skrift-tal); font-size:40px; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tekst)}
.rp-stor span{font-size:13px; font-weight:600; color:var(--daempet)}
.rp-tre{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 12px; margin-top:16px}
.rp-tre div{display:grid; gap:3px; min-width:0; padding-bottom:4px; border-bottom:1px solid var(--kant-staerk)}
.rp-tre span{font-size:12.5px; font-weight:600; color:var(--daempet)}
.rp-tre b{font-family:var(--skrift-tal); font-size:18px; font-weight:750; font-stretch:88%; font-variant-numeric:tabular-nums; color:var(--tekst); white-space:nowrap}
.rp-note{margin:12px 0 0; font-size:13px; color:var(--daempet)}
.ref-raekker{margin-top:12px}
#s-referral .own .ic{border:none; background:var(--kort-2); color:var(--daempet)}
#ark-ref-kode .eget-raekke, #ark-indloes .eget-raekke{margin:14px 0 12px}
#ark-ref-kode .handling.rav, #ark-ref-payout .knap, #ark-indloes .handling.rav{width:100%}
#ark-ref-payout .felt{margin:12px 0}
#egen-kode-svar, #connect-svar, #indloes-svar{margin-top:8px}
#indloes-felt, #hh-kode-felt{text-transform:uppercase}
#indloes-felt::placeholder, #hh-kode-felt::placeholder{text-transform:none}
@media (max-width:359px){
  .ref-titel{font-size:24px}
  .rf-kaede{gap:0 3px}
  .rf-led b{font-size:20px; font-stretch:80%}
  .rf-led span{font-size:11px; font-stretch:90%}
  .rf-kaede.lang .rf-led b{font-size:17px}
  .rf-pil{width:10px; margin:5px 2px 0 -2px}
  .rp-tre{grid-template-columns:1fr; gap:0}
  .rp-tre div{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--kant)}
  .rt-blok{padding:0 7px 7px}
}
@media (prefers-reduced-motion: reduce){
  .ref-nummer{transition:none}
  .ref-nummer.kopieret .rn-stempel{animation-duration:2s; animation-timing-function:steps(1, end)}
}

/* ══ BUNDEN AF YOU (6/11 2026, brugeren: "find en maade at gemme de andre knapper i bunden af you
   vaek paa en fed maade") ═════════════════════════════════════════════════════════════════════
   To raekker i ét hvidt kort: referral-indgangen (et lille startnummer paa navy) og "Settings and
   help" med rytterens initial og mail (kontoen er rytteren). Resten bor i #ark-mig-mere. */
.mig-bund{margin-top:12px}
#s-mig .own .ic.ref-ic{background:var(--ink)}
.ref-ic i{display:block; width:21px; height:15px; border-radius:2.5px; background:#fff; box-shadow:inset 0 4px 0 var(--rav); transform:rotate(-7deg)}
.mere-mail{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mere-indgang > span:nth-child(2){min-width:0}
#s-mig .own .ic.mere-avatar{border-radius:50%; background:var(--ink); color:#fff; font-family:var(--skrift-tal); font-size:17px; font-weight:800; line-height:1}
#ark-mig-mere .mere-liste{margin-top:4px}
#ark-mig-mere .mere-liste .own{border-top:1px solid var(--kant)}
#ark-mig-mere .mere-liste > .own:first-child{border-top:none}
#ark-mig-mere .konto-handlinger{margin-top:12px}
/* Raekkerne i You's bundkort kan staa i skjulte <div>'er: stregen gaar over hver synlig raekke efter den foerste. */
.mig-bund .list > :not(.skjul) ~ div:not(.skjul) > .own, .mig-bund .list > :not(.skjul) ~ .own{border-top:1px solid var(--kant)}

/* ══ KODEN PAA FORSIDEN (6/11 2026, brugeren: "skrive den ind i appen og paa hjemmesiden i stedet
   for ... det maerkelige med linket") ═══════════════════════════════════════════════════════════
   Én hvid raekke med det lille startnummer; et tryk folder feltet ud. Erstatter Paste-kortet. */
.hh-kode{margin:18px 0 4px; padding:6px 8px; border-radius:20px; background:#fff; box-shadow:0 18px 32px -18px var(--skygge), 0 1px 2px rgba(23,35,58,.05)}
.hh-kode-aabn{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:100%; padding:8px 6px; border:none; background:none; color:var(--tekst); text-align:left; cursor:pointer}
.hh-kode-aabn .ref-ic{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--ink)}
.hh-kode-t b{display:block; font-size:15px; font-weight:750}
.hh-kode-t span{display:block; margin-top:2px; font-size:13px; color:var(--daempet)}
.hh-kode-aabn > svg{stroke:var(--daempet-2); transition:transform .2s}
.hh-kode-aabn[aria-expanded="true"] > svg{transform:rotate(180deg)}
.hh-kode-form{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:4px 6px 8px}
.hh-kode-form.skjul{display:none}
.hh-kode-form input{min-width:0; min-height:46px; padding:0 14px; border:1.5px solid var(--kant-staerk); border-radius:14px; background:#fff; font-family:var(--skrift-tal); font-size:17px; font-weight:750; letter-spacing:.04em; color:var(--tekst)}
.hh-kode-form input:focus{outline:none; border-color:var(--rav)}
.hh-kode-form .knap{min-height:46px; margin:0; padding:0 18px; width:auto}
#hh-kode-svar{padding:0 8px}
#hh-kode-svar:not(:empty){padding-bottom:8px}
#hh-trin-kode{font-family:var(--skrift-tal); letter-spacing:.04em}
@media (prefers-reduced-motion: reduce){ .hh-kode-aabn > svg{transition:none} }