.wellness-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wellness-actions .period-select{background:rgba(255,255,255,.9)}
.wellness-note{font-size:13px;color:#6d7c72;margin:-8px 0 20px}
.stat-foot .wellness-better{color:#2f7354;font-weight:600}
.stat-foot .wellness-worse{color:#a5673f;font-weight:600}
.wellness-legend{margin-bottom:10px}
.wellness-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.fitness-panel .fitness-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:4px 0 16px}
.fitness-metric{background:#f5f8f5;border:1px solid var(--line);border-radius:11px;padding:15px 17px}
.fitness-metric span{display:block;font-size:13px;color:#5d6f64;margin-bottom:8px}
.fitness-metric strong{display:block;font-family:Bahnschrift,"Segoe UI",sans-serif;font-size:28px;font-weight:550;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.fitness-metric strong small{font-family:"Segoe UI",sans-serif;font-size:13px;letter-spacing:0;color:#78857e;font-weight:400;margin-left:6px}
.fitness-metric>small{display:block;font-size:12px;color:#7c8981;line-height:1.45;margin-top:7px}

.curve-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:4px 0 18px}
.curve-highlights>div{background:#eff4f9;border:1px solid #dbe5ef;border-radius:11px;padding:14px 16px}
.curve-highlights span{display:block;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:#5c7590;font-weight:650}
.curve-highlights strong{display:block;font-family:Bahnschrift,"Segoe UI",sans-serif;font-size:29px;font-weight:550;letter-spacing:-.8px;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.curve-highlights strong small{font-family:"Segoe UI",sans-serif;font-size:13px;color:#7b8a96;font-weight:400;margin-left:5px}
.curve-highlights small{display:block;font-size:12px;color:#77858f;line-height:1.4}
.curve-highlights em{display:block;font-style:normal;font-size:12px;color:#4a77af;font-weight:600;margin-top:5px}

.curve-bars{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
.curve-bar{display:grid;grid-template-columns:70px 1fr 66px;align-items:center;gap:10px;font-size:13px}
.curve-bar .curve-label{color:#5d6f64}
.curve-bar i{display:block;height:11px;border-radius:5px;background:linear-gradient(90deg,#8fb4d8,#4e7cab);min-width:3px}
.curve-bar strong{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.detail-note{font-size:13px;line-height:1.55;color:#5d6f64;margin:14px 0 0}

@media(max-width:620px){
  .wellness-actions{width:100%}
  .wellness-actions .btn{flex:1}
  .curve-bar{grid-template-columns:58px 1fr 58px;gap:8px;font-size:12px}
}

.chart text.sleep-score{font-size:10px;font-weight:650;font-variant-numeric:tabular-nums}
.chart text.sleep-score.good{fill:#2f7354}
.chart text.sleep-score.fair{fill:#9a7433}
.chart text.sleep-score.poor{fill:#a5523f}
.chart text.sleep-score.unscored{fill:#b3bdb6;font-weight:400}

/* Søvnfigur: tre stadier valgt ud fra nattens søvnscore. */
.sleep-panel{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.sleep-mascot{--sleep-skin:#d1d9ea;--sleep-ink:#596680;--sleep-band:#8c9ab6;--sleep-accent:#8c9ab6;
  position:relative;flex:0 0 190px;width:190px;margin:0;text-align:center;color:var(--sleep-ink)}
.sleep-art{display:block;width:190px;height:155px;overflow:visible}
.sleep-mascot figcaption{display:flex;align-items:center;justify-content:center;gap:4px;min-height:24px;font-size:10px;font-weight:600;white-space:nowrap}
.sleep-mascot.is-paused *{animation-play-state:paused!important}

.bed-head,.bed-mattress,.bed-base{fill:#eef1f5;stroke:#a7b3c2;stroke-width:1.5}
.bed-head{fill:#dfe5ec}
.bed-base{fill:#cdd6e0}
.bed-legs{fill:none;stroke:#a7b3c2;stroke-width:4;stroke-linecap:round}
.bed-pillow{fill:#fff;stroke:#b9c3d0;stroke-width:1.5}
.bed-duvet{fill:var(--sleep-accent);stroke:var(--sleep-ink);stroke-width:1.5;opacity:.85}
.bed-duvet-fold{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;opacity:.5}

.sleep-mascot .mascot-skin{fill:var(--sleep-skin);stroke:var(--sleep-band);stroke-width:1.5}
.sleep-mascot .mascot-highlight{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;opacity:.42}
.sleep-mascot .mascot-limbs,.sleep-mascot .mascot-face,.sleep-mascot .mascot-rub{fill:none;stroke:var(--sleep-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sleep-mascot .mascot-limbs{stroke-width:4.5}
.sleep-mascot .mascot-headband,.sleep-mascot .mascot-headband-knot{fill:none;stroke:var(--sleep-band);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.sleep-mascot .mascot-headband-knot{stroke-width:3}
.sleep-mascot .mascot-emblem{fill:none;stroke:var(--sleep-band);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.sleep-mascot .mascot-brows{stroke-width:2.5}
.sleep-mascot .mascot-cheek{fill:#dd967e;stroke:none;opacity:.45}
.sleep-mascot .mascot-mouth,.sleep-mascot .mascot-yawn{fill:var(--sleep-ink);stroke:none;opacity:.75}
.sleep-mascot .mascot-smile{fill:var(--sleep-ink);stroke-width:2}
.sleep-mascot .mascot-rub{stroke-width:2;opacity:.5}
.sleep-mascot .mascot-zzz{fill:none;stroke:#8998b3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:sleep-dream 4s ease-in-out infinite}
.sleep-mascot .mascot-zzz-faint{opacity:.5}
.sleep-mascot .mascot-spark{fill:none;stroke:#8eaf48;stroke-width:2;stroke-linecap:round;animation:sleep-twinkle 3s ease-in-out infinite}
.sleep-mascot .mascot-spark-two{animation-delay:1s}
.sleep-mascot .mascot-question{fill:none;stroke:#8f9aa6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sleep-heavy .sleeper{transform-origin:70px 76px;animation:sleep-breathe 5s ease-in-out infinite}
.sleep-rising{--sleep-skin:#e7d5a8;--sleep-ink:#796448;--sleep-band:#ad9162;--sleep-accent:#ad9162}
.sleep-rising .mascot-limbs{stroke-width:4}
.sleep-rising .sleeper{transform-origin:44px 82px;animation:sleep-sway 4.5s ease-in-out infinite}
.sleep-rising .mascot-yawn{transform-origin:49px 69px;animation:sleep-yawn 4.5s ease-in-out infinite}
.sleep-leaping{--sleep-skin:#c5e4a4;--sleep-ink:#31543b;--sleep-band:#477b4a;--sleep-accent:#7ca86a}
.sleep-leaping .sleeper{transform-origin:93px 60px;animation:sleep-jump 2.6s ease-in-out infinite}
.sleep-puff{fill:none;stroke:#9fb08f;stroke-width:2.5;stroke-linecap:round;opacity:.55;animation:sleep-twinkle 2.6s ease-in-out infinite}
.sleep-heavy .duvet{transform-origin:90px 96px;animation:sleep-breathe 5s ease-in-out infinite}
.sleep-unknown{--sleep-skin:#e0e5df;--sleep-ink:#748273;--sleep-band:#a1aea0;--sleep-accent:#aab5b0}

@keyframes sleep-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02,1.035)}}
@keyframes sleep-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes sleep-yawn{0%,55%,100%{transform:scaleY(.7)}70%,85%{transform:scaleY(1.25)}}
@keyframes sleep-jump{0%,100%{transform:translateY(4px) rotate(-3deg)}45%{transform:translateY(-9px) rotate(3deg)}}
@keyframes sleep-dream{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:.9}}
@keyframes sleep-twinkle{0%,100%{opacity:.35}50%{opacity:1}}

@media(max-width:620px){
  .sleep-panel{gap:16px;justify-content:center}
  .sleep-mascot{flex-basis:170px;width:170px}
  .sleep-art{width:170px;height:139px}
}
@media(prefers-reduced-motion:reduce){
  .sleep-mascot *{animation:none!important}
  .sleep-mascot .mascot-motion{display:none}
}

.sleep-panel .sleep-gauge{flex:0 0 96px;width:96px;height:96px}
.sleep-panel .readiness-copy{flex:1 1 280px;min-width:0}
.sleep-panel:has(.mascot-explanation[open]){align-items:flex-start}