/* =========================================================================
   PillChill — "Kalm" design system
   Eén accent · 3 gewichten (500/650/800) · 4 radii · 44 px tikdoelen
   ========================================================================= */

/* Zelf hosten (strikte CSP, geen Google-request): zet Nunito[wght].woff2 in /fonts.
   Zonder bestand valt alles netjes terug op de systeemletter. */
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito.woff2") format("woff2-variations"), url("fonts/Nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Kleur — interface */
  --bg: #F5F3EF;
  --surface: #FFFFFF;
  --sunken: #EFECE6;
  --line: #E5E1D9;
  --ink: #1C1A21;
  --ink-2: #5E5868;        /* secundaire tekst · 6,2:1 op --bg */
  --ink-3: #6E6878;        /* placeholder, iconen · 4,8:1 op --bg */
  --accent: #5641D9;       /* actie + selectie, niets anders */
  --accent-soft: #EEEBFC;
  --on-accent: #FFFFFF;
  --danger: #B83A33;
  --danger-soft: #FBEAE8;
  --ok: #2E8A68;           /* bewogen, streefgewicht */
  --glass: rgb(255 255 255 / .85);
  --scrim: rgb(28 26 33 / .45);
  --muted: var(--ink-2);   /* legacy-alias (privacy.html) */
  --soft: var(--accent-soft);

  /* Kleur — betekenis van de gebruiker */
  --m1: #E9736B; --m2: #F2A262; --m3: #EDC84F; --m4: #8ACB74; --m5: #4DBF9C;
  --on-mood: #2A2230;
  --on-pill: #24212B;
  --missed: #A9A5B2;

  /* Typografie */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-regular: 500; --w-medium: 650; --w-bold: 800;
  --t-display: 32px/36px; --t-title: 22px/28px; --t-heading: 17px/24px;
  --t-body: 16px/24px; --t-label: 15px/20px; --t-caption: 13px/18px; --t-micro: 11px/14px;

  /* Ruimte (4 px-raster) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px;

  /* Vorm */
  --r-sm: 10px; --r-md: 14px; --r-lg: 24px; --r-full: 999px;
  --tap: 44px;             /* minimum tikdoel */
  --control: 48px;         /* knoppen en velden */

  /* Diepte */
  --shadow-1: 0 1px 2px rgb(28 26 33 / .04), 0 8px 24px -16px rgb(28 26 33 / .18);
  --shadow-2: 0 16px 40px -16px rgb(28 26 33 / .32);

  /* Beweging */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.2, .8, .2, 1.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121117; --surface: #1C1B22; --sunken: #16151B; --line: #2C2A33;
    --ink: #F2F0F6; --ink-2: #B4AFBE; --ink-3: #948FA0;
    --accent: #A99DFF; --accent-soft: #2A2545; --on-accent: #16132B;
    --danger: #FF8F86; --danger-soft: #3A1F22; --ok: #5FD1AA;
    --glass: rgb(28 27 34 / .82); --scrim: rgb(0 0 0 / .55);
    --missed: #6E6878;
    --shadow-1: none; --shadow-2: 0 16px 40px -16px rgb(0 0 0 / .6);
  }
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: var(--w-regular) var(--t-body) var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2 { margin: 0; font-weight: var(--w-bold); }
ul { list-style: none; margin: 0; padding: 0; }
a { color: var(--accent); font-weight: var(--w-medium); }
svg.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--ink-2); font-size: 14px; }

main {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--s6)) var(--s4) calc(env(safe-area-inset-bottom) + 112px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}

/* ---------- Kop ---------- */
.top { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: var(--s2); padding: var(--s1) var(--s1) var(--s3); }
.top h1 { font: var(--w-bold) var(--t-display) var(--font); letter-spacing: -.03em; }
.top h1::first-letter { text-transform: uppercase; }
.eyebrow { margin: 0 0 var(--s1); color: var(--ink-2); font-size: 15px; font-weight: var(--w-medium); }
.eyebrow::first-letter { text-transform: uppercase; }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 22px; line-height: 1;
}
.link { min-height: var(--tap); padding: 0 var(--s1); color: var(--accent); font-weight: var(--w-bold); font-size: 15px; }
.eyebrow .link { min-height: 0; padding: 0; }

/* ---------- Kaarten ---------- */
.card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); }
.card-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); min-height: 24px; }
.card-h h2 { font: var(--w-bold) var(--t-heading) var(--font); letter-spacing: -.01em; }
.card-h > :nth-child(2) { margin-left: auto; }
.count {
  height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent); font-weight: var(--w-bold); font-size: 13px; font-variant-numeric: tabular-nums;
}
.progress { height: 6px; border-radius: var(--r-full); background: var(--sunken); overflow: hidden; margin-bottom: var(--s1); }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s var(--ease); }

/* ---------- Pillen ---------- */
.cap {
  flex: none; width: 34px; height: 16px; margin: 0 2px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c) 50%, color-mix(in oklab, var(--c) 35%, white) 50%);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .1), 0 0 0 1px rgb(0 0 0 / .06);
  transform: rotate(-35deg);
}
.pill-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; }
.pill-row + .pill-row { border-top: 1px solid var(--line); }
.grow { flex: 1; min-width: 0; }
.grow b { display: block; font-weight: var(--w-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow small { display: block; color: var(--ink-2); font: var(--w-regular) var(--t-caption) var(--font); }
.grow small svg.i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.slots { display: flex; gap: var(--s2); }
.slot {
  width: var(--tap); height: var(--tap); border-radius: var(--r-full);
  display: grid; place-items: center;
  border: 2px dashed var(--c);
  color: var(--ink-2); font-size: 13px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
  transition: transform .15s var(--ease);
}
.slot:active { transform: scale(.9); }
.slot.on { border-style: solid; background: var(--c); color: var(--on-pill); }
.slot.late { border-style: solid; border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.grow small.late-txt { color: var(--danger); font-weight: var(--w-medium); }
.slot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pop { animation: pop .35s var(--ease-pop); }
@keyframes pop { from { transform: scale(.7); } }

.empty { text-align: center; padding: var(--s2) 0; }
.empty p { color: var(--ink-2); margin: 0 0 var(--s4); }

/* ---------- Stemming ---------- */
.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: var(--s1); }
.mood { color: var(--ink-3); border-radius: var(--r-full); transition: box-shadow .2s var(--ease); }
.mood svg { display: block; width: 100%; }
.mood .bg { fill: var(--sunken); transition: fill .2s; }
.mood .feat { fill: currentColor; }
.mood .mouth { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.mood.on { color: var(--on-mood); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--m); }
.mood.on .bg { fill: var(--m); }
@media (hover: hover) { .mood:not(.on):hover .bg { fill: color-mix(in oklab, var(--m) 30%, var(--sunken)); } }
.mini { display: inline-block; width: 28px; vertical-align: middle; }
.mini.on { box-shadow: none; }

/* ---------- Gewicht ---------- */
.weight { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.round {
  width: var(--control); height: var(--control); border-radius: var(--r-full);
  background: var(--sunken); font-size: 24px; font-weight: var(--w-medium);
  transition: transform .15s var(--ease);
}
.round:active { transform: scale(.92); }
.wval { display: flex; align-items: baseline; gap: var(--s1); }
.wval input {
  width: 4.4ch; border: 0; background: none; padding: 0; text-align: right;
  font: var(--w-bold) 44px/48px var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.wval input::-webkit-inner-spin-button, .wval input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wval input:focus-visible { outline: none; box-shadow: 0 2px 0 var(--accent); }
.wval span { color: var(--ink-2); font-size: 17px; font-weight: var(--w-medium); }
.wval.ghost input { color: var(--ink-3); }
.ghost-btn { display: block; min-height: var(--tap); margin: var(--s2) auto 0; padding: 0 var(--s4); color: var(--accent); font-size: 15px; font-weight: var(--w-bold); }

/* ---------- Activiteiten ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0 14px; border-radius: var(--r-full); background: var(--sunken);
  font-size: 15px; font-weight: var(--w-medium);
}
button.chip:active { background: var(--accent-soft); }
/* Activiteit-tegels (Vandaag): rustig raster i.p.v. een wolk pillen */
.act-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.act-tile {
  display: grid; justify-items: center; align-content: center; gap: 6px;
  min-height: 84px; padding: var(--s1) 2px; border-radius: var(--r-md);
  border: 0; background: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
/* Activiteit-icoon: Tabler-glyph in een vulcirkel, zelfde taal als de smileys */
.act-ico { display: block; width: 48px; height: 48px; flex: none; color: var(--ink-3); }
.act-ico .bg { fill: var(--sunken); transition: fill .15s; }
.act-ico .gl { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.act-ico .gl [fill=currentColor] { fill: currentColor; }
.act-ico.sm { width: 32px; height: 32px; }
.logged .act-ico .bg { fill: var(--surface); }
.logged .act-ico { color: var(--accent); }
.act-title { display: flex; align-items: center; gap: var(--s3); }
.act-tile b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: var(--w-medium); color: var(--ink-2); }
@media (hover: hover) { button.act-tile:hover .act-ico .bg { fill: var(--accent-soft); } button.act-tile:hover .act-ico { color: var(--accent); } }
button.act-tile:active { transform: scale(.94); }
button.act-tile:active .act-ico .bg { fill: var(--accent); }
button.act-tile:active .act-ico { color: var(--on-accent); }
/* Beheer: zelfde tegel, niet klikbaar, met verwijderknop in de hoek (44 px tikvlak) */
.act-tile.static { position: relative; }
.act-tile.static .x { position: absolute; top: -8px; right: calc(50% - 44px); width: var(--tap); height: var(--tap); display: grid; place-items: center; font-size: 0; background: none; }
.act-tile.static .x::before {
  content: "×"; width: 22px; height: 22px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--sunken); color: var(--ink-2); font-size: 16px; line-height: 1; box-shadow: 0 0 0 2px var(--surface);
}
.act-tile.static .x:active::before { background: var(--danger-soft); color: var(--danger); }
.logged { margin-bottom: var(--s3); display: grid; gap: var(--s2); }
.logged li { display: flex; align-items: center; gap: var(--s3); min-height: var(--control); padding: 0 var(--s1) 0 14px; background: var(--accent-soft); border-radius: var(--r-md); }
.logged li b { font-weight: var(--w-bold); font-size: 15px; }
.logged li .muted { margin-left: auto; }
.x { width: var(--tap); height: var(--tap); border-radius: var(--r-full); color: var(--ink-2); font-size: 20px; flex: none; }
.chip .x { width: 40px; margin-right: -14px; font-size: 18px; }

/* ---------- Tabbalk ---------- */
.tabs {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--s4)); transform: translateX(-50%);
  display: flex; gap: var(--s1); padding: 6px; border-radius: var(--r-full);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}
.tabs button {
  height: var(--tap); display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4);
  border-radius: var(--r-full); color: var(--ink-2); font-size: 14px; font-weight: var(--w-bold); white-space: nowrap;
}
.tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tabs [aria-current="page"] { background: var(--accent); color: var(--on-accent); }

/* ---------- Sheet (dialog) ---------- */
dialog {
  border: 0; width: min(480px, 100%); max-width: 100%; max-height: 92dvh; overflow: auto;
  margin: auto auto 0; padding: var(--s6) var(--s5) calc(env(safe-area-inset-bottom) + var(--s6));
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-2);
}
dialog[open] { animation: sheet .28s var(--ease); }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
dialog::backdrop { background: var(--scrim); }
@media (min-width: 600px) { dialog { margin: auto; border-radius: var(--r-lg); } }
dialog h2 { font: var(--w-bold) var(--t-title) var(--font); letter-spacing: -.02em; margin-bottom: var(--s2); }

/* ---------- Velden ---------- */
.field { display: grid; gap: 6px; margin-top: var(--s4); }
.field span, legend { font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); }
.field input, .field select, .inline input, .inline select, .add-act input {
  min-height: var(--control); padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg); font-size: 16px; width: 100%;
}
.field input:focus-visible, .inline :is(input, select):focus-visible, .add-act input:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--surface);
}
.hint { font: var(--w-regular) var(--t-caption) var(--font); color: var(--ink-2); margin: 6px 0 0; }
fieldset { border: 0; padding: 0; margin: var(--s6) 0 0; min-width: 0; }
legend { padding: 0; margin-bottom: 10px; }

.swatches { display: grid; grid-template-columns: repeat(5, var(--tap)); justify-content: space-between; gap: var(--s3); }
.sw { position: relative; width: var(--tap); height: var(--tap); border-radius: var(--r-full); background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.sw input { appearance: none; position: absolute; inset: 0; margin: 0; border-radius: 50%; cursor: pointer; }
.sw:has(:checked) { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.sw:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }

/* Segment (pillen) */
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; min-height: 40px; margin: 2px 0; padding: 0 14px;
  border-radius: var(--r-full); background: var(--sunken); font-weight: var(--w-medium); font-size: 15px;
}
.seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub { margin-top: var(--s3); }

/* Segment (ingebed, tweede niveau) — class "inset" op .seg */
.seg.inset { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s1); border-radius: var(--r-md); background: var(--sunken); }
.seg.inset span { justify-content: center; min-height: 36px; margin: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); }
.seg.inset input:checked + span { background: var(--surface); color: var(--ink); font-weight: var(--w-bold); box-shadow: 0 1px 2px rgb(28 26 33 / .12); }

/* Schakelaar — <label class="switch-row">…<input type="checkbox" role="switch"></label> */
.switch-row { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 14px; border-radius: var(--r-md); background: var(--bg); font-size: 15px; font-weight: var(--w-medium); margin-top: var(--s3); }
.switch-row > span { flex: 1; }
.switch-row svg.i { color: var(--accent); }
input[role="switch"] {
  appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0; border-radius: var(--r-full);
  background: var(--line); cursor: pointer; transition: background .2s var(--ease);
}
input[role="switch"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .2s var(--ease);
}
input[role="switch"]:checked { background: var(--accent); }
input[role="switch"]:checked::after { transform: translateX(20px); }

#pf:not(:has([name=per][value=day]:checked, [name=per][value=custom]:checked)) .per-day,
#pf:not(:has([name=per][value=week]:checked)) .per-week,
#pf:not(:has([name=per][value=month]:checked)) .per-month,
#pf:not(:has([name=per][value=custom]:checked)) .per-custom,
#pf:not(:has([name=dose][value=custom]:checked)) .dose-custom { display: none; }
.inline { display: flex; align-items: center; gap: var(--s2); font-weight: var(--w-medium); }
.inline input { width: 80px; }
.inline select { width: auto; }

/* ---------- Knoppen ---------- */
.row { display: flex; gap: var(--s3); margin-top: var(--s6); }
.btn {
  flex: 1; min-height: var(--control); padding: 0 var(--s4); border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: var(--w-bold); text-align: center;
  transition: transform .15s var(--ease), filter .15s;
}
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--sunken); color: var(--ink); }
.btn.danger { flex: none; background: none; color: var(--danger); padding: 0 var(--s2); }
.row > .btn.danger:only-child, details .btn.danger, .btn.danger.solid { flex: 1; background: var(--danger-soft); padding: 0 var(--s4); }
.btn.small { display: inline-flex; flex: none; min-height: var(--tap); }

/* ---------- Lijsten (Beheer) ---------- */
.list-btn { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s2) 0; text-align: left; }
li + li > .list-btn { border-top: 1px solid var(--line); }
.chev { color: var(--ink-3); font-size: 22px; }
/* Nieuwe activiteit: [icoon ▾] [naam] [+] */
.add-act { display: flex; gap: var(--s2); margin-top: var(--s3); }
.add-act input { min-width: 0; flex: 1; }
.add-act .btn.add { flex: none; width: var(--control); padding: 0; }
.btn.add .i { width: 24px; height: 24px; }
/* Icoonkiezer: native <select>. Met base-select (Chrome/Edge/Safari 27) een raster van iconen; anders een gewone lijst met namen. */
.ico-select { flex: none; max-width: 40%; min-height: var(--control); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
@supports (appearance: base-select) {
  .ico-select, .ico-select::picker(select) { appearance: base-select; }
  .ico-select { display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s2) 0 var(--s1); cursor: pointer; }
  .ico-select::picker-icon { color: var(--ink-3); }
  .ico-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ico-select selectedcontent { display: flex; }
  .ico-select selectedcontent .act-ico { width: 40px; height: 40px; }
  .ico-select :is(selectedcontent, option) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ico-select::picker(select) { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
  /* alleen bij :open — display op de dichte picker maakt hem altijd zichtbaar */
  .ico-select:open::picker(select) { display: grid; grid-template-columns: repeat(5, var(--tap)); gap: var(--s2); }
  .ico-select option { position: relative; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border-radius: var(--r-full); cursor: pointer; }
  .ico-select option::checkmark { display: none; }
  .ico-select option .act-ico { width: 44px; height: 44px; }
  .ico-select option:is(:hover, :focus-visible) .act-ico .bg { fill: var(--accent-soft); }
  .ico-select option:is(:hover, :focus-visible) .act-ico { color: var(--accent); }
  .ico-select option:checked .act-ico .bg { fill: var(--accent); }
  .ico-select option:checked .act-ico { color: var(--on-accent); }
  .ico-select option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
.note { font: var(--w-regular) var(--t-caption) var(--font); color: var(--ink-2); margin: var(--s3) 0 0; }
.file { position: relative; overflow: hidden; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Terugblik ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.stat { background: var(--bg); border-radius: var(--r-md); padding: var(--s3); display: grid; gap: 6px; }
.stat b { display: block; font-size: 22px; line-height: 28px; font-weight: var(--w-bold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat small { color: var(--ink-2); font-size: 13px; font-weight: var(--w-medium); }
.spark { display: block; width: 100%; height: 96px; overflow: visible; }
.spark .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .ar { fill: var(--accent-soft); }
.spark .goal { stroke: var(--ok); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.goal-key { display: inline-block; width: 16px; border-top: 2px dashed var(--ok); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.two .field { margin-top: 0; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.times .field { margin-top: 0; margin-bottom: var(--s2); }
#pf:has([name=times][value="1"]:checked) :is(.t2, .t3, .t4),
#pf:has([name=times][value="2"]:checked) :is(.t3, .t4),
#pf:has([name=times][value="3"]:checked) .t4,
#pf:not(:has([name=per][value=day]:checked, [name=per][value=custom]:checked)) :is(.t2, .t3, .t4) { display: none; }

/* ---------- Inloggen, toestemming, ontgrendelen ---------- */
body.gate .tabs { display: none; }
body.gate main { padding-bottom: calc(env(safe-area-inset-bottom) + var(--s8)); }
.hero { display: grid; justify-items: center; gap: var(--s4); text-align: center; padding-top: 6vh; }
.hero h1 { font: var(--w-bold) var(--t-display) var(--font); letter-spacing: -.03em; margin: 0; }
.hero h2 { font: var(--w-bold) var(--t-heading) var(--font); margin: var(--s3) 0 0; }
.hero img { border-radius: 22px; box-shadow: var(--shadow-2); }
.lead { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 24px; max-width: 34ch; }
.usp { display: grid; gap: var(--s4); text-align: left; margin: var(--s1) 0; width: 100%; background: var(--surface); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); }
.usp li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 15px; line-height: 21px; }
.usp li > span:first-child, .usp svg.i { color: var(--accent); flex: none; }
.logins { display: grid; gap: 10px; width: min(340px, 100%); margin-top: var(--s1); }
.login-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 var(--s5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
  font-size: 16px; font-weight: var(--w-bold);
}
.login-btn svg { width: 19px; height: 19px; flex: none; }
.login-btn.apple { background: #000; color: #fff; border-color: #000; }
@media (prefers-color-scheme: dark) { .login-btn.apple { background: #fff; color: #000; border-color: #fff; } }
.gate-form { justify-items: stretch; text-align: left; }
.gate-form > h1, .gate-form > .lead, .gate-form > img { justify-self: center; text-align: center; }
.gate-form .field { margin-top: 0; }
.gate-form .row { margin-top: var(--s2); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: 15px; line-height: 21px; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.check b { font-weight: var(--w-bold); }
.error { margin: 0; color: var(--danger); font-weight: var(--w-medium); font-size: 14px; }
.error:empty { display: none; }
details.note summary { cursor: pointer; color: var(--accent); font-weight: var(--w-bold); min-height: var(--tap); display: flex; align-items: center; justify-content: center; }
details .btn { margin-top: var(--s1); }
.hero > .note { margin: 0; }

/* ---------- Kalender ---------- */
.cal-card { padding: var(--s4) 10px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal .wd { text-align: center; font: var(--w-bold) var(--t-micro) var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 6px; }
.cal-day { position: relative; min-height: 60px; border-radius: var(--r-sm); padding: 0; text-align: left; transition: transform .15s var(--ease); }
.cal-day:active { transform: scale(.94); }
.cal-day.has { background: var(--bg); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.today .num { color: var(--accent); }
.cal-day:disabled { opacity: .35; }
.cal-day .num { position: absolute; top: 6px; left: 6px; font-size: 12px; font-weight: var(--w-bold); line-height: 1; }
.cal-day .mini { position: absolute; top: 4px; right: 4px; width: 15px; }
.mps { position: absolute; left: 6px; top: 22px; bottom: 7px; display: flex; flex-flow: column wrap; align-content: flex-start; justify-content: flex-end; gap: 3px; }
.mp { display: inline-block; width: 12px; height: 5px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1.5px var(--missed); }
.mp.on { background: var(--c); box-shadow: none; }
.act-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.cal-day .act-dot { position: absolute; right: 6px; bottom: 7px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s3) 6px 0; font-size: 13px; color: var(--ink-2); }
.legend .mp:not(:first-child), .legend .act-dot { margin-left: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}