/* ============================================================
   MA●HU - Design System
   Warm-donker, rustig, hairline-based. Geen iconen-rommel.
   Inspiratie: Aesop · Monocle · 1920s almanak. Avond-modus.
   ============================================================ */

:root {
  /* Colors - forest at dusk (v19.4), accent naar salie in v25.2.
     Grijs-groene undertoon; het accent was amber ("kampvuur"), maar na de
     salie-keuze in light (v25.1) wilde Mark één groene taal in beide modi.
     Cream tekst houdt het warm/leesbaar. */
  --bg: #11140f;
  --bg-soft: #161a13;
  --surface: #1c211c;
  --surface-elevated: #25291f;
  --hairline: #2a3027;
  --hairline-strong: #3d4338;
  --text: #ece1d1;
  --text-soft: #b3a98e;
  --text-mute: #948c77; /* v54: nog een stap lichter (5.6:1) - de kleine caps-labels in donker */
  /* Accent: salie - licht genoeg om te gloeien op de donkere basis;
     -strong voor hover/actief, -soft voor randen/decoratie. */
  --accent: #a3b678;
  --accent-strong: #bcca8e;
  --accent-soft: #66744a;
  --accent-rgb: 163, 182, 120; /* voor rgba()-gloed (today-ring, ademcirkel) */
  --success: #94a368;
  --warn: #d6a256;
  --danger: #b85c4a; /* v38: gedempt terracotta - destructieve actie, geen alarm */

  /* Natuur-groen (v19) - sage/leaf voor het pad + kompas. Iets warmer
     in donker mode zodat het oplicht tegen de grijs-groene basis. */
  --leaf: #a8b87c;
  --leaf-strong: #bcca8e;
  --water: #6f97ad; /* v48: gedempt waterblauw, past bij ivoor/salie (licht) */
  --leaf-soft: rgba(168, 184, 124, 0.18);

  /* Rust-gloed - zachte salie over grijs-groen, één kleurfamilie */
  --glow-a: rgba(168, 184, 124, 0.06);
  --glow-b: rgba(148, 163, 104, 0.05);

  /* Typography (v39.2: terug naar 2 families - oogde met de mono erbij als 4
     verschillende letters. Newsreader = warme leesserif met optische as
     (titels + quotes + waarom-blok). Mulish = kalme humanist-sans voor de
     tekst ÉN de labels. --font-mono wijst nu bewust óók naar de sans-stack:
     labels (datum, meta, kicker) blijven kleinkapitaal met spatiëring, maar
     in dezelfde familie als de tekst = één rustige stem i.p.v. een techy
     buitenbeentje. Cijfers/timers krijgen waar nodig tabular-nums. */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Mulish', system-ui, sans-serif;
  --font-mono: 'Mulish', system-ui, sans-serif;

  /* Type-schaal (v42: geconsolideerd van ~15 losse maten naar een benoemde
     modulaire schaal. Componenten verwijzen voortaan naar deze tokens i.p.v.
     eigen rem-waarden, zodat het ritme overal klopt en in één plek te stemmen is. */
  --fs-label: 0.7rem;   /* kickers, meta in kleinkapitaal */
  --fs-xs: 0.8rem;      /* fijne print, hints */
  --fs-sm: 0.875rem;    /* secundaire tekst, mute */
  --fs-base: 1rem;      /* body */
  --fs-md: 1.1rem;      /* lead, h3, quote-body */
  --fs-lg: 1.45rem;     /* h2, sectiekop */
  --fs-xl: 1.75rem;     /* oefening-titel (hero) */
  --fs-2xl: 2rem;       /* h1 */
  --fs-display: 3.5rem; /* timer, spanning-getal */

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Layout */
  --max-w: 480px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* Light mode - ivoorwit + salie (v25.1). Het ivoor bleef, maar het accent was
   nog ochre-bruin en de tekst warm-bruin → las nog steeds als "beige en bruin".
   Nu: salie-groen accent (zelfde familie als 'Je pad' + Kompas, één natuurlijke
   kleur op ivoor) en neutraal-antraciete tekst i.p.v. warm-bruin. Sinds v25.2
   is donker óók salie - één groene taal in beide modi (Marks keuze).
   Alleen kleur-tokens; spacing/typografie blijven gelijk. */
[data-theme="light"] {
  --bg: #faf7ee;
  --bg-soft: #f2eee0;
  --surface: #fffdf5;
  --surface-elevated: #f6f2e6;
  --hairline: #e7e6dc;
  --hairline-strong: #d2d0c1;
  /* Tekst: neutraal antraciet/grijs - geen warm-bruine ondertoon meer */
  --text: #24262a;
  --text-soft: #51555c;
  --text-mute: #6d7176; /* v53: was #868a8f (3.2:1) - nu 4.6:1 voor de kleine labels */
  /* Accent: salie-groen. Donker genoeg dat ivoor-tekst op de primaire knop
     leesbaar blijft; -strong voor hover/actief, -soft voor randen/decoratie. */
  --accent: #56744a;
  --accent-strong: #44603b;
  --accent-soft: #93ab84;
  --accent-rgb: 86, 116, 74; /* voor rgba()-gloed (today-ring, ademcirkel) */
  --success: #56744a;
  --warn: #a9742a;
  --danger: #a14a38; /* v38: gedempt terracotta - destructieve actie, geen alarm */
  /* Pad/Kompas-groen - iets dieper dan het accent zodat blaadjes en accent
     elkaar aanvullen zonder samen te vallen. */
  --leaf: #4f6b43;
  --leaf-strong: #405636;
  --water: #8bb0c6; /* v48: gedempt waterblauw (donker), iets lichter zodat het oplicht */
  --leaf-soft: rgba(79, 107, 67, 0.12);
  /* Rust-gloed: meegekleurd naar salie zodat de achtergrond geen warme
     bruin-zweem terugkrijgt; blijft bijna onzichtbaar. */
  --glow-a: rgba(86, 116, 74, 0.05);
  --glow-b: rgba(103, 117, 63, 0.05);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Critical: [hidden] must win over component display rules */
[hidden] {
  display: none !important;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  /* Transparant zodat de gloed (body::before, z-index -1) zichtbaar is tussen
     de html-achtergrond en de content; html houdt de basiskleur. */
  background: transparent;
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 {
  font-size: var(--fs-2xl);
  line-height: 1.1;
  font-weight: 300;
  font-variation-settings: "opsz" 72;
}

h2 {
  font-size: var(--fs-lg);
  line-height: 1.2;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
}

h3 {
  font-size: var(--fs-md);
  line-height: 1.3;
  font-weight: 500;
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
  color: var(--text);
}

p.soft {
  color: var(--text-soft);
}

p.mute {
  color: var(--text-mute);
  font-size: var(--fs-sm);
}

.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-label);
  color: var(--accent);
  margin-bottom: var(--sp-3);
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}

a:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
}

/* ============================================================
   Layout primitives
   ============================================================ */

.hairline {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: var(--sp-6) 0;
}

.hairline-strong {
  height: 1px;
  background: var(--hairline-strong);
  border: 0;
  margin: var(--sp-6) 0;
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.stack-tight > * + * {
  margin-top: var(--sp-2);
}

.stack-loose > * + * {
  margin-top: var(--sp-6);
}

.center {
  text-align: center;
}

.spacer {
  flex: 1;
}

/* ============================================================
   Buttons
   ============================================================ */

button {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.01em;
}

.btn:hover, .btn:focus-visible {
  background: var(--surface-elevated);
  border-color: var(--accent-soft);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
  padding: var(--sp-4) var(--sp-7);
  min-height: 52px;
  font-size: var(--fs-md);
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--bg);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--text-soft);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--accent-soft);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Favoriet-toggle (v42.7) in de oefening-detail. Subtiel; salie/ster wanneer aan. */
.fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fav-toggle .fav-star { color: var(--text-mute); font-size: 1.1em; line-height: 1; transition: color 0.2s var(--ease); }
.fav-toggle:hover, .fav-toggle:focus-visible { border-color: var(--accent-soft); color: var(--text); }
.fav-toggle.on { background: var(--leaf-soft); border-color: var(--accent-soft); color: var(--text); }
.fav-toggle.on .fav-star { color: var(--accent); }

/* Favorieten-snelkoppeling bovenaan Verken */
.verken-fav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.link {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  background: transparent;
  border: 0;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: all 0.2s var(--ease);
}

.link:hover, .link.active {
  color: var(--accent);
}

.link.active {
  border-bottom-color: var(--accent);
}

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.card-quiet {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

/* ============================================================
   Welcome / today screen
   ============================================================ */

.brand {
  /* Inter (geometrisch) voor de wordmark MA●HU; de stip in het accent. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  color: var(--text-soft);
  text-align: center;
  padding: var(--sp-3) 0 var(--sp-7);
}
/* De punt in MA●HU - kleine salie-stip als merksignatuur */
.brand-dot {
  color: var(--accent);
  font-size: 0.7em;
  vertical-align: middle;
  margin: 0 0.14em;
}
/* Slogan onder het volledige logo (alleen nog op het welkomstscherm):
   display-serif-cursief, warm en literair tegen de geometrische wordmark.
   Negatieve marge zodat 'ie dicht onder de wordmark zit i.p.v. onder de
   grote .brand-padding. (v39: weg van de Vandaag-pagina - dat las als een
   tweede header en maakte het scherm onrustig.) */
.brand-slogan {
  margin-top: calc(-1 * var(--sp-6));
  margin-bottom: var(--sp-6);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  color: var(--text-soft);
}

/* v39.7: begroeting + datum als één stille overline boven de oefening -
   sentence-case (geen kapitalen), leest warm als een persoonlijke regel. */
/* v39.9: stille begroeting helemaal bovenaan (page-header boven de quote). */
.dag-greeting {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin-bottom: var(--sp-5);
}
/* Eyebrow die de oefening ankert ("Oefening voor vandaag"): stil mono-label,
   zelfde fluister-stijl als de fold-summaries - alleen Begin is luid. */
.dag-overline {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-label);
  color: var(--text-mute);
  margin-bottom: var(--sp-2);
}

.exercise-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variation-settings: "opsz" 36;
  margin-bottom: var(--sp-3);
}

/* Vandaag-hero: één gecentreerde lees-as (Marks voorkeur). Alleen hier - het
   Verken-detail blijft links-uitgelijnd (lange leespagina). Scoped via wrapper
   zodat de gedeelde .exercise-* classes elders ongemoeid blijven. */
.vandaag-hero { text-align: center; }
.vandaag-hero .exercise-meta { justify-content: center; }
.vandaag-hero .exercise-intro-wrap { text-align: center; }
.vandaag-hero .exercise-secundair { text-align: center; }

@media (min-width: 380px) {
  .exercise-title { font-size: 1.75rem; }
}

/* Meta ("wat het is / hoe lang / waarover") - bewust ánders dan de datum-
   overline: gewone tekstletter, geen kapitalen, met kalme middot-scheiding.
   Zo ontstaat een logische opbouw: caps-datum -> serif-titel -> stille meta. */
.exercise-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.exercise-meta span:not(:last-child)::after {
  content: "·";
  margin: 0 var(--sp-2);
  color: var(--hairline-strong);
}

/* v39.7: intro inklapbaar tot 3 regels met een 'meer'-knop (verschijnt alleen
   als de tekst echt langer is), zodat Begin sneller in beeld komt. */
.exercise-intro-wrap {
  margin-bottom: var(--sp-5);
}
.exercise-intro {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
}
.exercise-intro.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* v40.0: secundaire info ONDER Begin - gedempt, links, dicht op elkaar.
   Alleen Begin is luid. De tiny-versie blijft als rustige escape-hatch
   zichtbaar; "waarom dit werkt" + de bron staan samen achter één tikje
   (progressive disclosure - de bron staat dus niet meer standaard in beeld). */
.exercise-secundair { margin-top: var(--sp-5); }
.exercise-secundair .tiny-link {
  display: block;
  width: auto;
  text-align: left;
}
.exercise-secundair .science-fold {
  margin-top: var(--sp-4);
  margin-bottom: 0;
}
/* v56.7: detailpagina-vouwen als één rustige groep (de stappen / waarom / tiny) */
.detail-secundair { margin: var(--sp-6) 0; }
.detail-secundair .science-fold { margin-bottom: var(--sp-4); }
.detail-secundair .science-fold:last-child { margin-bottom: 0; }
.detail-secundair .session-instructions { margin-top: var(--sp-3); }
.detail-secundair .science-note { margin-top: var(--sp-3); }
.detail-secundair .doe-tiny-tekst { margin-top: var(--sp-3); }
.detail-secundair .boek-fold-tekst { margin-top: var(--sp-3); }
.detail-secundair .boek-ideeen,
.detail-secundair .boek-tips { margin-top: var(--sp-3); }
.exercise-secundair .src-line {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}

/* Uitklap-blokken (v39.3 "waarom dit werkt", v39.7 "Dagelijks ritme") - zelfde
   native <details>-patroon als .drop-waarom op het gedachten-scherm. Standaard
   dicht zodat de oefening centraal staat; de summary is de groene trigger. */
.science-fold,
.ankers-fold {
  margin-bottom: var(--sp-6);
}
.science-fold summary,
.ankers-fold summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-label);
  color: var(--text-mute);
}
.science-fold summary::-webkit-details-marker,
.ankers-fold summary::-webkit-details-marker { display: none; }
.science-fold summary::before,
.ankers-fold summary::before { content: "+ "; }
.science-fold[open] summary::before,
.ankers-fold[open] summary::before { content: "- "; }
.ankers-telling { color: var(--text-mute); }

/* v47.4: Dagboek-ritme als blok-knop-uitklap (past bij de andere Dagboek-acties) */
.ritme-fold { width: 100%; border-bottom: 1px solid var(--hairline); } /* v54.6: zelfde rij als de andere Dagboek-acties */
.ritme-fold summary { list-style: none; justify-content: space-between; }
.ritme-fold summary::-webkit-details-marker { display: none; }
.ritme-head-titel { flex: 1; text-align: left; }
.ritme-fold .fold-chevron { flex: none; }
.ritme-fold[open] .fold-chevron { transform: rotate(90deg); color: var(--accent); }
.ritme-body { padding: var(--sp-4) 0 var(--sp-2); }

/* v47.4: gedeelde checkbox-rij (dagelijkse-oefening-keuze, en herbruikbaar) */
.check-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.check-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.check-row:hover, .check-row:focus-visible { border-color: var(--accent-soft); }
.check-box {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--hairline-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  transition: all 0.2s var(--ease);
}
.check-row.actief { border-color: var(--accent-soft); background: var(--leaf-soft); }
.check-row.actief .check-box { background: var(--accent); border-color: var(--accent); }
.check-label { font-size: var(--fs-base); }

/* v48: water-rij in Dagelijks ritme (0,5 L-stapper). Rustig, geen doel/peil. */
.water-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.water-label { font-size: var(--fs-base); color: var(--text); }
.water-stepper { display: inline-flex; align-items: center; gap: var(--sp-3); }
.water-waarde { min-width: 3.4em; text-align: center; font-family: var(--font-mono); color: var(--text); }
.water-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--water);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.water-btn:hover, .water-btn:focus-visible { border-color: var(--water); }
.water-btn:active { transform: scale(0.94); }

.science-note {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-soft);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-soft);
  margin-top: var(--sp-3);
  /* v54: was 8 regels klein cursief serif - inhoudelijk het hart,
     typografisch het zwaarst leesbare blok. Nu gewone romein. */
  font-family: var(--font-body);
  font-variation-settings: "opsz" 14;
}

/* ============================================================
   Session-running screen
   ============================================================ */

.session-instructions {
  font-size: var(--fs-md);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
}

.session-instructions ol {
  list-style: none;
  counter-reset: step;
  padding: 0;
}

.session-instructions ol li {
  counter-increment: step;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

.session-instructions ol li:last-child {
  border-bottom: 0;
}

.session-instructions ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
}

.session-instructions ul {
  list-style: none;
  padding: 0;
}

.session-instructions ul li {
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  position: relative;
  color: var(--text);
}

.session-instructions ul li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.session-instructions strong {
  font-weight: 600;
  color: var(--accent);
}

.tiny-version {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: var(--sp-6) 0;
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* v54.9: schrijf-wizard - één vraag per keer, groot en rustig leesbaar. */
.wizard-titel { text-align: center; margin-bottom: var(--sp-4); }
.wizard { margin: var(--sp-4) 0 var(--sp-5); }
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-5);
}
.wizard-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hairline-strong);
  transition: background .25s ease, transform .25s ease;
}
.wizard-dot.done { background: var(--leaf); opacity: .55; }
.wizard-dot.active { background: var(--leaf); transform: scale(1.35); }
.wizard-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-mute);
  letter-spacing: .02em;
}
.wizard-card { min-height: 8.5em; }
.wizard-vraag {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.wizard-hint {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}
.wizard-input { width: 100%; margin-top: var(--sp-2); }
.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.wizard-nav .wizard-next { flex: 1 1 auto; }
.wizard-nav .wizard-prev { flex: 0 0 auto; }
.wizard-nav-spacer { flex: 0 0 auto; }
.wizard-back { display: block; margin: var(--sp-4) auto 0; }

/* v54.9: adem/timer-oefeningen - stappen als rustige doorloop, één tegelijk. */
.doe-stappen {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.doe-stap { min-height: 4.5em; }
.doe-stap-nr {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mute);
  margin-bottom: var(--sp-2);
}
.doe-stap-tekst {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text);
}
.doe-stap-tekst strong { font-weight: 600; color: var(--accent); }
.doe-stap-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.doe-nav-spacer { flex: 0 0 auto; min-width: 1px; }
.doe-tiny { margin: var(--sp-4) 0; }
.doe-tiny summary { font-size: var(--fs-sm); color: var(--text-mute); }
.doe-tiny-tekst {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-soft);
}

/* v40.2: schrijfvak tijdens de sessie (schrijf-oefeningen). Rustig label +
   ruim tekstveld; wat je typt wordt bij de sessie bewaard. */
.session-schrijf {
  margin: var(--sp-5) 0;
}
.session-schrijf .kicker {
  display: block;
  margin-bottom: var(--sp-2);
}

/* v40.3: "Jouw reflecties" per oefening in de bibliotheek - terugkijken op wat
   je eerder schreef (uit sessies + losse notities), plus een notitie toevoegen. */
.refl-blok > .kicker {
  display: block;
  margin-bottom: var(--sp-3);
}
.refl-item {
  margin-bottom: var(--sp-4);
}
.refl-date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-bottom: var(--sp-1);
}
.refl-tekst {
  white-space: pre-wrap;
}
.refl-empty {
  font-size: var(--fs-sm);
}
.refl-add {
  margin-top: var(--sp-4);
}
.refl-add .reflection-input {
  margin: var(--sp-3) 0;
}

.tiny-version .label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

/* ============================================================
   Timer
   ============================================================ */

.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-6) 0;
  margin: var(--sp-6) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.timer-display {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}

.timer-bar {
  width: 100%;
  height: 2px;
  background: var(--hairline);
  overflow: hidden;
  margin-top: var(--sp-3);
}

.timer-bar-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 1s linear;
}

.timer-state {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}

/* ============================================================
   Done screen
   ============================================================ */

.done-celebration {
  text-align: center;
  padding: var(--sp-7) 0 var(--sp-6);
}

.done-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 200;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-5);
  font-variation-settings: "opsz" 72;
}

.done-message {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: var(--sp-5);
  font-variation-settings: "opsz" 36;
}

.done-soft {
  font-size: var(--fs-base);
  color: var(--text-soft);
  line-height: 1.5;
}

.reflection-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  min-height: 80px;
  resize: none;
  transition: border-color 0.2s var(--ease);
}

.reflection-input:focus {
  outline: none;
  border-color: var(--accent-soft);
}

.reflection-input::placeholder {
  color: var(--text-mute);
}

.tomorrow-note {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  text-align: center;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  line-height: 2;
}
.tomorrow-cat { opacity: 0.8; }

/* v54 (peak-end): sterren en opmerking wachten achter een zachte fold,
   zodat het afscheid standaard licht is. Open bij schrijf-oefeningen. */
.done-terugblik { margin-top: var(--sp-6); }
.done-terugblik summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  padding: var(--sp-2) 0;
  -webkit-tap-highlight-color: transparent;
}
.done-terugblik summary::-webkit-details-marker { display: none; }
.done-terugblik summary::before { content: "+ "; }
.done-terugblik[open] summary::before { content: "- "; }
.done-terugblik summary:hover { color: var(--text-soft); }
.done-terugblik > .stack { margin-top: var(--sp-4); }

/* v54: zachte melding in app-stijl (vervangt OS-alerts) */
.melding-banner {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  max-width: min(92vw, 440px);
  background: var(--surface-elevated);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 60;
  cursor: pointer;
}
.melding-banner.in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* v54: in-page wis-bevestiging - de knop wordt zelf de vraag */
#wisBtn.armed {
  background: var(--danger);
  color: var(--bg);
  border-color: var(--danger);
}

/* v54: zachte uitfade voor de pull-to-refresh-herlaad */
body.herlaad-fade { opacity: 0; transition: opacity 0.2s var(--ease); }

/* v54: warmte-momenten. Het blaadje op Klaar (elke sessie = een blaadje op
   je pad, dezelfde bladtaal als het Dagboek), de extra regel op Vandaag na
   een sessie, en de terugkeer-groet na een stille periode. */
.done-mark-leaf svg { display: block; margin: 0 auto; }
.done-compact-extra {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.terug-groet {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-soft);
}

/* v54: kalme sessie-entree - het sessie-scherm mag iets trager landen dan de
   rest (vast openings-ritme; het volledige ritueel is bewust geparkeerd). */
.in-sessie .fade-in { animation-duration: 1s; }

/* ============================================================
   Spiegel (mirror - log/calendar)
   ============================================================ */

.spiegel-summary {
  text-align: center;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-6);
}

.spiegel-count {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 200;
  color: var(--accent);
  line-height: 1;
  font-variation-settings: "opsz" 72;
}

.spiegel-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-top: var(--sp-2);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
}

.cal-dot {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  position: relative;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), background 0.2s var(--ease);
}
.cal-dot:hover, .cal-dot:focus-visible { transform: scale(1.18); border-color: var(--leaf); }

/* De waterfill in de SVG doet al het werk. De bol-achtergrond blijft uniform
   (alleen 'today' krijgt een ring + lichte highlight). */
.cal-dot.done { /* niets extra - SVG-waterfill vertelt het verhaal */ }

.cal-dot.today {
  /* Iets dikker (1.5px) maar transparant accent - zachte gloed, geen harde
     ring. Volgt het thema-accent (salie) via --accent-rgb. */
  border: 1.5px solid rgba(var(--accent-rgb), 0.45);
  background: var(--surface-elevated);
}

.cal-dot.future {
  background: transparent;
  border-style: dashed;
  opacity: 0.45;
}

.cal-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.log-entry {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
}

.log-entry:last-child {
  border-bottom: 0;
}

.log-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-bottom: var(--sp-2);
}

.log-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.log-reflection {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
  font-style: italic;
  /* v40.4: enters en spaties uit het schrijfvak behouden bij het terugzien */
  white-space: pre-wrap;
  /* v38: user-content kan lange woorden/links bevatten - nooit laten overflowen */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   Avond-check-in (v40.5) - rustige pop-up, drie korte vragen
   ============================================================ */
.avond-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.avond-overlay.in { opacity: 1; }
.avond-card {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(16px);
  transition: transform 0.24s ease;
}
.avond-overlay.in .avond-card { transform: translateY(0); }
@media (min-width: 520px) {
  .avond-overlay { align-items: center; }
}
.avond-intro {
  color: var(--text-soft);
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: var(--fs-base);
}
.avond-vraag { margin-bottom: var(--sp-5); }
.avond-vraag-label {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--text);
  font-size: var(--fs-base);
}
.avond-chips {
  /* v54: gelijke chip-breedtes in een rustig grid - de ongelijk brekende
     rijen (3+2, 4, 2+2+1) oogden rommelig in een "korte" check-in */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--sp-2);
}
.avond-chip {
  text-align: center;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-soft);
  color: var(--text-soft);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.avond-chip.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.avond-notitie { margin: var(--sp-2) 0 var(--sp-4); }
.avond-acties { margin-top: var(--sp-4); }
.avond-skip {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--sp-3);
}
.avond-waarom { margin-top: var(--sp-5); }
.avond-klaar { text-align: center; padding: var(--sp-6) var(--sp-3); }
.avond-klaar p { color: var(--text-soft); margin-top: var(--sp-2); }

.steun-card .steun-tekst {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  margin: var(--sp-3) 0 var(--sp-3);
}
.steun-bron {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--text-mute);
  margin-top: var(--sp-2);
}
.steun-card .steun-doe { margin: var(--sp-3) 0 var(--sp-2); }
.steun-keuze { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.steun-acties {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.steun-acties .tiny-link { text-align: left; }
.steun-sluit { color: var(--text-mute); }

/* Boekenplank (v44) - getekende kaften op een plank, in de app-stijl.
   Vaste 3-koloms grid zodat de spacing/centratie netjes in de container valt;
   align-items stretch houdt alle kaften in een rij even hoog. */
.boek-titel { margin-bottom: 2px; }
.boek-auteur {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: var(--sp-5);
}
.boek-kern {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: var(--sp-5);
}
.boek-ideeen {
  margin: var(--sp-2) 0 var(--sp-5);
  padding-left: 1.1em;
}
.boek-ideeen li {
  margin-bottom: var(--sp-2);
  line-height: 1.55;
}
.boek-tips {
  margin: var(--sp-2) 0 0;
  padding-left: 1.1em;
}
.boek-tips li {
  margin-bottom: var(--sp-2);
  line-height: 1.6;
}
.boek-oef { margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
.boek-bron { margin-top: var(--sp-3); }
.boek-controle { margin-top: var(--sp-4); }
.boek-controle ul { margin: var(--sp-2) 0 0; padding-left: 1.1em; }
.boek-controle li { margin-bottom: var(--sp-1); line-height: 1.5; }

.boek-kern-blok { margin-bottom: var(--sp-5); }
.boek-kern-blok .kicker { display: block; margin-bottom: var(--sp-2); }
.boek-kern-blok .boek-kern { margin: 0; }
.boek-refl { margin-top: var(--sp-5); }
.boek-refl-intro { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-3); }
.boek-refl .reflection-input { margin-bottom: var(--sp-3); }

.boek-suggestie { margin: var(--sp-6) 0 var(--sp-4); }
.boek-suggestie-intro { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-3); }
.boek-suggestie-input { margin-bottom: var(--sp-3); }
.boek-suggestie-status { font-size: var(--fs-sm); min-height: 1.2em; margin-top: var(--sp-2); color: var(--text-soft); }
.idee-tag-boek { background: var(--leaf-soft); color: var(--accent-strong); }

/* Boek-vinder (v46): typ je behoefte -> boek-advies */
.boek-vinder { margin: var(--sp-4) 0 var(--sp-5); }
.boek-vinder-intro { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-3); }
.boek-vinder-rij { display: flex; gap: var(--sp-2); }
.boek-vinder-input { flex: 1; min-width: 0; }
.boek-vinder-rij .btn { flex: 0 0 auto; }
.boek-vinder-resultaat { margin-top: var(--sp-3); }
.boek-vinder-kop { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-2); }
.boek-vinder-leeg { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.boek-vinder-treffer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.boek-vinder-treffer:hover { border-color: var(--accent-soft); }
.boek-vinder-titel { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text); line-height: 1.2; }
.boek-vinder-auteur { font-size: var(--fs-xs); color: var(--text-mute); }

/* Oefeningen (v47): vinder + categorie-tegels met zacht lijn-motief */
.oef-vinder { margin: var(--sp-4) 0 var(--sp-5); }
.oef-vinder-intro { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-3); }
.oef-vinder-rij { display: flex; gap: var(--sp-2); }
.oef-vinder-input { flex: 1; min-width: 0; }
.oef-vinder-rij .btn { flex: 0 0 auto; }
.oef-vinder-resultaat { margin-top: var(--sp-3); }
.oef-vinder-kop { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-2); }
.oef-vinder-leeg { font-size: var(--fs-sm); margin-top: var(--sp-2); }

.oef-rooster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.oef-tegel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-2);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.oef-tegel:hover, .oef-tegel:focus-visible { border-color: var(--accent-soft); transform: translateY(-2px); }
.oef-tegel-motief { color: var(--leaf); display: block; }
.oef-tegel-motief svg { width: 42px; height: 42px; display: block; }
.oef-tegel-naam { font-family: var(--font-display); font-size: var(--fs-sm); line-height: 1.15; color: var(--text); }
.oef-tegel-aantal { font-size: var(--fs-label); color: var(--text-mute); }

/* v57.1: rustig startscherm - één gecentreerde as. Begroeting + de quote van de
   dag vormen samen de hero; daaronder vier gelijke tegels in een 2x2-raster met
   gecentreerde labels. Eén compositie, geen losse blokken. */
.start {
  padding-top: var(--sp-5);
  text-align: center;
}
.start-groet {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 var(--sp-5);
}
.start-tegels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.start-tegel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 116px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-3);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.start-tegel:hover, .start-tegel:focus-visible {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.25);
}
.start-tegel-naam { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.15; color: var(--text); }
.start-tegel-sub { font-size: var(--fs-label); color: var(--text-mute); line-height: 1.3; letter-spacing: 0.02em; }
/* De Vandaag-tegel draagt je ene ding: net iets meer aanwezigheid dan de rest. */
.start-tegel-vandaag { border-color: var(--accent-soft); background: var(--leaf-soft); }
.start-tegel-vandaag .start-tegel-sub { color: var(--accent); }

.oef-lijst { margin: var(--sp-4) 0; }
.verken-cat-titel { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.verken-cat-titel .verken-titel { margin: 0; }
.verken-cat-motief { color: var(--leaf); flex: 0 0 auto; }
.verken-cat-motief svg { width: 32px; height: 32px; display: block; }

/* Over jou (v40.6) - levend portret */
.overmij-portret { margin-top: var(--sp-4); }
.overmij-blok {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.overmij-blok:last-child { border-bottom: none; }
.overmij-zin {
  margin-top: var(--sp-2);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.overmij-syncnote { min-height: 1.2em; margin-top: var(--sp-2); }

/* "In je eigen woorden" (v42.9): je verbatim schetsen, teruggespiegeld in
   serif-cursief = leest als een persoonlijk citaat, warm en duidelijk anders
   dan de afgeleide zinnen. Regelopmaak van wat je schreef blijft behouden. */
.ew-intro { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.ew-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  margin: var(--sp-3) 0 var(--sp-2);
}
.ew-date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.ew-eerder { margin-top: var(--sp-4); }
.ew-eerder-item { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.ew-eerder-item .ew-quote { font-size: var(--fs-base); }
.ew-details { margin-top: var(--sp-4); }
.ew-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-2); }
.ew-summary::-webkit-details-marker { display: none; }
.ew-summary::after { content: '+'; font-size: var(--fs-md); color: var(--text-mute); line-height: 1; }
.ew-details[open] .ew-summary::after { content: '-'; }
.ew-qa-item { margin-top: var(--sp-4); }
.ew-qa-vraag { display: block; font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: var(--sp-1); }

/* ============================================================
   Info / Settings
   ============================================================ */

.info-section {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--hairline);
}

.info-section:last-child {
  border-bottom: 0;
}

.info-section h3 {
  margin-bottom: var(--sp-3);
}

.info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* Inklapbaar blok (instellingen: sync / jouw data) */
.fold { border-bottom: 1px solid var(--hairline); }
.fold-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fold-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.fold-chevron {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-mute);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.fold-head.open .fold-chevron { transform: rotate(90deg); color: var(--accent); }
.fold-body { padding-bottom: var(--sp-5); }

/* Segmented control (tekstgrootte in instellingen) - hairline-stijl, salie
   voor de actieve keuze, één rustige rij. */
.seg {
  display: inline-flex;
  margin-top: var(--sp-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hairline);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:not(.actief):hover { color: var(--text); background: var(--surface-elevated); }
.seg-btn.actief { background: var(--accent); color: var(--bg); }

/* Dagelijkse-oefening categorie-chips (multi-select, per toestel) */
.dagcat-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.dagcat-chip {
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-mute);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dagcat-chip:hover { border-color: var(--accent-soft); }
.dagcat-chip.actief {
  background: var(--leaf-soft);
  border-color: var(--accent-soft);
  color: var(--text);
}

/* Toggle-switch (geluid in instellingen) */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.switch-label { font-size: var(--fs-base); color: var(--text-soft); }
.switch {
  position: relative;
  width: 48px; height: 28px;
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--text-mute);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on .switch-knob { transform: translateX(20px); background: var(--bg); }
.switch:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* ============================================================
   Bottom bar
   ============================================================ */

.bottom-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  border-top: 1px solid var(--hairline);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
}

/* ============================================================
   Welkomstscherm (A)
   ============================================================ */

.welkom { padding-top: var(--sp-4); }

.welkom-titel {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--sp-6);
}
.welkom-groet {
  color: var(--text);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-5);
}
.welkom-punten { margin-bottom: var(--sp-7); }
.welkom-punten p {
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
  line-height: 1.6;
}
.welkom-mini { margin-top: var(--sp-3); font-size: var(--fs-xs); }

/* Spiegel-glimp op Klaar (C) */
.done-glimp {
  text-align: center;
  margin: var(--sp-6) 0;
}
.glimp-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.glimp-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
}
.glimp-dot.done { background: var(--accent); border-color: var(--accent); }
.glimp-tekst { font-size: var(--fs-sm); color: var(--text-mute); }

/* Spanning-schaal (D) */
.tension-block { margin: var(--sp-5) 0; }
.optional-inline {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: 0;
}
.tension-row {
  display: flex;
  gap: 4px;
  margin-top: var(--sp-3);
}
.tension-dot {
  flex: 1;
  aspect-ratio: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tension-dot:hover { border-color: var(--accent-soft); }
.tension-dot.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.tension-delta {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--accent);
  text-align: center;
}

/* ============================================================
   Tiny-ingang + tiny-scherm + sr-only + auto-grow
   ============================================================ */

.tiny-link {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: var(--sp-3) 0;
  margin-top: var(--sp-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-strong);
  transition: color 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tiny-link:hover, .tiny-link:focus-visible {
  color: var(--accent);
}

.tiny-intro { margin-bottom: var(--sp-5); }
.tiny-big {
  font-size: var(--fs-md);
  line-height: 1.6;
  padding: var(--sp-5);
}

.auto-grow {
  overflow: hidden;
  resize: none;
}

/* Screen-reader-only live region */
.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;
}

/* ============================================================
   Animations
   ============================================================ */

.fade-in {
  animation: fadeIn 0.6s var(--ease);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Breath guide (for 4-7-8 and box breathing)
   ============================================================ */

.breath-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-5) 0 var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hairline);
}

.breath-circle {
  width: 160px;
  height: 160px;
  border: 1.5px solid var(--accent-soft);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  transform: scale(0.8);
  transition: transform 1s var(--ease), border-color 1s var(--ease), background 1s var(--ease);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%);
}

.breath-circle.breath-in {
  transform: scale(1.25);
  border-color: var(--accent-strong);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 70%);
}

.breath-circle.breath-hold {
  transform: scale(1.25);
  border-color: var(--accent);
}

.breath-circle.breath-out {
  transform: scale(0.8);
  border-color: var(--accent-soft);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.03) 0%, transparent 70%);
}

.breath-circle.breath-empty {
  transform: scale(0.8);
  border-color: var(--hairline-strong);
}

.breath-round {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-top: var(--sp-4);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Avond-ankers
   ============================================================ */

.ankers {
  margin-top: var(--sp-3);
}

.ankers-sub {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin: 0 0 var(--sp-3);
  line-height: 1.5;
}

.anker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.anker:hover {
  border-color: var(--accent-soft);
}

.anker.done {
  background: var(--surface-elevated);
  border-color: var(--accent-soft);
}

.anker-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--bg);
  transition: all 0.2s var(--ease);
}

.anker.done .anker-check {
  background: var(--accent);
  border-color: var(--accent);
}

.anker-body {
  display: flex;
  flex-direction: column;
}

.anker-naam {
  font-size: var(--fs-base);
  color: var(--text);
  font-weight: 500;
}

.anker.done .anker-naam {
  color: var(--text-soft);
}

.anker-hint {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin-top: 1px;
}

/* ============================================================
   Done-compact (Vandaag when exercise already done)
   ============================================================ */

.done-compact {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-4);
}

.done-compact-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.done-compact-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
}

.done-compact-sub {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin-top: 2px;
}

/* ============================================================
   Misc utility classes used by JS
   ============================================================ */

.src-line { margin-top: var(--sp-5); }
.cal-note { margin-top: var(--sp-3); }
.stack-top { margin-top: var(--sp-6); }
.close-btn { margin-top: var(--sp-6); }
.free-note { margin-bottom: var(--sp-5); }
.free-hint { margin-top: var(--sp-3); }
.free-done-note { margin: var(--sp-3) 0 var(--sp-2); }

/* ============================================================
   Sync settings (optioneel, in Over-scherm)
   ============================================================ */

/* v53: de losse "optioneel"-badges zijn vervangen door de groepskop
   "Persoonlijk" met één ondertitel - vier caps-badges onder elkaar
   lazen als ruis. */

.sync-form { margin-top: var(--sp-4); }

.text-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  transition: border-color 0.2s var(--ease);
}

.text-input:focus {
  outline: none;
  border-color: var(--accent-soft);
}

.text-input::placeholder {
  color: var(--text-mute);
  font-family: var(--font-body);
}

.sync-status {
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
}

/* ============================================================
   Verken - bibliotheek (lezen/leren)
   ============================================================ */

.verken-intro { margin-bottom: var(--sp-6); }

.verken-titel {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 72;
  margin-bottom: var(--sp-3);
}

.verken-cat { border-bottom: 1px solid var(--hairline); }
.verken-cat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  padding: var(--sp-4) var(--sp-1);
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.verken-cat-label {
  flex: 1;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-label);
  color: var(--accent);
}
.verken-cat-count {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-mute);
}
.verken-cat-chevron {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-mute);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.verken-cat-head.open .verken-cat-chevron { transform: rotate(90deg); color: var(--accent); }
.verken-cat-body { padding-bottom: var(--sp-4); }
.verken-cat-body .lib-card:last-child { margin-bottom: 0; }

.lib-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
  text-align: left;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.lib-card:hover, .lib-card:focus-visible {
  border-color: var(--accent-soft);
  background: var(--surface-elevated);
}

.lib-card-naam {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}

.lib-card-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

.lib-card-intro {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
  margin-top: var(--sp-1);
}

.verken-back {
  text-align: left;
  width: auto;
  margin: 0 0 var(--sp-4);
  text-decoration: none;
}

.verken-back-btn { margin-top: var(--sp-5); }

.verken-bron-full {
  font-size: var(--fs-xs);
  line-height: 1.5;
  margin-top: var(--sp-2);
  font-style: italic;
}

/* v40.7: situatie-oefening - rustige toelichting waarom 'ie geen dagopdracht is. */
.verken-situatie {
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: var(--sp-2) 0 var(--sp-4);
}

.verken-bottom { margin-top: var(--sp-7); }

/* ============================================================
   Spiegel-trend (spanning vóór→ná over tijd)
   ============================================================ */

.spiegel-trend { padding: var(--sp-2) 0; }

.trend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-4) 0 var(--sp-3);
}

.trend-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trend-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 200;
  line-height: 1;
  color: var(--text-soft);
  font-variation-settings: "opsz" 72;
}

.trend-num-after { color: var(--accent); }

.trend-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-top: var(--sp-2);
}

.trend-arrow {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent-soft);
}

.trend-duiding {
  text-align: center;
  color: var(--accent);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}

/* ============================================================
   v10 - tandwiel, dagelijkse quote, quote-archief, rating
   ============================================================ */

/* Sticky app-header: dag/nacht links · logo midden · tandwiel rechts.
   Grid met vaste zijkolommen → het logo blijft exact gecentreerd, ook als het
   tandwiel verborgen is op sub-schermen. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  width: 100%;
  /* Volle breedte, gespiegeld aan de footer (.bottom-bar): zelfde bg + hairline. */
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  background: var(--bg-soft);
  border-bottom: 1px solid var(--hairline);
}

/* Woordmerk: letters volgen de themakleur (--text), het blaadje blijft salie
   (--leaf, hetzelfde groen als 'Je pad' + Kompas). Eén logo, switcht vanzelf. */
.app-brand {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
  height: 40px;            /* gelijk aan de knoppen → balk compact, alles op één hoogte */
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  background: none;        /* v57: het logo is nu een knop (terug naar start) */
  border: 0;
  padding: 0;
  cursor: pointer;
}
.app-brand-word { display: block; }
.app-brand-sprout {
  display: block;
  flex: none;
  width: 0.9em;
  height: 1.06em;
  color: var(--leaf);
  transform: translateY(-0.04em);
  overflow: visible;
}

.gear {
  grid-column: 3;
  justify-self: end;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  transition: color 0.25s var(--ease), transform 0.5s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.gear:hover, .gear:focus-visible { color: var(--accent); transform: rotate(45deg); }

/* Dag/nacht-knopje links, spiegelt het tandwiel rechts */
.theme-fab {
  grid-column: 1;
  justify-self: start;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  transition: color 0.25s var(--ease), transform 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.theme-fab:hover, .theme-fab:focus-visible { color: var(--accent); transform: scale(1.12); }

/* Dagelijkse quote op Vandaag (v39.4: de "gedachte van vandaag" als rustig
   leesbaar middelpunt). Roman i.p.v. cursief - onderzoek: cursief leest
   trager en met lagere herkenning; roman + groter + meer contrast laat de
   gedachte makkelijker landen. Een kalm aanhalingsteken markeert 'm als
   citaat en zet 'm los van de begroeting eronder. */
.dagquote-wrap {
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
}
.dagquote {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0 var(--sp-3) var(--sp-4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* v57.2: de gedachte van de dag klapt zijn eigen uitleg uit als je erop tikt
   (native details/summary), net als in het archief. Geen losse "wat wordt
   hiermee bedoeld?"-regel meer - dat brak de rust van het startscherm. */
.dagquote-fold > summary.dagquote { list-style: none; }
.dagquote-fold > summary.dagquote::-webkit-details-marker { display: none; }
.dagquote-uitleg-blok { padding: 0 var(--sp-2) var(--sp-2); }
.dagquote-uitleg { text-align: center; max-width: 30rem; margin: 0 auto; }
.dagquote-archief {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.quote-uitleg {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: left;
}
.dagquote-tekst {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: var(--text);
  font-variation-settings: "opsz" 36;
}
.dagquote-tekst::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 0.5;
  margin-bottom: var(--sp-3);
  color: var(--accent-soft);
}
@media (min-width: 380px) {
  .dagquote-tekst { font-size: 1.3rem; }
}
.dagquote-bron {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-top: var(--sp-4);
  transition: color 0.2s var(--ease);
}
.dagquote:hover .dagquote-bron, .dagquote:focus-visible .dagquote-bron { color: var(--accent); }

/* Quote-archief (Gedachten) */
.quote-list { margin-top: var(--sp-5); }
.quote-entry { padding: var(--sp-5) 0; border-bottom: 1px solid var(--hairline); }
.quote-entry:last-child { border-bottom: 0; }
.quote-entry-date {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-bottom: var(--sp-2);
}
.quote-entry.quote-today .quote-entry-date { color: var(--accent); }
.quote-entry-tekst {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  font-variation-settings: "opsz" 28;
}
.quote-entry-bron { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--sp-2); }

/* Rating (sterren) - op het klaar-scherm */
.rating-block { margin-bottom: var(--sp-2); }
.rating { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.rating-star {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--hairline-strong);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-1) 0;
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.rating-star.on { color: var(--accent); }
.rating-star:hover, .rating-star:focus-visible { transform: scale(1.18); }

/* Rating-weergave in de Spiegel-historie */
.log-rating { color: var(--accent); font-size: var(--fs-xs); letter-spacing: 3px; margin-bottom: var(--sp-2); }
.log-rating-off { color: var(--hairline-strong); }

/* ============================================================
   v14 - klikbare historie + dag-detail (terugkijken)
   ============================================================ */

/* Oefening-historie als klikbare knop */
.log-entry-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s var(--ease);
}
.log-entry-btn .log-title { transition: color 0.15s var(--ease); }
.log-entry-btn:hover .log-title, .log-entry-btn:focus-visible .log-title { color: var(--accent); }

/* Dag-detail */
.dag-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-soft);
  text-align: center;
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-2);
  font-variation-settings: "opsz" 28;
}
.dag-quote-bron {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-top: var(--sp-3);
}
.dag-sectie {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.dag-sectie .kicker { margin-bottom: var(--sp-2); }
.dag-spanning { margin-top: var(--sp-2); }
.dag-ankers { list-style: none; padding: 0; margin: 0; }
.dag-ankers li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.dag-ankers li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.dag-readonly { margin-top: var(--sp-2); }

/* ============================================================
   v17 - rust-gloed, ademveld, micro-momenten
   ============================================================ */

/* Achtergrond-gloed: continue, traag ademende warme gloed achter alles.
   Onderzoek: continue beweging kaapt geen aandacht (Abrams & Christ 2003),
   dus géén harde start; diffuse drift i.p.v. uitdijen (geen looming). */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(38% 48% at 24% 28%, var(--glow-a), transparent 70%),
    radial-gradient(44% 54% at 79% 74%, var(--glow-b), transparent 72%);
  transition: opacity 1.2s var(--ease);
  will-change: opacity, transform;
}
html[data-ambience="on"] body::before {
  opacity: 1;
  animation: ademGloed 16s ease-in-out infinite;
}
/* Tijdens een sessie wijkt de gloed - het ademveld is dan de enige beweging. */
html[data-ambience="on"].in-sessie body::before { animation: none; opacity: 0.28; }

@keyframes ademGloed {
  0%, 100% { opacity: 0.7; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(1.5%, -1.5%); }
}

/* Ademveld (canvas) achter de label-cirkel */
.breath-stage {
  position: relative;
  width: 300px; height: 300px;
  max-width: 78vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.breath-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* Met canvas-ademveld is de cirkel alleen nog het rustige label-anker
   (geen eigen scale-beweging - het canvas doet de adem). */
.breath-stage.canvas-on .breath-circle {
  width: 150px; height: 150px;
  border-color: transparent;
  background: none;
  transform: none;
  transition: opacity 1s var(--ease);
}

/* Zelf-tekenend vinkje bij afvinken van een anker */
.anker-check svg { display: block; }
.check-draw {
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  animation: drawCheck 0.42s var(--ease) forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* Klaar-scherm: eenmalige zachte bloei + uitdijende rimpel rond de punt */
.done-mark {
  position: relative;
  animation: doneBloei 1.5s var(--ease) both;
}
.done-mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  opacity: 0;
  animation: doneRipple 1.9s var(--ease) 0.2s forwards;
}
@keyframes doneBloei {
  0% { opacity: 0; transform: scale(0.4); }
  55% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes doneRipple {
  0% { transform: scale(0.3); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ============================================================
   v18 - adem-focus: ademgids full-screen met fase, ademweg, aftelling
   ============================================================ */

/* De drie info-regels in de kern van het ademveld */
.breath-phase {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-label);
  color: var(--accent);
}
.breath-count {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--text);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: tabular-nums;
}
.breath-count:empty { display: none; }
.breath-via {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-soft);
  min-height: 1em;
}

/* Focus-modus: bij start neemt de ademgids het hele scherm; de rest wijkt. */
.adem-focus #app { justify-content: center; }
.adem-focus #app > *:not(.breath-guide):not(.stack) { display: none; }
.adem-focus .breath-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
}
.adem-focus .breath-stage {
  width: min(84vw, 380px);
  height: min(84vw, 380px);
  max-width: none;
}
.adem-focus .breath-phase { font-size: var(--fs-xs); }
.adem-focus .breath-count { font-size: 3.2rem; }
.adem-focus .breath-via { font-size: var(--fs-base); }
.adem-focus .breath-round { margin-top: var(--sp-6); }
.adem-focus .stack { margin-top: var(--sp-7); width: 100%; }

/* ============================================================
   Reduced motion respect
   ============================================================ */

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

/* ============================================================
   v19 - Het Kompas, Schrijf het van je af, Je pad
   Natuur-groen (sage) gevlochten in het almanak-DNA.
   ============================================================ */

/* Kicker-variant in blad-groen (kompas + pad) */
.kicker-leaf { color: var(--leaf); }

/* --- Kompas: de vijf staten-chips (op het eigen #kompas-scherm) --- */
.kompas-chips {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.kompas-chip {
  /* v54: hint onder het label - een leesrichting, gelijke kaart-hoogtes
     (links-rechts brak bij lange labels, juist op een onrustig moment) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--leaf-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-4);
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.kompas-chip:hover, .kompas-chip:focus-visible {
  border-color: var(--hairline-strong);
  border-left-color: var(--leaf);
  background: var(--surface-elevated);
}
.kompas-chip-label {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 400;
}
.kompas-chip-hint {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

/* v39.6: stille uitgangen onder de dag-inhoud (Kompas + gedachten-dump) -
   rustig gecentreerd, ondergeschikt aan de dagoefening erboven. */
/* v39.8: onderste cluster - ingeklapt Dagelijks ritme + de twee uitgangen,
   links uitgelijnd en dicht op elkaar zodat er geen lege band of zwevend
   label ontstaat (puur hairline-minimaal, geen kaarten). */
.vandaag-onder .ankers-fold { margin-bottom: var(--sp-4); }

/* --- Ideeën-bak: type-keuze + tags --- */
.idee-typekeuze {
  display: flex;
  gap: var(--sp-2);
}
.idee-typebtn {
  flex: 1;
  padding: var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.idee-typebtn:hover, .idee-typebtn:focus-visible {
  border-color: var(--hairline-strong);
}
.idee-typebtn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-elevated);
}
.idee-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.idee-meta .log-date { margin-bottom: 0; }
.idee-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 100px;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  color: var(--text-mute);
}
.idee-tag-app {
  color: var(--accent);
  border-color: var(--accent-soft);
}
.idee-tag-done {
  color: var(--success);
  border-color: var(--success);
}
/* v37: eerlijk statusje op een inzending - je punt is bij de maker aangekomen */
.idee-tag-sent {
  color: var(--text-soft);
  border-color: var(--hairline);
}
/* v53: even eerlijk als het NIET is aangekomen (definitief geweigerd) */
.idee-tag-failed {
  color: var(--warn);
  border-color: var(--warn);
}
/* v37: gebruikers-inbox van de eigenaar - dropdown per gebruiker */
.inbox-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.inbox-uitleg { margin-top: var(--sp-1); }
.inbox-groep { margin-top: var(--sp-2); }
.inbox-groep .idee-archief-toggle { margin-top: var(--sp-2); }
.inbox-groep-id {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-soft);
}
.inbox-groep-count {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--text-soft);
}
.idee-gedaan { opacity: 0.66; }
.idee-gedaan .log-reflection { text-decoration: line-through; text-decoration-color: var(--hairline); }
.idee-done-note {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  margin-top: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--hairline);
}
/* Afvink-knop per item - rustige ghost-link, niet schreeuwerig */
.idee-check {
  margin-top: var(--sp-3);
  background: none;
  border: none;
  padding: var(--sp-2) 0; /* v38: groter raakvlak voor de duim */
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--text-mute);
  cursor: pointer;
}
.idee-check:hover, .idee-check:focus-visible { color: var(--accent); }
/* Inklapbaar archief */
.idee-archief-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-5);
  background: none;
  border: none;
  border-top: 1px solid var(--hairline);
  padding: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--text-soft);
  cursor: pointer;
}
.idee-archief-caret { color: var(--text-mute); font-size: var(--fs-xs); }
.idee-archief.is-collapsed { display: none; }

/* --- Kompas: voorstel-scherm --- */
.kompas-duiding {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: var(--sp-6);
}

.kompas-voorstel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
/* AI-Kompas (v56) */
.kompas-slim { margin-top: var(--sp-4); }
.vinder-slim { margin-top: var(--sp-3); }
.ai-form { margin-top: var(--sp-4); }
.slim-uit { margin-top: var(--sp-4); }
.slim-bericht {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  color: var(--text);
  line-height: 1.6;
}
.slim-bezig { padding: var(--sp-5) 0; }
.kompas-voorstel .kicker { margin-bottom: var(--sp-2); }
.kompas-voorstel-naam {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.kompas-voorstel-intro {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: var(--sp-5);
}

.kompas-alt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  color: var(--text-soft);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.kompas-alt:hover, .kompas-alt:focus-visible {
  border-color: var(--hairline-strong);
  color: var(--text);
}
.kompas-alt-cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}
.kompas-alt-naam { font-size: var(--fs-base); }

.kompas-droplink { margin-top: var(--sp-3); }
.kompas-bodem { margin-top: var(--sp-6); line-height: 1.6; }

/* --- Schrijf het van je af --- */
.drop-input { min-height: 9.5rem; }
.drop-klaar-note { margin-bottom: var(--sp-5); line-height: 1.6; }

/* --- Je pad (Spiegel) --- */
.pad-blok {
  text-align: center;
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-6);
}
.pad-blok .kicker { margin-bottom: var(--sp-2); }
.pad-svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
}
.pad-tekst {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text);
  margin-top: var(--sp-2);
}
.pad-sub {
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
}

/* --- Dag-detail: kompas-regels --- */
.dag-checkin {
  font-size: var(--fs-base);
  color: var(--text-soft);
  padding: var(--sp-1) 0;
}

/* ============================================================
   v19.7 - Spiegel rustiger: kalender-header met maand-range +
   inline detail van geselecteerde dag (vervangt lange logs).
   ============================================================ */

/* Kalender-header: kop + maand-range op één lijn, rustig */
.cal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.cal-header h3 { margin: 0; }
.cal-range {
  font-family: var(--font-mono);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-xs);
  color: var(--text-mute);
  white-space: nowrap;
}

/* Geselecteerde dag (niet vandaag): hele dunne neutrale ring */
.cal-dot.selected {
  border: 1px solid var(--hairline-strong);
  background: var(--surface-elevated);
}

/* Inline dag-detail: compact dagboek-blok onder de kalender */
.inline-day {
  /* v48.5: het dag-activiteiten-blok als één subtiele kaart (thema-token, dus
     ook netjes in donker), zodat het als bij-elkaar-horend geheel leest. */
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.inline-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.inline-day-head .kicker-leaf { margin: 0; }
.inline-day-date {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text);
  font-style: italic;
}
.inline-day-sec { padding: var(--sp-2) 0 var(--sp-3); }
.inline-day-sec + .inline-day-sec {
  border-top: 1px dashed var(--hairline);
  margin-top: var(--sp-1);
}
.inline-day-sec .kicker { margin-bottom: var(--sp-2); }
.inline-day-leeg {
  padding: var(--sp-4) 0;
  font-style: italic;
}
/* v48.4: dag-activiteiten als gesloten dropdowns in dezelfde fold-stijl als
   Instellingen/Dagelijks ritme (label + chevron), via native <details>. */
.dag-fold { border-bottom: 1px solid var(--hairline); }
.dag-fold:last-of-type { border-bottom: 0; }
.dag-fold summary { list-style: none; }
.dag-fold summary::-webkit-details-marker { display: none; }
.dag-fold .fold-chevron { flex: none; }
.dag-fold[open] .fold-chevron { transform: rotate(90deg); color: var(--accent); }

/* ============================================================
   v24 - pull-to-refresh, dagboek-slot, ideeën-sync
   ============================================================ */

/* Pull-to-refresh: klein symbool dat 1:1 met je vinger meebeweegt.
   Opacity heeft een transition; transform bewust niet (volgt de vinger). */
.ptr {
  position: fixed;
  top: calc(-44px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  color: var(--text-mute);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.ptr.ptr-visible { opacity: 1; }
.ptr.ptr-ready { color: var(--accent); border-color: var(--hairline-strong); }
.ptr.ptr-busy svg { animation: ptr-spin 0.9s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr.ptr-busy svg { animation: none; }
}

/* Dagboek-slot: rustig ontgrendel-scherm, code-invoer met brede cijfers */
.slot-scherm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) 0;
  text-align: center;
}
.slot-input {
  max-width: 180px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  padding-left: calc(0.5em + 12px); /* compenseert letter-spacing rechts van het laatste cijfer */
}
.slot-fout { font-style: italic; }
.slot-shake { animation: slot-shake 0.45s var(--ease); }
@keyframes slot-shake {
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .slot-shake { animation: none; }
}

/* Ideeën-scherm: handmatige vault-push + status op één regel */
.idee-sync {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}

/* ============================================================
   v25 - "Wat is er nieuw"-scherm
   ============================================================ */

.update-blok h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.update-datum {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  font-style: normal;
  color: var(--text-mute);
  white-space: nowrap;
}
.update-lijst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.update-lijst li {
  padding-left: var(--sp-4);
  position: relative;
}
.update-lijst li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: var(--leaf);
}

/* ============================================================
   v26 - naam/begroeting, ideeën bewerken, eigen kleur, install-keuze
   ============================================================ */

/* Begroeting op Vandaag - klein persoonlijk moment, geen kop */

/* Naam-vraag op het welkomstscherm */
.welkom-naam {
  margin: var(--sp-5) 0;
  text-align: left;
}
.welkom-naam-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}
.welkom-naam-sub { margin-top: var(--sp-2); margin-bottom: 0; }

/* Ideeën: actie-rij (bewerk + afvinken) en bewerk-veld */
.idee-acties {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
}
.idee-edit {
  margin-top: var(--sp-3);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--text-mute);
  cursor: pointer;
}
.idee-edit:hover, .idee-edit:focus-visible { color: var(--accent); }
.idee-edit-area { margin-top: var(--sp-2); }

/* Gedachten: bewerk- en verwijderknoppen (v28) */
.drop-entry { margin-bottom: var(--sp-4); }
/* v33: gedachten als losse tijdsblokken - tijdstip boven, eigen regelopmaak behouden */
.drop-blok { margin-bottom: var(--sp-4); }
.drop-blok:last-child { margin-bottom: 0; }
.drop-tijd {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-bottom: var(--sp-1);
}
.drop-tekst {
  white-space: pre-wrap;
  font-style: normal;
}
/* v47.2: instellingen - uitleg per instelling in een uitklap (zoals .drop-waarom) */
/* v53: instellingen-cohesie - groepskopjes, één rij-anatomie, link-rijen */
.inst-groep {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin: var(--sp-7) 0 var(--sp-1);
}
h1.verken-titel + .inst-groep { margin-top: var(--sp-4); }
.inst-groep-sub { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.inst-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.inst-title-block { margin-bottom: var(--sp-3); }
.switch-row.inst-row { margin-top: 0; }
.inst-toggle .switch-row.inst-row { padding: var(--sp-2) 0; }
.inst-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.inst-link-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.inst-toggle .inst-uitleg { margin-top: var(--sp-2); }
.inst-uitleg summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-soft);
}
.inst-uitleg summary::-webkit-details-marker { display: none; }
.inst-uitleg summary::before { content: "+ "; }
.inst-uitleg[open] summary::before { content: "- "; }
.inst-uitleg p {
  margin-top: var(--sp-2);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-soft);
}

.drop-waarom {
  margin-top: var(--sp-5);
}
.drop-waarom summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-soft);
}
.drop-waarom summary::-webkit-details-marker { display: none; }
.drop-waarom summary::before { content: "+ "; }
.drop-waarom[open] summary::before { content: "- "; }
.drop-waarom p {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-soft);
}
.drop-acties {
  display: flex;
  flex-wrap: wrap; /* v38: smalle schermen - knoppen mogen onder elkaar */
  gap: var(--sp-4);
  align-items: baseline;
}
.drop-edit, .drop-delete {
  margin-top: var(--sp-2);
  background: none;
  border: none;
  padding: var(--sp-2) 0; /* v38: groter raakvlak voor de duim */
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--text-mute);
  cursor: pointer;
}
.drop-edit:hover, .drop-edit:focus-visible,
.drop-delete:hover, .drop-delete:focus-visible { color: var(--accent); }
.drop-edit-area { margin-top: var(--sp-2); }
.btn-small { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
/* v53: var(--radius) bestond niet (alleen -sm/-md/-lg) waardoor de knop
   vierkant terugviel; nu gewoon het knop-token + thema-kleuren. */
.btn-danger { background: var(--danger); color: var(--bg); border: none; border-radius: var(--radius-md); cursor: pointer; }
.btn-danger:hover, .btn-danger:focus-visible { opacity: 0.88; }

/* Eigen accentkleur - curated zachte staaltjes (geen vrije, felle kiezer) */
.kleur-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.kleur-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.kleur-swatch:hover, .kleur-swatch:focus-visible { transform: scale(1.1); }
.kleur-swatch.actief {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text-mute);
}
.kleur-vink {
  color: #fff;
  font-size: var(--fs-xs);
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.kleur-swatch.actief .kleur-vink { opacity: 1; }
.kleur-status { font-size: var(--fs-sm); }

/* Install-keuze: rustige sheet onderin, eenmalig */
.install-sheet {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  width: min(calc(100% - 2 * var(--sp-4)), 440px);
  z-index: 70;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.install-sheet.install-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.install-titel {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}
.install-sub { color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.install-acties { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (prefers-reduced-motion: reduce) {
  .install-sheet { transition: opacity 0.35s var(--ease); transform: translateX(-50%); }
}

/* ============================================================
   Toegankelijkheid - zichtbare focus voor toetsenbord-navigatie.
   Alleen :focus-visible (toetsenbord), dus muis/touch blijft schoon.
   v53: één generieke regel i.p.v. de handmatige v38-opsomming - die
   liep bij elk nieuw element achter (ankers, chips misten hun ring).
   :where() houdt de specificiteit laag zodat een bewuste uitzondering
   (zoals [tabindex="-1"] hieronder) altijd wint.
   ============================================================ */
:where(button, [role="button"], a, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

/* v39.5: koppen krijgen na elke schermwissel programmatisch focus (zie render()
   in app.js) zodat schermlezer/toetsenbord op de juiste plek landen. Ze zijn
   alléén focusbaar via tabindex="-1" (niet tabbaar), dus de browser-standaard
   focus-rand eromheen is ongewenst - die las als een "kader" om de titel. We
   onderdrukken 'm; echte tab-navigatie naar knoppen/links houdt z'n ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}


/* ============================================================
   v54 - visuele rust: quote-archief zonder feed-gevoel, ster naast
   de oefening-titel, en het lichtere welkom.
   ============================================================ */

/* Quote-archief: tik de gedachte zelf aan voor de uitleg */
.quote-tap summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quote-tap summary::-webkit-details-marker { display: none; }
.quote-uitleg-hint {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.quote-tap[open] .quote-uitleg-hint { display: none; }
.quote-tap .quote-uitleg {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.6;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-soft);
}

/* Oudere maanden dichtgeklapt: het archief voelt eindig */
.quote-maand { border-top: 1px solid var(--hairline); margin-top: var(--sp-5); }
.quote-maand > summary.fold-head { padding: var(--sp-4) 0; }
.quote-maand[open] > summary .fold-chevron { transform: rotate(90deg); }
.quote-maand .fold-chevron { transition: transform 0.2s var(--ease); }

/* Oefening-detail: ster naast de titel i.p.v. een brede knop */
.detail-titel-rij {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.detail-titel-rij .exercise-title { flex: 1; margin-bottom: 0; }
.fav-toggle.fav-ster {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  margin-top: 4px;
}
.fav-toggle.fav-ster .fav-star { font-size: 1.25rem; }
.fav-toggle.fav-ster.on { border-color: var(--accent-soft); }
.fav-toggle.fav-ster.on .fav-star { color: var(--accent); }

/* Welkom: het contract in een rustige fold */
.welkom-meer { margin-top: var(--sp-2); }

/* v54.2: de vier tabs in een oogopslag op het welkom */
.welkom-tabs {
  margin: var(--sp-4) 0;
  display: grid;
  gap: var(--sp-2);
  text-align: left;
}
.welkom-tab {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.welkom-tab:last-child { border-bottom: 0; }
.welkom-tab-naam {
  flex-shrink: 0;
  min-width: 96px;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
}
.welkom-tab-uitleg { font-size: var(--fs-sm); color: var(--text-soft); }

/* v54.2: eenmalige tab-uitleg (verdwijnt voorgoed na de eerste keer) */
.tab-hint {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--leaf-soft);
  font-size: var(--fs-sm);
  margin: var(--sp-3) 0 var(--sp-5);
}

/* v54.5: rest van de intro + waarom samen in een uitleg-blok */
.science-note p { margin: 0 0 var(--sp-3); }
.science-note p:last-child { margin-bottom: 0; }