/* FORGE — mørkt, mobiloptimeret design (forge.md §28).
   Prioriteter: tydelig dagens aktivitet, store tal, store touch targets,
   minimal tekst under træning, betjening med én hånd. */

:root {
  /* Statuslinje og hjemmeindikator.
     index.html bruger viewport-fit=cover, så siden går helt ud i
     hjørnerne. Så SKAL der kompenseres, ellers lægger indholdet sig ind
     under uret, wifi og batteriet øverst. Bunden var der i forvejen tre
     steder; toppen manglede.
     Værdierne står i variabler frem for direkte env(), så en
     browserkontrol kan sætte en statuslinjehøjde og måle på den. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --bg: #081420;
  --bg2: #0a1724;
  --panel: #0f2233;
  --panel2: #10283b;
  --sunken: #0b1a28;
  --text: #f5f7fa;
  --muted: #9fb0bf;
  --accent: #68d391;
  --accent2: #63b3ed;
  --warn: #f6ad55;
  --danger: #fc8181;
  --line: #28445d;
  --hairline: rgba(255, 255, 255, 0.06);
  --radius: 18px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: linear-gradient(var(--bg), var(--bg2));
  background-attachment: fixed;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 760px;
  margin: auto;
  padding: calc(16px + var(--safe-top)) 12px calc(112px + var(--safe-bottom));
}

/* ---------------------------------------------------------------- Header */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
/* [hidden] og .header{display:flex} har samme specificitet (0,1,0), og
   forge.css kommer efter browserens egen [hidden]{display:none} i
   kaskaden, så .header{display:flex} vandt uafhængigt af attributten.
   Header og navigation har derfor stået synlige under HELE onboarding,
   uden at nogen kunne se det på en almindelig DOM-forespørgsel — den
   spørger kun om attributten er der, ikke om den har nogen virkning.
   To selektorer i stedet for én giver højere specificitet, så reglen
   ikke afhænger af rækkefølge. */
.header[hidden] {
  display: none;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  /* Uden min-width kan et flex-element ikke krympe under sit indhold, og
     så presser teksten ugelabel og knapperne sammen. */
  min-width: 0;
}

/* Versionsnummeret ved siden af navnet. Bevidst lille og dæmpet: det
   skal kunne aflæses, når man leder efter det, og ellers ikke tage
   opmærksomhed fra det, siden handler om. */
.ver {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
}
.brand h1 {
  margin: 0;
  font-size: 20px;
  white-space: nowrap;
}
/* Ugenummeret må aldrig brydes. "Uge" over "35" ser ud som en fejl. */
#weekLabel {
  white-space: nowrap;
  font-size: 13px;
}
.brand small,
.muted {
  color: var(--muted);
}

/* ----------------------------------------------------------------- Kort */

.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}
.hero {
  background: radial-gradient(
      circle at top right,
      rgba(99, 179, 237, 0.18),
      transparent 40%
    ),
    var(--panel2);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--muted);
}
.title {
  font-size: 25px;
  margin: 4px 0 8px;
  line-height: 1.2;
}
.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* 90px basis, så tre nøgletal står side om side på en telefon. */
.stat {
  flex: 1 1 90px;
  min-width: 0;
  background: var(--sunken);
  border-radius: 14px;
  padding: 12px 10px;
}
.stat b {
  display: block;
  font-size: 23px;
  margin-top: 3px;
}
/* Enheden på sin egen, mindre linje. En kort enhed som "kg" delte altid
   linje fint med tallet, men en længere som "sekunder" eller
   "gentagelser" kunne ikke være der ved siden af — boksen er kun omkring
   90px bred. Enheden arver farven fra sit tal (også en delta i good/bad),
   så den passer ind uden en ekstra regel pr. tilstand. */
.stat b .unit {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  opacity: 0.65;
}
.stat span {
  font-size: 12px;
  color: var(--muted);
}
.stat .delta {
  font-size: 12px;
  font-weight: 600;
}
.delta.down {
  color: var(--accent);
}
.delta.up {
  color: var(--warn);
}
/* Bruges af mål, hvor en stigning er forbedringen, fx armbøjninger. Samme
   farver som down/up, men navngivet efter retning-af-forbedring i stedet
   for tal-retning, så et mål med "op" som mål ikke bliver farvet rødt for
   at gå den rigtige vej. */
.delta.good {
  color: var(--accent);
}
.delta.bad {
  color: var(--warn);
}

/* ------------------------------------------------------------- Elementer */

.pill {
  display: inline-block;
  font-size: 12px;
  background: #17344a;
  color: #d9e7f2;
  padding: 7px 9px;
  border-radius: 999px;
  margin: 4px 4px 0 0;
}
.pill.done {
  background: rgba(104, 211, 145, 0.16);
  color: var(--accent);
}
.pill.missed {
  background: rgba(246, 173, 85, 0.16);
  color: var(--warn);
}
.pill.hard {
  background: rgba(246, 173, 85, 0.16);
  color: var(--warn);
}
.pill.light {
  background: rgba(104, 211, 145, 0.14);
  color: var(--accent);
}

.notice {
  background: var(--sunken);
  border-left: 4px solid var(--accent2);
  padding: 12px;
  border-radius: 10px;
  line-height: 1.5;
}
.adaptive {
  border-left: 4px solid var(--accent);
  background: var(--sunken);
  border-radius: 10px;
  padding: 12px;
  line-height: 1.5;
}

.btn {
  border: 0;
  background: var(--accent2);
  color: #06101a;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  min-height: 46px;
  cursor: pointer;
}
.btn2 {
  background: #17344a;
  color: var(--text);
}
.btn3 {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.btn:disabled {
  opacity: 0.45;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 5px;
}
input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* under 16px zoomer iOS ind ved fokus */
  background: var(--sunken);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}
textarea {
  min-height: 88px;
  resize: vertical;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* --------------------------------------------------------- Dagens aktivitet */

.activity {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--sunken);
  border-radius: 14px;
  padding: 13px;
  margin-top: 10px;
}
.activity .ico {
  font-size: 26px;
  line-height: 1;
}
.activity .body {
  flex: 1;
  min-width: 0;
}
.activity h3 {
  margin: 0 0 3px;
  font-size: 17px;
}
.activity p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.activity.is-done {
  opacity: 0.72;
}
.activity.is-done h3 {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

/* ------------------------------------------------------------------- Uge */

.week {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.day {
  background: var(--sunken);
  border-radius: 14px;
  border: 1px solid transparent;
  overflow: hidden;
}
.day.today {
  border-color: var(--accent);
}
.day.hardest {
  border-color: var(--warn);
}
.day > summary {
  padding: 12px 13px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.day > summary::-webkit-details-marker {
  display: none;
}
.day .date {
  min-width: 62px;
}
.day .date strong {
  display: block;
  font-size: 13px;
  text-transform: capitalize;
}
.day .date small {
  color: var(--muted);
  font-size: 12px;
}
.day .what {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
.day .what small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.day .chev {
  color: var(--muted);
  font-size: 13px;
  transition: transform 0.15s;
}
.day[open] .chev {
  transform: rotate(90deg);
}
.day .detail {
  padding: 0 13px 13px;
  border-top: 1px solid var(--hairline);
  margin-top: 2px;
  padding-top: 11px;
}
.day .detail ol {
  margin: 8px 0 0;
  padding-left: 20px;
}
.day .detail li {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.4;
}
.day .detail li span {
  color: var(--muted);
}

/* -------------------------------------------------------------- Træning */

.workout-card {
  background: var(--sunken);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
}
.workout-card h3 {
  margin: 0 0 5px;
}
.workout-card p {
  margin: 4px 0;
  color: var(--muted);
  line-height: 1.45;
}
.sets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.setcheck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.setcheck:has(input:checked) {
  border-color: var(--accent);
  background: rgba(104, 211, 145, 0.12);
}
.setcheck input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}
.progressbar {
  height: 10px;
  background: var(--sunken);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}
.progressbar div {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s;
}
.timerbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--sunken);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
  position: sticky;
  top: 8px;
  z-index: 5;
  border: 1px solid var(--hairline);
}
.timer {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.timer.running {
  color: var(--accent);
}
.exercise-link {
  border: 0;
  background: transparent;
  color: #8bc6ef;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
}

/* ------------------------------------------------------------- Øvelser */

.filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}
.chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  min-height: 38px;
  cursor: pointer;
}
.chip.active {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--accent2);
}
.exercise {
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.exercise > summary {
  font-weight: 700;
  cursor: pointer;
  padding: 14px 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.exercise > summary::-webkit-details-marker {
  display: none;
}
.exercise > summary .cat {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.exercise .detail {
  padding-bottom: 14px;
}
.exercise .lead {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
.exercise h4 {
  margin: 12px 0 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.exercise ul,
.exercise ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.55;
}
.exercise li {
  margin: 4px 0;
}
.variants {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.variant {
  background: var(--sunken);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
}
.variant b {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 3px;
}
.empty {
  color: var(--muted);
  padding: 20px 0;
  text-align: center;
}

/* ------------------------------------------------------------- Progress */

canvas {
  width: 100%;
  height: 220px;
  background: var(--sunken);
  border-radius: 14px;
  display: block;
}
.log {
  background: var(--sunken);
  border-radius: var(--radius-sm);
  padding: 11px;
  margin-top: 8px;
}
.log small {
  color: var(--muted);
}

/* ------------------------------------------------------------ Navigation */

.view {
  display: none;
}
.view.active {
  display: block;
}

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 14, 22, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 8px calc(8px + var(--safe-bottom));
  display: flex;
  justify-content: center;
  z-index: 20;
}
/* Se forklaringen ved .header[hidden]. Samme fejl, samme rettelse. */
.nav[hidden] {
  display: none;
}
.navin {
  width: 100%;
  max-width: 760px;
  display: grid;
  /* Én kolonne pr. knap, uanset hvor mange der er. Antallet var låst til
     fem, så den sjette brækkede om på en ny række oven i indholdet. Med
     auto-flow kan det ikke ske igen, når der kommer en syvende. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  min-height: 52px;
  cursor: pointer;
}
.nav button.active {
  background: var(--panel2);
  color: var(--text);
}
.nav span {
  display: block;
  font-size: 20px;
  margin-bottom: 2px;
}

/* ------------------------------------------------------- Kropscheck (§16) */

.areas {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.area {
  background: var(--sunken);
  border-radius: 14px;
  padding: 11px 12px;
}
.area-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.area-states {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.area-states .state {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 9px 4px;
  font-size: 12px;
  min-height: 42px;
  cursor: pointer;
}
/* Farverne går fra neutral til advarsel, så alvoren kan aflæses direkte. */
.area-states .state.active {
  color: var(--text);
  font-weight: 600;
}
.area-states .state.active.god {
  background: rgba(104, 211, 145, 0.18);
  border-color: var(--accent);
}
.area-states .state.active.øm {
  background: rgba(99, 179, 237, 0.18);
  border-color: var(--accent2);
}
.area-states .state.active.generet {
  background: rgba(246, 173, 85, 0.2);
  border-color: var(--warn);
}
.area-states .state.active.smerte {
  background: rgba(252, 129, 129, 0.22);
  border-color: var(--danger);
}

/* --------------------------------------------------- Readiness (§17) */

.readiness {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--sunken);
  border-radius: 16px;
  padding: 16px;
  border-left: 5px solid var(--muted);
}
.readiness.good {
  border-left-color: var(--accent);
}
.readiness.warn {
  border-left-color: var(--warn);
}
.readiness.bad {
  border-left-color: var(--danger);
}
.readiness .score {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.readiness.good .score {
  color: var(--accent);
}
.readiness.warn .score {
  color: var(--warn);
}
.readiness.bad .score {
  color: var(--danger);
}
.readiness .rbody {
  min-width: 0;
}
.readiness .rbody b {
  display: block;
  font-size: 15px;
}
.readiness .rbody p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.reasons {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reasons li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.4;
}
.reasons li:last-child {
  border-bottom: 0;
}
.reasons span {
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
}
.reasons .neg {
  color: var(--warn);
}
.reasons .pos {
  color: var(--accent);
}
.reasons .flat {
  color: var(--danger);
}

/* Readiness som nøgletal på forsiden */
.readiness-stat.normal b {
  color: var(--accent);
}
.readiness-stat.reduced b {
  color: var(--warn);
}
.readiness-stat.recovery b {
  color: var(--danger);
}

/* ------------------------------------------- Planforslag (§10, §20) */

.proposal {
  border: 1px solid var(--accent2);
  background: radial-gradient(
      circle at top left,
      rgba(99, 179, 237, 0.14),
      transparent 55%
    ),
    var(--panel);
}

/* ------------------------------------------ Sværhedsgrad pr. øvelse (§22) */

.rating-block {
  background: var(--sunken);
  border-radius: 14px;
  padding: 12px;
  margin: 14px 0 4px;
}
.rating-block > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.rating-block > summary::-webkit-details-marker {
  display: none;
}
.rating-block > summary .muted {
  font-size: 12px;
  font-weight: 400;
}
.rating-row {
  margin-top: 12px;
}
.rating-name {
  font-size: 14px;
  margin-bottom: 6px;
}
.rating-opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.rating-opts .rate {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 9px 3px;
  font-size: 12px;
  min-height: 42px;
  cursor: pointer;
}
.rating-opts .rate.active {
  background: var(--panel2);
  border-color: var(--accent2);
  color: var(--text);
  font-weight: 600;
}

/* --------------------------------------- Progression pr. øvelse (§22) */

.prog-row {
  background: var(--sunken);
  border-radius: 14px;
  padding: 13px;
  margin-top: 10px;
}
.prog-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.prog-head small {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}
.prog-target {
  margin-top: 7px;
  font-size: 14px;
}
.prog-target .muted {
  font-size: 13px;
}
.prog-history {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
}
.prog-history small {
  margin-left: 5px;
  font-size: 12px;
}
/* Prikkerne følger de fire knapper: let, passende, hård, for hård. */
.prog-history .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--muted);
}
.prog-history .dot.d4 {
  background: var(--accent);
}
.prog-history .dot.d6 {
  background: var(--accent2);
}
.prog-history .dot.d8 {
  background: var(--warn);
}
.prog-history .dot.d10 {
  background: var(--danger);
}
.prog-suggest {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
}
.prog-suggest p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------ Niveauer FORGE I-IV (§13) */

.level-now {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--sunken);
  border-radius: 16px;
  padding: 15px;
}
.level-badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--panel2);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.level-now b {
  display: block;
  font-size: 16px;
}
.level-now p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.level {
  background: var(--sunken);
  border-radius: 14px;
  border: 1px solid transparent;
  margin-top: 8px;
  overflow: hidden;
}
.level.next {
  border-color: var(--accent2);
}
.level.reached .level-mark {
  color: var(--accent);
}
.level > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.level > summary::-webkit-details-marker {
  display: none;
}
.level-mark {
  width: 16px;
  flex-shrink: 0;
  font-weight: 700;
}
.level-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
.level > summary .muted {
  font-size: 12px;
  white-space: nowrap;
}

.level-reqs {
  list-style: none;
  margin: 0;
  padding: 0 13px 13px;
}
.level-reqs li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.4;
}
.level-reqs li .mark {
  flex-shrink: 0;
  width: 16px;
  color: var(--muted);
  font-weight: 700;
}
.level-reqs li.met .mark {
  color: var(--accent);
}
.level-reqs li.met {
  color: var(--muted);
}
.level-reqs small {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* ------------------------------------------------------ Guide og hjælp */

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* 44 px er mindste komfortable touch target (§28.4). */
.help-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.help-btn:hover,
.help-btn:focus-visible {
  color: var(--text);
  border-color: var(--accent2);
}

.checklist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.checklist li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.4;
}
.checklist li:first-child {
  border-top: 0;
}
.checklist .mark {
  flex-shrink: 0;
  width: 16px;
  color: var(--muted);
  font-weight: 700;
}
.checklist li.done {
  color: var(--muted);
}
.checklist li.done .mark {
  color: var(--accent);
}
.linkish {
  border: 0;
  background: transparent;
  color: #8bc6ef;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* §28.4 kræver 38px. Ren tekst uden polstring rammer kun linjehøjden,
     omkring 20px — for lav til at ramme sikkert på en telefon. Højden
     lægges til uden at ændre bredden, så den stadig ser ud som en tekstlink. */
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}

/* Trinnene i arbejdscyklussen */
.step {
  background: var(--sunken);
  border-radius: 14px;
  margin-top: 8px;
  overflow: hidden;
}
.step > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  cursor: pointer;
  list-style: none;
}
.step > summary::-webkit-details-marker {
  display: none;
}
.step-n {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel2);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.step-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}
.step-title small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.step .chev {
  color: var(--muted);
  transition: transform 0.15s;
}
.step[open] .chev {
  transform: rotate(90deg);
}
.step-body {
  padding: 0 13px 13px;
}
.step-body p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}
.step-body p b {
  color: var(--text);
}

.screen-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
}
.screen-row:first-of-type {
  border-top: 0;
}
.screen-row .ico {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.screen-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.never {
  background: var(--sunken);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 11px 12px;
  margin-top: 9px;
}
.never p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Nyheder på guiden. Samme sprog som .never — sunken boks, accentkant —
   men med en dato over titlen, så listen læses som en tidslinje. */
.news-item {
  background: var(--sunken);
  border-left: 3px solid var(--accent2);
  border-radius: 10px;
  padding: 11px 12px;
  margin-top: 9px;
}
.news-item .news-date {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.news-item b {
  display: block;
  margin-top: 2px;
}
.news-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.level-list {
  display: grid;
  gap: 9px;
}
.level-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--sunken);
  border-radius: 12px;
  padding: 11px 12px;
}
.level-badge.sm {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 14px;
}
.level-line p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ------------------------------------------ Onboarding og indstillinger */

.onboard {
  padding-top: 24px;
  min-height: 100vh;
}
.onboard-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.onboard-progress span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s;
}
.onboard-progress span.on {
  background: var(--accent);
}

.day-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.day-pick {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 11px;
  padding: 10px 2px;
  min-height: 60px;
  cursor: pointer;
  display: grid;
  gap: 3px;
  place-content: center;
}
.day-pick b {
  font-size: 13px;
}
.day-pick small {
  font-size: 10px;
  line-height: 1.1;
}
.day-pick.active {
  background: rgba(104, 211, 145, 0.14);
  border-color: var(--accent);
  color: var(--text);
}

.template-preview {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.tp-day {
  background: var(--sunken);
  border-radius: 11px;
  padding: 9px 2px;
  text-align: center;
  border: 1px solid transparent;
}
.tp-day.training {
  border-color: var(--accent2);
}
.tp-day small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.tp-day span {
  display: block;
  font-size: 15px;
  margin: 3px 0 2px;
}
.tp-day b {
  display: block;
  font-size: 10px;
  line-height: 1.15;
}

/* --------------------------------------------------------------- Toast */

.toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(84px + var(--safe-bottom));
  max-width: 736px;
  margin: auto;
  background: var(--panel2);
  border: 1px solid var(--accent2);
  border-radius: 14px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

  /* Skjules med visibility, ikke kun med en flytning. En procentvis
     flytning måles af toastens EGEN højde, og 140 % rakte ikke forbi
     navigationen: den tomme boks blev hængende 54 px inde på skærmen
     på iPhone-format (390x844, målt). Toastens højde ændrer sig med
     tekstlængden og med om der er en knap, så der findes ikke en
     procentsats, der holder i alle tilfælde. */
  transform: translateY(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    visibility 0s;
}
.toast p {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.toast button {
  flex-shrink: 0;
}

@media (max-width: 520px) {
  /* Undertitlen er pynt, og den er årsagen til at headeren brækkede om.
     Navnet, ugen og de to knapper er det, der skal kunne læses. */
  .brand small {
    display: none;
  }
  .grid2 {
    grid-template-columns: 1fr;
  }
  .title {
    font-size: 22px;
  }
  .sets {
    grid-template-columns: 1fr;
  }
}

/* Nøgle og værdi på hver sin side. Bruges på vedligeholdelsessiden,
   hvor der skal vises en række tekniske tal uden at fylde som kort. */
.kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.kv:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.kv span {
  color: var(--muted);
}
.kv b {
  font-weight: 600;
  text-align: right;
}

/* Samtalen med coachen. Beskederne skal kunne skelnes på et øjeblik, så
   afsenderen aflæses af placering og farve frem for af en etiket. */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-boble {
  max-width: 85%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-mig {
  align-self: flex-end;
  background: var(--accent2);
  color: #08131f;
  border-bottom-right-radius: 5px;
}
.chat-coach {
  align-self: flex-start;
  background: var(--sunken);
  border-bottom-left-radius: 5px;
}
/* Datagrundlaget vises råt. Det skal kunne læses, ikke pyntes. */
.kode {
  margin: 12px 0 0;
  padding: 12px;
  background: var(--sunken);
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
  max-height: 420px;
  overflow: auto;
  white-space: pre;
}

/* FORGE spørger */
.fu-text {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.fu-context {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.fu-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.fu-chip {
  min-height: 48px;
}
.fu-input {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 14px;
}
.fu-input input {
  flex: 1 1 auto;
  min-height: 48px;
}
.fu-skip {
  display: block;
  margin: 10px 0 0;
  padding: 10px 4px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
/* Krop og journal */
.area-journal {
  margin: 2px 0 6px;
  font-size: 13px;
  line-height: 1.4;
}
.journal-offer {
  border-left: 4px solid var(--accent2);
}
/* Opsummering */
.fakta-raekke {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.fakta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.fakta-top .pill {
  margin: 0;
}
.fakta-type {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.fakta-citat {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Det ved FORGE om dig */
.om-gruppe > h3 {
  margin: 0 0 6px;
}
.om-raekke {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.om-gruppe > h3 + .om-raekke {
  border-top: 0;
}
.om-tekst {
  margin: 0 0 4px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.om-lille {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.om-tom {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
}
.om-raekke .actions .btn,
.om-gruppe .actions .btn,
#view-about .actions .btn {
  min-height: 48px;
}
.om-historik,
.om-tidligere {
  margin: 10px 0 0;
}
.om-historik summary,
.om-tidligere summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 48px;
}
.om-ny {
  margin-top: 8px;
}
#stOmDig {
  min-height: 48px;
}

/* Mål med effekt */
.goal-block {
  margin-top: 6px;
}
.goal-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13px;
  color: var(--muted);
}
.goal-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.goal-chip {
  margin: 0;
  padding: 4px 9px;
}
.goal-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.goal-other {
  margin-top: 4px;
  font-size: 13px;
}
.why-today {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
button.stat-link {
  min-height: 48px;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.stat-link b {
  font-size: 18px;
}
#goalPlanCard .btn {
  min-height: 48px;
}

/* Onboarding: mål */
.ob-chips .chip {
  min-height: 48px;
  padding: 10px 16px;
  font-size: 15px;
}
.ob-known {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}
.ob-known li + li {
  margin-top: 4px;
}
.onboard .actions .btn {
  min-height: 48px;
}
.goal-about {
  margin-top: 10px;
  min-height: 48px;
}

/* Coach og plan */
.co-brugt {
  align-self: flex-start;
  max-width: 85%;
  margin: -4px 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.fo-kort {
  align-self: stretch;
  padding: 14px;
  border: 1px solid var(--accent2);
  border-radius: 14px;
  background: var(--panel2);
}
.fo-titel {
  margin: 4px 0 8px;
  font-size: 17px;
  line-height: 1.35;
}
.fo-knapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fo-knap {
  min-height: 48px;
}
.fo-faerdig {
  align-self: stretch;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--sunken);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.fo-afvist {
  color: var(--muted);
}
.co-om {
  margin-top: 10px;
}
.co-om summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: #8bc6ef;
  font-size: 14px;
}
.co-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.co-chip {
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 14px;
  text-align: left;
  font-size: 15px;
  color: var(--text);
}
.co-husker-liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}
.co-husker-liste li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-om-dig {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
}
.co-send {
  width: 100%;
  min-height: 52px;
  font-size: 17px;
}
.co-ekstra .btn {
  flex: 1 1 140px;
  min-height: 48px;
}

/* Det sendes til AI */
.ds-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 9, 15, 0.72);
  overscroll-behavior: contain;
}
.ds-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}
.ds-hoved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ds-hoved h2 {
  margin: 0;
  font-size: 20px;
}
.ds-x {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #17344a;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.ds-intro {
  margin: 8px 0 12px;
  line-height: 1.5;
}
.ds-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-raekke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ds-raekke.er-fra {
  border-style: dashed;
}
.ds-tekst {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ds-besk {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.ds-antal {
  font-size: 13px;
  color: var(--accent2);
}
.ds-kontakt {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 16px;
  background: #17344a;
  border: 1px solid var(--line);
  cursor: pointer;
}
.ds-kontakt::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s;
}
.ds-kontakt:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.ds-kontakt:checked::after {
  background: #06101a;
  transform: translateX(20px);
}
.ds-kontakt:focus-visible,
.ds-x:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
.ds-under {
  margin: 16px 0 6px;
  font-size: 16px;
}
.ds-fast {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}
.ds-stoerrelse {
  margin: 12px 0 0;
}
.ds-note {
  margin: 6px 0 0;
}
.ds-note:empty {
  display: none;
}
.ds-raa {
  margin-top: 12px;
}
.ds-raa > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
}
.ds-knapper .btn {
  min-height: 48px;
  flex: 1 1 140px;
}

/* Konto: samme profil på telefon og web, med tydelige kopier og valg. */
.account-view {
  width: 100%;
  min-width: 0;
}
.account-card h2 {
  margin-top: 0;
  font-size: 19px;
  line-height: 1.3;
}
.account-card p {
  line-height: 1.55;
}
.account-card .btn {
  min-height: 48px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.account-card .actions {
  align-items: stretch;
}
.account-card .actions .btn {
  flex: 1 1 180px;
}
.account-email,
.account-profile-name {
  overflow-wrap: anywhere;
  font-weight: 700;
}
.account-email {
  color: var(--accent2);
}
.account-fields {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.account-fields input {
  min-height: 48px;
  min-width: 0;
  width: 100%;
  font-size: 16px;
}
.account-fields label:not(:first-child) {
  margin-top: 8px;
}
.account-help {
  font-size: 14px;
  margin: 4px 0 12px;
}
.account-switch {
  margin-top: 12px;
  width: 100%;
}
.account-confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  line-height: 1.5;
  cursor: pointer;
}
.account-confirm input {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
}
.account-counts {
  margin: 8px 0 16px;
  font-size: 14px;
}
.account-counts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
}
.account-counts dd {
  margin: 0;
  font-weight: 700;
}
.account-copies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.account-copies > section {
  min-width: 0;
  padding: 12px;
  background: var(--sunken);
  border-radius: var(--radius-sm);
}
.account-copies h3 {
  margin: 0;
  font-size: 16px;
}
.account-notice {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .account-copies {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-card > .btn {
    width: 100%;
  }
}

.account-bar { margin: 8px 0 14px; }
.account-bar .btn { min-height: 44px; white-space: normal; text-align: left; }

/* Login med brugernavn */
.account-fields input[inputmode="numeric"] {
  font-size: 22px;
  letter-spacing: 0.35em;
}
.account-card .account-link {
  width: 100%;
  margin-top: 4px;
  min-height: 48px;
  background: none;
  border-color: transparent;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-card .account-help[hidden] {
  display: none;
}

/* Mødet */
.moede {
  padding: 18px 16px 12px;
}
.moede-hilsen {
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.moede .fu-text {
  font-size: 18px;
}
.moede-hilsen + .fu-text {
  margin-top: 6px;
}
.moede-tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.moede-tre .fu-chip {
  padding: 10px 6px;
  font-size: 15px;
  line-height: 1.2;
}
.moede-valg {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.moede-valg .btn {
  min-height: 52px;
}
.moede-stor {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  font-size: 18px;
}
.moede-valg .moede-stor {
  margin-top: 0;
}
.moede-mere {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
}
.moede-lille {
  margin: 14px 0 0;
}
.moede-navn {
  margin: 4px 0 2px;
  font-size: 24px;
  line-height: 1.2;
}
.moede-mal {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.moede-husket {
  margin: 10px 0 4px;
  padding: 10px 12px 2px;
  background: var(--sunken);
  border-radius: 12px;
}
.moede-husket p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.moede-husket .fu-skip {
  margin: 0;
}
.moede .fu-skip {
  min-height: 48px;
}
.moede .fu-skip {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 4px;
}
.moede .moede-husket .fu-skip {
  width: auto;
  text-align: left;
}

/* I dag, kort form */
.idag-raekke {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}
.idag-raekke .ico {
  font-size: 26px;
  line-height: 1;
}
.idag-krop {
  flex: 1;
  min-width: 0;
}
.idag-krop h3 {
  margin: 0 0 2px;
  font-size: 17px;
}
.idag-krop p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
}
.idag-handling {
  flex: 0 0 auto;
}
.idag-handling .btn {
  min-height: 48px;
  min-width: 72px;
}
.idag-raekke.is-done h3 {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.idag-naeste {
  margin: 12px 0 0;
  font-size: 13px;
}
.moede-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.moede-links .btn {
  min-height: 48px;
  font-size: 14px;
}
.moede-links .btn:last-child {
  grid-column: 1 / -1;
}
.idag .goal-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.idag-raad {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--sunken);
  border-radius: 8px;
  line-height: 1.5;
}

/* Mødet: meld tilbage og krop */
.moede-anden {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
}
.moede-meld,
.moede-krop {
  margin-top: 4px;
}
.moede-meld label,
.moede-krop label {
  display: block;
  margin: 14px 0 6px;
}
.moede-variant {
  border: 1px solid var(--line);
  min-height: 52px;
  padding: 8px 4px;
  font-size: 14px;
  line-height: 1.2;
}
.moede-variant.is-on,
.moede-tilstand.is-on {
  border-color: var(--accent);
  background: rgba(104, 211, 145, 0.18);
  color: var(--text);
  font-weight: 700;
}
.moede-antal {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  gap: 8px;
  align-items: stretch;
}
.moede-antal .btn {
  min-height: 56px;
  min-width: 56px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
}
.moede-antal input {
  min-height: 56px;
  margin: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
.moede-omraader {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.moede-omraade {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.moede-omraade-navn {
  font-size: 14px;
  font-weight: 600;
}
.moede-omraade-valg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.moede-tilstand {
  border: 1px solid var(--line);
  min-height: 48px;
  padding: 6px 2px;
  font-size: 14px;
  line-height: 1.15;
}
.moede-tilstand.is-on.generet {
  border-color: var(--warn);
  background: rgba(246, 173, 85, 0.2);
}
.moede-tilstand.is-on.smerte {
  border-color: var(--danger);
  background: rgba(252, 129, 129, 0.22);
}
.moede-krop textarea {
  min-height: 84px;
}
.moede .actions .btn {
  min-height: 52px;
}
.moede-journal {
  margin-bottom: 8px;
}