/* Medvind — formgivning.
 *
 * Grundtonen är gryning: mörkt blått som går över i varmt ljus. Valet är inte
 * dekoration. En app för nedstämdhet får inte vara klinisk vit (då blir den en
 * blankett) och inte heller mörkt dyster (då bekräftar den läget). Gryning är
 * den enda ljussättning som betyder "det vänder" utan att säga det.
 *
 * Inga röda varningsfärger på henne själv. Rött finns bara på krisrutan, där
 * det ska dra blicken direkt. En missad dag är grå, aldrig röd.
 */

:root {
  /* Gryningspaletten */
  --natt: #171a2b;
  --skymning: #2b2f4a;
  --horisont: #e8814a;
  --morgon: #f4b860;
  --rosa: #e9958b;
  --himmel: #7fa3cf;
  --vatten: #4e8a86;

  --bg: #fbf8f5;
  --bg-upp: #ffffff;
  --bg-sank: #f3eee8;
  --kant: #e6ddd3;
  --kant-stark: #d4c7b9;

  --ink: #1f2230;
  --ink-mjuk: #5a5f73;
  --ink-svag: #8a8fa3;

  --accent: #c2582a;
  --accent-mjuk: #f6e3d6;
  --lugn: #3f6ea8;
  --lugn-mjuk: #e2ecf7;
  --gron: #2f6f5e;
  --gron-mjuk: #ddeee8;
  --larm: #a3302a;
  --larm-mjuk: #fbe6e3;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 32px;

  --skugga-s: 0 1px 2px rgba(31, 34, 48, 0.06), 0 2px 6px rgba(31, 34, 48, 0.04);
  --skugga-m: 0 2px 6px rgba(31, 34, 48, 0.07), 0 10px 26px rgba(31, 34, 48, 0.07);
  --skugga-l: 0 10px 50px rgba(31, 34, 48, 0.14);

  --text: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rubrik: 'Fraunces', Georgia, 'Times New Roman', serif;

  --bredd: 680px;
}

:root:not([data-theme='light']) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #12141f;
    --bg-upp: #1a1d2b;
    --bg-sank: #0d0f17;
    --kant: #2a2e40;
    --kant-stark: #3a3f55;

    --ink: #eceaf2;
    --ink-mjuk: #a7acc0;
    --ink-svag: #777d93;

    --accent: #f0905a;
    --accent-mjuk: #3a2318;
    --lugn: #8ab4e8;
    --lugn-mjuk: #1b2838;
    --gron: #74c4ab;
    --gron-mjuk: #152e27;
    --larm: #f08a82;
    --larm-mjuk: #3a1a18;

    --skugga-s: 0 1px 2px rgba(0, 0, 0, 0.3);
    --skugga-m: 0 2px 8px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.3);
    --skugga-l: 0 10px 50px rgba(0, 0, 0, 0.5);
  }
}

[data-theme='dark'] {
  --bg: #12141f;
  --bg-upp: #1a1d2b;
  --bg-sank: #0d0f17;
  --kant: #2a2e40;
  --kant-stark: #3a3f55;
  --ink: #eceaf2;
  --ink-mjuk: #a7acc0;
  --ink-svag: #777d93;
  --accent: #f0905a;
  --accent-mjuk: #3a2318;
  --lugn: #8ab4e8;
  --lugn-mjuk: #1b2838;
  --gron: #74c4ab;
  --gron-mjuk: #152e27;
  --larm: #f08a82;
  --larm-mjuk: #3a1a18;
  --skugga-s: 0 1px 2px rgba(0, 0, 0, 0.3);
  --skugga-m: 0 2px 8px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.3);
  --skugga-l: 0 10px 50px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--rubrik);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
h3 { font-size: 1.12rem; font-family: var(--text); font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 0.9em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ------------------------------------------------------------- gryningen -- */
/* Himlen bakom startsidan. Rör sig mycket långsamt — en animation man märker
 * är en animation som stör. */
.himmel {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100vh;
  z-index: -1;
  /* Fotot ovanpå, färgfältet under. Ordningen spelar roll: laddas bilden
     inte — långsam uppkoppling, gammal webbläsare — står gradienten kvar och
     sidan ser likadan ut. En hero som blir vit när en bild fallerar är en
     hero som ibland inte finns. */
  /* Tre lager, uppifrån och ner:
       1. Ett mörkt fält i överkanten — bara så mycket som rubriken behöver
          för att vara läsbar, inte mer. Mitten lämnas nästan orörd, annars
          blir fotot grumligt brunt i stället för gryning.
       2. Fotot, förankrat i överkanten så att horisonten hamnar inne i bild
          också i stående format på en telefon.
       3. Färgfältet, som står kvar om bilden inte laddas. En hero som blir
          vit när en bild fallerar är en hero som ibland inte finns. */
  background:
    linear-gradient(to bottom, rgba(18, 20, 33, 0.58) 0%, rgba(18, 20, 33, 0.22) 32%, rgba(18, 20, 33, 0) 55%, rgba(43, 47, 74, 0.28) 100%),
    url('/bilder/gryning.webp') center 22% / cover no-repeat,
    radial-gradient(130% 80% at 50% 108%, var(--morgon) 0%, var(--horisont) 22%, var(--rosa) 40%, var(--skymning) 68%, var(--natt) 100%);
  opacity: 1;
}
.himmel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(95% 50% at 50% 114%, rgba(255, 226, 175, 0.6), transparent 60%);
  animation: andas 14s ease-in-out infinite;
}
@keyframes andas {
  0%, 100% { opacity: 0.55; transform: translateY(0) scale(1); }
  50% { opacity: 0.85; transform: translateY(-1.5%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .himmel::after { animation: none; opacity: 0.7; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 7vh 20px 10vh;
  text-align: center;
  color: #fff;
}
.hero-inre { max-width: 560px; margin: 0 auto; }
.hero .logga { width: 88px; height: 88px; margin: 0 auto 26px; display: block; }
/* Rubriken bryter illa om den får hela bredden — tre rader med ett ensamt
   ord sist läser sämre än fyra jämna. */
.hero h1 { max-width: 13ch; margin-inline: auto; text-wrap: balance; }
.hero h1 { color: #fff; text-shadow: 0 2px 14px rgba(18, 20, 33, 0.55), 0 1px 40px rgba(18, 20, 33, 0.4); }
.hero .ledtext {
  font-size: clamp(1.02rem, 3.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(18, 20, 33, 0.5);
  margin: 18px auto 0;
  max-width: 44ch;
  text-wrap: pretty;
}
.hero .sign {
  font-family: var(--rubrik);
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  margin-top: 30px;
}
.hero-knappar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

.loften {
  display: grid;
  gap: 10px;
  margin: 46px auto 0;
  max-width: 420px;
  text-align: left;
}
.lofte {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  border-radius: var(--r-m);
  padding: 13px 15px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.45;
}
.lofte b { font-weight: 650; }
.lofte .bock { flex: 0 0 auto; opacity: 0.85; margin-top: 2px; }

/* ----------------------------------------------------------- stomme/app -- */
.app { max-width: var(--bredd); margin: 0 auto; padding: 0 16px 120px; }

.topp {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kant);
}
.topp .logga { width: 30px; height: 30px; flex: 0 0 auto; }
.topp .namn { font-family: var(--rubrik); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; }
.topp .hoger { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* Botten-navet. Mobil först: tummen når hit, och appen ska kunna användas
 * liggande i sängen med en hand. */
.nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-upp) 93%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--kant);
}
.nav button {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 2px 5px;
  border: 0;
  background: none;
  color: var(--ink-svag);
  font: inherit;
  /* Tio poster ska rymmas på en telefonskärm utan att brytas. */
  font-size: 0.6rem;
  letter-spacing: -0.01em;
  border-radius: var(--r-s);
  cursor: pointer;
}
.nav button svg { width: 20px; height: 20px; }
.nav button.pa { color: var(--accent); }
.nav button:disabled { opacity: 0.32; cursor: default; }

/* ------------------------------------------------------------------ kort -- */
.kort {
  background: var(--bg-upp);
  border: 1px solid var(--kant);
  border-radius: var(--r-l);
  padding: 20px;
  box-shadow: var(--skugga-s);
  margin: 14px 0;
}
.kort.tat { padding: 15px 16px; }
.kort > h2, .kort > h3 { margin-bottom: 8px; }
.kort .under { color: var(--ink-mjuk); font-size: 0.92rem; margin-bottom: 14px; }

.sektion { margin: 30px 0 10px; }
.sektion h2 { margin-bottom: 4px; }
.sektion p { color: var(--ink-mjuk); font-size: 0.94rem; margin: 0; }

.etikett {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-svag);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 550;
  background: var(--bg-sank); color: var(--ink-mjuk);
  border: 1px solid var(--kant);
}
.pill.accent { background: var(--accent-mjuk); color: var(--accent); border-color: transparent; }
.pill.lugn { background: var(--lugn-mjuk); color: var(--lugn); border-color: transparent; }
.pill.gron { background: var(--gron-mjuk); color: var(--gron); border-color: transparent; }

/* --------------------------------------------------------------- knappar -- */
button, .knapp {
  font: inherit;
  font-weight: 560;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 20px;
  cursor: pointer;
  background: var(--bg-sank);
  color: var(--ink);
  transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active, .knapp:active { transform: scale(0.975); }
button:focus-visible, .knapp:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2.5px solid var(--lugn);
  outline-offset: 2px;
}
.primar {
  background: linear-gradient(170deg, var(--horisont), var(--accent));
  color: #fff;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--horisont) 40%, transparent);
}
.primar:hover { filter: brightness(1.06); }
.ljus { background: #fff; color: var(--natt); }
.tom { background: transparent; border-color: var(--kant-stark); color: var(--ink); }
.ren { background: transparent; border-color: transparent; color: var(--ink-mjuk); padding: 8px 12px; }
.ren:hover { color: var(--ink); background: var(--bg-sank); }
.liten { padding: 7px 14px; font-size: 0.88rem; }
.pytteliten { padding: 4px 10px; font-size: 0.8rem; }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.rad { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.rad.slut { justify-content: flex-end; }

/* ----------------------------------------------------------------- fält --- */
label { display: block; font-size: 0.88rem; font-weight: 580; color: var(--ink-mjuk); margin-bottom: 6px; }
input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='date'], input[type='time'], textarea, select {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  border-radius: var(--r-m);
  border: 1px solid var(--kant-stark);
  background: var(--bg);
  color: var(--ink);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.falt { margin-bottom: 14px; }
.falt .hjalp { font-size: 0.84rem; color: var(--ink-svag); margin-top: 5px; }

/* Skattningsskalan. Stora tryckytor — ett reglage är fel verktyg med tummen
 * och blir dessutom omöjligt att svara exakt på. */
.skala { display: flex; gap: 5px; }
.skala button {
  flex: 1 1 0;
  padding: 13px 0;
  border-radius: var(--r-m);
  background: var(--bg-sank);
  border: 1px solid var(--kant);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.skala button.pa { background: var(--accent); color: #fff; border-color: transparent; }
.skala-ben { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-svag); margin-top: 5px; }

.procent { display: flex; align-items: center; gap: 12px; }
.procent input[type='range'] { flex: 1; accent-color: var(--accent); }
.procent output { min-width: 3.4ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; }

/* --------------------------------------------------------------- krisruta -- */
.kris {
  background: var(--larm-mjuk);
  border: 1.5px solid color-mix(in srgb, var(--larm) 42%, transparent);
  border-radius: var(--r-l);
  padding: 20px;
  margin: 16px 0;
}
.kris h3 { color: var(--larm); margin-bottom: 7px; }
.kris .resurs {
  display: flex; gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--larm) 20%, transparent);
}
.kris .resurs .nr { font-weight: 700; color: var(--larm); white-space: nowrap; font-size: 1.05rem; }
.kris .resurs .vad { font-size: 0.9rem; color: var(--ink-mjuk); }
.kris .resurs a { font-weight: 600; }

/* -------------------------------------------------------------- övningar -- */
.ovning-kort { display: grid; gap: 10px; }
.ovning-huvud { display: flex; align-items: flex-start; gap: 10px; }
.ovning-huvud h3 { flex: 1; }
.steg { counter-reset: s; list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 11px; }
.steg li {
  counter-increment: s;
  display: grid; grid-template-columns: 27px 1fr; gap: 12px;
  align-items: start;
}
.steg li::before {
  content: counter(s);
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-mjuk); color: var(--accent);
  font-size: 0.82rem; font-weight: 700;
}
.steg li.gjord { opacity: 0.45; }
.varfor {
  background: var(--lugn-mjuk);
  border-left: 3px solid var(--lugn);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 11px 14px;
  font-size: 0.91rem;
  color: var(--ink);
}
.varfor .etikett { color: var(--lugn); display: block; margin-bottom: 3px; }

.darfor {
  font-size: 0.85rem;
  color: var(--ink-svag);
  display: flex; gap: 7px; align-items: baseline;
  margin-top: 8px;
}
.darfor svg { flex: 0 0 auto; margin-top: 2px; }

/* ------------------------------------------------------------ hjälpte-fråga */
.hjalpte { border-top: 1px solid var(--kant); margin-top: 16px; padding-top: 14px; }
.hjalpte .fraga { font-weight: 600; font-size: 0.95rem; margin-bottom: 9px; }
.hjalpte-knappar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hjalpte-knappar button { padding: 9px 4px; font-size: 0.82rem; border: 1px solid var(--kant); background: var(--bg); }
.hjalpte-knappar button.pa { background: var(--gron); color: #fff; border-color: transparent; }
.hjalpte-knappar button.pa.nej { background: var(--ink-mjuk); }

/* ----------------------------------------------------------------- lista -- */
.lista { display: grid; gap: 9px; }
.post {
  background: var(--bg-upp);
  border: 1px solid var(--kant);
  border-radius: var(--r-m);
  padding: 13px 15px;
  display: flex; gap: 12px; align-items: center;
}
.post .txt { flex: 1; min-width: 0; }
.post .txt b { display: block; font-weight: 600; }
.post .txt small { color: var(--ink-svag); }
.post.klar { opacity: 0.62; }
.post.klar .txt b { text-decoration: line-through; }

.tomt {
  text-align: center;
  color: var(--ink-svag);
  padding: 26px 16px;
  border: 1.5px dashed var(--kant-stark);
  border-radius: var(--r-l);
  font-size: 0.93rem;
}

/* -------------------------------------------------------------- överblick -- */
.matare { display: grid; gap: 4px; }
.matare .tal { font-family: var(--rubrik); font-size: 2.3rem; line-height: 1; font-weight: 600; }
.matare .tal.bra { color: var(--gron); }
.matare .vad { font-size: 0.85rem; color: var(--ink-mjuk); }
.rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px; }

.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf-svep { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

.stapel-rad { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-bottom: 7px; }
.stapel { height: 9px; border-radius: 999px; background: var(--bg-sank); overflow: hidden; }
.stapel i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.stapel i.lugn { background: var(--lugn); }
.stapel i.gron { background: var(--gron); }

/* --------------------------------------------------------------- samtal --- */
.samtal { display: grid; gap: 11px; margin-bottom: 16px; }
.bubbla {
  padding: 12px 16px;
  border-radius: var(--r-l);
  max-width: 85%;
  font-size: 0.97rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.bubbla.hon { background: var(--accent); color: #fff; justify-self: end; border-bottom-right-radius: var(--r-s); }
.bubbla.coach { background: var(--bg-upp); border: 1px solid var(--kant); justify-self: start; border-bottom-left-radius: var(--r-s); }
.bubbla .vem { font-size: 0.72rem; opacity: 0.7; display: block; margin-bottom: 3px; }
.skriver { color: var(--ink-svag); font-size: 0.9rem; font-style: italic; }

.skrivfalt { display: flex; gap: 8px; align-items: flex-end; }
.skrivfalt textarea { min-height: 46px; max-height: 160px; border-radius: var(--r-l); }

/* ------------------------------------------------------------- intervju --- */
.intervju-huvud { text-align: center; margin-bottom: 20px; }
.intervju-huvud .av { font-size: 0.82rem; color: var(--ink-svag); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.intervju-fraga { font-family: var(--rubrik); font-size: clamp(1.5rem, 5.2vw, 2.1rem); line-height: 1.18; margin: 10px 0 14px; }

.spelknapp {
  width: 108px; height: 108px; border-radius: 50%;
  margin: 10px auto;
  display: grid; place-items: center;
  background: linear-gradient(170deg, var(--horisont), var(--accent));
  color: #fff; border: 0;
  box-shadow: 0 6px 30px color-mix(in srgb, var(--horisont) 45%, transparent);
}
.spelknapp svg { width: 40px; height: 40px; }
.spelknapp.spelar { background: var(--larm); animation: puls 1.6s ease-in-out infinite; }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--larm) 55%, transparent); }
  50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--larm) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .spelknapp.spelar { animation: none; } }
.tidrakning { text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-mjuk); font-size: 0.9rem; }

.tvatt { display: grid; gap: 12px; }
.tvatt .ruta { background: var(--bg-sank); border-radius: var(--r-m); padding: 13px 15px; font-size: 0.93rem; }
.tvatt .ruta .etikett { display: block; margin-bottom: 5px; }
.tvatt .ruta.ra { color: var(--ink-mjuk); font-style: italic; }

.framsteg { height: 5px; background: var(--bg-sank); border-radius: 999px; overflow: hidden; margin: 14px 0 4px; }
.framsteg i { display: block; height: 100%; background: linear-gradient(90deg, var(--horisont), var(--morgon)); border-radius: 999px; transition: width 0.4s ease; }

/* --------------------------------------------------------------- diverse -- */
.fot { text-align: center; color: var(--ink-svag); font-size: 0.82rem; padding: 34px 10px 10px; line-height: 1.55; }
.fot a { color: var(--ink-mjuk); }

.varsam {
  background: var(--bg-sank);
  border-radius: var(--r-m);
  padding: 13px 15px;
  font-size: 0.88rem;
  color: var(--ink-mjuk);
}

.flik { display: flex; gap: 5px; background: var(--bg-sank); padding: 4px; border-radius: 999px; margin-bottom: 16px; }
.flik button { flex: 1; padding: 9px 10px; font-size: 0.9rem; background: transparent; border: 0; border-radius: 999px; color: var(--ink-mjuk); }
.flik button.pa { background: var(--bg-upp); color: var(--ink); box-shadow: var(--skugga-s); }

dialog {
  border: 0; border-radius: var(--r-xl); padding: 0;
  max-width: min(560px, calc(100vw - 28px));
  width: 100%;
  background: var(--bg-upp); color: var(--ink);
  box-shadow: var(--skugga-l);
}
dialog::backdrop { background: rgba(23, 26, 43, 0.55); backdrop-filter: blur(3px); }
dialog .inre { padding: 22px; }
dialog h2 { margin-bottom: 10px; }

.brodsmula { color: var(--ink-svag); font-size: 0.84rem; margin-bottom: 4px; }

.laddar { display: grid; place-items: center; padding: 50px 0; color: var(--ink-svag); }
.snurra {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--kant-stark); border-top-color: var(--accent);
  animation: rotera 0.8s linear infinite;
}
@keyframes rotera { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--natt); color: #fff;
  padding: 11px 20px; border-radius: 999px;
  font-size: 0.9rem; z-index: 200;
  box-shadow: var(--skugga-m);
  animation: upp 0.25s ease;
}
@keyframes upp { from { opacity: 0; transform: translate(-50%, 10px); } }

@media (min-width: 720px) {
  .nav {
    position: sticky; top: 62px; bottom: auto;
    border-top: 0; border-bottom: 1px solid var(--kant);
    border-radius: 0;
  }
  .nav button { font-size: 0.72rem; }
}

/* ---------------------------------------------------------- spårbilder -- */
/* Ett motiv per spår. Landskap och inga människor med flit: en bild på en
   ledsen person berättar för läsaren hur hen ska se ut, och en glad person
   berättar vad hen misslyckas med. */
.sparbild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--r-m);
  margin: 0 0 14px;
}
.kort > .sparbild:first-child { margin-top: -4px; }

/* ------------------------------------------------- vad det kräver ------- */
/* Tidsåtagandet står på förstasidan med flit, innan någon registrerar sig.
   Ett program man inte visste krävde något är ett program man lämnar efter
   fyra dagar och tror att man misslyckats med. */
.krav {
  margin: 52px auto 0;
  max-width: 480px;
  text-align: left;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(10px);
  border-radius: var(--r-l);
  padding: 24px 22px;
  color: #fff;
}
.krav h2 { color: #fff; font-size: 1.45rem; margin-bottom: 8px; }
.krav-ingress { color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; line-height: 1.5; }
.krav-rutor { display: grid; gap: 12px; margin: 18px 0 4px; }
.krav-ruta {
  display: grid;
  grid-template-columns: 86px 1fr;
  grid-template-rows: auto auto;
  column-gap: 15px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.krav-tid {
  grid-row: 1 / 3;
  font-family: var(--rubrik);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--morgon);
  text-align: right;
}
.krav-nar {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.72);
}
.krav-ruta p { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.krav-sanning {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
}
.krav-sanning b { color: #fff; font-weight: 650; }