/* app.css — Livs app · etape 1 af redesignet (LifeOS, 8/11-2026).
   Mørk som standard (lys eller «følg telefonen» under Mere → Udseende — tema.js sætter klassen «lys» på <html>).
   Farverne følger app-ikonet: kul og guld. Ingen skrifttyper, billeder eller scripts udefra; alle mål i rem, så
   «Større tekst» kan skalere det hele. */

:root {
  --sikker-top: env(safe-area-inset-top, 0px);     /* telefonens sikre zone (testbrowseren sætter sin egen) */
  --sikker-bund: env(safe-area-inset-bottom, 0px);
  --bg: #0e1013;
  --flade: #181b20;
  --flade-2: #20242b;
  --flade-3: #2a2f37;
  --flade-ark: #1d2026;
  --streg: rgba(255, 255, 255, 0.07);
  --streg-2: rgba(255, 255, 255, 0.11);
  --tekst: #f2ede6;
  --tekst-2: #a5aab3;
  --tekst-3: #6c727c;
  --guld: #e8b467;
  --guld-2: #f4c880;
  --guld-svag: rgba(232, 180, 103, 0.15);
  --guld-tekst: #1c1408;
  --roed: #ff6f61;
  --groen: #59c98a;
  --blaa: #6fa8ff;
  --bar: rgba(14, 16, 19, 0.74);
  --skygge: 0 10px 30px rgba(0, 0, 0, 0.22);
  --besked-bg: #2b3038;
  --besked-tekst: #f6f2ec;
  --rund: 22px;
  --rund-m: 16px;
  --rund-s: 12px;
  --side: 18px;
  --fane-h: 56px;
  --top-h: 44px;
  --hum-1: #f07b6c; --hum-2: #f0a45e; --hum-3: #cbb88c; --hum-4: #8fd07f; --hum-5: #4fc4a7;
  --t-roed: #ff8073; --t-orange: #f5a75e; --t-guld: #e8b467; --t-groen: #6fd08c; --t-turkis: #4fc8b9;
  --t-blaa: #7aaeff; --t-lilla: #b591ff; --t-rosa: #ff8db5; --t-graa: #a5aab3;
  /* årsoverblikket: én farve (guld), mere = lysere i mørk — valideret 8/11 (dataviz: monotont, 2,18:1 mod kortet) */
  --skala-0: var(--flade-2); --skala-1: #634e2b; --skala-2: #8f6d36; --skala-3: #bc8c44; --skala-4: #e8b467;
  color-scheme: dark;
}

html.lys {
  --bg: #f4f1ec;
  --flade: #ffffff;
  --flade-2: #f1ede6;
  --flade-3: #e6e0d6;
  --flade-ark: #ffffff;
  --streg: rgba(40, 30, 15, 0.07);
  --streg-2: rgba(40, 30, 15, 0.13);
  --tekst: #1d1a16;
  --tekst-2: #6d675e;
  --tekst-3: #a0998e;
  --guld: #a66d18;
  --guld-2: #8c5a10;
  --guld-svag: rgba(166, 109, 24, 0.12);
  --guld-tekst: #fffaf2;
  --roed: #d6402c;
  --groen: #2e9a5b;
  --blaa: #2c6ed8;
  --bar: rgba(244, 241, 236, 0.8);
  --skygge: 0 1px 2px rgba(40, 30, 15, 0.05), 0 8px 24px rgba(40, 30, 15, 0.06);
  --besked-bg: #1d1a16;
  --besked-tekst: #fbf8f3;
  --hum-1: #d65a49; --hum-2: #d9853a; --hum-3: #a8955f; --hum-4: #4f9e3f; --hum-5: #1f957a;
  --t-roed: #d24a36; --t-orange: #c9701f; --t-guld: #a66d18; --t-groen: #2e9a5b; --t-turkis: #158f80;
  --t-blaa: #2c6ed8; --t-lilla: #7a55d4; --t-rosa: #c93d72; --t-graa: #6d675e;
  --skala-1: #dcae62; --skala-2: #bd873a; --skala-3: #99661e; --skala-4: #6b440c;   /* mere = mørkere i lys (2,04:1) */
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.stor-tekst { font-size: 112.5%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--fane-h) + var(--sikker-bund) + 28px);
}
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--guld); }
.skjult { display: none !important; }
.ikon { width: 1.375rem; height: 1.375rem; flex: none; display: block; }
.fyld { fill: none; }

/* ---------------------------------------------------------------- top og store titler */

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: var(--sikker-top);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
html.lys body::before {                /* lys tema: uret øverst er hvidt, så giv det lidt skygge at stå på */
  content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 25; height: var(--sikker-top);
  pointer-events: none; background: linear-gradient(rgba(25, 20, 12, 0.42), rgba(25, 20, 12, 0));
}
.top.fast {
  background: var(--bar); box-shadow: 0 0.5px 0 var(--streg-2);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
}
.top-indhold {
  height: var(--top-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 6px; max-width: 760px; margin: 0 auto;
}
.lille-titel {
  grid-column: 2; margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw;
  opacity: 0; transform: translateY(5px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.top.fast .lille-titel { opacity: 1; transform: none; }
.top-tilbage {
  grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 0; border: 0; background: none;
  color: var(--guld); font-size: 1.0625rem; padding: 0 10px 0 0; min-height: 44px; max-width: 34vw;
}
.top-tilbage .ikon { width: 1.75rem; height: 1.75rem; margin-right: -2px; }
.top-tilbage span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-tilbage:active { opacity: 0.55; }
.top-handling { grid-column: 3; justify-self: end; display: flex; gap: 2px; }
.top-knap {
  width: 44px; height: 44px; border: 0; background: none; color: var(--guld); display: grid; place-items: center;
  border-radius: 50%;
}
.top-knap:active { background: var(--flade-2); }

main {
  padding: calc(var(--sikker-top) + 8px) var(--side) 0; max-width: 760px; margin: 0 auto;
  overflow-x: clip;                    /* en side, der glider ind, må aldrig gøre siden bredere end skærmen */
}
body.med-top main { padding-top: calc(var(--sikker-top) + var(--top-h)); }
.hoved { padding: 4px 2px 16px; }
.hoved-over {
  margin: 0 0 2px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--guld);
}
.hoved-titel { margin: 0; font-size: 2.125rem; line-height: 1.12; font-weight: 700; letter-spacing: -0.024em; }
.hoved-under { margin: 6px 0 0; color: var(--tekst-2); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- faner */

/* Sofies egen adgang (9/11-2026): kun Film & serier — ingen faner */
body.kun-film .faner, body.kun-sofie .faner { display: none; }
body.kun-film, body.kun-sofie { --fane-h: 0px; }
.faner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center;
  padding: 5px 8px calc(3px + var(--sikker-bund)); background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 -0.5px 0 var(--streg-2);
}
.fane {
  flex: 1; max-width: 130px; min-height: 50px; border: 0; background: none; color: var(--tekst-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px 0;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em;
}
.fane .ikon { width: 27px; height: 27px; transition: transform 0.15s ease; }
.fane:active .ikon { transform: scale(0.9); }
.fane.valgt { color: var(--guld); }
.fane.valgt .fyld { fill: currentColor; fill-opacity: 0.22; }

/* ---------------------------------------------------------------- kort, sektioner og tekst */

.kort {
  background: var(--flade); border-radius: var(--rund); padding: 18px; margin: 0 0 14px;
  box-shadow: var(--skygge); border: 0.5px solid var(--streg);
}
.sektion { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 2px 12px; }
.sektion h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; }
.sektion h2 .ikon { color: var(--guld); width: 1.25rem; height: 1.25rem; }
.kort > .sektion:first-child { margin-top: 0; }
.sektion-link { border: 0; background: none; color: var(--guld); font-size: 0.9375rem; padding: 6px 0; }
.etiket { margin: 0 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2); }
.stille { color: var(--tekst-2); }
.lille { font-size: 0.875rem; }
.tom {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 12px;
  color: var(--tekst-2);
}
.tom .ikon { width: 2.25rem; height: 2.25rem; color: var(--tekst-3); }
.fejltekst { color: var(--roed); padding: 18px 4px; }

.dag-titel { margin: 0 0 10px; font-size: 1.375rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.resume {
  margin: 0 0 16px; padding: 12px 14px; border-radius: var(--rund-s); background: var(--guld-svag); color: var(--tekst);
  font-size: 0.9375rem; line-height: 1.5;
}
.resume .etiket { color: var(--guld); margin-bottom: 4px; }
.tekst { font-size: 1.0625rem; line-height: 1.62; }
.tekst p { margin: 0 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tekst p:last-child { margin-bottom: 0; }
.tekst h3 { margin: 22px 0 8px; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
.tekst h3:first-child { margin-top: 0; }
.tekst .punkt { display: flex; gap: 10px; margin: 0 0 8px; }
.tekst .punkt::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--guld); margin-top: 0.72em; }
.tekst .opgave::before { width: 14px; height: 14px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1.5px var(--tekst-3); margin-top: 0.28em; }
.tekst .opgave.afkrydset::before { background: var(--guld); box-shadow: none; }
.tekst .opgave.afkrydset { color: var(--tekst-2); text-decoration: line-through; }
.tekst blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--guld); color: var(--tekst-2); white-space: pre-wrap; }
.tekst hr { border: 0; border-top: 0.5px solid var(--streg-2); margin: 18px 0; }
.meta { color: var(--tekst-2); font-size: 0.875rem; }
.memo { background: var(--flade-2); border-radius: var(--rund-m); padding: 14px 16px; margin: 0 0 14px; }
.tekst .memo-hoved { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.tekst .memo-hoved .ikon { color: var(--guld); width: 1.25rem; height: 1.25rem; }
.fold { margin: 4px 0 2px; }
.fold summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--tekst-2); font-size: 0.9375rem;
  padding: 6px 0; cursor: pointer;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary .ikon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.fold[open] summary .ikon { transform: rotate(180deg); }
.fold .raa { color: var(--tekst-2); font-size: 0.9375rem; line-height: 1.55; margin: 6px 0 10px; white-space: pre-wrap; }

/* ---------------------------------------------------------------- chips og tags */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: var(--flade-2); color: var(--tekst-2); font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
}
.chip .ikon { width: 0.95rem; height: 0.95rem; }
.chip.farve { color: var(--farve); background: color-mix(in srgb, var(--farve) 15%, transparent); }
.f-roed { --farve: var(--t-roed); } .f-orange { --farve: var(--t-orange); } .f-guld { --farve: var(--t-guld); }
.f-groen { --farve: var(--t-groen); } .f-turkis { --farve: var(--t-turkis); } .f-blaa { --farve: var(--t-blaa); }
.f-lilla { --farve: var(--t-lilla); } .f-rosa { --farve: var(--t-rosa); } .f-graa { --farve: var(--t-graa); }
.hum-1 { --hum: var(--hum-1); } .hum-2 { --hum: var(--hum-2); } .hum-3 { --hum: var(--hum-3); }
.hum-4 { --hum: var(--hum-4); } .hum-5 { --hum: var(--hum-5); }
.chip.humoer-chip { color: var(--hum); background: color-mix(in srgb, var(--hum) 15%, transparent); }

/* ---------------------------------------------------------------- humør og skriveboks */

.humoer { display: flex; gap: 8px; justify-content: space-between; }
.humoer-knap {
  flex: 1; max-width: 64px; aspect-ratio: 1; border: 0; border-radius: 18px; background: var(--flade-2);
  color: var(--tekst-3); display: grid; place-items: center; padding: 0;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}
.humoer-knap .ikon { width: 1.9rem; height: 1.9rem; }
.humoer-knap:active { transform: scale(0.93); }
.humoer-knap.valgt { color: var(--hum); background: color-mix(in srgb, var(--hum) 17%, transparent); }

.skriv { display: flex; flex-direction: column; gap: 10px; }
textarea, input[type="search"], input[type="text"], input:not([type]), select.felt {
  width: 100%; border: 0.5px solid var(--streg-2); background: var(--flade-2); color: var(--tekst);
  border-radius: 14px; padding: 13px 15px; font-size: 1.0625rem; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { resize: none; min-height: 112px; line-height: 1.5; }
textarea:focus, input:focus { border-color: var(--guld); box-shadow: 0 0 0 3px var(--guld-svag); }
textarea::placeholder, input::placeholder { color: var(--tekst-3); }

.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px;
  min-height: 50px; padding: 0 20px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.knap .ikon { width: 1.25rem; height: 1.25rem; }
.knap:active { transform: scale(0.98); opacity: 0.88; }
.knap:disabled { opacity: 0.45; }
.knap.primaer { background: var(--guld); color: var(--guld-tekst); }
.knap.sekundaer { background: var(--guld-svag); color: var(--guld); }
.knap.flad { background: var(--flade-2); color: var(--tekst); }
.knap.bred { width: 100%; }
.knap.lille { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; border-radius: 12px; }
.knap-raekke { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------- lister (Mere) */

.gruppe-titel { margin: 26px 16px 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-2); }
.gruppe-titel:first-child { margin-top: 6px; }
.gruppe { background: var(--flade); border-radius: var(--rund-m); overflow: hidden; border: 0.5px solid var(--streg); }
.gruppe-note { margin: 8px 16px 0; font-size: 0.8125rem; line-height: 1.45; color: var(--tekst-2); }
.raekke {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 54px; padding: 10px 16px;
  border: 0; background: none; color: inherit; text-align: left;
}
.raekke + .raekke::before {
  content: ""; position: absolute; top: 0; right: 0; left: 61px; border-top: 0.5px solid var(--streg-2);
}
button.raekke:active, .raekke.tryk:active { background: var(--flade-2); }
.raekke-krop { flex: 1; min-width: 0; }
.raekke-titel { font-size: 1.0625rem; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.raekke-under { font-size: 0.8125rem; color: var(--tekst-2); margin-top: 1px; }
.raekke-vaerdi { color: var(--tekst-2); font-size: 0.9375rem; text-align: right; white-space: nowrap; }
.raekke .pil-hoejre { color: var(--tekst-3); width: 1.1rem; height: 1.1rem; }
.raekke.fare .raekke-titel { color: var(--roed); }
.raekke-handling {
  border: 0; background: none; color: var(--tekst-3); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; margin-right: -8px;
}
.raekke-handling:active { background: var(--flade-2); color: var(--roed); }
.flise {
  width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff;
  background: var(--flise, #6c727c);
}
.flise .ikon { width: 1.25rem; height: 1.25rem; }
.flise.groen { --flise: #2fb36b; } .flise.blaa { --flise: #3d7cf0; } .flise.lilla { --flise: #8b63e8; }
.flise.orange { --flise: #e8892f; } .flise.turkis { --flise: #1f9e8f; } .flise.roed { --flise: #e5493a; } .flise.graa { --flise: #737a85; }
.flise.guld { --flise: var(--guld); color: var(--guld-tekst); }
.maerke {
  display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--guld-svag); color: var(--guld);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- segment og valg-chips */

.segment {
  display: flex; gap: 2px; padding: 3px; margin: 0 0 14px; background: var(--flade-2); border-radius: 12px;
}
.segment button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px;
  border: 0; border-radius: 9px; background: none; color: var(--tekst-2); font-size: 0.875rem; font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.segment button .ikon { width: 1.05rem; height: 1.05rem; }
.segment button.valgt { background: var(--flade-3); color: var(--tekst); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
html.lys .segment button.valgt { background: var(--flade); }
.segment.i-gruppe { margin: 4px 16px 14px; }

.filtre {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--side)) 14px; padding: 0 var(--side);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filtre::-webkit-scrollbar { display: none; }
.valg-chip {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 13px;
  border-radius: 999px; background: var(--flade-2); color: var(--tekst-2); font-size: 0.875rem; font-weight: 600;
}
.valg-chip .ikon { width: 0.9rem; height: 0.9rem; }
.valg-chip.aktiv { background: var(--guld-svag); color: var(--guld); }
.valg-chip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; -webkit-appearance: none; appearance: none; }

/* ---------------------------------------------------------------- dagbogens lister og kalender */

.maaned-hoved {
  position: sticky; top: calc(var(--sikker-top) + var(--top-h)); z-index: 4;
  margin: 0 calc(-1 * var(--side)) 8px; padding: 10px calc(var(--side) + 2px) 8px; background: var(--bg);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tekst-2);
}
.dag-kort {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; width: 100%; margin: 0 0 10px;
  padding: 14px 16px 14px 10px; border: 0.5px solid var(--streg); border-radius: 18px; background: var(--flade);
  color: inherit; text-align: left; transition: transform 0.12s ease;
}
.dag-kort:active { transform: scale(0.985); }
.dag-dato { display: flex; flex-direction: column; align-items: center; padding-top: 1px; }
.dag-dato b { font-size: 1.5rem; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.dag-dato span { margin-top: 4px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-2); }
.dag-krop { min-width: 0; }
.dag-kort-titel { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.dag-kort-titel.uden { color: var(--tekst-2); font-weight: 500; }
.dag-glimt {
  margin-top: 3px; font-size: 0.9375rem; line-height: 1.42; color: var(--tekst-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: var(--tekst-3); font-size: 0.8125rem; }
.dag-meta .ikon { width: 1rem; height: 1rem; }
.dag-meta .hum { color: var(--hum); }
.dag-meta span { display: inline-flex; align-items: center; gap: 4px; }
.dag-meta .chip { padding: 3px; }
.drejer-ikon { animation: drej 0.8s linear infinite; }
.mere-hent { display: grid; place-items: center; padding: 18px 0 8px; color: var(--tekst-3); }

.kal-hoved { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.kal-hoved h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.kal-pile { display: flex; gap: 4px; }
.kal-pile button {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--flade-2); color: var(--guld);
  display: grid; place-items: center;
}
.kal-pile button:active { background: var(--flade-3); }
.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ugedag { text-align: center; padding: 2px 0 4px; font-size: 0.75rem; font-weight: 600; color: var(--tekst-3); }
.kal-dag {
  position: relative; aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 12px; background: var(--flade);
  color: var(--tekst); font-size: 0.9375rem; font-weight: 500; padding: 0;
}
.kal-dag.har::after {
  content: ""; position: absolute; left: 50%; bottom: 17%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--guld);
}
.kal-dag.i-dag { box-shadow: inset 0 0 0 1.5px var(--guld); color: var(--guld); font-weight: 700; }
.kal-dag.fremtid { opacity: 0.3; }
.kal-dag:active { background: var(--flade-2); }

.soegefelt { position: relative; margin: 0 0 12px; }
.soegefelt .ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; color: var(--tekst-3); pointer-events: none; }
.soegefelt input { padding-left: 40px; min-height: 46px; border-radius: 12px; }
.soege-info { margin: 0 2px 12px; color: var(--tekst-2); font-size: 0.875rem; }

/* ---------------------------------------------------------------- I dag: minder i en vandret række */

.karrusel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--side));
  padding: 0 var(--side) 4px; scroll-padding: 0 var(--side); scrollbar-width: none;
}
.karrusel::-webkit-scrollbar { display: none; }
.minde {
  flex: 0 0 84%; max-width: 420px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border: 0.5px solid var(--streg); border-radius: var(--rund); background: var(--flade); color: inherit;
  text-align: left; box-shadow: var(--skygge);
}
.karrusel .minde:only-child { flex-basis: 100%; }
.minde-aar { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--guld); }
.minde-aar .ikon { width: 0.95rem; height: 0.95rem; }
.minde-titel { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.minde-glimt { font-size: 0.9375rem; line-height: 1.45; color: var(--tekst-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.minde-dato { font-size: 0.8125rem; color: var(--tekst-3); margin-top: auto; padding-top: 6px; }

/* ---------------------------------------------------------------- I dag: ugen, vagten, datoerne (etape 2) */

.uge { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 0 0 14px; }
.uge-dag {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 74px; padding: 9px 0 7px;
  border: 0.5px solid var(--streg); border-radius: 15px; background: var(--flade); color: var(--tekst);
  transition: transform 0.12s ease;
}
.uge-dag:active { transform: scale(0.95); }
.uge-dag.i-dag { background: var(--guld); color: var(--guld-tekst); border-color: transparent; }
.uge-bogstav { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--tekst-3); }
.uge-dag.i-dag .uge-bogstav { color: inherit; opacity: 0.7; }
.uge-tal { font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.uge-dag.frem .uge-tal { color: var(--tekst-2); }
.uge-maerker { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 15px; color: var(--guld); }
.uge-dag.i-dag .uge-maerker { color: inherit; }
.uge-maerker .ikon { width: 13px; height: 13px; stroke-width: 2; }
.uge-prik { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.skelet.s-uge { height: 74px; border-radius: 15px; }

.vagt-tid { font-size: 0.9375rem; font-weight: 700; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.vagt-status {
  display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.vagt-status.aendret { background: var(--guld-svag); color: var(--guld); }
.vagt-status.aflyst { background: color-mix(in srgb, var(--roed) 15%, transparent); color: var(--roed); }
.fremgang { height: 6px; margin: 0 0 14px; border-radius: 999px; background: var(--flade-2); overflow: hidden; }
.fremgang-fyld { display: block; height: 100%; border-radius: 999px; background: var(--guld); }
.stop-liste { position: relative; list-style: none; margin: 0 0 14px; padding: 0; }
.stop-liste::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1.5px; background: var(--streg-2); }
.stop { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 6px 0 6px 22px; font-size: 0.9375rem; line-height: 1.35; }
.stop::before {
  content: ""; position: absolute; left: 0; top: 0.78em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--flade); box-shadow: inset 0 0 0 1.5px var(--tekst-3);
}
.stop.kant { color: var(--tekst-2); }
.stop.kant::before { left: 1.5px; width: 6px; height: 6px; margin-top: 1.5px; background: var(--tekst-3); box-shadow: none; }
.stop.forbi, .stop.forbi .stop-tid { color: var(--tekst-3); }
.stop.nu::before { background: var(--guld); box-shadow: 0 0 0 4px var(--guld-svag); }
.stop.nu .stop-navn { color: var(--guld); font-weight: 650; }
.stop.naeste .stop-navn { font-weight: 650; }
.stop-tid { flex: none; min-width: 5.4em; color: var(--tekst-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.stop-navn { min-width: 0; }
.frist {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 11px 13px; border-radius: 14px;
  background: var(--guld-svag); font-size: 0.9375rem; line-height: 1.45;
}
.frist .ikon { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 1px; color: var(--guld); }

.plan-kant { display: flex; align-items: baseline; gap: 12px; padding: 8px 2px; color: var(--tekst-2); font-size: 0.9375rem; }
.stop-kort { margin: 0 0 8px; border-radius: 16px; background: var(--flade-2); }
.stop-kort summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
.stop-kort summary::-webkit-details-marker { display: none; }
.stop-kort summary > .ikon { margin-left: auto; width: 1.1rem; height: 1.1rem; color: var(--tekst-3); transition: transform 0.2s ease; }
.stop-kort[open] summary > .ikon { transform: rotate(180deg); }
.stop-hoved { display: flex; flex-direction: column; min-width: 0; }
.stop-kort .stop-navn { font-weight: 650; line-height: 1.3; }
.stop-by { font-size: 0.8125rem; color: var(--tekst-2); }
.stop-kort.nu { box-shadow: inset 0 0 0 1.5px var(--guld); }
.stop-kort.nu .stop-tid { color: var(--guld); }
.stop-kort.forbi { opacity: 0.6; }
.stop-krop { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 15px; }
.stop-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }
.stop-handlinger .knap { flex: 1; min-width: 96px; }
.stop-linje { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; line-height: 1.45; }
.stop-linje .ikon { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 2px; color: var(--tekst-3); }
.afsnit { margin: 0 0 10px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.afsnit:last-child { margin-bottom: 0; }
.kilde { margin: 6px 4px 22px; }
a.knap { text-decoration: none; }

.dato-liste .raekke { padding: 10px 0; }
.dato-liste .raekke + .raekke::before { left: 45px; }
.dato-raekke.i-dag .raekke-titel { color: var(--guld); font-weight: 650; }
.etiket.mellemrum { margin-top: 18px; }
.kort .skriv { margin-top: 14px; }
.humoer.lille .humoer-knap { max-width: 54px; border-radius: 15px; }
.humoer.lille .humoer-knap .ikon { width: 1.65rem; height: 1.65rem; }

/* ---------------------------------------------------------------- Dagbogen (etape 3) */

.laes { font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-size: 1.125rem; line-height: 1.68; letter-spacing: 0; }
.laes h3, .laes .memo-hoved, .laes .meta, .laes .fold summary, .laes .raa { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.laes .raa { line-height: 1.55; }
.dag-nav { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 18px; }
.dag-nav-knap {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 8px; border: 0; border-radius: 12px;
  background: var(--flade); color: var(--guld); font-size: 0.9375rem; font-weight: 600; border: 0.5px solid var(--streg);
}
.dag-nav-knap.hoejre { padding: 0 8px 0 14px; }
.dag-nav-knap .ikon { width: 1.2rem; height: 1.2rem; }
.dag-nav-knap:active { background: var(--flade-2); }

.chip.link { border: 0; cursor: pointer; color: var(--tekst); }
.chip.link:active { background: var(--flade-3); }
.chip-tal { margin-left: 2px; color: var(--tekst-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: color-mix(in srgb, var(--farve) 20%, transparent); color: var(--farve); font-size: 0.8125rem;
  font-weight: 700; letter-spacing: 0.02em; line-height: 1;
}
.avatar.mini { width: 1.2rem; height: 1.2rem; font-size: 0.5rem; letter-spacing: 0; }
.avatar.stor { width: 4.25rem; height: 4.25rem; font-size: 1.4rem; }
.avatarer { display: inline-flex; }
.avatarer .avatar { box-shadow: 0 0 0 2px var(--flade); }
.avatarer .avatar + .avatar { margin-left: -5px; }
.sted-tekst { max-width: 11em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block !important; }
.sted-tekst .ikon { display: inline-block; vertical-align: -2px; margin-right: 3px; }

.soege-knap {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; margin: 0 0 12px; padding: 0 12px;
  border: 0; border-radius: 12px; background: var(--flade-2); color: var(--tekst-3); font-size: 1.0625rem; text-align: left;
}
.soege-knap .ikon { width: 1.15rem; height: 1.15rem; }
.soege-top { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.soege-top .soegefelt { flex: 1; margin: 0; }
.soeg-annuller { border: 0; background: none; color: var(--guld); font-size: 1.0625rem; padding: 8px 2px; }
.segment.fire button { font-size: 0.8125rem; padding: 6px 2px; }
.segment.lille-seg { margin: 0 0 14px; }
.segment.lille-seg button { min-height: 32px; font-size: 0.8125rem; }
.valg-chip.nulstil { border: 0; color: var(--tekst-2); padding-left: 10px; }
.uge-skille {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 4px 8px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tekst-3);
}
.uge-skille span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.usynlig { visibility: hidden; }
.gruppe .raekke .avatar + .raekke-krop { min-width: 0; }
.gruppe .raekke:has(.avatar) + .raekke::before, .gruppe .raekke + .raekke:has(.avatar)::before { left: 65px; }

.aar-tal { margin: -2px 2px 16px; color: var(--tekst-2); font-size: 0.9375rem; }
.aar-kort { padding: 16px 14px 12px; }
.aar-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; margin: 0 0 14px; }
.mini-titel { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tekst-2); }
.mini-dage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-dag, .mini-tom { aspect-ratio: 1; padding: 0; border: 0; border-radius: 3px; background: var(--skala-0); }
.mini-tom { background: none; }
.mini-dag.n1 { background: var(--skala-1); }
.mini-dag.n2 { background: var(--skala-2); }
.mini-dag.n3 { background: var(--skala-3); }
.mini-dag.n4 { background: var(--skala-4); }
.mini-dag.nx { background: none; box-shadow: inset 0 0 0 1px var(--streg-2); }
.mini-dag.i-dag { box-shadow: 0 0 0 1.5px var(--tekst); }
.forklaring { display: flex; align-items: center; gap: 4px; margin: 0 2px 8px; font-size: 0.75rem; color: var(--tekst-2); }
.forklaring .mini-dag { display: inline-block; width: 12px; height: 12px; aspect-ratio: auto; }
.forklaring .luft { margin-left: 10px; }

.detalje-top { display: flex; align-items: center; gap: 16px; }
.flise.stor { width: 4.25rem; height: 4.25rem; border-radius: 18px; }
.flise.stor .ikon { width: 2rem; height: 2rem; }
.tal-fliser { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-width: 0; }
.tal-flise { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tal-vaerdi { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tal-navn { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tekst-2); }
.soejler { padding-top: 12px; padding-bottom: 12px; }
.soejle-raekke { display: grid; grid-template-columns: 2.8rem 1fr 3.2rem; align-items: center; gap: 10px; padding: 5px 0; }
.soejle-aar { font-size: 0.875rem; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.soejle-spor { height: 8px; border-radius: 4px; background: var(--flade-2); overflow: hidden; }
.soejle-fyld { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--guld); }
.soejle-tal { text-align: right; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- emner og arbejde (etape 4) */

.chip.arbejde-chip { background: var(--guld-svag); color: var(--guld); }
.dag-meta .arb { color: var(--guld); }
.emne-ikoner { display: inline-flex !important; gap: 7px; color: var(--tekst-3); }
.chip.ret { border: 0; cursor: pointer; background: none; color: var(--guld); box-shadow: inset 0 0 0 1px var(--guld-svag); }
.chip.vaelg { border: 0; cursor: pointer; padding: 8px 12px 8px 9px; font-size: 0.875rem; background: var(--flade-2); color: var(--tekst-2); }
.chip.vaelg .ikon { width: 1.05rem; height: 1.05rem; }
.chip.vaelg.valgt { background: var(--guld-svag); color: var(--guld); box-shadow: inset 0 0 0 1px var(--guld); }
.ret-gruppe + .ret-gruppe { margin-top: 18px; }
.ret-boks .meta { margin: 16px 2px 4px; }
.ark.ark-stor { max-width: 640px; padding: 0; }
.ark-panel {
  display: flex; flex-direction: column; max-height: 82vh; max-height: 82dvh; border-radius: 18px 18px 0 0;
  background: var(--flade-ark); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}
.ark-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 12px; border-bottom: 0.5px solid var(--streg-2); }
.ark-titel { margin: 0; font-size: 1.0625rem; font-weight: 600; text-align: center; }
.ark-annuller, .ark-gem { border: 0; background: none; color: var(--guld); font-size: 1.0625rem; padding: 8px 6px; min-height: 44px; }
.ark-annuller { justify-self: start; }
.ark-gem { justify-self: end; font-weight: 700; }
.ark-gem:disabled { opacity: 0.5; }
.ark-indhold { overflow-y: auto; padding: 16px 16px calc(18px + var(--sikker-bund)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---------------------------------------------------------------- Indsigt og tilbageblik (etape 5) */

.aar-seg button { font-variant-numeric: tabular-nums; }
.noegletal-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.noegletal {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--rund-m); background: var(--flade);
  border: 0.5px solid var(--streg); box-shadow: var(--skygge);
}
.noegletal-v { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--guld); }
.noegletal-n { font-size: 0.8125rem; font-weight: 600; color: var(--tekst); }
.noegletal-u { font-size: 0.75rem; color: var(--tekst-2); }
.tb-kort {
  display: flex; flex-direction: column; gap: 3px; width: 100%; margin: 0 0 10px; padding: 14px 16px; text-align: left;
  border: 0.5px solid var(--streg); border-radius: 18px; background: var(--flade); color: inherit; box-shadow: var(--skygge);
}
.tb-kort:active { transform: scale(0.99); }
.tb-type { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--guld); }
.tb-titel { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.tb-tekst { font-size: 0.9375rem; line-height: 1.45; color: var(--tekst-2); }
.diagram-kort { padding-bottom: 12px; }
.diagram-tekst { margin: 0 0 12px; font-size: 0.9375rem; font-weight: 600; }
.diagram { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 150px; align-items: end; }
.d-soejle { display: flex; flex-direction: column; align-items: stretch; gap: 6px; height: 100%; padding: 0; border: 0; background: none; color: inherit; }
.d-spor { flex: 1; display: flex; align-items: flex-end; }
/* Søjlernes farver er trin fra den validerede guldskala (dataviz-validatoren 8/11): ikke valgt = skala-2 (mørk 3,62:1 ·
   lys 3,14:1 mod kortet), valgt = skala-4 · vagter = skala-3, næste uge (planlagt) = skala-1 med tallet skrevet på. */
.d-fyld { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--skala-2); transition: background-color 0.15s ease; }
.d-soejle.valgt .d-fyld { background: var(--skala-4); }
.d-md { font-size: 0.6875rem; font-weight: 600; text-align: center; color: var(--tekst-3); }
.d-soejle.valgt .d-md { color: var(--tekst); }
.uge-soejler { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 140px; align-items: end; }
.uge-soejle { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.uge-soejle .d-fyld { background: var(--skala-3); }
.uge-soejle.plan .d-fyld { background: var(--skala-1); }
.uge-soejle.plan .uge-soejle-tal, .uge-soejle.plan .d-md { color: var(--tekst-3); }
.avatar.som-flise { width: 32px; height: 32px; font-size: 0.75rem; }
.gruppe .raekke:has(.avatar.som-flise) + .raekke::before, .gruppe .raekke + .raekke:has(.avatar.som-flise)::before { left: 61px; }
.uge-soejle-tal { font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.soejle-raekke.bred { grid-template-columns: minmax(0, 9.5rem) 1fr 2.6rem; }
button.soejle-raekke { width: 100%; border: 0; background: none; color: inherit; text-align: left; padding: 6px 0; }
button.soejle-raekke:active { opacity: 0.7; }
.soejle-navn { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 0.875rem; }
.soejle-navn > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.soejle-navn .ikon { width: 1rem; height: 1rem; color: var(--tekst-3); flex: none; }
.etiket.indryk { margin: 14px 4px 8px; }
.hoejdepunkt {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--guld-svag); font-size: 0.9375rem; line-height: 1.5;
}
.hoejdepunkt .ikon { flex: none; color: var(--guld); width: 1.15rem; height: 1.15rem; margin-top: 2px; }

/* ---------------------------------------------------------------- Plan: Playbooken og interviewet (etape 6) */

.flise.lille { width: 28px; height: 28px; border-radius: 8px; }
.flise.lille .ikon { width: 1.05rem; height: 1.05rem; }
.interview { padding: 16px 16px 14px; }
.iv-hoved { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.iv-hoved-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.iv-over { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--guld); }
.iv-over .ikon { width: 0.95rem; height: 0.95rem; }
.iv-side { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--tekst);
  font-size: 0.9375rem; font-weight: 650; text-align: left; }
.iv-side .ikon { width: 0.9rem; height: 0.9rem; color: var(--tekst-3); }
.pb-prikker { display: flex; gap: 5px; flex: none; }
.pb-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--flade-3); }
.pb-prik.fyldt { background: var(--guld); }
.iv-spoergsmaal { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.35; font-weight: 650; letter-spacing: -0.01em; }
.iv-forslag { margin: 0 0 12px; }
.iv-forslag .chip { border: 0; }
.interview textarea { min-height: 76px; margin: 0 0 10px; }
.iv-handlinger { display: flex; justify-content: center; gap: 22px; margin: 10px 0 0; }
.iv-lille { padding: 6px 4px; border: 0; background: none; color: var(--tekst-2); font-size: 0.875rem; font-weight: 600; }
.iv-lille:active { color: var(--tekst); }
.iv-note { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.4; text-align: center; color: var(--tekst-3); }
.iv-klaret { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 4px; text-align: center; }
.iv-klaret h3 { margin: 4px 0 0; font-size: 1.125rem; }
.iv-klaret .stille { margin: 0 0 6px; font-size: 0.9375rem; line-height: 1.45; }
.iv-tjek { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--guld-svag);
  color: var(--guld); animation: iv-pop 0.35s ease-out; }
.iv-tjek .ikon { width: 1.6rem; height: 1.6rem; }
@keyframes iv-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .iv-tjek { animation: none; } }
.iv-streak { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.875rem; font-weight: 650;
  color: var(--guld); }
.iv-streak .ikon { width: 1rem; height: 1rem; }
.iv-mini { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 14px 16px; text-align: left; color: inherit;
  border: 0.5px solid var(--streg); }
.iv-mini:active { transform: scale(0.99); }
.iv-mini-tekst { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.iv-mini-fod { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--tekst-2); }
.iv-mini-fod .sektion-link { display: inline-flex; align-items: center; gap: 2px; }
.iv-mini-fod .ikon { width: 0.9rem; height: 0.9rem; }
.pb-overblik { padding: 16px; }
.pb-tal { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.pb-tal-v { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; color: var(--guld); font-variant-numeric: tabular-nums; }
.pb-tal-n { font-size: 0.9375rem; font-weight: 600; }
.pb-bar { display: block; height: 6px; border-radius: 3px; background: var(--flade-3); overflow: hidden; }
.pb-fyld { display: block; height: 100%; border-radius: 3px; background: var(--guld); }
.pb-under { margin: 10px 0 0; font-size: 0.875rem; color: var(--tekst-2); }
.pb-under.lille { margin-top: 4px; font-size: 0.8125rem; color: var(--tekst-3); }
.pb-raekke .pb-bar { height: 4px; margin: 7px 0 2px; max-width: 220px; }
.raekke.pause { opacity: 0.55; }
.gruppe-note.forrest { margin: 0 4px 14px; }
.pb-ting { margin-top: 12px; }
.pb-kort { display: flex; flex-direction: column; gap: 5px; width: 100%; margin: 0 0 10px; padding: 14px 16px; text-align: left;
  border: 0.5px solid var(--streg); border-radius: 18px; background: var(--flade); color: inherit; box-shadow: var(--skygge); }
.pb-kort:active { transform: scale(0.99); }
.pb-kort-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pb-kort-navn { font-size: 1.0625rem; font-weight: 650; }
.pb-kort-tekst { font-size: 0.9375rem; line-height: 1.42; color: var(--tekst-2); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pb-kort-meta { font-size: 0.8125rem; color: var(--tekst-3); }
.pb-status { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 650; background: var(--flade-2); color: var(--tekst-2); }
.pb-status .ikon { width: 0.85rem; height: 0.85rem; }
.pb-status.faerdig { background: color-mix(in srgb, var(--groen) 16%, transparent); color: var(--groen); }
.pb-status.gammel { background: var(--guld-svag); color: var(--guld); }
.pb-status.opdater { background: color-mix(in srgb, var(--roed) 14%, transparent); color: var(--roed); }
.pb-hoved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; }
.pb-meta { font-size: 0.8125rem; color: var(--tekst-2); }
.pb-banner { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--flade-2); font-size: 0.875rem; line-height: 1.45; color: var(--tekst-2); }
.pb-banner .ikon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 1px; color: var(--guld); }
.pb-kort-fortalt { margin: 0 2px 16px; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }
.pb-tekst { padding: 0 2px; }
.pb-tekst .pb-h { margin: 26px 0 10px; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.015em; }
.pb-tekst .pb-h:first-child { margin-top: 0; }
.pb-tekst .pb-h3 { margin: 18px 0 8px; font-size: 1.0625rem; color: var(--tekst); }
.pb-tekst ul, .pb-tekst ol { margin: 0 0 14px; padding-left: 1.3em; }
.pb-tekst li { margin: 0 0 7px; padding-left: 2px; }
.pb-tekst li::marker { color: var(--guld); }
.pb-tekst ol li::marker { font-weight: 650; font-variant-numeric: tabular-nums; }
.pb-tekst ul.pb-tjek { list-style: none; padding-left: 0; }
.pb-tekst ul.pb-tjek li::before { content: ""; display: inline-block; width: 13px; height: 13px; margin: 0 8px -1px 0;
  border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--tekst-3); }
.pb-tekst ul.pb-tjek li.afkrydset { color: var(--tekst-2); text-decoration: line-through; }
.pb-tekst ul.pb-tjek li.afkrydset::before { background: var(--guld); box-shadow: none; }
.pb-tekst code { padding: 1px 5px; border-radius: 5px; background: var(--flade-2); font-size: 0.9em; }
.pb-tekst .graa { color: var(--tekst-2); }
.pb-link { color: var(--guld); text-decoration: none; }
.pb-callout { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--guld-svag); line-height: 1.5; }
.pb-tabel { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border: 0;
  border-radius: 14px; background: var(--flade-2); color: inherit; font-size: 0.9375rem; font-weight: 600; text-align: left;
  text-decoration: none; }
.pb-tabel span { flex: 1; min-width: 0; }
.pb-tabel .ikon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--guld); }
.pb-gitter-rul { overflow-x: auto; margin: 0 0 14px; }
.pb-gitter { border-collapse: collapse; font-size: 0.875rem; line-height: 1.4; }
.pb-gitter th, .pb-gitter td { padding: 7px 10px; border-bottom: 0.5px solid var(--streg-2); text-align: left; vertical-align: top; }
.pb-gitter th { font-weight: 650; color: var(--tekst-2); }
.pb-svar-tekst { margin: 3px 0 2px; font-size: 0.9375rem; line-height: 1.45; }
a.raekke, a.chip, a.pb-tabel { text-decoration: none; color: inherit; }
.iv-side.stille { font-size: 0.875rem; font-weight: 500; color: var(--tekst-2); }
.pb-tekst { margin-top: 18px; }

/* ---------------------------------------------------------------- besked, ark og træk-for-at-opdatere */

.besked {
  position: fixed; left: 50%; bottom: calc(var(--fane-h) + var(--sikker-bund) + 18px); z-index: 30;
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 11px 16px 11px 13px;
  border-radius: 999px; background: var(--besked-bg); color: var(--besked-tekst); font-size: 0.9375rem; font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.besked .ikon { width: 1.15rem; height: 1.15rem; color: var(--groen); }
.besked.aaben { opacity: 1; transform: translate(-50%, 0); }
.besked.fejl { background: var(--roed); color: #fff; }
.besked.fejl .ikon { color: #fff; }

.ark-lag {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.22s ease;
}
.ark-lag.aaben { opacity: 1; }
.ark {
  width: 100%; max-width: 560px; padding: 0 10px calc(10px + var(--sikker-bund));
  transform: translateY(105%); transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.ark-lag.aaben .ark { transform: none; }
.ark-gruppe { overflow: hidden; margin: 0 0 8px; border-radius: 16px; background: var(--flade-ark); }
.ark-tekst { padding: 15px 18px 13px; text-align: center; }
.ark-tekst b { display: block; font-size: 0.9375rem; margin-bottom: 3px; }
.ark-tekst span { font-size: 0.8125rem; color: var(--tekst-2); }
.ark-knap {
  display: block; width: 100%; min-height: 56px; border: 0; border-top: 0.5px solid var(--streg-2); background: none;
  color: var(--guld); font-size: 1.1875rem;
}
.ark-tekst + .ark-knap, .ark-knap:first-child { border-top-width: 0.5px; }
.ark-gruppe > .ark-knap:first-child { border-top: 0; }
.ark-knap:active { background: var(--flade-2); }
.ark-knap.fare { color: var(--roed); }
.ark-knap.fed { font-weight: 600; }

.traek {
  position: fixed; top: calc(var(--sikker-top) + var(--top-h) + 6px); left: 50%; z-index: 15;
  width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tekst-3); background: var(--flade); box-shadow: var(--skygge); opacity: 0; pointer-events: none;
}
.traek .ikon { width: 1.2rem; height: 1.2rem; }
.traek.klar { color: var(--guld); }
.traek.drejer .ikon { animation: drej 0.8s linear infinite; }
@keyframes drej { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- henter (skelet) og skift */

.skelet {
  border-radius: var(--rund); margin: 0 0 14px; background: linear-gradient(100deg, var(--flade) 30%, var(--flade-2) 50%, var(--flade) 70%);
  background-size: 300% 100%; animation: glimt 1.3s ease-in-out infinite;
}
.skelet.s-lille { height: 74px; border-radius: 18px; margin-bottom: 10px; }
.skelet.s-mellem { height: 140px; }
.skelet.s-stor { height: 230px; }
@keyframes glimt { from { background-position: 100% 0; } to { background-position: 0 0; } }

.ind-skub { animation: skub 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ind-ton { animation: ton 0.26s ease both; }
@keyframes skub { from { opacity: 0; transform: translateX(22px); } }
.ind-skub-venstre { animation: skub-v 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes skub-v { from { opacity: 0; transform: translateX(-22px); } }
@keyframes ton { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------- login */

body.login { padding-bottom: var(--sikker-bund); }
.login main {
  max-width: 420px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--sikker-top) + 24px) 26px calc(var(--sikker-bund) + 28px); text-align: center;
}
.login .logo { width: 104px; height: 104px; margin: 0 auto; border-radius: 24px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); }
.login h1 { margin: 22px 0 4px; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; }
.login .undertitel { margin: 0; color: var(--tekst-2); }
.login #log-ind { width: 100%; margin: 34px 0 10px; }
.login-besked { min-height: 1.5em; margin: 4px 0 0; color: var(--tekst-2); font-size: 0.9375rem; }
.login .inviteret p { margin: 26px 0 0; color: var(--tekst-2); line-height: 1.5; }
.login .inviteret b { color: var(--tekst); font-weight: 600; }
.login #opret-sofie { width: 100%; margin: 26px 0 10px; }
.login-besked.fejl { color: var(--roed); }
.login details { margin-top: 28px; text-align: left; border-radius: var(--rund-m); background: var(--flade); border: 0.5px solid var(--streg); }
.login summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px;
  color: var(--guld); font-weight: 600; cursor: pointer;
}
.login summary::-webkit-details-marker { display: none; }
.login summary .ikon { width: 1.1rem; height: 1.1rem; transition: transform 0.2s ease; }
.login details[open] summary .ikon { transform: rotate(180deg); }
.login .ny-krop { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.login .ny-krop p { margin: 0 0 2px; color: var(--tekst-2); font-size: 0.9375rem; }
.login #kode { text-align: center; letter-spacing: 0.45em; font-size: 1.5rem; font-weight: 600; }
.login .ny-krop .knap { width: 100%; }

/* ---------------------------------------------------------------- kortet (Casper 8/11-2026 kl. 12.25 · v2 kl. 13.05)
   Leaflet tegner selve kortet; nålene er vores egne: en farvet dråbe pr. slags sted med et hvidt symbol (ikoner.js,
   «k-…»). Farverne giver det hvide symbol mindst 3,85:1 (WCAG 1.4.11: 3:1), og den hvide kant skiller dem fra kortet.
   Kortets egne lag holdes inde i fladen (isolation); i fuld skærm flyttes fladen ud i <body> over top og faner. */
:root {
  --k-natur: #2e8b57; --k-shelter: #8b5e34; --k-strand: #1f74c7; --k-sport: #5f8a1f; --k-hjem: #a8780a;
  --k-familie: #d0445c; --k-venner: #7556d1; --k-mad: #c9601a; --k-indkoeb: #11807a; --k-fest: #b3378f;
  --k-kultur: #4a5cc0; --k-arbejde: #596779; --k-rejse: #0d8fa0; --k-sundhed: #c62828; --k-by: #86704f; --k-andet: #69717d;
}
.kat-natur { --kat: var(--k-natur); } .kat-shelter { --kat: var(--k-shelter); } .kat-strand { --kat: var(--k-strand); }
.kat-sport { --kat: var(--k-sport); } .kat-hjem { --kat: var(--k-hjem); } .kat-familie { --kat: var(--k-familie); }
.kat-venner { --kat: var(--k-venner); } .kat-mad { --kat: var(--k-mad); } .kat-indkoeb { --kat: var(--k-indkoeb); }
.kat-fest { --kat: var(--k-fest); } .kat-kultur { --kat: var(--k-kultur); } .kat-arbejde { --kat: var(--k-arbejde); }
.kat-rejse { --kat: var(--k-rejse); } .kat-sundhed { --kat: var(--k-sundhed); } .kat-by { --kat: var(--k-by); }
.kat-andet { --kat: var(--k-andet); }

.kort-aabn { margin: 0 0 14px; }
.kort-filtre { margin-bottom: 12px; }
.valg-chip.kat .ikon { color: var(--kat); width: 1.05rem; height: 1.05rem; }
.valg-chip.kat.aktiv { background: color-mix(in srgb, var(--kat) 22%, transparent); color: var(--tekst); }
.kort-flade {
  position: relative; height: clamp(320px, calc(100dvh - 400px), 620px); margin: 0 0 4px; border-radius: var(--rund-m);
  overflow: hidden; background: var(--flade-2); border: 0.5px solid var(--streg); isolation: isolate; z-index: 0;
}
.kort-flade.leaflet-container { background: var(--flade-2); font: inherit; -webkit-tap-highlight-color: transparent; }
/* det mørke kort: OpenStreetMaps lyse kort vendt om på hver flise (vand og skov bliver mørke, teksten lys) */
.kort-flade.moerk img.leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.5); }
/* Leaflet 1.9 lægger fliserne «plus-lighter» oven i hinanden — med filteret gav det lyse streger mellem fliserne */
.kort-flade.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
.kort-vent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--tekst-3); font-size: 0.875rem; }
.kort-vent .ikon { width: 2rem; height: 2rem; }
.kort-flade.placerer { cursor: crosshair; }
.kort-flade.placerer::after {
  content: ""; position: absolute; inset: 0; z-index: 800; pointer-events: none; box-shadow: inset 0 0 0 3px var(--guld);
}

/* nålene: en dråbe i stedets farve med hvid kant og hvidt symbol */
.pin-ramme { background: none; border: 0; }
.kpin { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.38)); }
.kpin-form { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kpin-form path { fill: var(--kat, var(--k-andet)); stroke: #fff; stroke-width: 2.6; }
/* Leaflet giver alle svg i kortet z-index 200 (.leaflet-map-pane svg) — så lagde dråben sig over symbolet */
.kpin > .kpin-form { z-index: 0; }
.kpin > .kpin-ikon, .kpin > .kpin-gaatur, .kpin > .kpin-forslag-maerke { z-index: 1; }
.kpin.omtrent .kpin-form path { stroke-dasharray: 5 3.4; }
.kpin-ikon {
  position: absolute; left: 50%; top: 39%; width: 54%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; color: #fff;
}
.kpin-ikon .ikon { width: 100%; height: 100%; stroke-width: 2.1; }
.kpin.lille .kpin-ikon { width: 58%; }
.kpin-gaatur {
  position: absolute; right: -5px; top: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid;
  place-items: center; background: #fff; color: var(--k-natur); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.kpin-gaatur .ikon { width: 11px; height: 11px; stroke-width: 2.3; }
.kpin.forslag .kpin-form path { fill: #fff; stroke: var(--kat, var(--guld)); stroke-width: 2.8; }
.kpin.forslag .kpin-ikon { color: var(--kat, var(--guld)); }
.kpin-forslag-maerke {
  position: absolute; right: -6px; top: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid;
  place-items: center; background: var(--guld); color: var(--guld-tekst); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.kpin-forslag-maerke .ikon { width: 11px; height: 11px; stroke-width: 2.2; }
/* klynger: en ring i stedernes farver (andelene) med antallet i midten */
.klynge {
  width: 100%; height: 100%; border-radius: 50%; padding: 4px; display: grid; background: var(--guld);
  box-shadow: 0 0 0 2px #fff, 0 3px 9px rgba(0, 0, 0, 0.4);
}
.klynge span {
  border-radius: 50%; display: grid; place-items: center; background: var(--flade); color: var(--tekst);
  font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.mig-prik {
  width: 22px; height: 22px; border-radius: 50%; background: #3d8bff; border: 3px solid #fff;
  box-shadow: 0 0 0 7px rgba(61, 139, 255, 0.25);
}

/* knapperne på kortet */
.kort-knapper { position: absolute; right: 10px; top: 10px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.kort-knap {
  width: 44px; height: 44px; border-radius: 12px; border: 0.5px solid var(--streg-2); background: var(--bar); color: var(--tekst);
  display: grid; place-items: center; -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.kort-knap .ikon { width: 1.3rem; height: 1.3rem; }
.kort-knap:active { transform: scale(0.96); }
.kort-minus { font-size: 1.6rem; line-height: 1; margin-top: -3px; }
.kort-bund {
  position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 900; display: flex; justify-content: center;
  gap: 8px; pointer-events: none;
}
.kort-bund > * { pointer-events: auto; }
.kort-pille {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 15px; height: 42px; border-radius: 999px; border: 0;
  background: var(--guld); color: var(--guld-tekst); font-weight: 700; font-size: 0.9375rem; white-space: nowrap; box-shadow: var(--skygge);
}
.kort-pille.lys { background: var(--bar); color: var(--tekst); border: 0.5px solid var(--streg-2);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.kort-pille .ikon { width: 1.15rem; height: 1.15rem; }
.kort-pille:active { transform: scale(0.96); }
.kort-pille .tal { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--guld); color: var(--guld-tekst);
  font-size: 0.75rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.travl .ikon { animation: drej 1s linear infinite; }
.kort-flade.leaflet-container .leaflet-control-attribution {
  background: var(--bar); color: var(--tekst-3); font-size: 10px; line-height: 1.5; padding: 0 6px; border-radius: 8px 0 0 0;
}
.kort-flade.leaflet-container .leaflet-control-attribution a { color: var(--tekst-2); }
.kort-kilde { color: var(--tekst-3); font-size: 0.75rem; line-height: 1.45; margin: 18px 4px 8px; }

/* fuld skærm: fladen flyttes ud i <body> og dækker det hele (under beskeder og ark) */
body.kort-fuld { overflow: hidden; }
.kort-flade.fuld {
  position: fixed; inset: 0; z-index: 28; height: auto; margin: 0; border: 0; border-radius: 0;
}
.kort-flade.fuld .kort-knapper { top: calc(var(--sikker-top) + 58px); }
.kort-flade.fuld .kort-bund { bottom: calc(var(--sikker-bund) + 16px); }
.kort-flade.fuld .leaflet-bottom { bottom: var(--sikker-bund); }
.kort-flade .kort-filtre.over {
  position: absolute; left: 0; right: 0; top: calc(var(--sikker-top) + 8px); z-index: 950; margin: 0; padding: 0 10px;
}
.kort-filtre.over .valg-chip { background: var(--bar); border: 0.5px solid var(--streg-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.kort-filtre.over .valg-chip.aktiv { background: color-mix(in srgb, var(--kat, var(--guld)) 30%, var(--flade)); }

/* «Placér steder»: ét sted ad gangen — tryk på kortet, eller vælg herunder */
.kort-placer {
  position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 960; max-height: 52%; display: flex; flex-direction: column;
  background: var(--flade-ark); color: var(--tekst); border-radius: 20px; border: 0.5px solid var(--streg-2);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); overflow: hidden;
}
.kort-flade.fuld .kort-placer { bottom: calc(var(--sikker-bund) + 10px); }
.kp-top { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 6px 16px; }
.kp-tael { margin: 0 0 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--guld); }
.kp-navn { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.kp-under { margin: 2px 0 0; font-size: 0.8125rem; color: var(--tekst-2); }
.kp-luk { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--flade-2);
  color: var(--tekst-2); display: grid; place-items: center; }
.kp-luk .ikon { width: 1rem; height: 1rem; }
.kp-krop { overflow-y: auto; padding: 4px 14px 12px 16px; -webkit-overflow-scrolling: touch; }
.kp-hjaelp { margin: 4px 0 10px; font-size: 0.875rem; color: var(--tekst-2); display: flex; align-items: center; gap: 6px; }
.kp-hjaelp .ikon { width: 1rem; height: 1rem; color: var(--guld); flex: none; }
.kp-valg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.kp-valg .valg-chip { padding: 8px 12px; }
.kp-valg .valg-chip .ikon { color: var(--guld); }
.kp-soeg { position: relative; margin: 0 0 6px; }
.kp-soeg .ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--tekst-3); }
.kp-soeg input { width: 100%; height: 42px; border-radius: 12px; border: 0.5px solid var(--streg-2); background: var(--flade-2);
  color: var(--tekst); padding: 0 12px 0 36px; font-size: 16px; }
.kp-svar .raekke { padding-top: 9px; padding-bottom: 9px; }
.kp-bund { display: flex; gap: 8px; padding: 8px 14px 14px 16px; border-top: 0.5px solid var(--streg); }
.kp-bund .knap { flex: 1; }
.kp-faerdig { padding: 18px 16px 20px; text-align: center; }
.kp-faerdig p { margin: 6px 0 14px; color: var(--tekst-2); }

/* «Ret symbol» */
.symbol-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
.symbol-valg {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--streg-2);
  background: var(--flade-2); color: var(--tekst); font-weight: 600; font-size: 0.875rem; text-align: left; min-height: 52px;
}
.symbol-valg .kpin { width: 28px; height: 35px; flex: none; }
.symbol-valg.valgt { border-color: var(--kat, var(--guld)); background: color-mix(in srgb, var(--kat, var(--guld)) 18%, var(--flade-2)); }
.symbol-gaa { display: flex; }
.ark-hjaelp { margin: 0; color: var(--tekst-2); }
.ark-tekst span { white-space: pre-line; }
.raekke .kpin.i-liste { width: 26px; height: 32.5px; flex: none; margin: 0 4px 0 2px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.kort-skjulte { margin: 22px 0 0; }
.kort-skjulte summary { list-style: none; cursor: pointer; color: var(--tekst-2); font-weight: 600; font-size: 0.9375rem; padding: 6px 2px 10px; }
.kort-skjulte summary::-webkit-details-marker { display: none; }
/* «Gem til senere» (8/11 kl. 13.21): gemte steder har et gyldent bogmærke; «Fjern forslag» */
.kat-gemt { --kat: var(--guld); }
.kpin-gemt-maerke {
  position: absolute; right: -5px; top: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; z-index: 1;
  place-items: center; background: var(--guld); color: var(--guld-tekst); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.kpin-gemt-maerke .ikon { width: 11px; height: 11px; }
.kpin > .kpin-gemt-maerke { z-index: 1; }
.kort-pille.fjern {
  background: var(--bar); color: var(--guld); border: 1px solid var(--guld);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.raekke.klik { cursor: pointer; }
.raekke-handling {
  flex: none; width: 40px; height: 40px; margin: -6px -6px -6px 0; border-radius: 12px; border: 0; background: var(--guld-svag);
  color: var(--guld); display: grid; place-items: center;
}
.raekke-handling .ikon { width: 1.15rem; height: 1.15rem; }
.raekke-handling:active { transform: scale(0.94); }

/* ======================================================================================================================
   Sofies Liv (13/11-2026) — hendes egen farve (fersken på kul, som ikonet) og forsidens kort.
   Casper 13/11: «Sofies forside skal være et hurtigt dashboard … Sørg generelt for den bedste oplevelse for en ikke
   ai-kendt bruger.» → store, rolige kort med ét hoved, det vigtigste tal og højst to knapper.
   Farverne er tjekket mod baggrunden: fersken #eaa58f på #0e1013 ≈ 9,4:1 · terrakotta #b0563f på #f4f1ec ≈ 4,6:1. */
:root {
  --guld: #eaa58f; --guld-2: #f6bfa9; --guld-svag: rgba(234, 165, 143, 0.15); --guld-tekst: #1f110c;
  --skala-1: #5e3d34; --skala-2: #8a5848; --skala-3: #b9786a; --skala-4: #eaa58f;
}
html.lys {
  --guld: #b0563f; --guld-2: #94462f; --guld-svag: rgba(176, 86, 63, 0.12); --guld-tekst: #fff8f5;
  --skala-1: #e7b3a3; --skala-2: #cf8770; --skala-3: #b0563f; --skala-4: #7c3524;
}
.lv-faner .fane { flex: 1; }

.lv-kortene { display: flex; flex-direction: column; }
.lv-plads { margin-bottom: 14px; }
.lv-kort { display: flex; flex-direction: column; gap: 12px; }
.lv-kort-hoved {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: -4px -4px 0; padding: 4px; border: 0;
  background: none; color: var(--tekst); text-align: left; border-radius: var(--rund-s); min-height: 48px;
}
.lv-kort-hoved:active { background: var(--flade-2); }
.lv-kort-hoved .flise { flex: none; }
.lv-kort-hoved .pil-hoejre { margin-left: auto; color: var(--tekst-3); }
.lv-kort-hoved.lv-uden-pil { margin: 0; padding: 0; }
.lv-kort-hoved-tekst { display: flex; flex-direction: column; min-width: 0; }
.lv-kort-titel { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.lv-kort-under { font-size: 0.8125rem; color: var(--tekst-2); }
.lv-kort-krop { display: flex; flex-direction: column; gap: 12px; }
.lv-kort-krop > p { margin: 0; }
.lv-kort-tekst { margin: 0; line-height: 1.45; }
.lv-kort-link {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 40px;
  padding: 0 2px; border: 0; background: none; color: var(--guld); font-size: 0.9375rem; font-weight: 600; text-align: left;
}
.lv-kort-link .ikon { width: 1rem; height: 1rem; }
.lv-knapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-knapper .knap { min-height: 48px; padding: 0 10px; font-size: 0.9375rem; }
.lv-velkomst { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--guld-svag); }
.lv-velkomst p { margin: 0; line-height: 1.5; }
.lv-velkomst-titel { font-size: 1.125rem; font-weight: 700; }
.lv-hjaelp-titel { margin: 0 0 6px; font-size: 1.0625rem; }
.lv-hjaelp p { margin: 0; line-height: 1.55; color: var(--tekst-2); }