/* forma - stilarter.
 *
 * Laa indtil Fase 3 inde i <style> i index.html. Flyttet ud, fordi den fil var
 * ved at blive hele frontenden i ét dokument: jo mere der ligger samlet, jo
 * mindre fanger ./tjek.sh, som kun kan parse JavaScript.
 *
 * FARVER SAETTES KUN HER, OG KUN SOM VARIABLER.
 *
 * APPEN ER KUN MOERK. Lys tilstand fandtes fra Fase 3 til 31/8 2026 og blev
 * fjernet bevidst: moerk ER formas identitet, og en lys udgave var en anden,
 * blegere app, som ingen havde besluttet skulle findes - den blev bare vist
 * til dem, hvis telefon tilfaeldigvis stod paa lys.
 *
 * Reglen om variabler gaelder STADIG, selv med kun én tilstand: farverne skal
 * kunne aendres ét sted, og en farve skrevet direkte i en regel er en, ingen
 * finder igen. Genindfoeres lys tilstand nogensinde, er den eneste aendring en
 * ny :root-blok her - hvis og kun hvis reglen er blevet overholdt.
 */
:root{
  /* ── CARBON, anden udgave (13/9 2026, makeover) ─────────────────────────
     Reglen er den samme som foer: farve betyder ANSTRENGELSE, rav betyder
     "her kan du handle", og alt andet er materiale. Det, der aendrede sig, er
     materialet: grunden er moerkere, fladerne loeftes af en HAARFIN kant
     (rgba, ikke en fast farve), og "saenket" (--felt) ER grunden - en celle
     inde i en flise falder tilbage til sidens egen farve i stedet for til en
     tredje tone. Se docs/mockups/makeover/mock.css, som er kontrakten. */
  --bg:#0D0C0A;        /* grunden */
  --kort:#14120E;      /* flisen */
  --kort-2:#211E17;    /* loeftet: ark, tommelfinger i en vaelger */
  --felt:#0D0C0A;      /* saenket: celler og felter INDE i en flise */
  /* spor og skinner - GENNEMSIGTIG siden himlen (27/10 2026): et fast #26221A
     forsvandt mod himlens top; paa den moerke bund giver .10 samme tone som foer. */
  --skinne-2:rgba(243,238,230,.10);
  --kant:rgba(243,238,230,.08);
  --kant-svag:rgba(243,238,230,.05);
  --kant-staerk:rgba(243,238,230,.14);
  /* Teksten er loeftet 27/10 2026 (skarpere, som agent-appen); se "INGEN BOKSE"
     nederst. --bg og --kort er BEVIDST uaendrede: etape3d.js/uger3d.js har dem
     som hex (vejens flade), og native_ruter.py baerer en kopi. */
  --tekst:#F7F3EC;
  --daempet:#BCB3A5;
  --daempet-2:#847C70;
  /* HIMLEN (27/10 2026, brugerens valg "den varme"): siden er ikke sort, men lys
     oeverst og moerkere nedad som agent-appens himmel - i formas egne varme
     toner. Bunden er --bg. Tegnes af body::after (fast lag bag alt). --dis er
     3D-vejenes disfarve (etape3d.js/uger3d.js laeser den): vejene staar oeverst,
     hvor himlen er omkring --himmel-1, saa fjerne klodser fader ind i himlen
     og ikke mod sort. --felt-glas er knappernes/felternes saenkede flade, nu
     hvor grunden under dem ikke er en fast farve. */
  --himmel-top:#2C261E; --himmel-1:#221E18; --himmel-2:#181510;
  --dis:#221E18;
  --felt-glas:rgba(0,0,0,.18);
  /* Den fadende haarlinje mellem omraader (agent-appens Drift-fane). */
  --streg:linear-gradient(90deg, transparent, rgba(243,238,230,.13) 18%, rgba(243,238,230,.13) 82%, transparent);

  /* Signalfarverne (var foer ogsaa zonerne - se --zone1..7 nedenfor). */
  --z1:#5E7F91; --z2:#4F9C93; --z3:#C0A03C; --z4:#D0722F; --z5:#B23B2E;
  /* Weekly 75+ (10/10 2026): samme groenne familie som --z2, men klarere og lysende -
     "ekstra klar" skal kunne ses paa afstand. Kun Weekly-baandet "top" bruger den. */
  --top:#4FE0B0;

  --rav:#F0A93B;
  --paa-rav:#1A1409;
  --rav-lav:#7A5A26;
  --rav-dim:rgba(240,169,59,.16);

  /* Spalten og rytmen. 430px som foer; renden er 16px (var 22) - en telefon
     skal have sit indhold, ikke sin margen. Radierne er tre og kun tre:
     flise, helt (den ene store flise / passet) og kontrol (knapper, felter). */
  --spalte:430px;
  --rende:16px;
  --r-flise:22px; --r-helt:28px; --r-kontrol:14px;
  --fjeder:cubic-bezier(.34,1.3,.64,1);
  /* Browserens egen vaerktoejslinje over bunden af layout-viewporten.
     Saettes af forma.js (se BROWSER_LINJE_MAKS); 0 uden JS og paa desktop.
     nav, .toast og .gem-bjaelke regner ALLE TRE med den - flytter du den
     ene uden de andre, lapper de over hinanden. */
  --browser-bund:0px;
  --ud:cubic-bezier(.2,.7,.2,1);

  /* Broen til de gamle navne - se den oprindelige begrundelse i git-historikken. */
  --groen:var(--z2);
  --gul:var(--z3);
  --roed:var(--z5);
  --nat-soevn:var(--groen); --nat-ingen:var(--roed);
  --paa-groen:var(--paa-rav);
  --skinne:var(--skinne-2);
  --spor-kapacitet:var(--z2); --spor-soevn:var(--z1); --spor-load:var(--z3);
  /* Traeningszonerne (18/9 2026, brugerens valg): graa, blaa, groen, gul,
     orange, roed, lilla for zone 1-7. De er IKKE laengere --z1..5: dem bruger
     resten af appen som signalfarver (--groen/--gul/--roed, sporene), og de
     skal ikke skifte, fordi zonerne gjorde. Alt, der betyder "zone N", tager
     --zoneN; static/etape3d.js har samme syv tal i sin ZONE-tabel, og
     static/uger3d.js zone 2/3/5 (let/jaevn/haard).
     6/10 2026 (pasgrafik 2026, docs/mockups/makeover/genstart-og-pasgrafik.html):
     samme kulører i samme raekkefoelge, men klarere paa den moerke grund, og zone 1
     er en koelig blaagraa i stedet for en "slukket" graa, der lignede et tomt pas. */
  --zone1:#88A6CC; --zone2:#3F9FE6; --zone3:#36B98E;
  --zone4:#E7BE45; --zone5:#F27D36;
  --zone6:#EE4D5E; --zone7:#A779F5;
  /* Styrke er ikke en zone: pink er den eneste farvetone, skalaen ikke bruger
     (18/9 2026, brugerens valg). Den gamle #8C6E9E laa naermere zone 1/2/7. */
  --zone-styrke:#D0609E;
  --skygge:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}

/* ── Skrifterne ─────────────────────────────────────────────────────────
   Instrument Sans + Instrument Serif siden 13/9 2026 (makeover); foer det
   Schibsted Grotesk + Fraunces. To ansigter med hver sit job: sansen saetter
   ALT - broedtekst, overskrifter og tal (tabulaere, saa kolonner flugter) -
   og serifen bruges KUN til traenerens stemme: dommen paa Today, fasen paa
   Plan, forsidens og turens overskrifter. Kun latin-delsaettet er hostet
   (~92 KB for alle fire snit); ae/oe/aa ligger i latin-blokken. */
:root{
  /* To stemmer (13/9 2026): instrumentet taler i Instrument Sans med tabulaere
     tal, traeneren i Instrument Serif - dommen, fasen, forsidens overskrift.
     Aldrig omvendt. Filerne er selvhostede som foer (ingen kald til Google
     fra en side, der behandler helbredsdata). */
  --skrift:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',
    Helvetica,Arial,sans-serif;
  --skrift-display:var(--skrift);
  --skrift-dom:'Instrument Serif',Georgia,'Times New Roman',serif;
}

@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('/static/fonts/instrument-sans-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Sans'; font-style:italic; font-weight:400 700;
  font-display:swap;
  src:url('/static/fonts/instrument-sans-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('/static/fonts/instrument-serif-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400;
  font-display:swap;
  src:url('/static/fonts/instrument-serif-italic-latin.woff2') format('woff2');
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* line-height paa body og ikke pr. regel: mockup'en saetter 1.5 som grundlinje,
   og uden den arvede alt uden en egen vaerdi browserens `normal` (~1.2). Det er
   ikke en detalje - det er 3-5px pr. tekstlinje, og over en skaerm bliver det
   til en anden rytme end den, der blev tegnet. Maalt 4/9 2026: en planraekke var
   49.5px mod mockup'ens 52.5, et tidsfelt 56 mod 60.5. */
body{margin:0; background:var(--bg); color:var(--tekst); font-size:15px;
  line-height:1.5; font-family:var(--skrift); -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1, "ss01" 1; padding-bottom:env(safe-area-inset-bottom)}
.skjul{display:none !important}

/* Sidehovedet OG kilde-linjen skal blive staaende foroven, naar man ruller -
   ellers forsvinder "Sync now" og "Log out" ud af syne paa en lang side (fx
   Plan-listen over to uger). .app-top er en ren wrapper uden egen bredde-
   styring - header beholder sin egen --spalte-centrering uaendret, wrapperen
   laaser blot HELE blokken til toppen af viewporten.
   background:var(--bg) er noedvendigt, ikke kosmetisk: uden en solid
   baggrund ville rullende kort skinne igennem den faste blok. z-index skal
   over hovedindholdets kort (ingen eksplicit z-index, altsaa 0) - men UNDER
   spaltekanten (z-index 5), saa haarlinjerne ogsaa loeber forbi hovedet.

   Klasse og ikke id, fordi den samme header nu genbruges paa flere skaerme
   (guide, intervals.icu-tilslutning), ikke kun den loggede-ind app.

   STICKY IGEN (13/9 2026, header v2): 12/9-loesningen tog stickyheden af,
   fordi en fast blok paa ~110px er en sjettedel af en 667px-telefon. Header
   v2 loeser netop dét paa en anden maade - headeren FOLDER ved rul
   (.header-fold nedenfor), saa den staaende hoejde efter foldning kun er de
   fire skiver, og headeren kan derfor vaere sticky igen uden at spise
   skaermen. Baggrunden er en gradient, solid foroven og gennemsigtig
   forneden, oven paa blur - maalt i mockup'en
   (docs/mockups/makeover/header.html): en helt solid baggrund klipper haardt
   mod rullende kort, en gradient laeser som luft. */
.app-top{position:sticky; top:0; z-index:20}
/* FLADE BAG STATUSLINJEN (8/10 2026, brugerens skaermbillede: overskrifter rullede
   ind under uret). Skiverne svaever stadig frit (brugerens valg 13/9 og 25/9) - kun
   iOS' statuslinje faar baggrund, med en kort toning nedenunder. Hoejden er 0 uden
   safe-area (browsere paa desktop), saa intet aendres dér. */
body::before{content:""; position:fixed; left:0; right:0; top:0; z-index:21; pointer-events:none;
  height:calc(env(safe-area-inset-top, 0px) * 1.15);
  background:linear-gradient(to bottom, var(--himmel-top) 0, var(--himmel-top) 82%, transparent)}  /* 20 (25/9 2026): over alt sideindhold (kort paa lag 1-3 gled ind over skiverne), under ark (40) og tur (60) */
/* Baggrunden bor i sit eget lag, saa den kan FADE ud, naar headeren folder
   (.app-top.kompakt nedenfor) - en gradient kan ikke animeres til
   gennemsigtig, den ville klikke vaek. */
.app-top::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, var(--himmel-top) 0, var(--himmel-top) 58%, color-mix(in srgb, var(--himmel-top) 72%, transparent));
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  transition:opacity .25s}

/* Sidehovedet ligger i SAMME spalte som indholdet, med main's egne tal
   (--spalte + 22px polstring), saa maerket staar praecis over indholdets
   venstre kant.

   HEADER V2 (13/9 2026): brugeren godkendte mockup'en
   docs/mockups/makeover/header.html paa telefonen med tre valg - alle fire
   knapper er RUNDE ikonskiver UDEN ord, Connections baerer et KAEDELED, Bug
   en BILLE. Headeren er derfor ikke laengere et grid med FORMA paa sin egen
   raekke (12/9-loesningen) - den er ÉN raekke, `1fr auto 1fr`, med to lige
   brede sidegrupper (to 40px-skiver hver), saa midterkolonnen (FORMA)
   centreres SANDT uden at afhaenge af pilleord af forskellig bredde. PRO/
   FREE-etiketten og datoen staar paa en EGEN raekke under (.header-fold),
   som folder vaek ved rul (headerFold() i forma.js) og lader de fire skiver
   staa tilbage som et overlay - maalt i mockup'en: fire skiver á 40px +
   maerket = 280px, saa 320px har 8px til overs, mens PRO-etiketten ved siden
   af FORMA manglede 50px ved 320px og staar derfor paa datolinjen. */
header{max-width:var(--spalte); margin:0 auto;
  padding:calc(12px + env(safe-area-inset-top)) var(--rende) 10px; display:block}
.header-raekke{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; padding:10px 0 6px}
.header-gruppe{display:flex; align-items:center; gap:8px}
.header-gruppe:last-child{justify-self:end}
/* Maerket i headeren: scoped override af den delte .logo laengere nede, saa
   about/faq/admin/terms/privacy's brug af samme klasse ikke roeres. Faelder
   ud af syne ved rul (.app-top.kompakt), som resten af foldet. */
.header-raekke .logo{justify-self:center; transition:opacity .22s, transform .3s var(--ud);
  font-size:15px; letter-spacing:.12em}
/* Folder maerket og datolinjen vaek ved rul (headerFold() i forma.js), og
   lader de fire skiver staa som et overlay - se .app-top.kompakt nedenfor.
   grid-template-rows er den animerbare vej til at folde en ukendt hoejde ud
   og ind uden en fast pixel-hoejde at gaette paa. */
.header-fold{display:grid; grid-template-rows:1fr; transition:grid-template-rows .3s var(--ud), opacity .2s}
.header-fold > div{overflow:hidden}
.header-fold-linje{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:2px; padding:10px 0 6px; border-top:1px solid var(--kant)}
/* Luften over linjen ligger som MARGIN paa boernene og ikke som padding paa
   den foldende boks: padding kan et 0fr-spor ikke klippe vaek (maalt 13/9
   2026: 6px stod tilbage i foldet tilstand), en margin inde i overflow:hidden
   kan. */
/* (margin-top paa boernene udgik 19/9 2026 - luften sidder nu paa .header-fold-linje) */
.dag-etiket{font-size:13px; color:var(--daempet); font-variant-numeric:tabular-nums;
  white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.app-top.kompakt .logo{opacity:0; transform:translateY(-10px); pointer-events:none}
.app-top.kompakt .header-fold{grid-template-rows:0fr; opacity:0}
/* FLYVENDE SKIVER (13/9 2026, brugerens oenske): foldet er der kun de fire
   skiver tilbage, og en moerk bjaelke bag dem laeste som en header, der ikke
   laengere har noget at vaere header for. Baggrund og blur fader derfor ud, og
   skiverne ligger frit over indholdet. De har selv en solid --kort-flade, saa
   de kan laeses over hvad som helst; skyggen loefter dem fra kortene bagved.
   pointer-events: den gennemsigtige blok ligger stadig oven paa indholdet, og
   uden none ville et tryk MELLEM skiverne (paa et kort bagved) ramme ingenting. */
.app-top.kompakt{pointer-events:none}
.app-top.kompakt::before{opacity:0}
/* (UX-runde 2 gav headeren baggrund, naar dock-bjaelken stod fremme. Dock'en er
   vaek siden 25/9 2026, og skiverne flyder nu altid frit - brugerens valg.) */
.app-top.kompakt .header-pil{pointer-events:auto;
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35)}

/* ── Maerket og laasningerne ────────────────────────────────────────────
   Maerket er buen med formkurven - se static/icons/mark.svg for hvorfor den
   figur og ikke en anden. Det er INLINE svg og ikke <img>, netop for at
   currentColor kan arve fra variablerne herunder; en <img> ville kraeve en
   farve bagt ind i filen og dermed sin egen kopi pr. tilstand.

   Ordmaerket staar i --tekst og ikke i --groen. Groen tekst paa 17px er den
   svageste kontrast paa hele siden, og farven har mere at sige paa maerket,
   hvor den staar som flade frem for som tynde bogstavstammer. */
.logo-maerke{flex:0 0 auto; display:block; color:var(--rav); overflow:visible}

.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:800; font-size:17px; letter-spacing:.11em; color:var(--tekst);
  line-height:1; white-space:nowrap}
.logo .logo-maerke{width:22px; height:22px}
/* Sporet efter sidste bogstav skubber ordet en anelse til venstre; det hentes ind
   igen, saa maerket og O'et staar med den afstand, de ser ud til at have. */
.logo .ord{padding-left:.11em}

/* Tier-etiketten - "PRO" eller "FREE", tegnet af tegnHeaderTier() i forma.js.
   I app-headeren staar den paa datolinjen (.header-fold), ikke laengere ved
   siden af ordmaerket (flyttet dertil af header v2, 13/9 2026 - PRO-etiketten
   manglede 50px ved siden af FORMA ved 320px). Egen farve og ikke --tekst
   (som resten af ordmaerket staar i), saa de to ikke kan laeses som ét ord:
   --rav for PRO (samme accent som Founder-badget og andre "her er noget
   fremhaevet"-steder), --daempet for FREE (den lavere prioritet). Tom indtil
   JS'en har afgjort tilstanden - :empty skjuler den, saa datolinjen ikke
   hopper til side, naar etiketten senere fyldes ud. */
.tier-etiket{margin-left:2px; padding:3px 7px; border-radius:999px; font-size:11px;
  font-weight:700; letter-spacing:.14em; line-height:1; border:1px solid transparent}
.tier-etiket:empty{display:none}
.tier-etiket.pro{color:var(--rav); background:var(--rav-dim); border-color:var(--rav-dim)}
.tier-etiket.free{color:var(--daempet); background:var(--kort-2); border-color:var(--kant)}
/* Mindre paa datolinjen end den ville vaere ved siden af det store ordmaerke. */
.header-fold .tier-etiket{font-size:11px; padding:2px 7px}

.logo .ord, .logo-lodret .ord{font-family:var(--skrift-display)}

/* Logo C (navneskiftet til FormaPeaks, 23/9 2026): FORMA staar UAENDRET, og PEAKS
   ligger som en lille maerkat under A'et med en haarstreg foran. Faelles for alle
   ordmaerker (header, login, turen, betalingsvaeggen, de offentlige sider, admin),
   saa ingen af dem kan drive fra de andre. Stoerrelsen er i em af ordmaerkets
   egen skriftstoerrelse - derfor saetter .pw-brand den eksplicit nedenfor, fordi
   dens .ord har sin stoerrelse paa sig selv og ikke paa forælderen.
   margin-right traekker PEAKS' egen efterfoelgende spatiering ud igen, saa S'et
   flugter med A'et i stedet for at staa et bogstavmellemrum inde. */
.ordmaerke{display:inline-grid; justify-items:end; row-gap:.26em; line-height:1}
.ordmaerke .peaks{display:flex; align-items:center; gap:.55em; font-family:var(--skrift);
  font-weight:600; font-size:max(.44em, 8px); letter-spacing:.5em; margin-right:-.5em;
  color:var(--rav); line-height:1}
/* 8 px er gulvet: i app-headeren (15 px FORMA) gav .44em 6,6 px, maalt 23/9 2026 -
   ulaeseligt paa en telefon. Haarstregen er i PEAKS' egen em, saa den krymper ikke med. */
.ordmaerke .peaks::before{content:""; width:1.8em; height:1px; background:currentColor; opacity:.55}
.pw-brand .ordmaerke{font-size:15px}

/* Ingen koeb i iPhone-appen - se ingenKoeb() i forma.js. */
.ingen-koeb .kun-web{display:none !important}
/* Runde 9: uden nogen koebsvej (app uden Apple-koeb) - se kanKoebe() i forma.js.
   De rene koebsknapper forsvinder; laase-chips og -ringe bliver staaende som
   oplysning, men er ikke laengere noget, der ligner en knap. */
.uden-koeb .koeb-knap{display:none !important}
.uden-koeb [data-opgrader]{pointer-events:none; cursor:default}

.logo-lodret{display:flex; flex-direction:column; align-items:center; gap:16px;
  margin-bottom:16px}
.logo-lodret .logo-maerke{width:74px; height:74px}
.logo-lodret .ord{font-weight:800; font-size:28px; letter-spacing:.14em;
  color:var(--tekst); padding-left:.14em; line-height:1}

/* ── FounderBadge (Etape 1, spec §4) ──────────────────────────────────────
   Lille, genkendelig ved smaa stoerrelser - EN GLYF, ikke en tekstpille.
   ABSOLUT positioneret som en lille prik paa et hjoerne af sin vaert (samme
   greb som en notifikations-badge paa et app-ikon), saa den aldrig kan
   optage plads i et flex-forloeb eller skubbe noget andet.
   Staar 12/9 2026 paa IKONET inde i You-pillen i headeren (.header-pil-ikon,
   det oeverste hoejre hjoerne af ikonet) - foer paa selve ordmaerket, som
   blev flyttet ud af headeren samme dag. Ved profilnavnet paa You er der
   rigeligt med plads
   (et kort navn i en 430px spalte), saa samme glyf staar der almindeligt
   INLINE i stedet.
   Rav er den samme accent, .plan-kort.anbefalet og .plan-founder allerede
   bruger til "her er noget fremhaevet" - founding_member er en GEMT kolonne
   (se web_auth.session_info()), ikke udledt af noget her.
   Wrapperne (#header-founder-badge/#profil-founder-badge) staar tomme,
   indtil founderBadge() fylder dem ud; :empty skjuler dem helt. */
.founder-badge{display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; color:var(--rav); vertical-align:middle}
.founder-badge svg{width:100%; height:100%; fill:currentColor}
#profil-founder-badge:empty{display:none}
/* #header-founder-badge's egne regler (:empty og positionen) staar ved
   .header-pil-ikon laengere nede, hvor dens VAERT nu bor - ikke her. De stod
   indtil 12/9 2026 (aften) BEGGE steder med hver sit tal (-4px her, -5px
   dér); den nederste vandt, saa udseendet var rigtigt, men to udsagn om det
   samme tal i den samme fil er praecis hvordan det ene holder op med at
   passe uden at nogen ser det. */
.profil-tekst .founder-badge{margin-left:7px}

/* CreatorBadge (Etape 3 af referral-planen, spec §5/§6): "UI skal skelne
   identiteterne" - derfor en ANDEN glyf (gnist frem for stjerne, se
   creatorBadge() i forma.js for hvorfor netop fire spidser), en ANDEN
   farve (--groen, husets accent, frem for FounderBadgets --rav) og et ANDET
   hjoerne af You-pillens ikon (nederste hoejre, foerste badge sidder i det
   oeverste), saa en bruger der er BEGGE aldrig kan forveksle dem eller faa
   dem til at overlappe. Samme :empty/tegnes-fra-JS-moenster som FounderBadge
   ovenfor.

   GLANSEN er grunden til, at glyffen kan vaere saa tynd som den er: en gnist
   uden lys ville staa svagere end diamanten, den afloeser, fordi den fylder
   mindre blaek i den samme 13px-kasse. `drop-shadow` (og ikke `box-shadow`)
   foelger selve figuren, ikke dens kasse. 38% er maalt af tre styrker paa den
   rigtige baggrund: fuld currentColor slaar glyffen ud i en klat ved 34px, og
   under ~30% forsvinder den ved 13px. Ingen ny farve og intet nyt tal at holde
   i sync: det er --groen selv, blandet med gennemsigtighed - samme moenster som
   den tidligere "Public beta"-prik paa forsiden (fjernet 1/10 2026). */
.creator-badge{display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; color:var(--groen); vertical-align:middle;
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--groen) 38%, transparent))}
.creator-badge svg{width:100%; height:100%; fill:currentColor}
#profil-creator-badge:empty{display:none}
/* #header-creator-badge: se kommentaren ved FounderBadget ovenfor - reglerne
   bor ved .header-pil-ikon. */
.profil-tekst .creator-badge{margin-left:7px}

/* ── FORSIDEN ────────────────────────────────────────────────────────────
   Login-skaermen er produktets doerklokke: for en fremmed er det den ENESTE
   side, de ser, foer de beslutter sig. Indtil 31/8 2026 var den et logo, én
   linje og en formular. 31/8-14/9 var den en salgsside med formularen langt
   nede: paa en 320 px-telefon laa login-knappen ved 680 px, grafen brugte
   340 px hvoraf den oeverste halvdel var tom grund, og sidefoden stod midt
   paa siden. KOMPAKT UDGAVE 14/9 2026: overskriften staar i scenens himmel,
   vejen under den, og Apple/Google/e-mail lige derunder - alt det, man skal
   bruge for at komme ind, inden for de foerste ~650 px. Salgsteksten er
   flyttet UNDER og sat som ikon-raekker og punktlister (mockup'ens
   docs/mockups/makeover/login.html), ikke afsnit.

   ÉT format overalt: samme 430 px-spalte paa et skrivebord (der er ingen
   to-spaltet udgave laengere, se docs/historik/makeover.md).

   ALT INDHOLD HER ER PAASTANDE, KODEN KAN GOERE FALSKE. index.html staar
   derfor i drift-tabellen sammen med about/faq/privacy/terms - priserne,
   beta-status og Free/Pro-linjerne skal holdes sande.  */
.forside{position:relative; overflow:hidden; isolation:isolate; min-height:100vh;
  min-height:100dvh; display:block}

/* Lyskilden. Den tidligere udgave laa paa 6-12% og var i praksis usynlig -
   maalt, ikke gaettet. Kernen er nu 17-20%, og det er foerst dér, en moerk
   flade holder op med at ligne en tom div. */
.forside-lys{position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% 8%,
      color-mix(in srgb, var(--spor-soevn) 17%, transparent), transparent 58%),
    radial-gradient(760px 560px at 92% 88%,
      color-mix(in srgb, var(--rav) 14%, transparent), transparent 60%)}

/* Kornet er ikke pynt. En stor flade ren var(--bg) med en gradient henover
   viser BAANDDANNELSE - synlige trin i overgangen - og en helt glat moerk
   flade laeses som billig. 3,5% stoej fjerner begge dele og koster nul
   netvaerk, fordi stoejen genereres af feTurbulence i en data-URI. */
.forside::after{content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

.forside-indhold{position:relative; width:100%; max-width:var(--spalte); margin:0 auto;
  padding:calc(14px + env(safe-area-inset-top)) var(--rende) calc(28px + env(safe-area-inset-bottom))}

/* Toppen: maerket til venstre - én raekke, 28 px. "Public beta"-maerket til hoejre
   er fjernet 1/10 2026 (fuldt live). */
.forside-top{display:flex; align-items:center; justify-content:space-between; min-height:28px}
.forside-top .logo{display:inline-flex}

/* ── Helten ──────────────────────────────────────────────────────────────
   Overskriften og 3D-profilen deler én flade: scenens kamera (etape3d.js)
   ser vejen i den nederste ~55 % af laerredet, og resten er moerk grund. I
   stedet for at lade de ~40 % staa tomme, som foer, trækkes grafen op under
   overskriften (.graf's negative margen), saa ordene staar i himlen og vejen
   ruller ud under dem. h1 ligger OVER laerredet (z-index) men lader pegeren
   gaa igennem, saa vejen stadig kan traekkes med fingeren.
   Maalt 14/9 2026 ved 320 px: h1 44-111, vej ~190-330, Apple-knap ved ~420,
   Send link ved ~540 - inden for en 667 px-skaerm. */
.forside-helt{position:relative; margin-top:16px}

/* ── Creator-linkets personlige forside (/r/<kode>) ───────────────────────
   Et roligt kort OEVERST paa forsiden: hvem der giver maaneden, hvad den er, og
   vejen ind. Samme tokens som resten (kort-flade, haarfin kant, rav, Instrument
   Serif til overskriften) - ingen nye farver. Vises af forma.js henvisningHero(),
   kun naar koden findes. min-width:0 + overflow-wrap holder 320 px fri for
   vandret scroll, selv med et langt navn. */
.henvisning-hero{margin-top:16px; padding:16px; border-radius:var(--r-flise);
  background:var(--kort); border:1px solid var(--kant); min-width:0;
  display:flex; flex-direction:column; gap:10px}
.hh-fra{margin:0; font-size:13px; font-weight:600; color:var(--daempet);
  overflow-wrap:anywhere}
.hh-titel{margin:0; font-family:var(--skrift-dom); font-weight:400;
  font-size:clamp(26px, 8vw, 32px); line-height:1.08; letter-spacing:-.01em;
  text-wrap:balance; overflow-wrap:anywhere}
.hh-titel em{font-style:italic; color:var(--rav)}
.henvisning-hero .hh-app{width:100%; margin-top:2px}
.henvisning-hero .lille{margin:0}
.hh-trin{margin:2px 0 0; padding:0; list-style:none; counter-reset:hh;
  display:grid; gap:8px; font-size:14px; line-height:1.35; color:var(--tekst)}
.hh-trin li{counter-increment:hh; display:flex; gap:10px; align-items:center; min-width:0}
.hh-trin li::before{content:counter(hh); flex:none; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--kant-staerk); display:grid; place-items:center;
  font-size:12px; font-weight:600; color:var(--rav)}
.hh-trin b{font-weight:600}
.hh-note{margin:0; font-size:12px; color:var(--daempet-2)}
.hh-aabn{align-self:flex-start; font-size:13px; color:var(--rav); text-decoration:underline;
  text-underline-offset:2px; overflow-wrap:anywhere}
/* Appens "Came from a creator's link?" - lav, saa den ikke overdoever forsiden for
   en bruger uden invitation; knappen er rav, fordi den ER handlingen. */
.hh-claim{margin-top:16px; padding:12px 14px; border-radius:var(--r-flise);
  background:var(--kort); border:1px solid var(--kant);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
.hh-claim-tekst{flex:1 1 120px; min-width:0; display:flex; flex-direction:column; gap:2px;
  font-size:13px; color:var(--daempet)}
.hh-claim-tekst b{font-size:14px; font-weight:600; color:var(--tekst)}
.hh-claim-tekst span:empty{display:none}
/* Android-appen (html.android-app, forma.js) viser .kun-android i stedet for .kun-ios -
   Health Connect/Apple Health i markuppen (11/10 2026). */
html.android-app .kun-ios, html:not(.android-app) .kun-android{display:none}
.hh-claim-plads{flex:0 0 auto; width:112px; height:40px; border-radius:999px;
  background:var(--kort)}
.hh-claim .hh-claim-knap{flex:0 0 auto; width:auto; min-height:40px;
  padding:8px 14px; font-size:14px}
.forside h1{font-family:var(--skrift-dom); font-weight:400; font-size:clamp(36px, 10.5vw, 46px);
  line-height:1.02; letter-spacing:-.015em; margin:0; text-wrap:balance; position:relative;
  z-index:1; pointer-events:none; max-width:12ch}
.forside h1 em{font-style:italic; color:var(--rav)}
.graf{position:relative; display:block; height:min(34vh, 262px);
  margin:-50px calc(-1 * var(--rende)) 0; overflow:hidden}
.graf::after{content:''; position:absolute; inset:auto 0 0; height:30%;
  background:linear-gradient(transparent, var(--bg)); pointer-events:none}
.graf .etape-flad{position:absolute; left:var(--rende); right:var(--rende); bottom:30%; height:40%; width:auto}
.graf canvas:not(.etape-uge-flad){position:absolute; inset:0; width:100% !important; height:100% !important}
.graf i{display:none}
@keyframes rejs{from{transform:scaleY(0)}}
@media (prefers-reduced-motion: reduce){ .graf i{animation:none} }
/* Traekkes op i grafens fade (nederste 30 %): dér er kun tom grund foran
   vejen, ugeetiketten haenger hoejere oppe. Maalt 14/9 2026 ved 320 px: etiketten
   slutter ~210 px nede i en 262 px graf, teksten begynder ved 236. */
.forside-under{color:var(--daempet); font-size:15px; line-height:1.5; margin:-26px 0 0;
  max-width:36ch; position:relative; z-index:1}

/* ── Login: tre veje ind ─────────────────────────────────────────────────
   Apple og Google som lyse knapper med udbyderens eget maerke (deres
   retningslinjer; begge lige store, ingen af dem er "den rigtige"), en
   haarfin "or"-linje, og e-mailen som ÉN raekke: felt + "Send link". Foer
   var det etiket + felt + fuld knap, tre raekker for det samme. */
.forside-login{margin-top:18px; display:grid; gap:8px}
.forside .knap{border-radius:var(--r-kontrol); box-shadow:none; min-height:46px; padding:10px 16px}
.forside .knap.udbyder{background:var(--tekst); color:var(--bg); border:none; gap:10px; font-size:15px}
.forside .knap.udbyder svg{width:18px; height:18px; flex:0 0 auto}
.eller{display:flex; align-items:center; gap:10px; color:var(--daempet-2); font-size:12px;
  margin:2px 0; white-space:nowrap}
.eller::before,.eller::after{content:''; flex:1; min-width:16px; height:1px; background:var(--kant)}
.mail-raekke{display:flex; gap:8px; margin:0}
/* display:flex ovenfor slaar browserens [hidden] ud - uden denne linje stod
   anmelderens "Review code"-felt (#kode-form) for alle fra 23/9 til 29/9 2026. */
.mail-raekke[hidden]{display:none}
.mail-raekke input{flex:1; min-width:0; min-height:46px; border-radius:var(--r-kontrol); font-size:16px}
.mail-raekke .knap{width:auto; flex:0 0 auto; white-space:nowrap}
#login-svar:empty{display:none}
.samtykke{font-size:12px; color:var(--daempet-2); line-height:1.5; margin:4px 0 0}
.samtykke a{color:var(--daempet); text-decoration:underline; text-underline-offset:2px}
/* App Store-badget (29/9 2026): Apples eget billede, aldrig omfarvet. Skjult
   i appen og paa Android - se kommentaren i index.html. */
.app-hent{display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:10px; font-size:12px; color:var(--daempet-2); text-decoration:none}
.app-hent img{display:block; height:40px; width:auto}
html.app .app-hent, html.android .app-hent{display:none}

/* ── Konto-valg (PLAN-en-konto.md, 23/9 2026): en login-metode gav en adresse,
   vi ikke kender. Diskret kant/baggrund som resten af login-skaermens kort,
   overskrift i samme skala som h2 andre steder paa siden. */
.konto-valg{margin-bottom:18px; padding:16px; border-radius:var(--r-kontrol);
  border:1px solid var(--kant); background:var(--kort)}
.konto-valg h2{font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em}
.konto-valg p{font-size:14px; color:var(--daempet); line-height:1.5; margin:0 0 12px}
.konto-valg ol{font-size:14px; color:var(--daempet); line-height:1.5; margin:0 0 12px;
  padding-left:20px}
.konto-valg li{margin-bottom:6px}
.konto-valg strong{color:var(--tekst)}
/* "New to FORMA?": tydelig for den nye, men under login-knapperne i vaegt - en
   stille knap (moerk flade, kant), ikke rav og ikke cremefarvet som Google. */
.konto-valg .konto-valg-ny{padding-top:14px; border-top:1px solid var(--kant)}
.konto-valg .konto-valg-ny p{margin:0 0 10px; overflow-wrap:anywhere}
.konto-valg .konto-valg-ny strong{font-size:15px}
.konto-valg .konto-valg-ny .knap{min-height:44px; font-size:14px}
#konto-valg-svar:empty{display:none}
.konto-valg-aktiv .forside-helt, .konto-valg-aktiv .forside-under{display:none}
#konto-valg-svar{margin-top:10px}

/* ── Beviserne: tre udsagn, hvert med et ikon i en flise ──────────────── */
.bevis{margin-top:36px; display:grid; gap:14px}
.bevis > div{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start}
.bevis .ikon{width:44px; height:44px; border-radius:var(--r-kontrol); background:var(--kort);
  border:1px solid var(--kant); display:grid; place-items:center; color:var(--rav)}
.bevis .ikon svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.bevis b{display:block; font-size:15px; font-weight:600; margin-bottom:2px; letter-spacing:-.01em}
.bevis span{font-size:14px; color:var(--daempet); line-height:1.5}

/* ── Free mod Pro ────────────────────────────────────────────────────────
   To kort med punktlister, ikke en sammenligningstabel: de to er ikke
   konkurrenter - den ene ligger oven paa den anden. "Forma Pro" og dens
   flueben staar i rav, fordi rav i hele dette hus betyder ét: her kan du
   handle. Free's flueben er groenne som "med". */
.tier{margin-top:32px; display:grid; gap:10px}
.tier-r{padding:16px 16px 14px; border-radius:var(--r-flise); background:var(--kort);
  border:1px solid var(--kant)}
.tier-r:has(b.pro){background:linear-gradient(160deg, rgba(240,169,59,.16), rgba(240,169,59,.03)), var(--kort);
  border-color:rgba(240,169,59,.35)}
.tier-hoved{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.tier-hoved b{font-size:19px; font-weight:600; letter-spacing:-.015em}
.tier-hoved b.pro{color:var(--rav)}
.tier-hoved span{font-size:13px; color:var(--daempet); text-align:right}
.tier-r:has(b.pro) .tier-hoved span{color:var(--rav); font-weight:600}
.tier-r ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.tier-r li{display:grid; grid-template-columns:16px 1fr; gap:10px; font-size:14px;
  color:var(--daempet); line-height:1.45}
.tier-r li svg{width:16px; height:16px; stroke:var(--z2); fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; margin-top:3px}
.tier-r:has(b.pro) li svg{stroke:var(--rav)}

/* Proeveperioden er overskriften, ikke prisen: "hvad koster det at proeve"
   kommer foer "hvad koster det at blive". Kun ÉT stort element - to ville
   konkurrere, og saa var ingen af dem stemmen. */
.pris{margin:24px 0 0; padding:0; border-radius:0; background:none; border:none; text-align:center}
.pris-hoved{font-family:var(--skrift-dom); font-weight:400; font-size:28px; letter-spacing:0;
  line-height:1.15}
.pris-under{margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--daempet)}
.pris-linje{display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:10px 0 0; padding-top:0; border-top:none}
.pris-linje .v{font-size:22px; font-weight:700; letter-spacing:-.015em; line-height:1}
.pris-linje .n{font-size:13px; color:var(--daempet)}
.pris-fod{margin:6px 0 0; font-size:13px; color:var(--daempet)}

.forside-fod{margin-top:32px; text-align:center; font-size:13px; color:var(--daempet-2);
  display:flex; gap:6px 18px; justify-content:center; flex-wrap:wrap}
.forside-fod a{color:inherit}

/* Maerket tegner sig selv én gang, naar forsiden aabner. Teknikken er den samme
   som dagsbuens spor bruger (stroke-dashoffset), og det er hele pointen:
   bevaegelsen er husets egen frem for en effekt laant udefra. Tallene er
   buernes laengder - buen spaender 290 grader ved r=24, altsaa ~121,5 enheder. */
.tegner .bue{stroke-dasharray:124; stroke-dashoffset:124;
  animation:tegn-op 1s cubic-bezier(.22,.75,.3,1) .1s forwards}
.tegner .kurve{stroke-dasharray:30; stroke-dashoffset:30;
  animation:tegn-op .55s cubic-bezier(.22,.75,.3,1) .85s forwards}
@keyframes tegn-op{to{stroke-dashoffset:0}}
.link{background:none; border:none; color:var(--daempet); font-size:14px; cursor:pointer;
  padding:6px; font-family:inherit}

/* 108px = pillen (64) + luft. Loeftes pillen af browserens vaerktoejslinje,
   skal det sidste kort kunne rulles lige saa meget laengere fri. */
main{padding:0 var(--rende) calc(108px + var(--browser-bund));
  max-width:var(--spalte); margin:0 auto}

/* Dagen i headerens midterkolonne, RAEKKE 2, under maerket+tier. Centreret
   (grid-area:dato, se header{} ovenfor) siden 12/9 2026 - staar paa sin egen
   linje under ordmaerket i stedet for paa baseline ved siden af det, nu hvor
   den deler kolonne med det frem for en flex-raekke. Tabulartal, saa
   etiketten ikke skifter bredde fra den 1. til den 30. */
.dag-etiket{font-size:13px; color:var(--daempet); font-variant-numeric:tabular-nums;
  white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
/* Proeveperiodens dage i datolinjen (#10, 26/10 2026) - rav = her kan du handle (tryk aabner #ark-abon). */
.trial-etiket{background:none; border:none; padding:0; margin:0; font:inherit; font-size:13px;
  color:var(--rav); display:inline-flex; align-items:center; gap:3px; cursor:pointer; white-space:nowrap}
.trial-etiket[hidden]{display:none}
.trial-etiket .sep{color:var(--daempet-2); margin:0 3px 0 -3px}
.trial-etiket svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Dagsstregerne: én pr. proevedag, i dag markeret. Bruges paa kortet og i arket. */
.trial-streger{display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:3px; margin:12px 0 8px}
.trial-streger i{height:6px; border-radius:3px; background:var(--skinne-2)}
.trial-streger i.brugt{background:var(--rav)}
.trial-streger i.idag{background:var(--rav); box-shadow:0 0 0 2px var(--kort), 0 0 0 3px var(--rav)}
.trial-bar{height:6px; border-radius:3px; background:var(--skinne-2); margin:12px 0 8px; overflow:hidden}
.trial-bar i{display:block; height:100%; background:var(--rav)}
.trial-linje{display:flex; justify-content:space-between; gap:10px; font-size:13px}
.trial-linje b{font-weight:600}
.trial-linje span{color:var(--daempet)}

/* ── Headerens fire skiver ───────────────────────────────────────────────
   HEADER V2 (13/9 2026): fire RUNDE ikonskiver UDEN ord (brugerens valg,
   mockup docs/mockups/makeover/header.html) - klokkens tal ER dens ord,
   avataren ER rytteren, prikken siger "leverer". aria-label/title baerer
   navnet i stedet for synlig tekst, saa skiven stadig kan laeses og aabnes.
   Egen klasse og ikke .knap/.se-som-knap: de to betyder "primaer handling" og
   "vaelg mellem ligestillede" andre steder i appen, og den samme figur maa
   ikke betyde to ting.
   background/border/font-family staar EKSPLICIT: forma.css har bevidst ingen
   bar `button`-reset, saa uden dem tegner browseren sin egen graa knap.
   padding:0 er OBLIGATORISK: den gamle pille havde `0 11px 0 9px`, og det var
   praecis dét, der klemte avataren skaev i mockup'en (maalt 18px bred i
   stedet for 40px rund). */
.header-pil{width:40px; height:40px; padding:0; border-radius:50%;
  display:grid; place-items:center; background:var(--kort); border:1px solid var(--kant);
  color:var(--daempet); font-family:inherit; cursor:pointer; position:relative;
  transition:transform .18s var(--fjeder), background .15s}
.header-pil:hover, .header-pil:focus-visible{color:var(--tekst);
  border-color:var(--kant-staerk)}
.header-pil:active{transform:scale(.92); background:var(--kort-2)}
/* Den aktive skive (You/Connections) baerer en rav RING uden om (mock'ens .disc.here, 19/9 2026) - ikke rav kant/ikon. */
.header-pil.aktiv{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--rav)}
.header-pil-ikon{position:relative; display:grid; place-items:center; width:100%; height:100%}
.header-pil-ikon svg{width:19px; height:19px; display:block}
/* You-skiven baerer rytterens initial (mockup'ens avatar-skive), Connections-
   skiven et kaedeled og en groen prik i hjoernet naar kilden leverer - saa de
   to skiver siger noget om KONTOEN og ikke kun, hvor de foerer hen. */
.header-avatar{width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--z2), var(--z1)); color:var(--bg);
  font-size:15px; font-weight:700; display:grid; place-items:center; line-height:1}
/* Absolut i skivens nederste hoejre hjoerne. Kaedeleddet bliver staaende bag
   prikken (mockup'en) - reglen der foer skjulte ikonet ved .forbundet er
   slettet med vilje. */
.header-prik{position:absolute; right:5px; bottom:5px; width:9px; height:9px;
  border-radius:50%; background:var(--z2); border:2px solid var(--kort); box-shadow:none;
  margin:0; display:none}
.header-pil.forbundet .header-prik{display:block}

/* Badgene sidder paa ikonet inde i skiven (se markuppens kommentar).
   Uaendrede glyffer og farver - kun deres vaert er flyttet, og vaerten er nu
   38px (foer 20px), saa taellene staar en anelse laengere ude. */
#header-founder-badge:empty, #header-creator-badge:empty{display:none}
#header-founder-badge{position:absolute; top:-3px; right:-3px; line-height:0}
#header-creator-badge{position:absolute; bottom:-3px; right:-3px; line-height:0}

/* Klokkens tal (Inbox) - samme greb som FounderBadge, absolut i skivens
   oeverste hoejre hjoerne. :empty skjuler badget ved nul, og skiven selv
   lyser op (.har-nyt), naar der er noget at se. */
.header-tal{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px;
  padding:0 3px; box-sizing:content-box; border-radius:999px; background:var(--rav);
  color:var(--paa-rav); border:2px solid var(--bg); font-size:11px; font-weight:700;
  display:grid; place-items:center; font-variant-numeric:tabular-nums}
.header-tal:empty{display:none}
.header-pil.har-nyt{color:var(--tekst)}
.feedback-intro{margin:6px 0 14px; font-size:13px; line-height:1.55; color:var(--daempet)}
.feedback-slags{margin-bottom:12px}
#ark-feedback textarea{margin-bottom:12px; font-size:16px; line-height:1.5; resize:vertical}
.feedback-diag{display:flex; gap:10px; align-items:flex-start; font-size:12px;
  line-height:1.5; color:var(--daempet); margin-bottom:14px}
.feedback-diag input{width:auto; margin:2px 0 0; flex:0 0 auto}
.feedback-svar{margin-top:10px; min-height:1.5em}

/* Kontohandlingerne nederst paa Connections. Log ud er en tekstlinje og ikke en
   knap i fuld bredde: den skal kunne findes, ikke rammes ved et uheld. */
#synk-svar{margin-top:10px}
.kort{background:var(--kort); border:1px solid var(--kant); border-radius:var(--r-flise);
  padding:16px; margin-bottom:12px; position:relative}
/* Saetningsversal, ikke sporet-ud versaler. En etiket i store bogstaver over
   hvert eneste kort er chrome, der optraeder uanset indhold - og den siger
   ikke noget, ordet ikke allerede siger. */
h2{font-size:15px; letter-spacing:-.01em; color:var(--tekst);
  margin:0 0 12px; font-weight:600; font-family:var(--skrift-display)}
.tal .v, .bue-midt .v, .maaling-tal, .maal-tal .v{font-family:var(--skrift-display);
  font-variant-numeric:tabular-nums}

/* Forbindelseskortets to knapper. HED .trin-liste indtil 10/9 2026: kortet var
   en nummereret liste paa to trin, hvor trin 2 var "kom tilbage og tryk Sync
   now". Der er reelt ÉT trin - det andet er ikke en handling, brugeren
   udfoerer, og en liste, hvis punkt 2 ikke er en handling, laeser som mere
   arbejde end der er. Listen er derfor vaek, og med den .trin-listes regler
   (kortet var deres eneste bruger).

   DE TO KNAPPER SKAL VAERE PRAECIS LIGE STORE - kun vaegt og farve maa skille
   dem ad. Derfor line-height i PIXELS og ikke et forhold: den rav er 15px og
   den stille 14px, saa et forhold ville give to forskellige linjebokse og
   dermed to forskellige knaphoejder. Og derfor en GENNEMSIGTIG 1px-kant paa
   dem begge: .knap saetter border:none, saa den stille kants 2px ville ellers
   goere den hoejere end den rav. */
.forbindelse-knapper{display:flex; flex-direction:column; gap:9px; margin-top:16px}
.forbindelse-knapper .knap{display:flex; align-items:center; justify-content:center;
  gap:8px; line-height:20px; border:1px solid transparent}
.knap.stille{background:transparent; border-color:var(--kant); color:var(--daempet);
  font-weight:500; font-size:14px}
/* Pilen siger, at trykket forlader appen. currentColor, saa den arver knappens
   egen farve i begge udgaver. */
.ekstern-ikon{width:14px; height:14px; flex:0 0 auto}
.forbindelse-note{margin:11px 0 0; font-size:12px; line-height:1.55;
  color:var(--daempet); text-align:center}

/* text-decoration:none her, ikke kun inline paa hver enkelt knap: .knap bruges
   baade paa <button> og <a> (Google-login, intervals.icu-tilslutningen), og et
   linkunderstreg paa en knap er en gammel HTML-vane, ikke et bevidst valg. */
/* Rav og ikke groen: den gamle groen gjorde to ting paa én gang - "godt" i
   data og "tryk her" paa en knap. Nu betyder farve paa en flade anstrengelse,
   og rav betyder handling. En knap er altid det sidste. */
.knap{width:100%; min-height:50px; padding:12px 18px; border-radius:var(--r-kontrol); border:none;
  background:var(--rav); color:var(--paa-rav); font-weight:600; font-size:15px; cursor:pointer;
  font-family:inherit; text-decoration:none; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; text-align:center; box-sizing:border-box;
  transition:transform .18s var(--fjeder), filter .15s}
.knap:active{transform:scale(.97); filter:brightness(1.06)}
/* Krusningen (13/9 2026, mockup'ens .btn .ripple): et tryk breder sig fra
   fingeren. Saettes ind af forma.js paa pointerdown; overflow:hidden klipper
   den efter knappens egne hjoerner. Gaelder de tre knapfamilier, der er
   HANDLINGER - ikke piller, chips eller faner, som allerede svarer med skala. */
.knap, .handling, .fod-raekke > *{position:relative; overflow:hidden}
.krusning{position:absolute; border-radius:50%; background:rgba(255,255,255,.35);
  transform:scale(0); animation:krus .55s var(--ud) forwards; pointer-events:none}
@keyframes krus{to{transform:scale(3); opacity:0}}
/* Kvitteringen (mockup'ens .toast): én linje nederst over menuen, der kommer
   op med fjederen og gaar igen af sig selv. Tegnes af kvitter() i forma.js. */
.toast{position:fixed; left:50%;
  bottom:calc(52px + 12px + env(safe-area-inset-bottom) + 14px + var(--browser-bund));
  transform:translate(-50%, 20px); opacity:0; z-index:60; background:var(--tekst);
  color:var(--bg); font-weight:600; font-size:13px; padding:10px 16px; border-radius:999px;
  transition:transform .3s var(--fjeder), opacity .25s; pointer-events:none;
  white-space:nowrap; max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis}
.toast.vis{transform:translate(-50%, 0); opacity:1}
.toast-fortryd{pointer-events:auto; background:none; border:none; padding:6px 2px; margin:-6px 0;
  font:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
/* Maalarkets "Remove goal" - daempet, centreret, nederst; en sjaelden handling. */
.maal-fjern{display:block; margin:18px auto 4px; background:none; border:none; padding:10px 14px;
  font:inherit; font-size:14px; color:var(--daempet); cursor:pointer}
.maal-fjern[hidden]{display:none}
/* Indtraedelsen (mockup'ens .enter): skaermens dele kommer ind forskudt, 45 ms
   ad gangen, naar en fane vises. Klassen FJERNES igen af forma.js ved
   animationend - `forwards` ville ellers holde transform:none fast og aede
   :active-skalaen paa fliser og knapper. */
.indtraed{opacity:0; transform:translateY(8px);
  animation:indtraed .5s var(--ud) forwards; animation-delay:var(--i, 0ms)}
@keyframes indtraed{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .krusning{animation:none; display:none}
  .indtraed{animation:none; opacity:1; transform:none}
  .toast{transition:none}
  nav .nav-ind, .se-som-toggle.bred::before{transition:none}
  .app-top .logo, .header-fold, .app-top::before{transition:none}
}
.knap:disabled{opacity:.5}
.knap.sekundaer{background:var(--kort); border:1px solid var(--kant-staerk); color:var(--tekst)}
/* 16px er iOS' graense: under den zoomer Safari/WKWebView ind ved fokus og bliver
   staaende zoomet efter arket lukkes (8/10 2026, maalarkets Event-felt). Gaelder
   ALLE felter - saet aldrig et input/select/textarea under 16px. */
input,select,textarea{width:100%; min-height:48px; padding:12px 14px;
  border-radius:var(--r-kontrol); background:var(--felt); border:1px solid var(--kant-staerk);
  color:var(--tekst); font-size:16px; font-family:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--rav); box-shadow:0 0 0 3px var(--rav-dim)}
label{display:block; font-size:13px; color:var(--daempet); margin:0 0 6px}
.felt{margin-bottom:14px}

/* Afkrydsning med sin tekst som ét klikmaal. En bar <input type="checkbox"> er
   et lille maal paa en telefon; hele raekken skal kunne rammes. */
.tilvalg{display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:10px 0; font-size:14px}
.tilvalg input{width:18px; height:18px; flex:0 0 18px; accent-color:var(--groen)}

.talrad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.tal{background:var(--felt); border-radius:10px; padding:11px; text-align:center}
.tal .v{font-size:17px; font-weight:700}
.tal .n{font-size:11px; color:var(--daempet); margin-top:3px}

/* Dagraekken i planlisten. Venstre polstring giver plads til intensitets-
   ryggen nedenfor - se .dag::before. */
.dag{border-top:1px solid var(--kant-svag); padding:13px 0; position:relative}
.dag:first-of-type{border-top:none}
/* INTENSITETS-RYGGEN: en 3px stribe i dagens egen intensitetsfarve, saa to ugers
   haardt/let/hvile kan laeses som en FORM naar man scanner kolonnen. Farven
   saettes af forma.js fra passets femtrins-intensitet (--dag-farve) og falder
   tilbage til skinnegraa paa en hviledag, saa kolonnen stadig laeses som en
   kolonne frem for at gaa i stykker. */
/* Bjaelken afloeser intensitets-ryggen: den viste kun intensiteten, saa en
   hviledag og en tre timers tur saa lige lange ud. Nu baerer LAENGDEN
   varigheden og FARVEN intensiteten, og to ugers traening kan aflaeses som en
   form. Den ligger i .dag-top som et tredje, fuldbredde-barn, saa den ogsaa
   ses paa en foldet fortidsdag - dér vises kun <summary>. */
/* order er ikke pynt: .dag-top ombryder nu, og chevronen er et ::after, altsaa
   det SIDSTE flex-punkt. Uden en eksplicit raekkefoelge lander den paa sin egen
   linje under bjaelken og ser ud som en fejl. */
.dag.fortid > summary.dag-top::after{order:1}
.dag-bjaelke{order:2; flex:0 0 100%; display:block; height:6px; border-radius:3px;
  background:var(--felt); margin-top:9px; position:relative; overflow:hidden}
.dag-bjaelke i{position:absolute; inset:0 auto 0 0; border-radius:3px; display:block}
.dag-top{display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap}
.dag.fortid > summary.dag-top{cursor:pointer; list-style:none}
.dag.fortid > summary.dag-top::-webkit-details-marker{display:none}
.dag.fortid > summary.dag-top::marker{display:none}
/* Samme visuelle sprog som andre foldbare kort i appen (fx #aabn-tid): en
   chevron der peger ned, og drejer op naar dagen er aabnet. */
.dag.fortid > summary.dag-top::after{
  content:''; width:8px; height:8px; margin-left:4px; flex-shrink:0;
  border-right:2px solid var(--daempet); border-bottom:2px solid var(--daempet);
  transform:rotate(45deg); transition:transform .15s;
}
.dag.fortid[open] > summary.dag-top::after{transform:rotate(-135deg)}
.dag-navn{font-weight:600; font-size:15px}
.dag-dato{color:var(--daempet); font-size:12px; font-weight:400; margin-left:7px}
.dag-detalje{font-size:13px; color:var(--daempet); margin-top:6px; line-height:1.5}
.maerke{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--kort-2); color:var(--daempet); white-space:nowrap}
.maerke.groen{background:color-mix(in srgb, var(--groen) 16%, transparent); color:var(--groen)}

/* TRAENINGENS ART OG UDBYTTE (10/9 2026, efterspurgt af brugeren).
   Maerket genbruger .maerke's form - samme pille, samme radius, samme
   color-mix-greb som .groen - men faar ZONENS farve, saa "Threshold" og
   "Endurance" kan skelnes paa et blik i en lang liste.

   Farven kommer fra --zone1..7 og ikke fra en ny rampe: der findes ÉN
   anstrengelsesskala i appen, og en ottende farve her ville vaere et andet
   udsagn om det samme. Zone 6 og 7 kan kun naas paa watt-aksen (se
   traeningsbelastning.TAG_NAVN_PULS), men klasserne findes for alle syv, saa
   en effektmaaler-rytter ikke rammer en manglende regel. */
.maerke.art{display:inline-flex; align-items:center; gap:6px; font-weight:600; letter-spacing:.02em;
  padding-left:8px; background:color-mix(in srgb, var(--art-farve) 16%, transparent);
  color:var(--art-farve)}
/* Prikken (6/10 2026): zonens farve med en svag gloed - samme lys som graferne. */
.maerke.art::before{content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--art-farve); box-shadow:0 0 7px var(--art-farve)}
/* Planlagt, men ikke koert: omrids og daempet tekst, prikken uden lys. */
.maerke.art.art-spoegelse{background:none; color:var(--daempet);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--art-farve) 45%, transparent)}
.maerke.art.art-spoegelse::before{box-shadow:none; opacity:.6}
.art-afveg{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.art-afveg .maerke small{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; opacity:.7; margin-right:-1px}
/* Pilen og det koerte hoerer sammen - bryder linjen, flytter de ned sammen. */
.art-gjort{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.art-pil{flex:none; width:16px; height:16px; fill:none; stroke:var(--daempet-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.art-udbytte-under{margin-top:6px; font-size:12px; line-height:1.4; color:var(--tekst)}
.art-udbytte-under span{color:var(--daempet)}
.art-z1{--art-farve:var(--zone1)}
.art-z2{--art-farve:var(--zone2)}
.art-z3{--art-farve:var(--zone3)}
.art-z4{--art-farve:var(--zone4)}
.art-z5{--art-farve:var(--zone5)}
.art-z6{--art-farve:var(--zone6)}
.art-z7{--art-farve:var(--zone7)}

/* Pillen og udbyttet paa samme linje, naar der er plads, og under hinanden naar
   der ikke er. Udbyttet er DAEMPET med vilje: maerket er svaret, saetningen er
   forklaringen - og to ting i fuld styrke ville konkurrere. */
.art-linje{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:12px}
.art-udbytte{font-size:12px; color:var(--daempet); line-height:1.45}
.art-planlagt{font-size:12px; color:var(--daempet)}
select.tid{width:auto; padding:7px 10px; font-size:16px}

/* FARVEN LEVER I RAMMEN, IKKE I PROSAEN. Foer stod HELE beskedens broedtekst i
   sin statusfarve, og en lang advarsel (fx FTP-evidensen paa You, ni linjer) blev
   dermed en gul mur - det hoejest raabende element paa siden, selvom det er et
   forbehold og ikke sidens indhold. Nu baerer kant og tonet flade betydningen,
   mens teksten staar i --tekst og kan laeses. Det er samme regel som .dagsdom
   allerede foelger (venstrekanten farves, teksten ikke), saa systemet bliver mere
   sammenhaengende - ikke mindre. Fremhaevet tekst beholder farven, saa det stadig
   er tydeligt HVILKEN slags besked det er. */
.besked{padding:12px 14px; border-radius:var(--r-kontrol); font-size:13px; line-height:1.5;
  margin-bottom:12px; color:var(--tekst)}
.besked b, .besked strong{color:var(--besked-farve, var(--tekst))}
.besked.info{--besked-farve:var(--groen);
  background:color-mix(in srgb, var(--groen) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--groen) 28%, transparent)}
.besked.advarsel{--besked-farve:var(--gul);
  background:color-mix(in srgb, var(--gul) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--gul) 28%, transparent)}
/* To haarde dage i traek (4/10 2026): samme gule .besked.advarsel som resten af appen,
   med et advarselsikon foran overskriften. */
.haard-traek{margin:12px 0 0}
.haard-traek p{margin:0}
.haard-traek .ht-titel{display:flex; align-items:center; gap:7px; margin-bottom:3px}
.haard-traek .ht-titel svg{flex:none; width:16px; height:16px; fill:none; stroke:var(--gul);
  stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.besked.fejl{--besked-farve:var(--roed);
  background:color-mix(in srgb, var(--roed) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--roed) 28%, transparent)}

/* FLYDENDE PILLE (19/9 2026, mock'en `docs/mockups/makeover/tabbar-floating.html`,
   godkendt paa telefonen): de fire faner ligger i en loeftet glaspille, der
   FLYDER over feedet - 12px fra kanterne og 12px over bunden - i stedet for en
   bar klistret til skaermkanten. Feedet ruller ind under den og skinner igennem.

   <nav> selv er stadig en fuldbred, fast beholder (turens `turNavLoeft()` maaler
   dens `offsetHeight`, og `visFane()` finder knapperne som `:scope > button`),
   saa markuppen er uroert: pillen er `nav::after` (glasset), en svag moerkning
   af de sidste raekker er `nav::before`, og beholderen selv er gennemsigtig for
   tryk (`pointer-events:none`), saa et tryk ved siden af pillen rammer feedet.
   Begge pseudoer ligger med negativ z-index UNDER knapperne og markoeren i
   nav's egen stablingskontekst (position:fixed skaber den). */
/* z-index:20 er noedvendig, NU hvor indholdet ruller ind under pillen: som bar
   laa menuen under sidens bundpolstring, og intet naaede den. Cockpitternes
   sektioner, klaebende hoveder og dock ligger paa 1-6 og lagde sig over pillen
   uden dette (set paa telefonen 19/9). Under Save-bjaelken (22), scrim (40),
   ark (41) og toast (60) - et ark, der glider op, SKAL daekke menuen. */
nav{position:fixed; bottom:var(--browser-bund); left:0; right:0; max-width:var(--spalte); margin:0 auto;
  display:flex; pointer-events:none; z-index:20;
  padding:0 12px calc(12px + env(safe-area-inset-bottom))}
nav::after{content:''; position:absolute; left:12px; right:12px; top:0;
  bottom:calc(12px + env(safe-area-inset-bottom)); z-index:-1; border-radius:999px;
  background:color-mix(in srgb, var(--kort-2) 86%, transparent);
  backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--kant-staerk);
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(243,238,230,.07)}
nav::before{content:''; position:absolute; left:0; right:0; bottom:0; height:130px; z-index:-2;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 62%, transparent))}
/* Kun ord, ingen ikoner: et ikon for "Today" tilfoejer ingen betydning, som
   ordet ikke allerede baerer. Skriftstoerrelsen op fra 11 til 13, nu hvor
   ordet staar alene og skal kunne laeses paa afstand af en tommelfinger.

   BREDDEN FOELGER ORDET (flex:1 1 auto), ikke omvendt - saa et ord aldrig kan
   braekke over to linjer og goere hele linjen hoejere. Understregningen paa
   den aktive fane er centreret pr. knap og foelger med.

   FIRE FANER siden 12/9 2026 (You og Connections flyttede op i headerens
   hjoerner, se .header-ikon). MAALT, ikke skoennet - den slags paastand har
   drevet foer, senest da en sjette fane kom til uden at nogen maalte igen:

       Today 38 + Activities 57 + Plan 27 + Workouts 59  = 181px tekst
       4 knapper x 12px polstring                        =  48px
                                                          = 229px i alt

   229px har rigelig plads helt ned til 320px (91px luft) - medieforespoergslen
   nedenfor er derfor ikke laengere strengt noedvendig, men er bevidst beholdt
   som en billig sikkerhedsmargin. TILFOEJES en fane igen, saa maal linjen paa
   ny ved 320px, foer du stoler paa den. */
/* Pillen er 52px hoej (var 64 som bar), ikonet 20px (var 24), ordet 11px paa en
   linje af sin egen hoejde (line-height:1). Flex-kolonnen med justify-content:
   center centrerer ikon + ord som EN gruppe - mock'ens grid strakte sine to
   raekker ud over hele hoejden (maalt 28 + 19px), saa ikonet laa for hoejt i
   tommelen; det var det, brugeren saa. Knapperne er de eneste trykflader i
   <nav> (pointer-events:auto), se beholderen ovenfor. */
nav button{flex:1 1 0; min-width:0; background:none; border:none; color:var(--daempet-2);
  height:52px; padding:0 2px; font-size:11px; line-height:1; font-weight:500; cursor:pointer;
  font-family:inherit; white-space:nowrap; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; pointer-events:auto;
  border-radius:999px; transition:color .2s, transform .18s var(--fjeder)}
nav button svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; display:block}
nav button:active{transform:scale(.92)}
nav button{position:relative}
nav button.aktiv{color:var(--tekst); font-weight:600}
nav button.aktiv svg{stroke:var(--rav)}
/* ÉN markoer, der GLIDER (13/9 2026, mockup'ens .tabbar .ind) - ikke et
   ::after pr. knap, der bare tændes og slukkes. Bredden er en fjerdedel af
   linjen inden for renden; --i saettes af visFane(). Uden for de fire faner
   (You, Connections) er den usynlig, men staar hvor den sidst var, saa den
   glider derfra naar man kommer tilbage. */
/* I pillen er markoeren en bloed rav-TOMMEL bag den aktive fane (`::before`,
   5px inde i pillen), ikke en streg paa overkanten - en pille har ingen kant,
   en streg kan sidde paa. Selve .nav-ind daekker hele pillens hoejde og er en
   fjerdedel af dens bredde: procenten regnes af nav's polstringsboks, saa
   (100% - 24px) / n er praecis knappernes bredde. */
nav .nav-ind{position:absolute; top:0; left:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  width:calc((100% - 24px) / var(--nav-n, 4)); pointer-events:none;
  transform:translateX(calc(var(--i, 0) * 100%));
  transition:transform .3s var(--fjeder), opacity .2s}
nav .nav-ind::before{content:''; position:absolute; inset:5px; border-radius:999px; background:var(--rav-dim)}
nav.nav-uden-fane .nav-ind{opacity:0}
/* De smalleste telefoner (iPhone SE 1. generation og aeldre Android): pillen
   2px lavere og tommelen 1px taettere paa kanten. Ordene fylder mindre end
   pillens 296px ved 320px (maalt i mock'en: intet overloeb), saa skriften
   trimmes ikke laengere. */
@media (max-width: 359px){
  nav button{height:50px}
  nav .nav-ind::before{inset:4px}
}

/* ── Dagsbuen ────────────────────────────────────────────────────────────
   Én figur med tre spor frem for tre ringe. Aabningen nederst goer den til en
   BUE og ikke en ring - det er dét, der goer at de tre spor laeses som én
   figur om den samme dag. Se dagsoverblik.py. */
.bue-kort{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center}
.bue{width:148px; height:148px; flex:0 0 148px; overflow:visible}
.bue .skinne{stroke:var(--skinne)}
.bue .spor{transition:stroke-dashoffset 1s cubic-bezier(.22,.75,.3,1); stroke-linecap:round}
.bue-midt{text-align:center}
/* Tallet og etiketten skal ligge inden for det INDERSTE spors hul, ikke oven paa
   det. Hullet er (inderste radius - halv stregbredde) = 29 enheder, altsaa 58 i
   diameter - og det er den maalestok, de to linjer her er sat efter. */
.bue-midt .v{font-size:22px; font-weight:700; line-height:1}
.bue-midt .n{font-size:9px; color:var(--daempet); text-transform:uppercase;
  letter-spacing:.05em; margin-top:3px}
.bue-tekst{flex:1 1 210px; min-width:190px}
/* ── Maalerne: tre spor paa én faelles baseline ───────────────────────────
   Afloeser dagsbuen. Tre ringe om samme midte kan ikke sammenlignes - oejet
   kan ikke maale buelaengder mod hinanden - mens tre vandrette spor kan
   aflaeses paa ét blik. Fyldet bruger `broek`, praecis det tal buen tegnede
   sig efter, saa figuren skifter og datagrundlaget er det samme. */
/* ── "Hvor du er" ─────────────────────────────────────────────────────────
   Base, Fatigue og Form paa bar flade, adskilt fra maalingerne af en streg.
   Form ER afstanden mellem de to foerste, saa den staar som en UDLEDT linje
   under dem - ikke som en tredje maaling. */

/* ── Dagens pas: skaermens ene indrammede ting ────────────────────────────
   Navnet er det stoerste paa kortet, typeordet staar over det i passets egen
   zonefarve, og de tre tal staar som fakta - ikke som badges, fordi de er
   maalinger og ikke etiketter. */
.pas .pas-type{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--daempet); margin:0 0 10px; padding-right:44px;
}
.pas .pas-type b{font-weight:600; font-size:12px; padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb, currentColor 18%, transparent)}
.pas-navn{font-size:22px; font-weight:600; letter-spacing:-.015em; margin:0;
  line-height:1.2; color:var(--tekst)}
.pas-fakta{display:grid; grid-template-columns:repeat(auto-fit, minmax(76px, 1fr)); gap:8px;
  margin:14px 0 0; font-variant-numeric:tabular-nums}
.pas-fakta .fakta{background:var(--felt); border-radius:14px; padding:10px 10px 8px; min-width:0}
.pas-fakta .fakta .v{display:block; font-size:clamp(15px, 4.6vw, 19px); font-weight:600;
  letter-spacing:-.01em; line-height:1.1; white-space:nowrap}
.pas-fakta .fakta .n{display:block; font-size:11px; color:var(--daempet); margin-top:3px}
.pas .dag-detalje{margin-top:14px}

/* Kortet er skaermens ENE indrammede ting, saa rammen skal betyde noget: her er
   dagens handling. Kroppen har polstringen, foden gaar helt ud til kanten, og
   `overflow:hidden` klipper cellerne efter kortets egne hjoerner. */
.pas{background:var(--kort); border:1px solid var(--kant); border-radius:var(--r-helt);
  margin:0; overflow:hidden; display:block; position:relative}
.pas-krop{padding:16px 16px 14px}
/* Har passet en fod, slutter kroppen taettere paa den - foden er selv en
   vandret streg og behoever ikke luft under teksten oveni. */
.pas-krop:not(:last-child){padding-bottom:16px}

/* Foden: lige brede celler delt af de samme haarfine streger som kortets kant.
   Kun den foerste er rav. Wrapper cellerne (fire destinationer paa en smal
   telefon), faar den nye raekke sin egen streg foroven. */
.pas-fod{border-top:1px solid var(--kant); padding:12px 16px 14px; display:grid; gap:8px}
.fod-raekke{display:flex; gap:8px}
.fod-raekke + .fod-raekke{border-top:none}
.fod-raekke > *{flex:1; min-height:44px; padding:10px 8px; font-size:13px; font-weight:600;
  color:var(--tekst); background:var(--felt); border:1px solid var(--kant-staerk);
  border-radius:var(--r-kontrol); font-family:inherit; cursor:pointer; text-align:center;
  text-decoration:none; display:flex; align-items:center; justify-content:center; min-width:0}
.fod-raekke > * + *{border-left:1px solid var(--kant-staerk)}
.fod-raekke .primaer{color:var(--amber-ink, var(--paa-rav)); background:var(--rav); border-color:var(--rav)}
.fod-raekke > *:disabled{opacity:.6; cursor:default}
.hvor{margin:30px 0 0; padding-top:24px; border-top:1px solid var(--kant)}
.hvor-titel{
  display:block; background:none; border:none; padding:0; margin:0 0 8px;
  font-family:inherit; text-align:left; cursor:pointer;
  font-size:19px; font-weight:600; letter-spacing:-.018em; color:var(--z4);
}
.hvor-titel.rolig{color:var(--tekst); cursor:default}
/* Symbol venstre + (i) hoejre (5/9 2026) - samme sprog som .fase-hjoerne
   dernede: to glyffer, der hver siger sit, ikke to tilfaeldige ikoner.
   `vertical-align` og ikke flex, af samme grund som .fase-hjoerne: glyfferne
   skal sidde paa SKRIFTENS midte, ikke paa linjeboksens.
   Symbolet staar i sin egen RING (6/9 2026) - samme .badge-ring som badget
   selv brugte, foer det flyttede ind i titlen: et bart ikon uden cirkel saa
   ud som en overset detalje, ikke som en bevidst mindre udgave af badget.
   `display:inline-flex` (ikke .badge-rings egen `flex`), saa ringen kan sidde
   inde i tekstlinjen ved siden af overskriften.
   `vertical-align:0.5px` er MAALT, ikke gaettet (6/9 2026, anden runde) -
   foerste udgave (-6px) var et skoen og stod 6,5px for lavt i forhold til
   "Overreaching"s tekstmidte. Maalt med en Range() om tekstknuden og
   getBoundingClientRect() paa ringen, saa diffen kunne laeses som et tal,
   ikke vurderes med oejet. Aendres ringens hoejde, skal denne maales igen. */
.hvor-titel .hvor-ikon-ring{display:inline-flex; width:22px; height:22px;
  border-width:1.5px; vertical-align:0.5px; margin-right:8px}
.hvor-titel .hvor-info-ikon{width:15px; height:15px; vertical-align:-2px;
  margin-left:7px; color:var(--daempet)}
.hvor-tekst{margin:0 0 19px; font-size:13px; line-height:1.55; color:var(--daempet)}
.lag{display:grid; gap:11px}
.lag-r{display:grid; grid-template-columns:58px 1fr 46px; align-items:center; gap:12px}
.lag-n{font-size:12px; color:var(--daempet)}
.lag-spor{position:relative; display:block; height:9px; border-radius:3px;
  background:var(--felt)}
.lag-spor i{position:absolute; top:0; bottom:0; left:0; border-radius:3px; display:block}
.lag-spor i.over{border-radius:0 3px 3px 0}
.lag-v{font-size:14px; font-weight:600; text-align:right;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.lag-v.varm{color:var(--z4)}
.form-linje{margin-top:11px; padding-top:11px; border-top:1px solid var(--kant)}
/* .fase-linje er FJERNET 5. september 2026. Den var fasens linje nederst i
   formkortet; fasen staar nu i maalstrimlens hoejre side, se .fase-hjoerne
   dernede. Reglen er slettet frem for efterladt, saa der ikke ligger en
   forladt klasse, en senere runde kan komme til at genbruge til noget andet. */

.flanker{display:flex; gap:26px; margin:0 0 20px}
.spor{position:relative; height:5px; border-radius:3px; background:var(--felt);
  margin:7px 0 0}
.spor .fyld{position:absolute; inset:0 auto 0 0; border-radius:3px;
  background:var(--spor-farve, var(--daempet));
  animation:spor-voks .8s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:.2s}
@keyframes spor-voks{from{transform:scaleX(0); transform-origin:left}}
@media (prefers-reduced-motion: reduce){ .spor .fyld{animation:none} }

/* ── Load-sporet (15/9 2026) ─────────────────────────────────────────────
   Ét tal (Load, samme skala for alle) og ét zonefarvet spor, tegnet mod
   atletens egne ture de seneste 6 uger - afloeser femtrins-blokkene for
   Intensity/Load paa passene. Se loadSpor()/loadSkalaLinje()/loadBlok() i
   forma.js. Reference: docs/mockups/makeover/load-visning.html (runde 2). */
.lspor{position:relative; height:10px; border-radius:5px; background:var(--skinne); overflow:visible}
.lspor-stak{position:absolute; inset:0 auto 0 0; display:flex; gap:0; height:100%; border-radius:5px;
  box-shadow:0 0 12px -3px var(--slut, transparent);
  animation:spor-voks .7s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:.15s;
  transform-origin:left}
@media (prefers-reduced-motion: reduce){ .lspor-stak{animation:none} }
.lspor-stak i{display:block; height:100%;
  background:linear-gradient(180deg, color-mix(in oklab, var(--c) 72%, white), var(--c) 60%)}
.lspor-stak i:first-child{border-radius:5px 0 0 5px}
.lspor-stak i:last-child{border-radius:0 5px 5px 0}
.lspor-stak i:only-child{border-radius:5px}
/* Planlagt = omrids, udfoert = fyld. */
.lspor-plan .lspor-stak{box-shadow:none}
.lspor-plan .lspor-stak i{background:color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow:inset 0 0 0 1.5px var(--c)}
.lspor-normal{position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px;
  background:color-mix(in srgb, var(--tekst) 55%, transparent); border-radius:1px}
.lspor-maal{position:absolute; top:-5px; bottom:-5px; width:3px; margin-left:-1.5px;
  background:var(--tekst); border-radius:2px}
/* Sporet fyldes helt, og tallet siger resten - en blød udtoning i enden viser
   at der er mere, uden at laane et tal der ikke er der. Sort i en maske er
   ikke en farve, det er tilladt. */
.lspor-over{-webkit-mask-image:linear-gradient(90deg, #000 88%, rgba(0,0,0,.25));
  mask-image:linear-gradient(90deg, #000 88%, rgba(0,0,0,.25))}
/* Minisporet i lister (Workouts' lukkede kort, Activities' raekker). */
.lspor-mini{height:6px; width:76px; border-radius:3px}
.lspor-mini .lspor-stak{gap:0; box-shadow:none}
.lspor-mini .lspor-stak i:first-child{border-radius:3px 0 0 3px}
.lspor-mini .lspor-stak i:last-child{border-radius:0 3px 3px 0}
.lspor-mini .lspor-stak i:only-child{border-radius:3px}
.lspor-mini .lspor-normal{top:-3px; bottom:-3px}

/* Linjen med stregens forklaring + knappen til arket (#ark-load-spor). */
.lspor-skala{display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:11px; color:var(--daempet-2); margin-top:6px}
.lspor-normal-tekst::before{content:''; display:inline-block; width:2px; height:9px;
  background:var(--tekst); opacity:.55; margin-right:6px; vertical-align:-1px}
/* Ingen global button-reset i forma.css (se CLAUDE.md) - knappen nulstiller
   sig selv. */
.lspor-info{display:inline-flex; align-items:center; gap:6px; background:none; border:none;
  font-family:inherit; padding:6px 0; margin:-6px 0; font-size:11px; color:var(--daempet-2);
  cursor:pointer}
.lspor-info:focus-visible{outline:2px solid var(--rav); outline-offset:3px; border-radius:6px}
.lspor-info svg{flex:none; opacity:.8}

/* "Load  84 of 95 planned" + sporet (loadBlok()). */
.lspor-blok{display:grid; gap:8px}
/* "Load 84" + forskellen paa én linje over sporet (kompakt, 6/10 2026). */
.lspor-hoved{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px}
.lspor-navn{display:inline-flex; align-items:baseline; gap:6px; font-size:12px; color:var(--daempet)}
.lspor-tal{font-size:17px; font-weight:600; line-height:1; color:var(--tekst); font-variant-numeric:tabular-nums}
/* Koert mod plan (loadBlok, 6/10 2026): neutral pille - rav er Pro og handlinger. */
.lspor-forskel{font-size:11px; font-weight:600; line-height:1.3; padding:2px 8px; border-radius:999px;
  background:var(--kort-2); color:var(--daempet); border:1px solid var(--kant)}
/* Mærker med ord under (kun koert mod plan): sporet faar plads til ordene. */
/* Ordene staar OVER sporet i hovedlinjens baand (lspor-blok gap 8 + hoved 22 px); et ord,
   der rammer "Load 84"/forskellen, faar .under (lsporOrdPlads() i forma.js). */
.lspor-et.har-under{margin-bottom:18px}
.lspor-normal > span, .lspor-maal > span{position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:11px; font-weight:400; color:var(--daempet); font-variant-numeric:tabular-nums}
.lspor-normal > span.under, .lspor-maal > span.under{bottom:auto; top:calc(100% + 5px)}
.lspor-normal > span.a-start, .lspor-maal > span.a-start{left:0; transform:none}
.lspor-normal > span.a-slut, .lspor-maal > span.a-slut{left:auto; right:0; transform:none}
/* Det, der manglede op til planen: stribet, ingen kant. */
.lspor-rest{position:absolute; top:0; bottom:0; border-radius:0 5px 5px 0; pointer-events:none;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--tekst) 16%, transparent) 0 3px, transparent 3px 7px)}

/* ── Maalingerne: tre spor paa ÉN faelles baseline ──────────────────────
   Raekken var foer en flex-linje med en farvet PRIK foran navnet og vaerdien
   sat lille og daempet yderst til hoejre. Prikken sagde det samme som sporets
   egen farve to linjer nede, og den daempede vaerdi gjorde TALLET - det man
   kom for - til det svageste element i raekken. Nu baerer tallet raekken, og
   enheden staar som `small` ved siden af, saa "63" og "/100" ikke vejer ens. */
#bue-kort .maalinger{display:grid; gap:18px; margin:0 0 4px}
.maalinger{display:grid; gap:18px}
.maaling{display:grid; gap:7px}
.maaling-hoved{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.maaling-navn{font-size:13px; font-weight:500; display:flex; align-items:baseline; gap:6px}
.maaling-tal{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; white-space:nowrap}
.maaling-tal small{font-weight:400; color:var(--daempet); font-size:12px; margin-left:2px}
.maaling-note{font-size:12px; color:var(--daempet); line-height:1.45; margin:0}
.maaling-note b{color:var(--tekst); font-weight:600}
.maaling.laast{opacity:.55}


/* Maerket rager op OVER sporet i begge ender: det skal kunne aflaeses praecist,
   og en prik inde i banen ville flyde sammen med fyldet. */
.spor .maal-maerke{position:absolute; top:-4px; bottom:-4px; width:2px; border-radius:1px;
  background:var(--tekst); opacity:.85}

.spor-note{font-size:12px; color:var(--daempet); line-height:1.45; margin:0;
  background:none; border:none; padding:0; text-align:left; font-family:inherit; display:block}
button.spor-note{cursor:pointer; width:100%; font-size:12px; color:var(--daempet)}
.bue-hylster{position:relative}

/* De to smaa badges, der flankerer buen - readiness (venstre) og traeningsfase
   (hoejre). Egen farve pr. tilstand paa ringen, ikke paa navnet: navnet skal blive
   vaerende laesbart uden at konkurrere med spor-prikkernes farvekode. Fasen er
   bevidst ALTID samme blaa - den er ikke en dom (god/daarlig) saadan som
   readiness er, kun information om hvor i planen man staar. */
.bue-flanke{display:flex; flex-direction:column; align-items:center; gap:6px;
  width:66px; flex:0 0 auto}
/* .badge-ring er farven/formen, delt mellem badgets egen ring (48px) og hver
   linje i info-arket bag "i"-knappen (36px, se .ark-punkt-ring) - samme fem
   farver skal betyde det samme begge steder. */
.badge-ring{border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid}
.badge-ring.groen{border-color:var(--groen); color:var(--groen)}
.badge-ring.gul{border-color:var(--gul); color:var(--gul)}
.badge-ring.roed{border-color:var(--roed); color:var(--roed)}
.badge-ring.daempet{border-color:var(--daempet); color:var(--daempet)}
.badge-ring.fase{border-color:var(--spor-soevn); color:var(--spor-soevn)}
.bue-flanke-ring{width:48px; height:48px; flex:0 0 48px; position:relative}
.bue-flanke-navn{font-size:11px; font-weight:600; text-align:center; line-height:1.25}

/* Den lille "i"-knap, der overlapper badgets ring foroven til hoejre - samme
   idé som skaermbillederne brugeren viste, men egen udformning: en simpel
   streg+prik i en ring, ikke sporet efter noget. */
.bue-flanke-info{position:absolute; top:-6px; right:-6px; width:19px; height:19px;
  border-radius:50%; background:var(--kort); border:1px solid var(--kant);
  color:var(--daempet); display:flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer}
.bue-flanke-info svg{width:12px; height:12px}

/* Maalstrimlen - to store, TYDELIGT MAERKEDE tal (samme figur-typografi som
   .bue-midt .v/.n) lige under hele buen/badge-raekken: hvor langt naaet, og
   hvor mange dage tilbage. Proevede foerst at proppe den kondenseret (uden
   ord) ind i fase-badgets egen kolonne - virkede ikke, se maalStrimmel() i
   forma.js. Vises kun naar et maal er sat. */
/* Maalets to tal under maalingerne. Bygget som passets .pas-fakta og ikke som
   stat-fliser: samme stoerrelse, samme saetningsversal, samme afstand mellem tal
   og etiket. Etiketterne stod i SPORET-UD VERSALER ("PROGRESS", "DAYS TO GO"),
   hvilket bryder husets egen regel om at en versal-etiket over hvert element er
   chrome, der optraeder uanset indhold - se .kort h2's begrundelse. Tallene er
   ogsaa mindre nu: 28px gjorde dem til skaermens stoerste efter dommen, og et
   maal 88 dage ude er ikke dagens vigtigste tal. */
.maal-strimmel{margin-top:26px; padding-top:20px; border-top:1px solid var(--kant)}
.maal-strimmel-tal{display:flex; gap:24px; font-variant-numeric:tabular-nums;
  align-items:flex-start}
.maal-tal{display:flex; flex-direction:column}
.maal-tal .v{font-size:19px; font-weight:600; line-height:1; letter-spacing:-.01em}
.maal-tal .v.groen{color:var(--groen)}
.maal-tal .v.fase{color:var(--spor-soevn)}
.maal-tal .n{font-size:11px; color:var(--daempet); margin-top:3px}

/* ── Fasen i strimlens hoejre side (5. september 2026) ──────────────────
   Afloeser .fase-linje, som stod nederst i formkortet. Fasen er IKKE et
   tredje .maal-tal: den faar hverken figur-typografien eller 19px, fordi
   "Days to go" allerede staar i fasens blaa, og to blaa vaerdier ved siden
   af hinanden goer farven tavs. Den fylder raekkens tomme hoejreside ud.

   TO GLYFFER, og de siger hver sit: fasens eget ikon (samme figur som i
   infoarket, saa den genkendes naar arket aabner) og husets (i), som siger
   at der er mere at laese. (i)-glyffen er den fra .bue-flanke-info - den
   har ikke vaeret paa skaermen siden ringene forsvandt 3/9.

   FARVEN KAN IKKE BAERE TRYKKET. Carbon-reglen er, at farve betyder
   anstrengelse; fasens blaa er data (hvor i opbygningen man staar), ikke en
   invitation. Signalet er derfor en FORM, og bekraeftelsen er :active. */
.fase-hjoerne{margin:-7px -9px -7px auto; padding:7px 9px; border-radius:6px;
  display:block; text-align:right; background:none; border:none;
  font-family:inherit; cursor:pointer}
.fase-hjoerne .f{display:block; font-size:13px; font-weight:600;
  color:var(--spor-soevn); line-height:1.15; letter-spacing:-.005em}
.fase-hjoerne .u{display:block; font-size:11px; color:var(--daempet); margin-top:3px}
/* `vertical-align` og ikke flex: glyfferne skal sidde paa SKRIFTENS midte,
   ikke paa linjeboksens, ellers flyder de en anelse for hoejt. */
.fase-hjoerne .fase-ikon{width:14px; height:14px; vertical-align:-2px;
  margin-right:5px}
.fase-hjoerne .info-ikon{width:13px; height:13px; vertical-align:-1.5px;
  margin-left:5px; color:var(--daempet)}
/* Trykfladen er HELE blokken (maalt 45,5px), ikke de 13px glyf. De negative
   marginer ophaever polstringen praecis, saa teksten ikke flytter sig - maalt
   0,0px forskydning mod tallene ved siden af, og strimlen fylder ikke mere
   end foer.

   :active er appens FOERSTE. En telefon har ingen markoer og ingen hover, saa
   den saenkede flade under fingeren er den eneste kvittering, der findes. */
.fase-hjoerne:active{background:var(--felt)}
.fase-hjoerne:active .info-ikon{color:var(--tekst)}
.fase-hjoerne:focus-visible{outline:2px solid var(--rav); outline-offset:2px}

/* ── Infoarket ──────────────────────────────────────────────────────────
   Skyder op nedefra og fylder det meste af skaermen - en fuld ordliste over
   ALLE tilstande i den kategori, ikke kun den aktuelle. Baggrunden lukker det
   ved tryk udenfor; .ark-luk er den tydelige, eksplicitte lukning. Elementerne
   ligger altid i DOM'et (bygget af buekort() sammen med resten af Daily
   insight), kun synlige/usynlige via .vis - saa .ark selv kan animere med en
   transform-transition, som display:none/.skjul ikke kan. */
.ark-baggrund{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .25s}
.ark-baggrund.vis{opacity:1; pointer-events:auto}
.ark{position:fixed; left:0; right:0; bottom:0; z-index:41; max-width:var(--spalte);
  margin:0 auto; background:var(--kort-2);
  border:1px solid var(--kant-staerk); border-bottom:none; border-radius:26px 26px 0 0;
  max-height:88vh; max-height:88dvh; overflow-y:auto;
  padding:8px var(--rende) calc(16px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .38s var(--fjeder);
  box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.ark.vis{transform:translateY(0)}
/* Et lukket ark ligger kun 5 % under kanten, og skyggen (-20px/60px) naaede op i
   skaermen - flere lukkede ark moerknede bunden, ogsaa OVEN PAA et aabent ark, der
   stod tidligere i DOM'en (maalarkets "Remove goal", 8/10 2026). */
.ark:not(.vis){box-shadow:none}
.ark-greb{width:40px; height:4px; border-radius:4px; background:var(--kant-staerk);
  margin:4px auto 12px}
.ark-top{display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px; gap:12px}
.ark-top h3{margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em}
.ark-luk{background:none; border:none; color:var(--daempet); font-size:14px;
  cursor:pointer; padding:6px 2px; font-family:inherit; flex:0 0 auto}
.ark-punkt{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--kant)}
.ark-punkt:first-child{border-top:none}
.ark-punkt-ring{width:40px; height:40px; flex:0 0 40px; border-radius:13px;
  background:var(--kort); border:none; color:var(--rav)}
.ark-punkt-ring svg{width:18px; height:18px}
.ark-punkt-tekst h4{margin:0 0 4px; font-size:13px}
.ark-punkt-tekst p{margin:0; font-size:12px; color:var(--daempet); line-height:1.5}

/* Dagsarket har fast fod, saa Cancel ALDRIG ligger uden for billedet. Maalt paa
   320x568 (iPhone SE) foer rettelsen: arket blev 454px (max-height 80vh),
   knappen laa under kanten og krævede en rulning for at blive set. Samme
   flex-form som #ark-tid, #ark-maal og #ark-udgivelser allerede bruger - scopet
   til id'et, fordi .ark deles med appens oevrige, korte ark. */
#ark-dag{display:flex; flex-direction:column; padding-bottom:0; overflow:hidden}
#ark-dag .ark-greb, #ark-dag .ark-top{flex:0 0 auto}
#ark-dag .ark-rul{flex:1 1 auto; min-height:0; overflow-y:auto}
#ark-dag .ark-fod{flex:0 0 auto}
#ark-dag .ark-fod .knap{width:100%}

/* Dagsarkets raekker - samme ikon-i-ring-figur som infoarkenes .ark-punkt,
   men som en rigtig knap (hele raekken er trykbar, ikke kun en tekstlinje). */
.dag-valg{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 4px; background:none; border:none; border-top:1px solid var(--kant);
  color:var(--tekst); cursor:pointer; font:inherit; border-radius:12px}
.dag-valg:active{background:var(--kort)}
.dag-valg:first-of-type{border-top:none}
.dag-valg-tekst b{display:block; font-size:15px; font-weight:600}
.dag-valg-tekst span{display:block; font-size:12px; color:var(--daempet);
  line-height:1.45; margin-top:2px}
.dag-valg.fjern .ark-punkt-ring{color:var(--roed)}
.dag-nu{margin:0 0 4px; font-size:12px; color:var(--daempet)}
.bib-for-dag{display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:11px 13px; margin:0 0 12px; border-radius:12px;
  background:var(--kant-svag); font-size:13px}
/* forma.css har bevidst INGEN global button-reset (se CLAUDE.md) - denne bare
   <button> skal derfor selv nulstille, ellers tegner browseren sin egen graa
   knap ovenpaa striben. */
.bib-for-dag button{background:none; border:none; color:var(--daempet);
  font:inherit; font-size:12px; text-decoration:underline; cursor:pointer;
  padding:0; flex:0 0 auto}

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

/* Bevaegelse med maade: buerne tegner sig op ved indlaesning, resten staar
   stille. Og slet ikke, hvis brugeren har bedt om mindre bevaegelse. */
@media (prefers-reduced-motion: reduce){
  .bue .spor{transition:none}
  .maal-bjaelke span{transition:none}
  /* Maerket skal staa faerdigtegnet, ikke usynligt: uden stroke-dashoffset:0
     her ville animationen bare vaere slaaet fra, og logoet aldrig dukke op. */
  .tegner .bue, .tegner .kurve{stroke-dashoffset:0; animation:none}
}

/* ── Zoneprofil ─────────────────────────────────────────────────────────
   Passet tegnet som blokke: bredde efter varighed, hoejde og farve efter zone.
   preserveAspectRatio="none" straekker viewBoxen til kortets bredde; det er
   forsvarligt her, fordi figuren kun bestaar af aksejusterede rektangler uden
   streger eller tekst, der kunne blive forvraenget. */
/* SEGMENTERNE ER FLEX-BLOKKE, IKKE EN SVG (13/9 2026, mockup'ens .segs). En
   straekt SVG kan hverken runde hjoerner eller lade blokkene rejse sig; nu er
   hver blok et element med sin egen bredde (--w, sekunder) og hoejde (--h),
   og de vokser op fra bunden, naar kortet tegnes. Kompakt-udgaven (plan-
   listen, fjorten ad gangen) staar stille. */
/* PASGRAFIK 2026 (6/10 2026, docs/mockups/makeover/genstart-og-pasgrafik.html):
   hver blok er en lysende soejle - zonefarven i toppen med en lysere kant, og
   tonet ud mod bunden - paa et svagt kvartgitter med en grundlinje. Zone 5+ (.hot)
   gloeder. --c saettes pr. blok af zoneprofil(); rampen er én blød overgang zone 2
   (top) -> zone 1 (bund) i stedet for den gamle halvt graa/halvt blaa. */
/* BLOEDE BLOKKE (27/10 2026, Mortens ja til "Forslag: bloed"): passet staar som
   én samlet form - ingen mellemrum, runde toppe, jaevn zonefarve uden lyskant,
   udtoning eller gloed - og blokkene rejser sig én efter én fra venstre (--n er
   blokkens nummer, loftet i zoneprofil(), saa et 30/15 ikke tager evigheder).
   Opvarmning/nedkoeling BEHOLDER hældningen (hans valg: stigningen er en
   oplysning), men som en bloed bue i stedet for en skarp kile: et elliptisk
   hjoerne, der loeber fra 30 % hoejde i den ene side til fuld hoejde i den anden.
   border-radius i procent virker overalt, ogsaa i aeldre iOS-Safari. */
.segs{position:relative; display:flex; align-items:flex-end; gap:0; height:64px; margin:14px 0 0; padding:0;
  background:repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), rgba(243,238,230,.035) calc(25% - 1px) 25%)}
.segs i{flex:var(--w, 1) 1 0; min-width:0; height:calc(var(--h, .3) * 100%); display:block;
  border-radius:9px 9px 0 0; transform-origin:bottom;
  background:color-mix(in oklab, var(--c, var(--zone2)) 78%, var(--bg));
  animation:segs-rejs .6s cubic-bezier(.3,1.25,.5,1) backwards; animation-delay:calc(var(--n, 0) * 45ms)}
/* 1 px overlap: uden det kan afrunding give en haarfin sprække mellem to blokke. */
.segs i + i{margin-left:-1px}
@keyframes segs-rejs{from{transform:scaleY(0)}}
.segs i.rampe{background:color-mix(in oklab, var(--zone1) 60%, var(--bg));
  border-radius:100% 9px 0 0 / 70% 9px 0 0}
.segs i.rampe.ned{border-radius:9px 100% 0 0 / 9px 70% 0 0}
/* TAET PROFIL (21/9 2026): et 30/15 har 90 blokke; ni pixels runding paa en blok
   paa tre pixels bliver en pind med kugle paa. Den taette graf faar smaa hjoerner,
   og overlappet slaas fra, saa det ikke aeder 89 px af grafen. Se zoneprofil() i
   forma.js for graensen. */
.segs.taet i{border-radius:4px 4px 0 0}
.segs.taet i + i{margin-left:0}
.segs.taet i.rampe{border-radius:100% 4px 0 0 / 70% 4px 0 0}
.segs.taet i.rampe.ned{border-radius:4px 100% 0 0 / 4px 70% 0 0}
/* Taerskellinjen (kun ikke-kompakte grafer): stiplet, med ordet i hoejre hjoerne. */
.segs-ftp{position:absolute; left:0; right:0; bottom:calc(var(--t) * 100%);
  border-top:1px dashed rgba(243,238,230,.28); pointer-events:none}
.segs-ftp span{position:absolute; right:0; top:0; transform:translateY(-50%); padding:1px 5px; border-radius:999px;
  background:var(--kort); border:1px solid var(--kant); font-size:10px; letter-spacing:.08em; line-height:1.2;
  color:var(--daempet); font-weight:600; text-transform:uppercase}
.segs.kompakt{height:30px; margin:8px 0 0; width:100%; background:none}
.segs.kompakt i{border-radius:5px 5px 0 0; animation:none}
.segs.kompakt i.rampe{border-radius:100% 5px 0 0 / 70% 5px 0 0}
.segs.kompakt i.rampe.ned{border-radius:5px 100% 0 0 / 5px 70% 0 0}
.segs.kompakt.taet i{border-radius:2px 2px 0 0}
.segs-axis{display:flex; justify-content:space-between; font-size:11px; color:var(--daempet-2);
  margin-top:6px; font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){ .segs i{animation:none} }
.z1{background:var(--zone1); fill:var(--zone1)}
.z2{background:var(--zone2); fill:var(--zone2)}
.z3{background:var(--zone3); fill:var(--zone3)}
.z4{background:var(--zone4); fill:var(--zone4)}
.z5{background:var(--zone5); fill:var(--zone5)}
.z6{background:var(--zone6); fill:var(--zone6)}
.z7{background:var(--zone7); fill:var(--zone7)}


/* Noten om ekstra tid paa en haard dag. Tonet som et FELT og ikke som en
   `.besked.advarsel`: det er et raad om noget, rytteren maaske goer, ikke en
   advarsel om noget, der er galt.
   4/10 2026 (PLAN-dag-tillaeg.md): ÉN linje, graenserne og en knap. Zone 2's blaa
   baeres af uret og ordet "zone 1-2". Knappen folder Before/After og minutvalget ud.
   `.et-ikon` (enhedstjekkets runde ikon) og `.et-titel` (dets overskrift) staar her
   stadig, fordi Device check bruger dem - se .et-panel/.et-lane laengere nede. */
/* 5/10 2026, tredje udgave (brugeren: "en laekker feature ... i formas stil"): en flise
   i passets kort med et svagt zone 2-skaer - det er zone 2-tid, og den blaa er den samme
   som de nye blokke i zonegrafen ovenover. Top: ikon + navn + samlet tid; maalstriben i
   .maal-enheders skrift; Before/After er tidsvalgets egne raekker (.tid-dagrk), saa tid
   vaelges ens i hele appen - kun farven er zone 2 i stedet for rav. */
.ekstra-tid{position:relative; margin-top:16px; padding:14px 14px 6px; border-radius:var(--r-kontrol);
  background:color-mix(in srgb, var(--zone2) 6%, var(--felt));
  border:1px solid color-mix(in srgb, var(--zone2) 20%, var(--kant));
  font-size:13px; line-height:1.45; color:var(--daempet)}
.ekstra-tid::before{content:""; position:absolute; left:14px; right:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--zone2) 55%, transparent), transparent)}
.ekstra-tid p{margin:0}
.et-top{display:flex; align-items:center; gap:10px}
.et-ur{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--zone2) 16%, transparent); color:var(--zone2)}
.et-ur svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.et-navn{flex:1; min-width:0; display:grid; line-height:1.25}
.et-navn b{font-size:14px; font-weight:600; color:var(--tekst)}
.et-navn small{font-size:12px; color:var(--daempet)}
.et-ialt{flex:none; font-family:var(--skrift-display); font-size:19px; font-weight:600; color:var(--zone2);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; animation:et-ind .35s var(--fjeder)}
@keyframes et-ind{from{opacity:0; transform:translateY(-3px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.et-ialt{animation:none}}
.ekstra-tid .et-maal{margin:10px 0 2px 42px; column-gap:16px}
/* Under 360 px: striben under ikonet ogsaa, saa de tre maal kan staa paa én linje. */
/* Maalt ved 320 px: 77 + 89 + 51 px + to mellemrum skal staa i flisen - padding 12,
   mellemrum 10 og 3 px inde i hvert maal goer det. */
@media (max-width:359px){
  .ekstra-tid{padding-left:12px; padding-right:12px}
  .ekstra-tid .et-maal{margin-left:0; column-gap:10px}
  .ekstra-tid .et-maal span{gap:3px}
}
/* Raekkerne: tidsvalgets, i zone 2. `.ekstra-tid` foran, fordi tidsvalgets egne regler
   (.tid-dagrk.aaben/.hvil) staar senere i filen med samme vaegt og ellers vinder. */
.et-raekker{margin-top:8px; border-top:1px solid color-mix(in srgb, var(--zone2) 14%, var(--kant-svag))}
.ekstra-tid .et-rk .tid-spor i{background:linear-gradient(90deg, color-mix(in srgb, var(--zone2) 45%, transparent), var(--zone2))}
.ekstra-tid .et-rk.aaben .tid-pille{color:var(--zone2)}
.ekstra-tid .et-rk.hvil .tid-pille{color:var(--zone2); font-size:13px; font-weight:600}
.ekstra-tid .et-rk.hvil .tid-pille::before{content:"+ "}
.ekstra-tid .et-rk .tid-chip.valgt{background:var(--zone2); border-color:var(--zone2); color:var(--tekst)}
.et-rk .tid-chip:disabled, .et-fjern:disabled{opacity:.5}
/* Clear ud for hver raekke: en lille rund x. Skjult, men pladsen holdt, paa en tom raekke
   - ellers blev den ene bar kortere end den anden. */
/* Et GRID med faste spor, ikke flex: WebKit (iPhone) gav knappen bredde efter teksten,
   saa "1:15" og "1:30" skubbede barens ende og krydset et par px (brugeren 5/10 2026,
   genskabt i Safari). Her er rækkens bredde uafhaengig af tallet. */
.tid-dagrk-hoved{display:grid; grid-template-columns:minmax(0, 1fr) 28px; align-items:center; gap:8px}
.tid-dagrk-hoved .tid-dagrk-knap{width:100%; min-width:0}
.et-ryd{flex:none; width:28px; height:28px; padding:0; border-radius:50%; display:grid; place-items:center;
  background:none; border:1px solid var(--kant-staerk); color:var(--daempet); cursor:pointer}
.et-ryd svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.et-ryd:active{transform:scale(.9)}
.et-ryd[hidden]{display:grid; visibility:hidden}
.et-ryd:disabled{opacity:.5}
/* .et-ikon og .et-titel bruges ogsaa af Device check (enhedstjekket) - roeres ikke. */
.et-ikon{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--zone2) 18%, transparent)}
.et-titel{font-size:15px; font-weight:600; line-height:1.3; color:var(--tekst); text-wrap:balance}
.et-pille{flex:none; display:inline-flex; padding:2px; border-radius:999px; background:var(--felt);
  border:1px solid var(--kant)}
.et-pille button{min-height:32px; padding:0 12px; border-radius:999px; background:none; border:0;
  color:var(--daempet); font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  transition:background .2s, color .2s}
.et-pille button.aktiv{background:var(--kort-2); color:var(--tekst); box-shadow:var(--skygge)}
.et-sport{margin-top:12px}
.ekstra-tid .et-note{font-size:11px; line-height:1.4; color:var(--daempet); margin-top:8px}
.et-tilfoejet{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px;
  color:var(--tekst); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.et-tilfoejet.pause{color:var(--daempet); font-weight:400}
.et-handl{flex:none; display:flex; align-items:center; gap:10px}
.et-fil{font-size:12px; font-weight:600; color:var(--tekst); text-decoration:underline; text-underline-offset:3px}
.et-fjern{flex:none; min-height:36px; padding:0 4px; background:none; border:0; color:var(--daempet);
  font:inherit; font-size:12px; font-weight:400; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
/* Tillaegslinjen ALENE (en let tur, et selvstaendigt tillaegspas, en pause, en fortidsdag):
   samme felt som boksen, men uden boksens egen linje over sig. */
.dag-krop > .et-tilfoejet{margin-top:12px; padding:6px 12px; border-radius:var(--r-kontrol);
  background:var(--felt); border:1px solid var(--kant)}

/* Passets maal i tre enheder (server: traeningsbelastning.pas_maal_enheder).

   Tallet er passets INSTRUKTION og staar derfor staerkere end prosaen over det;
   enheden er en etiket og staar svagere. Ingen overskrift: "W", "bpm" og "RPE"
   navngiver sig selv, og en etiket over tre tal, der allerede siger hvad de er,
   ville kun tage plads.

   ADSKILT MED LUFT, IKKE MED PRIKKER, og det er ikke smag. `.ekstra-tid.kompakt`
   staar to linjer nedenunder og skriver PRAECIS de samme tre enheder, kaedet sammen
   med midterprikker. De to maa ikke ligne det samme udsagn, for de siger noget
   forskelligt: den ene er hvad passet ER, den anden hvad man goer, hvis man koerer
   videre bagefter. Forskellen baeres af GRAMMATIKKEN - tre tal med luft imellem mod
   én saetning med prikker - saa oejet kan se det uden at laese.

   `tabular-nums` er der, fordi cellerne er talspaend af varierende bredde og ellers
   danser vandret, naar fjorten dage foldes ud under hinanden. */
/* PASSET TRIN FOR TRIN (12/9 2026). Hvert trin er én linje med sit eget
   trinnummer i skinnefarve - en instruktion laeses i raekkefoelge, og et punkttegn
   siger ikke hvilket trin man er naaet til. Tallene i selve saetningen staar i
   tekstfarve frem for daempet, saa "250-265 W" kan findes med et blik nede fra
   styret; resten af saetningen er daempet som al anden forklarende tekst.

   `counter-reset` paa listen og ikke paa `li`: browseren nulstiller ellers
   taelleren ved hvert punkt, og alle trin bliver til "1". */
.instr{list-style:none; counter-reset:instr; margin:14px 0 0; padding:0; border-top:1px solid var(--kant)}
.instr li{counter-increment:instr; position:relative; padding:9px 0 9px 26px;
  font-size:13px; line-height:1.45; color:var(--tekst); border-bottom:1px solid var(--kant)}
.instr li::before{content:counter(instr); position:absolute; left:0; top:11px;
  width:17px; height:17px; text-align:center; font-size:11px; line-height:15px;
  color:var(--daempet); border:1px solid var(--kant-staerk); border-radius:5px;
  font-variant-numeric:tabular-nums}
.instr li:last-child{border-bottom:none}
.maal-enheder{display:flex; flex-wrap:wrap; column-gap:20px; row-gap:4px;
  align-items:baseline; margin-top:9px}
.maal-enheder span{display:inline-flex; align-items:baseline; gap:4px}
.maal-enheder b{font-family:var(--skrift-display); font-weight:600; font-size:15px;
  color:var(--tekst); font-variant-numeric:tabular-nums}
.maal-enheder i{font-style:normal; font-size:11px; color:var(--daempet)}
/* Restitutionscellen (recovery HR mellem reps) - den eneste celle, hvis `navn`
   vises, fordi to bpm-tal uden en synlig forskel er tvetydige (se maalEnheder()). */
.maal-enheder i.maal-rec{font-size:10px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--daempet); border:1px solid var(--skinne); border-radius:3px;
  padding:1px 3px; margin-right:1px}
/* Tre celler plus 40px luft fylder maalte 257px; en 320px skaerm har 255px tilbage,
   naar `.dag`s 47px indryk er trukket fra. Uden dette wrapper striben til to linjer
   paa praecis den skaerm. Se nav'ens egen kommentar for samme regning. */
@media (max-width: 359px){ .maal-enheder{column-gap:14px} }

/* Styrkeprogrammets oevelsesliste (styrkebibliotek.PROGRAMMER, via
   pas.styrke_program - se forma.js:styrkeOevelser()). `.styrke-liste` er selve
   grid'en; `.styrke-oevelse` er `display:contents`, saa dens to spans (`.n`/`.t`)
   bliver til direkte grid-boern af listen i stedet for at hver raekke spaender sin
   egen, isolerede kolonne - det er DÉT der faar hoejre kolonne til samme bredde paa
   tvaers af ALLE raekker, uanset hvor lang reps-teksten er ("8-10" mod "30 s per
   side"). Det er hele pointen: oejet skal kunne loebe ned ad talkolonnen. En note
   (naar den findes) spaender begge kolonner. Farver KUN herfra, ingen nye
   vaerdier indfoert. */
.styrke-liste{margin-top:14px; display:grid; grid-template-columns:1fr auto;
  column-gap:10px; row-gap:3px}
.styrke-oevelse{display:contents}
.styrke-oevelse .n{color:var(--tekst); font-size:13px; align-self:baseline}
.styrke-oevelse .t{color:var(--daempet); font-size:13px; text-align:right;
  white-space:nowrap; font-variant-numeric:tabular-nums; align-self:baseline}
.styrke-note{grid-column:1 / -1; font-size:12px; color:var(--daempet);
  line-height:1.4; margin:0 0 3px}

/* Kg-feltet (styrke runde 4, 25/9 2026; paa oevelsens linje 26/9): tredje kolonne i
   listens grid, kun naar mindst ét felt findes (.med-kg), saa talkolonnen stadig flugter.
   "Last time" er en lille linje under oevelsen. Tallet er 17 px: iOS zoomer ind paa et
   felt under 16 px. Hele pillen er trykfladen (label). Farver kun fra tokens. */
.styrke-liste.med-kg{grid-template-columns:1fr auto auto; row-gap:6px}
.styrke-liste.med-kg .styrke-oevelse .n,
.styrke-liste.med-kg .styrke-oevelse .t{align-self:center}
.styrke-oevelse .kg{display:flex; justify-content:flex-end; align-self:center}
.styrke-kg{grid-column:1 / -1; font-size:12px; color:var(--daempet);
  font-variant-numeric:tabular-nums; margin:-2px 0 2px}
.kg-pille{display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; margin:0;
  height:34px; padding:0 10px 0 6px; border-radius:999px; background:var(--felt);
  border:1px solid var(--kant-staerk); color:var(--daempet); font-size:12px; cursor:text;
  transition:border-color .2s, box-shadow .2s, color .2s}
.kg-pille input{width:3.2ch; min-height:0; height:32px; padding:0; border:0; background:none;
  box-shadow:none; text-align:right; font-size:17px; color:var(--tekst);
  font-variant-numeric:tabular-nums}
.kg-pille input:focus{box-shadow:none}
/* Forslaget (sidst ved samme RM) er daempet, til det er gemt - saa det aldrig ligner en logget vaerdi. */
.kg-pille input.forslag{color:var(--daempet)}
.kg-pille input::placeholder{color:var(--daempet); opacity:1}
.kg-pille:focus-within{border-color:var(--rav); box-shadow:0 0 0 3px var(--rav-dim)}
.kg-pille.gemt{border-color:var(--rav); color:var(--rav)}

/* Progressionens A/B-trin (runde 2, 24/9 2026) - "Session A · 10RM sets" over
   oevelseslisten. Samme typografi som .styrke-oevelse .n, blot faet mere vaegt
   og spaendt over begge kolonner, som .styrke-note. */
.styrke-trin{grid-column:1 / -1; color:var(--tekst); font-size:13px;
  font-weight:600; margin:0 0 3px}

/* Plansidens 14-dages visning: samme grid, ingen cues - fjorten dage maa ikke
   baere fjorten saet cues under hinanden. */
.styrke-liste.kompakt{margin-top:10px; row-gap:2px}
.styrke-liste.kompakt .styrke-oevelse .n,
.styrke-liste.kompakt .styrke-oevelse .t{font-size:12px}
.styrke-liste.kompakt .styrke-note{display:none}

/* Hvor rytteren loefter (styrke runde 3, 25/9 2026) - vaelgeren over oevelseslisten
   paa passets kort, og den korte note for Home/No equipment. Kun eksisterende farver. */
.styrke-udstyr{margin-top:14px}
/* Kortets vaelger er en INDSTILLING, ikke dagens hovedsag - lav og diskret (25/9 2026).
   You-sidens vaelger (#styrke-udstyr-toggle) beholder den fulde hoejde. */
.styrke-udstyr.se-som-toggle{padding:2px}
.styrke-udstyr .se-som-knap{min-height:30px; font-size:12px; padding:0 8px; white-space:nowrap}
.styrke-udstyr-note{font-size:12px; color:var(--daempet); line-height:1.4; margin-top:8px}
.styrke-teknik{margin:12px 0 0}
/* Knappen skal LIGNE en knap (25/9 2026: brugeren saa den ikke i graat som noterne) -
   samme kant/flade som .se-som-toggle, teksten i rav som appens andre handlinger. */
.forklar.styrke-teknik > summary{display:flex; justify-content:space-between; width:100%;
  box-sizing:border-box; min-height:44px; padding:0 14px; border:1px solid var(--kant);
  border-radius:var(--r-kontrol); background:var(--kort); color:var(--rav);
  font-size:14px; font-weight:600}
.forklar.styrke-teknik[open] > summary{margin-bottom:4px}
.styrke-teknik b{color:var(--tekst); font-weight:600}

/* Styrke, der deler dag med en tur (runde 3, 18/9 2026) - se styrkeTillaeg(). */
.styrke-tillaeg{margin-top:14px; padding:8px 0 0 12px; border-left:3px solid var(--zone-styrke);
  display:grid; grid-template-columns:auto 1fr auto; gap:3px 8px; align-items:center}
.styrke-tillaeg .st-ikon svg{width:16px; height:16px; color:var(--zone-styrke)}
.styrke-tillaeg b{font-size:13px}
.styrke-tillaeg .st-tid{font-size:12px; color:var(--daempet); font-variant-numeric:tabular-nums}
.styrke-tillaeg .st-tekst{grid-column:1 / -1; font-size:12px; color:var(--daempet); line-height:1.5}
.styrke-tillaeg .st-link{display:block; background:none; border:0; padding:6px 0 0; font:inherit;
  font-size:12px; font-weight:600; color:var(--rav); cursor:pointer; text-align:left}
.styrke-tillaeg.kompakt{margin-top:10px}

/* Noten paa en ren restitutionstur (pasbibliotek "udh_restitution"). Samme
   felt-stil som .ekstra-tid, men UDEN zone-farvet kant - den peger ikke paa en
   bestemt del af grafen ovenover, den forklarer hele passets rolle. */
.restitution-note{margin-top:14px; padding:10px 12px 11px; border-radius:var(--r-kontrol);
  background:var(--felt); font-size:12px; line-height:1.5; color:var(--daempet)}
.restitution-note.kompakt{margin-top:10px; padding:0 0 0 9px; border-radius:0;
  background:none; font-size:12px}

/* Session-RPE (1-10, Foster et al. 2001 - forma.js:rpeFelt()). Kun for
   styrkepas i dag eller en fortidsdag: cykel/loeb har allerede en objektiv
   puls-/watt-baseret Load-maaling, saa der er intet at spoerge om dér. Samme
   felt-form som .restitution-note (et raad-felt uden zone-kant) - men dette ER
   input, ikke tekst, saa raekken faar en fast tap-flade pr. tal i stedet for
   proza. */
.rpe-felt{margin-top:14px; padding:10px 12px 11px; border-radius:var(--r-kontrol);
  background:var(--felt); font-size:12px; line-height:1.5; color:var(--daempet)}
/* 5 x 2 gitter med CR-10-ordet under tallet (forma.js:RPE_ORD) - ingen ombrydning
   ved nogen bredde, og "Somewhat hard" faar plads paa to linjer ved 320 px. */
.rpe-raekke{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; margin-top:8px}
.rpe-k{display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height:48px; padding:5px 2px 4px; background:var(--kort);
  border:1px solid var(--kant-staerk); color:var(--tekst); font:inherit; font-size:13px;
  font-weight:600; border-radius:var(--r-kontrol); cursor:pointer;
  font-variant-numeric:tabular-nums}
.rpe-tal{line-height:1.2}
.rpe-ord{font-size:11px; font-weight:500; line-height:1.15; color:var(--daempet);
  text-align:center; margin-top:2px}
.rpe-k.aktiv .rpe-ord{color:inherit}
@media (max-width:360px){
  .rpe-raekke{gap:4px}
  .rpe-k{padding:5px 0 4px}
  .rpe-ord{font-size:9px; letter-spacing:-.02em}
}
.rpe-k.aktiv{background:var(--rav); border-color:var(--rav); color:var(--paa-rav)}

/* "I did this session" - manuelt logget styrkepas uden ur (runde 4, 18/9 2026,
   forma.js:styrkeLogKnap()). */
.styrke-log{margin-top:12px} .styrke-log .lille{margin-top:6px}
.styrke-log.logget{font-size:12px; color:var(--daempet); display:flex; gap:10px; align-items:center}

/* Selvrapport: "Not feeling 100%?" (forma.js:selvrapportFelt()). Staar UNDER
   Todays kort siden 28/9 2026, ikke inde i folden, og de tre valg staar fremme -
   ét tryk. Daempet, ikke rav: kortets rav-handling er "Send to your devices".
   ALLE knapper her har 44px traefflade (feedback_naboknap_udloeser_handlingen) -
   den gamle "Clear" var en 4px-polstret pille og svaer at ramme. */
.selvrapport{margin-top:12px}
.sr-spoerg{font-size:13px; font-weight:600; color:var(--daempet); margin:0 2px 8px}
.sr-valg{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px}
.sr-k{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  width:100%; min-height:56px; padding:8px 10px; border-radius:12px;
  background:var(--felt); border:1px solid var(--kant-staerk); color:var(--tekst);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.sr-k .lille{font-weight:400; font-size:11px; color:var(--daempet)}
.sr-k.on, .sr-sport button.on, .sr-bekraeft button.on, .sr-ryd.on{border-color:var(--rav); color:var(--rav)}
.sr-sport{margin-top:8px}
.sr-sport-q{margin:0 2px 6px}
.sr-sport-knapper{display:flex; gap:6px}
.sr-sport button{flex:1 1 0; min-height:44px; border-radius:10px;
  background:var(--felt); border:1px solid var(--kant); color:var(--tekst);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; touch-action:manipulation}
.sr-status{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 10px 10px 14px; border-radius:var(--r-kontrol); background:var(--felt);
  border:1px solid var(--kant); color:var(--tekst)}
.sr-status > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.sr-varer{color:var(--daempet)}
.sr-ryd{flex:0 0 auto; min-height:44px; min-width:88px; padding:0 16px; border-radius:999px;
  background:var(--kort); border:1px solid var(--kant-staerk); color:var(--tekst);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; touch-action:manipulation}
/* Sygdom/skade/off day som DAGENS KORT (2/10 2026, brugeren: "clumsy, oedelaegger
   aestetikken"): én raekke i samme kort som dagsblokken - dag, hvad der gaelder, og en
   lille pille i appens rav omrids (som "Full session"). Ingen fuldbred rav knap: paa en
   dag, hvor intet kraeves, maa handlingen ikke vaere skaermens hoejeste stemme.
   `.som-dag` = dagen har intet pas, kortet ER dagen (med dagskolonnen); uden staar det
   under et (daempet) pas. `.sr-to` = den arvede bekraeftelse ("Still ill" / "I'm
   better") - knapperne faar deres egen raekke under teksten. */
.sr-dag{margin-top:10px; border:1px solid var(--kant-staerk); border-radius:16px; background:var(--kort)}
.sr-dag.som-dag{margin-top:0; box-shadow:0 0 0 1px color-mix(in oklab, var(--rav) 25%, transparent)}
.sr-raekke{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:10px;
  padding:8px 8px 8px 14px; min-height:54px}
.som-dag .sr-raekke{grid-template-columns:40px minmax(0, 1fr) auto; padding-left:8px}
.sr-dag .pd-dag{font-size:11px; color:var(--rav); letter-spacing:.02em; line-height:1; text-align:center}
.sr-dag .pd-dag b{font-size:17px; margin-top:2px}
.sr-tekst{display:flex; flex-direction:column; gap:2px; min-width:0}
.sr-tekst b{font-size:15px; font-weight:600; color:var(--tekst); line-height:1.25}
.sr-tekst span{font-size:12px; color:var(--daempet); line-height:1.3}
.sr-knapper{display:flex; gap:8px}
.sr-dag.sr-to .sr-raekke{grid-template-columns:minmax(0, 1fr)}
.som-dag.sr-to .sr-raekke{grid-template-columns:40px minmax(0, 1fr)}
.sr-to .sr-knapper{grid-column:-2 / -1; margin-bottom:2px}
.sr-to .sr-knapper button{flex:0 0 auto}
.sr-knapper button{flex:1 1 auto; min-height:44px; padding:0 16px; border-radius:999px;
  background:transparent; border:1px solid color-mix(in srgb, var(--rav) 55%, transparent);
  color:var(--rav); font:inherit; font-size:14px; font-weight:600; white-space:nowrap;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.sr-knapper button.sr-igen, .sr-knapper button.stille{border-color:var(--kant-staerk); color:var(--tekst)}
.sr-dag #sr-svar:not(:empty){padding:0 8px 8px}
/* CHECK-IN EFTER SYGDOM (6/10 2026, mockup genstart-og-pasgrafik.html): et kort over
   dagens pas - oeje, spoergsmaalet i traenerens serif, to valgfelter (gsKnapper()) og
   én daempet linje. Bevidst lavt (maalt 178 px ved 390): brugeren ville ikke have, at
   det overdoever resten af Today. Luft under, saa det ikke stoeder op mod dagskortet. */
.genstart.gs-kort{margin:0 0 12px; padding:13px 14px 12px; border:1px solid var(--kant); border-radius:var(--r-flise);
  background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--groen) 9%, transparent), transparent 60%), var(--kort)}
.gs-oeje{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--daempet)}
.gs-oeje svg{width:14px; height:14px; fill:none; stroke:var(--groen); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.gs-spm{font-family:var(--skrift-dom); font-size:19px; line-height:1.2; margin:6px 0 11px; color:var(--tekst); text-wrap:balance}
.gs-spm-lille{font-size:13px; color:var(--tekst); margin:10px 0 8px}
.gs-valg{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px}
.gs-valg .gs-svar{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:9px;
  text-align:left; padding:9px 11px; min-height:48px; border-radius:var(--r-kontrol);
  border:1px solid var(--kant-staerk); background:var(--kort-2); color:var(--tekst);
  font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform .15s, border-color .15s}
.gs-valg .gs-svar:active{transform:scale(.97); border-color:var(--c)}
.gs-valg .gs-svar:focus-visible{outline:2px solid var(--rav); outline-offset:2px}
.gs-ik{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 16%, transparent); color:var(--c)}
.gs-ik svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.gs-tekst b{display:block; font-size:14px; font-weight:600; line-height:1.2}
.gs-tekst small{display:block; font-size:11px; color:var(--daempet); margin-top:1px; line-height:1.25}
.gs-fod{font-size:11px; color:var(--daempet-2); margin:9px 1px 0}
@media (max-width:359px){ .gs-tekst small{display:none} .gs-valg .gs-svar{gap:7px; padding:9px} .gs-tekst b{font-size:13px} }
/* Kvitteringen og laegeadvarslen (stadig .selvrapport.genstart uden .gs-kort) faar
   samme luft ned til dagskortet. */
#dagskort > .genstart:not(.gs-kort){margin:0 0 12px}
/* Genstart-spoergsmaalets to knapper (genstartFelt()). */
.sr-bekraeft{display:flex; gap:8px; margin-top:12px}
.sr-bekraeft button{flex:1 1 0; min-height:48px; border-radius:999px;
  background:transparent; border:1px solid var(--kant-staerk); color:var(--tekst);
  font:inherit; font-size:15px; font-weight:600; cursor:pointer; padding:4px 14px; touch-action:manipulation}
/* Passet er daempet, mens sygdommen staar ubesvaret: set, men ikke et krav. */
#dagskort.pauset > .dag{opacity:.45; filter:saturate(.25)}
/* Mens svaret er undervejs: laast og synligt ventende, saa et andet tryk ikke
   rammer en knap, der er ved at blive skiftet ud. */
.selvrapport.venter button{opacity:.55; cursor:progress}
.selvrapport.venter button.on{opacity:1}

/* IKKE GENNEMFOERT (18/9 2026): et pas paa en dag, der er gaaet, uden at noget
   blev registreret - se ikkeGennemfoert() i forma.js. Tre steder, ét sprog:
   passet staar stadig (man skal kunne se, hvad der var lagt), men afbleget og
   overstreget, og et roedligt "Not done" siger det i ord. Ingen zonefarve paa
   stregen - farven betyder anstrengelse, og der var ingen. */
:root{--ikke-gennemfoert:color-mix(in srgb, var(--roed) 72%, var(--tekst))}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap}

.ikke-gennemfoert{display:flex; gap:10px; align-items:flex-start; margin:0 0 14px;
  padding:10px 12px; border-radius:var(--r-kontrol);
  background:color-mix(in srgb, var(--roed) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--roed) 30%, transparent);
  font-size:13px; line-height:1.4; color:var(--daempet)}
.ikke-gennemfoert svg{flex:0 0 20px; width:20px; height:20px; fill:none;
  stroke:var(--ikke-gennemfoert); stroke-width:1.8; stroke-linecap:round; margin-top:1px}
.ikke-gennemfoert b{display:block; color:var(--ikke-gennemfoert); font-weight:600;
  font-size:14px; margin-bottom:1px}
.ikke-gennemfoert.kompakt{margin:4px 0 12px}
.dag.misset > :not(summary):not(.ikke-gennemfoert){opacity:.45; filter:grayscale(.9)}
.pas.misset .pas-krop > :not(.ikke-gennemfoert):not(.rpe-felt){
  opacity:.45; filter:grayscale(.9)}
.pas.misset .pas-navn, .dag.misset .pd-navn{text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:color-mix(in srgb, var(--tekst) 55%, transparent)}
.dag.misset .pd-navn{color:var(--daempet)}
.dag.misset .pd-midt .segs, .dag.misset .pd-spor{opacity:.4; filter:grayscale(1)}
.dag.misset .pd-tid{color:var(--daempet-2)}
.dag.misset .pd-tid i{color:var(--ikke-gennemfoert); font-weight:600}

/* Femtrins-maalere (Base/Fatigue/Form, dagsbuens kapacitetsraekker). Fem
   adskilte blokke frem for en glidende bjaelke: tallet ER diskret (1-5), og
   en glidende bjaelke ville antyde en praecision, der ikke findes. */
.trin{display:flex; gap:3px}
.trin i{flex:1; height:6px; border-radius:3px; background:var(--skinne)}
.trin i.on{background:var(--groen)}
.trin.haard i.on{background:var(--gul)}
.trin.meget i.on{background:var(--roed)}

/* .maalinger staar inde i et kort her og ikke paa den bare flade - luft over
   sig, som resten af skaermens maalinger ikke har. */
.maalinger{margin-top:16px}
.sml-dom{margin-top:10px}

/* Load today-maaleren i dagsbuens forklaringsliste. Rykket ind under navnet, saa den
   staar paa linje med .spor-note. */
.spor-maaler{margin:0 0 6px 17px}

/* Maalprogression: én tynd bjaelke, ikke en ring. Fremdrift mod en dato er
   lineaer og laeses lettest lineaert. */
.bjaelke{height:6px; border-radius:3px; background:var(--skinne); overflow:hidden; margin:10px 0 8px}
.bjaelke span{display:block; height:100%; background:var(--groen); border-radius:3px}
.maal-bjaelke span{transition:width 1s cubic-bezier(.22,.75,.3,1)}
.maal-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.maal-top .stor{font-size:17px; font-weight:700}

/* ── Indbakkens raekker ───────────────────────────────────────────────────
   Afloeser .indsigt/.flere (13/9 2026, header v2): indsigtskortet var en
   SMAL STRIBE paa Today, fordi det konkurrerede med dagens egen besked; i
   arket er der ingen anden besked at konkurrere med, saa raekken kan vaere
   den samme figur som Workouts' biblioteksrækker (ikon i kasse + tekst),
   fremfor en kant-baaret stribe. Se tegnIndbakke() i forma.js. */
.indbakke-punkt{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start;
  padding:13px 0; border-top:1px solid var(--kant)}
.indbakke-punkt:first-child{border-top:none}
.indbakke-ikon{width:38px; height:38px; border-radius:12px; background:var(--kort);
  display:grid; place-items:center; color:var(--daempet)}
.indbakke-ikon svg{width:18px; height:18px; display:block}
.indbakke-ikon.z3{color:var(--z3); background:color-mix(in srgb, var(--z3) 18%, transparent)}
.indbakke-ikon.rav{color:var(--rav); background:var(--rav-dim)}
.indbakke-ikon.z2{color:var(--z2); background:color-mix(in srgb, var(--z2) 18%, transparent)}
.indbakke-punkt b{display:block; font-weight:600; font-size:15px; color:var(--tekst)}
.indbakke-punkt p{margin:3px 0 0; font-size:13px; color:var(--daempet); line-height:1.45}
.indbakke-handlinger{display:flex; gap:8px; flex-wrap:wrap; margin-top:9px}
.indbakke-tom{text-align:center; color:var(--daempet-2); font-size:13px; padding:34px 0 26px}

/* Tom tilstand: forklaringen skal kunne HANDLES paa, ikke kun laeses. Er det
   noget brugeren selv kan taste ind, er hele beskeden en knap til den side,
   hvor feltet staar. */
.tom{width:100%; text-align:left; font:inherit; cursor:pointer; border-radius:var(--r-kontrol)}
.tom.ingen-handling{cursor:default}
.tom u{text-underline-offset:3px}

/* ── ATMOSFAEREN ─────────────────────────────────────────────────────────
   Den samme flade under HELE appen: login, onboarding, betalingsvaeggen og
   selve appen. Erstatter et baggrundsBILLEDE, og det er ikke naerighed - et
   fotografi ville skulle findes i to udgaver, veje hundredvis af kilobyte og
   staa fast i sine egne farver, mens disse gradienter foelger de SAMME
   variabler som resten og aendrer sig med dem.

   INDVENDINGEN, DER BLEV UNDERSOEGT OG FALDT VAEK: "bag dagsbuen og
   zonegraferne ville den vaere stoej oven paa data." Den holdt ikke, og
   grunden er maalt frem for gaettet: alle 13 kort inde i appen har
   `background: var(--kort)`, altsaa HELT ugennemsigtigt. Lyset kan derfor
   aldrig havne bag en graf - det ses kun i mellemrummene mellem kortene og i
   margenerne, som paa en bred skaerm er de to tomme tredjedele ved siden af
   `main`s 640px. Bliver et kort nogensinde gennemsigtigt, gaelder indvendingen
   igen; tjek det foer du goer det.

   position:fixed og ikke absolute: fladen skal ligge stille, mens indholdet
   ruller. Ruller den med, laeses den som et element frem for som en baggrund.
   Og hjoernerne, ikke toppen: en gradient centreret OVER skaermkanten anes kun
   som en stribe langs oeverste kant og forsvinder, saa snart man ruller - det
   var foerste forsoeg, og det kunne ikke ses i en foer/efter-sammenligning. */
/* ── Spaltens kant ──────────────────────────────────────────────────────
   To haarfine streger i fuld hoejde, dér hvor spalten slutter. Uden dem staar
   indholdet og flyder midt i et stort moerkt intet paa en skaerm; med dem er
   spalten et FORMAT. Fast og ikke rullende, saa den staar stille som en ramme.
   Ingen kant paa en telefon - dér ER viewporten spalten. */
#v-app, .midt{position:relative; isolation:isolate}
#v-app::before, .midt::before, body.side::before{
  content:''; position:fixed; top:0; bottom:0; left:0; right:0;
  width:var(--spalte); margin:0 auto; pointer-events:none; z-index:5;
  border-left:1px solid var(--kant); border-right:1px solid var(--kant);
}
/* Laesesiderne har deres EGEN spalte (640px, se sider.css). Kanten skal staa
   dér, hvor spalten faktisk slutter - stod den paa appens 430, skar de to
   streger tvaers gennem broedteksten. Fundet 4/9 2026, da siderne blev bredere. */
body.side::before{width:var(--laesespalte, var(--spalte))}
/* Forsiden (.forside) er BEVIDST ikke i spalten - den er en toespaltet
   salgsside paa et skrivebord og har sin egen lyskilde. Kanten hoerer kun til
   dér, hvor appen bor. */
@media (max-width:431px){ #v-app::before, .midt::before{display:none} }
@media (max-width:641px){ body.side::before{display:none} }

/* ── Ingen atmosfaere ────────────────────────────────────────────────────
   Her laa to skaermfyldende radialgradienter (blaa oeverst til venstre, rav
   nederst til hoejre) plus et kornlag. De blev tilbage fra den gamle palet, og
   de er i direkte modstrid med Carbons ENE regel, som staar oeverst i denne
   fil: der findes ingen dekorativ farve - ser du farve, er det data. Resultatet
   var, at HELE baggrunden var tonet, saa den loeftede flade paa dagens
   pas-kort ikke laengere kunne ses som loeftet.
   Grunden er nu flad var(--bg), praecis som mockup'en. Kornet fulgte med ud:
   det var der for at skjule baanddannelse i gradienterne, og uden gradienter er
   der ikke noget at baande. Vil du have det tilbage, er det ét ::after med
   opacity .035 - se git-historikken for denne linje. */

/* Sidehovedet skal ligge over indholdet, ikke i det. */
header{position:relative; z-index:1}

/* .midt havde INGEN egen bredde/polstring - indholdet stod lige til
   vinduets kant paa en bred skaerm, mens hovedapp'ens main{} allerede havde
   samme 640px/16px som header{}. Samme tal her, saa guide/tilslutning/
   betalingsvaeg matcher resten af appen i stedet for at staa upolstrede. */
.midt{max-width:var(--spalte); margin:0 auto; padding:0 var(--rende)}
.midt h1{
  font-family:var(--skrift-dom); font-weight:400;
  font-size:clamp(30px, 8.6vw, 38px); line-height:1.08; letter-spacing:-.01em;
  margin:8px 0 10px; text-wrap:balance;
}
.midt p{color:var(--daempet); line-height:1.6; font-size:14px; margin:0 0 22px}
ol{padding-left:20px; color:var(--daempet); font-size:14px; line-height:1.85; margin:0 0 18px}
ol b{color:var(--tekst)}
.lille{font-size:13px; color:var(--daempet); line-height:1.5}
.spinner{width:17px;height:17px;border:2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color:currentColor;border-radius:50%;animation:sn .7s linear infinite;
  display:inline-block;vertical-align:-3px}
@keyframes sn{to{transform:rotate(360deg)}}

/* ── Tid: tilgaengelighed som sin egen skaerm ────────────────────────────
   Rullelisten med fjorten <select> blev til fjorten raekker, der hver kan
   AABNES. Sammenklappet er raekken en bjaelke: dagens tid tegnet i forhold til
   ugens laengste dag, saa ugens form kan laeses uden at laese fjorten tal.
   Aabnet er den en raekke chips med alle valgene synlige paa én gang - et
   <select> paa en telefon skjuler dem bag et systempanel og kan derfor ikke
   vise, at "3 h" og "3½ h" begge findes. */
.tilbage{display:flex; align-items:center; gap:4px; margin:0 0 6px -6px}

.tid-indgang{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  font-family:inherit; color:var(--tekst); cursor:pointer}
.tid-indgang-tekst{flex:1}
.tid-indgang svg{color:var(--daempet); flex:0 0 18px}
.tid-resume{font-size:14px; color:var(--daempet); line-height:1.5}
.tid-resume b{color:var(--tekst); font-weight:600}

.uge-top{display:flex; align-items:baseline; gap:10px; margin:0 0 12px}
.uge-top h2{margin:0}
.uge-sum{margin-left:auto; font-size:13px; color:var(--daempet); white-space:nowrap}
.uge-sum b{color:var(--groen); font-weight:700}

/* Skillelinjen sidder MELLEM raekker, ikke over den foerste. `:first-of-type`
   ville her matche .uge-top, som ogsaa er en <div> i samme kort - derfor + og
   ikke en undtagelse paa den foerste. */
.tidrk + .tidrk{border-top:1px solid var(--kant)}
/* Hele den sammenklappede raekke er knappen. Et lille ikon at ramme er den
   hyppigste grund til at en liste som denne foles besvaerlig paa en telefon. */
.tidrk-top{display:flex; align-items:center; gap:12px; width:100%; padding:12px 0;
  background:none; border:none; font-family:inherit; color:var(--tekst); cursor:pointer;
  text-align:left}
.tidrk-navn{flex:0 0 74px; font-size:14px; font-weight:600}
.tidrk-navn i{display:block; font-style:normal; font-size:11px; color:var(--daempet);
  font-weight:400; margin-top:2px}
.tidrk-bjaelke{flex:1; height:8px; border-radius:4px; background:var(--skinne);
  overflow:hidden; min-width:30px}
.tidrk-bjaelke span{display:block; height:100%; border-radius:4px; background:var(--groen)}
.tidrk-vaerdi{flex:0 0 auto; font-size:13px; font-weight:600; min-width:52px;
  text-align:right}
.tidrk-vaerdi.tom-vaerdi{color:var(--daempet); font-weight:400}

/* Fortid kan ikke aendres. Den vises alligevel, fordi de to uger ellers ville
   begynde midt i en uge - og fordi den faktiske tid er svaret paa "hvor meget
   naaede jeg egentlig?", som er selve spoergsmaalet skaermen handler om. */
.tidrk.fortid .tidrk-top{cursor:default}
/* En deaktiveret knap graanes af browseren selv. Farverne saettes paa boernene
   herunder, saa den daempning ville laegge sig oven i og gøre raekken ulaeselig. */
.tidrk-top:disabled{opacity:1}
.tidrk.fortid .tidrk-navn, .tidrk.fortid .tidrk-vaerdi{color:var(--daempet); font-weight:400}
.tidrk.fortid .tidrk-bjaelke span{background:var(--daempet); opacity:.55}
.tidrk.i-dag .tidrk-navn{color:var(--rav)}

.tidrk-valg{display:flex; gap:7px; overflow-x:auto; padding:2px 18px 14px;
  margin:0 -18px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.tidrk-valg::-webkit-scrollbar{display:none}
.tidchip{flex:0 0 auto; padding:8px 13px; border-radius:20px; background:var(--felt);
  border:1px solid var(--kant); color:var(--tekst); font-size:13px; font-family:inherit;
  cursor:pointer; white-space:nowrap}
.tidchip.valgt{background:var(--groen); border-color:var(--groen); color:var(--paa-groen);
  font-weight:700}

.kopi-uge{background:none; border:1px solid var(--kant); color:var(--daempet);
  font-size:12px; font-family:inherit; padding:6px 11px; border-radius:20px;
  cursor:pointer; white-space:nowrap}
.gemt-maerke{font-size:12px; color:var(--daempet); min-height:17px; margin-top:2px}

/* ── Eget pas: "planlaeg din egen tur" (Fase 4.1) ───────────────────────
   Formen er den samme som tidsskaermens: en raekke chips frem for en
   rulleliste, af samme grund - alle valgene skal kunne SES paa én gang.
   Genbruger derfor .tidchip i stedet for at faa et andet chip-udseende to
   skaerme fra hinanden. */
.eget-form{margin-top:14px; padding-top:14px; border-top:1px solid var(--kant)}
.eget-form h3{font-size:14px; margin:0 0 4px}
.eget-raekke{margin:12px 0 0}
.eget-raekke .n{font-size:11px; color:var(--daempet); margin-bottom:7px}
/* Rullende chip-raekke der bloeder ud til kortets kant, som .tidrk-valg. */
.eget-chips{display:flex; gap:7px; overflow-x:auto; padding:2px 18px 4px; margin:0 -18px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.eget-chips::-webkit-scrollbar{display:none}
.eget-knapper{display:flex; gap:10px; margin-top:16px}
.eget-knapper .knap{margin:0}

.eksport-knapper{display:flex; gap:10px; align-items:center; margin-top:8px}

/* Brugerens eget pas i planlisten. Maerket er ikke groent: groen betyder
   "godt" andre steder i appen, og et eget pas er hverken godt eller daarligt -
   det er bare hendes. */
.maerke.eget{background:color-mix(in srgb, var(--tekst) 12%, transparent);
  color:var(--tekst); font-weight:600}
.eget-fjern{background:none; border:none; color:var(--daempet); font-size:12px;
  font-family:inherit; cursor:pointer; padding:6px 0 0; text-decoration:underline;
  text-underline-offset:3px}

/* Hvorfor planen skiftede af sig selv. Bevidst stilfaerdig: den skal kunne
   findes, ikke laeses hver gang. */
.koersel-note{font-size:12px; color:var(--daempet); line-height:1.5; margin:-4px 0 12px}
.koersel-note:empty{display:none}

/* ── Dommen over dagen ────────────────────────────────────────────────────
   Én saetning under Load today-sporet: passer kroppen til det, planen siger i
   dag? Baggrunden er --felt som .testkort nedenfor - den etablerede maade at
   loefte en blok ud af et kort paa. Farven baeres af VENSTREKANTEN og ikke af
   fladen: en fyldt farvet boks lige under buen ville konkurrere med selve
   figuren om opmaerksomheden, og buen er forsidens signatur.

   Ingen farveliteral her; alt kommer fra :root. Se hovedet af filen. */
/* ── Dommen som skaermens helt ────────────────────────────────────────────
   Formas vaerdi er raesonnementet, ikke tallet. Derfor er traenerens saetning
   det stoerste paa Today, sat i serif - og det er det ENESTE sted i hele appen,
   serifen optraeder. Ét ansigt, ét formaal, ét sted.

   Ingen ramme, ingen farvet kant: den hoerer ikke til i en kasse, den ER
   skaermen. Den gamle .dagsdom (venstrekant i et felt) staar stadig nedenfor,
   fordi den bruges til den LAASTE udgave paa Free - se dagensDom(). */
.dagsdom-helt{
  font-family:var(--skrift-dom); font-weight:400;
  font-size:clamp(23px, 6.4vw, 28px); line-height:1.22; letter-spacing:-.005em;
  margin:14px 0 8px; text-wrap:pretty; color:var(--tekst);
}
.dagsdom-helt em{font-style:italic; color:var(--rav)}

/* Herkomsten: hvad dommen er bygget af. Staar taet under saetningen, saa de to
   laeses som ét - og i --daempet, saa den ikke konkurrerer med den.
   Den negative topmargin traekker linjen op UNDER dommens egen bundmargin, saa
   afstanden bliver 13px uden at roere .dagsdom-helt - som Free-udgaven deler
   med Pro, og som dér efterfoelges af tilbudslinjen i stedet. Samme greb som
   .dagsdom-tilbud lige nedenfor. */
.dom-kilde{margin:0 0 16px; font-size:13px; color:var(--daempet)}

/* Free-udgavens ene handling under tilbudssaetningen. En linje, ikke en knap
   i fuld bredde: den skal kunne overses af den, der ikke vil koebe. */
.dagsdom-tilbud{margin:0 0 16px}
/* background/border nulstilles EKSPLICIT. forma.css har ingen global
   button-reset - .knap og .link saetter hver deres egen - saa et bart
   <button> arver browserens egen knapflade. Den dukkede op som en lys kasse
   bag teksten, foerste gang denne linje blev renderet. */
.dagsdom-tilbud button{
  background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--rav); font-weight:600; font-size:13px; padding:0;
  text-decoration:underline; text-underline-offset:3px;
}

.dagsdom{margin:14px 0 0; padding:11px 13px; border-radius:0 10px 10px 0;
  background:var(--felt); border-left:3px solid var(--daempet);
  font-size:14px; line-height:1.5; color:var(--tekst)}
.dagsdom.god{border-left-color:var(--groen)}
.dagsdom.blandet{border-left-color:var(--gul)}
.dagsdom.daarlig{border-left-color:var(--roed)}

/* ── FTP-testen (Fase 4.3) ────────────────────────────────────────────────
   Kortet staar inde i plankortet og skal derfor skille sig ud fra det UDEN at
   raabe: det er et forslag, ikke en advarsel. Derfor en kant i --groen frem
   for en fyldt baggrund, og de samme chips som resten af planskaermen -
   ét chip-udseende i hele appen, jf. .eget-chips.

   Ingen farveliteral her; alt kommer fra :root, saa lys tilstand foelger med.
   Se hovedet af filen for hvorfor det er en regel og ikke en vane. */
.testkort{margin:12px 0; padding:14px 16px; border-radius:var(--r-flise); background:var(--kort);
  border:1px solid var(--kant)}
.testkort h3{font-size:15px; margin:0 0 6px}
.testkort .lille{color:var(--daempet); line-height:1.55}
.testkort .eget-raekke{margin-top:14px}

/* Maalt tal -> foreslaaet FTP. To tal med en pil imellem, fordi det ER en
   udledning: det venstre er maalt, det hoejre er regnet. Skjules pilen paa
   smalle skaerme, staar de to under hinanden og laeses stadig i den orden. */
.test-tal{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:14px 0; padding:14px; border-radius:10px; background:var(--kort);
  border:1px solid var(--kant)}
.test-tal .n{font-size:11px; color:var(--daempet); margin-bottom:3px}
.test-tal b{font-size:22px; display:block; line-height:1.2}
.test-tal .lille{font-size:12px; color:var(--daempet)}
.test-pil{color:var(--daempet); font-size:19px}

/* Protokolvalget. Knapper og ikke chips: hver af dem baerer to linjer (navn og
   hvad den koster i tid), og det er praecis den forskel, valget staar paa. */
.test-protokoller{display:flex; flex-direction:column; gap:8px}
.protokol{display:block; width:100%; text-align:left; padding:11px 13px;
  border-radius:10px; background:var(--kort); border:1px solid var(--kant);
  color:var(--tekst); font-family:inherit; font-size:14px; cursor:pointer}
.protokol b{display:block; margin-bottom:2px}
.protokol .lille{font-size:12px; color:var(--daempet); line-height:1.45}
.protokol.valgt{border-color:var(--groen);
  background:color-mix(in srgb, var(--groen) 10%, var(--kort))}
.protokol.valgt b{color:var(--groen)}

/* Testdagen i planlisten. Egen farve frem for .maerke.eget: dagen er ikke
   "hendes aftale", den er den dag tallet under hele planen bliver afgjort. */
.maerke.test{background:color-mix(in srgb, var(--groen) 16%, transparent);
  color:var(--groen); font-weight:600}

/* ── Admin-dashboard ────────────────────────────────────────────────────
   Enkel tabelstil, kun brugt paa /admin - intet andet sted i appen har en
   raekke-og-kolonne-tabel. Ingen nye farveliteraler: samme variabler som
   resten af appen, saa lys/moerk tilstand foelger med uden ekstra arbejde. */
.admin-tabel{width:100%; border-collapse:collapse; font-size:13px}
.admin-tabel th{text-align:left; color:var(--daempet); font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  padding:8px 10px; border-bottom:1px solid var(--kant)}
.admin-tabel td{padding:9px 10px; border-bottom:1px solid var(--kant);
  color:var(--tekst); vertical-align:top}
.admin-tabel tbody tr:last-child td{border-bottom:none}

/* Tabellerne har op til otte kolonner og ville ellers klemme sig selv
   ulaeselige paa en telefon. Wrapperen faar sin egen vandrette scroll, saa
   selve tabellen aldrig skal krympe kolonner for at passe. */
.tabel-scroll{overflow-x:auto; margin:0 -4px; padding:0 4px}

/* Tilbage-knappen oeverst paa /admin - en rigtig, synlig knap (kant, polstring)
   frem for en tynd taekstlink, fordi "kom mig ud herfra igen" skal kunne SES,
   ikke laeses. Samme .side-nav den sidder i, som de offentlige sider. */
.tilbage-knap{display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:9px; border:1px solid var(--kant);
  color:var(--tekst); text-decoration:none; font-size:13px}
.tilbage-knap:hover{background:color-mix(in srgb, var(--tekst) 6%, transparent)}

/* Lille maerkat ved siden af ordmaerket i headeren, saa denne side aldrig kan
   forveksles med den rigtige app ved et hurtigt blik. Egen klasse frem for
   .maerke.groen - den sidste betyder noget andet andre steder i appen. */
.admin-badge{padding:3px 9px; border-radius:20px;
  background:color-mix(in srgb, var(--groen) 16%, transparent);
  color:var(--groen); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em}

/* Hvert Gemini-kald i logvisningen - samme foldbare sprog som .dag.fortid
   (se dér): en chevron der peger ned og drejer op, naar raekken er aabnet. */
.log-indgang{border-top:1px solid var(--kant); padding:10px 0}
.log-indgang:first-of-type{border-top:none}
.log-indgang > summary{cursor:pointer; list-style:none; font-size:13px;
  display:flex; align-items:center; gap:8px}
.log-indgang > summary::-webkit-details-marker{display:none}
.log-indgang > summary::marker{display:none}
.log-indgang > summary::after{content:''; width:8px; height:8px; margin-left:auto;
  flex-shrink:0; border-right:2px solid var(--daempet); border-bottom:2px solid var(--daempet);
  transform:rotate(45deg); transition:transform .15s}
.log-indgang[open] > summary::after{transform:rotate(-135deg)}
.log-blok{white-space:pre-wrap; word-break:break-word; max-height:300px;
  overflow:auto; background:var(--felt); padding:10px; border-radius:8px;
  font-size:12px; margin:6px 0 12px}

/* En fejlet raekke i "Recent compensations" - se PLAN-kompensation.md. Kun
   FARVEN paa en ellers uaendret .admin-tabel-raekke, ingen ny farveliteral. */
tr.komp-fejlet td{color:var(--roed)}

/* Kompensationsformularen aabner INDE i en tabelcelle, og cellen er smal.
   Uden en min-bredde klippede fakturavaelgeren ned til "2026" - to fakturaer
   saa dermed ens ud, og man valgte i blinde HVILKEN betaling der blev
   refunderet. Fundet i browseren 3. september 2026.
   Tabellen ligger i .tabel-scroll, saa en bredere celle ruller frem for at
   braekke layoutet. */
.komp-form{min-width:300px}
.komp-form select,.komp-form input{width:100%; max-width:100%}

/* ── Onboarding-guiden ───────────────────────────────────────────────────
   .guide-trin.skjul daekkes af den eksisterende .skjul-regel ovenfor - der
   skal intet nyt til for at skjule/vise et trin.

   Fremdriften genbruger .trin/.trin i - samme diskrete-blokke-sprog som
   Base/Fatigue/Form-maalerne (se "Femtrins-maalere pr. pas" ovenfor), bare
   med 3 blokke og "on" der betyder "naaet", ikke "vaerdi". Konsekvent visuelt
   sprog frem for at opfinde et nyt fremdrifts-widget.

   Sidder INDE i .app-top (ikke i .midt), lige som .kilde-linje goer det i den
   loggede-ind app - saa den bliver staaende sammen med selve headeren, naar
   man ruller ned gennem et langt trin (fx "Your numbers"). Egen bredde/
   polstring, samme tal som header{} og .kilde-linje, fordi den ikke laengere
   arver dem fra .midt. */
.guide-fremdrift{max-width:var(--spalte); margin:-6px auto 0; padding:0 22px 14px}
.guide-fremdrift .trin{margin-bottom:11px; gap:5px}
.guide-fremdrift .trin i{height:3px; background:var(--kant)}
/* Rav og ikke groen: trinviseren er en POSITION i et forloeb, ikke en maaling.
   Scoped til guiden - .trin bruges ogsaa af intensitetsmaaleren, hvor farven
   ER data og skal blive. */
.guide-fremdrift .trin i.on{background:var(--rav)}
.guide-skridt{font-size:12px; color:var(--daempet); text-transform:none;
  letter-spacing:0}

/* Bund-navigationen saa tidligere helt ustylet ud - tre knapper der bare stod
   i naturligt flow, klemt op ad formularen ovenfor. Continue faar luft over
   sig, Back/Skip staar paa deres egen raekke i stedet for at stable oveni
   hinanden. */
.guide-fod{margin-top:28px}
.guide-fod .knap{margin-bottom:16px}
.guide-fod-laenker{display:flex; justify-content:space-between; align-items:center}

/* De to ja/nej-radioknapper paa linje. Hver label ser ud som .knap.sekundaer i
   lille format, og :has(input:checked) er den markerede tilstand - groen,
   ligesom resten af appens "valgt"-tilstande. */
.guide-valg{display:flex; gap:10px; margin-top:8px}
.guide-valg label{flex:1; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:10px; border-radius:10px; border:1px solid var(--kant);
  background:transparent; color:var(--tekst); font-size:14px; cursor:pointer}
.guide-valg input{position:absolute; opacity:0; width:0; height:0}
.guide-valg label:has(input:checked){border-color:var(--groen); color:var(--groen);
  background:color-mix(in srgb, var(--groen) 10%, transparent)}

/* ── Udstyret paa You-siden ──────────────────────────────────────────────
   Samme ja/nej-par som guiden, men i en liste, hvor hver linje skal kunne
   laeses som sit eget lille tilbud: navn, hvad det tilfoejer, og svaret. En
   tynd skillelinje og ikke luft alene - tre par knapper i traek flyder sammen
   uden den. */
.udstyr-linje{padding:0; border-top:none}
.udstyr-linje:first-child{border-top:none; padding-top:0}
.udstyr-linje .lille{margin:4px 0 0}

/* Forbindelser-fanens intervals.icu-status - hvad der reelt er givet adgang
   til, ikke bare "forbundet: ja/nej". --gul for det, der mangler, samme
   farve som en advarsel andre steder i appen. */
.forbind-status{display:flex; flex-direction:column; gap:7px; margin:10px 0 14px}
.forbind-check{font-size:14px}
.forbind-check.mangler{color:var(--gul)}
.forbind-check .lille{margin:2px 0 0}
.udstyr-beroligelse{margin:14px 0 0}

/* ── Laast (Sleep uden tracker, Load today uden pulsmaaler) ────────────────
   Ingen filter:grayscale - sporfarverne er allerede daempede nok, og
   grayscale ville ogsaa ramme haengelaasen selv. */
.kort.laast h2{opacity:.55}
.spor-note.laast{opacity:.8}

/* ── Free/Pro: planvalget paa betalingsskaermen ──────────────────────────
   Samme baggrund som .testkort (var(--felt)) - den etablerede maade at
   loefte en valgbar blok ud af den moerke baggrund. Anbefalet-planen faar en
   groen kant i stedet for en fyldt flade, samme princip som .testkort's kant
   i --groen: det er et forslag, ikke en advarsel. */
.plan-kort{display:block; width:100%; text-align:left; margin:10px 0 0; padding:16px 16px 16px 50px;
  border-radius:var(--r-flise); background:var(--kort); border:1px solid var(--kant);
  color:var(--tekst); cursor:pointer; font:inherit; position:relative;
  transition:transform .18s var(--fjeder), border-color .15s}
.plan-kort:active{transform:scale(.98)}
.plan-kort::before{content:''; position:absolute; left:16px; top:18px; width:22px; height:22px;
  border-radius:50%; border:2px solid var(--kant-staerk); box-sizing:border-box}
.plan-kort.plan-founder::before{border-color:var(--rav);
  background:radial-gradient(circle, var(--rav) 0 5px, transparent 6px)}
.plan-kort.anbefalet{border-color:var(--kant-staerk)}
.plan-top{display:flex; align-items:center; gap:10px; justify-content:space-between}
.plan-navn{font-weight:600; font-size:15px}

/* ── Founder-kortet (Etape 1, spec §3/§4) ─────────────────────────────────
   EKSKLUSIVITET, IKKE RABATKUPON - spec forbyder eksplicit "BEST DEAL"/
   "50% OFF"-sprog, saa kortet faar hverken .maerke.groen eller en fyldt
   statusflade. I stedet: --kort (den HAEVEDE flade, ikke .plan-korts
   sunkne --felt) og en rav-kant - samme accent .plan-kort.anbefalet
   allerede bruger til "her er noget fremhaevet", kun staerkere.
   Den forlorne gradient/gloed-knap er BEVIDST KUN forsidens (se
   .forside-venstre .logo's kommentar laengere oppe) - betalingsskaermen er
   ikke en salgsside, og et laan af den stil her ville sige det forkerte.
   Archivo (--skrift-display) baerer navnet og prisen, praecis som resten af
   appens store tal - ingen ny farveliteral uden for :root. */
.plan-founder{display:block; width:100%; box-sizing:border-box; margin:18px 0 0;
  padding:16px 16px 16px 50px; border-radius:var(--r-flise);
  background:linear-gradient(160deg, rgba(240,169,59,.18), rgba(240,169,59,.04)), var(--kort);
  border:1px solid rgba(240,169,59,.35)}
.plan-founder-eyebrow{position:absolute; top:-9px; left:14px; font-size:11px; font-weight:600;
  letter-spacing:0; text-transform:none; padding:2px 8px; border-radius:999px;
  background:var(--rav); color:var(--paa-rav)}
.plan-founder-navn{font-family:var(--skrift-display); font-weight:600;
  font-size:15px; letter-spacing:0; margin-top:0}
.plan-founder-tagline{margin:4px 0 0; color:var(--daempet); font-size:14px}
.plan-founder-pris{font-family:var(--skrift-display); font-weight:600;
  font-size:19px; margin-top:8px; letter-spacing:-.02em}
.plan-founder-pris span{font-family:var(--skrift); font-weight:500;
  font-size:14px; color:var(--daempet); margin-left:3px}
.plan-founder-sammenlign{margin-top:2px; font-size:13px; color:var(--daempet)}
.plan-founder-cta{margin-top:14px}

/* ── Free/Pro: abonnementskortet paa You-fanen ───────────────────────────
   Samme venstrekant-moenster som .dagsdom - farven baerer betydningen, ikke
   en fyldt flade, saa kortet ikke raaber naar det bare oplyser om status. */
.abon-linje{margin:14px 0 0; padding:11px 13px; border-radius:0 10px 10px 0;
  background:var(--felt); border-left:3px solid var(--gul); font-size:14px;
  line-height:1.5; color:var(--tekst)}
.laas-ikon{width:12px; height:12px; color:var(--daempet); vertical-align:-1px}

/* ── Laast Pro-funktion: VIS formen, fortael den ikke ─────────────────────
   Et opgraderingskort af ren tekst fortaeller hvad man gaar glip af. Det her
   viser det: den rigtige komponents markup med fikstur-indhold, daempet bag et
   scrim, med haengelaasen og knappen ovenpaa.

   KLASSEN HEDDER `pro-laas` OG IKKE `laast`. `.laast` var optaget i forvejen og
   betyder noget andet: `.kort.laast h2{opacity:.55}` og `.spor-linje.laast`
   daemper et enkelt felt, der ikke kan maales endnu (soevnkortet, maalsporet).
   Genbrugte man den her, ville overskriften paa dette kort blive daempet af en
   regel skrevet til noget helt tredje - opdaget ved at rendere kortet, ikke ved
   at laese CSS'en.

   Stilladset er `aria-hidden` og `pointer-events:none` i markuppen, og det er
   ikke pynt: en skaermlaeser maa ALDRIG laese opdigtede tal op, som var de
   brugerens egne maalinger, og der maa ikke kunne tabbes ned i knapper, der
   ikke kan klikkes. Sloering er en visuel effekt - den fjerner intet for den,
   der laeser siden med noget andet end oejnene. */
/* min-height er ikke pynt: .pro-laas-overlay er position:absolute inset:0, saa
   den fylder PRAECIS kortets egen hoejde, som stilladset (normal flow) saetter.
   Progressions stillads er kort (tre linjer), og uden et gulv klippede
   overflow:hidden laasen, "FORMA PRO"-maerket og titlen af foroven - kun
   teksten og knappen naaede at vise sig, fordi overlayets flex-end skubbede
   ALT nedad i en beholder, der var for lav til det hele. Fundet ved at
   rendere kortet, ikke ved at laese CSS'en. */
.kort.pro-laas{position:relative; overflow:hidden; min-height:230px}
.pro-laas-indhold{filter:blur(3px) saturate(.7); opacity:.62; pointer-events:none;
  user-select:none}

/* Scrimmet er LETTEST i toppen. Er det jaevnt maerkt nok til at baere teksten
   nederst, skjuler det ogsaa stilladset helt - og saa er kortet tilbage til at
   vaere ren tekst, bare dyrere at vedligeholde. */
.pro-laas-overlay{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:9px; text-align:center;
  padding:26px 22px 22px; background:linear-gradient(180deg,
    color-mix(in srgb, var(--kort) 20%, transparent) 0%,
    color-mix(in srgb, var(--kort) 72%, transparent) 42%,
    color-mix(in srgb, var(--kort) 94%, transparent) 72%,
    var(--kort) 100%)}
.pro-laas-ikon{display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; color:var(--groen);
  background:color-mix(in srgb, var(--groen) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--groen) 32%, transparent)}
.pro-laas-ikon svg{width:16px; height:16px}
.pro-laas-maerke{font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--groen); font-family:var(--skrift-display)}
/* Overskriver h2'ens globale versaler OG opacity:.55 fra .kort.laast-reglen -
   dette er kortets rigtige overskrift, ikke et daempet felt. */
.kort.pro-laas .pro-laas-titel{margin:0; font-size:17px; font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--tekst); opacity:1}
.pro-laas-tekst{margin:0; max-width:36ch; font-size:13px; line-height:1.55;
  color:var(--daempet)}
.pro-laas-overlay .knap{margin-top:5px; width:auto; padding:11px 22px}
.pro-laas-fin{margin:8px 0 0;font-size:12px;color:var(--daempet)}

/* Sloering er en effekt, ikke information. Slaar brugeren bevaegelse/effekter
   fra, faar hun en ren daempning i stedet - stilladset skal stadig ikke kunne
   laeses som rigtige tal, saa opaciteten bliver, og kun blur'en gaar. */
@media (prefers-reduced-motion: reduce){
  .pro-laas-indhold{filter:none; opacity:.2}
}

/* ── Free/Pro: laast readiness OG dagens dom, i stedet for at forsvinde ────
   Foer var alle tre (readiness-ringen, dagens dom, Progression-kortet)
   `return ''` for en Free-bruger - de forsvandt sporloest, i modsaetning til
   Today/Plan, som allerede fik den fulde .pro-laas-behandling. En Free-bruger
   kunne derfor ikke se, at der OVERHOVEDET var en readiness-fortolkning at
   koebe sig til. Rettet 3/9 2026, samme session som .pro-laas selv.

   VIGTIGT skel: readiness-RINGEN maa ALDRIG vise den FAKTISKE tilstand laast
   op (farve+ikon ER selve Pro-indsigten - viste den den rigtige farve, var
   muren gennemsigtig). Den bruger derfor den EKSISTERENDE .badge-ring.daempet
   (samme graa som "ved ikke endnu") og et generisk laase-ikon i stedet for
   tilstandens rigtige ikon - "der findes en vurdering her", ikke HVAD den er.
   (i)-knappen virker uaendret: infoarkets INDHOLD (de fem tilstandes
   definitioner) er ikke personligt og sendes nu ubetinget fra app.py. */
.bue-flanke-ring.pro-laas-ring{cursor:pointer}
.dagsdom-laast{margin:14px 0 0; padding:11px 13px; border-radius:var(--r-kontrol);
  background:var(--felt); border:1px solid var(--kant); cursor:pointer;
  display:flex; align-items:center; gap:10px; font:inherit; text-align:left;
  width:100%; color:inherit}
.dagsdom-laast .ikon{flex:0 0 auto; color:var(--groen)}
.dagsdom-laast .ikon svg{width:16px; height:16px; display:block}
.dagsdom-laast .tekst{font-size:14px; line-height:1.45}
.dagsdom-laast .tekst b{color:var(--tekst)}
.dagsdom-laast .tekst span{color:var(--daempet)}

/* ── Operatoerens "se som Free/Pro"-toggle i app-headeren ─────────────────
   To smaa knapper i én pille, samme visuelle familie som segmenterede valg
   andre steder (fx planvalget paa betalingsskaermen) - ikke opfundet paa ny.
   Den AKTIVE side faar udfyldt groen baggrund; den anden staar transparent.
   Farven baerer betydningen med vilje: en groen "Free"-knap, naar den er
   aktiv, er det eneste signal om, at operatoeren lige nu ser en laant
   virkelighed - samme rolle som den roede ADMIN VIEW-banner har for
   kig-visningen (admin_ruter.py), bare mindre paatraengende, fordi dette er
   operatoerens EGEN konto og ikke en andens data. */
.se-som-toggle{display:flex; background:var(--kort); border:1px solid var(--kant);
  border-radius:var(--r-kontrol); padding:3px; gap:2px}
.se-som-knap{background:none; border:none; color:var(--daempet); font:inherit;
  font-size:13px; font-weight:500; min-height:38px; padding:0 12px; border-radius:11px;
  cursor:pointer; transition:background .2s, color .2s}
.se-som-knap.aktiv{background:var(--kort-2); color:var(--tekst); border:1px solid var(--kant-staerk); font-weight:600}
.se-som-toggle.bred{width:100%}
.se-som-toggle.bred .se-som-knap{flex:1; text-align:center}
/* Den brede vaelger har en TOMMEL, der glider (13/9 2026, mockup'ens .seg
   .thumb) - ikke en baggrund, der taendes paa den valgte knap. Rent CSS:
   :has() taeller knapperne (--n) og finder den aktive (--i), saa ingen JS
   skal vide, hvornaar .aktiv skifter. Uden en aktiv knap er tommelen vaek. */
.se-som-toggle.bred{position:relative; isolation:isolate; gap:0}
.se-som-toggle.bred .se-som-knap{position:relative; z-index:1}
.se-som-toggle.bred .se-som-knap.aktiv{background:none; border:none}
.se-som-toggle.bred::before{content:''; position:absolute; top:3px; bottom:3px; left:3px;
  width:calc((100% - 6px) / var(--n, 2)); border-radius:11px; background:var(--kort-2);
  border:1px solid var(--kant-staerk); z-index:0; box-sizing:border-box;
  transform:translateX(calc(var(--i, 0) * 100%)); transition:transform .28s var(--fjeder)}
.se-som-toggle.bred:has(> :nth-child(3):last-child){--n:3}
.se-som-toggle.bred:has(> :nth-child(4):last-child){--n:4}
.se-som-toggle.bred:has(> :nth-child(2).aktiv){--i:1}
.se-som-toggle.bred:has(> :nth-child(3).aktiv){--i:2}
.se-som-toggle.bred:has(> :nth-child(4).aktiv){--i:3}
.se-som-toggle.bred:not(:has(> .aktiv))::before{opacity:0}

/* ── You: spec-gitteret ──────────────────────────────────────────────────
   Tallene ER indholdet paa You-fanen (FTP, taerskelpuls, makspuls, vaegt), og
   de laa foer som tekst i otte stablede FULDBREDDE-inputbokse - to cifre i et
   460px felt. Her saettes de som tal: display-skriften, tabular-nums, stort, med
   enheden som en daempet suffiks.

   DEN AFGOERENDE DETALJE: cellen beholder feltbaggrund (--felt), hairline og
   en groen ramme ved :focus-within. Uden det ville gitteret laese som en
   dekorativ KPI-stribe - og det er praecis, hvad det ikke er: hver celle er et
   redigerbart felt. Ser det ud som statiske tal, er designet forkert. */
.spec-titel{margin:22px 0 9px; font-size:15px; font-weight:700; color:var(--tekst)}
.spec{display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:8px}
/* Vaegt+koen: koennet er en rulleliste og har brug for mere plads end et tal. */
.spec-to{grid-template-columns:minmax(96px, 1fr) minmax(150px, 1.6fr)}
.spec-celle{background:var(--felt); border:1px solid var(--kant); border-radius:11px;
  padding:10px 12px 11px; min-width:0}
.spec-celle:focus-within{border-color:var(--groen)}
.spec-celle label{font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--daempet); margin:0 0 5px; display:block}
.spec-vaerdi{display:flex; align-items:baseline; gap:5px; min-width:0}
/* Feltets egen ramme/baggrund fjernes - CELLEN er nu feltet. Uden dette ville
   der staa en boks inde i en boks. */
.spec-vaerdi input{background:none; border:none; padding:0; border-radius:0;
  font-family:var(--skrift-display); font-variant-numeric:tabular-nums;
  font-size:24px; font-weight:700; line-height:1.05; color:var(--tekst);
  min-width:0; width:100%}
.spec-vaerdi input:focus{outline:none}
.spec-vaerdi input::placeholder{color:var(--daempet); opacity:.55; font-weight:700}
.spec-enhed{flex:0 0 auto; font-size:12px; color:var(--daempet); font-weight:600}
/* Hvor tallet kommer fra, naar brugeren ikke selv har tastet det. Stod foer inde
   I placeholderen ("169bpm — from your device") og forsvandt derfor i samme
   sekund, man begyndte at skrive. Som sin egen linje bliver den staaende. */
.spec-kilde{font-size:11px; color:var(--daempet); margin-top:5px; min-height:0}
.spec-kilde:empty{display:none}
.spec-celle select{background:none; border:none; padding:0; border-radius:0;
  font-size:15px; color:var(--tekst); height:33px}
.spec-celle select:focus{outline:none}

/* Den lange forklaring, der foer stod FOER felterne og skubbede dem ned.
   Native <details> - ingen JS, tastaturtilgaengelig af sig selv. */
.forklar{margin:12px 0 16px}
.forklar summary{font-size:13px; color:var(--daempet); cursor:pointer;
  list-style:none; display:inline-flex; align-items:center; gap:6px;
  padding:3px 0}
.forklar summary::-webkit-details-marker{display:none}
.forklar summary::after{content:''; width:7px; height:7px; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s}
.forklar[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.forklar p{margin:8px 0 0; font-size:12px; line-height:1.55; color:var(--daempet)}
@media (prefers-reduced-motion: reduce){
  .forklar summary::after{transition:none}
}

/* ── Ugeskel i planlisten ────────────────────────────────────────────────
   Fjorten dage laa foer i én ubrudt liste, selvom en rytter taenker i UGER.
   Skellet baerer ugens samlede tid - uden det tal ville linjen kun vaere en
   streg, og saa hoerte den ikke hjemme (en struktur skal encode noget sandt).

   Bevidst LET: hairline og daempet tekst, ingen flade og ingen ramme. Det er en
   overligger, ikke et kort - laa den som endnu et kort, ville planlisten blive
   kort-i-kort-i-kort, og dagene ville tabe deres plads i hierarkiet. */
.uge-skel{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:20px 0 6px; padding:0 2px}
.uge-navn{font-size:17px; font-weight:600; color:var(--tekst); letter-spacing:-.015em}
.uge-tid{font-size:13px; color:var(--daempet); font-variant-numeric:tabular-nums; white-space:nowrap}
/* Foerste dag EFTER et ugeskel maa ikke ogsaa have sin egen overkant - to
   vandrette streger med 2px imellem laeses som en fejl. */
.uge-skel + .dag{border-top:none}
/* Naar ugens Load staar imellem, er det DEN, der roerer dagen. */
.uge-load + .dag{border-top:none}

/* ── Ugens Load (17. september 2026) ─────────────────────────────────────
   Under skellets navn og tid: ugens belastning og det baand, ugen bygges mod.
   Baren er BEVIDST en anden figur end pas-sporet (`.lspor`): den er lavere,
   uden zonefarver, og den baerer et BAAND frem for en enkelt markoer - to
   forskellige figurer, fordi de siger to forskellige ting (ét pas mod din
   normale tur / en hel uge mod ugens maal).

   Konventionen fra pas-sporet holdes derimod: FYLDT er koert, OMRIDS er
   planlagt (se `.lspor-plan`). Farven er materiale og ikke anstrengelse -
   rav er reserveret til "her kan du handle", og en uges samlede Load har
   ingen ét zonesvar. */
.uge-load{margin:0 0 12px; padding:0 2px; display:grid; gap:7px}
.ul-hoved{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.ul-navn{font-size:13px; color:var(--daempet); font-variant-numeric:tabular-nums}
.ul-navn b{font-weight:600; color:var(--tekst); font-size:15px}
.ul-pil{color:var(--daempet-2); padding:0 1px}
/* "by Sunday" er en oplysning om TALLET ved siden af, ikke et tal i sig selv -
   den staar derfor svagere og mindre, saa raekkefoelgen i oejet bliver tal, saa
   forklaring. */
.ul-slut{font-size:11px; color:var(--daempet-2); white-space:nowrap}
.ul-maal{font-size:12px; color:var(--daempet); font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* Den lette uge har intet maal at staa imod - ordet baerer linjen i stedet, og
   det maa ikke ligne et tal, der mangler. */
.ul-let{color:var(--z2); font-variant-numeric:normal}
/* Ét udsagn under Load-baren (runde 2, 18/9 2026) - se UGE_NOTE i forma.js. */
.ul-note{font-size:12px; color:var(--daempet); line-height:1.5; margin-top:-2px}
.ul-note .ul-link, .styrke-log .ul-link{background:none; border:none; padding:0; font:inherit; color:var(--z2); cursor:pointer; text-decoration:underline}
.ul-bar{position:relative; height:8px; border-radius:4px; background:var(--skinne)}
.ul-gjort{position:absolute; left:0; top:0; bottom:0; border-radius:4px;
  background:var(--tekst); opacity:.82}
.ul-plan{position:absolute; top:0; bottom:0; border-radius:4px;
  box-shadow:inset 0 0 0 1.5px var(--tekst); opacity:.42}
/* Maalbaandet: en RAMME om det stykke, ugen skal lande i - ikke en streg ved et
   tal. Den staar over fyldet, saa man kan se baandets kanter ogsaa i en uge,
   der allerede har fyldt dem. */
.ul-baand{position:absolute; top:-4px; bottom:-4px; border-left:2px solid var(--tekst);
  border-right:2px solid var(--tekst); border-radius:2px; opacity:.5; pointer-events:none;
  /* Svag flade mellem kanterne, saa baandet laeses som et OMRAADE at lande i og
     ikke som to loesrevne streger. color-mix paa en token - ingen farve skrevet
     ind i en regel. */
  background:color-mix(in srgb, var(--tekst) 9%, transparent);
  /* Staar SIDST i malelaget, foerst i DOM'en - uden z-index ville fyldet daekke
     baandets kanter i netop de uger, hvor de betyder mest. */
  z-index:2}

/* ── De gaaede dage, foldet sammen (12. september 2026) ──────────────────
   Ugens overstaaede dage ligger bag én knap i stedet for at fylde toppen af
   listen. Knappen er BEVIDST tydeligere end ugeskellet over den: den er det
   eneste sted, halvdelen af en uge kan komme til syne igen, og en
   udfoldningsknap, man skal lede efter, er ikke en udfoldningsknap.

   BEMAERK: forma.css har med vilje INGEN bar `button`-reset - appen nulstiller
   pr. klasse (.knap, .handling, .ark-luk, .uger button, .kopi). Reglen her
   baerer derfor selv sin nulstilling; uden de fire egenskaber tegner browseren
   sin egen graa systemknap midt i listen. Maalt i browseren, ikke gaettet. */
.fortid-knap{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:none; border-top:1px solid var(--kant); font-family:inherit;
  cursor:pointer; border-radius:0; padding:0 4px; margin:0; min-height:45px;
  font-size:13px; color:var(--daempet); font-weight:500;
}
.fortid-knap:hover{color:var(--tekst)}
.fortid-knap:focus-visible{outline:2px solid var(--rav); outline-offset:2px}
.fk-tekst{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.fk-tid{flex:0 0 auto; color:var(--daempet); font-weight:500;
  font-variant-numeric:tabular-nums}
/* Samme chevron som .dag.fortid i Activities - den samme figur skal betyde det
   samme to steder. Peger ned naar der er noget at folde ud, op naar det staar
   aabent. */
.fk-pil{flex:0 0 auto; width:7px; height:7px; margin:0 4px -2px 1px; order:3;
  border-right:2px solid var(--daempet); border-bottom:2px solid var(--daempet);
  transform:rotate(45deg); transition:transform .18s}
.fortid-knap.aaben .fk-pil{transform:rotate(-135deg); margin-bottom:1px}
@media (prefers-reduced-motion: reduce){ .fk-pil{transition:none} }
/* Beholderen har ingen egen ramme - de udfoldede dage skal laese som resten af
   listen, ikke som et kort inde i den. Kun den foerste dag efter beholderen
   faar sin kant tilbage: .dag + .dag rammer ikke hen over en wrapper. */
.uge-fortid + .dag > .pdag{border-top:1px solid var(--kant)}


/* ── Activities (4. september 2026) ──────────────────────────────────────
   Logbogen laaner planens raekke uaendret (.dag / .pdag / .pd-*): den samme
   figur maa ikke betyde to ting i den samme app, og laengde=varighed,
   farve=anstrengelse gaelder begge steder. Kun det, der er NYT paa denne
   skaerm, staar nedenfor.

   Maanedsskellet er ugeskellet - samme klasser, samme lette hairline. Den
   ene forskel er luften over det FOERSTE skel: paa planen staar ugeskellet
   under et varsel og en knap, her er det skaermens foerste linje, og 28px
   toppolstring ville se ud som et hul. */
.maaned-skel:first-child{margin-top:6px}
/* Sporten som et lille maerke foran navnet. Se kommentaren i forma.js for
   hvorfor netop dette ene sted i appen baerer information i et ikon. Farven
   er --daempet og ARVES af stroke:currentColor - et ikon maa ikke tage en
   zonefarve, for saa ville det se ud som en maaling. */
.akt-ikon{width:14px; height:14px; display:inline-block; vertical-align:-2px;
  margin-right:6px; flex:0 0 14px}
/* Fakta-trioen fra passekortet, men her kan der vaere op til fem tal (distance,
   fart, watt, puls, kadence) i en 430px spalte med 47px indrykning. Den
   ombrydes derfor frem for at klemme sig sammen - og tallene staar en anelse
   mindre end paa dagens pas, som er skaermens hovedperson og skal blive ved
   med at vaere det. */
.akt-fakta{flex-wrap:wrap; row-gap:13px; column-gap:22px; margin-top:12px}
.akt-fakta .fakta .v{font-size:15px}
/* Vinklen, der siger at raekken kan foldes ud. Planens dage har den IKKE, og
   det er ikke en inkonsekvens: dér er listen noget man laeser fra ende til
   anden, og dagen i dag staar aaben i forvejen. Her er selve udfoldningen
   skaermens ene handling - hver eneste tur om turen ligger bagved - og en
   handling uden en affordance er en, brugeren skal gaette sig til.
   En ren CSS-vinkel og ikke et ikon: den skal dreje, og den maa ikke fylde
   mere end de 12px, den fjerde kolonne har faaet. */
.akt > .pdag{grid-template-columns:44px 1fr auto 12px}
.akt-fold{width:7px; height:7px; justify-self:end; border:solid var(--daempet);
  border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease; opacity:.7}
.akt[open] > .pdag .akt-fold{transform:rotate(-135deg) translate(-2px,-2px)}
/* Det foldede indhold rykkes ind under sporet, praecis som paa planen - men
   raekken har en kolonne mere her, saa hoejre side skal ogsaa have luft. */
.akt > *:not(.pdag){margin-right:24px}
.akt-zoner{margin-top:16px}
.akt-zoner-titel{font-size:11px; color:var(--daempet); margin-bottom:9px}
/* Zonens navn OG dens bpm-spaend i venstre kolonne, saa raekken siger hvad
   zonen ER og ikke kun hvad den hedder. Bredere end .lag-r's 58px, som er sat
   til "Base"/"Fatigue"/"Form" - "Endurance" med 139-150 under skal have plads
   uden at brydes. */
.zone-r{grid-template-columns:80px 1fr 50px; align-items:center}
.zone-r .lag-n{font-size:12px; line-height:1.25}
.zone-r .lag-n i{display:block; font-style:normal; font-size:10px; opacity:.75;
  font-variant-numeric:tabular-nums}
.zone-r .lag-v{font-size:12px}
/* En zone uden tid faar stadig sin raekke - fordelingen er kun laesbar, naar
   alle trin staar der - men raekken daempes, saa nullerne ikke stjaeler
   opmaerksomheden fra de zoner, turen faktisk laa i. */
.zone-r.tom{opacity:.45}

/* ── To akser paa den samme raekke (5. september 2026) ──────────────────────
   RAEKKEN HAR TO GRUNDLINJER: linje 1 er puls, linje 2 er watt - baandet, banen
   og tiden, hele vejen igennem. Navnet spaender begge, fordi det er raekkens
   identitet og deles af de to akser (en zone er et NUMMER, ikke et fast par).

   Der er INGEN legende og ingen versal-etiket over figuren. Enheden staar paa
   linje 2's baand ("226-262 W") og ikke paa linje 1's, og zone 6-7 har kun linje
   2 - saa raekken siger selv, hvad de to linjer er. En forklaringslinje ville
   koste lige saa meget hoejde som en hel zonerakke.

   MAALT PLADS: 260px i det foldede panel ved 375px viewport (indrykket er 47px
   venstre + 24px hoejre, se .dag > *:not(.pdag)). 58 + 54 + 44 + 3x7 gap = 177,
   saa banerne faar 83px. AENDRER DU EN KOLONNE, SAA MAAL DEN IGEN - der er ikke
   plads at tage af.

   TIDSKOLONNEN VAR 40px OG DET VAR ÉN PIXEL FOR LIDT: "1h 15m" kraever 41px og
   OMBROED til to linjer paa enhver tur over en time. Rækken har to grundlinjer,
   saa en knaekket tid skubber netop dem fra hinanden - figuren falder fra
   hinanden af den ene celle. Fejlen slap igennem et overloebstjek, fordi
   `scrollWidth` er lig `clientWidth`, naar teksten WRAPPER i stedet for at flyde
   over: tjekket maalte kassen og ikke blaekket, og meldte 0 fejl paa 1056 celler.

   `white-space:nowrap` staar derfor paa baade tid og navn - ikke som pynt, men
   for at GOERE fejlen synlig: uden ombrydning bliver en for lang streng til et
   overloeb, som netop det tjek kan se.

   Hoejden vokser af TEKSTEN, ikke af grafikken: banerne er 5px med 3px imellem,
   saa syv raekker med to akser koster ~36px mere end fem raekker med én. */
.lag.to-akser{gap:16px}
.zone-r.to-akser{display:grid; grid-template-columns:58px 54px 1fr 44px;
  column-gap:7px; row-gap:2px; align-items:center}
.zone-r.to-akser > :first-child{grid-row:1 / 3}
/* line-height staar EKSPLICIT paa alle tre celletyper. `body` saetter 1.5, og med
   den bliver de to linjer inde i en raekke laengere fra hinanden end to raekker er
   - saa parret holder ikke sammen. Det er ikke en finjustering, det er det, der
   afgoer om figuren laeses som syv raekker eller fjorten. */
.zone-n{font-size:11px; line-height:1.2; white-space:nowrap}
.zone-b{font-size:9.5px; line-height:1.2; color:var(--daempet);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.zone-bane{position:relative; display:block; height:5px; border-radius:2px;
  background:var(--felt)}
.zone-bane i{position:absolute; top:0; bottom:0; left:0; border-radius:2px;
  display:block}
.zone-v{font-size:11px; line-height:1.2; text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
/* Pulslinjen baerer raekkens vaegt, watt-linjen staar et trin stillere. Ikke
   fordi den ene maaling er mindre vaerd, men fordi to lige fede tal paa to
   linjer laeses som to raekker frem for som én. */
.zone-v.puls{font-weight:600; color:var(--tekst)}
.zone-v.watt{color:var(--daempet)}
.akt-zoner-note{margin-top:11px; line-height:1.45}


/* ════════════════════════════════════════════════════════════════════════
   PLAN, YOU OG CONNECTIONS 1:1 MED MOCKUP'EN (4. september 2026)

   Today blev maalt mod docs/mockups/forma-redesign.html 3/9 og lukket. De tre
   andre skaerme var ikke - de stod stadig som kort-i-kort med versal-etiketter
   og Ja/Nej-knapper, hvor mockup'en har flade sektioner, saetningsversal og
   afkrydsninger. Reglerne, hullerne LAERTE, staar i CLAUDE.md.

   Klassenavnene er mockup'ens egne, saa de to filer kan laeses side om side.
   Farverne er som altid kun variabler fra :root - mockup'ens --karbon er vores
   --bg, --karbon-op er --kort, --karbon-ned er --felt, --linje er --kant,
   --kridt er --tekst, --kridt-lav er --daempet.
   ════════════════════════════════════════════════════════════════════════ */

/* ── PLAN-TOPPEN: ET BENTO-GITTER (13/9 2026, aften) ──────────────────────
   Brugeren: "der staar for meget paa for lidt plads", to grafer om det samme,
   og saetningen fyldte. Toppen er nu fliser i det samme .bento-gitter som
   Today (se "MAKEOVER" laengere nede for .flise/.ring/.flise-detalje):
     maalet (w2, helt) · etapen (w2) · tiden (1x1) · FTP/tærskel (1x1) ·
     genopbygningen som ÉN linje.
   To gitre (#plan-bento-top uden for laasen, #plan-bento-tal inde i
   #plan-indhold) med samme gap, saa oejet ser ét. */
/* align-items:start: en flise, der folder ud (FTP), maa ikke straekke sin
   nabo (tiden) til 300px med tallet svaevende i midten. */
.plan-bento{margin-top:14px; align-items:start}
#plan-bento-top + #plan-indhold > #plan-bento-tal{margin-top:10px}
/* Et gitterbarn, der selv er en beholder (#maalkort, #ftp-test, #loebe-test):
   tom = ingen celle; med et kort (testkort/eget-form) = begge spalter. */
.flise-plads:empty{display:none}
.flise-plads > .flise{height:100%; margin:0}
.flise-plads:has(> .testkort), .flise-plads:has(> .kort){grid-column:span 2}
.flise-plads > .testkort{margin:0}
#tid-gemt:empty{display:none}
#tid-gemt{margin:-2px 4px 0}

/* Maalet: heltflisen. Navnet og fasen til venstre, ringen (dage tilbage,
   buen er hvor langt inde man er) til hoejre, det traenede i foden, og
   traenerens saetning bag folden. Gloeden er maalets farve (--z1, samme som
   Todays maalspor). --gx/--gy/--tx/--ty staar paa deres standardvaerdier: vippet
   (tiltFlise()) blev aldrig kaldt og er slettet i runde 9. */
.flise.maal-helt{border-radius:var(--r-helt); padding:16px 16px 14px; min-height:0;
  --daggry:var(--z1);
  background:
    radial-gradient(120% 90% at var(--gx, 85%) var(--gy, -10%), color-mix(in srgb, var(--daggry) 22%, transparent), transparent 60%),
    var(--kort);
  transform:perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition:transform .35s var(--ud), background .2s; transform-style:preserve-3d; will-change:transform}
.flise.maal-helt[data-fold]:active{transform:perspective(900px) scale(.985)}
.flise.maal-helt.tom{min-height:0}
.flise-ikon-knap{width:30px; height:30px; margin:-6px -8px -6px 0; border-radius:50%; border:1px solid var(--kant-staerk);
  background:transparent; color:var(--daempet); display:grid; place-items:center; cursor:pointer;
  transition:transform .2s var(--fjeder), color .15s, border-color .15s}
.flise-ikon-knap:active{transform:scale(.9)}
.flise-ikon-knap:hover{color:var(--tekst); border-color:var(--tekst)}
.flise-ikon-knap svg{width:15px; height:15px; opacity:1}
/* Testflisens hoejre hjoerne: blyanten (når der er et tal at rette) og status-prikken. */
.flise-lbl-hoejre{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.flise-lbl-hoejre .flise-ikon-knap{margin:-6px 0}
.maal-raekke{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:6px}
.maal-tekst{min-width:0; flex:1 1 auto}
.maal-navn{font-size:clamp(20px, 5.6vw, 23px); font-weight:600; letter-spacing:-.015em; line-height:1.15;
  text-wrap:balance}
.maal-fase{font-size:13px; color:var(--daempet); margin-top:5px}
.maal-lead{font-family:var(--skrift-dom); font-weight:400; font-size:17px; line-height:1.3;
  color:var(--tekst); margin:0; text-wrap:pretty}
.flise.maal-helt.tom .maal-lead{font-family:inherit; font-size:13px; color:var(--daempet); margin-top:8px; line-height:1.45}
.flise.maal-helt.tom .handling{margin-top:14px}
.flise-detalje .maal-lead + .handling{margin-top:12px}
.ring.maal-ring{width:92px; height:92px; margin:0 -2px 0 0}
.ring.maal-ring .ring-midt b{font-size:28px}
.ring.maal-ring .ring-bue{stroke:var(--daggry)}
/* Fasesporet: fire led, ét lyser. Leddene rejser sig forskudt ved tegning
   (--i), som blokkene i en zoneprofil. */
.fase-spor{display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin-top:10px; max-width:230px}
.fase-spor span{font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--daempet-2);
  display:flex; flex-direction:column; gap:5px; white-space:nowrap; overflow:hidden}
.fase-spor i{display:block; height:4px; border-radius:4px; background:var(--skinne-2); transform-origin:left;
  animation:fase-ind .6s var(--ud) both; animation-delay:calc(var(--i) * 70ms + 200ms)}
.fase-spor .bag i{background:color-mix(in srgb, var(--daggry) 45%, var(--skinne-2))}
.fase-spor .bag{color:var(--daempet)}
.fase-spor .nu i{background:var(--rav); box-shadow:0 0 10px color-mix(in srgb, var(--rav) 55%, transparent)}
.fase-spor .nu{color:var(--rav)}
@keyframes fase-ind{from{transform:scaleX(0)}}
/* Ugerne i den aktuelle fase (25/9 2026): leddet deles i uger - bag én fyldt,
   denne uge blinker, resten skinne. Over otte uger fyldes leddet i stedet. */
.fase-spor .nu i.fase-uger{display:flex; gap:2px; background:none; box-shadow:none}
.fase-spor i.fase-uger b{flex:1; border-radius:inherit; background:var(--skinne-2)}
.fase-spor i.fase-uger b.fyldt, .fase-spor i.fase-uger b.denne{background:var(--rav);
  box-shadow:0 0 8px color-mix(in srgb, var(--rav) 55%, transparent)}
.fase-spor i.fase-uger b.denne{animation:uge-puls 2.4s ease-in-out infinite}
.fase-spor .nu i.fase-uger.fyld{display:block; background:linear-gradient(90deg, var(--rav) var(--fyld), var(--skinne-2) var(--fyld))}
@keyframes uge-puls{50%{opacity:.45}}

/* Tiden: hele flisen er knappen ind til arket. */
.flise.flise-knap{cursor:pointer; font:inherit; color:inherit; text-align:left; -webkit-appearance:none; appearance:none}
.flise.flise-knap:active{transform:perspective(500px) rotateX(4deg) scale(.97); background:var(--kort-2)}
.flise.flise-knap > .flise-lbl, .flise.flise-knap > .flise-tal, .flise.flise-knap > .flise-fod{display:block}
.flise.flise-knap > .flise-lbl{display:flex}
.flise.flise-knap .flise-lbl svg{width:16px; height:16px; flex:0 0 16px; opacity:.85}
#tid-sum.flise-tal, .test-flise .flise-tal{font-size:clamp(24px, 7.4vw, 30px)}

/* Testens flise. Prikken i etiketten er trinnet paa skalaen (samme farver
   som .nvi's prik): rav = der er en grund nu, --z3 = det naermer sig,
   --z2 = aktuelt, --daempet = testen er allerede lagt. Prikken pulserer én
   gang, naar den er rav - den er den eneste flise, der beder om noget. */
.test-flise .flise-tal.ord{font-size:19px; line-height:1.15; margin-top:10px}
.test-flise .nvi-prik{width:8px; height:8px; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent)}
.test-flise.paakraevet .nvi-prik{background:var(--rav); color:var(--rav); animation:prik-puls 1.6s var(--ud) 3}
.test-flise.tvivl .nvi-prik{background:var(--z3); color:var(--z3)}
.test-flise.rolig .nvi-prik{background:var(--z2); color:var(--z2)}
.test-flise.daempet .nvi-prik{background:var(--daempet); color:var(--daempet)}
.test-flise.paakraevet .flise-fod b{color:var(--rav)}
.test-flise.tvivl .flise-fod b{color:var(--z3)}
.test-flise.rolig .flise-fod b{color:var(--z2)}
.test-flise .knap-linje{margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px 16px}
.test-flise .knap-linje button{color:var(--rav); font-weight:600; font-size:13px; padding:0;
  background:none; border:none; font-family:inherit; cursor:pointer; text-align:left}
.test-flise .flise-detalje p{margin:0}
@keyframes prik-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 45%, transparent)}
  100%{box-shadow:0 0 0 9px transparent}}

/* Genopbygningen: én linje. Teksten (hvad der er sket) til venstre, knappen
   til hoejre - kompakt, ikke i fuld bredde. Er der hverken tekst eller varsel
   (ingen plan endnu), fylder knappen linjen. Foraeldet: serverens grund staar
   i #plan-varsel over linjen, og knappen er rav (tegnBygNote()). */
.byg{margin:12px 0 0; padding:0 2px}
.byg-linje{display:flex; align-items:center; justify-content:space-between; gap:12px}
.byg-tekst{min-width:0; flex:1 1 auto}
.byg-note{font-size:12px; color:var(--daempet); line-height:1.4; margin:0}
.byg-note b{color:var(--tekst); font-weight:600}
.byg-note.aendret{color:var(--rav)}
.byg-note.aendret b{color:var(--rav)}
.byg .koersel-note{margin:0 0 3px}
/* Noten om en let uge (tegnUgeLet()) staar under genopbygningslinjen, ikke i den. */
#uge-let{margin:10px 0 16px}
.byg-linje .handling{width:auto; flex:0 0 auto; margin:0; min-height:42px; padding:9px 16px;
  font-size:14px; white-space:nowrap}
.byg .stille{color:var(--daempet)}
.byg-linje:has(.byg-note:empty):has(.koersel-note:empty) .handling{width:100%}
/* Den tomme tekstspalte skal ud af raekken, ellers er den et flex-barn, gap'et
   regnes med, og knappen paa 100% stak 12px ud over kanten (maalt 13/9 2026,
   tom plan ved 320px: knappen sluttede 10px foran skaermkanten). */
.byg-linje:has(.byg-note:empty):has(.koersel-note:empty) .byg-tekst{display:none}
.byg .besked{margin:0 0 10px}
@media (prefers-reduced-motion: reduce){
  .flise.maal-helt{transform:none; transition:none}
  .fase-spor i, .fase-spor i.fase-uger b, .test-flise .nvi-prik{animation:none}
}

/* ══ ARKET (tilgaengeligheden) ═══════════════════════════════════════════
   .ark-baggrund/.ark/.ark-greb/.ark-top/.ark-luk er appens EGNE, delte
   ark-stilarter (se laengere oppe i denne fil) og genbruges uaendrede - kun
   det indre er nyt her. Aabnes/lukkes af egne funktioner i forma.js, ikke
   den delegerede [data-ark]/[data-luk-ark]-lytter (Cancel skal LAEGGE TIDEN
   TILBAGE, som den generiske lytter ikke kan udtrykke). */
.ark-intro{margin:6px 0 12px; font-size:13px; color:var(--daempet);
  line-height:1.45; max-width:34em}
.ark-rul{overflow-y:auto; padding:0 0 4px; flex:1 1 auto}

/* Ugevaelgeren. To segmenter, ikke fjorten skydere i ét langt rul: en tommel
   skal kunne naa bunden af det, den arbejder i. */
.uger{display:flex; gap:2px; background:var(--kort); border:1px solid var(--kant);
  border-radius:var(--r-kontrol); padding:3px; margin:16px 0 4px}
/* BEMAERK: forma.css har bevidst INGEN bar `button`-reset - appen styler sine
   knapper pr. klasse (.knap, .handling, .ark-luk, som alle nulstiller selv).
   Mockup'en HAVDE en global reset, saa reglerne herfra maa baere den selv;
   uden de fire linjer tegner browseren sin egen graa knap med `2px outset
   white`. Maalt i browseren paa fikstur-forhaandsvisningen, ikke gaettet.
   Tilfoej ALDRIG en global `button`-reset for at loese det - den ville
   aendre hver eneste knap i appen. */
.uger button{flex:1; min-height:38px; padding:0; border-radius:11px; font-size:13px;
  color:var(--daempet); font-weight:500;
  background:none; border:none; font-family:inherit; cursor:pointer}
.uger button.aktiv{background:var(--kort-2); color:var(--tekst); font-weight:600;
  border:1px solid var(--kant-staerk)}
.uge-linje{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:14px 0 2px; font-size:11px; color:var(--daempet)}
/* Samme grund som .uger button ovenfor: baerer sin egen knap-nulstilling. */
.kopi{color:var(--rav); font-weight:600; font-size:12px; padding:2px 0;
  background:none; border:none; font-family:inherit; cursor:pointer}
/* Fortiden fylder ikke fire skyderraekker, man ikke kan traekke i. Den er ÉN
   linje - hvad der er brugt - og resten af arket handler om det, der er
   tilbage at bestemme. Ugens fulde form staar stadig paa planskaermen. */
.tid-brugt{font-size:12px; color:var(--daempet); border-bottom:1px solid var(--kant-svag);
  padding:0 0 11px; margin:2px 0 6px}
.tid-brugt b{color:var(--tekst); font-weight:600}

/* ── Dagens raekke: knap + skjulte minutknapper (ugeskabelon, 24/9 2026) ──
   Afloeser skyderen: en flad liste af faste minuttal rammes hurtigere end en
   praecis traekbevaegelse, og virker ens for mus, finger og skaermlaeser.
   Bruges af BAADE skabelonens syv raekker, ugernes fjorten OG turens "usual
   week" (samme tidRaekke()-markup, se forma.js). */
/* TIDSVALGET (pænere 24/9 2026): hver dag er navn · en tynd bar · tallet. Ugen
   ligner dermed den gamle skyder, men et tryk er nok. Foldet ud staar ALLE tider
   som én vandret raekke runde knapper (stryg), og den valgte centreres
   (tidCentrerValgt()). --p (0-1) er dagens andel af loftet, sat i tidRaekke() og
   tidOpdaterRaekkeDOM(). */
.tid-dagrk{border-bottom:1px solid var(--kant-svag)}
.tid-dagrk:last-child{border-bottom:none}
.tid-dagrk-knap{display:grid; grid-template-columns:52px 1fr 52px; align-items:center; gap:12px; width:100%; min-height:44px;
  padding:4px 0; background:none; border:none; font-family:inherit; cursor:pointer; text-align:left; color:inherit}
.tid-dagrk-navn{font-size:13px; font-weight:600; color:var(--tekst); line-height:1.15}
.tid-dagrk.i-dag .tid-dagrk-navn{color:var(--rav)}
.tid-arv{display:block; font-size:10px; font-weight:500; color:var(--daempet-2); margin-top:1px}
.tid-spor{position:relative; height:6px; border-radius:3px; background:var(--skinne-2); overflow:hidden}
.tid-spor i{position:absolute; left:0; top:0; bottom:0; width:calc(var(--p, 0) * 100%); border-radius:3px;
  background:linear-gradient(90deg, var(--rav-lav), var(--rav)); transition:width .28s var(--ud)}
.tid-dagrk.hvil .tid-spor{background:repeating-linear-gradient(90deg, var(--skinne-2) 0 5px, transparent 5px 9px)}
/* Tallet ER svaret - tekst, ikke en pille. Uden tabular-nums (kolonet ville faa fuld
   cifferbredde). */
.tid-pille{font-size:15px; font-weight:600; color:var(--tekst); text-align:right; white-space:nowrap}
.tid-dagrk.hvil .tid-pille{color:var(--daempet-2); font-weight:500}
.tid-dagrk.aaben .tid-pille{color:var(--rav)}
.tid-dagrk-knap:focus-visible{outline:2px solid var(--rav); outline-offset:2px; border-radius:10px}
.tid-valg{display:none; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 0 8px; margin:0 -2px;
  scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent)}
.tid-valg::-webkit-scrollbar{display:none}
.tid-dagrk.aaben .tid-valg{display:flex}
.tid-chip{flex:none; scroll-snap-align:center; min-height:36px; min-width:54px; padding:0 13px; border-radius:999px;
  background:transparent; border:1px solid var(--kant-staerk); color:var(--tekst);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer}
.tid-chip:first-child{margin-left:12px}
.tid-chip:last-child{margin-right:20px}
.tid-chip.valgt{background:var(--rav); border-color:var(--rav); color:var(--paa-rav)}
/* Sport pr. dag (#12): kun synlig i en AABEN raekke, som tiderne. */
.tid-sport{display:none}
.tid-dagrk.aaben .tid-sport{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px; padding:3px;
  margin:4px 0 12px; background:var(--felt); border:1px solid var(--kant); border-radius:var(--r-kontrol)}
.tid-sport-k{background:none; border:none; padding:0; font-family:inherit; min-height:36px; border-radius:11px;
  font-size:13px; color:var(--daempet); display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer}
.tid-sport-k.valgt{background:var(--kort-2); color:var(--tekst); box-shadow:0 0 0 1px var(--kant-staerk)}
.tid-sport-ikon{display:inline-flex; vertical-align:-2px; margin-left:6px; color:var(--daempet)}
/* Navn + ikon paa ÉN linje: "Today" + ikon er ~59 px i den 52 px brede kolonne og maa
   gaa ind i de 12 px gap foer baren (maalt 26/10 2026) - ellers lagde ikonet sig under. */
.tid-dagrk-navn:has(.tid-sport-ikon:not(:empty)){white-space:nowrap}
.tid-sport-ikon:empty{display:none}

/* Skabelonens egen overskrift + skel til ugernes undtagelser. */
.tid-skabelon{margin-bottom:4px; padding-bottom:10px; border-bottom:1px solid var(--kant-svag)}
.tid-skabelon h4, .tid-undtag-t{font-size:13px; font-weight:700; color:var(--tekst);
  margin:0 0 2px}
.tid-undtag-t{margin:14px 0 4px}
.tid-skabelon-u{font-size:12px; color:var(--daempet); margin:0 0 8px}

/* ── Arket er en EDITOR, ikke en ordliste ────────────────────────────────
   Appens fire andre ark er tekst, man ruller igennem og lukker. Dette ét er
   et redigeringsark: dagene skal kunne rulle, mens Save bliver staaende, saa
   man aldrig traekker en skyder uden at kunne se, hvad man gemmer.

   Reglerne er scopet til #ark-tid og roerer derfor IKKE .ark selv, som de
   andre ark deler - se .ark ovenfor. `padding-bottom:0` her, fordi foden
   selv baerer sikkerhedszonen; uden det ville .ark's egen bundpadding ligge
   UNDER den faste fod. `min-height:0` paa rulledelen er det, der overhovedet
   lader et flex-barn blive mindre end sit indhold og dermed rulle. */
/* 92 % og ikke .ark's 88 % (25/9 2026): med én dag foldet ud laa soendag i "Your
   usual week" under kanten paa en iPhone (maalt 390x763: 12 px fri foer, og
   telefonens egne zoner tager mere). Sammen med 44 px-raekkerne (fra 50). */
#ark-tid{display:flex; flex-direction:column; padding-bottom:0; max-height:92vh; max-height:92dvh}
#ark-tid .ark-greb, #ark-tid .ark-top, #ark-tid .ark-intro{flex:0 0 auto}
#ark-tid .ark-rul{flex:1 1 auto; min-height:0; overflow-y:auto}
#ark-tid .ark-fod{flex:0 0 auto}

/* Maalarket er den samme slags ark som tilgaengelighedens: en EDITOR med en
   fast fod, ikke en ordliste man ruller igennem. Samme fire linjer, samme
   grunde - se blokken lige ovenfor. Reglerne er scopet, saa appens oevrige,
   rullende ark (readiness, fase, bug/idé) ikke roeres.

   `.ark`s egen max-height:80vh + `overflow-y:auto` ville ellers konkurrere med
   den indre rulning; `padding-bottom:0` fjerner den dobbelte bundpolstring,
   fordi .ark-fod selv baerer sikkerhedszonen. */
#ark-maal{display:flex; flex-direction:column; padding-bottom:0; overflow:hidden}
#ark-maal .ark-greb, #ark-maal .ark-top, #ark-maal .ark-intro{flex:0 0 auto}
#ark-maal .ark-rul{flex:1 1 auto; min-height:0; overflow-y:auto; padding-top:14px}
#ark-maal .ark-fod{flex:0 0 auto}
/* Uden Save-knap (auto-gem, 26/9 2026) baerer foden kun en fejl - ellers er den vaek. */
#ark-maal .ark-fod:has(.maal-svar:empty){display:none}
/* Fase-saetningen og den traenede tid oeverst i maalarket (20/9 2026) - laesestof, ikke felter. */
.maal-ark-status{margin:0 0 16px; padding:12px 14px; border-radius:12px; background:var(--felt); border:1px solid var(--kant-svag)}
.maal-ark-status[hidden]{display:none}
.maal-ark-status p{margin:0; font-size:13px; line-height:1.45; overflow-wrap:anywhere}
.maal-ark-status .lead{color:var(--tekst)}
.maal-ark-status .traenet{margin-top:6px; color:var(--daempet)}
.maal-ark-status .traenet:first-child{margin-top:0}
/* Svarlinjen staar OVER Save og skubber knappen ned, frem for at ligge under
   den uden for synsfeltet: det er den eneste linje, der kan sige at gemningen
   IKKE lykkedes. Tom fylder den ingenting. */
.maal-svar:empty{display:none}
.maal-svar{margin-bottom:10px}

/* ── Udgivelsesnoterne ───────────────────────────────────────────────────
   Samme ark-stillads som de to ovenfor: fast fod, rullende midte. Indholdet er
   en LISTE og ikke kort-i-kort - hver udgivelse er en overskrift med sine
   punkter under, og punkterne baerer et lille ravprikket maerke i stedet for en
   bullet, saa listen laeses som appens egen og ikke som browserens. */
#ark-udgivelser{display:flex; flex-direction:column; padding-bottom:0; overflow:hidden}
#ark-udgivelser .ark-greb, #ark-udgivelser .ark-top{flex:0 0 auto}
#ark-udgivelser .ark-rul{flex:1 1 auto; min-height:0; overflow-y:auto;
  padding-top:6px}
#ark-udgivelser .ark-fod{flex:0 0 auto}
.udg{padding:14px 0 2px; border-top:1px solid var(--kant)}
.udg:first-child{border-top:none; padding-top:4px}
.udg-dato{font-size:11px; color:var(--daempet); letter-spacing:.02em;
  text-transform:uppercase}
.udg-titel{margin:3px 0 10px; font-size:15px; font-weight:600;
  letter-spacing:-.015em; line-height:1.3}
.udg-punkter{list-style:none; margin:0; padding:0}
.udg-punkt{position:relative; padding:0 0 11px 19px; font-size:13px;
  line-height:1.5; color:var(--tekst)}
.udg-punkt::before{content:''; position:absolute; left:2px; top:7px;
  width:6px; height:6px; border-radius:50%; background:var(--rav)}

/* Nyhedskortet (2.3, 6/10 2026, mock udgivelse-health.html): kun popup'ens forreste
   post med `nyhed`. Gloeden er hjertets egen farve (--fk-hjerte-2), ikke en zone. */
.udg-nyhed{position:relative; overflow:hidden; isolation:isolate; margin-top:4px;
  border-radius:var(--r-flise); padding:22px 20px 18px; border:1px solid var(--kant-staerk);
  background:radial-gradient(110% 70% at 50% -10%,
    color-mix(in oklab, var(--fk-hjerte-2) 22%, transparent), transparent 60%), var(--kort-2)}
.udg-nyhed-nr{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--daempet)}
.udg-nyhed-ikon{width:64px; height:64px; border-radius:18px; margin:16px 0 14px;
  display:grid; place-items:center; background:var(--fk-hvid);
  box-shadow:0 10px 30px color-mix(in oklab, var(--fk-hjerte-2) 28%, transparent)}
.udg-nyhed-ikon svg{width:36px; height:36px}
.udg-nyhed h4{margin:0 0 14px; font-size:22px; line-height:1.15; font-weight:600; letter-spacing:-.02em;
  text-wrap:balance}
.udg-nyhed ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.udg-nyhed li{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start;
  font-size:14px; line-height:1.45}
.udg-nyhed li i{width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--skinne-2); color:var(--daempet)}
.udg-nyhed li i svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.udg-stille{margin:14px 2px 6px; font-size:13px; line-height:1.45; color:var(--daempet)}
.udg-stille a{color:var(--rav); text-decoration:none; white-space:nowrap}
.udg-stille a svg, #udgivelser-fod a svg{width:15px; height:15px}
#udgivelser-fod .handling{text-decoration:none}
#udgivelser-fod .handling + .udg-senere{margin-top:6px; min-height:40px; padding:8px 16px;
  background:none; border-color:transparent; color:var(--daempet); font-weight:500}

/* ── Arkets fod ────────────────────────────────────────────────────────── *
   `.ark` (genbrugt, se ovenfor) saetter allerede 20px vandret padding paa
   HELE arket - uden bleedet her ville foden faa 20px OVENI, altsaa 40px ind
   fra kanten. Samme "bleed"-moenster som .tidrk-valg (margin negativ, padding
   positiv), saa linjen over Save spaender arkets fulde bredde, som i
   mockup'en (der selv har nul padding paa .ark og laegger det ud lokalt). */
.ark-fod{
  margin:0 calc(-1 * var(--rende)); border-top:1px solid var(--kant); background:var(--kort-2);
  padding:12px var(--rende) calc(15px + env(safe-area-inset-bottom));
}
.fod-tal{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; font-size:12px; color:var(--daempet); margin-bottom:11px}
.fod-tal b{color:var(--tekst); font-weight:600}

/* ── Planens dage ────────────────────────────────────────────────────────
   Tre kolonner: ugedagen med datotallet under, sporet med passets navn under,
   og tiden. Raekken er en <summary>, saa resten (zonegraf, eksport,
   sammenligning) kan foldes ud uden at fjorten dage viser alt paa én gang. */
.dag{border-top:none; padding:0; position:relative}
.pdag{display:grid; grid-template-columns:44px 1fr auto 24px; align-items:center;
  gap:12px; padding:12px 4px; width:100%; text-align:left; cursor:pointer;
  list-style:none; border-radius:12px; transition:background .15s}
.pdag:active{background:var(--kort)}
.pdag::-webkit-details-marker{display:none}
.pdag::marker{content:''}
.pdag .segs.kompakt{width:100%; height:30px; margin-top:8px}
.dag + .dag > .pdag{border-top:1px solid var(--kant)}
.pd-dag{font-size:11px; color:var(--daempet-2); font-variant-numeric:tabular-nums;
  text-align:center; line-height:1.05}
.pd-dag b{display:block; font-size:19px; font-weight:600; color:var(--tekst);
  line-height:1.1; margin-top:1px}
.dag.i-dag .pd-dag{color:var(--rav)}
.pd-midt{display:block; min-width:0}
.pd-spor{display:block; height:6px; border-radius:3px; background:var(--skinne-2);
  position:relative; margin-top:6px; width:min(100%, 180px)}
.pd-spor i{position:absolute; inset:0 auto 0 0; border-radius:3px; display:block}
.pd-navn{display:flex; align-items:center; gap:0; font-size:15px; font-weight:600; color:var(--tekst);
  margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pd-planlagt{display:block; font-size:11px; color:var(--daempet); margin-top:2px}
.pd-tid{font-size:14px; font-weight:600; color:var(--tekst); font-variant-numeric:tabular-nums;
  min-width:52px; text-align:right; line-height:1.15}
/* Karakteren, "Yours", "Test" eller restitutionsmaerket - kun naar det siger
   noget, de to andre kolonner ikke allerede siger. */
.pd-tid i{display:block; font-style:normal; font-size:11px; margin-top:2px;
  color:var(--daempet-2); font-weight:400}
/* Fjerde kolonne: skift-knappen paa en fremtidig raekke, en tom plads paa en
   fortidsdag - uden den ville fortiden have én kolonne mindre, og tiden ville
   stå et andet sted end fremtidens. */
/* Det foldede indhold rykkes ind under sporet, saa det laeses som hoerende til
   raekken over - samme greb som .opfoelg paa Connections.
   Indrykningen er en MARGIN, og et barn med width:100% (zonegrafen, og enhver
   fuldbreddet knap i det foldede indhold) regner de 100% af hele raekken - saa
   det blev 47px for bredt, stak ud til hoejre og gav hele siden en vandret
   rulning (maalt 415px indhold i et 390px viewport). max-width tager indrykket
   fra igen, ét sted, saa det gaelder hvert barn og ikke kun det, der blev
   opdaget. */
.dag{--dag-indryk:47px}
.dag > *:not(.pdag){margin-left:var(--dag-indryk);
  max-width:calc(100% - var(--dag-indryk))}
.dag[open]{padding-bottom:12px}

/* Knappen i passets hjoerne, der aabner dagsarket. Fladen er 36px selv om
   ikonet er 16-18px: den sidder inde i <summary> paa planens raekker, og et
   tryk der rammer ved siden af, folder dagen ud i stedet for at aabne arket. */
.dag-skift{width:36px; height:36px; display:inline-flex; align-items:center;
  justify-content:center; background:none; border:none; padding:0; cursor:pointer;
  color:var(--daempet); border-radius:50%; flex:0 0 36px}
/* Planraekken er traengt ved 320px. Knappens SPOR er 24px, mens selve fladen
   bliver ved med at vaere 36px - de negative margener lader kassen flyde ud over
   sporet i begge sider, saa tommelen stadig har 36px at ramme (den sidder i en
   <summary>; rammer trykket ved siden af, folder dagen ud i stedet).
   MAAL SPORET, IKKE KASSEN: et negativt margin ALENE virkede ikke - det flytter
   grid-elementet, men frigiver ikke sporet, saa 1fr-kolonnen fik ikke én pixel
   mere (maalt: 115px foer og efter). Det er selve `grid-template-columns` plus
   gabet, der giver plads. Maalt ved 320px: .pd-navn 115px -> 136px. */
.pd-skift{margin-left:-6px; margin-right:-6px}
.pd-skift-tom{width:24px}
.dag-skift:hover{color:var(--tekst); background:var(--kant-svag)}
.pas .pas-type .dag-skift{position:absolute; top:14px; right:14px; margin:0;
  background:var(--kort-2); border:1px solid var(--kant-staerk); color:var(--rav);
  transition:transform .3s var(--fjeder)}
.pas .pas-type .dag-skift:active{transform:rotate(-120deg) scale(.94)}

/* ── Handlingsknapper ────────────────────────────────────────────────────
   Én form for hele appen: fuld bredde, hairline, og rav KUN naar handlingen
   er skaermens egentlige. Alt andet er stille. */
.handling{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin:14px 0 0; min-height:50px; padding:12px 16px;
  border-radius:var(--r-kontrol); border:1px solid var(--kant-staerk);
  font-size:15px; font-weight:600; text-align:center;
  background:var(--kort); color:var(--tekst); font-family:inherit; cursor:pointer;
  transition:transform .18s var(--fjeder), filter .15s;
}
.handling:active{transform:scale(.97)}
.handling.rav{background:var(--rav); color:var(--paa-rav); border-color:var(--rav)}

/* Den ENESTE knap i appen med et ikon foran sin tekst ("Adjust availability").
   To ting mangler, som mockup'en havde og appen ikke: .handling er
   `display:block` (saa ikon og tekst ikke kan staa paa linje), og der findes
   INGEN `.handling svg`-regel. Uden maal og farve tegner browseren SVG'et i
   sin egen standardstoerrelse med sort fyld - maalt 246x246px i en 276px bred
   knap, hvilket gjorde knappen 297px hoej med to sorte cirkler i.

   Scopet til #tid-aabn og ikke til .handling: den klasse baeres af ni knapper
   i appen, og ingen af de oevrige har et ikon. */
#tid-aabn{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:0}
#tid-aabn svg{width:16px; height:16px; flex:0 0 16px; stroke:currentColor;
  fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
/* .handling saettes ogsaa paa <a> (Reconnect). Uden disse to arver linket
   browserens understregning og staar en anelse hoejere end knappen ved siden af. */
a.handling{text-decoration:none; line-height:normal}
.handling.stille{background:transparent; border-color:var(--kant); color:var(--daempet);
  font-weight:500; min-height:46px}
.handling:disabled{opacity:.5}

/* ── You: profilen ───────────────────────────────────────────────────────
   Hvem det her er. .profil-hoved (den tidligere raekke) er vaek 19/9 2026 -
   se .rider i YOU-COCKPITTET nederst, som nu ejer layoutet. */
.avatar{width:64px; height:64px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, var(--z2), var(--z1)); border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; color:var(--bg)}
/* min-width:0 paa flex-barnet, ellers kan inputtet nedenfor ikke krympe under
   sin egen standardbredde og skubber avataren ud af spalten. */
.profil-tekst{min-width:0; flex:1 1 auto}
/* NAVNET ER ET FELT, ikke en overskrift der tilfaeldigvis kan klikkes.
   Typografien er uaendret fra dengang det var en <div> - det er stadig sidens
   overskrift - men understregningen er der, saa man kan SE at der kan skrives.
   Samme regel som .celle's feltbaggrund: fjernes affordancen, bliver elementet
   dekoration, og saa er designet forkert.
   Understregning frem for en hel ramme: en kasse om et navn i 19px ville laese
   som et inputfelt oeverst paa siden og goere hovedet til en formular. */
.profil-navn{font-size:24px; font-weight:600; letter-spacing:-.02em;
  font-family:inherit; color:var(--tekst); background:none; border:none;
  border-bottom:1px solid var(--kant-staerk); border-radius:0; padding:0 0 3px;
  max-width:100%; min-width:0; height:auto; min-height:0; box-shadow:none;
  transition:border-color .12s ease}
/* Bredden foelger ORDET, ikke spalten: size-attributten saettes af
   tegnAvatar(). En streg, der loeber 240px videre end navnet, laeser som en
   formular oeverst paa siden - og hovedet er en overskrift, ikke en formular.
   `field-sizing:content` ville goere det i CSS alene, men findes ikke i Safari,
   og det er den browser, appen mest bliver aabnet i. */
.profil-navn{width:auto}
.profil-navn::placeholder{color:var(--daempet); opacity:1}
.profil-navn:hover{border-bottom-color:var(--daempet)}
.profil-navn:focus{outline:none; border-bottom-color:var(--rav); box-shadow:none}
.profil-under{font-size:13px; color:var(--daempet); margin-top:4px}

/* ── Grupperne paa You og Connections ────────────────────────────────────
   En overskrift og dens felter - ingen kasse. Overskriften er lille og fed,
   ikke en sporet versal-etiket: versaler over hvert eneste afsnit er chrome,
   der optraeder uanset indhold. */
.gruppe{margin:26px 0 0}
.gruppe > h3{font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0 0 8px}

/* ── Cellerne: FELTER, ikke stat-fliser ──────────────────────────────────
   Hver celle er et redigerbart input med feltbaggrund og rav ramme ved
   :focus-within. Fjernes den affordance, bliver gitteret en dekorativ
   KPI-stribe, og saa er designet forkert. */
/* TRE TAL SIDE OM SIDE ER FIGUREN - men kun saa laenge en kolonne kan BAERE
   tallet. Stod som `repeat(3,1fr)` indtil 12/9 2026 (aften), og det er en regel
   skrevet for ét vinduesmaal: maalt paa "Your engine" ved 320/360/390/430px var
   kolonnen 86/99/109/123px, mens en celle skal bruge ~105px for at rumme sit
   indhold. Ved 320px betoed det, at rytteren ikke kunne laese SIT EGET TAL -
   "169" stod som "16" og "186" som "18" (input'et klipper, det ruller ikke) -
   og at ordet "Threshold" laa ind under (i)-ikonet i etiketten.

   `auto-fit` + `minmax(105px, 1fr)` udtrykker kravet i stedet for bredden: der
   staar saa mange kolonner, der KAN staa. Maalt efter: tre kolonner fra 390px
   og op (109/123px), to ved 320-360px (133/153px), nul afklip nogen af
   stederne. Roer ikke tallet uden at maale cellernes indhold igen - det er
   ikke et designvalg, men den bredde, "169 bpm" ved 24px plus etiketten og
   (i)-ikonet rent faktisk kraever. */
.spec{display:grid; grid-template-columns:repeat(auto-fit, minmax(105px, 1fr));
  gap:9px}
.spec.to{grid-template-columns:1fr 1.55fr}

/* TALLENE SKAL FLUGTE PAA TVAERS AF CELLERNE I SAMME RAEKKE (12/9 2026, aften).
   Brugeren saa det med det samme paa sin egen telefon: "250" og "169" laa
   lavere end "186", fordi etiketterne brakker forskelligt ("Threshold / power"
   paa to linjer, "Maximum" paa én) og hver celle derfor begyndte sit tal i sin
   egen hoejde.

   `subgrid` er svaret og ikke en min-height paa etiketten: en fast hoejde er en
   regel skrevet for ét linjeantal, og linjeantallet AFHAENGER AF BREDDEN -
   maalt ved 390px brakker turens "Threshold power (FTP)" til TRE linjer, mens
   de to andre staar paa to. Med subgrid arver cellerne gitterets raekker, saa
   etiket-, tal- og kilde-linjerne ligger i de SAMME raekker paa tvaers af
   raekkens celler, uanset hvor mange linjer den laengste etiket tager.

   `row-gap:0` paa selve cellen: uden den ville gitterets egne 9px ogsaa lande
   MELLEM etiket, tal og kilde inde i cellen. Cellens indre afstande er stadig
   elementernes egne margener - og det er samtidig faldet tilbage for en
   browser uden subgrid, hvor reglen blot ignoreres.

   `span 4` er det stoerste antal boern, en celle har i dag (FTP-cellen:
   etiket, tal, kilde, herkomst). Faar en celle et femte element, flugter
   etiket og tal stadig - men foej det til her, saa ogsaa det sidste gaar med. */
.spec .celle{display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0}
/* Maalets to felter: STABLET, ikke side om side (12/9 2026).
   De stod som 1.7fr/1fr ("et loebsnavn er langt, en dato er kort"), og det var
   forkert af en grund, der kun kan MAALES: Chromes `input[type=date]` har en
   intrinsisk bredde paa 129px ved 15px skrift (maalt med en probe i fiksturen,
   ikke gaettet) - den fik 98px i 1fr-kolonnen ved 390px og klippede aarstallet
   til "30 . 01 . 20". Feltet siger det ikke selv: `scrollWidth` er lig
   `clientWidth`, saa den saedvanlige overloebs-maaling melder GROENT paa et
   synligt afklippet felt.

   Arket er en RULLENDE flade, saa de ~60px, stablingen koster i hoejden, er
   gratis - og saa kan ingen bredde fra 320px og op klippe nogen af de to. */
#ark-maal .spec{grid-template-columns:1fr}
#ark-maal .celle input{font-size:16px}
#ark-maal .celle input[type=date]{font-size:17px}
/* Fokus i maalarket (#5, 26/10 2026): chips ombrydes i arket i stedet for at rulle. */
#ark-maal .maal-fokus{margin:16px 0 6px}
#ark-maal .maal-fokus-titel{margin:0; font-size:13px; font-weight:700}
#ark-maal .chips{flex-wrap:wrap; overflow:visible; margin:8px 0 0; padding:0}
.celle{background:var(--felt); border:1px solid var(--kant);
  border-radius:16px; padding:10px 12px 8px; min-width:0}
.celle label{display:block; font-size:11px; color:var(--daempet); margin:0 0 4px;
  letter-spacing:0; text-transform:none}
.celle .rk{display:flex; align-items:baseline; gap:4px; min-width:0}
.celle input, .celle select, .celle textarea{
  font:inherit; background:none; border:none; padding:0; width:100%; min-width:0; min-height:0;
  color:var(--tekst); font-size:24px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; border-radius:0; height:auto; box-shadow:none;
}
.celle select{font-size:16px; font-weight:500; letter-spacing:0}
.celle textarea{font-size:16px; font-weight:400; letter-spacing:0; line-height:1.5;
  resize:vertical}
.celle input:focus, .celle select:focus, .celle textarea:focus{outline:none; box-shadow:none; border-color:transparent}
.celle:focus-within{border-color:var(--rav)}
.celle .enh{font-size:12px; color:var(--daempet); font-weight:500; flex:0 0 auto}
.celle .kilde{font-size:11px; color:var(--z2); margin-top:4px}
.celle .kilde:empty{display:none}
.celle input::placeholder{color:var(--daempet); opacity:.5}

/* (i)-knap pr. felt i "Your engine" (You-fanen OG turens "tal"-ark, som deler
   denne komponent - se PLAN-motor-info-1to1.md). Mindre end tourens .tur-info-
   top (16px mod 21px cirkel), fordi cellen kun er ~97-123px bred - se maalt
   bredde i CLAUDE.md. */
.celle-top{display:flex; align-items:flex-start; justify-content:space-between;
  gap:6px; margin:0 0 6px}
.celle-top label{margin:0; flex:1 1 auto; min-width:0}
.celle-top .tur-info{flex:0 0 auto}
.celle-top .tur-info summary{width:16px; height:16px}

/* Positionering af boblen i et gitter: .tur-info-bobles standard ankrer til
   IKONETS egen kant, ikke cellens - og ikonet staar IKKE altid ved cellens
   kant. `.celle-top{justify-content:space-between}` skubber et kort label
   (fx "Threshold pace") saa langt til venstre, at ikonet lander langt INDE i
   cellen, ikke ved dens hoejre kant. Et venstre-anker paa IKONET (frem for paa
   cellen) rammer derfor stadig for langt til hoejre, og en 272px boble stak
   maalt 6-15px ud over skaermkanten ved 375/390px for netop dette felt.
   Fixet: `.celle` selv goeres til positioneringskonteksten (position:relative),
   og `.tur-info` mister sin egen (position:static IGEN kun her) - saa
   left:0/right:0 herunder er cellens egne kanter, uafhaengigt af hvor bredt
   labelet er, eller hvor ikonet derfor ender. */
.celle{position:relative}
.celle-top .tur-info{position:static}
.celle .tur-info-boble{top:39px; left:50%; right:auto; transform:translateX(-50%)}
.celle:first-child .tur-info-boble{left:0; right:auto; transform:none}
.celle:last-child .tur-info-boble{left:auto; right:0; transform:none}

/* Taerskelfartens to felter (MM, SS) + en STATISK kolon imellem - se
   forma.js's fartFelterTilSek() for hvorfor det ikke laengere er ét tekstfelt.
   Bredden er cifrenes, ikke spaltens, ligesom resten af You: to tal-felter, der
   ellers fik `.celle input`s `width:100%`, ville skubbe hinanden ud af kanten. */
.celle .fart-par{display:flex; align-items:baseline; gap:3px}
.celle .fart-par input{width:2ch; flex:0 0 auto; text-align:center}
.celle .fart-par .fart-kolon{font-size:24px; font-weight:600; color:var(--tekst)}
/* Datofeltet: browserens egen kalenderknap er lys som standard. */
.celle input[type=date]{font-size:17px}
/* Navnet er TEKST i en celle, der ellers er bygget til tal - samme undtagelse
   som maalarkets felter gør for et loebsnavn. Maalt ved 430px: 40 tegn (feltets
   maxlength) fylder 489px ved 24px og ruller ud af sit eget felt; ved 17px staar
   de inde i cellen. Skriftvaegten bliver, saa raekken stadig laeses som et navn
   og ikke som en note. */
#navn{font-size:17px; letter-spacing:-.01em; font-variant-numeric:normal}

/* ── Noten under et felt ─────────────────────────────────────────────────
   FARVEN LEVER I KANTEN, IKKE I PROSAEN - samme regel som .besked. Groen naar
   noten bekraefter noget (niveau, formaal), okker naar den saar tvivl om et
   tal (FTP-evidensen). Aldrig roed: ingen af dem er en fejl. */
.nvi{margin:12px 0 0; padding:12px 12px 12px 26px; border-radius:18px; background:var(--kort);
  border:1px solid var(--kant); border-left:1px solid var(--kant); position:relative;
  font-size:13px; line-height:1.45; color:var(--daempet)}
.nvi::before{content:''; position:absolute; left:12px; top:12px; bottom:12px; width:4px;
  border-radius:4px; background:var(--z2)}
.nvi.paakraevet::before{background:var(--rav)} .nvi.tvivl::before{background:var(--z3)}
.nvi.daempet::before{background:var(--daempet)}
.nvi b{color:var(--z2)}
/* Tre trin paa en skala, ikke tre vilkaarlige farver (12/9 2026). Kortet
   siger hvor TAET en maksimal test er: --rav = der er en grund nu, og raven
   er husets "her kan du handle"-farve (samme som knapperne i .knap-linje lige
   nedenfor, saa farven betyder ét og det samme paa hele kortet). --z3 = den
   naermer sig. --z2 = tallet er aktuelt, ingenting kraeves.
   .daempet er ikke et fjerde trin paa skalaen, men "spoergsmaalet er
   besvaret" - testen ligger allerede i planen. */
.nvi.paakraevet{border-left-color:var(--kant)}
.nvi.paakraevet b{color:var(--rav)}
.nvi.tvivl{border-left-color:var(--kant)}
.nvi.tvivl b{color:var(--z3)}
.nvi.rolig{border-left-color:var(--kant)}
.nvi.rolig b{color:var(--z2)}
.nvi.daempet{border-left-color:var(--kant)}
.nvi.daempet b{color:var(--daempet)}

/* Prikken og overskriften. Overskriften stod foer INLINE med forklaringen
   (ét <b> efterfulgt af loebende tekst), saa de to blev laest som én blok -
   og saa var der ingen rangorden at folde forklaringen vaek UNDER. Prikken
   baerer trinnets farve, saa tilstanden kan ses uden at laese: den er den
   samme oplysning som venstrekanten, og det er med vilje - kanten er 2px paa
   en telefon. */
.nvi-top{display:flex; align-items:center; gap:9px}
.nvi-prik{width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--daempet)}
.nvi.paakraevet .nvi-prik{background:var(--rav)}
.nvi.tvivl .nvi-prik{background:var(--z3)}
.nvi.rolig .nvi-prik{background:var(--z2)}
/* .forklar har normalt luft over sig, fordi den staar mellem afsnit. Inde i
   en .nvi er den det NAESTE efter overskriften, og 12px ville rive de to fra
   hinanden. */
.nvi .forklar{margin:6px 0 0}
.nvi .forklar p{margin-top:6px}
.nvi .knap-linje{margin:11px 0 0; display:flex; flex-wrap:wrap; gap:18px}
.nvi .knap-linje button{color:var(--rav); font-weight:600; font-size:13px; padding:0;
  background:none; border:none; font-family:inherit; cursor:pointer; text-align:left}

/* FTP-striben (15/9 2026): fod-linjen siger hvor tallet kommer fra, uden metoden. */
.ftp-stribe .nvi-fod{display:block; margin-top:6px; font-size:12px; color:var(--daempet); opacity:.8}
.ftp-stribe b{display:block; margin-bottom:2px}
.ftp-stribe.ind{animation:ftp-stribe-ind .28s var(--ud) both}
@keyframes ftp-stribe-ind{from{opacity:0; transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){ .ftp-stribe.ind{animation:none} }

/* ── Afkrydsningerne ─────────────────────────────────────────────────────
   En <label> om et skjult felt: id'erne, tastaturet og formularsemantikken
   bliver, og .boks tegner selve afkrydsningen. flex-start og ikke center -
   boksen skal flugte med FOERSTE tekstlinje; centreret mod en tolinjet etiket
   svaever den midt i ingenting. */
.valg{display:grid; grid-template-columns:1fr auto; gap:12px; padding:13px 0; width:100%;
  text-align:left; border-top:1px solid var(--kant); cursor:pointer; align-items:center;
  margin:0; font-size:15px; color:var(--tekst)}
.valg:first-of-type{border-top:none}
.valg-felt{position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0;
  pointer-events:none}
.boks{
  order:2; width:46px; height:28px; border-radius:14px; flex:0 0 auto; margin:0;
  border:1px solid var(--kant-staerk); display:block; position:relative;
  background:var(--skinne-2); transition:background .2s, border-color .2s;
}
.boks::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:var(--daempet); border:none; transform:none;
  transition:transform .25s var(--fjeder), background .2s}
.valg-felt:checked + .boks{background:var(--rav); border-color:var(--rav)}
.valg-felt:checked + .boks::after{
  width:20px; height:20px; border:none; transform:translateX(18px); background:var(--paa-rav);
}
.valg-felt:focus-visible + .boks{outline:2px solid var(--rav); outline-offset:2px}
.valg-t{display:block; font-size:15px; font-weight:600}
.valg-u{display:block; font-size:12px; color:var(--daempet); margin-top:2px;
  line-height:1.45}
/* ── Opfoelgningen ───────────────────────────────────────────────────────
   Et spoergsmaal, der kun giver mening naar linjen OVER er sat: watt udendoers
   uden en effektmaaler, taerskelfart uden loeb. Rykket ind og med en lodret
   streg, saa den laeses som HOERENDE TIL linjen over - ikke som endnu et
   sidestillet valg. Er svaret nej, fjernes den helt frem for at staa graa: et
   spoergsmaal, der ikke kan besvares, skal ikke stilles. */
.opfoelg{margin:2px 0 6px 0; padding:4px 0 4px 14px;
  border-left:1px solid var(--kant)}
.opfoelg-navn{font-size:13px; font-weight:600}
.opfoelg-tekst{margin:5px 0 12px; font-size:12px; line-height:1.5;
  color:var(--daempet)}
.tovalg{display:flex; gap:7px}
.tovalg button{
  flex:1; min-height:40px; padding:0 8px; border-radius:11px; font-size:13px; font-weight:500;
  border:1px solid var(--kant); color:var(--daempet); background:var(--kort);
  font-family:inherit; cursor:pointer;
}
.tovalg button.valgt{
  border-color:var(--rav); color:var(--rav); font-weight:600;
  background:var(--rav-dim);
}

/* ── Connections: to-knapper/kilde-fix ───────────────────────────────────
   `.kilde-r`/`.kilde-ikon`/`.kilde-t`/`.prik`/`.prik.ukendt` fjernet 19/9 2026
   (CONNECTIONS-COCKPITTET afloeser dem - se forma.css's bund) - grep gav nul
   traef i index.html/forma.js/tur-demo.js. Den z2-hardkodede `@keyframes
   prik-puls`, der laa her, er fjernet 19/9 2026: filen havde TO definitioner
   af samme navn, og den sidste vandt for hele filen - `.forbind-ord i` skal
   pulsere i currentColor (baandets farve), som den foerste (ved .nvi-prik) goer. */
.to-knapper{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.to-knapper .handling{margin:0}
/* Kalenderlinkets reserve-tekst (tegnKalenderFeed): markerbar og brydes, saa den ikke
   loeber ud over 320px. */
.kalender-url{display:block; margin-top:6px; word-break:break-all; user-select:all; -webkit-user-select:all; color:var(--tekst)}
#kalender-feed .knap.stille{margin-top:8px}
.forbind-fin.fejl{color:var(--roed)}
/* Abonnementslinjen nederst paa You: en linje, ikke et kort. */
.abon{margin:26px 0 0; padding:16px; border-radius:var(--r-flise);
  background:linear-gradient(135deg, rgba(240,169,59,.16), rgba(240,169,59,.03)), var(--kort);
  border:1px solid rgba(240,169,59,.3); font-size:13px; color:var(--daempet); line-height:1.5}
.abon:empty{display:none}
/* Abonnementet er en LINJE nederst paa You, ikke et kort: det er en oplysning om
   kontoen, ikke et emne, man kom for. Overskriften er derfor paa stoerrelse med
   teksten, og handlingerne er stille. */
.abon h2{font-size:15px; margin:0 0 4px}
.abon .lille{font-size:12px; margin:0 0 8px}
.abon .knap{width:auto; min-height:40px; padding:8px 14px; font-size:13px; margin-top:8px}
.abon .abon-linje{margin:8px 0}

/* `.slet` (kontosletningens tidligere understregede tekstknap) er fjernet
   19/9 2026 - erstattet af `.own.danger` + #ark-forbind-slet (CONNECTIONS-
   COCKPITTET). Grep gav nul traef i index.html/forma.js/tur-demo.js. */

/* De to guider paa Connections er de SAMME som paa onboarding-skaermen, men de
   staar et andet sted: dér er de skaermens indhold, her er de en fodnote til en
   forbindelse, der allerede virker. Samme diskrete foldning som .forklar, saa de
   ikke laeses som to kort mellem kilden og udstyret. */
/* De gamle #s-forbind .onboard-guide-/.dagsdom-helt-regler er fjernet 19/9 2026 (guiderne bor i ark). */


/* ── Workouts: repertoiret ────────────────────────────────────────────────
   Fanen er en LISTE man bladrer i, ikke en skaerm med kort om noget. Derfor de
   samme greb som Activities, som er den anden bladre-fane: haarfine skel frem
   for rammer, og udfoldningen (.akt-fold) som skaermens ene handling.

   TRE NIVEAUER, INGEN SKJULT SKAERM. Tidsskaermen blev fjernet 4/9, netop fordi
   man rettede noget ét sted og saa konsekvensen et andet - biblioteket foelger
   den lære og har hverken en detaljeskaerm eller en tilbageknap. Sportsgren og
   fokus er FILTRE oeverst; passene staar under dem og aabner paa stedet. */

/* Sportsgrenene faar bundnavigationens sprog: farve, vaegt og en rav
   understregning under den aktive. Appen har allerede lært brugeren, at DET
   betyder "her er du" - en fjerde slags markering ville vaere en ny figur uden
   en ny betydning. Skriften er stoerre end nav'ens, fordi de tre ord her er
   skaermens overskrift og ikke dens fod. */
.bib-sport{display:flex; gap:22px; border-bottom:1px solid var(--kant); margin:8px 0 12px}
.bib-sport-k{background:none; border:none; font:inherit; font-size:17px;
  font-weight:600; color:var(--daempet-2); padding:10px 0 11px; cursor:pointer;
  position:relative; white-space:nowrap; letter-spacing:-.01em}
.bib-sport-k.aktiv{color:var(--tekst); font-weight:600}
.bib-sport-k.aktiv::after{content:''; position:absolute; left:0; right:0;
  bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--rav)}
/* Fokus er et FILTER, ikke en overskrift: en vandret rulleraekke, saa alle seks
   kategorier kan naas med tommelfingeren uden at listen under flytter sig.
   `scrollbar-width:none` fordi raekken er kort nok til at kanten selv siger, at
   der er mere - en scrollbar under seks chips er stoej. */
.bib-fokus{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(-1 * var(--rende)) 14px; padding:0 var(--rende) 2px}
.bib-fokus::-webkit-scrollbar{display:none}
.bib-fokus-k{flex:0 0 auto; background:var(--kort); border:1px solid var(--kant);
  color:var(--daempet); font:inherit; font-size:13px; font-weight:500; min-height:38px;
  padding:0 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--fjeder), background .15s, color .15s, border-color .15s}
.bib-fokus-k:active{transform:scale(.95)}
.bib-fokus-k.aktiv{background:var(--rav-dim); color:var(--rav); font-weight:600; border-color:var(--rav)}
/* Kategoriens ene saetning. Serif som dagens dom og fasen paa Plan: det er
   raesonnementet paa denne skaerm, og appen saetter sit raesonnement i serif. */
.bib-fokus-tekst{font-family:var(--skrift-dom); font-weight:400; font-size:19px; line-height:1.3;
  color:var(--tekst); margin:0 0 6px}

/* Raekken. Navn og varighed paa foerste linje, passets FORM i fuld bredde under
   dem - grafen er ikke pynt, den er dét, man bladrer efter: to sekunder paa en
   skaerm og man kan se, hvilket pas der er hvilket, uden at laese et ord. */
.bib-r{background:var(--kort); border:1px solid var(--kant); border-radius:var(--r-flise);
  padding:0 14px; margin:10px 0 0; transition:transform .2s var(--fjeder)}
.bib-r:active{transform:scale(.985)}
.bib-r > summary{display:grid; grid-template-columns:1fr auto 14px;
  grid-template-areas:"navn tid fold" "graf graf graf" "load load load";
  align-items:center; column-gap:12px; padding:14px 0; cursor:pointer;
  list-style:none}
.bib-r > summary::-webkit-details-marker{display:none}
.bib-r > summary::marker{content:''}
.bib-navn{grid-area:navn; font-size:17px; font-weight:600; letter-spacing:-.01em}
/* Hverken farve eller rav: maerket er ikke en maaling, og det er ikke en
   handling - det er en oplysning om, hvilket af de ni programmer der er skrevet
   til netop denne atlets sportsgren(e). En haarfin, daempet pille. */
.bib-dit{display:inline-block; margin-left:8px; vertical-align:2px;
  font-size:11px; font-style:normal; font-weight:600; letter-spacing:0;
  color:var(--z2); background:color-mix(in srgb, var(--z2) 18%, transparent); border:none;
  border-radius:999px; padding:2px 8px; white-space:nowrap}
.bib-tid{grid-area:tid; font-size:13px; color:var(--daempet);
  font-variant-numeric:tabular-nums}
.bib-r > summary .akt-fold{grid-area:fold}
.bib-graf{grid-area:graf; display:block; min-width:0; margin-top:14px}
.bib-r > summary .segs{height:56px; margin:0}
.bib-load{grid-area:load; display:flex; align-items:center; gap:10px; margin-top:12px;
  font-size:12px; color:var(--daempet); font-variant-numeric:tabular-nums}
.bib-load .lspor-mini{flex:0 1 120px; width:auto}
.bib-krop{padding:0 0 14px}
/* Et styrkeprogram har hverken struktur-linje, baand eller maalere, saa
   oevelseslisten er kroppens FOERSTE element - og dens margin-top blev da til et
   hul mellem navnet og den foerste oevelse. Reglen gaelder generisk, saa den
   ogsaa holder for det naeste felt, der en dag maatte staa oeverst. */
.bib-krop > *:first-child{margin-top:0}
.bib-struktur{font-size:14px; line-height:1.55}
.bib-fakta{margin-top:12px}
.bib-hvornaar{margin-top:16px; font-size:13px; color:var(--daempet);
  line-height:1.55}
.bib-inde, .bib-maalere-note, .bib-ingen-eksport{margin-top:10px}
.bib-kilde{margin-top:12px; font-size:11px; opacity:.75}
.bib-fod{margin-top:14px; border:none; border-radius:0; overflow:visible; display:grid; gap:8px}

/* Laasen. IKKE et .pro-laas-kort pr. pas - sytten opgraderingskort paa én
   skaerm er stoej, og kortet paa Plan-fanen baerer i forvejen beskeden. Her er
   det én linje, der siger hvad tallet ER, og som kan trykkes. */
.bib-laas{display:flex; align-items:center; gap:9px; width:100%; margin-top:12px;
  background:var(--rav-dim); border:1px solid rgba(240,169,59,.35); border-radius:var(--r-kontrol);
  color:var(--tekst); font:inherit; font-size:13px; line-height:1.45;
  text-align:left; padding:12px 14px; cursor:pointer}
.bib-laas b{color:var(--rav); font-weight:600}
.bib-laas svg{width:15px; height:15px; flex:0 0 15px; opacity:.8}
.bib-laas-fod{margin-top:16px}

/* ── Laast prosa: hvornaar/kilde og kategoriens hovedtekst (5/9 2026) ──────
   Cykel- og loebeteksterne var Free siden biblioteket blev bygget (se
   bibliotek_ruter.py's "Free og Pro") - brugeren bad selv om at flytte netop
   den prosa bag Pro, mens baandene (procent/watt, .bib-laas ovenfor) staar
   uaendret. Sloeringen genbruger .pro-laas' figur (blur + laas + CTA-tekst,
   "det andet der linker til betaling"), men er skaleret til en tekstblok
   frem for et helt kort, PRAECIS af den grund kommentaren ved .bib-laas
   allerede naevner: sytten fulde .pro-laas-kort paa én skaerm ville vaere
   stoej. Rigtig tekst ligger stadig i DOM'en (samme ord for alle brugere,
   intet personligt at laekke) - kun VISNINGEN er laast. */
.bib-laas-tekst{position:relative; margin-top:12px; border-radius:8px; overflow:hidden}
.bib-laas-tekst-indhold{display:block; filter:blur(3.5px) saturate(.7); opacity:.5;
  pointer-events:none; user-select:none}
.bib-laas-chip{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; gap:8px; text-align:center; background:none; border:none;
  font-family:inherit; cursor:pointer; padding:10px; font-size:12px; line-height:1.4;
  color:var(--tekst)}
.bib-laas-chip svg{width:15px; height:15px; flex:0 0 auto; color:var(--rav)}
.bib-laas-chip b{color:var(--rav); font-weight:600}
@media (prefers-reduced-motion: reduce){
  .bib-laas-tekst-indhold{filter:none; opacity:.2}
}

/* ── Hele Styrke-sektionen bag en LETTERE sloering (5/9 2026) ──────────────
   Brugerens eget skel: styrke skal kunne ANES paa forsiden, ikke forsvinde
   bag samme taette sloering som prosaen ovenfor. Mindre blur, hoejere
   opacitet - og en RIGTIG knap over listen i stedet for et overlay ovenpaa
   den, fordi ni programmer kan vaere langt at rulle igennem, og et overlay
   centreret over hele hoejden ville skubbe CTA'en ud af syne ved scroll. */
.bib-styrke-laas-chip{display:flex; align-items:center; justify-content:center;
  gap:9px; width:100%; margin:0 0 16px; padding:12px 14px; border-radius:10px;
  background:var(--felt); border:1px solid color-mix(in srgb, var(--groen) 40%, var(--kant));
  color:var(--tekst); font:inherit; font-size:13px; line-height:1.45; text-align:left;
  cursor:pointer}
.bib-styrke-laas-chip svg{width:16px; height:16px; flex:0 0 16px; color:var(--groen)}
.bib-styrke-laas-chip b{color:var(--groen); font-weight:600}
.bib-styrke-laas-indhold{filter:blur(1.5px) saturate(.85); opacity:.8;
  pointer-events:none; user-select:none}
@media (prefers-reduced-motion: reduce){
  .bib-styrke-laas-indhold{filter:none; opacity:.4}
}

/* Oevelseslisten. Navnet baerer raekken, saet/reps lukker den til hoejre, og
   cue'et staar under som en hel linje - samme laesning som .lag-raekkerne i
   zonefordelingen. */
.bib-oevelser{margin-top:14px}
.bib-oev{display:grid; grid-template-columns:1fr auto; column-gap:12px;
  padding:9px 0; border-top:1px solid var(--kant-svag)}
.bib-oev:first-child{border-top:none}
.bib-oev-navn{font-size:14px; font-weight:500}
.bib-oev-saet{font-size:13px; color:var(--daempet);
  font-variant-numeric:tabular-nums}
.bib-oev-note{grid-column:1 / -1; font-size:12px; color:var(--daempet);
  margin-top:3px; line-height:1.45}

/* ══════════════════════════════════════════════════════════════════════════
   GUIDED TOUR (6. september 2026)

   Afloeser #v-guide og #v-onboard. Se markuppen i index.html for hvorfor
   turen har tre tilstande, og docs/mockups/forma-tour.html for kontrakten.

   ALT HER ER PRAEFIKSET `tur-`, OG DET ER IKKE PYNT. `.ark`, `.kort`, `.felt`,
   `.valg`, `.tier`, `.boks`, `.knap` og `.tilbage` er ALLE taget i forvejen i
   denne fil - maalt, ikke gaettet. Samme fejlklasse som `.logo-maerke`, der
   maatte omdoebes fra `.maerke`, fordi planlistens etiketter havde navnet og
   stod SENERE i kaskaden.

   Hvor appen allerede HAR komponenten, genbruges den bevidst uden praefiks:
   `.knap`, `.valg`/`.valg-felt`/`.boks`, `.enheder-grid`, `.onboard-guide`,
   `.lille`. Turen ligner dermed appen gratis, og en senere rettelse af en
   knap rammer begge steder.
   ══════════════════════════════════════════════════════════════════════════ */

/* Én fjeder i hele turen, saa alt der bevaeger sig, bevaeger sig med samme
   haand. */
:root{ --tur-fjeder:cubic-bezier(.22,.85,.28,1); }

/* #v-tur har INGEN baggrund: i maerke-tilstand skal appen ses igennem den.
   Den daekker alligevel hele skaermen, saa klik ikke naar appen bagved -
   turen styrer selv, hvilken fane man staar paa.

   HOEJDEN ER `dvh` OG IKKE `inset:0`, og det er ikke pynt. Med `inset:0` er
   fladen den store viewport - altsaa OGSAA de ~50px, en mobilbrowsers
   vaerktoejslinje ligger hen over. Turens fod, med sin ene knap, blev dermed
   lagt i det baand: i Chrome paa iOS meldte brugeren 6/9 2026, at "Go to Today"
   ikke kunne trykkes, mens et tryk paa "Back" lige OVENOVER udloeste netop den
   knaps handling - altsaa et hit-test, der ligger lavere end det, oejet ser.
   Samme JavaScript virkede i Safari, som lagger fladen anderledes.

   `100dvh` foelger den SYNLIGE viewport, saa foden altid staar over linjen.
   `100vh` foerst som fald-tilbage for browsere uden dvh - samme moenster som
   `.forside` allerede bruger. */
#v-tur{position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh;
  z-index:60}
#v-tur.skjul{display:none}

/* ── Fremdriftsskinnen ─────────────────────────────────────────────────────
   IKKE prikker. Prikker er standardgrebet i enhver onboarding; en skinne, der
   FYLDES, er appens egen figur (samme sprog som .spor: fyldet er hvad der er).
   Turen laerer sproget ved at bruge det. Rykket ind fra kanterne, saa den
   floej med spaltens hairlines frem for at ende under dem. */
/* `top` er den sikre zone (7/10 2026): i iPhone-appen ligger websiden UNDER
   statuslinjen, og skinnen stod oppe i uret. turSikkerTop() i forma.js LAESER
   denne vaerdi som keglens loft - ret den ikke uden at se dér. */
.tur-skinne{
  position:absolute; top:env(safe-area-inset-top, 0px); left:0; right:0; height:2px;
  background:var(--felt); z-index:4;
  max-width:var(--spalte); margin:0 auto;
}
.tur-skinne i{display:block; height:100%; width:0; background:var(--rav);
  transition:width .55s var(--tur-fjeder)}

/* ── ARKET ─────────────────────────────────────────────────────────────────
   TRE FASTE BAAND, og kun midterbaandet ruller. En `position:sticky` fod
   laegger sig oven paa det, der ruller forbi under den - paa Pro-arket laa
   den fine skrift bogstaveligt talt bag knappen. Rullezonen er derfor sin
   egen kasse. */
.tur-ark{
  position:absolute; inset:0;
  background:radial-gradient(120% 70% at 50% -20%,
    color-mix(in oklab, var(--rav) 22%, transparent), transparent 65%), var(--bg);
  display:flex; flex-direction:column;
}
.tur-ark[hidden]{display:none}
.tur-ark-top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:calc(26px + env(safe-area-inset-top, 0px)) 16px 0; max-width:var(--spalte); margin:0 auto;
  width:100%; box-sizing:border-box;
}
.tur-ark-top .logo{font-size:13px}
.tur-ark-top .logo-maerke{width:15px; height:15px}
.tur-ark-krop{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px 16px 20px; max-width:var(--spalte); margin:0 auto; width:100%;
  box-sizing:border-box;
  /* `safe center` og ikke `center`: et kort ark (velkomsten) skal staa midt i
     skaermen frem for at klaebe til toppen med 400px luft under sig - men et
     langt ark (historien, Pro) maa ikke faa toppen skaaret af, og det er
     praecis, hvad `safe` forhindrer. */
  display:flex; flex-direction:column; justify-content:safe center;
}
/* Sikkerhedszonen i bunden var det ENESTE bundforankrede sted i appen, der ikke
   havde den: `nav`, `.tur-kort`, `.tur-bekraeft-ark`, `.ark` og `body` har den
   alle. Turens fod baerer turens ene knap og laa som den eneste helt nede i
   kanten - se #v-tur's kommentar for, hvad det kostede. */
.tur-ark-fod{
  flex:0 0 auto; background:var(--bg); position:relative;
  padding:10px 16px calc(8px + env(safe-area-inset-bottom));
  max-width:var(--spalte); margin:0 auto; width:100%; box-sizing:border-box;
}
/* Antydningen af, at der er mere ovenfor - erstatter den gradient, den gamle
   sticky-fod bar med sig. */
.tur-ark-fod::before{
  content:''; position:absolute; left:0; right:0; top:-26px; height:26px;
  background:linear-gradient(to top, var(--bg), transparent); pointer-events:none;
}
/* Antydningen om at der er mere AT LAESE, ikke kun mere ovenfor - kun de laengste
   ark (historien, Pro) er hoejere end skaermen. `turTegn()` maaler
   #tur-ark-krops overload ved hvert skift og saetter klassen paa #tur-ark; en
   scroll-lytter fjerner den, saa snart brugeren selv er rullet forbi. Sidder
   inde i den eksisterende fade-zone ovenfor, saa den ikke laegger sig oven paa
   knapperne. */
.tur-rul-vink{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  width:22px; height:22px; margin-bottom:2px; color:var(--daempet);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.tur-ark.tur-har-mere .tur-rul-vink{
  opacity:1; animation:tur-vink-hop 1.6s ease-in-out infinite;
}
@keyframes tur-vink-hop{
  0%, 100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(4px)}
}
/* KNAPPENS TRAEFFLADE RAEKKER NED UNDER DEN SELV.
   Brugeren meldte 6/9 2026 - efter at knappen var flyttet 42px OP, og med
   uaendret opfoersel - at et tryk LIGE OVER knappen rammer den, mens et tryk
   paa den selv ikke goer. Fejlen foelger altsaa knappen; den er ikke bundet
   til skaermkanten. Det er signaturen paa, at fladen MALES et stykke lavere,
   end den TRAEFFES: er forskellen d, virker kun den oeverste (hoejde - d) af
   knappen, og baandet lige over den virker.
   Traeffladen forlaenges derfor NEDAD, helt til skaermens underkant - der
   ligger turens reserverede, usynlige underlinje og fodens polstring, og der
   er intet at ramme ved siden af. 64px daekker begge (42 + 20) og er dermed
   ALT, hvad der er tilbage under knappen; en forskel, der er stoerre end det,
   ville skulle rammes uden for skaermen. Knappen ser noejagtig ud som foer;
   kun det, en finger kan ramme, er stoerre.
   `pointer-events` roeres ikke: et klik paa ::after rammer vaertselementet. */
#tur-videre{position:relative}
/* FORLAENGELSEN VIRKER FOERST NU (20/9 2026, sent). Den stod paa -64px siden 6/9,
   men `.knap{overflow:hidden}` - som klipper krusningen efter knappens hjoerner -
   klippede ogsaa ::after, saa den aldrig daekkede noget. Maalt i browseren:
   `elementFromPoint` 3, 15 og 25px under knappen gav `tur-ark-fod`.
   Derfor `overflow:visible` HER, og krusningen slaaet fra paa netop denne knap -
   den ville ellers flyde ud over kanten. En manglende krusning paa ét trin er en
   lille pris for en knap, hvis underkant kan trykkes.
   22px og ikke 64: underlinjen skal kunne staa taet nok under til, at foden ser
   ud som en fod. De 64px tvang Skip 76px ned og skubbede arkets indhold ud af
   skaermen - brugeren saa det straks paa sin telefon. */
#tur-videre{overflow:visible}
#tur-videre .krusning{display:none}
/* 16 px og ikke 22 (25/9 2026): brugeren saa velkomstens og historiens tekst forsvinde
   under pilen i Chrome paa iPhone (390x661: 77 og 28 px overloeb). Foden gav 32 px
   ved at staa taettere. REGLEN, der ikke maa brydes: forlaengelsen skal slutte FOER
   underlinjens kasse begynder (her 4 px dødt baand: 16 mod margin 20), ellers
   udloeser et tryk paa knappens underkant "Skip the tour". Kontrol: elementFromPoint
   over hele knappen og +5/+10/+15 under den = tur-videre, +18 = foden, Skip = tur-under. */
#tur-videre::after{
  content:''; position:absolute; left:0; right:0; top:0; bottom:-16px;
}
/* ...men underlinjen skal blive ved med at kunne trykkes, dér hvor den ER
   synlig ("Maybe later", "Skip for now", "Skip the tour"). Den staar senere i
   markup'en, men er upositioneret og ville derfor ligge UNDER knappens
   forlaengelse - se [[position_relative_flytter_male_lag]]-fejlklassen. Et
   z-index loefter den tilbage ovenpaa. Er den skjult, er den
   `visibility:hidden` og kan slet ikke rammes, og saa gaelder forlaengelsen. */
/* KASSEN HUGGER TEKSTEN, den spaender ikke hele bredden (20/9 2026). Indtil da
   var den `width:100%` + `text-align:center`: teksten "Skip the tour" fylder ~80px
   og LIGNER en lille linje, men knappen var 398px bred - hele kortets bredde, hen
   under BAADE Back og Continue, med kun 11px imellem. En fingerspids daekker 40+
   CSS-px, saa et tryk mod underkanten af Continue landede i Skip-baandet og aabnede
   "Skip the tour?". Brugeren meldte det fra sin telefon i prod og gaettede aarsagen
   rigtigt ("blokken ser ud til at vaere stoerre end knappen"). Maalt foer
   rettelsen paa et ark-trin: Back 72-134, Continue 144-470, Skip 72-470.
   Samme fejlklasse som naboknappen, der udloeste handlingen.
   `fit-content` + `margin:auto` beholder centreringen uden bredden. */
.tur-under{display:block; width:fit-content; text-align:center; margin:20px auto 0;
  position:relative; z-index:1;
  font-size:12px; line-height:1.5; padding:8px 18px}
/* Korte skaerme (iPhone i Chrome/Safari: ~660 px): velkomsten og slutarket flød over,
   selv med den strammere fod. Maerket og vejen giver pladsen - teksten skal staa hel. */
@media (max-height:720px){
  #v-tur .tur-maerke-stor .logo-maerke{width:44px; height:44px}
  #v-tur .tur-vej{height:110px}
  #v-tur .tur-ark-krop{padding-top:8px; padding-bottom:12px}
}
/* UNDERLINJENS PLADS BLIVER STAAENDE, ogsaa naar der ikke er nogen underlinje.
   `visibility` og ikke `display`, og det er hele rettelsen af den fejl,
   brugeren meldte tre gange 6/9 2026.

   Afslutningsarket er det ENESTE af turens ni ark uden en underlinje. Med
   `display:none` faldt foden 42px sammen, og turens hovedknap - som paa alle
   otte andre ark staar med underkant 838 - stod dér alene med underkant 880,
   altsaa nede i det baand, en mobilbrowsers vaerktoejslinje ligger hen over.
   Maalt i appen, 430x900:

       velkomst..fokus, pro   knap 791-838   (underlinjen under den)
       faerdig                knap 833-880   (intet under den)

   Brugeren kom igennem alle otte ark og kunne ikke trykke paa det niende - og
   et tryk LIGE OVER knappen, i det sorte, virkede. Knappen stod under kanten.

   At holde pladsen er ogsaa det rigtige uanset: turens ene knap skal staa
   samme sted paa hvert trin, ikke hoppe 42px paa det sidste. */
.tur-under[hidden]{visibility:hidden}
.tur-under.rav{color:var(--rav); font-weight:500}
/* Back og hovedknappen paa ÉN raekke, underlinjen under (onboarding-cockpit.html,
   19/9 2026). Ingen tilbageknap paa foerste ark: gitteret bliver da ét felt, ikke
   en tom kolonne. */
.tur-fod-raekke{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center}
.tur-fod-raekke:has(.tur-ark-tilbage[hidden]){grid-template-columns:1fr}
.tur-ark-tilbage{
  min-height:50px; padding:0 14px; border-radius:var(--r-kontrol);
  color:var(--daempet); font-size:14px; border:1px solid var(--kant);
  background:var(--kort); margin:0;
  /* forma.css har ingen button-reset: uden den tegnede browseren Back i Arial (fundet af fk-sammenlign 3/10 2026). */
  font-family:inherit;
}
.tur-ark-tilbage[hidden]{display:none}

.tur-side.skjul{display:none}
/* Fraunces saetter ÉN saetning pr. skaerm - her arkets overskrift. Samme regel
   som .dagsdom-helt: det er det eneste sted, dristigheden bruges. */
.tur-side h1{
  font-family:var(--skrift-dom); font-weight:400;
  font-size:clamp(30px, 8.6vw, 36px); line-height:1.08; letter-spacing:-.01em; margin:0 0 14px;
  text-wrap:balance; color:var(--tekst);
}
.tur-side h1 em{font-style:italic; color:var(--rav)}
.tur-side p{font-size:14px; line-height:1.6; color:var(--daempet); margin:0 0 14px}
.tur-side p b, .tur-side p strong{color:var(--tekst); font-weight:600}
.tur-side a{color:var(--rav)}
/* TURENS SMAA TEKST SKAL KVALIFICERES MED `.tur-side`, ellers findes den ikke.
   `.tur-side p` er (0,1,1) og slaar baade `.tur-felt-hint` og `.lille`, som
   begge er (0,1,0) - saa hver eneste hjaelpetekst og hver fodnote i turen
   rendrede i BROEDTEKSTENS 14,5px, uanset at de stod erklaeret til 12 og 13.
   Turen havde dermed slet ingen lille tekst; hint og broedtekst var samme
   stoerrelse, og hierarkiet fandtes kun i CSS-filen.

   Maalt 6/9 2026 paa alle seks hints og alle fem fodnoter. Tredje gang samme
   familie rammer denne fil: `.tur-signatur` kom ud i graat af noejagtig samme
   grund, og `.logo-maerke` maatte omdoebes, fordi `.maerke` var taget. `tjek.sh`
   kan ikke se en kaskadekollision - kun en maaling i en browser kan.

   ÉN lille stoerrelse i turen, ikke to. Mockup'ens `.felt-hint` og `.fin` er
   begge 12px; `.lille`s globale 13px hoerer til inde i appen, hvor den staar
   ved siden af 13-14px broedtekst, ikke ved siden af turens 14,5. */
.tur-side p.tur-felt-hint{font-size:12px; line-height:1.45}
.tur-side p.lille{font-size:12px; line-height:1.5}
.tur-fin{margin-top:4px}

/* Arkets indhold traeder ind ÉN gang, i raekkefoelge. Ét orkestreret oejeblik
   pr. skaerm - ikke en effekt pr. element. */
.tur-side:not(.skjul) .tur-traed > *{animation:tur-saet .55s var(--tur-fjeder) backwards}
.tur-side:not(.skjul) .tur-traed > *:nth-child(1){animation-delay:.04s}
.tur-side:not(.skjul) .tur-traed > *:nth-child(2){animation-delay:.11s}
.tur-side:not(.skjul) .tur-traed > *:nth-child(3){animation-delay:.17s}
.tur-side:not(.skjul) .tur-traed > *:nth-child(n+4){animation-delay:.22s}
@keyframes tur-saet{from{opacity:0; transform:translateY(11px)}}

/* Velkomstens maerke tegner sig selv - samme stroke-dashoffset-teknik som
   forsiden og dagsbuen, saa bevaegelsen er husets egen. `.logo-lodret` (som gav
   layoutet foer 19/9 2026) staar ikke laengere paa elementet - se
   onboarding-cockpit.html's `.hero-mark`, samme centrering. */
.tur-maerke-stor{margin:0 0 10px; display:flex; justify-content:center}
.tur-maerke-stor .logo-maerke{width:60px; height:60px; color:var(--rav)}

/* ── Historiens portraet ───────────────────────────────────────────────────
   Det ENESTE fotografi i hele appen. Derfor bloeder det ud i spaltens kanter
   frem for at sidde i en kasse: en kasse ville goere det til et element blandt
   andre, og det er den ene gang, der staar et menneske bag saetningerne. */
/* Hoejden er BUNDET TIL SPALTEN og ikke et fast tal: 230px var regnet for en
   390px-telefon, og paa en 320px-skaerm wrapper baade overskriften i billedet og
   afsnittene under det en linje mere - arket loeb 51px over, saa signaturen blev
   klippet. `min()` holder de 230px overalt fra ~371px og op (uaendret design) og
   lader baandet krympe proportionalt med spalten paa de smalleste skaerme, hvor
   pladsen faktisk mangler. Maalt ved 320px: 198px, og arket passer.
   `28vh` er den samme regel skrevet for den anden akse: paa en LAV skaerm
   (iPhone SE, 667px) aad baandet en fjerdedel af arket, og historien maatte
   rulles laengere end noedvendigt. Ingen af de to lofter rammer en 844px hoej
   telefon - dér staar de 230px praecis som foer. */
.tur-portraet{
  position:relative; margin:0 -16px 18px; height:min(230px, 62vw, 28vh); overflow:hidden;
  background:var(--kort);
}
/* `object-position` er loeftet fra midten (croppede hjelmen af ved 370px,
   se historikken) op til 21% - regnet saa det synlige udsnit starter lige
   over rytterens hjelm og naar ned forbi haenderne/styret, som er dér
   overskriften staar. Resten af cyklen/vejen er beskaaret vaek, men den var
   allerede moerklagt af scrim'en og gav intet - kun DOED plads mellem
   overskriften og teksten under. */
.tur-portraet img{width:100%; height:100%; object-fit:cover; object-position:50% 21%;
  display:block; filter:saturate(.82) contrast(1.03)}
/* Overskriften staar IKKE laengere inde i billedet (onboarding-cockpit.html,
   19/9 2026): <h1> flyttede ud som en almindelig sibling lige efter
   .tur-portraet, saa scrim'en kan blive den enkle udtoning, mock'en bruger. */
.tur-portraet::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 55%, var(--bg));
}
.tur-side[data-tur="historie"] h1{margin:-10px 0 10px; position:relative}
/* Overskriften er nu en almindelig sibling af .tur-portraet inde i .tur-traed,
   saa den generelle nth-child-stagger (".tur-traed > *", ovenfor) rammer den
   automatisk som 2. barn - samme forsinkelse (.11s), ingen saerregel behoeves
   laengere. */
.tur-foto-plads{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; color:var(--daempet);
  font-size:12px; text-align:center; padding:20px; line-height:1.4;
  background:repeating-linear-gradient(-45deg,#1E1A15 0 11px,#1B1712 11px 22px);
}
.tur-foto-plads svg{width:26px; height:26px; opacity:.55}
/* `.tur-side p.tur-signatur` og ikke `.tur-signatur`: underskriften staar i et
   <p>, og `.tur-side p` saetter den daempede farve med HOEJERE specificitet
   (0,1,1 mod 0,1,0). Uden kvalifikationen kommer navnet ud i graa, selvom
   reglen siger kridt - fanget ved at rendere, praecis som i mockup'en. */
.tur-signatur-blok{display:flex; align-items:center; gap:12px; margin-top:10px}
.tur-avatar{width:52px; height:52px; border-radius:50%; object-fit:cover;
  flex:0 0 auto; border:1px solid var(--kant)}
.tur-side p.tur-signatur{
  font-family:var(--skrift-dom); font-weight:400; font-size:19px; margin:0;
  color:var(--tekst); line-height:1.3;
}
.tur-signatur span{display:block; font-family:var(--skrift); font-size:12px;
  color:var(--daempet); margin-top:3px; font-weight:400; line-height:1.35;
  white-space:normal}

/* ── Valglisterne ──────────────────────────────────────────────────────────
   Genbruger appens .valg/.valg-felt/.boks. Opfoelgningen er rykket ind med en
   lodret streg, saa den laeses som HOERENDE TIL linjen over - ikke som et
   fjerde, sidestillet valg. */
.tur-valgliste{margin:4px 0 0}
/* Sport- og udstyrsarket bruger appens egne .brik-fliser (laant som .knap/
   .boks, derfor uden tur-praefiks) - samme kontrol som You/Connections siden
   13/9 2026. Noten under gitteret og opfoelgningen faar luft til gitteret. */
.tur-side .brikker{margin:6px 0 12px}
.tur-side .brikker ~ .tur-opfoelg{margin-top:4px; margin-bottom:14px}
.tur-opfoelg{margin:0 0 0 31px; padding-left:14px; border-left:1px solid var(--kant)}
.tur-opfoelg.skjul{display:none}
.tur-opfoelg .valg{border-top:none}

/* ── Felterne ──────────────────────────────────────────────────────────────
   Samme saenkede flade som You-fanens .celle, saa et felt ser ens ud uanset
   hvor i appen man moeder det. Etiketten staar OVER feltet og i
   saetningsversal - ikke sporede versaler, som huset ikke bruger. */
.tur-felt-gruppe{margin:0 0 18px}
.tur-felt-etiket{display:block; font-size:12px; color:var(--daempet); margin:0 0 7px}
.tur-felt{
  background:var(--felt); border:1px solid var(--kant); border-radius:12px;
  padding:11px 13px;
}
.tur-felt:focus-within{border-color:var(--rav)}
.tur-felt input, .tur-felt select{
  font:inherit; background:none; border:none; padding:0; width:100%; min-width:0;
  color:var(--tekst); font-size:15px; font-weight:500;
}
.tur-felt input:focus, .tur-felt select:focus{outline:none}
.tur-felt input::placeholder{color:var(--daempet)}
.tur-to-felter{display:grid; grid-template-columns:1.7fr 1fr; gap:9px}
/* Omvendt vaegt: en dato er kort, et
   maanedsnavn er langt. "September" skal kunne staa uden at blive klippet. */
.tur-to-felter.smal-foerst{grid-template-columns:1fr 1.7fr}
.tur-felt-hint{margin:8px 0 0; font-size:12px; line-height:1.45; color:var(--daempet)}

/* ── "What is this?" - en lille opløftet boble pr. felt (8/9 2026) ────────
   "dig"- og "tal"-arkene havde foer et .tur-felt-hint-afsnit under HVERT
   felt, og paa "tal" var fem af dem et helt afsnit prosa hver - arket kunne
   ikke scannes, kun laeses forfra. Forklaringen bor nu bag en lille (i)-knap
   ved siden af etiketten: native <details>, ingen JS til selve
   aabn/luk-tilstanden (kun en klik-udenfor-lukker i forma.js, som er ren
   polering). Samme (i)-figur som resten af appens info-knapper
   (bueFlankeIkon(INFO_IKON) i forma.js), tegnet direkte som SVG her, fordi
   dette er statisk markup uden en tegnefunktion at kalde. */
.tur-felt-top{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:0 0 7px}
.tur-felt-top .tur-felt-etiket{margin:0}
.tur-info{position:relative; flex:0 0 auto}
.tur-info summary{list-style:none; display:flex; align-items:center;
  justify-content:center; width:21px; height:21px; border-radius:50%;
  border:1px solid var(--kant); color:var(--daempet); cursor:pointer}
.tur-info summary::-webkit-details-marker{display:none}
.tur-info summary:hover{color:var(--tekst); border-color:var(--daempet)}
.tur-info summary:focus-visible{outline:2px solid var(--rav); outline-offset:2px}
.tur-info[open] summary{color:var(--rav); border-color:var(--rav)}
/* "Oploeftet": en kant og en skygge, der laeser som et kort haevet over
   fladen bag den - ikke endnu en linje tekst i samme plan som resten. */
.tur-info-boble{position:absolute; right:0; top:27px; z-index:6;
  width:min(272px, 78vw); background:var(--kort); border:1px solid var(--kant);
  border-radius:12px; padding:12px 14px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.55)}
.tur-info-boble p{margin:0; font-size:12px; line-height:1.5; color:var(--daempet)}

/* Loebets tal i "Your engine" (You-fanen) - samme skjul/vis-stof som resten af
   siden, men med en hairline OVER sig, saa de laeser som en fortsaettelse af
   motoren og ikke som endnu en selvstaendig gruppe midt i den. */
.spec-skel{margin-top:14px; padding-top:14px; border-top:1px solid var(--kant-svag)}
/* En ren loeber (Cycling fravalgt) har intet ovenover #loeb-tal-felt - hairlinen
   ville ellers staa som en regel under overskriften, med ingenting at dele fra. */
#cykel-tal-felt.skjul + .spec-skel{margin-top:0; padding-top:0; border-top:none}
/* Samme regel for turens "tal"-ark, som ikke har et #cykel-tal-felt-id - se
   PLAN-motor-info-1to1.md. turOpdaterTalFelter() toggler .skjul direkte paa
   [data-t-sport="cykel"]-wrapperen. */
[data-t-sport="cykel"].skjul + .spec-skel{margin-top:0; padding-top:0; border-top:none}

/* Talfeltet paa "Do you already know your numbers?". Samme typografi som
   You-fanens .celle - 24px, vaegt 600, tabulaere cifre - saa FTP, taerskelpuls
   og makspuls ser ENS ud de to steder, de bor: her, hvor de skrives foerste
   gang, og under "Your engine", som turens trin 13 peger paa.

   KASSEN ER TALLETS BREDDE, ikke spaltens. Maalt ved 430px: You-fanens .celle er
   123px, og et talfelt i fuld bredde efterlod enheden svaevende 300px fra det
   tal, den hoerer til - tomt saa "W" ud som en loesreven etiket midt i en
   kasse. 132px giver plads til tre 24px-cifre, "bpm" og polstringen, og
   giver samme figur som You: vaerdien til venstre, enheden i hoejre kant.
   Etiketten og hintet staar i fuld spaltebredde ovenover og under. */
.tur-felt.tal{display:flex; align-items:baseline; gap:7px; max-width:132px}
.tur-felt.tal input{
  flex:1 1 auto; min-width:0; font-size:24px; font-weight:600;
  letter-spacing:-.028em; font-variant-numeric:tabular-nums;
}
.tur-felt.tal .enh{font-size:12px; color:var(--daempet); font-weight:500; flex:0 0 auto}

/* Taerskelfarten er to felter (MM, SS) + en STATISK kolon, ikke ét tekstfelt -
   se forma.js's fartFelterTilSek(). 132px blev maalt til TRE cifre + enhed
   (kommentaren lige ovenfor "Do you already know your numbers?" i index.html);
   fire cifre + en kolon oveni kraever lidt mere, saa .fart-tal alene faar en
   bredere ramme frem for at klemme de andre tre felters figur til at passe. */
.tur-felt.tal.fart-tal{max-width:152px}
.tur-felt.tal .fart-par{display:flex; align-items:baseline; gap:3px; flex:1 1 auto}
.tur-felt.tal .fart-par input{flex:0 0 auto; width:2ch; text-align:center}
.tur-felt.tal .fart-par .fart-kolon{font-size:24px; font-weight:600; color:var(--tekst)}

/* ══ ONBOARDING-COCKPIT (onboarding-cockpit.html, 19/9 2026) ═══════════════
   De ti ark 1:1 efter mock'en - se PLAN-onboarding-cockpit.md. Genbruger
   appens egne .kdial/.dials/.chips/.chip/.own/.flow/.lbl/.inf/.enheder-grid/
   .se-som-toggle - DEFINÉR DEM IKKE IGEN. Kun turens EGNE nye komponenter
   faar `tur-`-praefiks. */

/* ── Ark 1/10: vejen (velkomst + faerdig) ──────────────────────────────── */
.tur-velkomst h1, .tur-velkomst p{text-align:center}
.tur-vej{position:relative; margin:6px -16px 0; height:clamp(128px, 36vw, 170px);
  overflow:hidden}
.tur-vej-scene{position:absolute; inset:0}
.tur-vej::before, .tur-vej::after{
  content:''; position:absolute; left:0; right:0; height:22%; pointer-events:none; z-index:1;
}
.tur-vej::before{top:0; background:linear-gradient(var(--bg), transparent)}
.tur-vej::after{bottom:0; background:linear-gradient(transparent, var(--bg))}
.tur-vej-cap{position:absolute; left:16px; bottom:8px; z-index:2; font-size:11px;
  color:var(--daempet-2); pointer-events:none}
/* `.tur-side p` (0,1,1) slaar en ren klasse (0,1,0) - se filens egen advarsel
   om netop denne faelde. Kvalificeret med `.tur-side p` af samme grund. */
.tur-side p.tur-loefte{
  font-family:var(--skrift-dom); font-size:clamp(20px, 5.6vw, 24px); line-height:1.22;
  margin:2px 0 0; color:var(--tekst);
}
.tur-loefte em{font-style:italic; color:var(--rav)}
.tur-side p.tur-tid{
  display:flex; justify-content:center; gap:8px; align-items:center;
  font-size:12px; color:var(--daempet-2); margin:8px 0 0;
}
.tur-tid i{width:6px; height:6px; border-radius:50%; background:var(--rav); flex:0 0 auto}

/* ── Ark 3: dig ───────────────────────────────────────────────────────── */
.tur-navn{
  display:block; width:100%; min-width:0; margin:18px 0 14px; background:none;
  border:0; border-bottom:1px solid var(--kant-staerk); border-radius:0; outline:0;
  font-size:24px; font-weight:600; letter-spacing:-.02em; padding:0 0 6px;
  color:var(--tekst); transition:border-color .15s;
}
.tur-navn:focus{border-color:var(--rav)}
.tur-navn::placeholder{color:var(--daempet); font-weight:500}
/* Born-dial'en er en <button> her (aabner #tur-lag-foedsel), ikke en <div> -
   `.kdial{text-align:left; background:...; border:...}` daekker allerede
   fladen (forma.css) og `.kdial.stat{cursor:pointer}` findes allerede; en bar
   knap arver blot ikke skrift/farve/bredde af sig selv (forma.css har bevidst
   ingen global button-reset, se CLAUDE.md). */
button.kdial{font:inherit; color:inherit; width:100%}
.kdial .v b.tom{color:var(--daempet-2); font-weight:500}
.tur-koen{margin-top:10px}

/* ── Ark 5: dine tal ──────────────────────────────────────────────────── */
.dials + .dials{margin-top:8px}

/* ── Ark 6: fokus og maal ─────────────────────────────────────────────── */
/* Maalkortet - mock'ens .goal 1:1. */
.tur-maal{
  margin-top:18px; padding:14px; border-radius:var(--r-flise); border:1px solid var(--kant);
  background:var(--kort); display:grid; gap:10px; position:relative; overflow:hidden;
}
.tur-maal::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--rav) 14%, transparent),
    transparent 60%);
}
.tur-maal .lbl{margin:0; position:relative}
.tur-maal-to{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; position:relative}
.tur-maal input{
  min-height:48px; background:var(--bg); border:1px solid var(--kant-staerk);
  border-radius:var(--r-kontrol); padding:0 14px; font-size:15px; outline:none;
  min-width:0; width:100%; color:var(--tekst); transition:border-color .15s, box-shadow .15s;
}
.tur-maal input:focus{border-color:var(--rav); box-shadow:0 0 0 3px var(--rav-dim)}
.tur-maal input[type=date]{width:auto; padding:0 10px; color:var(--daempet); color-scheme:dark}
.tur-maal .fase-spor{position:relative}
@media (max-width:359px){
  .tur-maal-to{grid-template-columns:1fr}
  .tur-maal input[type=date]{width:100%}
}

/* ── Ark 7: udstyr ────────────────────────────────────────────────────── */
/* To fliser fylder raekken for en ren loeber (effektmaaleren skjules af
   turUdendoers()s betingelse, se turOpdaterTalFelter()) - kun i turen, appens
   egne .brikker (You/Connections) skal ikke aendre sig. */
.tur-side .brikker{grid-template-columns:repeat(auto-fit, minmax(88px, 1fr))}
/* "Watts outdoors too?" som kort - mock'ens .follow, samme figur som
   Connections' egen .follow (forma.css, "Under cockpittet"-afsnittet). Staar
   EFTER .tur-opfoelg i kaskaden og overskriver dens indrykning fuldt. */
.tur-kort-opf{margin:10px 0 0; padding:12px; border-radius:16px; background:var(--kort);
  border:1px solid var(--kant)}
.tur-kort-opf b{display:block; font-size:14px; font-weight:600; color:var(--tekst)}
.tur-kort-opf p{font-size:12px; color:var(--daempet); line-height:1.4; margin:8px 0 0}
.tur-kort-opf .se-som-toggle{margin-top:10px}

/* ── Ark 8: forbindelsen ──────────────────────────────────────────────── */
/* Fluebenet - en cirkel med et haandtegnet flueben inden i (::after bruger
   samme border-teknik som foer, blot flyttet ind i en rund baggrund). Rav som
   standard (ark 8); .tur-kvit overstyrer til groen (ark 10, se nedenfor). */
.tur-flueben{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; margin:0;
  background:var(--rav-dim); display:grid; place-items:center; position:relative;
}
.tur-flueben::after{
  content:''; width:6px; height:11px; margin-top:-2px;
  border:solid var(--rav); border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* Koen-vaelgeren: tre ord paa én raekke, ogsaa ved 320 px ("Rather not say" braekkede ellers). */
.tur-koen .se-som-knap{white-space:nowrap; font-size:13px; padding:0 4px}

/* ── Ark 9: Pro ───────────────────────────────────────────────────────── */
/* Proevepillen - mock'ens .trial (inline-flex, rav-dim baggrund, pulserende
   prik), erstatter den tidligere kort-figur. */
.tur-proeve{
  display:inline-flex; align-items:center; gap:8px; margin:12px 0 15px;
  padding:6px 12px 6px 8px; border-radius:999px; background:var(--rav-dim);
  border:1px solid color-mix(in srgb, var(--rav) 40%, transparent);
}
.tur-proeve b{font-weight:600; font-size:13px; color:var(--rav); display:inline}
.tur-proeve::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--rav); flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--rav) 22%, transparent);
  animation:tur-proeve-puls 2.4s infinite;
}
@keyframes tur-proeve-puls{
  0%, 100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--rav) 22%, transparent)}
  50%{box-shadow:0 0 0 7px transparent}
}
.tur-planer{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;
  margin:14px 0 12px}
.tur-plan{
  padding:14px 10px 10px; border-radius:18px; border:1px solid var(--kant);
  background:var(--kort); text-align:left; position:relative; cursor:pointer;
  font-family:inherit; color:var(--tekst); display:grid; gap:2px; min-width:0;
  transition:transform .2s var(--tur-fjeder), border-color .15s, background .15s;
}
.tur-plan:active{transform:scale(.97)}
.tur-plan.valgt{border-color:var(--rav); background:var(--rav-dim)}
.tur-plan-n{font-size:11px; color:var(--daempet); font-weight:600; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tur-plan-p{font-size:22px; font-weight:600; letter-spacing:-.028em; display:block;
  margin-top:4px}
.tur-plan.valgt .tur-plan-p{color:var(--rav)}
.tur-plan-u{font-size:11px; color:var(--daempet); display:block; margin-top:3px;
  line-height:1.3}
.tur-plan-spar{
  position:absolute; top:-9px; left:10px; white-space:nowrap; font-size:9.5px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px;
  border-radius:999px; background:var(--rav); color:var(--bg);
}
.tur-plan-tk{
  position:absolute; top:8px; right:8px; width:16px; height:16px; border-radius:50%;
  background:var(--rav); display:grid; place-items:center; opacity:0; transform:scale(.6);
  transition:opacity .15s, transform .2s var(--tur-fjeder);
}
.tur-plan-tk svg{width:10px; height:10px; stroke:var(--bg); fill:none; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round}
.tur-plan.valgt .tur-plan-tk{opacity:1; transform:none}
@media (max-width:359px){
  .tur-plan-p{font-size:19px} .tur-planer{gap:6px} .tur-plan{padding:13px 8px 9px}
  .tur-plan-spar{font-size:8.5px; padding:2px 6px; left:8px}
}
.tur-side p.tur-fri{font-size:13px; color:var(--daempet); line-height:1.45; margin:12px 0 0}
.tur-fri b{color:var(--tekst); font-weight:600}
/* Laaselisten - mock'ens .unlock. */
.tur-laas{margin:14px 0 20px; border:1px solid var(--kant); border-radius:18px;
  background:var(--kort); overflow:hidden}
.tur-laas div{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:10px 12px; border-top:1px solid var(--kant); font-size:13px; color:var(--tekst)}
.tur-laas div:first-child{border-top:0}
.tur-laas .ic{width:28px; height:28px; border-radius:9px; background:var(--bg);
  display:grid; place-items:center; color:var(--rav)}
.tur-laas .pro{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--rav)}

/* ── Ark 10: faerdig ──────────────────────────────────────────────────── */
/* Kvitteringen som et kort med raekker - mock'ens .receipt. */
.tur-kvit{margin:16px 0 0; border:1px solid var(--kant); border-radius:18px;
  background:var(--kort); overflow:hidden; display:block}
.tur-kvit div{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  padding:11px 12px; border-top:1px solid var(--kant); font-size:13px; color:var(--tekst)}
.tur-kvit div:first-child{border-top:0}
.tur-kvit .tur-flueben{background:color-mix(in srgb, var(--groen) 18%, transparent)}
.tur-kvit .tur-flueben::after{border-color:var(--groen)}
.tur-kvit .tur-flueben.ghost{background:var(--felt); border:1px dashed var(--kant-staerk)}
.tur-kvit .tur-flueben.ghost::after{border-color:var(--daempet-2)}
.tur-vej + .tur-tid, .tur-tid + .tur-kvit{margin-top:14px}

/* ── Turens eget bund-ark (.tur-lag) ──────────────────────────────────── */
/* Appens .ark ligger UNDER #v-tur (z-index 41 mod 60) - turen har derfor sit
   eget mønster i samme figur, maalene kopieret fra .ark-greb/.ark-top (forma.css,
   linje ~1135) og .ark selv, men med z-index 62/61 og INDE i #v-tur. */
.tur-lag{
  position:fixed; left:0; right:0; bottom:0; z-index:62; max-width:var(--spalte);
  margin:0 auto; background:var(--kort); border:1px solid var(--kant-staerk);
  border-bottom:0; border-radius:26px 26px 0 0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom)); max-height:88dvh;
  display:flex; flex-direction:column;
}
.tur-lag[hidden]{display:none}
.tur-lag-slor{position:fixed; inset:0; z-index:61; background:rgba(0,0,0,.55)}
.tur-lag-slor[hidden]{display:none}
.tur-lag-greb{width:40px; height:4px; border-radius:4px; background:var(--kant-staerk);
  margin:4px auto 12px; flex:0 0 auto}
.tur-lag-top{display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px; gap:12px; flex:0 0 auto}
.tur-lag-top h3{margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em;
  color:var(--tekst)}
.tur-lag-krop{overflow:auto; flex:1; min-height:0}
.tur-lag-krop.ana{font-size:15px; line-height:1.5; color:var(--daempet)}
.tur-lag-krop.ana b{color:var(--tekst); font-weight:600}
.tur-lag-krop.ana p+p{margin-top:10px}
.tur-lag-krop.ana ol{margin:8px 0 0; padding-left:20px}
.tur-lag-krop.ana li{margin-top:6px}
.tur-lag-fod{padding-top:12px; border-top:1px solid var(--kant); display:grid;
  grid-template-columns:1fr auto; gap:10px; align-items:center; flex:0 0 auto}
.tur-lag-fod small{font-size:12px; color:var(--daempet)}

/* FORMA's eget datovaelger: tre snappende hjul, mock'ens .wheels/.wheel. */
.tur-hjul{
  position:relative; display:grid; grid-template-columns:1fr 1.5fr 1.2fr; gap:6px;
  height:200px; margin:4px 0 8px;
}
.tur-hjul::before{
  content:''; position:absolute; left:0; right:0; top:calc(50% - 20px); height:40px;
  border-radius:12px; background:var(--rav-dim);
  border:1px solid color-mix(in srgb, var(--rav) 35%, transparent); pointer-events:none;
}
.tur-hjul-kol{
  overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; padding:80px 0;
  -webkit-mask:linear-gradient(transparent, #000 28%, #000 72%, transparent);
  mask:linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.tur-hjul-kol::-webkit-scrollbar{display:none}
.tur-hjul-kol div{
  height:40px; line-height:40px; text-align:center; scroll-snap-align:center;
  font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--daempet);
  transition:color .15s, transform .15s; user-select:none;
}
.tur-hjul-kol div.on{color:var(--rav); transform:scale(1.06)}

/* ── intervals.icu-kortet ──────────────────────────────────────────────────*/
.tur-kilde-kort{
  margin:4px 0 6px; padding:16px 17px; border-radius:16px;
  background:var(--kort); border:1px solid var(--kant);
}
.tur-kilde-hoved{display:flex; align-items:center; gap:13px}
.tur-kilde-hoved img{border-radius:10px; flex:0 0 auto}
.tur-kilde-t b{display:block; font-size:15px; font-weight:600; color:var(--tekst)}
.tur-kilde-t span{font-size:12px; color:var(--daempet)}
/* Den gamle `.tur-faar div`/`.tur-flueben` (border-flueben, 6x11) stod her til 19/9 2026 og
   overskrev onboarding-cockpittets nye regler laengere oppe (cirkel + flueben) - fundet i
   browseren som et knaekket ikon. Reglerne bor nu KUN i ONBOARDING-COCKPIT-afsnittet. */

/* Den gamle Pro-/kvitterings-CSS (2-kolonners plankort, rav-span'et i laaselisten, den
   fyldte proeve-kasse) stod her til 19/9 2026 og overskrev ONBOARDING-COCKPIT-afsnittets nye
   regler. Fundet i browseren: plankortene i to kolonner, laaselistens tekst i rav. Slettet. */
/* ══ LYSKEGLEN ════════════════════════════════════════════════════════════
   ÉT element goer begge ting: hullet er elementets egen kasse, moerket er en
   meget stor box-shadow. Derfor kan der ikke opstaa en kant mellem "daempet"
   og "loeftet" - de er samme figur, og de kan ikke komme i utakt under
   bevaegelsen. */
.tur-lys{
  position:absolute; z-index:2; pointer-events:none; border-radius:16px;
  box-shadow:0 0 0 2400px rgba(9,7,5,.80);
  outline:1px solid color-mix(in srgb, var(--rav) 55%, transparent);
  opacity:0;
  transition:top .62s var(--tur-fjeder), left .62s var(--tur-fjeder),
             width .62s var(--tur-fjeder), height .62s var(--tur-fjeder),
             opacity .3s ease;
}
.tur-lys[data-tur-vis="1"]{opacity:1}
/* Uden et maal at loefte (fx en Free-bruger, hvis Today-kort er laast, saa
   elementet slet ikke staar paa skaermen) daemper vi hele fladen i stedet for
   at pege paa ingenting. */
.tur-lys[data-tur-vis="flade"]{
  opacity:1; inset:0; width:auto; height:auto; border-radius:0;
  outline:none; box-shadow:none; background:rgba(9,7,5,.80);
  transition:opacity .3s ease;
}

/* ══ TURENS KORT ══════════════════════════════════════════════════════════
   Det ENESTE indrammede i maerke-tilstand. Naar noget FAAR en ramme i dette
   hus, betyder rammen noget - her: "det her er turens stemme, ikke appens".
   Ligger LAVT, saa det aldrig daekker dét, det taler om. */
.tur-kort{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
  max-width:calc(var(--spalte) - 24px); margin:0 auto;
  background:color-mix(in srgb, var(--kort-2) 96%, transparent);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--kant-staerk); border-radius:24px; padding:18px 19px 15px;
  transform:translateY(130%); opacity:0;
  transition:transform .5s var(--tur-fjeder), opacity .35s ease;
  padding-bottom:calc(15px + env(safe-area-inset-bottom));
}
.tur-kort[data-tur-vis="1"]{transform:none; opacity:1}
.tur-kort-hoved{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.tur-kort-tal{font-size:11px; color:var(--daempet);
  font-variant-numeric:tabular-nums}
.tur-kort h2{margin:0 0 7px; font-size:19px; font-weight:600; letter-spacing:-.02em;
  line-height:1.2; color:var(--tekst)}
.tur-kort p{margin:0; font-size:13px; line-height:1.55; color:var(--daempet)}
.tur-kort p b{color:var(--tekst); font-weight:600}
/* Teksten krydsfader ved skift; lyskeglen bevaeger sig. To bevaegelser, ét
   oejeblik. */
.tur-kort-tekst{animation:tur-skift .38s var(--tur-fjeder)}
@keyframes tur-skift{from{opacity:0; transform:translateY(6px)}}
.tur-kort-fod{display:flex; align-items:center; gap:14px; margin-top:15px}
.tur-kort-tilbage, .tur-kort-spring{font-size:12px; padding:6px 0; flex:0 0 auto}
.tur-kort-tilbage[hidden]{display:none}
.tur-kort-videre{
  margin-left:auto; width:auto; flex:0 0 auto; padding:11px 22px;
  border-radius:11px; font-size:13px;
}
/* Fri faar INGEN farve. Det gratis er grundtilstanden og skal ikke baere et
   klistermaerke - saa kun Pro lyser, og forskellen mellem de to trin bliver
   til at se paa tvaers af rummet. */
.tur-tier{font-size:11px; font-weight:600; letter-spacing:.02em; margin-left:auto}
.tur-tier.pro{color:var(--rav)}
.tur-tier.fri{color:var(--daempet); font-weight:500}

/* ══ BEKRAEFTELSEN ════════════════════════════════════════════════════════*/
.tur-bekraeft{position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end}
.tur-bekraeft[hidden]{display:none}
.tur-bekraeft-slor{position:absolute; inset:0; background:rgba(9,7,5,.72)}
.tur-bekraeft-ark{
  position:relative; width:100%; max-width:calc(var(--spalte) - 24px);
  margin:12px auto; padding:22px 22px 18px; border-radius:20px;
  background:var(--kort); border:1px solid var(--kant);
  animation:tur-op .45s var(--tur-fjeder);
  margin-bottom:calc(12px + env(safe-area-inset-bottom));
}
@keyframes tur-op{from{transform:translateY(30px); opacity:0}}
.tur-bekraeft-ark h3{margin:0 0 8px; font-size:19px; font-weight:600;
  letter-spacing:-.02em; color:var(--tekst)}
.tur-bekraeft-ark p{margin:0 0 18px; font-size:13px; line-height:1.55;
  color:var(--daempet)}
.tur-bekraeft-ark p b{color:var(--tekst); font-weight:600}
.tur-bekraeft-knapper{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.tur-bekraeft-knapper .knap{padding:13px; font-size:13px; border-radius:12px}

/* ── You-cockpittets kontorækker (.own, se YOU-COCKPITTET nederst) ─────────
   .tur-genaabn/.tur-genaabn-pil/.release-hoejre (den tidligere raekke-figur)
   er vaek 19/9 2026 - kontorækkerne er nu .own-knapper som Today's "The next
   two weeks". .tur-genaabn-u og .release-nr staar tilbage: begge klasser
   bruges STADIG i markuppen (undertekst-linjen paa to af de fire raekker,
   hhv. udgivelsestallet), blot inde i en .own i stedet for en .tur-genaabn. */
.tur-genaabn-u{display:block; font-size:12px; color:var(--daempet); margin-top:2px; font-weight:400}
.release-nr{font-size:12px; color:var(--daempet); font-variant-numeric:tabular-nums;
  border:1px solid var(--kant); border-radius:999px; padding:2px 8px; line-height:1.35}
.release-nr:empty{display:none}

/* ══ HVOR ER JEG, OG ER DET MINE TAL? ═══════════════════════════════════════
   To spoergsmaal, som spotlight-trinnene lod staa ubesvarede: lyskeglen viste
   HVAD der blev peget paa, men ikke hvilken fane det bor paa - og fra 6/9 2026
   er tallene bagved en eksempelrytters, ikke brugerens egne.

   Svaret er ét element og ét greb, ikke to nye flader: striben oeverst paa
   turens kort siger begge dele med ord, og bundmenuen bliver staaende OPLYST
   under moerket, saa fanen ogsaa kan ses paa sin plads. De to bindes sammen af
   farven - fanenavnet paa kortet og den aktive fane i menuen staar i samme rav
   - saa de laeses som ét udsagn frem for som to. */
.tur-kort-stribe{
  display:flex; align-items:center; gap:12px;
  /* Ud til kortets egen kant: striben er en DEL af kortet, ikke en etiket
     lagt oven paa det. De negative marginer ophaever .tur-kort's polstring
     praecis, saa hjoernerne flugter med rammen. */
  margin:-18px -19px 14px; padding:9px 19px;
  border-bottom:1px solid var(--kant); border-radius:20px 20px 0 0;
  background:color-mix(in srgb, var(--rav) 7%, transparent);
  font-size:11px;
}
/* Prikken frem for et ikon: markeringen skal kunne laeses paa et halvt sekund
   og maa ikke tage opmaerksomhed fra det, kortet peger paa. */
.tur-kort-proeve{display:inline-flex; align-items:center; gap:7px; color:var(--daempet)}
.tur-kort-proeve::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--daempet); flex:0 0 auto;
}
.tur-kort-proeve[hidden]{display:none}
.tur-kort-fane{margin-left:auto; color:var(--rav); font-weight:600}

/* MENUEN LAA ALDRIG OPPE, selvom den her har staaet med z-index 61 mod turens
   60 siden 6/9. `#v-app` har `isolation:isolate` (den findes for spaltekanten,
   se `#v-app::before` laengere oppe), og en stakkontekst FANGER sine boern: en
   z-index 61 inde i den kan ikke naa over `#v-tur`, som ligger paa 60 i ROD-
   konteksten. Menuen laa derfor under lyskeglens 80 % moerke hele tiden.
   Maalt paa den koerende app, samme trin, tre gange:

       med .tur-loeftet   menubund rgb(11,10,7)   aktiv fane rgb(55,40,16)
       uden .tur-loeftet  menubund rgb(11,10,7)   aktiv fane rgb(55,53,50)
       med isolation:auto menubund rgb(22,19,15)  aktiv fane rgb(240,169,59)

   Foerste og anden raekke har SAMME menubund - og den er identisk med den
   daempede hovedflade bagved. Klassen flyttede altsaa intet af det, den blev
   skrevet for. Kun tredje raekke er den rigtige rav.

   Isolationen slaas derfor fra, mens turen viser. `#v-app` er kun
   `position:relative` uden z-index og danner INGEN stakkontekst af sig selv,
   saa naar `isolation` er `auto`, gaelder menuens 61 mod turens 60 rigtigt.
   Prisen er, at spaltekanten (`#v-app::before`, z-index 5) i de sekunder
   ligger UNDER moerket sammen med resten af appen. Det er den rigtige side at
   tabe paa: kanten hoerer til appen, og appen er daempet. */
#v-app.tur-viser{isolation:auto}

/* Menuen er en flydende pille (se nav::after): under turen er det PILLEN, der
   bliver naesten uigennemsigtig med en ravfarvet kant, og moerkningen under
   den (nav::before) slukkes - den ville blot laegge sig oven paa moerket. */
/* Den loeftede menu er KUN til at se paa (9/10 2026, brugerens iPhone): resten af
   appen er uklikbar under turen, men menuen laa over moerket og skiftede fane midt
   i et trin. Og naar "Skip the tour?" staar aaben (#tur-bekraeft ligger i turens
   lag, z 60), daekkede menuen (61) arkets knapper - saa lagt under turen dér. */
nav.tur-loeftet{z-index:61; pointer-events:none}
html:has(#tur-bekraeft:not([hidden])) nav.tur-loeftet{z-index:59}
nav.tur-loeftet::after{
  background:color-mix(in srgb, var(--bg) 99%, transparent);
  border-color:color-mix(in srgb, var(--rav) 45%, var(--kant));
  box-shadow:0 18px 44px rgba(9,7,5,.62);
}
nav.tur-loeftet::before{display:none}

/* ── FOKUSTRAEK ───────────────────────────────────────────────────────────
   Turen laaner et kamera-greb, fordi den allerede ER et: lyskeglen peger, og
   her stiller menuen skarpt. Den fane, trinnet handler om, staar i fokus -
   de fem andre er UDE af fokus, ikke bare daempede.

   Slorringen frem for endnu en daempning er det, brugeren bad om, og den er
   ogsaa den rigtige: menuen ligger allerede i fuldt lys over moerket, saa en
   daempning ville skulle kaempe mod den belysning, der lige er vundet. En
   uskarphed konkurrerer ikke med lys - den fjerner laeselighed, og oejet
   springer selv til det ene ord, der kan laeses.

   1,9px er maalt paa 13px-skriften: ordene er stadig genkendelige som ord (de
   er turens stedsangivelse, ikke stoej), men ingen af dem kan laeses i et
   oejekast. Hoejere, og menuen bliver til en graa stribe.

   Overgangen er ikke pynt: den svarer paa trinskiftet. Fokus glider fra den
   gamle fane til den nye i samme oejeblik, som lyskeglen flytter sig, saa de
   to bevaegelser laeses som ét udsagn. Slukket under reduced-motion. */
nav.tur-loeftet button{
  pointer-events:none; /* nav button saetter selv pointer-events:auto - se nav.tur-loeftet */
  filter:blur(1.9px); opacity:.42;
  transition:filter .42s var(--tur-fjeder), opacity .42s ease, color .42s ease;
}
nav.tur-loeftet button.aktiv{filter:none; opacity:1; color:var(--rav)}
/* Under turen beholder den aktive fane den glidende tommel (19/9 2026, pillen).
   Foer havde turen sin egen korte streg paa overkanten og skjulte tommelen -
   en pille har ingen overkant at saette en streg paa, og tommelen siger
   allerede "her er du" paa samme sted som lyskeglen. */
/* Det radiale lysudfald under ordet (fra stregen paa overkanten) fulgte med
   stregen ud: tommelen er allerede en oplyst flade bag fanen, og et udfald fra
   pillens top ville lyse fra et punkt, hvor der intet er. */
/* Ét blink paa den fane, turen lige er skiftet TIL - bevaegelsen svarer paa
   trinskiftet frem for at pynte, og kun naar fanen faktisk skiftede. */
@keyframes tur-fane-puls{45%{transform:translateY(-2px)}}
nav.tur-loeftet button.tur-puls{animation:tur-fane-puls .5s var(--tur-fjeder)}

/* Kortet loeftes op OVER menuen. Hoejden maales i turNavLoeft() frem for at
   staa som et tal her: menuen er hoejere med sikkerhedszone og lavere under
   360px, hvor bade polstring og skriftgrad trimmes.
   Safe-area-polstringen i .tur-kort er samtidig unoedvendig, saa laenge
   menuen staar under kortet og selv baerer den - se .tur-kort ovenfor. */
.tur-kort{bottom:calc(12px + var(--tur-nav-h, 0px)); padding-bottom:15px}

/* HEADEREN HOLDER OP MED AT KLAEBE under turen. `.app-top` er `sticky`, saa den
   lagde sig oven paa toppen af lyskeglen: paa "Capacity, sleep, load" laa selve
   tallet under headeren, og det, trinnet peger paa, begyndte dermed uden for
   sin egen boks. Reglen frigiver samtidig headerens hoejde til lyskeglen.
   HOEJDEN STAAR IKKE LAENGERE SOM ET TAL HER: den var 63px indtil 12/9 2026,
   hvor de tre knapper blev piller med ord paa deres egen raekke og gjorde
   headeren hoejere. Reglen herunder er hoejde-uafhaengig og skal blive det -
   skriv aldrig maalet ind igen. */
#v-app.tur-viser .app-top{position:static}
/* Laget er position:absolute og ville med en static-forælder lægge sig over
   hele siden. Under turen står headeren øverst i dokumentet på sidens egen
   farve, så laget er ikke nødvendigt dér. Turens header-trin (sticky igen,
   nedenfor) har en positioneret forælder og får det tilbage. */
#v-app.tur-viser .app-top::before{display:none}
#v-app.tur-viser.tur-topmaal .app-top::before{display:block}
/* ...MEN TILBAGE IGEN paa det trin, der peger PAA headeren (You-skiven, turens
   sidste trin). `static` findes for at headeren ikke skal laegge sig oven paa
   et maal inde i `main` - og den grund gaelder ikke, naar maalet ER headeren.
   Uden denne undtagelse ruller headeren vaek med dokumentet, og turen kan komme
   til at pege paa en header, der ikke er paa skaermen (fundet paa brugerens
   telefon 13/9 2026). Klassen saettes af lysPaa(), som ogsaa laegger keglen fra
   den faktiske rect i stedet for fra en udregnet dokumentplads.
   `z-index:2` bliver aktiv igen her, og det er tjekket: turens overlay er 60,
   saa headeren daempes stadig og lyses kun op i keglens hul. */
#v-app.tur-viser.tur-topmaal .app-top{position:sticky}

/* Zoomet skaleres om TOPPEN og midten, saa maalets oeverste kant bliver staaende
   dér, hvor lysPaa() lige har rullet den hen - et zoom om midten ville flytte
   den, hver gang skalaen aendrede sig. Selve skalaen saettes fra turSaetZoom();
   der er BEVIDST ingen overgang paa den: lysPaa() maaler rect'en umiddelbart
   efter, og en transition ville give den vaerdien, bevaegelsen BEGYNDTE paa. */
#v-app.tur-viser main{transform-origin:50% 0}

/* PLADS I BUNDEN, SAA ETHVERT MAAL KAN RULLES FRI AF TURKORTET (20/9 2026).
   lysPaa() klemmer sin rulning til `scrollHeight - innerHeight`. Ligger maalet
   taet paa dokumentets bund, raekker den ikke: maalet bliver liggende bag
   kortet, `bund` bliver mindre end `top`, og keglen falder til sit gulv paa
   44px. Set paa en telefon paa trin 7, hvor #rail-rul stod som en strimmel helt
   bag kortet. Variablen saettes af lysPaa() og er kortets hoejde + luft. */
#v-app.tur-viser main{padding-bottom:var(--tur-bundluft, 0px)}

/* SIDEN KAN IKKE RULLES AF BRUGEREN paa et spotlight-trin. Lyskeglen ligger
   fast i viewporten (`#v-tur` er `position:fixed`), mens dens tal er regnet af
   maalets plads i DOKUMENTET - ruller man selv bagefter, staar kassen tilbage
   om noget helt andet end det, kortet taler om. Fundet af brugeren paa trin 1.

   `overflow:hidden` kan ikke bruges: turen ruller SELV (lysPaa), og paa iOS
   Safari stopper reglen alligevel ikke en finger. `touch-action` slaar
   panoreringen fra ved kilden og roerer ikke `window.scrollTo`.

   `pinch-zoom` og ikke `none`: zoom skal blive - en tur, der tager forstoerrelse
   fra den, der har brug for den, er en daarlig byttehandel for en laas.
   Hjul, tastatur og en browser, der ignorerer touch-action, tages af
   turBlokerRul() i forma.js. */
html.tur-laast{touch-action:pinch-zoom; overscroll-behavior:none}

/* Appen er ULAESELIG SOM KNAP, mens eksempeldataene staar. Lyskeglen har
   pointer-events:none, saa et tryk gaar igennem til appen bagved - og et tryk
   paa "Save" dér ville gemme et opdigtet tal paa en rigtig konto. api() afviser
   allerede enhver skrivning; her kan der slet ikke trykkes. */
#v-app.tur-demo{pointer-events:none}

/* ── Referral-dashboardet (Etape 4 af referral-planen, spec §8) ──────────
   Egen skaerm (#s-referral), samme skaerm-i-fane-moenster som den gamle
   "tid"-skaerm brugte: You forbliver markeret i nav'en, se visFane()s
   "referral"-saerregel i forma.js. Ingen ny farvesemantik - identitetens
   ikoner er de allerede eksisterende .founder-badge/.creator-badge, tallene
   bruger .maalinger/.maal-tal-typografien, og fremdriftsbjaelken er den
   samme .spor.maal-spor som maalkortets procentbjaelke. */
.referral-identitet{display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--daempet)}
.referral-identitet .founder-badge, .referral-identitet .creator-badge{
  width:16px; height:16px; margin-left:0}
.referral-kode{font-family:var(--skrift-display); font-size:24px;
  font-weight:700; letter-spacing:.05em; font-variant-numeric:tabular-nums;
  margin:12px 0 2px}
.referral-link{font-size:12px; color:var(--daempet); word-break:break-all}
/* QR-koden under Copy/Share (static/vendor/qrcode.min.js). Hvid flade, saa den
   scannes paa en moerk skaerm; SVG'en er skalerbar og holdes under 180 px. */
.referral-qr{margin-top:12px; width:100%; max-width:180px; padding:6px;
  background:#fff; border-radius:var(--r-kontrol); box-sizing:border-box}
.referral-qr svg{display:block; width:100%; height:auto}
/* Referral-skaermen som KORT (8/10 2026, brugeren: "ligner noget der er loegn").
   Linket er helten: koden stort, Share (rav) foerst, én linje om hvad vennen faar
   og hvad du tjener, QR foldet ind. Tallene staar i én raekke, indtjeningen med
   denne maaned stort. Samme flade, radius og kant som Plans ugekort. */
.ref-kort{margin-top:14px; padding:16px; border-radius:var(--r-flise); background:var(--kort); border:1px solid var(--kant)}
.ref-kort h3{margin:0 0 12px; font-size:15px; font-weight:600}
.ref-helt{background:radial-gradient(120% 120% at 100% 0, var(--rav-dim) 0, transparent 55%), var(--kort);
  border-color:color-mix(in srgb, var(--rav) 30%, var(--kant))}
.ref-etiket{font-size:12px; color:var(--daempet); letter-spacing:.06em; text-transform:uppercase}
.ref-helt .referral-kode{font-size:34px; letter-spacing:.04em; margin:6px 0 2px; line-height:1.05; overflow-wrap:anywhere}
.ref-knapper{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; margin-top:14px}
.ref-knapper .knap{min-height:46px}
.ref-knapper .knap.rav{background:var(--rav); color:var(--paa-rav)}
#referral-svar:empty{display:none}
#referral-svar{margin-top:8px}
.ref-loefte{margin:12px 0 0; font-size:14px; line-height:1.45; color:var(--daempet)}
.ref-loefte b{color:var(--tekst)}
.ref-qr-fold{margin-top:10px}
.ref-qr-fold summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--rav); list-style:none; padding:6px 0}
.ref-qr-fold summary::-webkit-details-marker{display:none}
.ref-qr-fold .referral-qr{margin-top:6px}
.ref-tal-raekke{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px}
.ref-tal{display:flex; flex-direction:column; gap:3px; min-width:0}
.ref-tal b{font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
.ref-tal span{font-size:12px; color:var(--daempet); line-height:1.25}
.ref-note{margin:10px 0 0}
.ref-stor{display:flex; align-items:baseline; gap:8px}
.ref-stor b{font-size:34px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1}
.ref-stor span{font-size:13px; color:var(--daempet)}
.ref-smaa{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--kant)}
.ref-smaa div{display:flex; justify-content:space-between; gap:8px; font-size:13px}
.ref-smaa span{color:var(--daempet)}
.ref-smaa b{font-weight:600; font-variant-numeric:tabular-nums}
.ref-trin{margin-top:16px}
.ref-trin-top{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--daempet); margin-bottom:8px}
.ref-trin-top b{color:var(--tekst)}
.ref-fold{margin-top:14px}
@media (max-width:359px){ .ref-smaa{grid-template-columns:1fr} .ref-tal b{font-size:22px} }

@media (prefers-reduced-motion: reduce){
  .tur-lys{transition:opacity .2s ease}
  .tur-kort{transition:opacity .2s ease}
  .tur-kort[data-tur-vis="1"], .tur-kort[data-tur-vis="0"]{transform:none}
  .tur-skinne i{transition:none}
  .tur-side:not(.skjul) .tur-traed > *,
  .tur-kort-tekst, .tur-bekraeft-ark{
    animation:none;
  }
  .tur-maerke-stor .logo-maerke path{animation:none; stroke-dashoffset:0}
  .tur-ark.tur-har-mere .tur-rul-vink{animation:none}
  nav.tur-loeftet button.tur-puls{animation:none}
  /* Fokustraekket BLIVER - det er ikke bevaegelse, det er en tilstand. Kun
     glidningen mellem to faner slukkes, saa skiftet sker paa ét billede. */
  nav.tur-loeftet button{transition:none}
}

/* ══ MAKEOVER (13/9 2026) — flisen, ringen, rytmen ══════════════════════════
   Kontrakten er docs/mockups/makeover/ (mock.css + skaermene). Reglerne her er
   NYE klasser til det, der ikke fandtes foer: bento-gitteret paa Today, ringen,
   maalerne med et maerke, og de smaa "aabn/luk"-fliser. Alt, der allerede havde
   en klasse, er restylet PAA STEDET laengere oppe i filen. */
.bento{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:8px 0 0}
.flise{
  position:relative; background:var(--kort); border:1px solid var(--kant);
  border-radius:var(--r-flise); padding:14px 14px 12px; min-height:118px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  text-align:left; font:inherit; color:inherit; cursor:default;
  transition:transform .2s var(--fjeder), background .2s;
}
.flise[data-fold]{cursor:pointer}
.flise[data-fold]:active{transform:scale(.975); background:var(--kort-2)}
.flise.w2, .bento > .w2{grid-column:span 2}
.flise.helt{border-radius:var(--r-helt); min-height:180px; padding:18px 18px 14px;
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--daggry, var(--z3)) 26%, transparent), transparent 60%),
    var(--kort)}
.flise.laast{opacity:.7}
.flise-lbl{font-size:12px; color:var(--daempet); display:flex; justify-content:space-between;
  align-items:center; gap:6px; min-width:0}
.flise-lbl > span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.flise-lbl svg{width:14px; height:14px; flex:0 0 14px; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.7}
.flise-tal{font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1; margin-top:8px;
  font-variant-numeric:tabular-nums}
.flise-tal small{font-size:14px; font-weight:500; color:var(--daempet); letter-spacing:0; margin-left:3px}
.flise-fod{font-size:12px; color:var(--daempet); margin-top:10px; line-height:1.35}
.flise-fod b{color:var(--tekst); font-weight:600}
.flise[data-fold] .flise-fod{padding-right:26px}
.flise-mere{position:absolute; right:12px; bottom:10px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--kant-staerk); display:grid; place-items:center; color:var(--daempet-2);
  transition:transform .25s var(--fjeder)}
.flise-mere svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.flise.aaben .flise-mere{transform:rotate(180deg); color:var(--rav); border-color:var(--rav)}
.flise-detalje{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ud)}
.flise.aaben .flise-detalje{grid-template-rows:1fr}
.flise-detalje > div{overflow:hidden; font-size:13px; color:var(--daempet); line-height:1.45}
.flise-detalje > div > *:first-child{padding-top:10px; border-top:1px solid var(--kant); margin-top:10px}
.flise-detalje .maaling-note, .flise-detalje .spor-note{font-size:13px}
.flise-detalje .forklar{margin:8px 0 0}
.flise-detalje .forklar summary{padding:0}
/* Helten: ringen til hoejre, ordet og saetningen til venstre. */
.helt-raekke{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.helt-tekst{min-width:0; flex:1 1 auto}
.helt-tekst p{font-size:13px; color:var(--daempet); line-height:1.45; margin:10px 0 0; max-width:24ch}
/* Dommen inde i flisen (13/9 2026, flyttet fra #dagsdom oeverst paa Today).
   Samme serif som foer, men i flisens tekstspalte ved siden af ringen - saa
   mindre end de 23-28px, den havde som fritstaaende helt. Selektoren skal slaa
   .helt-tekst p ovenfor (0,1,1), derfor to klasser. */
.helt-tekst .dagsdom-helt{font-family:var(--skrift-dom); font-weight:400;
  font-size:clamp(16px, 4.6vw, 19px); line-height:1.3; letter-spacing:-.005em;
  color:var(--tekst); margin:10px 0 0; max-width:none; text-wrap:pretty}
/* Herkomsten bag folden: taet under forklaringen, ingen bundmargin - folden
   har sin egen luft. */
.flise-detalje .dom-kilde{margin:6px 0 0}
/* Free's tilbudsknap i helteflisen: under raekken, taet paa saetningen. */
.helt-tilbud{margin:12px 0 0}
.tilstand{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:15px;
  background:none; border:none; padding:0; font-family:inherit; cursor:pointer; text-align:left;
  color:var(--tekst)}
.tilstand i{width:9px; height:9px; border-radius:50%; background:currentColor; flex:0 0 auto;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 22%, transparent)}
.tilstand.groen{color:var(--z2)} .tilstand.gul{color:var(--z3)} .tilstand.roed{color:var(--z4)}
.tilstand.top{color:var(--top)}
.tilstand.top i{box-shadow:0 0 0 4px color-mix(in srgb, currentColor 26%, transparent), 0 0 10px 2px color-mix(in srgb, currentColor 55%, transparent)}
.tilstand.daempet{color:var(--daempet)}
.tilstand .hvor-info-ikon{width:14px; height:14px; margin-left:2px; color:var(--daempet)}
/* Ventetilstand for Capacity-ringen (21/9 2026, PLAN-ventetilstand-natten.md): natten er
   ikke landet, saa der er ingen score at tegne. Sproget er laant fra kropsdial'ernes egen
   ventetilstand (nat-aande-animationen). */
.ring.venter .ring-bue{opacity:0}
.ring.venter .ring-skinne{stroke-dasharray:4 6; animation:nat-aande 3.2s ease-in-out infinite}
.ring.venter .ring-midt b{color:var(--daempet-2)}
/* Ordet er DAEMPET, ikke hvidt: en ventetilstand er ikke en dom, og den maa ikke
   raabe lige saa hoejt som de to fakta i serif-saetningen under den. Prikken arver
   farven (background:currentColor paa .tilstand i), saa de to foelges ad - foer
   21/9 2026 stod ordet i fuld --tekst med en daempet prik ved siden af. */
.tilstand.venter{color:var(--daempet-2)}
.tilstand.venter i{animation:nat-aande 3.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ .tilstand.venter i{animation:none} }
@media (prefers-reduced-motion: reduce){ .ring.venter .ring-skinne{animation:none} }
/* Ringen. r=42 i en 100-boks; omkredsen (263,9) saettes af animerBuer(). */
.ring{position:relative; width:96px; height:96px; flex:0 0 auto}
.ring.stor{width:132px; height:132px; margin:-4px -4px 0 0}
.ring svg{width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.ring circle{fill:none; stroke-width:8; stroke-linecap:round}
.ring .ring-skinne{stroke:var(--skinne-2)}
.ring .ring-bue{stroke:var(--daggry, var(--z3)); stroke-dasharray:264; stroke-dashoffset:264;
  transition:stroke-dashoffset 1.2s var(--ud)}
/* Weekly 75+: buen lyser (10/10 2026). */
.ring.top .ring-bue{filter:drop-shadow(0 0 4px color-mix(in srgb, var(--top) 70%, transparent))}
.ring-midt{position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1}
.ring-midt b{font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ring.stor .ring-midt b{font-size:34px}
.ring-midt small{font-size:11px; color:var(--daempet); margin-top:3px}
.ring .laas-ikon{width:16px; height:16px; margin:0 auto}
/* Form-helten (formHeltFlise(), 14/9 2026): femtrins-ringen og dens trin-navne -
   se PLAN-uden-soevntracker.md. */
.ring.trinring circle{stroke:var(--skinne-2)}
.ring.trinring circle.paa{stroke:var(--daggry)}
.ring.stor.trinring{width:100px; height:100px}
.ring.stor.trinring .ring-midt b{font-size:28px}
.trin-navne{display:flex; justify-content:space-between; font-size:11px; color:var(--daempet-2);
  margin-top:12px; gap:4px}
.trin-navne span.paa{color:var(--daggry); font-weight:600}
.flise.helt .lag{margin-top:12px}
.flise.helt .lag + .maaling-note{margin-top:14px}
.flise.helt .flise-detalje .maaling-note + .maaling-note{margin-top:8px}
/* "Next hard day"-flisens dagraekke (haardDagFlise()). */
.haard-dage{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:12px;
  font-size:11px; color:var(--daempet-2); text-align:center}
.haard-dage i{display:block; height:6px; border-radius:6px; background:var(--skinne-2); margin-bottom:4px}
.haard-dage .h i{background:var(--z4)}
.haard-dage .planlagt i{background:transparent; box-shadow:inset 0 0 0 1.5px var(--z4)}
.haard-dage .nu{color:var(--rav); font-weight:600}
/* Soevn-teaseren (soevnTeaser()): rolig, ingen maerkenavne, ingen tal der ligner
   data - kun tomme spor for det, der kommer til. */
.soevn-teaser{position:relative; margin-top:10px; border-radius:var(--r-flise); padding:14px 14px 12px;
  border:1px dashed var(--kant-staerk);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--z1) 16%, transparent), transparent 60%),
    var(--felt);
  overflow:hidden}
.st-hoved{display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center}
.st-ikon{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--z1);
  background:color-mix(in srgb, var(--z1) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--z1) 35%, transparent)}
.st-ikon svg{transform:translate(1.5px,1.5px)}
.st-hoved b{display:block; font-weight:600; font-size:14px}
.st-hoved span{display:block; font-size:12px; color:var(--daempet); line-height:1.4; margin-top:1px}
.st-luk{background:none; border:none; font-family:inherit; padding:0; cursor:pointer;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:var(--daempet-2); align-self:start; margin:-4px -4px 0 0}
.st-spoegelser{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px}
.st-spoegelser>div{border:1px solid var(--kant); border-radius:14px; padding:9px 10px 10px;
  background:color-mix(in srgb, var(--kort-2) 70%, transparent)}
.st-spoegelser small{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--daempet)}
.st-spoegelser i{display:block; height:5px; border-radius:5px; margin-top:9px;
  background:repeating-linear-gradient(90deg, var(--skinne-2) 0 6px, transparent 6px 10px)}
.st-spoegelser i.st-kort{width:62%}
.st-fod{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:11px;
  font-size:12px; color:var(--daempet-2)}
.st-fod span{text-wrap:pretty}
.st-link{background:none; border:none; font-family:inherit; padding:0; cursor:pointer;
  color:var(--rav); font-weight:500; white-space:nowrap}
/* "Your sleep is already here" (soevnTilbud(), 10/10 2026; stjernerne KUN i det tomme
   hoejre hjoerne over titlen - midt i teksten lignede de tegnsaetning): et nej til soevntracker,
   men naetterne kommer ind. Kortet er en nattehimmel - det ENE sted paa Today, hvor
   soevnens farve (--zone1) fylder - med rytterens rigtige nat som det store tal.
   Stjernerne er ren CSS og staar stille ved prefers-reduced-motion. */
.soevn-tilbud{position:relative; margin-top:10px; border-radius:var(--r-flise); padding:14px 16px 16px;
  overflow:hidden; isolation:isolate;
  border:1px solid color-mix(in srgb, var(--zone1) 38%, transparent);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--zone1) 30%, transparent), transparent 58%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--zone7) 20%, transparent), transparent 60%),
    var(--kort);
  box-shadow:0 10px 30px -14px color-mix(in srgb, var(--zone1) 55%, transparent);
  animation:sb-ind .6s var(--ud) both}
.soevn-tilbud::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.85;
  background:
    radial-gradient(1.2px 1.2px at 66% 9%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 74% 21%, #fff 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 83% 13%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 90% 26%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 70% 30%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 94% 5%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 79% 34%, #fff 60%, transparent 61%);
  animation:sb-tindre 4.5s ease-in-out infinite alternate}
@keyframes sb-tindre{from{opacity:.35} to{opacity:.9}}
@keyframes sb-ind{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.sb-top{display:flex; align-items:center; gap:10px}
.sb-ikon{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--zone1) 85%, #fff), var(--zone1) 55%, color-mix(in srgb, var(--zone1) 60%, #000));
  box-shadow:0 0 0 5px color-mix(in srgb, var(--zone1) 16%, transparent), 0 0 22px 2px color-mix(in srgb, var(--zone1) 55%, transparent)}
.sb-ikon svg{transform:translate(1px,1px)}
.sb-kilde{font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--zone1);
  padding:4px 9px; border-radius:999px; background:color-mix(in srgb, var(--zone1) 14%, transparent)}
.sb-luk{margin-left:auto; background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--daempet-2)}
.sb-titel{margin:14px 0 0; font-size:21px; line-height:1.15; font-weight:600; letter-spacing:-.015em; text-wrap:balance}
.sb-tekst{margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--daempet); text-wrap:pretty}
.sb-nat{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:14px;
  padding:11px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--kort-2) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--zone1) 22%, transparent)}
.sb-nat small{font-size:12px; color:var(--daempet)}
.sb-nat b{font-size:28px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.sb-nat b span{font-size:15px; font-weight:500; color:var(--daempet); margin-left:1px}
.sb-knapper{display:flex; align-items:center; gap:14px; margin-top:14px}
.sb-knapper .knap{flex:1 1 auto}
.sb-aldrig{flex:0 0 auto; background:none; border:none; padding:10px 2px; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:500; color:var(--daempet); white-space:nowrap}
.soevn-tilbud .lille:empty{display:none}
/* Tak: kortet loefter sig og falmer, foer Today tegnes med soevnen. */
.soevn-tilbud.tak{animation:sb-tak .42s var(--ud) forwards}
@keyframes sb-tak{to{opacity:0; transform:translateY(-6px) scale(.98)}}
@media (prefers-reduced-motion: reduce){
  .soevn-tilbud, .soevn-tilbud::before, .soevn-tilbud.tak{animation:none} }
/* Maaler med maerke: sporet er 6px, maerket rager ud over det. */
.flise .spor{height:6px; border-radius:6px; background:var(--skinne-2); margin:12px 0 0; overflow:visible}
.flise .spor .fyld{border-radius:6px; transition:width 1.1s var(--ud); animation:none}
.flise .spor .maal-maerke{top:-4px; bottom:-4px}
/* Form-trioen (Base / Fatigue / Form) inde i en flise. */
.flise .lag{margin-top:10px; gap:8px}
.flise .lag-r{grid-template-columns:auto 1fr auto; gap:8px 12px}
.flise .lag-n{font-size:13px}
.flise .lag-spor{height:5px; border-radius:5px; background:var(--skinne-2); overflow:hidden}
.flise .lag-spor i{transition:width 1.1s var(--ud)}
.flise .lag-v{min-width:32px; font-size:15px}
.flise .form-linje{margin-top:2px; padding-top:0; border-top:none}
/* Form-raekkens bjaelke (mockup'en): fyldet gaar ud fra MIDTEN - til venstre
   og varm, naar formen er negativ, til hoejre og koelig, naar den er positiv -
   og en haarfin streg staar paa nul. Skalaen er den samme som Base/Fatigue,
   halvdelen af sporet til hver side. */
.flise .form-spor{position:relative; overflow:hidden}
.flise .form-spor .form-fyld{left:50%}
.flise .form-spor .form-fyld.neg{left:auto; right:50%}
.flise .form-spor .form-midt{left:50%; width:1px; background:var(--daempet-2); transition:none}
.flise[data-fold] .lag{padding-right:26px}
/* Maalflisen: navn, to store tal, fasen til hoejre, en tynd fremdriftsbjaelke. */
.flise.maal{min-height:0; cursor:pointer}
.flise.maal:active{transform:scale(.975); background:var(--kort-2)}
.maal-linje{display:flex; align-items:flex-end; gap:14px; margin-top:4px}
.maal-linje .flise-tal{font-size:28px; margin-top:0}
.maal-linje .fase-hjoerne{margin:0 0 0 auto; padding:0; text-align:right}
.maal-linje .fase-hjoerne .f{font-size:14px; color:var(--z1)}
.maal-linje .fase-hjoerne .u{font-size:12px}
.flise.maal .spor{margin-top:12px; height:5px}
/* Laast flise (Free): laasen staar i etiketten, teksten er sporets egen note. */
.flise-laas{display:inline-flex; align-items:center; gap:6px; color:var(--daempet)}
.flise-laas svg{width:13px; height:13px}
@media (prefers-reduced-motion: reduce){
  .flise, .flise-mere, .flise-detalje, .ring .ring-bue, .flise .spor .fyld, .flise .lag-spor i{transition:none}
}

/* Form-flisen bor i #progression, som turen peger paa - derfor den luft.
   Maalflisen staar EFTER den (mockup'ens raekkefoelge: helt, spor, form, maal)
   i sin egen plads, #maal-flise, saa #bue-kort kan tegnes om uden at roere den. */
#progression .flise, #maal-flise .flise{margin-top:10px}
#progression:empty{display:none}
.flise-tal.lang{font-size:24px; margin-top:12px}
.flise-under{font-size:12px; color:var(--daempet); margin-top:4px}
#soevn-kort .kort{margin-top:10px}
#dagskort .pas{margin-top:4px}

/* Aktivitetsraekken: sportsikon i en kasse til venstre, dato/tid/km under navnet. */
.pd-sport{width:44px; height:44px; border-radius:14px; background:var(--kort);
  display:grid; place-items:center; color:var(--daempet)}
.pd-sport .akt-ikon{width:22px; height:22px; margin:0}
.pd-under{display:block; font-size:12px; color:var(--daempet); margin-top:2px}
/* Activities 13/9 2026 (brugerens skaermbillede: "man kan ikke se hvad det var for
   en type traening"). Ikonkassen faar traeningsartens zonefarve, naar turen HAR en
   art (.maalt) - ellers staar den neutral, se aktRaekke(). Maerket og planafvigelsen
   staar paa en tredje linje, som aldrig klippes: den ombrydes hellere. */
.pd-sport.maalt{background:color-mix(in srgb, var(--art-farve) 15%, var(--kort));
  color:var(--art-farve)}
.akt > .pdag .pd-navn{display:block}
.akt-art{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:7px}
.akt-art .maerke{font-size:11px; padding:2px 8px}
.akt-plan{font-size:11px; color:var(--daempet)}
.akt-plan b{font-weight:600; color:var(--art-farve)}
.akt > .pdag{padding-top:14px; padding-bottom:14px}
.pd-zone{display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:8px; flex:0 0 auto}
.dag.rest .pd-navn, .dag .pd-navn.rest{color:var(--daempet-2); font-weight:500}
/* Etapeprofilen. Hoejden foelger bredden, saa vejen faar samme perspektiv paa
   en 320- og en 430-telefon (kameraet fitter sig til aspektet i etape3d.js). */
.etape{position:relative; height:clamp(210px, 64vw, 270px); border-radius:var(--r-helt);
  overflow:hidden; background:var(--kort); border:1px solid var(--kant); margin:0}
.etape-scene, .etape-scene canvas:not(.etape-uge-flad){position:absolute; inset:0; width:100% !important;
  height:100% !important; display:block; touch-action:pan-y}
.etape-flad{position:absolute; left:14px; right:14px; bottom:34px; height:46%; width:auto}
.etape-tekst{position:absolute; left:14px; top:12px; right:14px; font-size:12px; color:var(--daempet);
  pointer-events:none}
.etape-tekst b{display:block; color:var(--tekst); font-weight:600; font-size:14px}
.etape-legend{position:absolute; right:12px; bottom:10px; display:flex; gap:8px; font-size:11px;
  color:var(--daempet-2); pointer-events:none}
.etape-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px}
/* Vinket ("Drag · tap a day") staar i seks sekunder og fader saa - det er en
   instruktion, ikke en etiket, og skal ikke laeses hver dag. */
.etape-vink{position:absolute; left:14px; bottom:10px; font-size:11px; color:var(--daempet-2);
  pointer-events:none; animation:vink-vaek .8s var(--ud) 6s forwards}
@keyframes vink-vaek{to{opacity:0}}
/* Ugeetiketten i den FLADE udgave (uden WebGL): samme tekstur som i scenen,
   stillet over stolperne ved ugestregen. I scenen er den et sprite. */
.etape-uge-flad{position:absolute; left:var(--x); bottom:calc(34px + 46%);
  transform:translateX(-50%); pointer-events:none}
.graf .etape-uge-flad{bottom:70%}
@media (prefers-reduced-motion: reduce){ .etape-vink{animation:none} }
#eksport-uge{margin-top:14px}

/* Connections: kortrammen om #intervals-status er fjernet 19/9 2026 - linjen bor i cockpittet (.fline). */
#udstyr-valg .valg:first-child, #platform-valg .valg:first-child{border-top:none}
.valg-u{display:block; font-size:12px; color:var(--daempet); margin-top:2px; line-height:1.4}

/* ══ YOU OG CONNECTIONS, KOMPAKT (13. september 2026, aften) ═══════════════
   Brugeren: de to skaerme var "stadig det samme gamle" efter makeoveret og
   fyldte for meget (maalt 1588/1644px ved 390). Reglen for omskrivningen:
   FLISEN ER ENHEDEN. Tre ting, der hoerer sammen, staar side om side i ét
   gitter (.brikker) og ikke som tre raekker under hinanden; det, hver flise
   betyder, staar i ÉN note under gitteret, ikke i en undertekst pr. raekke.
   Bevaegelsen SVARER paa et tryk (flisens fjeder + det tegnede flueben,
   abonnementets foldning) - den ene omgivende bevaegelse er pulsen i
   Connections' flow. Alt slukkes ved prefers-reduced-motion nederst. */
#s-forbind .gruppe{margin-top:20px}
#s-forbind .gruppe > h3{font-size:15px; margin-bottom:8px}
/* #s-mig .celle/.gruppe-reglerne, der stod her, er vaek 19/9 2026 sammen med
   det gamle spec-gitter (se markuppens kommentar) - #s-mig .nvi/.forklar
   BLIVER: begge klasser bruges stadig inde i #s-mig (evidensstriberne og
   "Have a referral code?" ligger nu i arkene sidst i #s-mig, se
   YOU-COCKPITTET nederst), og er desuden delt med turen (Roer ikke). */
/* #s-mig .nvi-reglerne (den lille celle-udgave) udgik 19/9 2026: striberne bor nu KUN i
   evidens-arkene (#ark-ev-*), hvor .ark .nvi nederst i filen giver dem arkets bredde. */
#s-mig .forklar{margin:8px 0 0}

/* .genveje (chip-raekken under navnet) er vaek 19/9 2026 - Guided tour,
   Release notes og Referrals er nu kontorækker (.own) nederst paa siden, se
   YOU-COCKPITTET. */

/* Abonnementet: den foldede linje (.abon-fold/.abon-krop m.fl.) er vaek
   19/9 2026 - se .planline i YOU-COCKPITTET nederst, som nu tegner den som
   ÉN raekke af piller, med resten bag "Manage" som #ark-abon.
   .abon-handling og .abon-linje BLIVER (Roer ikke-listen): opsigelsens
   linje i arket bruger stadig .abon-linje. */
.abon{margin:12px 0 0; padding:0; overflow:hidden}
.abon-handling{flex:0 0 auto; font:inherit; font-size:13px; font-weight:600; color:var(--rav);
  background:none; border:none; padding:10px 8px; cursor:pointer; border-radius:10px}
.abon-handling:active{background:var(--rav-dim)}

/* Fliserne. Hele flisen er kontrollen; input'et er det skjulte .valg-felt. */
.brikker{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.brik{position:relative; display:flex; flex-direction:column; gap:1px; min-width:0;
  padding:10px 10px 9px; border-radius:16px; border:1px solid var(--kant);
  background:var(--felt); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transform-origin:50% 70%;
  transition:transform .18s var(--fjeder), border-color .15s, background .15s}
.brik:active{transform:perspective(500px) rotateX(6deg) scale(.96)}
.brik-ikon{width:22px; height:22px; margin-bottom:7px; color:var(--daempet); transition:color .15s}
.brik-ikon svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.brik-navn{font-size:13px; font-weight:600; line-height:1.2; color:var(--tekst); overflow-wrap:anywhere}
.brik-u{font-size:11px; color:var(--daempet); line-height:1.3; margin-top:2px}
.brik-tjek{position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%;
  border:1px solid var(--kant-staerk); background:var(--kort); display:grid; place-items:center;
  transition:background .15s, border-color .15s}
.brik-tjek svg{width:11px; height:11px; stroke:var(--paa-rav); fill:none; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:22; stroke-dashoffset:22;
  transition:stroke-dashoffset .28s var(--ud) .05s}
.brik:has(.valg-felt:checked){border-color:var(--rav); background:var(--rav-dim)}
.brik:has(.valg-felt:checked) .brik-ikon{color:var(--rav)}
.brik:has(.valg-felt:checked) .brik-tjek{background:var(--rav); border-color:var(--rav)}
.brik:has(.valg-felt:checked) .brik-tjek svg{stroke-dashoffset:0}
.brik:has(.valg-felt:focus-visible){outline:2px solid var(--rav); outline-offset:2px}
/* #s-mig .brikker + .maaling-note / #s-mig .opfoelg (den gamle undertekst
   under fliserne) er vaek 19/9 2026 - se .brik-u i markuppen. #s-forbind's
   tilsvarende regel (ovenfor) er uroert - Connections er ikke en del af
   denne plan.

   .celle-stat (watt pr. kilo som en udledt CELLE i det gamle spec-gitter)
   er ogsaa vaek: W/kg-linjen er nu .wkg, se YOU-COCKPITTET nederst. */

/* Connections: kilden. `.kilde-kort`/`.flow`(gammel)/`.flow-node`/`.flow-streg`/
   `.flow-puls`(+ dens `@keyframes flyd`)/`.flow-forma`/`.flow.kun-ind` og deres
   `.kilde-kort`-scopede undere er fjernet 19/9 2026 (CONNECTIONS-COCKPITTET
   afloeser dem, se forma.css's bund) - grep gav nul traef i index.html/
   forma.js/tur-demo.js. `#s-forbind .dagsdom-helt` og `.live`/`.live.ukendt`
   er ogsaa uden traef nu (den gamle linje/status-figur er vaek), men staar
   uroerte - de er ikke paa PLAN-connections-cockpit.md's oprydningsliste. */
#s-forbind .opfoelg{margin:10px 0 0; padding:0; border-left:none}
#s-forbind .brikker + .maaling-note, #s-forbind .brikker + .opfoelg{margin-top:10px}
@media (prefers-reduced-motion: reduce){
  .brik, .brik-tjek svg{transition:none}
}
#s-forbind .brikker + .opfoelg .opfoelg-navn{font-size:13px}
#s-forbind .tovalg button{min-height:36px; font-size:13px}

/* ══ FREE SOM FORSMAG (13. september 2026, aften) ═══════════════════════
   Brugeren: Free skal "se super godt ud", og de laaste ting skal vises paa
   en flot, illustrativ maade - stadig med vejen til at opgradere. Reglen bag
   alle reglerne her: EN FARVE for Pro. Rav er appens accent (knapper, "Today",
   maerket), og alt der er laast bag Pro peger med rav - laasen, chippen,
   punkterne. Groen betyder "god tilstand" i resten af appen og maa ikke ogsaa
   betyde "koeb". Overskriver derfor de aeldre groenne laaseregler ovenfor. */

/* Laasekortet: rammen er heltens (r-helt), polstringen sidder paa stilladset,
   saa stilladset kan vaere dagskortet SELV (.pro-laas-pas: .pas uden egen
   ramme) eller Plan-siden (.pro-laas-plan). Sloeringen er let nok til, at
   zoneprofilens farver og tallenes FORM kan ses - ikke tallene selv. */
.kort.pro-laas{padding:0; border-radius:var(--r-helt); min-height:280px;
  background:var(--kort); box-shadow:0 12px 40px -18px color-mix(in srgb, var(--rav) 35%, transparent)}
.pro-laas-indhold{padding:16px; max-height:540px; overflow:hidden;
  filter:blur(2.6px) saturate(.85); opacity:.72}
.pro-laas-pas .pro-laas-indhold{padding:0}
.pro-laas-pas .pas{border:none; border-radius:0; background:transparent}
.pro-laas-plan .pro-laas-indhold{padding:14px 14px 0}
.pro-laas-plan .pro-laas-indhold .flise{min-height:104px}
.pro-laas-overlay{padding:26px 20px 20px; gap:8px; background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--kort) 55%, transparent) 34%,
    color-mix(in srgb, var(--kort) 93%, transparent) 62%,
    var(--kort) 100%)}
.pro-laas-ikon{width:40px; height:40px; color:var(--rav);
  background:var(--rav-dim); border-color:rgba(240,169,59,.45);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--rav) 8%, transparent),
             0 0 26px color-mix(in srgb, var(--rav) 28%, transparent);
  animation:pro-puls 3.4s ease-in-out infinite}
.pro-laas-ikon svg{width:17px; height:17px}
@keyframes pro-puls{
  0%,100%{box-shadow:0 0 0 6px color-mix(in srgb, var(--rav) 8%, transparent),
                     0 0 22px color-mix(in srgb, var(--rav) 24%, transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb, var(--rav) 10%, transparent),
                 0 0 36px color-mix(in srgb, var(--rav) 42%, transparent)}}
.pro-laas-maerke{color:var(--rav)}
.kort.pro-laas .pro-laas-titel{font-size:19px}
.pro-laas-punkter{list-style:none; margin:2px 0 4px; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:6px}
.pro-laas-punkter li{font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px;
  background:var(--rav-dim); color:var(--rav); border:1px solid rgba(240,169,59,.28);
  white-space:nowrap}
.pro-laas-overlay .knap{margin-top:4px; box-shadow:0 8px 24px -10px color-mix(in srgb, var(--rav) 60%, transparent)}
@media (prefers-reduced-motion: reduce){
  .pro-laas-ikon{animation:none}
  .pro-laas-indhold{filter:none; opacity:.22}
}

/* Free's tilbudslinje oeverst paa Today: en pille, ikke en understreget linje.
   Stadig én linje, der kan overses - men den ligner nu resten af laasene. */
.dagsdom-tilbud .pro-pille{display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px 8px 11px; border-radius:999px; background:var(--rav-dim);
  border:1px solid rgba(240,169,59,.35); color:var(--rav); text-decoration:none;
  font-size:13px; font-weight:600; min-height:36px;
  transition:transform .18s var(--fjeder)}
.dagsdom-tilbud .pro-pille:active{transform:scale(.96)}
.dagsdom-tilbud .pro-pille svg{width:14px; height:14px; flex:0 0 14px}

/* Form-flisen for Free: bjaelkernes FORM bag et let sloer, linjen nedenunder.
   .flise.laast saetter opacity:.7 paa hele flisen - her skal kun det
   opdigtede indhold daempes, saa flisen selv staar med fuld styrke. */
.flise.pro-flise{opacity:1}
.pro-flise-indhold{filter:blur(1.8px) saturate(.8); opacity:.5; pointer-events:none;
  user-select:none}
.dagsdom-laast{transition:transform .18s var(--fjeder)}
.dagsdom-laast:active{transform:scale(.98)}
.dagsdom-laast .ikon{color:var(--rav)}
@media (prefers-reduced-motion: reduce){ .pro-flise-indhold{filter:none; opacity:.25} }

/* Etapeprofilen som forsmag paa Plan (etapeLaas() i forma.js). Scenen er
   der og bevaeger sig som for Pro - det ER pointen - men tager ingen beroering:
   hele fladen aabner betalingsvaeggen. Et tyndt scrim nederst baerer chippen. */
.etape.etape-laast{cursor:pointer}
.etape.etape-laast .etape-scene{pointer-events:none}
.etape.etape-laast .etape-vink, .etape.etape-laast .etape-legend{display:none}
.etape.etape-laast::after{content:''; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--kort) 78%, transparent));
  pointer-events:none}
.etape-laas-chip{position:absolute; right:12px; bottom:12px; z-index:2; background:none;
  border:none; padding:0; cursor:pointer}
.etape-laas-chip span{display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--kort-2);
  border:1px solid rgba(240,169,59,.45); color:var(--rav);
  box-shadow:0 0 22px color-mix(in srgb, var(--rav) 30%, transparent)}
.etape.etape-laast .etape-tekst{z-index:2}

/* Workouts: chippen over den sloerede prosa er en pille nederst til venstre
   paa et scrim - ikke centreret tekst oven i tekst. Skriften er appens egen
   (.bib-fokus-tekst er serif, og chippen arvede den). */
.bib-laas-tekst{min-height:62px}
.bib-laas-chip{align-items:flex-end; justify-content:flex-start; padding:0 0 2px;
  font-family:var(--skrift); text-align:left;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 82%, transparent) 60%, var(--bg) 100%)}
.bib-laas-chip .chip{display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 10px;
  border-radius:999px; background:var(--kort-2); border:1px solid rgba(240,169,59,.35);
  font-size:12px; line-height:1.3; color:var(--tekst); max-width:100%;
  /* Den globale .chip siger nowrap - arvet her klippede den en pille, der
     naevner proeveperioden, ved 320px (26/9 2026). Bryd om, klip aldrig. */
  white-space:normal}
.bib-laas-chip .chip > span{min-width:0}
.bib-styrke-laas-chip{border-color:rgba(240,169,59,.4)}
.bib-styrke-laas-chip svg, .bib-styrke-laas-chip b{color:var(--rav)}

/* ── Betalingsvaeggen, 1:1 mod docs/mockups/makeover/paywall.html ──────── */
.pw{display:flex; flex-direction:column; min-height:100dvh; padding-bottom:30px; box-sizing:border-box}
.pw-top{display:flex; justify-content:space-between; align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) 0 0}
.pw-brand{display:inline-flex; align-items:center; gap:8px}
.pw-brand .logo-maerke{width:22px; height:22px}
.pw-brand .ord{font-family:var(--skrift-display); font-weight:800; font-size:15px;
  letter-spacing:.14em; color:var(--tekst)}
.pw-luk{color:var(--daempet); font-size:14px; padding:8px 0 8px 12px; min-height:44px}
.pw-h{font-family:var(--skrift-dom); font-weight:400; font-size:clamp(30px, 8.6vw, 38px);
  line-height:1.08; margin:26px 0 0; letter-spacing:-.01em; color:var(--tekst); text-wrap:pretty}
.pw-h em{color:var(--rav); font-style:italic}
.pw-p{font-size:15px; color:var(--daempet); line-height:1.5; margin:10px 0 0}
.pw-planer{display:grid; gap:10px; margin-top:22px}
.pw-plan{position:relative; display:grid; grid-template-columns:22px 1fr; gap:6px 12px;
  align-items:center; padding:16px; border-radius:var(--r-flise); background:var(--kort);
  border:1px solid var(--kant); text-align:left; width:100%; color:var(--tekst);
  font:inherit; cursor:pointer; box-sizing:border-box;
  transition:transform .18s var(--fjeder), border-color .15s, background .15s}
.pw-plan:active{transform:scale(.98)}
.pw-plan .radio{width:22px; height:22px; border-radius:50%; border:2px solid var(--kant-staerk);
  display:grid; place-items:center; box-sizing:border-box}
.pw-plan .radio::after{content:''; width:10px; height:10px; border-radius:50%;
  background:var(--rav); transform:scale(0); transition:transform .25s var(--fjeder)}
.pw-plan.on{border-color:var(--rav); background:var(--rav-dim)}
.pw-plan.on .radio{border-color:var(--rav)}
.pw-plan.on .radio::after{transform:scale(1)}
.pw-plan b{display:block; font-weight:600; font-size:15px}
.pw-plan > span > span{display:block; font-size:12px; color:var(--daempet); margin-top:2px;
  line-height:1.4}
.pw-plan .pr{grid-column:2; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.pw-plan .pr b{display:inline; font-size:19px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pw-plan .pr span{display:inline; font-size:12px; margin:0; color:var(--daempet)}
.pw-plan .tag{position:absolute; top:-9px; left:14px; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:999px; background:var(--rav); color:var(--paa-rav)}
.pw-plan.founder{background:linear-gradient(160deg, rgba(240,169,59,.18), rgba(240,169,59,.04)), var(--kort);
  border-color:rgba(240,169,59,.35)}
.pw-plan.founder.on{border-color:var(--rav)}
.pw-gets{margin-top:20px; display:grid; gap:9px}
.pw-gets div{display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:14px;
  color:var(--daempet); line-height:1.45}
.pw-gets i{width:18px; height:18px; margin-top:2px; border-radius:50%; background:var(--rav-dim);
  position:relative; display:block}
.pw-gets i::after{content:''; position:absolute; left:6px; top:3px; width:4px; height:8px;
  border:solid var(--rav); border-width:0 2px 2px 0; transform:rotate(45deg)}
.pw-gets b{color:var(--tekst); font-weight:600}
.pw-bund{margin-top:auto; padding-top:22px}
.pw-fine{font-size:12px; color:var(--daempet-2); text-align:center; margin:10px 0 0; line-height:1.5}
/* Plan-stilladset: flere raekker skal kunne anes over overlayet, og tidens tal
   maa ikke ombrydes i en halv flise ved 320px. */
.pro-laas-plan .pro-laas-indhold{max-height:640px}
.pro-laas-plan .flise-tal{font-size:24px}

/* ── STARTKORTET (13/9 2026) ────────────────────────────────────────────
   Ikke forbundet, forbundet uden enheder, ingen plan, ingen ture: skaermen
   stod med ét centreret tekstkort fra FOER makeoveret. Samme idé som
   .pro-laas - vis komponenten, fortael den ikke - men glimtet staar OVER
   teksten og fader ud i kortet, for teksten (trin, to knapper) er for lang
   til et absolut overlay ved 320px. Ikke et koeb: ikonet er neutralt, og
   maerket er daempet - kun knappen er rav, som enhver handling. */
.kort.start-kort{padding:0; overflow:hidden; border-radius:var(--r-helt); background:var(--kort);
  box-shadow:0 14px 44px -22px rgba(0,0,0,.7)}
.start-glimt{position:relative; height:196px; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 30%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 30%, transparent 100%)}
.start-glimt > div{padding:14px 14px 0; filter:blur(1.6px) saturate(.8); opacity:.6;
  transform:perspective(900px) rotateX(14deg) scale(.96); transform-origin:50% 0;
  animation:start-glid 14s ease-in-out infinite alternate}
@keyframes start-glid{from{translate:0 0} to{translate:0 -34px}}
.start-glimt .flise.helt{min-height:0}
.start-krop{position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:8px; padding:0 20px 22px; margin-top:-34px}
.uden-glimt .start-krop{margin-top:0; padding-top:22px}
.start-ikon{display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; color:var(--tekst); background:var(--kort);
  border:1px solid var(--kant-staerk);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--kort) 70%, transparent)}
.start-maerke{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--daempet)}
.kort.start-kort .start-titel{margin:0; font-size:19px; font-weight:700; line-height:1.25;
  text-wrap:balance}
.start-tekst{margin:0; max-width:38ch; font-size:13px; line-height:1.55; color:var(--daempet);
  text-wrap:pretty}
.start-punkter{list-style:none; margin:4px 0 2px; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:6px}
.start-punkter li{font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px;
  background:var(--felt); color:var(--tekst); border:1px solid var(--kant); white-space:nowrap}
.start-trin{list-style:none; counter-reset:trin; margin:8px 0 0; padding:0; width:100%;
  display:flex; flex-direction:column; gap:1px; text-align:left;
  border-radius:var(--r-kontrol); overflow:hidden; border:1px solid var(--kant)}
.start-trin li{counter-increment:trin; position:relative; padding:11px 12px 11px 44px;
  font-size:13px; line-height:1.5; color:var(--daempet); background:var(--felt)}
.start-trin li b{color:var(--tekst); font-weight:600}
.start-trin li a{color:var(--tekst)}
.start-trin li::before{content:counter(trin); position:absolute; left:12px; top:10px;
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:var(--tekst);
  border:1px solid var(--kant-staerk)}
.start-knapper{width:100%; margin-top:10px}
.start-knapper .knap{box-shadow:0 8px 24px -10px color-mix(in srgb, var(--rav) 60%, transparent);
  text-decoration:none}
.start-knapper .knap.stille{box-shadow:none}
.start-note{margin:4px 0 0; font-size:12px; line-height:1.55; color:var(--daempet)}
.start-krop .forbindelse-svar:empty{display:none}

/* ── Enhedstjekket (3/10 2026): Today-kortet og Connections-panelet ───── */
.et{width:100%; display:flex; flex-direction:column; gap:10px; margin-top:6px; text-align:left}
.et-spor{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.et-lane{display:flex; gap:9px; align-items:flex-start; padding:11px 11px 10px;
  border-radius:var(--r-kontrol); background:var(--felt); border:1px solid var(--kant)}
.et-lane b{display:block; font-size:12px; font-weight:600; color:var(--tekst); line-height:1.3}
.et-lane span.et-lane-tekst{display:block; font-size:12px; line-height:1.4; color:var(--daempet); margin-top:2px}
.et-lane.mangler{border-color:color-mix(in srgb, var(--roed) 45%, transparent);
  background:color-mix(in srgb, var(--roed) 9%, var(--felt))}
.et-lane.ok .et-ikon{color:var(--groen)}
.et-lane.mangler .et-ikon{color:var(--roed)}
.et-lane.ikke .et-ikon{color:var(--daempet)}
.et-lane.intet{border-color:color-mix(in srgb, var(--z3) 45%, transparent)}
.et-lane.intet .et-ikon{color:var(--z3)}
.et-ikon{flex:none; width:18px; height:18px; margin-top:1px}
.et-enheder{list-style:none; margin:0; padding:0; border-radius:var(--r-kontrol);
  border:1px solid var(--kant); overflow:hidden; display:flex; flex-direction:column; gap:1px}
.et-overskrift{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--daempet); margin:4px 2px -2px}
.et-enheder li{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:var(--felt); font-size:13px}
.et-navn{font-weight:600; color:var(--tekst)}
.et-chips{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.et-chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  line-height:1; padding:5px 8px 5px 6px; border-radius:999px; border:1px solid var(--kant-staerk);
  color:var(--daempet); white-space:nowrap}
.et-chip svg{width:11px; height:11px}
.et-chip.ok{color:var(--groen); border-color:color-mix(in srgb, var(--groen) 40%, transparent)}
.et-chip.fejl{color:var(--roed); border-color:color-mix(in srgb, var(--roed) 55%, transparent);
  background:color-mix(in srgb, var(--roed) 12%, transparent)}
.et-chip.fra{opacity:.7}
.et-enheder li.et-strava .et-navn{color:var(--daempet)}
.et-fix-titel{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rav); margin:6px 2px -4px; align-self:flex-start}
.et-panel{margin-top:14px}
.et-panel .et-titel{margin:0 2px 6px; font-size:15px; font-weight:600}
@media (prefers-reduced-motion: reduce){
  .start-glimt > div{animation:none}
}
/* Maerkerne i trin 2 og Strava-advarslen (13/9 2026). Maerkerne er ord man
   skimmer efter paa intervals.icu's side - sm aa, stille piller, ikke knapper. */
.start-maerker{display:flex; flex-wrap:wrap; gap:4px; margin-top:7px}
.start-maerker span{font-size:11px; font-weight:600; line-height:1; padding:5px 8px;
  border-radius:999px; color:var(--tekst); border:1px solid var(--kant-staerk)}
.start-advarsel{display:flex; gap:9px; align-items:flex-start; width:100%; margin:8px 0 0;
  padding:10px 12px; text-align:left; font-size:12px; line-height:1.5; color:var(--daempet);
  border-radius:var(--r-kontrol); background:var(--felt); border:1px dashed var(--kant-staerk)}
/* Ikke rav: rav betyder handling/Pro i appen, og det her er et forbehold. */
.start-advarsel svg{flex:0 0 auto; margin-top:2px; color:var(--tekst)}
.start-advarsel b{color:var(--tekst); font-weight:600}

/* ══ PLAN SOM COCKPIT (18/9 2026) ═══════════════════════════════════════════
   Bygget 1:1 efter docs/mockups/makeover/plan-cockpit.html (kontrakt:
   PLAN-COCKPIT.md). Mock'ens tokens er oversat til appens: --g0/1/2/3 ->
   --bg/--kort/--kort-2/--skinne-2, --ink/-2/-3 -> --tekst/--daempet/--daempet-2,
   --line/-2 -> --kant/--kant-staerk, --amber -> --rav, --gut -> --rende.
   Skaermen er ÉT stykke: cockpittet (maal, vej, dials, to fliser, ugelinje),
   kalenderen der rider op over dets kant, og ÉN valgt dag under. */
:root{--header-h:62px}

/* ── Cockpittet ──────────────────────────────────────────────────────── */
.cockpit{position:relative; margin:4px calc(-1 * var(--rende)) 0; overflow:hidden; isolation:isolate;
  border-bottom:1px solid var(--kant)}
.cockpit-in{position:relative; z-index:1; padding:6px var(--rende) 58px; display:grid; gap:0}
/* Uden Pro-delene (Free, ingen forbindelse) staar maalet og vejen alene - saa
   skal der ikke ligge 58px luft under vejen til en kalender, der ikke er der. */
.cockpit:has(.plan-pro.skjul) .cockpit-in{padding-bottom:10px}

/* Maalet: samme indhold som flisen foer, uden ramme. */
.goal{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; pointer-events:none}
.goal > *{pointer-events:auto; min-width:0}
.goal .lbl{font-size:12px; color:var(--daempet); display:flex; align-items:center; gap:8px}
.goal .lbl button:not(.fk){width:26px; height:26px; border-radius:50%; border:1px solid var(--kant-staerk); display:grid; place-items:center;
  color:var(--daempet-2); background:color-mix(in oklab, var(--bg) 50%, transparent); padding:0; cursor:pointer; font:inherit}
.goal .lbl button:not(.fk) svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.goal h2{font-size:clamp(22px, 6.6vw, 26px); font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:3px 0 0; text-wrap:balance}
.goal .phase{font-size:13px; color:var(--daempet); margin-top:4px; display:flex; align-items:baseline; gap:8px}
.goal .phase .fase-navn{color:var(--tekst); font-weight:600}
.goal .phase .fase-uge{font-variant-numeric:tabular-nums}
.goal .phase .fase-uge b{color:var(--rav); font-weight:600}
.goal .split{font-size:12px; color:var(--daempet-2); margin-top:2px}
.goal .fase-spor{grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:6px; max-width:250px}
.goal .fase-spor span{font-size:11px; letter-spacing:.08em; gap:5px}
.goal .fase-spor i{height:3px; border-radius:3px}
.goal .fase-spor .bag i{background:var(--z1)}
.goal .ring{width:84px; height:84px; margin-top:4px}
.goal .ring circle{stroke-width:6}
.goal .ring .ring-bue{stroke:var(--rav)}
.goal .ring .ring-midt b{font-size:24px}
.goal .ring .ring-midt small{font-size:11px}
/* Fokus i toppen (19/9 2026): én glaspille pr. valgt sport under fasesporet, blyanten som
   maalets. Ikonet i rav = "det er valgt", samme sprog som Plans dials. */
.goal .fokus{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px}
.goal .fk{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 10px 0 8px; border-radius:999px; font-size:12px; font-weight:600; color:var(--tekst); white-space:nowrap;
  background:color-mix(in srgb, var(--kort) 70%, transparent); border:1px solid var(--kant); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.goal .fk svg{width:14px; height:14px; stroke:var(--rav); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}
.goal .fokus button:not(.fk){width:24px; height:24px; border-radius:50%; border:1px solid var(--kant-staerk); background:none; display:grid; place-items:center; color:var(--daempet); cursor:pointer; padding:0}
.goal .fokus button:not(.fk) svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Uden maal (8/10 2026): samme skelet som med maal - stiplet ring med + paa
   dage-ringens plads er den ene vej til maalarket, og to linjer om hvad et maal giver. */
.goal .goal-hint{font-size:13px; line-height:1.4; color:var(--daempet); margin:8px 0 0; max-width:30ch; text-wrap:pretty}
.goal.tom .goal-spor{margin-top:6px}
#cockpit .goal .ring.tom-ring{background:none; border:none; padding:0; cursor:pointer; font:inherit; color:inherit}
.ring.tom-ring .ring-skinne{stroke:color-mix(in srgb, var(--rav) 55%, transparent); stroke-dasharray:3 7; stroke-width:4}
.ring.tom-ring .plus{font-size:28px; font-weight:300; color:var(--rav); line-height:1}
.goal .goal-dato.saet{background:none; border:none; padding:0; font:inherit; font-size:12px; color:var(--rav); font-weight:600; cursor:pointer}

/* Vejen: FORMA's egen figur i et baand for sig - fuld bredde, intet ovenpaa. */
.road{position:relative; height:clamp(164px, 44vw, 190px); margin:0 calc(-1 * var(--rende)) 4px; overflow:hidden;
  border:none; border-radius:0; background:transparent}
.road .sky{position:absolute; inset:0; z-index:0}
.road .sky::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--dis) 0%, transparent 10%, transparent 86%, var(--dis) 100%)}
.road .etape-flad{left:var(--rende); right:var(--rende); bottom:44px; height:40%}
/* Forklaringen i baandets bund: vinket til venstre, legenden til hoejre. */
.stagecap{position:absolute; left:var(--rende); right:var(--rende); bottom:6px; z-index:1; display:flex; justify-content:space-between;
  align-items:baseline; gap:8px; font-size:11px; color:var(--daempet-2); pointer-events:none; white-space:nowrap; overflow:hidden;
  text-shadow:0 1px 6px var(--bg), 0 0 14px var(--bg)}
.stagecap > div:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
.stagecap b{color:var(--daempet); font-weight:600; margin-right:4px}
.stagecap .etape-vink{position:static; animation:none; font-size:11px; color:var(--daempet-2)}
.stagecap .etape-legend{position:static; display:flex; gap:9px; flex:none}
.stagecap .etape-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px}
.stagecap .pick{display:none}
/* Activities' vej gaar ud til skaermkanten (margen -rende paa begge sider), saa
   billedteksten skal have DOBBELT rende for at flugte med indholdet - ellers stod
   "Drag · tap a week" og forklaringen klos op ad skaermkanten. */
.akt-road .stagecap{left:calc(var(--rende) * 2); right:calc(var(--rende) * 2)}
/* Med den dobbelte rende er der ikke plads til vinket OG de fire farver paa én linje
   under 360 px ("Drag · tap a we…" ved 320) - der brydes forklaringen i stedet. */
@media (max-width:359px){ .akt-road .stagecap{flex-wrap:wrap; row-gap:4px} .akt-road .stagecap > div:first-child{overflow:visible} }
.cockpit.picked .stagecap .cap{display:none}
.cockpit.picked .stagecap .pick{display:inline}
/* Free-forsmagen (etapeLaas) laegger sit chip over vejen - som foer. */
.road.etape-laast{cursor:pointer}

/* Dial'erne: én pr. valgt sportsgren; gitteret har lige saa mange kolonner. */
.dials{display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:8px; margin-top:4px}
.dials:empty{display:none}
.dial{position:relative; text-align:left; padding:10px 10px 9px; border-radius:18px; border:1px solid var(--kant);
  background:var(--kort); color:inherit; font:inherit; cursor:pointer; display:block; min-width:0; container-type:inline-size;
  transition:transform .2s var(--fjeder), border-color .3s, background .3s, box-shadow .3s; overflow:hidden}
.dial-in{display:grid; gap:2px}
.dial .hd2{display:grid; gap:2px}
.dial .nums{display:grid; gap:2px}
.dial:active{transform:scale(.96)}
.dial::before{content:""; position:absolute; left:12px; right:12px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--rav), transparent); opacity:0; transition:opacity .4s}
.dial .ic{width:30px; height:30px; color:var(--daempet-2); transition:color .3s, filter .3s; margin-bottom:2px; display:block}
.dial .ic svg{width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block}
.dial .nm{font-size:12px; color:var(--daempet-2); font-weight:600; transition:color .3s}
.dial .v{display:flex; align-items:baseline; gap:3px; line-height:1.05; white-space:nowrap; color:var(--daempet-2)}
.dial .v b{font-size:19px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.dial .v small{font-size:11px; color:var(--daempet-2)}
.dial .cap{font-size:11px; color:var(--daempet-2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.dial .cap.doubt{color:var(--z3)}
.dial.on{border-color:color-mix(in oklab, var(--rav) 55%, var(--kant));
  background:color-mix(in oklab, var(--kort) 88%, var(--rav) 6%);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--rav) 25%, transparent), 0 8px 30px -12px var(--rav-dim)}
.dial.on::before{opacity:1}
.dial.on .ic{color:var(--rav); filter:drop-shadow(0 0 8px var(--rav-dim))}
.dial.on .nm{color:var(--tekst)}
.dial.on .v{color:var(--tekst)}
.dial.on .v small{color:var(--daempet)}
/* Et estimat (ikke rytterens eget tal) staar graat - samme kaskade som You. */
.dial.on .v.est b{color:var(--daempet)}
.dial.on .cap{color:var(--daempet)}
.dial.on .cap.doubt{color:var(--z3)}
@container (max-width:100px){ .dial{padding:9px 8px 8px} .dial .v b{font-size:17px} .dial .ic, .dial .ic svg{width:26px; height:26px} }
/* Halv bredde: ikon og navn paa én linje, tallene ved siden af hinanden. */
@container (min-width:150px){ .dial .hd2{grid-template-columns:auto 1fr; align-items:center; gap:8px} .dial .ic{margin:0}
  .dial .nums{grid-auto-flow:column; grid-auto-columns:max-content; gap:14px; margin-top:6px} }
/* Hel bredde paa en smal telefon (320): navnet flytter ned i tekstlinjen, saa tre tal faar plads. */
@container (min-width:260px) and (max-width:330px){ .dial .hd2{grid-template-columns:auto} .dial .nm{display:none}
  .dial .cap::before{content:attr(data-nm) " · "} .dial .nums{gap:12px} .dial .v b{font-size:19px} }
/* Hel bredde: hele motoren paa én raekke, tekstlinjen under tallene. */
@container (min-width:260px){ .dial-in{grid-template-columns:auto 1fr; grid-template-areas:"hd nums" "hd cap"; align-items:center; column-gap:16px; padding:2px 4px}
  .dial .hd2{grid-area:hd} .dial .nums{grid-area:nums; margin-top:0; gap:18px} .dial .cap{grid-area:cap; margin-top:2px}
  .dial .v b{font-size:22px} .dial .ic, .dial .ic svg{width:34px; height:34px} }

/* De to fliser: tiden og opdateringen. */
.belt{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px}
/* Tidsflisen staar foer dial'erne siden 24/9 2026 (UX-runde 3-gennemgang). */
.belt + .dials{margin-top:8px}
/* Ingen tid sat (hverken skabelon eller dage): flisen er det, der mangler for at faa
   en plan, og faar samme rav som "Set your week" paa Today. Saettes af tegnTidResume(). */
.belt .b.mangler{border-color:var(--rav)}
.belt .b.mangler b{color:var(--rav)}
.belt .b{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:11px 12px; border-radius:16px;
  background:var(--kort); border:1px solid var(--kant); text-align:left; min-width:0; color:inherit; font:inherit; cursor:default}
button.belt-b, .belt button.b{cursor:pointer}
.belt button.b:active{transform:scale(.97)}
.belt .b > span{min-width:0}
.belt .b small{display:block; font-size:11px; color:var(--daempet); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.belt .b b{display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap}
.belt .b b em{display:block; font-style:normal; font-size:11px; color:var(--daempet); font-weight:500; margin-top:2px}
.belt .b svg{width:16px; height:16px; stroke:var(--daempet-2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
/* Ugens karakter (19/9 2026): den lette uge lyser i --z2 - samme farve som "god tilstand",
   for en let uge er ikke en advarsel men en gave. Foden maa braekke. */
.belt .b.uge b em{white-space:normal; line-height:1.25}
.belt .b.uge.deload{border-color:color-mix(in oklab, var(--z2) 45%, var(--kant)); background:linear-gradient(135deg, color-mix(in oklab, var(--z2) 16%, var(--kort)), var(--kort) 70%); box-shadow:0 0 22px -8px color-mix(in oklab, var(--z2) 60%, transparent)}
.belt .b.uge.deload b{color:var(--z2)}
.belt .b.uge.deload svg{stroke:var(--z2)}

/* Ugelinjen. */
.rail-head{position:relative; z-index:2; margin-top:12px; padding:0 2px; display:grid; gap:5px; font-size:12px; color:var(--daempet)}
.rail-head:empty{display:none}
.rail-head .rh{display:grid; gap:5px}
.rail-head .rh[hidden]{display:none}
.rail-head .l1, .rail-head .l2{display:flex; align-items:baseline; gap:8px; white-space:nowrap; min-width:0}
.rail-head .l1 b{font-size:15px; font-weight:600; color:var(--tekst); letter-spacing:-.01em}
.rail-head .h{color:var(--daempet-2)}
.rail-head .tgt{margin-left:auto; font-size:12px; overflow:hidden; text-overflow:ellipsis}
.rail-head .l2 b{color:var(--tekst); font-weight:600; font-variant-numeric:tabular-nums}
.rail-head .l2 .arrow{color:var(--daempet-2); margin:0 2px}
.rail-head .l2 .ulbar{flex:1; margin:0 0 0 6px; height:4px; min-width:60px; border-radius:4px; background:var(--skinne-2); position:relative}
.rail-head .l2 .ulbar .ul-baand{top:-2px; bottom:-2px}
.rail-head .l3{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--daempet-2)}
.rail-head .ul-note{font-size:12px; margin-top:0}

/* ── Kalenderen: fjorten kort, rider op over cockpittets kant ─────────── */
.rail{position:relative; z-index:2; margin:-28px calc(-1 * var(--rende)) 0; padding:0 var(--rende) 6px; overflow-x:auto;
  overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--rende); scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
/* Flex, ikke grid (27/9 2026): i et grid med faste kolonner ligger mandagens margin-left INDE
   i kolonnen, saa mandagskortet blev 14 px smallere end de andre. I flex laegges margen udenfor. */
.rail-in{display:flex; column-gap:5px; width:max-content; padding-right:var(--rende)}
.rail-in > .rc{flex:0 0 60px}
.rc{scroll-snap-align:start; display:grid; grid-template-rows:auto auto 1fr auto; justify-items:center; gap:1px; height:108px; padding:7px 4px 6px;
  border-radius:14px; background:var(--kort); border:1px solid var(--kant); text-align:center; color:inherit; font:inherit; cursor:pointer;
  transition:transform .18s var(--fjeder), border-color .2s, background .2s; position:relative; min-width:0}
.rc:active{transform:scale(.94)}
.rc small{font-size:10px; color:var(--daempet-2); letter-spacing:.03em}
.rc b{font-size:17px; font-weight:600; line-height:1.05}
.rc .stalk{width:100%; display:flex; align-items:flex-end; justify-content:center; gap:2px; height:100%; padding:4px 0 3px}
.rc .stalk{align-items:stretch; padding:4px 0 2px}
.rc .sk{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; width:16px; height:100%}
.rc .sk .bar{flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center}
.rc .sk .akt-ikon{width:14px; height:14px; flex:none; color:var(--daempet)}
.rc .sk.miss .akt-ikon{opacity:.5; text-decoration:line-through}
.rc .sk.miss{position:relative}
.rc .sk.miss::after{content:""; position:absolute; left:1px; right:1px; bottom:6px; height:1.5px; background:var(--daempet); transform:rotate(-45deg); opacity:.7}
.rc .sk-flere{font-size:9px; color:var(--daempet-2); align-self:flex-end; padding-bottom:2px}
.rc .stalk i{width:8px; border-radius:3px 3px 1px 1px; height:calc(var(--h, .3) * 100%); min-height:3px; display:block}
.rc .stalk i.rest{width:5px; height:5px; border-radius:50%; background:var(--skinne-2)}
.rc em{font-style:normal; font-size:11px; color:var(--daempet); font-variant-numeric:tabular-nums; white-space:nowrap}
.rc.past{opacity:.55}
.rc .ekstra-dot{position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--rav)}
.ekstra-note{font-size:13px; color:var(--daempet); margin:12px 0 8px}
.rc.past .grade{position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--z2)}
/* Den VALGTE dag lyser mest (25/9 2026, brugeren: stod man paa loerdag, var det stadig
   "Today", der lyste). I dag har kun en daempet rav kant og det rave "Today", saa den
   stadig kan findes; den valgte dag faar den fulde kant og gloed. */
.rc.today{border-color:var(--rav-lav)}
.rc.today small{color:var(--rav); font-weight:600}
.rc.sel{border-color:var(--rav); background:color-mix(in oklab, var(--kort) 85%, var(--rav) 10%);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--rav) 30%, transparent), 0 8px 24px -10px var(--rav-dim); opacity:1}
.rc.wk2{margin-left:14px}
.rc.wk2::before{content:""; position:absolute; left:-10px; top:10px; bottom:10px; width:1px; background:var(--kant-staerk)}
.rail-note{font-size:11px; color:var(--daempet-2); padding:4px 2px 0; display:flex; justify-content:space-between; gap:8px}
.rail-info{background:none; border:none; padding:0; font:inherit; font-size:11px; color:var(--daempet-2); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center}
.rail-info svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; margin-left:3px}
#plan-varsel:not(:empty), #plan-koersel:not(:empty), #uge-let:not(:empty){margin-top:10px}
#tid-gemt{margin:6px 2px 0}

/* ── Dagen: kun den valgte, altid udfoldet ────────────────────────────── */
.dayview{margin-top:10px}
.dayview .dag{display:none; border:1px solid var(--kant); border-radius:16px; background:var(--kort); overflow:hidden; padding:0; --dag-indryk:0px}
.dayview .dag.vis{display:block; border-color:var(--kant-staerk)}
.dayview .dag.i-dag{box-shadow:0 0 0 1px color-mix(in oklab, var(--rav) 25%, transparent)}
.dayview .dag.fortid{opacity:.62}
.dayview .dag[open]{padding-bottom:0}
.dayview .dag > *:not(.pdag){margin-left:0; max-width:none}
.dayview .pdag{grid-template-columns:40px minmax(0, 1fr) auto auto; gap:10px; padding:8px 6px 8px 8px; min-height:54px; cursor:default; border-radius:0;
  align-items:start}
.dayview .pdag:active{background:transparent}
/* planDagBlok() har ringen/maerket INDE i navnelinjen (6/10 2026) - ingen tid-kolonne,
   saa navn og graf faar hele bredden op til byt-knappen. Stilladserne har stadig .pd-tid
   som eget barn og beholder de fire kolonner. */
.dayview .pdag:not(:has(> .pd-tid)){grid-template-columns:40px minmax(0, 1fr) auto}
.dayview .pd-navn > .pd-tid, .pd-r-t > .pd-tid{margin-left:auto; padding-left:10px; flex:none; align-self:flex-start}
.dayview .pd-dag{font-size:11px; color:var(--daempet-2); letter-spacing:.02em; line-height:1; padding-top:1px}
.dayview .pd-dag b{font-size:17px; margin-top:2px}
.dayview .dag.i-dag .pd-dag{color:var(--rav)}
/* TO SPOR I TOPLINJEN (25/9 2026, brugeren: "irriterer oejet"): ikonerne (cykel/loeb og
   haandvaegt) og grafen starter samme sted, navnet og "+ Strength" starter samme sted.
   Foer var der fire venstrekanter (9/59/70/86 px), fordi .akt-ikon har sin egen
   margin-right OVENI flex-gabet. Ikonets margin er derfor den ENE afstand her. */
.dayview .pd-navn{font-size:14px; gap:0; align-items:flex-start}
/* Navnet klipper med ellipsis, tiden staar altid hel (19/9 2026: tiden flyttede op fra
   hoejrekolonnen til navnets linje). */
.dayview .pd-navn{white-space:normal; overflow:visible}
.dayview .pd-navn .pd-navn-t{min-width:0; overflow-wrap:anywhere; line-height:1.25}
.dayview .pd-navn .pd-min{flex:none; margin-left:8px; font-size:13px; font-weight:500; color:var(--daempet); font-variant-numeric:tabular-nums}
/* DAGENS PAS SOM RAEKKER (6/10 2026, planDagBlok()/dagsRaekker()): delt styrke, et
   loebetillaeg eller et pas mere faar hver sin raekke - ikon, navn + egen tid, figur.
   Ikonet og navnet staar paa SAMME kanter som den enkelte toplinje (16 px ikon + 8 px),
   figuren under navnet. En tynd streg fra ikon til ikon samler dagens pas (den siger
   IKKE noget om raekkefoelgen - planen ved ikke, om loebet ligger foer styrken). */
.pd-raekker{display:grid; gap:10px}
.pd-r{position:relative; display:grid; grid-template-columns:16px minmax(0, 1fr); column-gap:8px; align-items:start}
.pd-r > .akt-ikon{width:16px; height:16px; margin-top:2px; color:var(--daempet)}
.pd-r:not(:last-child)::after{content:''; position:absolute; left:7.5px; top:23px; bottom:-8px; width:1px;
  background:var(--kant-staerk)}
.pd-r-t{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; min-width:0;
  font-size:15px; font-weight:600; color:var(--tekst); line-height:1.3}
.pd-r-t .pd-navn-t{min-width:0; overflow-wrap:anywhere}
.pd-r-t .pd-min{font-size:13px; font-weight:500; color:var(--daempet); font-variant-numeric:tabular-nums; white-space:nowrap}
.pd-r-fig{grid-column:2; display:block; min-width:0}
.dayview .pdag .pd-r-fig .segs.kompakt{height:26px; margin-top:6px}
.pd-pille{display:inline-block; margin-left:4px; padding:0 7px; border-radius:999px; font-style:normal;
  border:1px solid var(--kant-staerk); font-size:11px; line-height:17px; vertical-align:1px}
.pd-sum{display:block; margin-top:10px; font-size:12px; color:var(--daempet)}
.pd-sum b{color:var(--tekst); font-weight:600; font-variant-numeric:tabular-nums}
/* Sport pr. dag (#12): rytterens laas - NEUTRAL (rav = handling). */
.pd-laas{display:inline-flex; align-items:center; gap:6px; margin-top:10px; height:28px; padding:0 4px 0 10px;
  border-radius:999px; background:var(--skinne-2); border:1px solid var(--kant-staerk); font-size:12px;
  color:var(--tekst); white-space:nowrap; width:max-content}
.pd-laas svg{color:var(--daempet)}
.pd-laas-x{background:none; border:none; padding:0; font-family:inherit; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--kant); color:var(--tekst); cursor:pointer}
/* Tryk lige ved siden af x'et rammer det stadig (frontend.md: forlaeng kassen, flyt ikke knappen). */
.pd-laas-x{position:relative}
.pd-laas-x::after{content:''; position:absolute; inset:-8px}
/* Styrkens figur (styrkeFigur()): én prik pr. saet, samlet pr. oevelse. */
.styrke-saet{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:7px}
.styrke-saet > span{display:inline-flex; gap:3px}
.styrke-saet i{width:6px; height:6px; border-radius:50%;
  background:color-mix(in srgb, var(--zone-styrke) 80%, transparent);
  box-shadow:0 0 6px color-mix(in srgb, var(--zone-styrke) 45%, transparent)}
.styrke-saet small{font-size:11px; font-weight:400; color:var(--daempet)}
.dayview .pd-navn .akt-ikon{width:16px; height:16px; flex:none; margin:1px 8px 0 0; color:var(--daempet)}
/* Todays foldede dag har intet i hoejrekolonnerne (byt-knappen staar i raekken under), saa
   de fjernes helt - ellers tog deres spor og gab 52 px, og grafen stoppede foer kanten. */
.dayview .dag.foldbar .pd-skift-tom, .dayview .dag.foldbar .pd-tid:empty{display:none}
.dayview .dag.foldbar:not(:has(.pd-tid:not(:empty))) > .pdag,
.dayview .dag.foldbar > .pdag:not(:has(> .pd-tid)){grid-template-columns:40px minmax(0, 1fr)}
.dayview .dag.rest .pd-navn{color:var(--daempet-2); font-weight:500}
/* Fuld bredde: med en fast 170 px stoppede grafen midt i kortet, et andet sted end
   navnet, tiden og knapperne. */
.dayview .pdag .segs.kompakt{width:100%; height:30px; margin-top:8px}
.dayview .pd-tid{display:grid; justify-items:end; gap:2px; text-align:right; line-height:1.15; white-space:nowrap; min-width:0}
.dayview .pd-tid b{font-weight:600; font-size:14px; font-variant-numeric:tabular-nums}
.dayview .pd-tid i{display:block; font-style:normal; font-size:11px; color:var(--daempet-2); margin:0}
.dayview .dag.misset .pd-tid i{color:var(--ikke-gennemfoert); font-weight:600}
/* Karakteren: en lille ring, fyldt til karakteren, tallet ved siden af. */
.gr{display:inline-flex; align-items:center; gap:4px; font-size:12px; line-height:1; color:var(--z2); font-weight:600; font-variant-numeric:tabular-nums}
.gr svg{width:16px; height:16px; transform:rotate(-90deg); flex:none}
.gr circle{fill:none; stroke-width:3}
.gr .t{stroke:var(--skinne-2)}
.gr .a{stroke:var(--z2); stroke-dasharray:50.3; stroke-dashoffset:calc(50.3 * (1 - var(--v, 0))); transition:stroke-dashoffset 1s var(--ud)}
.gr small{font-size:10px; color:var(--daempet-2); font-weight:400; margin-left:-2px}
/* ⟳ med invitation: to korte linjer daempet tekst til venstre for ikonet, hele fladen er
   knappen. Teksten er en mulighed ("Something else today?"), ikke en advarsel - derfor
   daempet-2 og lille. */
.dayview .pd-skift{margin:0; width:auto; height:32px; flex:none; gap:6px; padding:0 2px 0 6px; border-radius:16px; justify-content:flex-end}
.dayview .pd-skift svg{flex:none}
.pd-skift-hint{display:block; font-size:11px; line-height:1.15; color:var(--daempet-2); text-align:right; max-width:68px; font-weight:500}
/* Ved 320 px er raekken traengt (se .pd-skift-kommentaren ovenfor): invitationen klippede
   "4 x 8 min" til "4 x…" (maalt 19/9 2026), saa dér staar ⟳ alene som foer. */
@media (max-width:359px){ .pd-skift-hint{display:none} .dayview .pd-skift{padding:0} }
.dayview .pd-skift-tom{width:32px}
/* Todays fold (25/9 2026): knappen staar i toplinjen, over hele bredden, og bliver
   staaende dér, naar dagen er aaben. Rav kant som "Adjust availability" - det er en
   handling, ikke en tilstand. Teksten skifter paa [open]; pilen vender. */
.dayview .dag.foldbar > .pdag{cursor:pointer}
/* To LIGE brede, ENS knapper (25/9 2026): kant, rav tekst, ikon foran/bagved. Foer
   var den ene udfyldt og den anden omridset, 176 mod 158 px. Ved 320 px bliver de
   114/150, fordi "Something else?" ikke kan staa i en halv raekke - intet klippes. */
.pd-handlinger{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px; margin:10px 0 2px}
/* Under 360 px (6/10 2026): med 1fr 1fr tog "Something else?" (nowrap, 150 px) bredde fra
   folden, og "Hide session" broed over to linjer ved 320. Kolonnerne er nu altid lige
   brede; teksten bliver 13 px og byt-knappens ikon falder - ordet siger det samme. */
@media (max-width:359px){
  .pd-handlinger .pd-fold, .pd-handlinger button.pd-bytte{font-size:13px; padding:0 6px; white-space:nowrap}
  .pd-handlinger button.pd-bytte svg{display:none}
}
.pd-fold{display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 8px;
  border:1px solid color-mix(in srgb, var(--rav) 55%, transparent); border-radius:var(--r-kontrol); color:var(--rav); font-size:14px; font-weight:600}
/* Byt-knappen ved siden af folden: samme rav-tonede flade som ⟳ i toplinjen. */
/* `.dag-skift` (knappens greb for dagsarket) er en rund 36 px-knap - her skal den vokse med ordet. */
.pd-handlinger .pd-bytte{width:auto; height:auto; flex:none; display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 8px; margin:0;
  border-radius:var(--r-kontrol); background:transparent; border:1px solid color-mix(in srgb, var(--rav) 55%, transparent);
  color:var(--rav); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap}
.pd-handlinger .pd-bytte svg{flex:none}
.pd-handlinger .pd-bytte:hover{background:color-mix(in srgb, var(--rav) 24%, transparent); color:var(--rav)}
.pd-fold svg{flex:none; transition:transform .2s var(--ud)}
.dag[open] > .pdag .pd-fold svg{transform:rotate(180deg)}
.pd-fold-skjul, .dag[open] > .pdag .pd-fold-vis{display:none}
.dag[open] > .pdag .pd-fold-skjul{display:inline}
@media (prefers-reduced-motion:reduce){ .pd-fold svg{transition:none} }
.dag-krop{padding:2px 12px 12px; border-top:1px solid var(--kant); font-size:13px; color:var(--daempet); line-height:1.45}
.dag-krop .dag-detalje{margin-top:10px; font-size:13px}
.dag-krop .segs:not(.kompakt){height:56px; margin-top:16px}
/* Load-blokken: foerste ting under toplinjen, foer ordene. */
.loadblk{padding:12px 0 4px}
.loadblk .art-linje{margin-top:0; row-gap:4px}
/* Én blok: ingen skillelinje mellem traeningstypen og Load (6/10 2026). */
.loadblk .lspor-blok:not(:first-child){margin-top:12px}
/* RPE: én slank skala. */
.rpe2{margin-top:12px; padding-top:12px; border-top:1px solid var(--kant)}
.rpe2 + .rpe2{margin-top:10px; padding-top:10px}
.rpe2 .q{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; color:var(--tekst)}
.rpe2 .q b{font-weight:600}
.rpe2 .q .val{color:var(--rav); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.rpe2 .rpe-raekke{display:block; margin-top:0}
.rpe2 .bar{display:flex; gap:3px; margin-top:9px}
.rpe2 .rpe-k{flex:1; min-width:0; min-height:0; height:34px; padding:0; border-radius:8px; background:var(--bg); border:1px solid var(--kant);
  font-size:12px; font-weight:600; color:var(--daempet-2); display:block; font-variant-numeric:tabular-nums;
  transition:transform .15s var(--fjeder), background .15s, color .15s, border-color .15s}
.rpe2 .rpe-k:active{transform:scale(.92)}
.rpe2 .rpe-k.lt{background:var(--rav-dim); border-color:transparent; color:var(--daempet)}
.rpe2 .rpe-k.on{background:var(--rav); border-color:var(--rav); color:var(--paa-rav)}
.rpe2 .anchors{display:flex; justify-content:space-between; font-size:11px; color:var(--daempet-2); margin-top:5px}
.rpe2 .hint{font-size:11px; color:var(--daempet-2); margin-top:8px}
@media (max-width:360px){ .rpe2 .bar{gap:2px} .rpe2 .rpe-k{font-size:11px} }

/* ── Dock-striben: det, cockpittet folder til ─────────────────────────── */
.dock{position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index:3; pointer-events:none;
  opacity:0; transform:translateY(-8px); transition:opacity .25s, transform .3s var(--ud)}
/* UX-runde 2 (24/9 2026): daekker fra headerens underkant til bjaelkens underkant i
   fuld bredde, saa intet skinner igennem mellem header og dock. .dock's egen opacity
   (herover og i @supports-blokken nedenfor) daekker ogsaa dette lag - det er en del
   af samme boks. */
.dock::before{content:""; position:absolute; inset:0 0 -10px 0; z-index:-1;
  background:linear-gradient(to bottom, var(--bg) 0, var(--bg) calc(100% - 10px), transparent); pointer-events:none}
.dock .in{max-width:var(--spalte); margin:0 auto; padding:0 var(--rende)}
.dock .bar{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:7px 8px 7px 10px; border-radius:999px;
  background:color-mix(in oklab, var(--kort) 80%, transparent); border:1px solid var(--kant-staerk);
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.dock .ring{width:30px; height:30px; flex:none}
.dock .ring circle{stroke-width:9}
.dock .ring .ring-bue{stroke:var(--rav)}
.dock .t{font-size:13px; line-height:1.2; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dock .t b{font-weight:600}
.dock .t span{color:var(--daempet)}
.dock .mini{display:flex; gap:4px}
.dock .mini i{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--daempet-2); border:1px solid var(--kant)}
.dock .mini i svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dock .mini i.on{color:var(--rav); border-color:color-mix(in oklab, var(--rav) 50%, transparent); background:var(--rav-dim)}
body.docked .dock{opacity:1; transform:none; pointer-events:auto}
@supports (animation-timeline:scroll()){
  .dock{transition:none; animation:dock-in linear both; animation-timeline:scroll(root); animation-range:250px 330px}
  body.docked .dock{opacity:0; transform:translateY(-8px)}   /* rulletidslinjen ejer den; klassen findes for browsere uden én */
  .cockpit-in{animation:hero-out linear both; animation-timeline:scroll(root); animation-range:0 320px}
  .road .sky{animation:sky-drift linear both; animation-timeline:scroll(root); animation-range:0 460px}
}
@keyframes dock-in{from{opacity:0; transform:translateY(-8px); pointer-events:none} to{opacity:1; transform:none; pointer-events:auto}}
@keyframes hero-out{to{opacity:.15; transform:translateY(28px)}}
@keyframes sky-drift{to{transform:translateY(24px) scale(1.04); opacity:.6}}
@media (prefers-reduced-motion: reduce){ .cockpit-in, .road .sky, .dock, .cockpit-mig .rider{animation:none !important} .gr .a{transition:none} }
/* Under turen ejer lyskeglen skaermen: rulle-animationerne (cockpittet der
   toner ud, vejen der driver, dock'en) ville dæmpe netop det trin, turen peger
   paa, og flytte maalet under keglen. */
#v-app.tur-viser .cockpit-in, #v-app.tur-viser .road .sky, #v-app.tur-viser .dock, #v-app.tur-viser .cockpit-mig .rider{animation:none !important}
#v-app.tur-viser .dock{opacity:0 !important; pointer-events:none !important}

/* ── TODAY-COCKPITTET (19/9 2026, today-cockpit.html + TODAY-COCKPIT.md) ── */
.cockpit-idag{background:radial-gradient(120% 60% at 50% -14%, color-mix(in oklab, var(--daggry, var(--daempet)) 34%, transparent), transparent 62%), var(--bg); transition:background .6s}
/* Bundpolstringen var 50px, saa passet kunne ride op over kanten; siden UX-runde 2 staar
   passet OVER cockpittet, og de 50px var blot et tomt felt nederst paa Today. */
.cockpit-idag .cockpit-in{padding:10px var(--rende) 16px; gap:12px}

/* Morgenen: dommens ord + ring (tracker), eller badge + progressionsordet. */
.morgen{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:start}
.morgen .lbl{font-size:12px; color:var(--daempet-2); display:flex; align-items:center; gap:8px}
.morgen .tilstand{margin-top:8px}
.morgen .hvor-titel{margin-top:8px}
.morgen-dom{font-family:var(--skrift-dom); font-weight:400; font-size:clamp(19px,5.3vw,22px); line-height:1.24; letter-spacing:-.005em; color:var(--tekst); margin:8px 0 0; text-wrap:pretty}
.morgen-dom em{font-style:italic; color:var(--rav)}
/* Beredskabskortets knap under dommen (28/9 2026): kan bryde over to linjer i den smalle spalte ved siden af ringen. */
.morgen-flyt{margin-top:12px; min-height:0; padding:9px 12px 9px 14px; justify-content:space-between; gap:10px; text-align:left; white-space:normal; line-height:1.2}
.morgen-flyt .mf-tekst{display:flex; flex-direction:column; min-width:0}
.morgen-flyt small{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.62}
.morgen-flyt b{font-size:15px; font-weight:700; margin-top:1px}
.morgen-flyt .mf-tekst > span{font-size:12.5px; font-weight:500; opacity:.72; margin-top:1px}
.morgen-flyt svg{flex:none; opacity:.7}
.morgen .src{font-size:12px; color:var(--daempet-2); margin-top:8px}
.morgen .ring{width:84px; height:84px; margin-top:2px}
.morgen .ring circle{stroke-width:7}
.morgen .ring .ring-bue{stroke:var(--daggry)}
.morgen .ring-midt b{font-size:24px}
.morgen .ring-midt small{font-size:11px}
.morgen .badge-ring{width:64px; height:64px; margin-top:8px}
.morgen .badge-ring svg{width:26px; height:26px}
.morgen .dagsdom-tilbud{margin:10px 0 0}

/* Kroppen (mock'ens .dial + .dials.n3): én dial pr. maalt signal. */
.kdial{position:relative; text-align:left; padding:10px 11px; border-radius:18px; background:var(--kort); border:1px solid var(--kant);
  display:grid; gap:5px; min-width:0}
.kdial .hd2{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--daempet); white-space:nowrap; overflow:hidden}
.kdial .hd2 svg{color:var(--daempet-2)}
.kdial .v{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 4px}
.kdial .v b{font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}
.kdial .v small{font-size:11px; color:var(--daempet)}
.kdial .v .of{font-size:12px; color:var(--daempet)}
.kdial .cap{font-size:11px; color:var(--daempet-2); line-height:1.35}
.kdial .cap b{color:var(--daempet); font-weight:600}
/* "Tonight" -> maane, naar flisen er for smal til "Tonight 6:50–7:30" (93 px ved 11 px). */
#idag-krop .kdial .cap{container-type:inline-size}
.cap-maane{display:none; width:11px; height:11px; margin-right:3px; vertical-align:-1px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round}
@container (max-width: 92.9px){
  .cap-ord{display:none}
  .cap-maane{display:inline-block}
}
.kdial .spor{height:4px; margin-top:2px}
.kdial .spor .maal-maerke{top:-4px; height:12px}
/* Spaend-baner (HRV, Resting HR): de sidste 30 naetter som et interval, et
   maerke hvor man plejer at ligge, dagens maerke ovenpaa. */
.kspan{position:relative; display:block; height:4px; border-radius:4px; background:var(--skinne-2); margin:4px 0 2px}
/* Det saedvanlige spaend og medianen i --z2 (brugeren 19/9 2026): baandet er "her plejer du at
   ligge", og groen er husets farve for god tilstand. Nattens maerke (.me) er stadig blaek. */
.kspan .rg{position:absolute; top:0; bottom:0; border-radius:4px; background:var(--z2); opacity:.45}
.kspan .us{position:absolute; top:-3px; width:2px; height:10px; border-radius:2px; background:var(--z2)}
.kspan .me{position:absolute; top:-4px; width:3px; height:12px; border-radius:2px; background:var(--tekst)}
.dials.n3 .kdial{padding:9px; gap:4px}
.dials.n3 .kdial .hd2{font-size:11px; gap:5px}
.dials.n3 .kdial .v b{font-size:19px}
.dials.n3 .kdial .v .of{font-size:11px}
.dials.n3 .kdial .cap{font-size:11px}
@media (max-width:359px){ .dials.n3 .kdial .hd2 svg{display:none} .dials.n3 .kdial .hd2{font-size:11px} }
.kdial.off{border-style:dashed}
.kdial.off .v{color:var(--daempet-2)}
.kdial.laas{cursor:pointer}
/* Ventetilstand for kroppens dials (20/9 2026): tallet er det sidst maalte, daempet, med
   nattens ugedag som maerke; nattens maerke paa spaendet er hult; et blødt lysstrejf
   glider over dial'en, og ikonet traekker vejret. Se tegnKropDials(). */
.kdial.venter{overflow:hidden}
.kdial.venter .v b{color:var(--daempet-2); font-weight:500}
/* Lidt mindre end det friske tal (19px i n3): maalt 20/9 2026 - ved 390 px broed "7h 15m" + "Sat" ellers om. */
.dials.n3 .kdial.venter .v b{font-size:17px}
.kdial .nat-dag{font-size:10px; line-height:1.5; color:var(--daempet-2); border:1px solid var(--kant); border-radius:6px; padding:0 4px; align-self:center}
.kdial.venter .kspan .me{background:transparent; border:1px solid var(--daempet-2); box-sizing:border-box}
.kdial.venter .spor .fyld{opacity:.35}
.kdial.venter .cap{color:var(--daempet)}
.kdial.venter .hd2 svg{animation:nat-aande 3.2s ease-in-out infinite}
.kdial.venter::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--tekst) 7%, transparent) 50%, transparent 65%);
  transform:translateX(-100%); animation:nat-strejf 3.2s ease-in-out infinite}
@keyframes nat-aande{50%{opacity:.35}}
@keyframes nat-strejf{to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){ .kdial.venter .hd2 svg, .kdial.venter::after{animation:none} }
.kdial .v .laas-ikon{width:22px; height:22px}
.kdial .haard-dage{margin-top:1px; gap:4px; font-size:9.5px}
.kdial .haard-dage i{width:7px; height:7px; border-radius:50%; margin:0 auto 3px}
#idag-krop:empty, #idag-dag:empty{display:none}
/* KROPPENS TRE DIALS DELER ÉT RAEKKEGITTER (subgrid, 19/9 2026). Sleeps "of 7h 47m" gav
   dens vaerdi-raekke to linjer, saa dens streg og tekst laa en linje under HRV/RHR - brugeren:
   "irriterer mit oeje". Navn, tal, streg og tekst faar hver sin FAELLES raekke, saa streg staar
   ud for streg. Raekkerne er sat eksplicit: mangler en dial sin streg (intet maalt), maa teksten
   ikke rykke op i stregens raekke. Samme greb som .spec .celle (regel i frontend.md). */
#idag-krop{grid-template-rows:auto auto auto auto}
#idag-krop .kdial{display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:4px; align-content:start}
#idag-krop .kdial .hd2{grid-row:1}
#idag-krop .kdial .v{grid-row:2; align-self:start}
#idag-krop .kdial .spor, #idag-krop .kdial .kspan{grid-row:3; align-self:center}
#idag-krop .kdial .cap{grid-row:4}
#idag-krop-note:empty, #idag-teaser:empty{display:none}
#idag-teaser .soevn-teaser{margin-top:0}

/* Form-raekken: de tre kendte bjaelker, slanket, med progressionsordet til hoejre. */
.formrow{display:grid; gap:6px; padding:2px 2px 0}
.formrow .fh{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--daempet)}
.formrow .fn{font-size:11px; color:var(--daempet-2)}
.formrow .lag{margin-top:0; gap:6px 10px}
.formrow .lag-n{font-size:12px}
.formrow .lag-spor{height:4px}
.formrow .lag-v{font-size:13px}
.formrow .forklar{margin-top:2px}

/* Maallinjen (.goalline) er fjernet fra Today (24/9 2026, UX-runde 2) -
   maalet bor kun paa Plan. */

/* KOMPAKT MORGENKORT (24/9 2026, brugeren: dagstatus oeverst, men ikke fylde saa
   meget). Ring + dom + de tre kropstal med en KORT baseline (spaendet og "Usually N").
   Load today, naeste haarde dag og Form staar under dagens pas (#idag-efter), ikke her.
   Gaelder OGSAA under turen (25/9 2026): turen skal vise den app, brugeren faar - ikke
   en aeldre udgave. Undtagelserne med #v-app:not(.tur-viser) er fjernet. */
#v-app #idag-cockpit .cockpit-in{gap:8px; padding-bottom:10px}
#v-app #idag-cockpit .morgen .lbl, #v-app #idag-cockpit .morgen .src{display:none}
#v-app #idag-cockpit .morgen .tilstand, #v-app #idag-cockpit .morgen .hvor-titel{margin-top:0}
#v-app #idag-cockpit .morgen-dom{font-size:17px; line-height:1.28; margin-top:4px}
/* Ringen fylder hoejden ved siden af teksten (25/9 2026, brugeren: "capacity" stod
   klemt): 70 px = tekstsidens hoejde (maalt 71 px ved 320 og 390), saa kortet ikke
   bliver hoejere. Tallet stoerre, "capacity" federe. */
#v-app #idag-cockpit .morgen .ring{width:70px; height:70px; margin-top:0}
#v-app #idag-cockpit .morgen .ring-midt b{font-size:22px; line-height:1}
#v-app #idag-cockpit .morgen .ring-midt small{font-size:11px; font-weight:600; color:var(--daempet); margin-top:2px}
#v-app #idag-cockpit .morgen .badge-ring{width:48px; height:48px; margin-top:0}
#v-app #idag-cockpit #idag-krop .kdial{padding:8px 9px; gap:3px}
/* Baseline-teksten maa bryde til to linjer ved 320 px ("Tonight 6:50–7:30" blev
   ellers klippet til "Tonight 6:5…"); ved 390 px staar alle tre paa én linje. */
/* Under passet: dagens load + naeste haarde dag og Form-raekken. */
.idag-efter{display:grid; gap:14px; margin-top:14px}

/* Dock-striben: samme .dock/.ring/.bar/.mini som Plans (delt), kun daggry-
   farven og de to Today-specifikke animation-ranges er nye. */
#idag-dock .bd{width:30px; height:30px; border-radius:50%; border:1px solid var(--kant-staerk); display:grid; place-items:center; color:var(--daggry)}
#idag-dock .ring .ring-bue{stroke:var(--daggry)}
@supports (animation-timeline:scroll()){
  .cockpit-idag .cockpit-in{animation:none}
  /* Morgenkortet toner IKKE ud ved rul siden UX-runde 2 (24/9 2026): det staar nu UNDER
     dagens pas, saa hero-out over de foerste 260 px ville have gjort det usynligt, foer man naar det. */
  .cockpit-idag .morgen{animation:none}
  #idag-dock{animation-range:220px 300px}
}
#v-app.tur-viser .morgen{animation:none !important}

/* Passet: Plans dagsblok. Stod det under cockpittet, red det 28px op over kanten; siden
   UX-runde 2 (24/9 2026) staar det oeverst under statuslinjen og har ingen negativ margen. */
#dagskort.session-wrap{position:relative; z-index:2; margin-top:0}
/* Free-laasen ved 320 px: ghost-tiden til hoejre tog pladsen fra "Your session for today". */
@media (max-width:359px){ .dag.laast .pd-tid{display:none} .dag.laast .pd-navn{white-space:normal; line-height:1.2} }
.dag.laast .stillads{filter:blur(3px); opacity:.45; pointer-events:none; user-select:none}
.laas-boks{display:grid; gap:8px; padding:12px 0 2px; border-top:1px solid var(--kant); margin-top:12px}
.laas-boks b{font-size:15px; color:var(--tekst)}
.laas-boks p{font-size:13px; color:var(--daempet); line-height:1.45; margin:0}
.laas-boks .laas-proeve { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--daempet); }
.laas-boks .pro-laas-punkter{margin:0}
.laas-boks .dagsdom-tilbud{margin:4px 0 0; text-align:center}  /* flugter med de centrerede punkter */
/* Det kompakte laaste pas (24/9 2026) har ingen sloerede trin over boksen -
   skillelinjen og luften derover hoerte til dem. */
.dag.laast .laas-boks{border-top:none; margin-top:0; padding-top:2px}

/* "The next two weeks"-knappen til Plan. Ingen global button-reset i
   forma.css (se CLAUDE.md) - knappen baerer sin egen. */
.own{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; text-align:left; padding:11px 4px; margin-top:0;
  background:none; border:none; font:inherit; color:inherit; cursor:pointer; text-decoration:none}
.own .ic{width:38px; height:38px; border-radius:12px; background:var(--kort); border:1px solid var(--kant); display:grid; place-items:center; color:var(--rav)}
.own .ic svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.own b{display:block; font-weight:600; font-size:14px}
.own span{font-size:12px; color:var(--daempet)}
.own > svg{width:16px; height:16px; stroke:var(--daempet-2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Release notes-raekkens hoejre side (release-nr + chevron som ÉN kolonne),
   samme figur som .own > svg alene. */
.own .end{display:flex; align-items:center; gap:8px}
.own .end svg{width:16px; height:16px; stroke:var(--daempet-2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Raekker adskilt af en hairline - .own:first-child (ovenfor) fjerner den
   for den foerste, synlig eller ej (Referrals's wrapper-div taeller). */
.list .own + .own{border-top:1px solid var(--kant)}

/* ── YOU-COCKPITTET (19/9 2026, you-cockpit.html + YOU-COCKPIT.md) ──────────
   Rytteren + abonnementslinjen + motoren som dials man taster i + en stille
   evidenslinje + kroppen (Weight/Sex/Age) + W/kg-linjen. Tokens oversat efter
   PLAN-you-cockpit.md's tabel: --g0→--bg, --g1→--kort, --g2→--kort-2,
   --g3→--skinne-2, --line→--kant, --line-2→--kant-staerk, --ink→--tekst,
   --ink-2→--daempet, --ink-3→--daempet-2, --amber→--rav, --amber-ink→--paa-rav,
   --amber-dim→--rav-dim, --dawn→--daggry, --gut→--rende, --r-pill→999px. */
.cockpit-mig{--daggry:var(--z1);
  background:radial-gradient(120% 60% at 50% -14%, color-mix(in oklab, var(--daggry) 34%, transparent), transparent 62%), var(--bg)}
.cockpit-mig .cockpit-in{padding:10px var(--rende) 22px; gap:12px}

/* 1a. Rytteren: avatar, navnet som feltet det er, underlinjen med fasen. */
.rider{display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center}
.rider .avatar{position:relative;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--daggry) 28%, transparent), 0 12px 30px -12px color-mix(in oklab, var(--daggry) 60%, transparent)}
.rider .avatar .founder-badge{position:absolute; right:-3px; bottom:-3px; width:24px; height:24px; border-radius:50%;
  background:var(--rav); color:var(--paa-rav); display:grid; place-items:center; border:2px solid var(--bg); filter:none}
.rider .avatar .founder-badge svg{width:12px; height:12px; fill:currentColor}
.rider .avatar .creator-badge{position:absolute; left:-3px; bottom:-3px; width:24px; height:24px; border-radius:50%;
  background:var(--kort); color:var(--groen); display:grid; place-items:center; border:2px solid var(--bg); filter:none}
.rider .avatar .creator-badge svg{width:13px; height:13px; fill:currentColor}
.rider-sub{font-size:13px; color:var(--daempet); margin-top:5px; line-height:1.35}
.rider-sub b{color:var(--tekst); font-weight:600}

/* 1b. Abonnementslinjen: ÉN raekke af piller (mock'ens .planline/.mp) - resten
   ligger bag "Manage"/"Have a code?" som #ark-abon. Den gamle .abon-linje af
   samme navn (kortets baggrund/ramme) neutraliseres for netop dette element -
   en pille-raekke skal ikke ogsaa vaere et rav-kort. */
#abonnement-kort.abon{background:none; border:none; padding:0; margin:0; overflow:visible;
  font-size:inherit; color:inherit; line-height:inherit}
.planline{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.mp{display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 11px 0 9px; border-radius:999px;
  font-size:12px; color:var(--daempet); background:color-mix(in oklab, var(--kort) 70%, transparent); border:1px solid var(--kant);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); white-space:nowrap; font-family:inherit; cursor:pointer}
.mp b{color:var(--tekst); font-weight:600}
.mp svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.mp .st svg{fill:var(--rav); stroke:var(--rav); stroke-width:1}
button.mp.act{color:var(--rav); font-weight:600}
.planline .why{flex-basis:100%; font-size:12px; color:var(--daempet-2); line-height:1.4}
/* Abonnementslinjen bliver et kort, mens proeveperioden loeber (mockup #f5). */
#abonnement-kort.abon.med-trial{display:block; padding:14px; margin:4px 0 0; border-radius:var(--r-flise);
  background:linear-gradient(160deg, var(--rav-dim), transparent 60%), var(--kort);
  border:1px solid color-mix(in oklab, var(--rav) 30%, transparent); cursor:pointer}
#abonnement-kort.med-trial .planline-top{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.pill{display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:0 13px 0 10px; border-radius:999px;
  background:var(--rav); color:var(--paa-rav); font-weight:600; font-size:12px; border:none; font:inherit; cursor:pointer}
.pill svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* Sektionslinjen inde i cockpittet ("Your engine"/"Your body"). */
.lbl{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--daempet-2); margin-top:4px; min-width:0}
.lbl b{color:var(--tekst); font-weight:600; font-size:13px; flex:none}
.lbl span{min-width:0}
.lbl .inf{margin-left:auto}
.inf{flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--kant-staerk);
  background:none; display:grid; place-items:center; color:var(--daempet-2); font:inherit; cursor:pointer}
.inf svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}

/* 1c/1e. Dial'erne som FELTER: tallet ER feltet, en hairline under det, rav i
   fokus - samme affordance som navnet. Skal'en (.kdial/.dials/.dials.n3) er
   Today's, se TODAY-COCKPITTET; det, der foelger her, er kun det, en
   REDIGERBAR dial tilfoejer. */
.kdial.felt{cursor:text}
.kdial:focus-within{border-color:var(--rav)}
.kdial .v{position:relative}
.kdial .v input, .kdial .v select{background:none; border:0; border-bottom:1px solid var(--kant-staerk); border-radius:0; outline:0;
  padding:0 0 1px; margin:0; font-family:inherit; font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:var(--tekst); min-width:0; transition:border-color .15s;
  min-height:0; height:auto; line-height:1.05; box-shadow:none}   /* den globale input-regel (48px, 12px 14px, fokus-skygge) gaelder ikke her */
.kdial .v input{width:calc(var(--w, 3) * 1ch + 3px)}
.kdial .v input::placeholder{color:var(--daempet-2)}
.kdial .v input:focus, .kdial .v select:focus{border-color:var(--rav); outline:none; box-shadow:none}
/* Navnets hairline spaender hele bredden (mock'ens .name) - tegnAvatar()s size-attribut styrer ikke bredden her. */
.rider .profil-navn{width:100%; max-width:none}
/* Mock'ens .sp/.switchrow-maal for fliser og kontakter paa de to cockpit-faner (maalt side om side 19/9 2026). */
#s-mig .brik, #s-forbind .brik{padding:12px 10px 10px}
#s-mig .valg{padding:12px 0}
#s-mig .valg-t{font-size:14px}
/* Dial-raekkernes luft som i mock'en (maalt side om side 19/9 2026: 22/27/19 px mod 17/22/14).
   min-height, ikke height: en ombrudt tekst maa stadig vokse. */
#s-mig .kdial .hd2, #s-forbind .kdial .hd2{min-height:22px}
#s-mig .kdial .v, #s-forbind .kdial .v{min-height:27px}
#s-mig .kdial .cap, #s-forbind .kdial .cap{min-height:19px}
/* Kontoraekkernes ikonskive er graa paa You/Connections (mock'ens .own .ic = ink-2); Todays "next two weeks"-raekke er rav og roeres ikke. */
#s-mig .own .ic, #s-forbind .own .ic{color:var(--daempet)}
/* Evidens-arkene (#ark-ev-*): tallet stort oeverst, striben i laesestoerrelse, chips til
   handlingerne - mock'ens .ana/.big/.chipb. Striben (.nvi) er skrevet til en smal celle;
   herinde faar den arkets bredde og ingen ramme. */
.ev-stor{display:flex; align-items:baseline; gap:6px; margin:4px 0 12px}
.ev-stor:empty{display:none}
.ev-stor b{font-size:34px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tekst)}
.ev-stor small{font-size:13px; color:var(--daempet)}
.ark .nvi, .ark .nvi.paakraevet, .ark .nvi.tvivl, .ark .nvi.daempet{margin:0; padding:0; background:none; border:none;
  font-size:15px; line-height:1.5; color:var(--daempet)}
.ark .nvi + .nvi{margin-top:14px; padding-top:14px; border-top:1px solid var(--kant)}
.ark .nvi::before{display:none}
.ark .nvi b, .ark .nvi.paakraevet b, .ark .nvi.tvivl b, .ark .nvi.daempet b{display:block; color:var(--tekst); font-weight:600; margin-bottom:6px}
.ark .ftp-stribe .nvi-fod{margin-top:10px; font-size:12px; color:var(--daempet-2); opacity:1}
.ark .nvi .knap-linje{margin-top:14px; gap:8px}
.ark .nvi .knap-linje button{display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:999px;
  background:var(--kort-2); border:1px solid var(--kant-staerk); color:var(--tekst); font-size:13px; font-weight:600}
.ark .nvi .knap-linje button[data-ftp-brug], .ark .nvi .knap-linje button[data-lthr-brug],
.ark .nvi .knap-linje button[data-lthr-loeb-brug], .ark .nvi .knap-linje button[data-fart-brug]{
  background:var(--rav); border-color:var(--rav); color:var(--paa-rav)}
.kdial .v select{appearance:none; -webkit-appearance:none; padding-right:16px; max-width:100%}
.kdial .v .kolon{font-size:22px; font-weight:600; color:var(--daempet-2)}
.kdial .chev{position:absolute; right:0; top:50%; transform:translateY(-50%); width:11px; pointer-events:none; stroke:var(--daempet-2)}
.dials.n3 .kdial .v input, .dials.n3 .kdial .v select, .dials.n3 .kdial .v .kolon{font-size:19px}
/* Tre felter paa 320 px: ved 19px har "77" + "kg" ikke plads paa én linje (maalt 19/9 2026).
   Staar EFTER 19px-reglen ovenfor - samme specificitet, den sidste vinder. */
@media (max-width:359px){ .dials.n3 .kdial .v b, .dials.n3 .kdial .v input, .dials.n3 .kdial .v select, .dials.n3 .kdial .v .kolon{font-size:17px} }
.kdial .cap .kilde:empty{display:none}
.kdial .kilde.dev{color:var(--z2)}
.kdial .kilde.dev::before{content:"✓ "}
.kdial.est{border-style:dashed}
.kdial.stat{cursor:pointer}

/* 1d. Evidenslinjen: ÉN stille raekke inde i motoren - prik, saetning, chevron.
   Analysen selv staar stadig i sin .nvi-stribe, nu inde i arket. */
.ev{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left;
  padding:9px 10px 9px 12px; border-radius:14px; background:color-mix(in oklab, var(--kort) 55%, transparent); border:1px solid var(--kant);
  font-size:12px; color:var(--daempet); line-height:1.3; font-family:inherit; cursor:pointer; transition:transform .18s var(--fjeder)}
.ev:active{transform:scale(.98)}
.ev .dt{width:8px; height:8px; border-radius:50%; background:var(--z2); box-shadow:0 0 0 3px color-mix(in oklab, var(--z2) 22%, transparent)}
.ev.ask .dt{background:var(--rav); box-shadow:0 0 0 3px var(--rav-dim)}
.ev b{color:var(--tekst); font-weight:600}
.ev > span:nth-child(2){min-width:0}
.ev svg{width:14px; height:14px; stroke:var(--daempet-2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* 1f. W/kg-linjen: tallet, som Weight/FTP ovenfor giver, med niveauet som fem
   segmenter uden tal (ingen algoritmekriterier - reglen). */
.wkg{display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:12px; align-items:center; padding:10px 12px 10px 10px; border-radius:18px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--z2) 14%, var(--kort)), var(--kort) 55%); border:1px solid color-mix(in oklab, var(--z2) 30%, var(--kant))}
.wkg .ic{width:36px; height:36px; border-radius:50%; background:var(--bg); border:1px solid color-mix(in oklab, var(--z2) 40%, var(--kant-staerk));
  display:grid; place-items:center; color:var(--z2); box-shadow:0 0 18px -4px color-mix(in oklab, var(--z2) 70%, transparent)}
.wkg .ic svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.wkg .n{display:flex; align-items:baseline; gap:4px; white-space:nowrap}
.wkg .n b{font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.wkg .n small{font-size:11px; color:var(--daempet)}
.wkg .sc{display:grid; gap:4px; min-width:0}
.wkg .lv{font-size:13px; font-weight:600; color:var(--z2)}
.wkg .steps{display:flex; gap:3px; margin:0; border:0; padding:0}
.wkg .steps i{flex:1; height:4px; border-radius:4px; background:var(--skinne-2)}
.wkg .steps i.on{background:var(--z2); box-shadow:0 0 8px color-mix(in oklab, var(--z2) 60%, transparent)}
.wkg .fn{font-size:11px; color:var(--daempet-2); line-height:1.3}
@media (max-width:359px){ .wkg{gap:10px; padding:9px 10px 9px 9px} .wkg .n b{font-size:22px} .wkg .fn{display:none} }

/* ── 2. Dock'en: hvad cockpittet folder til ─────────────────────────────── */
#mig-dock{--daggry:var(--z1)}
#mig-dock .avm{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--z2), var(--z1));
  display:grid; place-items:center; color:var(--bg); font-weight:700; font-size:12px}
@supports (animation-timeline:scroll()){
  .cockpit-mig .cockpit-in{animation:none}
  .cockpit-mig .rider{animation:hero-out linear both; animation-timeline:scroll(root); animation-range:0 220px}
  #mig-dock{animation-range:200px 280px}
}

/* ── 3. Under cockpittet: hvad man traener, hvad det skal goere ─────────── */
.grp{margin-top:22px}
.sh{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sh h3{font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0}
.fl{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--daempet); margin-top:12px}
.fl b{color:var(--tekst); font-weight:600; font-size:13px}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:8px calc(-1 * var(--rende)) 0; padding:0 var(--rende) 2px;
  -webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; background:var(--kort); border:1px solid var(--kant); border-radius:999px; min-height:38px; padding:0 14px; font-size:13px;
  display:inline-flex; align-items:center; color:var(--daempet); white-space:nowrap; font-family:inherit; cursor:pointer; transition:transform .15s var(--fjeder), background .15s, color .15s, border-color .15s}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--rav-dim); color:var(--rav); border-color:var(--rav); font-weight:600}

/* ── 4. Save-bjaelken: findes kun, naar noget er aendret ────────────────── */
.gem-bjaelke{position:fixed; left:0; right:0;
  bottom:calc(52px + 12px + env(safe-area-inset-bottom) + 10px + var(--browser-bund)); z-index:22;
  pointer-events:none; opacity:0; transform:translateY(14px); transition:opacity .25s, transform .35s var(--fjeder)}
.gem-bjaelke .in{max-width:var(--spalte); margin:0 auto; padding:0 var(--rende)}
.gem-bjaelke .bar{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 6px 6px 14px; border-radius:999px;
  font-size:13px; color:var(--daempet); background:color-mix(in oklab, var(--kort-2) 88%, transparent); border:1px solid var(--kant-staerk);
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.gem-bjaelke .bar b{color:var(--tekst); font-weight:600}
/* Teksten bryder om ved 320 px i stedet for at blive klippet (25/9 2026): "your plan
   rebuilds after you save" er netop den del, der forsvandt. */
.gem-bjaelke .bar > span{min-width:0; line-height:1.3}
.gem-bjaelke .handling{width:auto; min-height:36px; border-radius:999px; padding:0 18px; font-size:14px}
.gem-bjaelke #mig-svar:empty{display:none}
.gem-bjaelke #mig-svar{margin:0 4px 8px}
#s-mig.aendret .gem-bjaelke{opacity:1; transform:none; pointer-events:auto}

/* Arkenes ene prosa-stil (forklaringerne bag hvert (i)) og Age-arkets ene felt. */
.ark .ana{font-size:15px; line-height:1.5; color:var(--daempet)}
.ark .ana b{color:var(--tekst); font-weight:600}
.ark .ana p+p{margin-top:10px}
.ark-felt{display:block; font-size:13px; color:var(--daempet); margin:14px 0 6px}
.ark-input{width:100%; min-height:48px; padding:0 14px; border-radius:var(--r-kontrol); background:var(--felt);
  border:1px solid var(--kant-staerk); color:var(--tekst); font-size:15px; font-family:inherit}
.ark-input:focus{border-color:var(--rav); outline:none; box-shadow:none}
.dato-tre{display:grid; grid-template-columns:1fr 1fr 1.6fr; gap:8px}
.dato-tre .ark-input{text-align:center; font-variant-numeric:tabular-nums}

/* ── CONNECTIONS-COCKPITTET (19/9 2026) - kun ledningens byggesten er tilbage ──
   Statusbaandet (.fline/.forbind-ord/.forbind-dom/.forbind-badge), de tre dials
   og dock-striben er vaek siden 3/10 2026: kilde-kortet (.fk-*, laengere nede)
   siger forbindelsens tilstand ét sted. .flow/.flowcap, .follow, .foot-row og
   #forbind-svar bliver. */
/* 2. Ledningen: ind -> FORMA -> ud. Pulsen loeber KUN, hvor adgangen faktisk
   er givet. Erstatter den tidligere .flow/.flow-node-figur. */
.flow{display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:0; padding:6px 2px 0}
.flow .nd{width:40px; height:40px; border-radius:50%; background:var(--kort); border:1px solid var(--kant-staerk); display:grid; place-items:center; color:var(--daempet); position:relative; z-index:1}
.flow .nd svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.flow .nd.on{color:var(--daggry); border-color:color-mix(in oklab, var(--daggry) 50%, var(--kant-staerk))}
.flow .nd.dim{color:var(--daempet-2); border-style:dashed}
.flow .nd.forma{width:52px; height:52px; background:var(--bg); border-color:color-mix(in oklab, var(--rav) 45%, var(--kant-staerk)); color:var(--rav);
  box-shadow:0 0 0 6px color-mix(in oklab, var(--daggry) 16%, transparent), 0 0 30px -6px color-mix(in oklab, var(--daggry) 70%, transparent)}
.flow .nd.forma svg{width:26px; height:26px; stroke-width:6}
.flow .wire{position:relative; height:2px; background:var(--kant-staerk); margin:0 -1px}
.flow .wire i{position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--daggry);
  box-shadow:0 0 10px 1px color-mix(in oklab, var(--daggry) 70%, transparent); animation:ledning-puls 2.2s linear infinite}
.flow .wire.out i{animation-delay:1.1s}
.flow .wire.off{background:repeating-linear-gradient(90deg, var(--kant-staerk) 0 5px, transparent 5px 10px)}
.flow .wire.off i{display:none}
.flow .wire.dim{background:var(--kant)}
.flow .wire.dim i{display:none}
@keyframes ledning-puls{from{transform:translateX(0); opacity:0} 12%{opacity:1} 88%{opacity:1} to{transform:translateX(calc(var(--len,80px) - 8px)); opacity:0}}
.flowcap{display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--daempet-2); margin-top:-4px; line-height:1.35}
.flowcap b{color:var(--daempet); font-weight:600}
.flowcap .r{text-align:right}

.forbind-fin{font-size:12px; color:var(--daempet-2); text-align:center; line-height:1.4}

/* Under cockpittet: udstyrets opfoelgning som et kort (mock'ens .follow),
   udendoers-tovalget som en graa seg (IKKE rav - mock'ens seg er graa). */
.follow{margin-top:10px; padding:12px; border-radius:16px; background:var(--kort); border:1px solid var(--kant)}
.follow b{display:block; font-size:14px; font-weight:600}
.follow .seg{margin-top:10px; background:var(--bg)}
#s-forbind .opfoelg.follow{margin:10px 0 0; padding:12px; border-left:none}
#s-forbind .tovalg{gap:0; padding:3px; background:var(--felt); border-radius:var(--r-kontrol)}
#s-forbind .tovalg button{border:none; background:none}
#s-forbind .tovalg button.valgt{background:var(--skinne-2); border:1px solid var(--kant-staerk); color:var(--tekst)}

.foot-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--daempet); margin-top:8px}
.foot-email{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
/* Kontoen nederst paa You (8/10 2026): mailen paa sin egen linje, handlingerne under
   - Log out til venstre, operatoerens Pro/Free + Admin til hoejre. Paa én linje
   afkortede mailen og "Log out" braekkede i to. */
.konto-handlinger{flex-wrap:wrap; gap:10px 14px; margin-top:28px; padding-top:16px; border-top:1px solid var(--kant)}
.konto-handlinger .foot-email{flex:1 0 100%; order:-2}
.konto-handlinger .log-ud{order:-1; margin-right:auto; white-space:nowrap; font-size:14px; padding:8px 0}
.konto-handlinger .admin-link{white-space:nowrap}
/* Referrals ligger i sin egen <div> (skjules uden referral_berettiget), saa
   `.own + .own` gav ingen streg mellem den og Guided tour. */
#referral-kort-felt:not(.skjul) + .own{border-top:1px solid var(--kant)}
/* "Your data"-arket: loeftet oeverst, kopi og sletning under (8/10 2026). */
.data-liste{margin-top:6px}
.list .valg + div > .valg{border-top:1px solid var(--kant)}

/* Connections' fejllinje (auto-gem, 26/9 2026 - ingen Save-bjaelke laengere). */
#forbind-svar:empty{display:none}
#forbind-svar{margin:12px 4px 0}

@media (prefers-reduced-motion: reduce){ .flow .wire i{animation:none} }

/* ══ ACTIVITIES-COCKPITTET (19/9 2026) ══════════════════════════════════════
   Bygget 1:1 efter docs/mockups/makeover/activities-cockpit.html (kontrakt:
   ACTIVITIES-COCKPIT.md). Vejen BAG dig i stedet for Plans vej FORAN -
   .dials/.dial->.kdial/.road/.sky/.stagecap/.dock/.lbl/.inf/.kdial findes
   allerede og genbruges urørt; alt nyt her er scopet under .cockpit-akt/
   #akt-dock/#s-aktiviteter, saa Plan/Today/You/Connections ikke flytter sig.
   Tokens oversat som de oevrige cockpits: --g0->--bg, --g1->--kort,
   --g2->--kort-2, --g3->--skinne, --line->--kant, --line-2->--kant-staerk,
   --ink->--tekst, --ink-2->--daempet, --ink-3->--daempet-2, --amber->--rav,
   --amber-dim->--rav-dim, --gut->--rende, --ease-spring->--fjeder,
   --ease-out->--ud. --z2 er allerede samme navn og vaerdi begge steder. */
.cockpit-akt{--daggry:var(--z1);
  background:radial-gradient(120% 60% at 50% -14%, color-mix(in oklab, var(--daggry) 34%, transparent), transparent 62%), var(--bg)}
.cockpit-akt .cockpit-in{padding:8px var(--rende) 0; gap:12px}
.cockpit-akt .cockpit-in.low{padding:12px var(--rende) 22px}
/* Appens .lbl og .dials baerer margin-top:4px (Plan/You); mock'ens har 0 og
   lader gittergabet (12 px) goere arbejdet - maalt 19/9 2026: 7-8 px for hoej. */
.cockpit-akt .lbl, .cockpit-akt .dials{margin-top:0}
#akt-dock{--daggry:var(--z1)}

/* 1b. Sportsfilteret: mock'ens .seg/.seg.sport, med en glidende tommelfinger. */
.akt-seg{display:flex; background:var(--kort); border:1px solid var(--kant); border-radius:var(--r-kontrol);
  padding:3px; position:relative; isolation:isolate}
.akt-seg button{flex:1; min-height:38px; border-radius:11px; font-size:13px; color:var(--daempet); font-weight:500;
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 6px;
  background:none; border:none; font-family:inherit; line-height:1.5; cursor:pointer; transition:color .2s}
.akt-seg button.on{color:var(--tekst)}
.akt-seg button svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.akt-seg button.on svg{opacity:1}
.akt-seg .thumb{position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px)/var(--n, 2));
  border-radius:11px; background:var(--skinne); border:1px solid var(--kant-staerk); transition:transform .3s var(--fjeder); z-index:0}
@media (max-width:359px){ .akt-seg button svg{display:none} .akt-seg button{font-size:13px} }

/* 1c. Vejen bag dig: fuld bredde, intet ovenpaa - samme regel som Plans vej. */
.akt-road{height:clamp(176px, 46vw, 204px); margin-top:2px}
.akt-road .stagecap .pick b, .akt-road .stagecap .pick span{display:block; overflow:hidden; text-overflow:ellipsis}
.akt-road .stagecap .pick b{font-size:12px}
.akt-road .stagecap .pick span{font-size:11px}
#akt-cockpit.picked .stagecap .cap, #akt-cockpit.picked .stagecap .legend{display:none}
#akt-cockpit.picked .stagecap .pick{display:block}
#akt-cockpit.picked .stagecap > div:first-child{flex:1}

/* 1d. This week: de tre dials, samme .kdial-skal som Today, men i akkurat de
   maal mock'en maalte side om side (Today's egne .dials.n3-maal er urørte). */
.cockpit-akt .dials.n3 .kdial{padding:9px}
.cockpit-akt .dials.n3 .kdial .hd2{font-size:11px}
/* Appens .kdial .hd2 svg saetter kun farven; mock'ens .dial .hd2 svg er en
   streg-tegning. Uden de her linjer stod ikonerne som sorte klatter (set 19/9). */
.cockpit-akt .dials.n3 .kdial .hd2 svg{width:14px; height:14px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* Maalt side om side 19/9 2026: appens .kdial .v arver line-height:normal (30 px
   paa 20 px skrift) og ingen spatiering - mock'ens .dial .v har 1.05/-.02em. */
.cockpit-akt .dials.n3 .kdial .v{line-height:1.05}
.cockpit-akt .dials.n3 .kdial .v b{font-size:19px; letter-spacing:-.02em}
.cockpit-akt .dials.n3 .kdial .cap{font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cockpit-akt .kdial.stat.now{border-color:color-mix(in oklab, var(--rav) 35%, var(--kant))}
@media (max-width:359px){
  .cockpit-akt .dials.n3 .kdial{padding:8px 7px}
  .cockpit-akt .dials.n3 .kdial .hd2 svg{display:none}
  .cockpit-akt .dials.n3 .kdial .v b{font-size:17px}
  .cockpit-akt .dials.n3 .kdial .cap{font-size:10px}
  .cockpit-akt .lbl span{display:none}
}

/* 1e. Base-linjen (You's .wkg-figur i --z2): ikon, tallet, en sparkline, en
   fod. 1:1 mock'ens .trend, scopet her fordi klassen er helt ny. */
.cockpit-akt .trend{display:grid; grid-template-columns:auto auto minmax(0, 1fr); gap:12px; align-items:center;
  padding:10px 12px 10px 10px; border-radius:18px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--z2) 14%, var(--kort)), var(--kort) 55%);
  border:1px solid color-mix(in oklab, var(--z2) 30%, var(--kant))}
.cockpit-akt .trend .ic{width:36px; height:36px; border-radius:50%; background:var(--bg);
  border:1px solid color-mix(in oklab, var(--z2) 40%, var(--kant-staerk)); display:grid; place-items:center; color:var(--z2);
  box-shadow:0 0 18px -4px color-mix(in oklab, var(--z2) 70%, transparent)}
.cockpit-akt .trend .ic svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.cockpit-akt .trend .n{display:grid; gap:1px; white-space:nowrap}
.cockpit-akt .trend .n small{font-size:11px; color:var(--daempet); font-weight:600}
.cockpit-akt .trend .n b{font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.cockpit-akt .trend .sc{display:grid; gap:3px; min-width:0}
.cockpit-akt .trend .plot{position:relative}
.cockpit-akt .trend .sc svg{width:100%; height:36px; display:block; color:var(--z2); touch-action:pan-y; cursor:pointer; overflow:visible}
.cockpit-akt .trend .sc svg .ar{fill:url(#akt-trendfill)}
.cockpit-akt .trend .sc svg .ln{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cockpit-akt .trend .sc svg .pt{fill:currentColor; stroke:var(--kort); stroke-width:2}
.cockpit-akt .trend .sc svg .hair{stroke:var(--daempet-2); stroke-width:1; stroke-dasharray:2 2; display:none}
.cockpit-akt .trend .sc svg .sel{fill:var(--kort); stroke:currentColor; stroke-width:2; display:none}
.cockpit-akt .trend .plot.on .hair, .cockpit-akt .trend .plot.on .sel{display:block}
.cockpit-akt .trend .tip{position:absolute; bottom:calc(100% + 6px); left:var(--x, 50%);
  transform:translateX(clamp(-100% + 8px, -50%, 0px)); z-index:2; white-space:nowrap; pointer-events:none;
  font-size:11px; color:var(--daempet); padding:5px 9px; border-radius:10px;
  background:color-mix(in oklab, var(--kort-2) 92%, transparent); border:1px solid var(--kant-staerk);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 8px 20px -10px rgba(0,0,0,.7);
  opacity:0; transition:opacity .15s}
.cockpit-akt .trend .tip b{color:var(--tekst); font-weight:600; font-variant-numeric:tabular-nums}
.cockpit-akt .trend .tip span{display:block; font-size:11px; color:var(--daempet-2); margin-top:1px}
.cockpit-akt .trend .tip::after{content:""; position:absolute; top:100%; left:50%; width:8px; height:8px; background:inherit;
  border:1px solid var(--kant-staerk); border-top:0; border-left:0; transform:translate(-50%, -4px) rotate(45deg)}
.cockpit-akt .trend .tip.l{transform:none} .cockpit-akt .trend .tip.l::after{left:12px}
.cockpit-akt .trend .tip.r{transform:translateX(-100%)}
.cockpit-akt .trend .tip.r::after{left:auto; right:12px; transform:translate(50%, -4px) rotate(45deg)}
.cockpit-akt .trend .plot.on .tip{opacity:1}
.cockpit-akt .trend .fn{font-size:11px; color:var(--daempet-2); line-height:1.3}
.cockpit-akt .trend .fn b{color:var(--z2); font-weight:600}
@media (max-width:359px){ .cockpit-akt .trend{gap:10px; padding:9px 10px 9px 9px} .cockpit-akt .trend .n b{font-size:22px} }

/* 1f. Streak-linjen: flamme-ikon, "N weeks in a row", tolv trin. 1:1 mock. */
.cockpit-akt .streak{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:center;
  padding:10px 12px 10px 10px; border-radius:18px; background:var(--kort); border:1px solid var(--kant)}
.cockpit-akt .streak .ic{width:36px; height:36px; border-radius:50%; background:var(--bg); border:1px solid var(--kant-staerk);
  display:grid; place-items:center; color:var(--rav)}
.cockpit-akt .streak .ic svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.cockpit-akt .streak .sc{display:grid; gap:5px; min-width:0}
.cockpit-akt .streak .t{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px;
  color:var(--daempet); white-space:nowrap}
.cockpit-akt .streak .t b{color:var(--tekst); font-weight:600; font-size:14px}
.cockpit-akt .streak .t span{min-width:0; overflow:hidden; text-overflow:ellipsis}
/* margin-top 14 px: mock'en arver den fra mock.css' .steps - maalt side om side
   19/9 2026 og bygget med, fordi det er den luft, brugeren godkendte. */
.cockpit-akt .streak .steps{display:flex; gap:3px; margin-top:14px}
.cockpit-akt .streak .steps i{flex:1; height:5px; border-radius:4px; background:var(--skinne); transition:background .25s}
.cockpit-akt .streak .steps i.on{background:var(--rav); box-shadow:0 0 8px color-mix(in oklab, var(--rav) 55%, transparent)}
.cockpit-akt .streak .steps i.now{background:var(--rav-dim); outline:1px solid var(--rav)}

/* Loggens tomtilstand for et filtreret sportsvalg (mock'ens .empty). */
.akt-tom{padding:26px 8px; text-align:center; font-size:13px; color:var(--daempet-2)}

/* Dock'en: aktivitetsikonet i sin egen skive + filterets rav-pille. */
#akt-dock .avm{width:30px; height:30px; border-radius:50%; background:var(--kort-2); border:1px solid var(--kant);
  display:grid; place-items:center; color:var(--daempet)}
#akt-dock .avm svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.mini-pille{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rav);
  padding:3px 8px; border-radius:999px; background:var(--rav-dim)}

/* (i)-arkets legend-raekke (mock'ens #i-training). */
.ark .ana .legend{display:flex; gap:12px; margin-top:10px; font-size:13px}
.ark .ana .legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px}

/* PLAN STRAMMET OP (24/9 2026, brugeren: behold maalet og vejen, men komprimer).
   Maalkortet beholder sit udtryk med mindre ring og taettere luft; vejen er lavere;
   tids-/ugeflisen er vaek (tiden staar i den valgte dag, .dag-tid, og "Your usual
   week" under kalenderen); dial'erne kun ved et testforslag. Gaelder OGSAA under
   turen (25/9 2026) - trinnet "The week bends" peger nu paa #tid-aabn. */
#cockpit .goal h2{font-size:22px}
#cockpit .goal .phase{margin-top:2px}
#cockpit .goal .ring{width:66px; height:66px; margin-top:2px}
#cockpit .goal .ring .ring-midt b{font-size:19px}
#cockpit .goal .ring .ring-midt small{font-size:10px}
#cockpit .goal .fokus{margin-top:7px}
#cockpit .road{height:clamp(118px, 32vw, 140px); margin-top:8px}
/* Den lavere vej har ikke plads til billedteksten ("Drag the road · tap a day" +
   farverne) under ugeetiketten - den stoedte sammen med "Not planned yet". Dagskortene
   lige under viser de samme farver og siger "tap a day". */
#v-app #cockpit .road .stagecap{display:none}
#v-app #plan-belt{display:none}
#v-app #dials{display:none}
/* "Time this day" paa Plan (6/10 2026): samme figur som tidsvalgets raekker - ingen
   boks, ur + navn + tid + pil, den tynde rav-bar under og planens forbrug som én linje.
   .tid-spor/.tid-arv er tidsvalgets egne klasser (samme bar, samme "usual"). */
.dag-tid{display:grid; gap:8px; width:100%; margin:0 0 12px; padding:12px 2px 14px; background:none; border:none;
  border-bottom:1px solid var(--kant); border-radius:0; font:inherit; color:inherit; cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.dag-tid:focus-visible{outline:2px solid var(--rav); outline-offset:2px; border-radius:10px}
.dag-tid-r1{display:flex; align-items:center; gap:8px; min-width:0}
.dag-tid-ur{flex:none; color:var(--rav)}
.dag-tid-navn{flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; color:var(--tekst)}
.dag-tid-navn .tid-arv{display:inline; margin-left:6px; font-size:11px; font-weight:500}
.dag-tid b{font-size:15px; font-weight:600; color:var(--tekst); font-variant-numeric:tabular-nums; white-space:nowrap}
.dag-tid-pil{flex:none; color:var(--daempet-2); margin-right:-2px}
.dag-tid.tom b{color:var(--rav)}
.dag-tid.tom .tid-spor{background:repeating-linear-gradient(90deg, var(--skinne-2) 0 5px, transparent 5px 9px)}
.dag-tid .tid-spor i{background:color-mix(in srgb, var(--rav) 28%, transparent)}
.dag-tid .tid-spor em{position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  background:linear-gradient(90deg, var(--rav-lav), var(--rav)); box-shadow:0 0 8px -2px var(--rav)}
.dag-tid .tid-spor em.ekstra{background:linear-gradient(90deg, color-mix(in srgb, var(--zone2) 55%, transparent), var(--zone2));
  box-shadow:0 0 8px -2px var(--zone2); border-radius:0 3px 3px 0}
.dag-tid-brug b.ekstra{color:var(--zone2)}
/* Tid + ekstra tid som én blok (6/10 2026): skillelinjen flytter fra knappen til blokken. */
.dag-tid-blok{margin:0 0 12px; border-bottom:1px solid var(--kant)}
.dag-tid-blok > .dag-tid{margin:0; border-bottom:none; padding-bottom:10px}
/* Den kompakte "Know you'll train longer?" (ekstraTid(..., {kompakt:true})): intet eget
   kort - en tynd linje skiller den fra tiden, ikonet er mindre, tallene som tidens. */
.ekstra-tid.kompakt{margin:0; padding:10px 2px 12px; background:none; border:none; border-radius:0;
  border-top:1px dashed var(--kant-staerk)}
.ekstra-tid.kompakt::before{content:none}
/* Runde 4 (6/10 2026, brugerens idé): ingen raekker. "Extra time · <titel>" med "+ Add" for
   enden, maalene under. ALT ekstra er zone 2-blaat - samme blaa som tillaeggets stykke i
   tidsbaren ovenover (rav = planlagt ud af din tid, blaa = det ekstra i forlaengelse). */
/* Hovedet er et gitter (6/10 2026, brugeren: "+ Add lige ud for begge linjer"): ikon og
   "Extra time" i foerste raekke, maalene i anden, og "+ Add" i hoejre kolonne over BEGGE
   raekker, lodret centreret. */
.ekstra-tid.kompakt .et-hoved{display:grid; grid-template-columns:16px minmax(0, 1fr) auto; column-gap:8px; row-gap:4px; align-items:center}
.ekstra-tid.kompakt .et-hoved .et-ur{grid-column:1; grid-row:1}
.ekstra-tid.kompakt .et-hoved .et-navn{grid-column:2; grid-row:1}
.ekstra-tid.kompakt .et-hoved .et-maal{grid-column:2; grid-row:2; margin:0}
.ekstra-tid.kompakt .et-hoved .et-add{grid-column:3; grid-row:1 / 3; align-self:center}
.ekstra-tid.kompakt .et-ur{width:16px; height:16px; background:none}
.ekstra-tid.kompakt .et-ur svg{width:16px; height:16px}
.ekstra-tid.kompakt .et-navn{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; line-height:1.3}
.ekstra-tid.kompakt .et-navn b{font-size:13px}
.ekstra-tid.kompakt .et-navn small{font-size:12px}
.ekstra-tid.kompakt .et-navn small::before{content:'· '}
.ekstra-tid.kompakt .et-maal{margin:4px 0 0 24px; column-gap:12px}
.ekstra-tid.kompakt .et-maal b{font-size:13px}
.et-add{flex:none; display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 12px 0 9px;
  border-radius:999px; border:1px solid color-mix(in srgb, var(--zone2) 55%, transparent);
  background:color-mix(in srgb, var(--zone2) 14%, transparent); color:var(--zone2);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; touch-action:manipulation;
  box-shadow:0 0 14px -6px var(--zone2); -webkit-tap-highlight-color:transparent; transition:transform .15s}
.et-add:active{transform:scale(.95)}
.et-add:focus-visible{outline:2px solid var(--zone2); outline-offset:2px}
.et-add svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}
.et-add.aaben{padding:0; width:32px; justify-content:center; background:none; box-shadow:none; border-color:var(--kant-staerk); color:var(--daempet)}
/* Lagt tid: smaa blaa piller - "After the set 0:30 x". */
.et-lagte{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0 24px}
.et-lagt{display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 4px 0 11px; border-radius:999px;
  background:color-mix(in srgb, var(--zone2) 14%, transparent); border:1px solid color-mix(in srgb, var(--zone2) 40%, transparent);
  font-size:12px; color:var(--tekst)}
.et-lagt b{font-size:13px; font-weight:600; color:var(--zone2); font-variant-numeric:tabular-nums}
.et-lagt .et-ryd{width:22px; height:22px; color:var(--daempet)}
/* Minutterne (foldet ud) og popup'en med foer/efter. */
.et-panel{display:grid; gap:8px; margin:10px 0 0 24px}
.et-panel .et-pille{justify-self:start}
.et-panel .et-pille button{min-height:28px; padding:0 10px; font-size:12px}
.et-min{display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 0 4px; scrollbar-width:none}
.et-min::-webkit-scrollbar{display:none}
.et-min .tid-chip.valgt{background:var(--zone2); border-color:var(--zone2); color:var(--tekst)}
.et-pop{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:6px 8px; padding:8px 8px 10px; border-radius:var(--r-kontrol);
  background:var(--kort-2); border:1px solid color-mix(in srgb, var(--zone2) 35%, var(--kant)); box-shadow:0 10px 24px -10px rgba(0,0,0,.7);
  animation:et-pop .22s var(--fjeder)}
@keyframes et-pop{from{opacity:0; transform:translateY(-4px) scale(.98)}}
@media (prefers-reduced-motion:reduce){ .et-pop{animation:none} }
.et-pop-tal{grid-column:1 / -1; font-size:14px; font-weight:600; color:var(--zone2); padding:2px 4px 0; font-variant-numeric:tabular-nums}
.et-pop button[data-et-sted]{min-width:0; min-height:40px; padding:0 8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--zone2) 55%, transparent);
  background:color-mix(in srgb, var(--zone2) 12%, transparent); color:var(--tekst); font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap}
.et-pop button[data-et-sted]:active{background:var(--zone2)}
.et-pop button[data-et-sted]:disabled{opacity:.4; cursor:default}
.et-lagt .et-ryd svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.ekstra-tid.kompakt .et-note{margin:0}
.ekstra-tid.kompakt .et-tilfoejet{margin-left:24px}
@media (max-width:359px){ .et-panel, .et-lagte, .ekstra-tid.kompakt .et-tilfoejet{margin-left:0} }
.dag-tid-brug{font-size:12px; color:var(--daempet); font-variant-numeric:tabular-nums}
.dag-tid-brug b{font-size:12px; color:var(--tekst); font-weight:600}

/* Fokus under dagsringen (24/9 2026). Pillen er en knap; lange navne afkortes, saa
   hoejre kolonne aldrig presser maalets navn sammen. */
.goal-hoejre{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
#cockpit .goal-hoejre .fokus{margin-top:0; flex-direction:column; align-items:flex-end; gap:6px}
.goal-hoejre .fk{max-width:164px; font:inherit; font-size:12px; font-weight:600; cursor:pointer}
.goal-hoejre .fk span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Fasesporet loeber i fuld bredde under navn OG ring, saa det ikke klippes, naar
   fokus-pillen tager plads i hoejre kolonne (ved 320 px blev BUILD til "BUILI"). */
.goal .goal-spor{grid-column:1 / -1; margin-top:-4px}
.goal .goal-spor .fase-spor{max-width:none; margin-top:0}
@media (max-width:359px){ .goal-hoejre .fk{max-width:108px} #cockpit .goal h2{font-size:20px} }
/* Testforslaget paa Plan: én tynd linje i stedet for sport-fliserne (24/9 2026). */
#plan-test-note:empty{display:none}
#plan-test-note{display:grid; gap:6px; margin-top:10px}
.test-note{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; width:100%; padding:9px 12px; border-radius:var(--r-kontrol);
  background:var(--kort); border:1px solid var(--kant); font:inherit; font-size:13px; color:var(--daempet); text-align:left; cursor:pointer}
.test-note b{color:var(--z3); font-weight:600}
.test-note .ic svg{width:16px; height:16px; stroke:var(--rav); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; display:block}
.test-note > svg{width:14px; height:14px; stroke:var(--daempet-2); fill:none; stroke-width:2}
/* Fokus paa maal-linjen (24/9 2026): pillen staar i forlaengelse af "Goal · dato ✎". */
.goal .lbl .fokus{margin:0 0 0 2px; display:flex; gap:6px; flex-wrap:nowrap; min-width:0}
.goal .lbl .fk{max-width:150px; min-height:26px; font:inherit; font-size:12px; font-weight:600; cursor:pointer}
.goal .lbl .fk span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.goal .lbl{min-width:0; flex-wrap:nowrap}
/* Datoen har forrang: pillen afkortes, aldrig "Goal · 11 F…" (320 px). */
.goal .lbl > span{flex:none}
.goal .lbl .fokus{flex:1 1 auto}
.goal .lbl .fk{max-width:min(150px, 100%)}
/* Én pille for et eller to fokus: tekst og ikoner i én linje, afkortet samlet. */
.goal .fk .fk-t{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.goal .fk .fk-t svg{display:inline-block; vertical-align:-2px; margin-right:5px}
.goal .fk .fk-sep{font-style:normal; color:var(--daempet-2); margin:0 6px}
.goal .lbl .fk{max-width:min(220px, 100%)}
/* Maal-linjen spaender over begge kolonner (24/9 2026), saa to fokus ("FTP Builder ·
   Marathon") kan staa fuldt - ringen staar ved siden af navnet nedenunder. */
/* Maalkortet uden "Goal · dato"-linje (24/9 2026): navn + blyant, fase-linjen med
   fokus-pillen (bryder til naeste linje, naar den ikke kan staa ved siden af), og
   datoen under dage-ringen. */
.goal h2 [data-maal-ark]{width:24px; height:24px; border-radius:50%; border:1px solid var(--kant-staerk); background:none; display:inline-grid;
  place-items:center; color:var(--daempet); cursor:pointer; padding:0; margin-left:8px; vertical-align:3px}
.goal h2 [data-maal-ark] svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Fokus-pillen staar ALTID under fasen (brugeren 8/10 2026): med flex-wrap hoppede
   den ned kun naar den var for bred (to sportsgrene) og stod ved siden af ellers. */
.goal .goal-linje{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:4px}
.goal .goal-linje .phase{margin-top:0}
.goal .goal-linje .fokus{margin:0; min-width:0; max-width:100%}
.goal .goal-linje .fk{max-width:100%; min-height:26px; font:inherit; font-size:12px; font-weight:600; cursor:pointer}
.goal .goal-hoejre{align-items:center; gap:2px}
.goal .goal-dato{font-size:11px; color:var(--daempet); font-variant-numeric:tabular-nums; white-space:nowrap}
/* "Adjust availability" paa Plan (24/9 2026): rav kant og tekst, saa den ses, uden at
   konkurrere med de udfyldte rav-knapper. Layoutet (ikon + tekst) er #tid-aabn's egne regler. */
#cockpit #tid-aabn{margin-top:-18px; position:relative; z-index:2; background:var(--bg); border:1px solid var(--rav); color:var(--rav); font-weight:600}
/* Knappen ligger op over vejens tomme bund (under ugeteksterne) - lærredet har dér
   intet at vise, og hullet mellem vejen og knappen var det, brugeren kaldte tomt.
   Vejen er laast paa Plan (etape3d opts.laast) og glider ikke ved rul. */
#cockpit .road .sky{animation:none !important}
/* PRO/FREE ved ordmaerket i headeren (25/9 2026, brugerens valg): fed og tydelig lige
   efter FORMA PEAKS; datoen staar alene under, uden streg. Ved 320 px er der kun 8 px
   luft i headeren (fire skiver + maerket), saa det lille logo-ikon skjules under 360 px
   for at give plads til etiketten. */
.header-raekke .logo .tier-etiket{align-self:flex-end; margin:0 0 1px -3px; padding:3px 6px 2px; font-size:11px;
  font-weight:800; letter-spacing:.1em; border-radius:6px}
.header-raekke .logo .tier-etiket.pro{background:var(--rav); color:var(--paa-rav); border-color:var(--rav)}
.header-raekke .logo .tier-etiket.free{background:transparent; color:var(--daempet); border-color:var(--kant-staerk)}
.header-fold-linje{border-top:none; padding:2px 0 8px; margin-top:0}
@media (max-width:359px){ .header-raekke{gap:0} .header-raekke .logo .logo-maerke{display:none} .header-raekke .logo{gap:6px} }
/* COCKPITTET STAAR STILLE (25/9 2026, brugerens valg): ingen toning/glidning ved rul paa
   nogen fane (Today, Plan, Activities, You, Connections), og dock-pillen, der gled ned,
   naar cockpittet var rullet vaek, er fjernet. Cockpittet ruller bare med siden.
   Reglerne herover (hero-out, sky-drift, dock-in) staar urørt, men slaar ikke igennem. */
.cockpit-in, .road .sky, .cockpit-mig .rider, .cockpit-forbind .fline{animation:none !important; opacity:1 !important; transform:none !important}
.dock{display:none !important}
/* KOMPAKT HEADER (25/9 2026, brugeren: headeren var for stor, datoen for langt fra
   logoet, og et sort felt over logoet og under datoen). Mindre luft, datoen trukket op
   under ordmaerket, og headerens egen baggrund er vaek - skiverne har deres egen flade. */
header{padding-top:calc(6px + env(safe-area-inset-top)); padding-bottom:4px}
.header-raekke{padding:4px 0 0}
.header-fold-linje{padding:0 0 2px; margin-top:0}
.app-top::before{display:none}
/* BLOED TONING BAG SKIVERNE (8/10 2026, brugerens ja): foldet ruller kortene ind
   under de svaevende skiver, og tekst bag dem flimrede. En toning uden kant - solid
   bag statuslinjen, gennemsigtig lige under skiverne - saa de stadig svaever og
   ikke laeser som en bjaelke (brugerens valg 13/9 og 25/9). Eget lag (::before er
   slaaet fra ovenfor), og kun i .kompakt: uden rul staar intet bag dem. */
.app-top::after{content:""; position:absolute; left:0; right:0; top:0; bottom:-22px; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .25s;
  background:linear-gradient(to bottom, var(--bg) 0, color-mix(in srgb, var(--bg) 82%, transparent) 45%,
    color-mix(in srgb, var(--bg) 40%, transparent) 75%, transparent)}
.app-top.kompakt::after{opacity:1}
#v-app.tur-viser .app-top::after{display:none}
@media (prefers-reduced-motion: reduce){ .app-top::after{transition:none} }
/* UGEKORTET paa Plan (25/9 2026): ugens tid oeverst, de to Load-tal store med smaa
   forklaringer, maalet til hoejre paa samme linje, baren, og én kommentar med en
   statusprik. Samme flade og typografi som resten af Plans kort. */
.rail-head .rh{display:grid; gap:10px; padding:12px 14px 13px; border-radius:18px; background:var(--kort); border:1px solid var(--kant)}
.rail-head .rh[hidden]{display:none}
.ul-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.ul-top b{font-size:15px; font-weight:600; color:var(--tekst); letter-spacing:-.01em}
.ul-tid{font-size:15px; font-weight:600; color:var(--tekst); font-variant-numeric:tabular-nums; white-space:nowrap}
.ul-tid small{font-size:12px; font-weight:500; color:var(--daempet)}
.ul-tal{display:flex; align-items:flex-end; gap:10px}
.ul-t{display:grid; gap:1px; min-width:0}
.ul-t b{font-size:22px; font-weight:600; line-height:1.05; color:var(--tekst); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.ul-t small{font-size:11px; color:var(--daempet); white-space:nowrap}
.ul-pil{color:var(--daempet-2); font-size:15px; padding-bottom:17px}
.ul-t.ul-sigte{margin-left:auto; text-align:right}
.ul-t.ul-sigte b{font-size:15px; color:var(--daempet)}
.rail-head .ul-note{display:block; position:relative; padding-left:15px; margin:0; font-size:13px; line-height:1.45; color:var(--daempet)}
.rail-head .ul-note::before{content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--daempet-2)}
.rail-head .ul-note .ul-link{white-space:nowrap}
.rail-head .ul-note.ul-under::before{background:var(--rav)}
.rail-head .ul-note.ul-i_baandet::before{background:var(--z2)}
.rail-head .ul-note.ul-over::before{background:var(--z4)}
/* Under 360 px: 64 px ring og 10 px mellemrum giver teksten PRAECIS samme bredde som
   foer (60 + 14 = 64 + 10), saa dommen ikke brydes paa en linje mere (maalt: 70 px ring
   gav 3 linjer og 22 px hoejere kort ved 320). */
@media (max-width:359px){
  #v-app #idag-cockpit .morgen{gap:10px}
  #v-app #idag-cockpit .morgen .ring{width:64px; height:64px}
  #v-app #idag-cockpit .morgen .ring-midt b{font-size:19px}
}
/* Ugekortet komprimeret (25/9 2026): tre linjer, samme udtryk. */
.rail-head .rh{gap:7px; padding:10px 12px 11px}
.ul-top > span{display:flex; align-items:baseline; gap:8px; min-width:0}
.ul-top .ul-tid{font-size:13px; font-weight:500; color:var(--daempet)}
.ul-sigte2{font-size:13px; color:var(--daempet); white-space:nowrap; font-variant-numeric:tabular-nums}
.ul-sigte2 b{color:var(--tekst); font-weight:600}
/* Genstart (5/10 2026): "Returning from illness" er laengere end et maal - den bryder til
   hoejre paa 320 px, i stedet for at klemme "This week" over to linjer. */
.ul-sigte2.ul-gs{white-space:normal; text-align:right}
.ul-top > span:first-child > b{white-space:nowrap}
.ul-rk{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px}
.ul-tal2{font-size:13px; color:var(--daempet); white-space:nowrap; font-variant-numeric:tabular-nums}
.ul-tal2 b{font-size:17px; font-weight:600; color:var(--tekst)}
.ul-tal2 i{font-style:normal; color:var(--daempet-2); margin:0 2px}
/* Ugekortet endnu mindre + kalenderen tættere på (25/9 2026, brugerens telefon:
   "lidt mindre og kalenderen rykket tættere på load-boksen"). Den negative
   bundmargen æder cockpittets luft under kortet; kun når kortet vises (.plan-pro). */
.rail-head{margin-bottom:-20px}
.rail-head .rh{gap:5px; padding:8px 12px 9px; border-radius:16px}
.ul-top b{font-size:14px}
.ul-top .ul-tid, .ul-sigte2, .ul-tal2{font-size:12px}
.ul-sigte2 b{font-size:14px}
.ul-tal2 b{font-size:15px}
.rail-head .ul-note{font-size:12px; line-height:1.35; padding-left:13px}
.rail-head .ul-note::before{width:6px; height:6px}
/* "Something else today?" som en rigtig knap (25/9 2026, brugeren: "det kunne man godt
   gøre tydeligere, fylde lidt mere og lidt mere lækkert at se på"). Rav-tonet flade
   med kant, lys tekst, ikonet i rav. Samme plads i toplinjen - dagen bliver ikke højere.
   Uden invitation (ring/mærke eller 320 px) står ikonet alene i en rund knap. */
.dayview .pd-skift{height:auto; min-height:40px; padding:6px 10px 6px 12px; gap:8px; border-radius:14px;
  background:var(--rav-dim); border:1px solid color-mix(in srgb, var(--rav) 40%, transparent); color:var(--rav);
  transition:transform .18s var(--fjeder), background .2s}
.dayview .pd-skift:hover{background:color-mix(in srgb, var(--rav) 24%, transparent); color:var(--rav)}
.dayview .pd-skift:active{transform:scale(.95)}
.dayview .pd-skift:not(:has(.pd-skift-hint)){width:40px; padding:0; justify-content:center; border-radius:50%}
.pd-skift-hint{font-size:12px; line-height:1.2; color:var(--tekst); font-weight:600; max-width:76px}
@media (max-width:359px){ .dayview .pd-skift{width:40px; padding:0; justify-content:center; border-radius:50%} }
.dayview .pd-skift{padding:6px 8px 6px 10px; gap:6px}
.pd-skift-hint{max-width:72px}
/* Målt 25/9 2026: ved 360 px med "4 x 8 min 1h 45m" klippede knappen navnet 11 px -
   under 375 px står knappen derfor som den runde ikonknap. */
@media (max-width:374px){ .pd-skift-hint{display:none} .dayview .pd-skift{width:40px; padding:0; justify-content:center; border-radius:50%} }
/* Uden invitation (Plan, en koert dag): ⟳ staar oppe ved navnet, ikke midt i hoejden, og
   er 36 px - den svaevede langt fra det, den aendrer (25/9 2026). */
.dayview .pd-skift:not(:has(.pd-skift-hint)){width:36px; height:36px; min-height:36px; margin-top:-4px}

/* Stille linje ved `pause` (29/9 2026): har haft ture, men ingen i 42 dage. Bevidst
   uden kort-ramme - det er en oplysning, ikke en fejl. */
.forbindelse-pause{margin:2px 4px 14px; text-align:center}
.forbindelse-pause a{color:inherit; text-decoration:underline; white-space:nowrap}
.forbindelse-pause .ekstern-ikon{width:11px; height:11px; vertical-align:-1px}

/* Kilde-kortet (fase A, 3/10 2026, forbind-to-kort.html)
   ÉT kort for intervals.icu-forbindelsen ("Garmin, WHOOP & more"), det SAMME paa
   onboarding-trin 9 og toppen af Connections (fkKort() i forma.js). Kontrakt:
   docs/mockups/makeover/FORBIND-TO-KORT.md; maalt med fk-sammenlign.mjs. Alle
   klasser har fk-praefiks (.kilde/.st/.nd/.wire findes allerede i appen), og
   knapperne baerer selv deres nulstilling (forma.css har ingen global button-reset). */
:root{--fk-hvid:#fff; --fk-hjerte-1:#FF6B8B; --fk-hjerte-2:#FF2D55}
.fk-kilder{display:grid; gap:10px; margin-top:16px}
.fk-kort{position:relative; border:1px solid var(--kant); background:var(--kort); border-radius:var(--r-flise); padding:14px; display:grid; gap:12px;
  transition:border-color .4s, box-shadow .4s}
.fk-kort [hidden]{display:none}
.fk-kort.fk-live{border-color:color-mix(in oklab, var(--z2) 55%, var(--kant)); box-shadow:0 0 0 4px color-mix(in oklab, var(--z2) 10%, transparent)}
.fk-kort.fk-warn{border-color:color-mix(in oklab, var(--z3) 50%, var(--kant))}
.fk-kort.fk-mute{opacity:.72}
.fk-top{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:center}
.fk-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--kort-2); border:1px solid var(--kant-staerk); color:var(--daempet)}
.fk-ic svg{display:block; width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fk-ic.fk-health{background:var(--fk-hvid); border-color:var(--fk-hvid)}
.fk-ic.fk-health svg{width:26px; height:26px; stroke:none}  /* fyldet (gradienten) staar paa path'en, inline i fkHealthKort() */
.fk-navn b{display:block; font-size:15px; font-weight:600; line-height:1.25}
.fk-navn .fk-sub{display:block; font-size:12px; color:var(--daempet); line-height:1.35; margin-top:3px}
.fk-navn .fk-st{margin-top:3px}

/* tilstanden: et ord med en prik, eller et flueben, der popper ind */
.fk-st{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--daempet-2); white-space:nowrap}
.fk-st i{width:7px; height:7px; border-radius:50%; background:currentColor}
.fk-st.fk-live{color:var(--z2)}
.fk-st.fk-live i{animation:fk-puls 2.4s infinite}
.fk-st.fk-warn{color:var(--z3)}
.fk-st.fk-wait{color:var(--rav)}
.fk-st.fk-wait i{width:12px; height:12px; background:none; border:2px solid currentColor; border-right-color:transparent; animation:fk-spin .8s linear infinite}
@keyframes fk-puls{0%,100%{box-shadow:0 0 0 3px color-mix(in oklab, currentColor 22%, transparent)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes fk-spin{to{transform:rotate(360deg)}}
.fk-tick{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; background:var(--z2); display:grid; place-items:center;
  box-shadow:0 0 0 3px var(--bg); transform:scale(0); transition:transform .35s var(--fjeder)}
.fk-tick svg{display:block; width:13px; height:13px; stroke:var(--bg); fill:none; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.fk-kort.fk-live .fk-tick{transform:none}

/* det, der kom ind: to smaa fakta, kun naar data er LANDET */
.fk-fakta{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fk-fakta div{padding:9px 10px; border-radius:14px; background:var(--bg); border:1px solid var(--kant); min-width:0}
.fk-fakta span{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--daempet-2)}
.fk-fakta span svg{display:block; width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fk-fakta b{display:block; font-size:15px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums}
.fk-fakta small{display:block; font-size:11px; color:var(--daempet); line-height:1.3}
/* .fk-kort .fk-note (0,2,0): turens `.tur-side p` (0,1,1) vil ellers goere kortets note til 14px */
.fk-kort .fk-note{font-size:13px; color:var(--daempet); line-height:1.45; margin:0}
.fk-kort .fk-note b{color:var(--tekst); font-weight:700}
.fk-kort .fk-note.fk-warn{color:var(--tekst); padding:10px 12px; border-radius:14px; background:color-mix(in oklab, var(--z3) 12%, transparent); border:1px solid color-mix(in oklab, var(--z3) 35%, transparent)}
.fk-logos{display:flex; flex-wrap:wrap; gap:6px}
.fk-logos img{height:22px; max-width:70px; object-fit:contain; background:var(--fk-hvid); border-radius:7px; padding:4px 8px}
.fk-logos em{font-style:normal; font-size:12px; color:var(--daempet-2); align-self:center; margin-left:2px}
.fk-akt{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fk-akt.fk-en{grid-template-columns:1fr}
.fk-akt .fk-knap{min-height:44px; font-size:14px}
.fk-fix{background:none; border:none; font-family:inherit; line-height:inherit; padding:0; cursor:pointer; text-decoration:none;
  display:flex; justify-content:center; align-items:center; gap:6px; width:100%; min-height:32px; margin-top:-6px; font-size:12px; color:var(--daempet); text-align:center}
.fk-fix svg{display:block; width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2}
.fk-fix.fk-fix-warn{color:var(--z3); font-weight:600}

/* knapperne (mock.css .btn / .btn.ghost, 246-253): nulstillingen staar HER, ikke i en global regel */
.fk-knap{background:none; border:none; font-family:inherit; line-height:inherit; margin:0; cursor:pointer; text-decoration:none; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; padding:0 18px;
  border-radius:var(--r-kontrol); background:var(--rav); color:var(--paa-rav); font-weight:600; font-size:15px;
  transition:transform .18s var(--fjeder), filter .15s; position:relative; overflow:hidden}
.fk-knap:active{transform:scale(.97); filter:brightness(1.06)}
.fk-knap.fk-ghost{background:var(--kort); color:var(--tekst); border:1px solid var(--kant-staerk)}
.fk-knap svg{display:block; width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fk-knap.fk-forbind{background:var(--kort-2); color:var(--rav); border:1px solid color-mix(in oklab, var(--rav) 45%, var(--kant-staerk))}

/* det, der kom ind: ét kompakt 14-dages-stribe. Soejle = traening den dag (alle sportsgrene),
   prik = en nat med soevn eller HRV. Sportsneutralt med vilje. */
.fk-strip{display:grid; gap:7px; padding:10px 11px 9px; border-radius:14px; background:var(--bg); border:1px solid var(--kant)}
.fk-strip .fk-strip-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11px; color:var(--daempet-2)}
.fk-strip .fk-strip-top span:last-child{font-size:12px; color:var(--daempet); white-space:nowrap}
.fk-strip .fk-strip-top b{color:var(--tekst); font-weight:600; font-variant-numeric:tabular-nums}
.fk-strip .fk-dage{display:grid; grid-template-columns:repeat(14,1fr); gap:3px; align-items:end; height:26px}
.fk-strip .fk-dage i{display:block; border-radius:3px 3px 1px 1px; background:var(--z2); height:calc(var(--h)*100%); min-height:2px;
  transform-origin:bottom; animation:fk-voks .6s var(--ud) both; animation-delay:calc(var(--d)*35ms)}
.fk-strip .fk-dage i.fk-hvil{background:var(--kant-staerk); animation:none}
.fk-strip .fk-naet{display:grid; grid-template-columns:repeat(14,1fr); gap:3px; justify-items:center}
.fk-strip .fk-naet i{width:6px; height:6px; border-radius:50%; background:var(--daempet)}
.fk-strip .fk-naet i.fk-soevn{background:var(--nat-soevn)}
/* Hul ring, ikke kun roed: forskellen skal kunne ses uden farvesyn. */
.fk-strip .fk-naet i.fk-ingen{background:none; box-shadow:inset 0 0 0 1.5px var(--nat-ingen)}
.fk-strip .fk-dage i:last-child, .fk-strip .fk-naet i:last-child{outline:1px solid color-mix(in oklab, var(--z2) 60%, transparent); outline-offset:2px}
.fk-strip .fk-seneste{font-size:11px; color:var(--daempet-2); display:flex; justify-content:space-between; gap:8px}
@keyframes fk-voks{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.fk-strip .fk-dage i{animation:none}}

/* ledningen, nu pr. kort: ind -> FORMA (-> ud). Pulserne loeber kun, hvor data flyder. */
.fk-flow{display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; padding:2px 2px 0}
.fk-flow.fk-ind{grid-template-columns:auto 1fr auto}
.fk-flow .fk-nd{width:32px; height:32px; border-radius:50%; background:var(--bg); border:1px solid var(--kant-staerk); display:grid; place-items:center; color:var(--daempet-2); position:relative; z-index:1; transition:color .4s, border-color .4s}
.fk-flow .fk-nd svg{display:block; width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fk-flow .fk-nd.fk-forma{width:40px; height:40px; color:var(--rav); border-color:color-mix(in oklab, var(--rav) 40%, var(--kant-staerk))}
.fk-flow .fk-nd.fk-forma svg{width:20px; height:20px; stroke-width:6}
.fk-flow .fk-wire{position:relative; height:2px; margin:0 -1px; background:repeating-linear-gradient(90deg, var(--kant-staerk) 0 5px, transparent 5px 10px)}
.fk-flow .fk-wire i{position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 10px 1px color-mix(in oklab, var(--c) 70%, transparent); display:none; animation:fk-loeb 2.2s linear infinite}
.fk-flow .fk-wire.fk-out i{animation-delay:1.1s}
@keyframes fk-loeb{from{transform:translateX(0); opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateX(calc(var(--len,80px) - 8px)); opacity:0}}
.fk-kort{--c:var(--z2)}
.fk-kort.fk-live .fk-flow .fk-wire, .fk-kort.fk-wait .fk-flow .fk-wire.fk-in{background:var(--kant-staerk)}
.fk-kort.fk-live .fk-flow .fk-wire i, .fk-kort.fk-wait .fk-flow .fk-wire.fk-in i{display:block}
.fk-kort.fk-wait{--c:var(--rav)}
.fk-kort.fk-wait .fk-flow .fk-wire.fk-in i{animation-duration:1.1s}
.fk-kort.fk-live .fk-flow .fk-nd{color:var(--z2); border-color:color-mix(in oklab, var(--z2) 50%, var(--kant-staerk))}
.fk-kort.fk-live .fk-flow .fk-nd.fk-forma{color:var(--rav); box-shadow:0 0 0 5px color-mix(in oklab, var(--z2) 14%, transparent), 0 0 24px -6px color-mix(in oklab, var(--z2) 70%, transparent)}
.fk-kort.fk-wait .fk-flow .fk-nd.fk-src{color:var(--rav)}
.fk-cap{display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--daempet-2); margin-top:-6px; line-height:1.35}
.fk-cap b{color:var(--daempet); font-weight:600}
.fk-cap .fk-r{text-align:right}
@media (prefers-reduced-motion:reduce){.fk-flow .fk-wire i{animation:none}}
@media (prefers-reduced-motion:reduce){.fk-st.fk-live i, .fk-st.fk-wait i{animation:none}}

/* begge forbundet: én stille linje under kortene */
/* .fk-kilder .fk-begge (0,2,0): turens `.tur-side p` (0,1,1) vil ellers goere linjen til 14px/daempet */
.fk-kilder .fk-begge{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--daempet-2); line-height:1.45; padding:2px 4px; margin:0}
.fk-begge svg{display:block; width:14px; height:14px; flex:none; margin-top:1px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* Connections: overskrift og traenerens saetning (mock .lblx / .voice) */
.fk-lbl{font-size:12px; color:var(--daempet); margin-top:8px}
.fk-voice{font-family:var(--skrift-dom); font-size:clamp(22px,6vw,24px); line-height:1.22; letter-spacing:-.005em; font-weight:400; margin:10px 0 8px; text-wrap:pretty}
.fk-voice em{font-style:italic; color:var(--rav)}

/* onboarding-foden (mock .foot .sum / #next.skip) */
.fk-sum{text-align:center; font-size:12px; color:var(--daempet-2); min-height:18px}
.fk-sum b{color:var(--z2); font-weight:600}
#tur-videre.fk-skip{background:var(--kort); color:var(--daempet); border:1px solid var(--kant-staerk); box-shadow:none; font-weight:500}
/* Onboarding-trin 9 (kilde-kortet): fintekst 14 px under kortene, hjaelperaekken 6 px under
   finteksten - som forbind-to-kort.html (maalt med fk-sammenlign, 3/10 2026). */
.tur-side p.tur-fin[data-fk="fine"]{margin:14px 0 0}

/* Datagrundlaget som to tal (7/10 2026) - se datagrund() i forma.js. Tallene staar i
   doms-serifen (samme stemme som "Tuesday was 34"), etiketten som de smaa versaler
   i .pro-laas-maerke, saa strimlen laeses som et faktum og ikke som endnu en chip. */
.datagrund{display:grid; grid-template-columns:1fr auto 1fr; align-items:end; column-gap:16px;
  row-gap:6px; width:100%; max-width:320px; margin:4px auto 2px; padding:10px 4px 9px;
  border-top:1px solid color-mix(in srgb, var(--rav) 22%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--rav) 22%, transparent);
  text-align:center}
.datagrund::before{content:''; grid-column:2; grid-row:2; align-self:stretch; width:1px;
  background:color-mix(in srgb, var(--rav) 22%, transparent)}
.datagrund-lbl{grid-column:1 / -1; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--daempet)}
.datagrund-tal{grid-row:2; display:grid; gap:1px}
.datagrund-tal:nth-child(2){grid-column:1}
.datagrund-tal:nth-child(3){grid-column:3}
.datagrund-tal b{font-family:var(--skrift-dom); font-weight:400; font-size:26px; line-height:1.05;
  color:var(--tekst); letter-spacing:.01em}
.datagrund-tal small{font-size:12px; color:var(--daempet); line-height:1.3}
.laas-boks .datagrund{margin:2px auto 0}
.laas-boks .datagrund b{font-size:26px}

/* ══ TILKOBLINGSGUIDEN (onboardingens intervals-ark, 9/10 2026) ══════════════════
   1:1 efter docs/mockups/makeover/forbind-trin.html - mockuppens mål og regler, med
   tur-fg-præfiks (turens regel: egne komponenter bærer tur-). Mockuppens tokens
   (mock.css) peges på appens egne her, så værdierne er de samme. */
.tur-fg{--g0:var(--bg);--g1:var(--kort);--g2:var(--kort-2);--g3:var(--skinne-2);
  --line:var(--kant);--line-2:var(--kant-staerk);--ink:var(--tekst);--ink-2:var(--daempet);--ink-3:var(--daempet-2);
  --amber:var(--rav);--amber-ink:var(--paa-rav);--amber-dim:var(--rav-dim);--live:var(--z2);--warn:var(--z3);
  --e-out:cubic-bezier(.2,.7,.2,1);--e-spring:cubic-bezier(.34,1.3,.64,1)}
#tur-ark.tur-fg-aktiv .tur-ark-krop{justify-content:flex-start}
/* Mockuppen har intet ordmærke over guiden, og uden det står Strava-noten på første
   skærm over folden ved 390x661. (`hidden` alene hjælper ikke: .logo er inline-flex.) */
#tur-ark.tur-fg-aktiv #tur-ordmaerke{display:none}
#tur-ark.tur-fg-aktiv .tur-ark-top{justify-content:flex-end;padding-top:calc(12px + env(safe-area-inset-top, 0px))}
#tur-ark.tur-fg-aktiv .tur-ark-krop{padding-top:0}
/* Uden "Set up later" (s1, intro, slut) fylder underlinjen intet, som i mockuppen -
   turens egen regel holder den usynlig MED plads. Ingen underlinje = intet at ramme
   for Continues forlængede træfflade, så turens -16px-regel er uberørt. */
#tur-ark.tur-fg-aktiv .tur-under[hidden]{display:none}
.tur-fg [hidden]{display:none!important}
.tur-fg h1{margin:0 0 10px}
.tur-side p.tur-fg-lead{color:var(--ink-2);font-size:14px;line-height:1.6;margin:0}
.tur-fg .tur-fg-lead:empty{display:none}
.tur-fg-ud{display:inline-block;width:13px;height:13px;vertical-align:-1px;margin-left:6px}
.tur-fg-ud svg{width:13px;height:13px}

/* s1: hvad rider du med */
.tur-fg-devs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.tur-fg-dev{position:relative;display:grid;justify-items:center;gap:8px;padding:14px 6px 11px;border-radius:18px;background:var(--g1);border:1px solid var(--line);
  color:var(--ink);font:inherit;transition:border-color .2s,background .2s,transform .18s var(--e-spring)}
.tur-fg-dev:active{transform:scale(.95)}
.tur-fg-dev .tur-fg-lg{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden}
.tur-fg-dev .tur-fg-lg img{width:34px;height:34px;object-fit:contain}
.tur-fg-dev .tur-fg-lg.tur-fg-ic{background:var(--g2);border:1px solid var(--line-2);color:var(--ink)}
.tur-fg-dev .tur-fg-lg.tur-fg-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tur-fg-dev .tur-fg-lg .tur-fg-wmsvg{width:38px;height:auto}
.tur-fg .tur-fg-ic.tur-fg-wm{background:#fff!important;display:grid;place-items:center;padding:3px!important}
.tur-fg .tur-fg-ic.tur-fg-wm .tur-fg-wmsvg{width:100%;height:auto}
.tur-fg-dev>span:last-child{font-size:12.5px;font-weight:600;line-height:1.2;text-align:center}
.tur-fg-dev .tur-fg-tk{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;background:var(--amber);display:grid;place-items:center;transform:scale(0);transition:transform .25s var(--e-spring)}
.tur-fg-dev .tur-fg-tk svg{width:10px;height:10px;stroke:var(--amber-ink);fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.tur-fg-dev.tur-fg-on{border-color:color-mix(in oklab,var(--amber) 60%,var(--line));background:color-mix(in oklab,var(--amber) 7%,var(--g1))}
.tur-fg-dev.tur-fg-on .tur-fg-tk{transform:none}
.tur-side p.tur-fg-hint{margin:14px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5;padding:10px 12px;border-radius:14px;background:var(--g1);border:1px solid var(--line)}
.tur-fg-hint b{color:var(--ink)}

/* s2: vejen */
.tur-fg-road{margin-top:18px;padding:16px 12px 12px;border-radius:22px;background:var(--g1);border:1px solid var(--line);display:grid;gap:10px}
#tur-fg-s2:not([data-p=intro]) .tur-fg-road{margin-top:12px}
.tur-fg-nodes{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center}
.tur-fg-nd{display:grid;justify-items:center;gap:6px;width:76px}
.tur-fg-nd.tur-fg-src{width:auto;min-width:76px}
.tur-fg-disc{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;position:relative;background:var(--g2);border:1px solid var(--line-2);transition:box-shadow .5s,border-color .5s}
.tur-fg-disc.tur-fg-dsrc{width:auto;min-width:52px;padding:0 9px;display:flex;align-items:center;justify-content:center}
.tur-fg-stack{display:flex;margin:0}
.tur-fg-stack img,.tur-fg-stack .tur-fg-ic.tur-fg-wm{width:30px;height:30px;border-radius:9px;background:#fff;object-fit:contain;padding:3px;border:2px solid var(--g2);box-sizing:border-box}
.tur-fg-stack>*+*{margin-left:-9px}
.tur-fg-stack .tur-fg-mere{width:30px;height:30px;border-radius:9px;background:var(--g3);border:2px solid var(--g2);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink);box-sizing:border-box}
.tur-fg-stack .tur-fg-ic{width:30px;height:30px;border-radius:9px;background:var(--g3);display:grid;place-items:center;border:2px solid var(--g1);box-sizing:border-box}
.tur-fg-stack .tur-fg-ic svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8}
.tur-fg-stack .tur-fg-okring{border-color:var(--live)!important;box-shadow:0 0 0 1px var(--live)}
.tur-fg-disc.tur-fg-icu{background:#E8175D;border-color:#E8175D}
.tur-fg-disc.tur-fg-icu svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tur-fg-disc.tur-fg-fm{color:var(--amber);border-color:color-mix(in oklab,var(--amber) 45%,var(--line-2))}
.tur-fg-disc.tur-fg-fm svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.tur-fg-nd small{font-size:11px;color:var(--ink-3);line-height:1.25;text-align:center}
.tur-fg-nd small b{display:block;color:var(--ink-2);font-weight:600;font-size:11.5px}
.tur-fg-w{height:2px;margin:0 -10px 28px;position:relative;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px)}
.tur-fg-w i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 10px 1px color-mix(in oklab,var(--live) 70%,transparent);display:none;animation:tur-fg-run 1.8s linear infinite}
.tur-fg-w.tur-fg-on{background:color-mix(in oklab,var(--live) 55%,transparent)}
.tur-fg-w.tur-fg-on i{display:block}
.tur-fg-wb i{animation-delay:.9s}
@keyframes tur-fg-run{from{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateX(calc(var(--len,60px) - 8px));opacity:0}}
.tur-side p.tur-fg-cap{margin:0;font-size:12px;color:var(--ink-2);text-align:center;line-height:1.45;text-wrap:balance}
.tur-fg-cap b{color:var(--ink)}
.tur-fg-road.tur-fg-kort{padding:10px 10px 8px}
.tur-fg-road.tur-fg-kort .tur-fg-cap,.tur-fg-road.tur-fg-kort .tur-fg-nd small{display:none}
.tur-fg-road.tur-fg-kort .tur-fg-w{margin-bottom:0}
.tur-fg-road.tur-fg-kort .tur-fg-disc{width:42px;height:42px;border-radius:13px}
.tur-fg-road.tur-fg-kort .tur-fg-disc.tur-fg-dsrc{width:auto;min-width:42px;padding:0 6px}
.tur-fg-road.tur-fg-done .tur-fg-disc{border-color:color-mix(in oklab,var(--live) 60%,var(--line-2))}
.tur-fg-road.tur-fg-done .tur-fg-disc.tur-fg-fm{box-shadow:0 0 0 5px color-mix(in oklab,var(--live) 14%,transparent),0 0 26px -6px color-mix(in oklab,var(--live) 80%,transparent)}

/* guidens sider */
.tur-side p.tur-fg-trinnr{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.tur-fg-trinnr:empty{display:none}
.tur-fg-trinnr+h1{margin-top:8px}
/* Stregen over trinene og rækkernes luft/skillelinjer kom i mockuppen fra mock.css's
   .steps/.steps li - brugeren godkendte det viste, så de står her med vilje. */
.tur-fg-skel{display:none;border:0;border-top:1px solid var(--line);margin:16px 0 0;height:0}
#tur-fg-s2:not([data-p=intro]) .tur-fg-skel{display:block}
.tur-fg-krop{display:none;margin-top:6px;gap:10px}
.tur-side p.tur-fg-subgo{margin:0;font-size:12px;color:var(--ink-3)}
#tur-fg-s2[data-p=konto] #tur-fg-konto,#tur-fg-s2[data-p=enhed] #tur-fg-enhed{display:grid;animation:tur-fg-in .35s var(--e-out)}
#tur-fg-s2:not([data-p=intro]) #tur-fg-klar{display:none}
#tur-fg-s2[data-p=slut] #tur-fg-lead{display:none}
@keyframes tur-fg-in{from{opacity:0;transform:translateY(-4px)}}
.tur-side p.tur-fg-p,.tur-fg-p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0}
.tur-fg-p b{color:var(--ink)}
.tur-fg-klar{margin-top:14px;padding:11px 13px;border-radius:16px;background:var(--g1);border:1px solid var(--line);display:grid;gap:6px}
.tur-fg-klar b.tur-fg-h{font-size:13px;font-weight:600;color:var(--ink)}
.tur-fg-klar ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tur-fg-klar li{font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.tur-fg-klar li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
.tur-fg-klar small{font-size:12px;color:var(--ink-3);line-height:1.45}

/* dine tal, tryk for at kopiere */
.tur-fg-nums{border-radius:16px;background:var(--g1);border:1px solid var(--line);padding:10px 12px;display:grid;gap:8px}
.tur-fg-nums .tur-fg-t{font-size:11.5px;color:var(--ink-3)}
.tur-fg-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tur-fg-r button{border-radius:12px;background:var(--g0);border:1px solid var(--line);padding:7px 8px;text-align:left;color:var(--ink);font:inherit;transition:border-color .2s}
.tur-fg-r button small{display:block;font-size:10.5px;color:var(--ink-3)}
.tur-fg-r button b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.tur-fg-r button.tur-fg-cp{border-color:var(--live)}
.tur-fg-r button.tur-fg-cp small{color:var(--live)}

/* skitserne af intervals.icu's og Garmins sider */
.tur-fg-chips{display:grid;gap:6px}
.tur-fg-chips:empty{display:none}
.tur-fg-there{display:grid;gap:8px}
.tur-fg-there:empty{display:none}
.tur-fg-t{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.tur-fg-t b{color:var(--ink)}
.tur-fg-icu{border-radius:16px;border:1px dashed var(--line-2);background:var(--g0);padding:10px 12px;display:grid;gap:8px}
.tur-fg-login{cursor:pointer}
.tur-fg-itile{background:#fff;border-radius:10px;height:40px;display:grid;place-items:center}
.tur-fg-itile img{max-height:28px;max-width:60%;object-fit:contain}
.tur-fg-itile b{color:#111;font-size:15px}
.tur-fg-itile .tur-fg-wmsvg{height:28px;width:auto}
.tur-fg-irow{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;align-items:start;font-size:12.5px;color:var(--ink-2)}
.tur-fg-cb{position:relative;width:16px;height:16px;margin-top:1px;border-radius:3px;border:2px solid var(--ink-3);box-sizing:border-box}
.tur-fg-irow.tur-fg-on .tur-fg-cb{background:#5B8DEF;border-color:#5B8DEF}
.tur-fg-irow.tur-fg-on .tur-fg-cb::before{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tur-fg-irow.tur-fg-hot span{color:var(--ink)}
.tur-fg-irow .tur-fg-itag{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--amber);white-space:nowrap;align-self:center}
.tur-fg-irow.tur-fg-selv .tur-fg-itag{color:var(--live)}
.tur-fg-irow.tur-fg-selv .tur-fg-cb{border-style:dashed;border-color:var(--live)}
.tur-fg-irow.tur-fg-hot .tur-fg-cb{border-color:var(--amber)}
.tur-fg-irow.tur-fg-hot .tur-fg-cb::after{content:"";position:absolute;inset:-6px;border-radius:6px;border:2px solid var(--amber);animation:tur-fg-ping 1.6s var(--e-out) infinite}
.tur-fg-gc .tur-fg-gq{font-size:13px;color:var(--ink);font-weight:600}
.tur-fg-gc .tur-fg-gbtn{margin-top:2px;text-align:center;font-size:12.5px;font-weight:700;color:#fff;background:#1366D6;border-radius:6px;padding:7px}
.tur-fg-lh{display:flex;align-items:center;gap:8px}
.tur-fg-lh .tur-fg-pk{width:22px;height:22px;border-radius:50%;background:#E8175D;display:grid;place-items:center}
.tur-fg-lh .tur-fg-pk svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tur-fg-lh b{font-size:13.5px;font-weight:600;color:var(--ink)}
.tur-fg-felt{font-size:12px;color:var(--ink-3);padding:5px 0 4px;border-bottom:1px solid var(--line-2)}
.tur-fg-isw{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.tur-fg-isw.tur-fg-hot span{color:var(--ink)}
.tur-fg-ibtn{white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#E8175D;border:1px solid color-mix(in oklab,#E8175D 60%,transparent);border-radius:8px;padding:4px 9px;position:relative}
.tur-fg-ibtn.tur-fg-ping::after,.tur-fg-tg.tur-fg-ping::after{content:"";position:absolute;inset:-5px;border-radius:12px;border:2px solid var(--amber);animation:tur-fg-ping 1.6s var(--e-out) infinite}
@keyframes tur-fg-ping{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.15)}}
.tur-fg-tg{position:relative;flex:none;width:34px;height:20px;border-radius:20px;background:var(--g3);border:1px solid var(--line-2);box-sizing:border-box}
.tur-fg-tg::before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-3)}
.tur-fg-tg.tur-fg-on{background:color-mix(in oklab,var(--live) 70%,var(--g3));border-color:var(--live)}
.tur-fg-tg.tur-fg-on::before{transform:translateX(14px);background:var(--ink)}
.tur-fg-tg.tur-fg-ping::after{border-radius:20px}
.tur-fg-sprog{font-size:11.5px;color:var(--ink-3)}

/* tjekkortet pr. enhed */
.tur-fg-dk{border-radius:16px;background:var(--g1);border:1px solid var(--line);padding:10px 12px;display:grid;gap:8px;transition:border-color .4s}
.tur-fg-dk.tur-fg-ok{border-color:color-mix(in oklab,var(--live) 55%,var(--line))}
.tur-fg-dk.tur-fg-fra{border-color:color-mix(in oklab,var(--warn) 55%,var(--line))}
.tur-fg-dkh{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center}
.tur-fg-dkh img,.tur-fg-dkh .tur-fg-ic{width:30px;height:30px;border-radius:9px;background:#fff;object-fit:contain;padding:3px;box-sizing:border-box}
.tur-fg-dkh .tur-fg-ic:not(.tur-fg-wm){background:var(--g3);display:grid;place-items:center}
.tur-fg-dkh .tur-fg-ic:not(.tur-fg-wm) svg,.tur-fg-wsum .tur-fg-ic:not(.tur-fg-wm) svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8}
.tur-fg-dkh b{font-size:14px;font-weight:600;color:var(--ink)}
.tur-fg-dkh .tur-fg-s{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
.tur-fg-dkh .tur-fg-s i{width:7px;height:7px;border-radius:50%;background:currentColor}
.tur-fg-dk.tur-fg-ok .tur-fg-s{color:var(--live)}.tur-fg-dk.tur-fg-fra .tur-fg-s{color:var(--warn)}
.tur-fg-dk ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.tur-fg-dk li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;font-size:13px;color:var(--ink-2);line-height:1.4;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.tur-fg-dk li>i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;align-self:start;margin-top:1px;box-sizing:border-box}
.tur-fg-dk li.ok>i,.tur-fg-dk li.skip>i{background:var(--live)}
.tur-fg-dk li.ok>i::before,.tur-fg-dk li.skip>i::before{content:"";width:4px;height:8px;margin-top:-2px;border:solid var(--g0);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tur-fg-dk li.vent>i{border:2px solid var(--live);border-right-color:transparent;animation:tur-fg-spin .9s linear infinite;width:14px;height:14px;margin:2px}
.tur-fg-dk li.fra>i{background:var(--warn)}
.tur-fg-dk li.andet>i{border:2px solid var(--line-2)}
.tur-fg-dk li.andet>i::before{content:"";width:6px;height:2px;background:var(--ink-3)}
.tur-fg-dk li.fra>i::before{content:"!";color:var(--g0);font-size:12px;font-weight:800;font-style:normal}
.tur-fg-dk li.fra>span{color:var(--ink)}
.tur-fg-dk li b{color:var(--ink)}
.tur-fg-dk li small{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.tur-fg-skipp{display:block;margin-top:6px;font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font-family:inherit}
@keyframes tur-fg-spin{to{transform:rotate(360deg)}}

/* slut */
.tur-fg-win{display:none;margin-top:6px;padding:14px;border-radius:22px;border:1px solid color-mix(in oklab,var(--live) 55%,var(--line));background:var(--g1);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--live) 10%,transparent);gap:10px}
.tur-fg-win.tur-fg-on{display:grid;animation:tur-fg-in .45s var(--e-out)}
.tur-fg-win h3{font-family:var(--skrift-dom);font-weight:400;font-size:26px;line-height:1.1;margin:0;color:var(--ink)}
.tur-fg-strip{display:grid;gap:7px;padding:10px 11px 9px;border-radius:14px;background:var(--g0);border:1px solid var(--line)}
.tur-fg-hd3{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.tur-fg-hd3 b{color:var(--ink);font-weight:600}
.tur-fg-dage{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;align-items:end;height:30px}
.tur-fg-dage i{display:block;border-radius:3px 3px 1px 1px;background:var(--live);height:calc(var(--h)*100%);min-height:2px;transform-origin:bottom;animation:tur-fg-grow .6s var(--e-out) both;animation-delay:calc(var(--d)*45ms)}
.tur-fg-dage i.tur-fg-hvil{background:var(--line-2);animation:none}
@keyframes tur-fg-grow{from{transform:scaleY(0)}}
.tur-fg-wsum{display:grid;gap:6px}
.tur-fg-wsum>div{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:center}
.tur-fg-wsum img,.tur-fg-wsum .tur-fg-ic{width:26px;height:26px;border-radius:8px;background:#fff;object-fit:contain;padding:2px;grid-row:span 2;box-sizing:border-box}
.tur-fg-wsum .tur-fg-ic:not(.tur-fg-wm){background:var(--g3);display:grid;place-items:center}
.tur-fg-wsum b{font-size:13px;font-weight:600;color:var(--ink)}
.tur-fg-wsum span{display:flex;flex-wrap:wrap;gap:4px 10px}
.tur-fg-wsum em{font-style:normal;font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px}
.tur-fg-wsum em::before{content:"";width:5px;height:9px;margin:-3px 2px 0 1px;border:solid var(--live);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* s2w: Apple Watch alene - den lodrette stepper med ét trin */
.tur-fg-steps{margin-top:20px;display:grid}
.tur-fg-st{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:0 0 16px}
.tur-fg-n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--g1);border:1px solid var(--line-2);color:var(--ink-3);transition:background .35s,border-color .35s,color .35s;box-sizing:border-box}
.tur-fg-n svg{width:15px;height:15px;stroke:var(--g0);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;display:none}
.tur-fg-st.tur-fg-now .tur-fg-n{background:var(--amber);border-color:var(--amber);color:var(--amber-ink);box-shadow:0 0 0 5px var(--amber-dim)}
.tur-fg-st.tur-fg-done .tur-fg-n{background:var(--live);border-color:var(--live)}
.tur-fg-st.tur-fg-done .tur-fg-n b{display:none}.tur-fg-st.tur-fg-done .tur-fg-n svg{display:block}
.tur-fg-st h3{font-size:15.5px;font-weight:600;line-height:1.3;padding-top:5px;margin:0;color:var(--ink)}
.tur-fg-st .tur-fg-body{display:none;margin-top:6px;gap:10px}
.tur-fg-st.tur-fg-now .tur-fg-body{display:grid}
.tur-side p.tur-fg-doneline{display:none;font-size:12.5px;color:var(--ink-2);margin:2px 0 0}
.tur-fg-st.tur-fg-done .tur-fg-doneline{display:block}

#tur-videre.tur-fg-av{opacity:.4}
@media (max-width:359px){.tur-fg-irow small{display:none}}
@media (prefers-reduced-motion:reduce){.tur-fg-w i,.tur-fg-dage i,.tur-fg-ping::after,.tur-fg-irow.tur-fg-hot .tur-fg-cb::after,.tur-fg-dk li.vent>i{animation:none}}

/* Intet dobbelttryk-zoom (9/10 2026: et dobbelttryk paa turens "dig"-ark zoomede hele
   appen ind - brugerens skaermbillede). `manipulation` beholder panorering og zoom med
   to fingre; touch-action gaelder som faellesmaengden langs forfaedrene, saa reglen paa
   html daekker hele siden. html.tur-laast (pinch-zoom) er mere specifik og vinder. */
html{touch-action:manipulation}

/* Garmin-skallen paa Today (9/10 2026, tegnIdagSkalKort i forma.js): samme .kort-ramme
   som "When can you train?". Chips-raekken ruller inden for kortets egen polstring
   (16px) og ikke sidens rende - ellers stak den ud over kortets kant. */
.skal-kort b{display:block; font-size:15px; font-weight:600; color:var(--tekst)}
.skal-kort p{margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--daempet)}
.skal-kort .skal-q{margin-top:14px; font-size:13px; color:var(--tekst)}
.skal-kort .chips{margin:8px -16px 0; padding:0 16px 2px}

/* Dagens detaljevisning for en koert dag (21/10 2026, docs/mockups/makeover/dag-detalje.html):
   klokkeslaet foran hver tur, det der skiller turene ad under navnet, tid + turens Load til
   hoejre; traeningstiden oeverst, gang og korte aktiviteter foldet i kroppen. */
.pd-sum.pd-sum-top{margin:0 0 10px; font-size:13px}
.pd-sum.pd-sum-top b{font-size:22px; line-height:1.1; margin-right:4px}
.pd-sum.pd-sum-top .pd-tid{display:inline-flex; vertical-align:middle; margin-left:8px}
.pd-sum-oev{display:block; margin-top:2px; font-size:12px; color:var(--daempet-2)}
.pd-lr-liste{gap:0}
.pd-r.pd-lr{grid-template-columns:38px 16px minmax(0, 1fr) auto; column-gap:8px; align-items:start; padding:8px 0}
.pd-r.pd-lr + .pd-r.pd-lr{border-top:1px solid var(--kant)}
.pd-r.pd-lr::after{display:none}
.pd-r.pd-lr > .akt-ikon{margin-top:2px}
.pd-kl{font-size:12px; color:var(--daempet-2); font-variant-numeric:tabular-nums; padding-top:2px}
.pd-r.pd-lr .pd-r-t{display:block}
.pd-r.pd-lr .pd-r-t small, .pd-lt small{display:block; font-size:12px; color:var(--daempet-2); font-weight:400}
.pd-lt{font-size:13px; font-weight:500; color:var(--daempet); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.pd-r.pd-lr.daempet{opacity:.55}
.oev{margin-top:8px; border-top:1px solid var(--kant)}
.oev-fold{display:flex; align-items:center; gap:8px; width:100%; padding:12px 0; background:none; border:none;
  font-family:inherit; font-size:13px; color:var(--daempet); text-align:left; cursor:pointer}
.oev-fold .akt-ikon{width:16px; height:16px; flex:none}
.oev-fold .oev-t{margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap}
.oev-vend{width:16px; height:16px; flex:none; transition:transform .2s}
.oev-fold[aria-expanded="true"] .oev-vend{transform:rotate(180deg)}
.oev-liste{padding-bottom:4px}
.oev-liste[hidden]{display:none}
.dagload{margin-top:10px; display:grid; gap:6px}
.dagload-r{display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--daempet-2)}
.dagload-r b{font-size:17px; font-weight:600; color:var(--tekst); font-variant-numeric:tabular-nums}
.dagload-spor{display:flex; height:6px; border-radius:99px; overflow:hidden; background:var(--skinne)}
.dagload-spor i{display:block; height:100%; background:var(--zone1)}
.dagload-spor i.g{background:var(--daempet-2)}
.rpe-svaret{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tekst)}
.rpe-svaret .val{background:var(--rav-dim); color:var(--rav); border-radius:999px; padding:3px 10px; font-weight:600; font-variant-numeric:tabular-nums}
.rpe-aendr{margin-left:auto; background:none; border:none; padding:6px 0; font-family:inherit; font-size:12px; color:var(--daempet-2); cursor:pointer}
.rpe2.foldet .q, .rpe2.foldet .rpe-raekke, .rpe2.foldet .hint{display:none}
.rpe2:not(.foldet) .rpe-svaret{display:none}
@media (prefers-reduced-motion:reduce){.oev-vend{transition:none}}
.koert{margin-top:12px; padding-top:12px; border-top:1px solid var(--kant)}

/* ── Startgaettet (21/10 2026): kortet paa Today's Form-plads, 1:1
   docs/mockups/makeover/startgaet.html. Kun klasser med sg-; .fh/.lag-r er Base-rækkens. ── */
.sg-kort{background:var(--kort); border:1px solid var(--kant); border-radius:var(--r-flise); padding:16px 18px}
.formrow .sg-kort .fh{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-bottom:14px; font-size:15px; color:var(--tekst)}
.sg-kort .fh > span:first-child{font-weight:600; font-size:15px}
.sg-hojre{font-size:13px; color:var(--daempet-2); display:flex; align-items:center; gap:8px}
.sg-prikker{display:inline-flex; gap:4px}
.sg-prikker i{width:6px; height:6px; border-radius:50%; background:var(--skinne-2)}
.sg-prikker i.on{background:var(--rav)}
.sg-sp{margin:0 0 12px; color:var(--tekst); font-size:15px}
.sg-knapper{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.sg-knapper.sg-ord{grid-template-columns:1fr}
.sg-knapper button{font-family:inherit; font-size:15px; font-weight:500; color:var(--tekst); background:var(--kort-2);
  border:1px solid var(--kant); border-radius:14px; min-height:46px; padding:9px 12px; cursor:pointer;
  transition:background .15s, border-color .15s}
.sg-knapper.sg-ord button{display:flex; justify-content:space-between; align-items:baseline; text-align:left}
.sg-knapper small{font-size:13px; font-weight:400; color:var(--daempet-2)}
.sg-knapper button[aria-pressed="true"]{background:var(--rav-dim); border-color:var(--rav); color:var(--rav)}
.sg-knapper button:focus-visible, .sg-lnk:focus-visible, .sg-synk button:focus-visible{outline:2px solid var(--rav); outline-offset:2px}
.sg-fod{display:flex; justify-content:space-between; align-items:center; margin-top:12px}
.sg-lnk{font-family:inherit; font-size:13px; background:none; border:0; padding:6px 0; color:var(--daempet); cursor:pointer}
.sg-synk{margin:10px 0 0; font-size:13px; color:var(--daempet-2)}
.sg-synk button{font:inherit; font-weight:500; color:var(--rav); background:none; border:0; padding:0; cursor:pointer}
.sg-synk.sg-synk-fod{margin:0}
.sg-tekst{margin:14px 0 0; font-size:13px; line-height:1.55; color:var(--daempet)}
.formrow .sg-kort .lag-spor{height:9px; border-radius:3px; background:var(--skinne-2)}
.formrow .sg-kort .lag-spor i{transition:width .7s var(--ud)}
.formrow .sg-kort .lag-v{font-size:14px}
.sg-trin.sg-ind{animation:sg-ind .22s cubic-bezier(.2,.7,.2,1)}
@keyframes sg-ind{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .sg-trin.sg-ind{animation:none}
  .formrow .sg-kort .lag-spor i{transition:none}
}

/* ══ KROPPENS UDVIKLING (#ark-krop, 24/10 2026) ════════════════════════════
   Aabnes fra Sleep/HRV/Resting HR paa Today (aabnKrop() i forma.js). Maalingens
   farve er dial'ens egen: soevn --z1, HRV og hvilepuls --z2 (se .kspan). Teksten
   baerer altid blaek, aldrig maalingens farve. */
#ark-krop{--krop:var(--z2)}
#ark-krop[data-maaling="soevn"]{--krop:var(--z1)}
.kdial.trykbar{cursor:pointer; transition:transform .15s var(--ud), border-color .15s;
  -webkit-tap-highlight-color:transparent}
.kdial.trykbar:active{transform:scale(.97); border-color:var(--kant-staerk)}
.kdial.trykbar:focus-visible{outline:2px solid var(--rav); outline-offset:2px}
.kdial.trykbar .hd2{padding-right:10px}
.kdial-pil{position:absolute; top:12px; right:7px; width:11px; height:11px; fill:none;
  stroke:var(--daempet-2); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

.krop-faner{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px;
  margin:4px 0 12px; border-radius:var(--r-kontrol); background:var(--felt);
  border:1px solid var(--kant-svag)}
.krop-faner button, .krop-perioder button{font:inherit; font-size:13px; font-weight:600;
  color:var(--daempet); background:none; border:none; border-radius:10px; padding:7px 4px;
  cursor:pointer; transition:background .2s, color .2s}
.krop-faner button.aktiv{background:var(--kort-2); color:var(--tekst);
  box-shadow:0 1px 0 var(--kant-staerk) inset, var(--skygge)}

.krop-helt{padding:2px 2px 0}
.krop-overskrift{font-family:var(--skrift-dom); font-size:24px; line-height:1.1;
  letter-spacing:-.01em; color:var(--tekst)}
.krop-tal-raekke{display:flex; align-items:center; justify-content:space-between; gap:8px 12px;
  flex-wrap:wrap; margin-top:2px}
.krop-tal{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; margin-top:4px}
.krop-tal b{font-size:clamp(34px, 11vw, 44px); font-weight:600; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.krop-tal small{font-size:14px; color:var(--daempet)}
.krop-chip{align-self:center; margin-left:4px; font-size:12px; font-weight:600;
  padding:3px 9px; border-radius:999px; font-variant-numeric:tabular-nums;
  color:var(--daempet); background:var(--skinne-2)}
.krop-chip.god{color:var(--groen); background:color-mix(in srgb, var(--groen) 16%, transparent)}
.krop-chip.daarlig{color:var(--z4); background:color-mix(in srgb, var(--z4) 16%, transparent)}
.krop-under{font-size:12px; color:var(--daempet)}

.krop-perioder{display:inline-flex; gap:2px; margin:0; padding:3px;
  border-radius:12px; background:var(--felt); border:1px solid var(--kant-svag)}
.krop-perioder button{padding:4px 12px; font-size:12px}
.krop-perioder button.aktiv{background:var(--kort-2); color:var(--tekst)}

.krop-graf{position:relative; margin:6px -4px 0; touch-action:pan-y; user-select:none;
  -webkit-user-select:none}
#krop-indhold.henter .krop-graf, #krop-indhold.henter .krop-helt{opacity:.5; transition:opacity .2s}
.krop-svg{display:block; width:100%; height:auto; overflow:visible}
.krop-svg .net{stroke:var(--kant); stroke-width:1}
.krop-svg .akse{font-size:10px; fill:var(--daempet-2); font-variant-numeric:tabular-nums}
.krop-svg .baand{fill:var(--krop); opacity:.2}
.krop-svg .g0{stop-color:var(--krop); stop-opacity:.2}
.krop-svg .g1{stop-color:var(--krop); stop-opacity:0}
.krop-svg .flade{fill:url(#krop-grad)}
.krop-svg .linje{fill:none; stroke:var(--krop); stroke-width:2.2; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1}
.krop-svg .prik{fill:var(--krop); opacity:0}
.krop-svg .nu{fill:var(--krop); stroke:var(--kort-2); stroke-width:2; opacity:0}
.krop-svg .nu-glod{fill:var(--krop); opacity:0}
.krop-svg .flade, .krop-svg .baand{opacity:0}
.krop-svg.tegnet .linje{stroke-dashoffset:0; transition:stroke-dashoffset 1.2s var(--ud)}
.krop-svg.tegnet .flade{opacity:1; transition:opacity .9s .35s}
.krop-svg.tegnet .baand{opacity:.2; transition:opacity .6s}
.krop-svg.tegnet .prik{opacity:.42; transition:opacity .5s calc(.2s + min(var(--i), 120) * 6ms)}
.krop-svg.tegnet .nu{opacity:1; transition:opacity .3s 1.1s}
.krop-svg.tegnet .nu-glod{animation:krop-glod 2.4s 1.2s ease-out infinite}
@keyframes krop-glod{0%{opacity:.45; r:4.5px} 70%,100%{opacity:0; r:13px}}
.krop-svg .mark-linje{stroke:var(--daempet); stroke-width:1; stroke-dasharray:2 3}
.krop-svg .mark-prik{fill:var(--tekst); stroke:var(--kort-2); stroke-width:2}
.krop-svg .greb{fill:transparent; cursor:crosshair}
@media (prefers-reduced-motion: reduce){
  .krop-svg .linje{stroke-dashoffset:0}
  .krop-svg.tegnet *{transition:none !important; animation:none !important}
}
.krop-tip{position:absolute; top:-12px; z-index:2; pointer-events:none; white-space:nowrap;
  display:flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:10px;
  background:var(--bg); border:1px solid var(--kant-staerk); box-shadow:var(--skygge);
  font-size:12px; color:var(--daempet); font-variant-numeric:tabular-nums}
.krop-tip[hidden]{display:none}
.krop-tip b{font-size:14px; color:var(--tekst)}
.krop-tip small{font-size:11px; color:var(--daempet-2)}
.krop-tip .nat{color:var(--daempet-2)}

.krop-forklaring{display:flex; flex-wrap:wrap; gap:4px 12px; margin:2px 2px 0;
  font-size:11px; color:var(--daempet-2)}
.krop-forklaring span{display:inline-flex; align-items:center; gap:6px}
.krop-forklaring i{display:inline-block; background:var(--krop)}
.krop-forklaring .prik{width:5px; height:5px; border-radius:50%; opacity:.6}
.krop-forklaring .linje{width:14px; height:2px; border-radius:2px}
.krop-forklaring .baand{width:14px; height:8px; border-radius:2px; opacity:.25}

.krop-celler{display:grid; grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));
  gap:6px; margin-top:10px}
.krop-celle{display:grid; gap:2px; padding:8px 9px; border-radius:14px;
  background:var(--felt); border:1px solid var(--kant-svag); min-width:0}
.krop-celle .lbl, .krop-konkl .lbl{font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--daempet-2)}
.krop-celle b{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.krop-celle b i{font-style:normal; font-size:12px; font-weight:500; color:var(--daempet);
  margin:0 2px}
.krop-celle small{font-size:11px; color:var(--daempet-2); white-space:nowrap}
.krop-celle .lbl{white-space:nowrap; letter-spacing:.03em}
.krop-konkl{margin-top:8px; padding:10px 14px 12px; border-radius:var(--r-flise);
  background:linear-gradient(160deg, color-mix(in srgb, var(--krop) 12%, var(--kort)), var(--kort));
  border:1px solid var(--kant)}
.krop-konkl p{margin:4px 0 0; font-family:var(--skrift-dom); font-size:17px; line-height:1.3;
  color:var(--tekst)}
.krop-konkl-laast .bib-laas-tekst{margin-top:4px}
.krop-konkl-laast .bib-laas-chip{background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--kort) 82%, transparent) 60%, var(--kort) 100%)}
.krop-tom{font-size:14px; color:var(--daempet); line-height:1.5; padding:24px 4px}
.krop-venter{height:300px; border-radius:var(--r-flise);
  background:linear-gradient(100deg, var(--kort) 30%, var(--kort-2) 50%, var(--kort) 70%);
  background-size:300% 100%; animation:krop-skimmer 1.4s linear infinite}
@keyframes krop-skimmer{from{background-position:100% 0} to{background-position:0 0}}

/* ══ ARK: baggrunden staar stille (24/10 2026) ════════════════════════════
   Mens et ark er aabent, maa siden bag det ikke rulle: baggrunden tager ingen
   fingerbevaegelser, rullet i arket smitter ikke over paa siden, og siden selv
   er laast. Traek-ned-for-at-lukke bor i forma.js (arkTraek). */
.ark{overscroll-behavior:contain}
.ark-baggrund{touch-action:none}
html:has(.ark.vis){overflow:hidden}

/* ══ INGEN BOKSE (27/10 2026) ═══════════════════════════════════════════════
   Brugerens regel: "vi hader bokse". Fliserne har hverken flade eller kant -
   indholdet staar direkte paa siden som i agent-appens Drift-fane, og OMRAADER
   skilles af en haarlinje, der fader ud mod siderne (--streg). Smaa fliser i en
   raekke (.kdial, .sr-k, .rc) faar ingen streg - kun luften skiller dem.
   KUN farve: kanten bliver staaende som gennemsigtig, saa intet flytter sig.
   !important, fordi fliserne har mange skarpere regler (tilstande, id'er), der
   ellers tegnede kassen igen. Arkene (.ark) og knapper/vaelgere er IKKE med.
   --kort/--bg er gennemsigtige inde i fliserne, saa toninger, der fader "til
   flisen" (fx laase-teksten, w/kg), fader ud i himlen i stedet. */
.kort, .kdial, .sr-k, .rc, .rh, .bib-r, .fk-kort, .fk-strip, .streak, .trend, .opfoelg,
.ev, .wkg, main details.dag{background-color:transparent !important; border-color:transparent !important;
  box-shadow:none !important; --kort:transparent; --bg:transparent}
/* w/kg-feltets groenne toning bliver: nu et lysskaer, der fader ud i siden. */
.kort, .rh, .bib-r, .fk-kort, main details.dag{background-image:var(--streg); background-repeat:no-repeat;
  background-position:bottom; background-size:100% 1px}
/* Plans kalenderraekke er trukket 28px op over toppens bundkant (.rail margin-top);
   dagenes flader daekkede kanten foer - uden dem stod den som en streg gennem
   datoerne (brugerens skaermbillede 27/10). */
#cockpit{border-bottom-color:transparent}
/* Den valgte dag i kalenderen: et ravlys bag dagen i stedet for en ramme. */
.rc.sel{background-image:radial-gradient(60% 50% at 50% 35%, var(--rav-dim), transparent 75%) !important}

/* ══ HIMLEN (27/10 2026) ════════════════════════════════════════════════════
   Ét fast lag bag hele appen (se --himmel-* i :root). body er gennemsigtig og
   html baerer --bg, saa intet blinker sort foer laget er tegnet. Cockpit-toppene
   (Today/Activities/You) havde --bg under deres farvede skaer - det ville staa
   som et sort baand i himlen, saa kun skaeret bliver. */
html{background:var(--bg)}
body{background:transparent}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(var(--himmel-top) 0%, var(--himmel-1) 30%, var(--himmel-2) 60%, var(--bg) 100%)}
/* Login (#v-login) har INGEN himmel: forsideGraf staar paa en 60x60-plade i
   flisefarven, som kun forsvinder mod den moerke grund - paa himlen blev den et
   moerkt baand med skarp kant. Headerens og statuslinjens lag dér er ogsaa --bg. */
html:has(#v-login:not(.skjul)) body::after{display:none}
html:has(#v-login:not(.skjul)){--himmel-top:var(--bg)}
.cockpit{background-color:transparent !important}
#tid-aabn, .fk-knap.fk-ghost, .tovalg, .krop-faner, .celle{background-color:var(--felt-glas) !important}