/* ============================================================
   Sofna — app styles. Every value traces back to the component
   sheet (K) in design/Sofna Mockup.dc.html.
   ============================================================ */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis-weight: none; }   /* Young Serif har kun én vægt: ingen falsk fed (12/10) */
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--rav); outline-offset: 2px; }
.dark button:focus-visible, .dark a:focus-visible, .dark [tabindex]:focus-visible, .dark input:focus-visible, .dark textarea:focus-visible { outline-color: var(--lygte); }
input, textarea { font: inherit; color: inherit; }
a { color: var(--rav); text-decoration: none; }
a:hover { color: var(--nat); }
.dark a { color: var(--nattekst-sek); }
.dark a:hover { color: var(--nattekst); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
.vent-trin, .paa-vej-liste { padding: 0; list-style: none; }
svg { display: block; }
[hidden] { display: none !important; }

/* ---------- stage + phone frame ---------- */
#app { min-height: 100vh; min-height: 100dvh; }
.stage { min-height: 100vh; min-height: 100dvh; display: flex; padding: 24px; }
.phone { position: relative; margin: auto; width: var(--phone-w); height: var(--phone-h); background: var(--paper); border-radius: var(--r-phone); border: 1px solid var(--line-2); box-shadow: var(--shadow-phone); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); animation: sofnaFadeIn .22s ease-out; }
.phone.dark { background: var(--nat); color: var(--nattekst); }
.statusbar { height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; font-size: 15px; font-weight: 700; }
.dark .statusbar { color: var(--muted); }
.battery { width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; padding: 1.5px; }
.battery i { display: block; width: 70%; height: 100%; background: currentColor; border-radius: 1px; }
.home { flex: none; height: 30px; display: flex; align-items: center; justify-content: center; }
.home i { display: block; width: 134px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .5; }
.dark .home i { background: var(--paper); opacity: .35; }
.stage-note { position: fixed; left: 16px; bottom: 12px; font: 12px/1.5 var(--mono); color: var(--muted); display: flex; gap: 14px; align-items: center; }
.stage-note a { color: var(--mid); }
/* Telefonen selv (4/10): en telefon, også på tværs, og en tablet får appen i hele skærmen — ingen tegnet ramme, intet
   tegnet ur. Rammen er kun til en computer med mus (demoen), og dér er den aldrig højere end vinduet. */
@media (max-width: 520px), (pointer: coarse), (max-height: 560px) {
  .stage { padding: 0; }
  .phone { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: 0; box-shadow: none; margin: 0; animation: none;
           padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .statusbar { height: max(env(safe-area-inset-top), 14px); }
  .statusbar > * { display: none; }
  .home { height: max(env(safe-area-inset-bottom), 14px); }
  .home i { display: none; }
  .stage-note { display: none; }
}

/* ---------- screen skeleton ---------- */
.body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px var(--gutter) 0; gap: 22px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.body.top48 { padding-top: 48px; gap: 28px; }
.body.top56 { padding-top: 56px; gap: 28px; }
.body.g16 { gap: 16px; } .body.g18 { gap: 18px; } .body.g20 { gap: 20px; } .body.g24 { gap: 24px; } .body.g28 { gap: 28px; }
.body.centered { align-items: center; text-align: center; }
.body.pad28 { padding-left: 28px; padding-right: 28px; }
.footer { flex: none; padding: 12px var(--gutter); display: flex; flex-direction: column; gap: 10px; }
.footer .row2 { display: flex; gap: 10px; }
.footer .row2 > * { flex: 1; }
.footer .blank44 { height: 44px; }
.push { margin-top: auto; }
.center-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.topbar .ph { width: 48px; height: 48px; }
.topbar .right { display: flex; gap: 6px; }
.iconbtn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--ink); flex: none; }
.dark .iconbtn { border-color: var(--mid); color: var(--muted); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand { gap: 0; align-items: baseline; }
.brand b { order: 1; font: 400 26px/1 var(--serif); }
.brand i { order: 2; display: inline-block; width: .2em; height: .2em; margin-left: .03em; border-radius: 50%; background: var(--lygte); font-size: 26px; }
.stepper { display: flex; align-items: center; justify-content: space-between; }
.stepper .n { font-size: 14px; font-weight: 700; color: var(--muted); }
.stepper .bars { display: flex; gap: 6px; }
.stepper .bars i { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--line-2); }
.stepper .bars i.is-on { background: var(--ink); }
.stepper .track { flex: 1; height: 4px; border-radius: 2px; background: var(--line-2); margin-left: 16px; overflow: hidden; }
.stepper .track i { display: block; height: 100%; background: var(--ink); transition: width .3s; }

/* ---------- type ---------- */
.h1 { font: 400 30px/36px var(--serif); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.h1.s30 { font-size: 30px; }
.h1.s36 { font-size: clamp(30px, 9vw, 44px); line-height: 1.14; }
.h1.s24 { font-size: 24px; line-height: 30px; }
.h1.q { font-weight: 400; font-size: 30px; line-height: 36px; }
.h1.title { font-weight: 400; font-size: 26px; line-height: 32px; }
.h2 { font: 400 26px/32px var(--serif); text-wrap: pretty; }
.h3 { font: 700 18px/28px var(--sans); }
.h3.s18 { font-size: 18px; } .h3.s19 { font-size: 19px; }
.lead { color: var(--mid); text-wrap: pretty; }
.dark .lead { color: var(--muted); }
.overline { font-size: 15px; font-weight: 700; color: var(--muted); line-height: 22px; }
.overline.s13 { font-size: 13px; }
.small { font-size: 15px; line-height: 22px; color: var(--muted); }
.small.mid { color: var(--mid); }
.tiny { font-size: 13px; color: var(--muted); }
.tiny.b { font-weight: 700; }
.s15 { font-size: 15px; } .s16 { font-size: 16px; }
.mid { color: var(--mid); } .muted { color: var(--muted); } .soft { color: var(--soft); }
.b { font-weight: 700; }
.promise { font: 400 15px/22px var(--sans); color: var(--muted); text-align: center; }
.italic { font: 400 16px var(--sans); color: var(--muted); }
.label { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); }
.error { font-size: 15px; font-weight: 700; color: var(--rav); }
.dark .error { color: var(--lygte); }
.hint { font-size: 15px; line-height: 22px; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack.g2 { gap: 2px; } .stack.g4 { gap: 4px; } .stack.g6 { gap: 6px; } .stack.g10 { gap: 10px; } .stack.g14 { gap: 14px; } .stack.g16 { gap: 16px; } .stack.g20 { gap: 20px; }
.hrow { display: flex; align-items: center; gap: 8px; }
.hrow.between { justify-content: space-between; }
.hrow.g12 { gap: 12px; } .hrow.g14 { gap: 14px; } .hrow.g16 { gap: 16px; }
.center { text-align: center; }
.mono { font-family: var(--mono); }
.pretty { text-wrap: pretty; }
.w100 { width: 100%; }

/* ---------- buttons ---------- */
.btn { width: 100%; min-height: var(--btn-h); height: auto; border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; line-height: 28px; font-weight: 700; padding: 8px 16px; text-align: center; transition: background .12s, transform .12s, opacity .12s; }
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--lygte); color: var(--nat); }   /* 12/10: Nat på Lygte 8,18:1 */
.btn-primary:active { background: var(--lygte); }
.btn-primary:disabled { opacity: .4; pointer-events: none; }
/* Om natten (designet 12/10) lyser kun Afspil i Lygte; den vigtigste knap ellers er mørk med en kobberkant. */
.dark .btn-primary { background: var(--nat-haevet); color: var(--nattekst); border: 2px solid var(--kobber); }
.dark .btn-primary:active { background: var(--nat-kant); }
.dark .btn-primary.afspil { background: var(--lygte); color: var(--nat); border: 0; }
.btn-secondary { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-secondary.is-quiet { color: var(--muted); pointer-events: none; }
.btn-secondary:disabled { color: var(--muted); }
.dark .btn-secondary { border-color: var(--nattekst-sek); color: var(--nattekst); }
.btn-text { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--rav); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn-text.is-danger { color: var(--rav); }
.btn-text.is-muted { color: var(--muted); }
.dark .btn-text { color: var(--nattekst-sek); }
.dark .btn-text.is-danger { color: var(--lygte); }
.btn-dashed { width: 100%; min-height: 52px; border-radius: 999px; border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--mid); }
.btn-dashed.is-selected { border-style: solid; border-color: var(--ink); color: var(--ink); }
.btn.web-wide { width: auto; height: 60px; padding: 0 36px; font-size: 18px; }

/* ---------- fields ---------- */
.field { width: 100%; height: var(--field-h); border: 1px solid var(--line-2); border-radius: var(--r-field); background: var(--card); padding: 0 16px; font-size: 18px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.field::placeholder { color: var(--muted); }
.field:focus { border: 1.5px solid var(--ink); outline: none; }
.field.is-error, .field.is-error:focus { border: 1.5px solid var(--rav); }
.field.h56 { height: 56px; }
.field.h60 { height: 60px; font: 600 22px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: none; line-height: 1.5; display: block; }
.textarea.story { font: 400 20px/30px var(--sans); }
.textarea.tall { min-height: 180px; }
.textarea.h80 { min-height: 80px; }

/* ---------- choices ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 48px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--hoer); background: var(--card); font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.chip.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.is-add { border-style: dashed; color: var(--muted); }
.chip.sm { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.chips input.chip { width: 140px; background: var(--card); }
.segs { display: flex; gap: 8px; }
.seg { flex: 1; min-height: 52px; border: 1px solid var(--line-2); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.seg.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.scale { display: flex; justify-content: space-between; gap: 8px; }
.dot { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); display: flex; align-items: center; justify-content: center; }
.dot.is-selected { background: var(--ink); border-color: var(--ink); }
.scale-labels { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); }
.days { display: flex; justify-content: space-between; }
.day { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.day.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toggle { position: relative; width: 50px; height: 30px; border-radius: 15px; border: 1px solid var(--line-2); flex: none; transition: background .15s, border-color .15s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--line-2); transition: transform .15s, background .15s; }
.toggle.is-on { background: var(--ink); border-color: var(--ink); }
.toggle.is-on::after { transform: translateX(20px); background: var(--paper); }
.tabs { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tab { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--muted); border-radius: 9px; }
.tab.is-active { background: var(--ink); color: var(--paper); }
.radio { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; text-align: left; width: 100%; }
.radio.is-selected { background: var(--card); border: 1.5px solid var(--ink); }
.radio .r { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; display: flex; align-items: center; justify-content: center; }
.radio.is-selected .r { border-color: var(--ink); }
.radio.is-selected .r::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.radio .t { flex: 1; display: flex; flex-direction: column; }

/* ---------- cards, lists, pills ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; }
.card.is-selected { border: 1.5px solid var(--ink); }
.card.is-dashed { background: transparent; border: 1px dashed var(--line-2); }
.card.p14 { padding: 14px 16px; } .card.p18 { padding: 18px; } .card.p20 { padding: 20px; } .card.p10 { padding: 10px 14px; }
.card.r14 { border-radius: var(--r-card); }
.card.row { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; }
.card.row.g16 { gap: 16px; } .card.row.g12 { gap: 12px; }
.card .t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card .t.g4 { gap: 4px; }
.list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); display: flex; flex-direction: column; }
.list > .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; font-size: 17px; }
.list > .item:last-child { border-bottom: 0; }
.list > .item.p14 { padding: 14px 16px; } .list > .item.p16 { padding: 16px; } .list > .item.s15 { font-size: 15px; }
.item .val { display: flex; align-items: center; gap: 8px; color: var(--mid); }
.item .kv { display: flex; flex-direction: column; min-width: 0; }
.item .k { font-size: 13px; font-weight: 700; color: var(--muted); }
.item .act { font-size: 15px; font-weight: 700; color: var(--mid); flex: none; }
.bullets { display: flex; flex-direction: column; gap: 14px; }
.bullets > li { display: flex; gap: 12px; align-items: flex-start; }
.bullets > li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moon); margin-top: 9px; flex: none; }
.bullets.sm { gap: 10px; font-size: 15px; color: var(--mid); }
.gold { width: 72px; height: 72px; border-radius: 50%; background: var(--moon); flex: none; }
.gold.s44 { width: 44px; height: 44px; }
.divider { height: 1px; background: var(--line); }

/* ---------- figure, moon, bars, timeline ---------- */
.figure-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-flade); }
.figure-card .name { font: 400 22px/28px var(--serif); }
/* Dyrets navn lige under billedet (26/9): lille og roligt, så barnets navn stadig er det store. */
.figure-card .dyr-navn { margin-top: -6px; font: 400 15px var(--sans); color: var(--mid); }
/* Barnets dyr på «Om Alma» og på dyre-skærmen: navn, og dyrets faste ting. */
.list > .item.dyr-blok { flex-direction: column; align-items: stretch; gap: 10px; }
.dyr-felt { display: flex; flex-direction: column; gap: 6px; }
.dyr-felt .field { height: 48px; font-size: 16px; }
/* «Spil igen» (26/9): tydelig, men ikke større end aftenens egen Afspil. */
.spil-igen { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font-size: 15px; font-weight: 700; color: var(--ink); }
.historie-row .t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.historie-row .titel { font-weight: 700; overflow-wrap: anywhere; }
/* Sengekantsskemaet (26/9): ja/nej på samme linje som spørgsmålet, så skemaet er kort. */
.sheet { max-height: 92%; overflow-y: auto; overscroll-behavior: contain; }
.spm { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spm .label { flex: 1; }
.segs.smaa { flex: none; }
.segs.smaa .seg { flex: none; width: 64px; height: 44px; }
.segs.fire { display: grid; grid-template-columns: 1fr 1fr; }
.segs.fire .seg { height: auto; min-height: 48px; padding: 8px 10px; text-align: center; font-size: 15px; line-height: 1.25; }
.seg.is-graa, .seg:disabled { opacity: .38; cursor: default; }
.moon { position: relative; width: 96px; height: 96px; margin: 29px auto; flex: none; }   /* ringen (inset -29px) har sin egen plads (4/10) */
/* Månen står stille (4/10, Rabii: lyset skal være det samme, mens historien bliver lavet). Før åndede den hvert syvende
   sekund (størrelse og lysstyrke), og ringen skiftede mellem 15 og 45 % — også med «reducer bevægelse». */
.moon::before { content: ""; position: absolute; inset: -29px; border-radius: 50%; border: 1px solid var(--moon); opacity: .25; }
.moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--moon); }
/* Afspillerens måne har det samme lys, når historien spiller, og når den står på pause (før: fyldt 90 % mod en ring på
   70 %): kun ikonet i knappen viser forskellen. */
.moon-static { width: 120px; height: 120px; border-radius: 50%; background: var(--moon); opacity: .5; flex: none; }
.moon-static.done { opacity: .35; }
.moon-static.empty { width: 96px; height: 96px; background: transparent; border: 1.5px solid var(--moon); opacity: 1; }
.bars { display: flex; gap: 3px; align-items: center; }
.bars i { display: block; width: 3px; border-radius: 2px; transform-origin: center; animation: sofnaBar 1s ease-in-out infinite; }
.bars.still i { animation: none; transform: scaleY(.35); }
.timeline { display: flex; gap: 4px; height: 6px; width: 100%; position: relative; }
.timeline .knap { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px rgba(0, 0, 0, .28); pointer-events: none; }
.timeline.paused .knap { background: var(--soft); }
/* Det område, fingeren kan ramme, er større end selve stregen — den skal kunne rammes i mørke. */
.spol { padding: 16px 0; margin: -16px 0; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 8px; }
.spol:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.spol.traekker .timeline > div > i { transition: none; }
.timeline > div { border-radius: 3px; background: var(--mid); position: relative; overflow: hidden; }
.timeline > div > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--paper); display: block; transition: width .5s linear; }
.timeline.paused > div > i { background: var(--soft); }
.timeline.light > div { background: var(--line); } .timeline.light > div > i { background: var(--line-2); }
.timeline.done > div > i { display: none; }
.zones { display: flex; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; width: 100%; }
.zones span:nth-child(1), .timeline > div:nth-child(1) { flex: var(--z1, 2); }
.zones span:nth-child(2), .timeline > div:nth-child(2) { flex: var(--z2, 6); }
/* «historien» midt i sin del (1/10): musikken før er kun et par procent af aftenen, og ordene «musik» og «historien»
   stod klemt sammen i venstre side. */
.zones span:nth-child(2) { text-align: center; }
.zones span:nth-child(1) { white-space: nowrap; }
.zones span:nth-child(3), .timeline > div:nth-child(3) { flex: var(--z3, 9); text-align: right; }
.times { display: flex; justify-content: space-between; font-size: 14px; color: var(--soft); width: 100%; }
.times.dim { color: var(--mid); }
.times.light { color: var(--mid); }
.transport { display: flex; align-items: center; justify-content: center; gap: 36px; padding: 8px 0 4px; }
.skip { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--mid); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--soft); }
/* Afspil og pause med samme lys (4/10): en ring, ikke en lysende skive, der tænder og slukker ved hvert tryk. */
.playbtn { width: 96px; height: 96px; border-radius: 50%; background: transparent; border: 2px solid var(--soft); display: flex; align-items: center; justify-content: center; color: var(--paper); }
.rec-wrap { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.rec-wrap.is-on::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--kobber); opacity: .5; }
/* Mikrofonen (designet 12/10): en mørk cirkel med kobberkant; mens den lytter, er den fyldt med kobber. */
.rec { width: 128px; height: 128px; border-radius: 50%; border: 3px solid var(--kobber); background: var(--nat-haevet); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-rec); color: var(--nattekst); touch-action: none; user-select: none; -webkit-user-select: none; transition: background .15s; }
.rec.is-on { background: var(--kobber); color: var(--nat); }
.steps { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); text-align: left; }
.step.todo { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }
.step .st { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.step.active .st { background: var(--ink); } .step.active .st::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--moon); }
.step.done .st { background: var(--ink); color: var(--paper); }
.step.todo .st { border: 1.5px solid var(--line-2); }
.step b { flex: 1; } .step span { font-size: 14px; color: var(--muted); }

/* ---------- story text / read mode / sheet / toast ---------- */
.story { font: 400 18px/28px var(--sans); color: var(--ink); display: flex; flex-direction: column; gap: 14px; }
.story p { text-wrap: pretty; }
.fade-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.fade-wrap .scroll { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 48px; }
.fade-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(245, 239, 230, 0), var(--havre)); pointer-events: none; }
.read { font: 400 24px/36px var(--sans); color: var(--paper); display: flex; flex-direction: column; gap: 22px; flex: 1; min-height: 0; overflow-y: auto; }
.read.lg { font-size: 28px; line-height: 42px; } .read.sm { font-size: 20px; line-height: 30px; }
.read p { text-wrap: pretty; }
.pages { display: flex; gap: 6px; justify-content: center; padding-bottom: 4px; }
.pages i { display: block; flex: 1 1 0; min-width: 3px; height: 3px; border-radius: 2px; background: var(--nat-kant); }   /* én række, også med mange sider (4/10); designet 12/10: streger i hele bredden */
.pages i.is-on { background: var(--nattekst-sek); }
.pages.taet { gap: 2px; overflow: hidden; } .pages.taet i { min-width: 1px; }   /* mange sider: prikkerne bliver på skærmen (4/10) */
.dim { opacity: .4; pointer-events: none; }
.sheet-wrap { position: absolute; inset: 0; z-index: 5; }
/* Et ark, der tegnes om (fx ventesidens minuttal under det), glider ikke ind igen (4/10, skærm-gennemgangen L4). */
.sheet-wrap.stille .sheet { animation: none; }
.sheet-wrap .scrim { position: absolute; inset: 0; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); color: var(--ink); border-top: 1px solid var(--line); border-radius: var(--r-flade) var(--r-flade) var(--r-phone) var(--r-phone); padding: 20px 24px 12px; display: flex; flex-direction: column; gap: 18px; box-shadow: none; animation: sofnaSheetIn .25s ease-out; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto; }
.sheet .home { padding: 0; }
@media (max-width: 520px), (pointer: coarse), (max-height: 560px) { .sheet { border-radius: var(--r-flade) var(--r-flade) 0 0; padding-bottom: max(env(safe-area-inset-bottom), 12px); } .sheet .home { display: none; } }
#beskeder { position: fixed; left: 0; right: 0; bottom: 110px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; z-index: 50; pointer-events: none; }
.toast { width: 100%; max-width: 360px; background: var(--nat); color: var(--havre); border-radius: var(--r-card); padding: 12px 16px; font-size: 15px; font-weight: 700; text-align: center; animation: sofnaFadeIn .2s ease-out; pointer-events: none; }
.toast.dark { background: var(--nat-haevet); color: var(--nattekst); border: 1px solid var(--nat-kant); }   /* på en mørk skærm en mørk besked, ikke en lys plade (4/10) */
.demo-note { font: 12px/1.5 var(--mono); color: var(--mid); background: var(--card); border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 12px; text-align: left; }
.dark .demo-note { background: transparent; color: var(--muted); border-color: var(--mid); }

/* ---------- time picker, lock screen ---------- */
.picker { display: flex; flex-direction: column; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 0; user-select: none; -webkit-user-select: none; }
.picker .adj { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; font: 400 22px var(--sans); color: var(--line-2); }
.picker .cur { width: 100%; height: 60px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 40px var(--sans); }
.lock { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 16px 0; gap: 36px; }
.lock .date { font-size: 20px; font-weight: 600; color: var(--soft); }
.lock .clock { font: 400 92px/1 var(--serif); }
.notif { width: 100%; background: var(--paper); color: var(--ink); border-radius: 20px; padding: 14px 16px; display: flex; gap: 12px; text-align: left; }
.notif.old { opacity: .85; }
.notif .app { width: 38px; height: 38px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; }
.notif .app i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--moon); }
.notif .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.notif .head { display: flex; justify-content: space-between; font-size: 15px; }
.notif .msg { font-size: 15px; line-height: 1.4; }

/* ---------- web pages (landing, checkout, gift, recipient) ---------- */
.web { min-height: 100vh; min-height: 100dvh; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; animation: sofnaFadeIn .22s ease-out; }
.web-nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 72px; }
.web-nav .brand i { width: 14px; height: 14px; } .web-nav .brand b { font-size: 24px; }
.web-nav .links { display: flex; gap: 32px; font-size: 16px; font-weight: 700; }
.web-nav .links a { color: var(--mid); } .web-nav .links a.is-active { color: var(--ink); }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 40px 72px 72px; }
.section { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 64px 72px; border-top: 1px solid var(--line); align-items: center; }
.section.one { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 72px; text-align: center; }
.exits { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 72px 80px; }
.exits .row { display: flex; gap: 14px; }
.web-footer { display: flex; justify-content: space-between; padding: 24px 72px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); margin-top: auto; }
.h-display { font: 400 clamp(44px, 7vw, 72px)/1.06 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.h-40 { font: 400 clamp(30px, 5vw, 44px)/1.14 var(--serif); text-wrap: pretty; }
.h-36q { font: 400 clamp(26px, 4vw, 36px)/1.3 var(--serif); max-width: 820px; text-wrap: pretty; }
.lead19 { font-size: 19px; color: var(--mid); text-wrap: pretty; }
.lead18 { font-size: 18px; color: var(--mid); text-wrap: pretty; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.price { display: flex; flex-direction: column; gap: 6px; border-radius: 20px; padding: 24px; }
.price.us { background: var(--card); border: 1.5px solid var(--ink); }
.price.them { border: 1px dashed var(--line-2); color: var(--muted); }
.price .amt { font: 800 40px var(--sans); }
.demo-card { display: flex; flex-direction: column; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.playbig { width: 80px; height: 80px; border-radius: 50%; background: var(--terra); display: flex; align-items: center; justify-content: center; color: var(--card); flex: none; }
.playbig.s88 { width: 88px; height: 88px; }
.web-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 40px 60px; text-align: center; }
.web-card { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.checkout { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.checkout .left { padding: 48px 56px; display: flex; flex-direction: column; gap: 28px; border-right: 1px solid var(--line); }
.checkout .right { padding: 48px 56px; display: flex; flex-direction: column; gap: 18px; background: var(--card); }
.checkout .field, .checkout .mockfield { border-radius: 10px; height: 46px; }
.badge { font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px; flex: none; }
.totals { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--mid); border-top: 1px solid var(--line); padding-top: 20px; }
.totals div { display: flex; justify-content: space-between; }
.totals .sum { font-weight: 700; color: var(--ink); font-size: 16px; }
.mockfield { height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); background: var(--card); }
.mockcard { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); color: var(--muted); }
.mockcard > div { height: 46px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; }
.mockcard > div:first-child { border-bottom: 1px solid var(--line); }
.mockcard .split { display: flex; padding: 0; }
.mockcard .split > div { flex: 1; height: 46px; padding: 0 14px; display: flex; align-items: center; }
.mockcard .split > div:first-child { border-right: 1px solid var(--line); }
.gift-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 24px 56px 56px; align-items: center; }
.phase-tag { font: 700 11px var(--mono); padding: 3px 8px; border-radius: 5px; border: 1px dashed var(--muted); color: var(--muted); }
@media (max-width: 860px) {
  .web-nav { padding: 20px 24px; } .web-nav .brand i { width: 12px; height: 12px; } .web-nav .brand b { font-size: 20px; }
  .web-nav .links { gap: 18px; font-size: 15px; }
  .hero { grid-template-columns: 1fr; gap: 18px; padding: 16px 24px 36px; }
  .section { grid-template-columns: 1fr; gap: 14px; padding: 36px 24px; }
  .section.one { padding: 36px 24px; gap: 14px; }
  .exits { padding: 8px 24px 40px; gap: 10px; }
  .exits .row { flex-direction: column; width: 100%; gap: 10px; }
  .btn.web-wide { width: 100%; height: 56px; font-size: 17px; padding: 0 16px; }
  .web-footer { padding: 20px 24px; flex-direction: column; gap: 6px; }
  .h-display { font-size: 38px; } .h-40 { font-size: 30px; } .h-36q { font-size: 24px; line-height: 1.4; }
  .lead19, .lead18 { font-size: 17px; }
  .price-grid { gap: 10px; } .price { padding: 16px; border-radius: 16px; } .price .amt { font-size: 26px; }
  .demo-card { padding: 20px; border-radius: 20px; gap: 16px; }
  .web-main { padding: 32px 24px; gap: 28px; }
  .checkout { grid-template-columns: 1fr; }
  .checkout .left { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 24px; gap: 22px; }
  .checkout .right { padding: 28px 24px; }
  .gift-grid { grid-template-columns: 1fr; gap: 24px; padding: 16px 24px 40px; }
}

/* ---------- overview (prototype map) ---------- */
.overview { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; display: flex; flex-direction: column; gap: 28px; }
.ov-group { display: flex; flex-direction: column; gap: 12px; }
.ov-head { display: flex; align-items: baseline; gap: 14px; }
.ov-head .letter { font: 400 44px var(--serif); }
.ov-head .name { font: 400 22px var(--serif); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ov-item { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: left; color: var(--ink); }
.ov-item:hover { border-color: var(--line-2); }
.ov-item .num { font: 700 12px var(--mono); background: var(--ink); color: var(--paper); padding: 3px 7px; border-radius: 5px; }
.ov-item .svcs { display: flex; flex-wrap: wrap; gap: 4px; }
.phase { font: 700 10px var(--mono); padding: 3px 7px; border-radius: 5px; border: 1px solid var(--mid); flex: none; }
.phase.p1 { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.phase.p3 { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.svc { font: 11px var(--mono); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--mid); }
.ov-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 12px var(--mono); color: var(--mid); }

@media (prefers-reduced-motion: reduce) {
  .bars i { animation-duration: 0s; animation-iteration-count: 0; }
  .phone, .web, .sheet { animation: none; }
}

/* ---------- late additions ---------- */
.item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; }
.item.card { padding: 14px 16px; }
.btn.h54 { height: 54px; border-radius: 12px; }
.link { font-size: 15px; font-weight: 700; color: var(--rav); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.dark .link { color: var(--nattekst-sek); }
.link.muted { color: var(--muted); font-size: 16px; }
.gold.s8 { width: 8px; height: 8px; }

/* Overskriften og den lille tekst deler linjen, men må brydes: ved 375 px løb «gemmes et år, til du sletter dem»
   ud over kanten (set 26/9). */
.learned-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.learned-head .h3 { min-width: 0; }
.learned-head .tiny { text-align: right; margin-left: auto; }

/* Dyrene, man kan vælge imellem (17/9). To i bredden på en telefon. */
.dyr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dyr-grid .card { text-align: center; }
.dyr-grid .card.is-selected { border-color: var(--terra); }

/* Appens forside: login (18/9) */
.velkommen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 8px; }
.velkommen-dyr { width: 160px; height: 160px; object-fit: contain; margin-bottom: -12px; }
.login-besked { background: var(--lys-flade); border: 1px solid var(--hoer); border-radius: var(--r-card); padding: 12px 14px; font-size: 15px; line-height: 1.45; }
form.body { margin: 0; }
.login-links { display: flex; justify-content: space-between; gap: 12px; margin-top: -8px; }
.login-links .btn-text { width: auto; font-size: 15px; }
/* Barnets eget dyr på Hjem og barnets side (24/9) */
.figure-dyr { width: 180px; height: 150px; object-fit: contain; }
.figure-dyr.lille { width: 120px; height: 90px; }

/* Farten i afspilleren (26/9 aften): lille og rolig under knapperne, som i andre lydapps. */
.fart { align-self: center; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--nattekst-sek); background: transparent; color: var(--nattekst); font-size: 15px; font-weight: 600; min-height: 40px; }

/* ---------- Barnets side (1/10) ----------
   Hjem er barnet. Øverst aftenen, med barnets dyr i et lavere kort end før, så aftenens valg ses uden at rulle.
   Nedenunder «Om Alma»: hvert felt kan rettes, hvor det står, og gemmes med det samme. */
.skifter { gap: 8px; margin-top: -6px; }
.barnets-side .laengde-valg { margin-top: 4px; }
.om { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.om-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.om-head .h2.s24 { font-size: 24px; }
.om .gemt { font-size: 13px; color: var(--muted); transition: color .3s; }
.om .gemt.er-gemt { color: var(--ink); font-weight: 700; }
.om-liste > .item.felt { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; }
.om-liste .segs .seg { height: 44px; font-size: 15px; }
.om-liste .dyr-felt .field, .om-liste > .item.felt > .field { height: 48px; font-size: 16px; }
.om-liste .textarea.h80 { min-height: 80px; font-size: 16px; }
/* Barnets side (Rabiis skitse 1/10): «Om Alma» er sin egen side igen, uden stregen over; Hjem har det vigtige. */
.om { border-top: 0; padding-top: 0; }
.om .om-head .h1 { margin: 0; }
.chip.fjern { display: inline-flex; align-items: center; gap: 6px; }
.chip.fjern .x { font-weight: 400; opacity: .75; }
.chip.sm.ny-ting { width: 140px; background: var(--card); font-size: 16px; }   /* 16 px: ellers zoomer en iPhone ind (1/10) */
.kreds-ny { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kreds-ny .field { min-width: 0; height: 44px; font-size: 16px; padding: 0 12px; }   /* 16 px, som alle felter (1/10) */
.kreds-ny .btn-small { grid-column: 1 / -1; }
.btn-small { flex: none; padding: 0 14px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); font-size: 15px; font-weight: 700; color: var(--ink); }
.figure-dyr.mini { width: 56px; height: 56px; }
.om-slut { padding-bottom: 8px; }

/* ---------- Hjem og Sofnas side, anden udgave (1/10) ----------
   Hjem oppefra som Rabiis skitse: børnene, dyret stort på en rolig flade, «Almas aften» med aftenen ét sted, «Sidst»,
   og nederst det, man retter en gang imellem. Alt, en træt tommel skal ramme, er mindst 44 px. */
.hjem .topbar .iconbtn, .byg .topbar .iconbtn { position: relative; }
.hjem .topbar .iconbtn::after, .byg .topbar .iconbtn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.skifter { gap: 8px; margin: 0; }
.skifter .chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; font-size: 16px; }
/* Dyret: papir-2 (en tone mørkere end siden), ikke et hvidt kort, der lyser som en lampe i et mørkt rum. */
.dyr-boks { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px 12px; background: var(--paper-2); border-radius: 24px; text-align: center; }
.dyr-boks .figure-dyr { width: auto; height: 168px; height: clamp(136px, calc(var(--skaerm-h, 100dvh) * .22), 184px); aspect-ratio: 1; object-fit: contain; }
.har-boern .dyr-boks .figure-dyr { height: 148px; height: clamp(120px, calc(var(--skaerm-h, 100dvh) * .18), 160px); }
.dyr-boks .dyr-navn { font: 400 22px/28px var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.dyr-boks .dyr-art { font-size: 14px; color: var(--muted); }
/* Aftenen: én linje under «Almas aften». Mens Sofna skriver, står en lille måne ved linjen. */
.aften-linje { display: flex; gap: 12px; align-items: flex-start; margin-top: -8px; }
.aften-linje .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aften-linje b { font: 700 17px/1.35 var(--sans); }
.aften-linje span { font-size: 15px; color: var(--mid); text-wrap: pretty; }
.maane-prik { display: block; flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--moon); }   /* står stille (4/10) */
/* En historie er et kort: aftenens og «Sidst». */
.historie-kort { display: flex; flex-direction: column; gap: 4px; }
.historie-kort .titel { font: 400 22px/28px var(--serif); hyphens: auto; overflow-wrap: anywhere; }
.historie-kort .links { display: flex; gap: 20px; margin: 4px 0 -8px; }
.historie-kort .links .btn-text { width: auto; justify-content: flex-start; }
.card.sidst .b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 28px; }
/* Det, Alma kan lide: lyse ting med et lille kryds — ikke fyldt mørk, som betyder «valgt». */
.chips .chip.ting, .chips .chip.is-add { min-height: 44px; display: inline-flex; align-items: center; }
.chip.ting { gap: 6px; padding: 0 12px 0 16px; background: var(--card); border-color: var(--line-2); color: var(--ink); font-size: 15px; }
.chip.ting svg { color: var(--muted); }
.chip.ting:active { background: var(--paper-2); }
.chips input.chip.ny-ting { min-height: 44px; width: 150px; font-size: 16px; }
.laeringsmaal .tiny { color: var(--muted); }
.halvt-barn { display: flex; flex-direction: column; gap: 10px; }
.btn-small.stille { background: transparent; border-color: transparent; color: var(--mid); }
/* Sofnas side: musen på månen øverst, spørgsmålet, så længden og de to valg samlet nederst. */
.byg .byg-top { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.byg-vaert { width: 132px; width: clamp(104px, calc(var(--skaerm-h, 100dvh) * .17), 152px); height: auto; aspect-ratio: 1; object-fit: contain; }
.byg .klar-kort { width: 100%; text-align: left; }
.btn.btn-valg { height: auto; min-height: 68px; flex-direction: column; gap: 2px; padding: 10px 16px; line-height: 1.25; }
.btn-valg .under { font-size: 14px; font-weight: 600; }
.btn-secondary.btn-valg .under { color: var(--muted); opacity: 1; }
/* En lille telefon (iPhone SE, 667 px): dyret og luften krymper, så «Spil igen» står over kanten efter en fejl. Efter
   skærmens højde, ikke tastaturets (4/10, C2-02: klassen lavere sætter app.js). */
:where(.lavere) .byg-vaert { display: none; }
:where(.lavere) .body.hjem { gap: 16px; }
:where(.lavere) .dyr-boks .figure-dyr, :where(.lavere) .har-boern .dyr-boks .figure-dyr { height: 112px; }
/* Sofnas side (1/10 aften): søskende og det, barnet kan lide, til i aften — tommelfingerstore, som børnene på Hjem. */
.med-i-aften .chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 15px; }
/* 4/10: det, Sofna hørte, i skrivefeltets egen stil — mens der optages (kun de sidste ord) og bagefter, før det sendes. */
.hoert-nu { font: 400 20px/30px var(--sans); color: var(--ink); text-wrap: pretty; }
.hoert-tekst { padding: 16px 18px; max-height: 52dvh; overflow-y: auto; }
.hoert-tekst p { font: 400 20px/30px var(--sans); color: var(--ink); white-space: pre-wrap; margin: 0; }
/* Et ønske, der skal rettes: grunden står over feltet, så længe det skal rettes. */
.afvist-kort { display: flex; flex-direction: column; gap: 6px; border-color: var(--terra); }
/* Et søskende med en historie i aften: en lille måne på knappen. */
.skifter .chip.har-aften { gap: 8px; }
.maane-prik.lille { width: 10px; height: 10px; margin-top: 0; }
/* Samtykket (4/10, CONSENT-HIDDEN): sætningen står i den faste bund lige over «Ja, det er i orden». */
.samtykke-bund { border-top: 1px solid var(--line); }
.samtykke-bund .samtykke-tekst { font-size: 15px; line-height: 1.4; }
:where(.lavest) .samtykke-bund .samtykke-tekst { font-size: 14px; line-height: 1.35; }
.andre-historier { margin-top: -8px; }
/* Skrivefeltet vokser med ønsket (4/10): før trykkede siden det sammen til tre linjer, uanset hvor langt det var. */
.textarea.story { flex-shrink: 0; max-height: 60dvh; overflow-y: auto; }

/* ============================================================
   4/10 (C2): lyset ved sengekanten, alle telefonstørrelser, stor tekst og tommelfingre.
   Målt med headless Chrome på 320×568 … 1280×800 mod bænken (før og efter).
   ============================================================ */

/* ---------- Lyset: de mørke skærme ----------
   Ventesiden og «Fortæl, hvad … vil høre» er mørke som afspilleren, så lyset ikke springer fra lyst til mørkt, mens
   historien bliver lavet. På en mørk skærm er den dæmpede tekst --soft (6,9:1 på blæk); --muted og --mid er for mørke. */
.phone.dark { --muted: var(--soft); animation: none; }   /* ingen indtoning fra lyst, hver gang skærmen tegnes om (computeren) */
.phone.dark .label, .phone.dark .mid, .phone.dark .hint, .phone.dark .times.dim { color: var(--soft); }
.phone.dark .moon::after { opacity: .5; }          /* samme lys som afspillerens måne */
.phone.dark .step { background: transparent; border-color: var(--mid); color: var(--paper); }
.phone.dark .step.todo { border-color: var(--mid); color: var(--soft); }
.phone.dark .step.active .st, .phone.dark .step.done .st { background: var(--mid); }
.phone.dark .step.todo .st { border-color: var(--mid); }
.phone.dark .card { background: var(--nat-haevet); border-color: var(--nat-kant); color: var(--nattekst); }
.phone.dark .hoert-nu, .phone.dark .hoert-tekst p, .phone.dark .story { color: var(--paper); }
.phone.dark .fade-wrap::after { background: linear-gradient(rgba(28, 24, 21, 0), var(--nat)); }
.phone.dark .field { background: var(--nat-haevet); border-color: var(--nattekst-sek); color: var(--nattekst); }
.phone.dark .field::placeholder { color: var(--soft); }
.phone.dark .field:focus { border-color: var(--soft); }
.phone.dark .chip { border-color: var(--mid); color: var(--paper); }
.phone.dark .chip { background: var(--nat-haevet); }
.phone.dark .chip.is-selected { background: var(--nat-kant); color: var(--nattekst); border: 1.5px solid var(--nattekst); }   /* ingen lys flade om natten (12/10) */
.phone.dark .seg { border-color: var(--mid); color: var(--paper); }
.phone.dark .seg.is-selected { background: var(--nat-kant); color: var(--nattekst); border: 1.5px solid var(--nattekst); }
/* Et ark på en mørk skærm er mørkt: «Hvordan gik det?» åbner ved siden af barnet, der lige er faldet i søvn. */
.phone.dark .sheet { background: var(--nat-haevet); color: var(--nattekst); border-top-color: var(--nat-kant); box-shadow: none; }
.phone.dark .sheet .grab { background: var(--mid); }

/* ---------- Skærmene ---------- */
/* Tablet og telefon på tværs: én rolig kolonne midt på skærmen. */
@media (min-width: 521px) and (pointer: coarse), (min-width: 521px) and (max-height: 560px) {
  .phone > .body, .phone > .footer { padding-left: max(var(--gutter), calc((100% - 512px) / 2)); padding-right: max(var(--gutter), calc((100% - 512px) / 2)); }
  .sheet { max-width: 560px; margin-inline: auto; }
}
/* Computer med mus: rammen er aldrig højere end vinduet (en bærbar har ofte 650-800 px). */
@media (min-width: 521px) and (pointer: fine) and (min-height: 561px) {
  .phone { height: min(var(--phone-h), calc(100vh - 48px)); height: min(var(--phone-h), calc(100dvh - 48px)); }
}
/* Mørke skærme på en telefon: også det, der ses bag siden, når den trækkes, er mørkt. Og et træk nedad genindlæser
   aldrig siden (Android Chrome stoppede ellers historien). */
html, body { overscroll-behavior-y: none; }
@media (max-width: 520px), (pointer: coarse), (max-height: 560px) { body:has(.phone.dark) { background: var(--nat); } }

/* Toplinjens etiket står midt mellem knapperne og brydes pænt («MARIE-LOUISE / FREDERIKKE · I AFTEN»). */
.topbar .overline { flex: 1; min-width: 0; padding: 0 8px; text-align: center; text-wrap: balance; }

/* Alt, en tommel skal ramme, er mindst 48 × 48 px (brandet 12/10; før 44). */
.iconbtn, .topbar .ph { width: 48px; height: 48px; }
.spil-igen { min-height: 48px; }
.chip.sm.fjern { min-height: 48px; }
.link { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.fart { min-height: 48px; }
.spol { padding: 19px 0; margin: -19px 0; }
.toggle::before { content: ""; position: absolute; inset: -7px; }

/* Knapperne vokser med teksten (telefonens store skrift, lange navne) i stedet for at klippe den. */
.btn { height: auto; min-height: var(--btn-h); padding-top: 8px; padding-bottom: 8px; }
.btn-text { height: auto; min-height: 44px; }
.btn-dashed { height: auto; min-height: 52px; padding: 8px 12px; }
.seg { height: auto; min-height: 54px; padding: 6px 4px; text-align: center; line-height: 1.25; }
.segs.smaa .seg, .om-liste .segs .seg { height: auto; min-height: 44px; }

/* Knapperne krymper aldrig i en side eller et ark, der kan rulles: «Luk» og «Husk det» blev klemt til 24-28 px. */
.body > :not(.fade-wrap):not(.read), .sheet > * { flex-shrink: 0; }
.dot { width: auto; height: auto; flex: 1 1 0; max-width: 56px; aspect-ratio: 1; }

/* Lave skærme — iPhone i Safari (≈ 664 px), iPhone SE, Android med adresselinjen (720-740 px) og computerens ramme i et
   lavt vindue: det store fylder mindre, så Afspil, mikrofonen og adgangskoden står over kanten. Mellemrummet i
   afspilleren følger højden. Klasserne lav (≤ 760 px, rammen ≤ 808 px), lavere (≤ 700) og lavest (≤ 600) og --skaerm-h
   sætter app.js, når intet felt har fokus (4/10, C2-02): med «max-height» i en @media gjorde Androids tastatur siden lav,
   og dyret og musen forsvandt, mens forælderen skrev. :where() holder reglerne lige så stærke som før. */
.body.g24 { gap: clamp(14px, calc(var(--skaerm-h, 100dvh) * .026), 24px); }
:where(.lav) .body.g20, :where(.lav) .body.g24 { gap: 14px; }
:where(.lav) .h1 { font-size: 26px; }
:where(.lav) .h1.s36 { font-size: 30px; }
:where(.lav) .h1.title { font-size: 22px; }
:where(.lav) .moon-static { width: 72px; height: 72px; }
/* Ventesidens måne på en lav skærm (4/10, MOON-RING-OVERLAP): mindre, og ringen inden for sin egen plads. Før lå ringen
   oven i toppens linje og overskriften «Sofna skriver …» på 390×664 og 375×667. */
:where(.lav) .moon { width: 64px; height: 64px; margin: 16px auto; }
:where(.lav) .moon::before { inset: -16px; }
/* … og på en endnu lavere skærm står ventesidens tekst over bunden: trinene er lavere, og den tomme plads under «Til Hjem»
   (blank44, der holder knappen på plads, når der ingen anden knap er) bruges til teksten. */
:where(.lavere) .step { padding-top: 8px; padding-bottom: 8px; }
:where(.lavere) .footer .blank44 { display: none; }
:where(.lavere) .body.venter { gap: 10px; }
:where(.lav) .center-col { gap: 14px !important; }
:where(.lav) .rec-wrap { width: 144px; height: 144px; }
:where(.lav) .rec { width: 120px; height: 120px; }
:where(.lav) .transport { gap: 28px; padding: 0; }
:where(.lav) .playbtn { width: 76px; height: 76px; }
:where(.lav) .velkommen-dyr { width: 72px; height: 72px; margin-bottom: 0; }
:where(.lav) .read { font-size: 21px; } :where(.lav) .read.lg { font-size: 24px; } :where(.lav) .read.sm { font-size: 19px; }
:where(.lavere) .velkommen-dyr { width: 56px; height: 56px; }
:where(.lavest) .dyr-boks, :where(.lavest) .velkommen-dyr, :where(.lavest) .phone.dark .moon-static, :where(.lavest) .moon { display: none; }
/* Afspilleren på en lav skærm (4/10, skærm-gennemgangen L1 og L9): «Klar til at spille» og «Sat på pause» står ikke (knappens
   ikon siger det), og på den laveste (telefonen på tværs, iPhone SE i Safari) heller ikke ordene under tidslinjen. Så står
   Afspil og linjen under den inden for skærmen. En fejl står altid. */
:where(.lavere) .afspil-status { display: none; }
:where(.lavest) .phone.dark .zones { display: none; }
/* Login-skærmen, det første en forælder ser (4/10, LOGIN-LINKS-CLIPPED): på 390×664, 375×667, 360×640 og 320×568 står
   «Glemt adgangskode?» og «Vis adgangskoden» helt over bunden. Før skar bunden linjen over midt i ordene. */
:where(.lav) .velkommen { gap: 8px; padding-top: 0; }
:where(.lav) .velkommen .h1 { font-size: 23px; }
:where(.lav) .velkommen .lead { font-size: 15px; line-height: 1.4; }
:where(.lav) [data-login-form] .field.h56 { height: 50px; }
:where(.lav) .login-links { margin-top: -10px; }
.login-links .btn-text { white-space: nowrap; }
@media (max-width: 340px) { .login-links .btn-text { font-size: 14px; } }
:where(.lavest) .velkommen { gap: 6px; padding-top: 0; }

/* Et felt under 16 px får en iPhone til at zoome ind og blive der. */
.chips input.chip { font-size: 16px; }

/* Indstillinger: en lang værdi («Marie-Louise Frederikke, Carl-Christian») afkortes, så etiketten står på én linje. Kun en
   etiket, der ikke kan stå på linjen alene («Om Marie-Louise Frederikke» på 320 px), brydes — og den efterlader altid
   plads til pilen (12 px luft og 24 px), som har sin fulde bredde (4/10, C2-06: før blev pilen klemt til en streg). */
.list > button.item > span:first-child { flex: 0 0 auto; max-width: calc(100% - 36px); }
.list > button.item .val { min-width: 0; }
.list > button.item .val > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list > button.item .val > svg { flex: none; }

/* Til skærmlæseren: skærmens overskrift, når skærmen skifter (appen er ikke længere én stor aria-live). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============================================================
   Designet «Sofna app» (12/10): Hjem, natten og de nye dele.
   ============================================================ */
html.nat-start body { background: var(--nat); }
.g8 { gap: 8px; } .stack.g12 { gap: 12px; } .hrow.g8 { gap: 8px; } .hrow.wrap { flex-wrap: wrap; } .body.g24 { gap: 24px; }

/* Toppen: ordmærket og «Indstillinger» med ord. */
.hjem-top { flex-wrap: wrap; gap: 8px; min-height: 48px; }
.indst-knap { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); }
.dark .indst-knap { background: transparent; border-color: var(--nattekst-sek); color: var(--nattekst-sek); font-size: 20px; line-height: 30px; }

/* Børnene som én pille med et valgt barn i Nat, og «Tilføj et barn» stiplet ved siden af. */
.skifter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.skifter .boern-gruppe { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hoer); }
.skifter .boern-gruppe .chip { min-height: 48px; padding: 8px 24px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; color: var(--ink); }
.skifter .boern-gruppe .chip.is-selected { background: var(--nat); color: var(--havre); }
.skifter .chip.is-add { min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 1px dashed var(--sek); background: transparent; color: var(--ink); }
.phone.dark .skifter .boern-gruppe { background: var(--nat-haevet); }
.phone.dark .skifter .boern-gruppe .chip { color: var(--nattekst-sek); font-size: 20px; line-height: 30px; }
.phone.dark .skifter .boern-gruppe .chip.is-selected { background: var(--nat-kant); color: var(--nattekst); border: 1.5px solid var(--nattekst); }
.phone.dark .skifter .chip.is-add { border-color: var(--nattekst-sek); color: var(--nattekst-sek); font-size: 20px; }

/* «Almas aften» og pillen, der siger aftenen. */
.aften-hoved { margin-top: 8px; }
.status-pille { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 15px; line-height: 22px; font-weight: 700; color: var(--sek); }
.status-pille i { width: 8px; height: 8px; border-radius: 50%; background: var(--lygte); flex: none; }
.status-pille.rav { color: var(--rav); }
.status-pille.rav i { background: var(--rav); }
.phone.dark .status-pille { border: 0; background: var(--nat-haevet); color: var(--nattekst-sek); font-size: 20px; line-height: 30px; min-height: 36px; }
.phone.dark .status-pille.rav i { background: var(--lygte); }

/* Barnets dyr: stort og frit, ingen flade bag det om dagen. */
.hjem .dyr-boks { background: transparent; padding: 0; }
.hjem .dyr-boks .figure-dyr { height: 196px; height: clamp(140px, calc(var(--skaerm-h, 100dvh) * .23), 196px); }
.phone.dark .hjem .dyr-boks { background: var(--nat-haevet); border-radius: var(--r-flade); padding: 16px; }

/* Kortet med aftenens valg og kortet, mens historien er på vej. */
.hjem-kort { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-flade); border: 1px solid var(--line); background: var(--card); }
.hjem-kort .h3 { margin-bottom: 4px; }
.hjem-kort .small.center { text-align: center; }
/* 16/10: «Fortæl» og «Skriv» side om side i kortet på Hjem. */
.hjem-kort .vaelg-to { margin-top: 0; }
/* 16/10: den sidste historie nederst i kortet på Hjem, adskilt af en tynd streg. */
.vaelg-sidst { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.vaelg-sidst .overline { color: var(--sek); }
.vaelg-sidst .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vaelg-sidst .b { font: 400 18px/24px var(--serif); overflow-wrap: anywhere; }
.vaelg-sidst .spil-igen { flex: none; }
.dark .vaelg-sidst .overline { color: var(--nattekst-sek); }
.paa-vej-liste { display: flex; flex-direction: column; gap: 12px; }
.paa-vej-trin { display: flex; align-items: center; gap: 12px; }
.paa-vej-trin.nu { font-weight: 700; }
.paa-vej-trin .mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); }
.paa-vej-trin .mark i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.paa-vej-trin:not(.nu):not(.gjort) .mark i { display: none; }
.paa-vej-trin.gjort .mark { background: var(--ink); color: var(--paper); border: 0; }
.dark .paa-vej-trin .mark { border-color: var(--nattekst); } .dark .paa-vej-trin .mark i { background: var(--nattekst); }
.dark .paa-vej-trin.gjort .mark { background: var(--nattekst); color: var(--nat); }

/* Stemmen (27/10): hvem der læser for barnet — navnet til venstre, ▶ til højre. */
.stemme-raekke { display: flex; align-items: center; gap: 12px; }
.stemme-valg { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.stemme-raekke.is-selected { box-shadow: inset 4px 0 0 var(--lygte); }

/* Længden på historien: en glider med en finger, 5-20 minutter (20/10). */
.laengde { display: flex; flex-direction: column; gap: 8px; }
.laengde-tal { font: 400 22px/28px var(--serif); }
.laengde-glider { width: 100%; height: 44px; margin: 0; accent-color: var(--nat); touch-action: pan-y; }
.dark .laengde-glider { accent-color: var(--lygte); }

/* Aftenens historie er klar: titlen, den runde Afspil og to knapper. */
.hjem-klar { display: flex; flex-direction: column; gap: 8px; }
.klar-titel { font: 400 30px/36px var(--serif); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.rund-afspil { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; }
.rund-afspil .rund { width: 96px; height: 96px; border-radius: 50%; background: var(--lygte); color: var(--nat); display: flex; align-items: center; justify-content: center; }
.to-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.to-knapper > * { flex: 1 1 140px; }
.dark .hjem-klar .lead { color: var(--nattekst-sek); }
.dark .rund-afspil span { color: var(--nattekst); font-size: 20px; }

/* «Sidste historie». */
.sidste { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.sidste .overline { color: var(--sek); }
.card.sidst { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.card.sidst .t { display: flex; flex-direction: column; gap: 2px; }
.card.sidst .b { font: 400 22px/28px var(--serif); overflow-wrap: anywhere; hyphens: auto; }
.dark .sidste .overline { color: var(--nattekst-sek); }

/* «Byg historie» (designet 12/10). */
.byg .chip.is-selected { background: var(--nat); color: var(--havre); border-color: var(--nat); }
.chip.is-add.stiplet { border: 1px dashed var(--sek); background: transparent; color: var(--ink); }
.byg-valg { margin-top: 8px; }
.byg-valg .small.center { text-align: center; }

/* Ventesiden (designet 12/10): dyret, overskriften, trinene «Nu» og «Bagefter» og ingen nedtælling. */
.dyr-lille { display: flex; justify-content: center; margin-top: 16px; }
.dyr-lille .figure-dyr { width: 150px; height: 150px; object-fit: contain; }
.vent-trin { display: flex; flex-direction: column; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.vent-trin li { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.vent-trin li:last-child { border-bottom: 0; }
.vent-trin .naar { flex: none; width: 96px; font-weight: 700; color: var(--sek); }
.vent-trin .hvad { flex: 1; color: var(--sek); }
.vent-trin li.nu .hvad { font-weight: 700; color: var(--ink); }
.phone.dark .vent-trin { border: 0; background: var(--nat-haevet); }
.phone.dark .vent-trin li { border-color: var(--nat-kant); padding: 16px 24px; }
.phone.dark .vent-trin .naar, .phone.dark .vent-trin .hvad { color: var(--nattekst-sek); }
.phone.dark .vent-trin li.nu .hvad { color: var(--nattekst); }
.besked-linje { display: flex; align-items: center; gap: 12px; }
.phone.dark .venter .lead, .phone.dark .besked-linje { color: var(--nattekst-sek); }

/* Afspilleren om natten (designet 12/10). Grunden er Hvileskærm, teksten kun Nattekst sekundær, fremdriften i Glød
   (pynt: tiden står også til skærmlæseren). Ingen animation, mens historien spiller. */
.phone.hvileskaerm { background: var(--hvile); color: var(--nattekst-sek); }
.phone.hvileskaerm .h1 { color: var(--nattekst-sek); }
.afspil-hvile { position: relative; flex: 1; justify-content: center; align-items: center; text-align: center; padding: 48px 32px 32px; font-size: 20px; line-height: 30px; }
.afspil-hvile .midt { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.afspil-hvile .hele { position: absolute; inset: 0; z-index: 1; }
.tynd { width: 136px; height: 4px; border-radius: 2px; background: var(--nat-haevet); overflow: hidden; }
.tynd i { display: block; height: 100%; background: var(--gloed); }
.pause-nederst { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; }
.ring72 { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--nattekst-sek); display: flex; align-items: center; justify-content: center; color: var(--nattekst-sek); }
.hvile { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.hvile i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--lygte); opacity: .35; }
.afspil-knapper { font-size: 20px; line-height: 30px; }
.afspil-knapper .afspil-status { color: var(--nattekst-sek); }
.to-dele { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.to-dele .dele, .to-dele .dele-navne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.to-dele .dele span { height: 4px; border-radius: 2px; background: var(--nat-haevet); overflow: hidden; }
.to-dele .dele i { display: block; height: 100%; background: var(--gloed); }
.to-dele .dele-navne span { min-width: 0; }
.transport.ny { gap: 24px; padding: 24px 0 0; align-items: flex-start; }
.tknap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; text-align: center; }
.transport.ny .skip { width: 60px; height: 60px; border: 1.5px solid var(--nattekst-sek); color: var(--nattekst-sek); }
.transport.ny .playbtn { width: 88px; height: 88px; border: 1.5px solid var(--nattekst-sek); background: var(--nat-haevet); color: var(--nattekst); }
.afspil-knapper .fart { font-size: 20px; line-height: 30px; color: var(--nattekst-sek); border-color: var(--nattekst-sek); }
.afspil-under { margin-top: auto; color: var(--nattekst-sek); font-size: 20px; line-height: 30px; }
.phone.hvileskaerm .btn-secondary { border-color: var(--nattekst-sek); color: var(--nattekst-sek); font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .phone.hvileskaerm * { transition: none !important; animation: none !important; } }

/* Fortæl med stemmen (designet 12/10): mikrofonen under overskriften, ikke midt på skærmen. */
.fortael .rec-blok { flex: 0 0 auto; justify-content: flex-start; gap: 16px; margin-top: 28px; }
.fortael .rec-tekst { align-items: center; text-align: center; max-width: 300px; }
.fortael .rec-tekst p { margin: 0; }

/* Teksten (designet 12/10): hele siden ruller, og knapperne står under en streg. */
.teksten .story { font-size: 20px; line-height: 30px; gap: 16px; padding-bottom: 16px; }
.tjekket { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); }
.dark .tjekket { color: var(--nattekst); }
.footer.kant { border-top: 1px solid var(--line); padding-top: 16px; }
.footer .to-knapper { margin-top: 0; }

/* Del historien (designet 12/10). */
.del-kort { display: flex; align-items: center; gap: 16px; padding: 16px; }
.del-kort .del-dyr { flex: none; width: 56px; height: 56px; }
.del-kort .titel { font: 400 22px/28px var(--serif); }
.prikker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.prikker li { position: relative; padding-left: 20px; }
.prikker li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--lygte); }
.link-kort .item { justify-content: space-between; }
.link-kort .link-adr { font-size: 18px; word-break: break-all; }
.link-traek { border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 16px; }
.btn-text.lille { font-size: 15px; min-height: 48px; }

/* Modtagerens side (designet 12/10): mørk, rolig og uden tidslinje. */
.web.modtager { background: var(--nat); color: var(--nattekst); }
.web.modtager .web-main { justify-content: flex-start; gap: 32px; padding-top: 48px; max-width: 480px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.modtager-top { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 56px; }
.modtager-top .til { margin: 0; font-weight: 700; color: var(--nattekst-sek); }
.modtager .lead { color: var(--nattekst-sek); margin: 0; }
.modtager .rund-afspil { margin-top: 72px; }
.modtager .rund-afspil span { color: var(--nattekst); font-size: 20px; }
.ring96 { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid var(--nattekst-sek); background: var(--nat-haevet); color: var(--nattekst); display: flex; align-items: center; justify-content: center; }
.modtager-udloebet { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 64px; }
.modtager-udloebet .udloebet-dyr { width: 140px; height: 140px; margin-bottom: 16px; }
.link-kort .item.stack { align-items: flex-start; }
.web.modtager .brand b, .web.modtager .h1 { color: var(--nattekst); }

/* Morgenkortet og skemaet (designet 12/10): seks svar i to kolonner. */
.segs.to { display: grid; grid-template-columns: 1fr 1fr; }
.segs.to .seg { height: auto; min-height: 56px; padding: 8px 12px; text-align: center; font-size: 15px; line-height: 22px; }
.svar-kort { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.svar-kort .seg { background: var(--havre); border-color: var(--hoer); }
.dark .svar-kort .seg { background: var(--nat); border-color: var(--nat-kant); }

/* Log ind (designet 12/10): «Vis» inde i feltet, «Glemt adgangskode?» til højre. */
.login-forside .velkommen { align-items: stretch; text-align: left; }
.login-forside .velkommen-dyr { align-self: center; width: 132px; height: 132px; margin-bottom: 4px; }
.kode-felt { position: relative; }
.kode-felt .field { padding-right: 72px; }
.vis-kode { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 56px; min-height: 48px; padding: 0 12px; font-size: 15px; font-weight: 700; color: var(--rav); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.login-links.hoejre { justify-content: flex-end; }
.login-links .btn-text { color: var(--rav); }

/* Om dit barn (designet 12/10): trinene øverst til højre, valgt med flueben, sengetiden i et kort felt. */
.topbar .stepper { gap: 12px; }
.stepper .bars i { background: var(--hoer); }
.dark .stepper .bars i { background: var(--nat-kant); }
.stepper .bars i.is-on { background: var(--ink); }
.dark .stepper .bars i.is-on { background: var(--nattekst); }
.seg .ic, .seg svg, .chip svg { flex: none; }
.seg { gap: 6px; }
.field.tid { width: 160px; }
.kreds-liste .item .t { display: flex; flex-direction: column; }
.iconbtn.flad { border: 0; background: transparent; }
.link.med-ikon { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }

/* Fortælleren (designet 12/10). */
.udsagn-top { justify-content: flex-start; gap: 16px; }
.udsagn-top .stepper { flex: 1; flex-direction: column; align-items: stretch; gap: 8px; }
.udsagn-top .stepper .track { margin-left: 0; flex: none; }
.btn-flade { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--hoer); border-radius: 6px; background: var(--lys-flade); font-size: 15px; font-weight: 700; color: var(--ink); }
.btn-flade.is-selected { background: var(--ink); color: var(--havre); border-color: var(--ink); }
.list > .item.fortaeller-valg { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
.stepper .track { background: var(--hoer); }

/* Om Alma (designet 12/10): en oversigt, hvor hver række fører til stedet, den rettes. */
.om-del { margin: 8px 0 -4px; color: var(--sek); }
.list > .item.oversigt { padding: 12px 16px; }
.item.oversigt .kv, .item.dyr-raekke .kv { flex: 1; gap: 2px; }
.item.oversigt .k { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--sek); }
.item.oversigt .v { font-size: 18px; line-height: 26px; color: var(--ink); overflow-wrap: anywhere; }
.item.oversigt svg, .item.dyr-raekke svg { flex: none; color: var(--sek); }
.list > .item.dyr-raekke { justify-content: flex-start; gap: 16px; padding: 12px 16px; }
.item.dyr-raekke .figure-dyr.mini { width: 64px; height: 64px; flex: none; }
.item.dyr-raekke .k { font-size: 15px; font-weight: 400; color: var(--sek); }
.item.dyr-raekke .v { font-size: 18px; color: var(--ink); }
.om-liste .felt .k { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); }
.historie-row .titel { font: 400 22px/28px var(--serif); }
.list > .item.historie-row, .list > .item.oenske-row { padding: 14px 16px; }
.oenske-row .t { display: flex; flex-direction: column; gap: 2px; font-size: 18px; }
.historie-row .t { display: flex; flex-direction: column; gap: 2px; }

/* Indstillinger (designet 12/10). */
.indst-gruppe .label { color: var(--sek); }
.list > .item.indst { min-height: 56px; padding: 12px 16px; }
.item.indst .kv { flex: 1; gap: 2px; }
.item.indst .val { color: var(--sek); }
.item.indst.udgang .b { color: var(--rav); }
/* Om natten er tallene til højre lyse nok at læse (29/10): --sek er dagens farve og stod mørkt på mørkt. */
.dark .item.indst .val { color: var(--nattekst-sek); }
/* Minutterne (29/10): tallene står på én linje, og adressen er et link midt i sætningen. */
.indst-gruppe.minutter .val { white-space: nowrap; }
.indst-gruppe.minutter .small .link { display: inline; min-height: 0; min-width: 0; padding: 0; font-size: inherit; }
.list > .item.barn-raekke { padding: 4px 4px 4px 16px; }
.barn-vis { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; text-align: left; }
.barn-vis .kv { gap: 2px; }
.barn-raekke .vist { color: var(--sek); }
.barn-raekke.er-vist .vist { color: var(--ink); font-weight: 700; }

/* Barnets dyr (designet 12/10). */
.dyr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dyr-kort { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--hoer); }
.dyr-kort img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: contain; }
.dyr-kort .dyr-navn { font: 400 22px/28px var(--serif); }
.dyr-kort.is-selected { border: 2px solid var(--ink); padding: 11px; }
.dyr-valgt { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--havre); display: flex; align-items: center; justify-content: center; }
.dyr-grid .dyr-kort.is-selected { border-color: var(--ink); }