/* =========================================================================
   Vandaag — visueel systeem.

   Signatuur: papier en inkt. Een warm-neutraal vlak, haarlijnen in plaats van
   kaders, en één rustige groene inkt voor alles wat van jou een handeling
   vraagt. Amber is gereserveerd voor precies één ding: het dagdeel waar je
   nú in zit.

   Drie regels waar alles op terugvalt:
   1. Diepte komt uit lagen en haarlijnen, niet uit schaduwen.
   2. Elk componenttype heeft een eigen vorm. Een periode is geen taak, een
      status is geen knop.
   3. De app hertekent zichzelf volledig bij elke wijziging, dus overgangen
      werken niet vanzelf. Alleen wat nét bijkwam animeert, via een eenmalige
      klasse die render() daarna weer wist.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- papier en inkt ---- */
  --paper: #f4f4f0;
  --paper-2: #ecece6;
  --raise: #fbfbf8;
  --ink: #161a16;
  --ink-2: #454b44;
  --ink-3: #62685f;
  --rule: rgba(22, 26, 22, 0.11);
  --rule-soft: rgba(22, 26, 22, 0.06);

  /* ---- groene inkt: handelingen, actief, afgerond ---- */
  --accent: #2c6249;
  --accent-strong: #234e3a;
  --accent-wash: #e4ece6;
  --accent-line: rgba(44, 98, 73, 0.32);

  --focus: #42658c;
  --focus-wash: #e8edf2;
  /* Op zijn eigen zachte ondergrond haalde #946223 maar 4,37:1; een tint
     dieper brengt de maaltijdteksten boven 4,5. */
  --meal: #855518;
  --meal-wash: #f2eadf;
  --rest: #68716d;
  --rest-wash: #e9ecea;

  /* ---- amber: uitsluitend "nu" en aandacht ---- */
  --now: #8a5a1c;
  --now-wash: #f3ebdd;
  --now-line: rgba(138, 90, 28, 0.3);

  /* ---- rood: alleen verwijderen en te vol ---- */
  --alert: #9c3a2c;
  --alert-wash: #f6e6e3;

  --veil: rgba(244, 244, 240, 0.82);
  --scrim: rgba(20, 24, 20, 0.34);
  --lift: 0 18px 48px -24px rgba(20, 26, 20, 0.4);
  --lift-sheet: 0 -24px 60px -20px rgba(20, 26, 20, 0.42);

  /* ---- ruimte: ritme, geen raster ---- */
  --gap-in: 10px;      /* binnen één taak */
  --gap-row: 0px;      /* tussen taken: haarlijn doet het werk */
  --gap-block: 26px;   /* tussen periodes */
  --gap-section: 40px; /* rond belangrijke acties */
  --pad-x: 22px;

  /* ---- typografie ---- */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --t-micro: 10px;
  --t-meta: 12px;
  --t-body: 15px;
  --t-row: 16px;
  --t-lead: 19px;
  --t-title: 25px;
  --t-display: clamp(34px, 9.2vw, 46px);

  /* ---- beweging ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 0.68, 0, 1);
  --ease-spring: cubic-bezier(0.3, 1.35, 0.5, 1);
  --fast: 130ms;
  --base: 240ms;
  --slow: 420ms;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f110f;
    --paper-2: #171a17;
    --raise: #1b1f1b;
    --ink: #eceee9;
    --ink-2: #adb3a9;
    --ink-3: #8b9189;
    --rule: rgba(236, 238, 233, 0.13);
    --rule-soft: rgba(236, 238, 233, 0.07);

    --accent: #74b592;
    --accent-strong: #8ec8a8;
    --accent-wash: rgba(116, 181, 146, 0.14);
    --accent-line: rgba(116, 181, 146, 0.34);

    --focus: #8eb6df;
    --focus-wash: rgba(142, 182, 223, 0.13);
    --meal: #ddb070;
    --meal-wash: rgba(221, 176, 112, 0.13);
    --rest: #aab2ae;
    --rest-wash: rgba(170, 178, 174, 0.12);

    --now: #d5a463;
    --now-wash: rgba(213, 164, 99, 0.14);
    --now-line: rgba(213, 164, 99, 0.34);

    --alert: #e2705d;
    --alert-wash: rgba(226, 112, 93, 0.14);

    --veil: rgba(15, 17, 15, 0.84);
    --scrim: rgba(0, 0, 0, 0.58);
    --lift: 0 18px 48px -24px rgba(0, 0, 0, 0.9);
    --lift-sheet: 0 -24px 60px -20px rgba(0, 0, 0, 0.85);
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  /* De schermwissel schuift 16px opzij; dat mag nooit een balk onderin geven. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
  letter-spacing: inherit;
}

button {
  color: inherit;
  transition: background-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              opacity var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Kleine functionele labels: kapitaal, ruim gespatieerd, nooit een pil. */
.now-badge,
.item-title em,
.settings-title {
  font-size: var(--t-micro);
  font-weight: 640;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ------------------------------- beweging ------------------------------- */

@keyframes slide-from-right {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes slide-from-left {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes unfold {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes row-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheet-in {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: none; }
}

@keyframes sheet-out {
  from { transform: none; }
  to { transform: translate3d(0, 100%, 0); }
}

/* Afvinken: de ring vult zich en zakt één keer in. Geen stuiterende bel. */
@keyframes seal {
  0% { transform: scale(1); }
  38% { transform: scale(0.82); }
  100% { transform: scale(1); }
}

/* Het "nu"-teken ademt één keer wanneer het dagdeel wisselt. */
@keyframes breathe {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes toast-life {
  0% { opacity: 0; transform: translate3d(-50%, -14px, 0); }
  9%, 88% { opacity: 1; transform: translate3d(-50%, 0, 0); }
  100% { opacity: 0; transform: translate3d(-50%, -8px, 0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

.shell.is-enter.from-right { animation: slide-from-right var(--base) var(--ease-out); }
.shell.is-enter.from-left { animation: slide-from-left var(--base) var(--ease-out); }

/* --------------------------------- casco -------------------------------- */

.shell {
  width: min(100%, 720px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) var(--pad-x) calc(116px + env(safe-area-inset-bottom));
}

.compact-bar {
  position: fixed;
  z-index: 15;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(50px + env(safe-area-inset-top));
  padding: 0 var(--pad-x) 9px;
  border-bottom: 1px solid transparent;
  background: var(--veil);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease-out);
}

.compact-bar.visible {
  opacity: 1;
  transform: none;
  border-bottom-color: var(--rule);
}

.compact-title {
  max-width: min(calc(100% - 70px), 676px);
  overflow: hidden;
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.014em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-time {
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 0 14px;
}

.topbar > div:first-child { min-width: 0; }

.eyebrow {
  margin: 0 0 4px;
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* De begroeting is het enige echt persoonlijke moment op het scherm. */
.topbar h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 8vw, 42px);
  font-weight: 480;
  line-height: 1.02;
  letter-spacing: -0.022em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Eén klein geheugensteuntje in Vandaag. De capsule blijft staan nadat hij
   is afgevinkt; alleen het aandachtspunt verdwijnt, zodat de handeling ook
   eenvoudig ongedaan kan worden gemaakt. */
.today-pill {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  margin-top: 1px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 15px;
  background: var(--raise);
  color: var(--accent);
  cursor: pointer;
}

.pill-symbol {
  position: relative;
  display: block;
  width: 25px;
  height: 12px;
  overflow: hidden;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  transform: rotate(-38deg);
}

.pill-symbol::before {
  position: absolute;
  inset: -1px 50% -1px -1px;
  background: currentColor;
  content: "";
}

.pill-symbol::after {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1.5px;
  background: currentColor;
  content: "";
}

.pill-alert {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--alert);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.today-pill.taken { color: var(--ink-3); opacity: 0.7; }
.today-pill:active { transform: scale(0.96); }

.plan-in-button {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 13px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 680;
  cursor: pointer;
}

.plan-in-button:active { transform: scale(0.97); }

.icon-button,
.add-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink-3);
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1;
  cursor: pointer;
}

.icon-button.small {
  width: 40px;
  height: 40px;
  border-color: transparent;
  color: var(--ink-3);
  font-size: 20px;
}

.add-button {
  border-color: transparent;
  background: var(--accent);
  color: var(--paper);
  font-size: 21px;
  font-weight: 400;
}

/* -------------------------- status en meldingen ------------------------- */

.today-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 560;
  letter-spacing: 0.01em;
}

.today-intro > div {
  display: grid;
  grid-template-columns: 6px 1fr;
  align-items: center;
  gap: 1px 8px;
}

.today-intro > div strong {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transition: background-color var(--base) var(--ease);
}

.status-dot.offline { background: var(--now); }

.day-plan-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--paper);
  font-size: 16px;
  font-weight: 680;
  cursor: pointer;
}

.day-plan-button span { font-size: 17px; }
.day-plan-button:active { transform: scale(0.985); }

.plan-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--now);
  border-radius: 0 12px 12px 0;
  background: var(--now-wash);
  color: var(--now);
}

.plan-alert.quiet { border-left-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.plan-alert > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.plan-alert strong { font-size: 14px; font-weight: 680; }
.plan-alert span { color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.plan-alert button {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.plan-alert-actions { display: flex; flex-direction: row !important; gap: 0 !important; }

.weekly-goals {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.week-goal {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid var(--focus);
  border-radius: 14px;
  background: var(--focus-wash);
}

.week-goal-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.week-goal-copy > span { color: var(--focus); font-size: 10px; font-weight: 740; letter-spacing: 0.12em; text-transform: uppercase; }
.week-goal strong { font-size: 15px; font-weight: 650; }
.week-goal small { color: var(--ink-2); font-size: 12px; line-height: 1.35; }
.week-goal button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  background: var(--focus);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.week-goal-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.week-goal-state { max-width: 104px; color: var(--focus); font-size: 11px; font-weight: 700; line-height: 1.3; text-align: right; }
.week-goal.complete { border-color: var(--accent); background: var(--accent-wash); }
.week-goal.complete .week-goal-copy > span,
.week-goal-state.complete { color: var(--accent); }
.week-goal button:active { opacity: 0.65; transform: none; }

/* Een melding is geen kaart maar een genoteerde regel. */
.assumption {
  width: 100%;
  margin: 0 0 12px;
  padding: 15px 16px 15px 17px;
  border: 0;
  border-left: 2px solid var(--now-line);
  border-radius: 0 10px 10px 0;
  background: var(--now-wash);
  color: var(--now);
  text-align: left;
}

.assumption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding-block: 8px;
  font-size: var(--t-meta);
  font-weight: 620;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.assumption:active { transform: none; opacity: 0.7; }
.assumption > span:last-child { font-size: 15px; opacity: 0.55; }

/* Eén blijvend overzicht van de hele dag. Het plakt pas wanneer de gebruiker
   erlangs scrolt en vervangt dan de grote kop. */
.day-overview {
  position: sticky;
  z-index: 14;
  top: env(safe-area-inset-top);
  width: calc(100% + (2 * var(--pad-x)));
  margin: 0 calc(var(--pad-x) * -1) 10px;
  padding: 7px var(--pad-x) 6px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule);
  background: var(--veil);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}

.day-now-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--ink-2);
  font-size: 12px;
}

.day-now-line > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--now);
}

.day-now-line strong { color: var(--now); font-weight: 680; }
.day-now-line small { margin-left: auto; color: var(--ink-2); font-size: 12px; }

.day-overview-parts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.day-overview-parts::before {
  content: "";
  position: absolute;
  right: 11%;
  bottom: 5px;
  left: 11%;
  height: 1px;
  background: var(--rule);
}

.day-overview-part {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 1px 8px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.day-overview-part span {
  overflow: hidden;
  max-width: 100%;
  font-size: 12px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-overview-part strong {
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.day-overview-part::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
}

.day-overview-part.current { color: var(--now); }
.day-overview-part.current strong { color: var(--now); }
.day-overview-part.current::after { border-color: var(--now); background: var(--now); }
.day-overview-part:active { opacity: 0.58; transform: none; }

/* -------------------------------- periodes ------------------------------ */
/* Een periode is een blok in een kolom, geen los zwevend kaartje. */

.dayparts {
  position: relative;
  display: flex;
  flex-direction: column;
}

.dayparts::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 12px;
  width: 1px;
  background: var(--rule);
}

.daypart {
  position: relative;
  scroll-margin-top: calc(88px + env(safe-area-inset-top));
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  transition: background-color var(--base) var(--ease);
}

.daypart:first-child { border-top: 0; }

/* Alleen de kop krijgt nadruk. De huidige periode wordt geen los scherm. */
.daypart.current {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.daypart.current + .daypart { border-top-color: var(--rule-soft); }

.daypart-head {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 0 14px;
  width: 100%;
  min-height: 68px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.daypart-head:active { transform: none; }
.daypart-head:active .daypart-title strong { opacity: 0.6; }

/* Het nummer staat in de kantlijn, als paginering. */
.step-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 460;
  font-variant-numeric: lining-nums;
  color: var(--ink-3);
  transition: color var(--base) var(--ease);
}

.current .step-number { border-color: var(--now); background: var(--now); color: var(--paper); }

.daypart-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.daypart-title strong {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 480;
  line-height: 1.1;
  letter-spacing: -0.016em;
  transition: opacity var(--fast) var(--ease);
}

.current .daypart-title strong { color: var(--now); font-weight: 560; }

.daypart-title small {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-state {
  display: flex;
  min-width: 50px;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.part-state > strong {
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.current .part-state > strong { color: var(--now); }

.part-cue {
  display: flex;
  min-height: 16px;
  align-items: center;
  gap: 9px;
}

/* "nu" is een gemarkeerd woord met een stip, geen pil. */
.now-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  color: var(--now);
}

.now-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--now);
  animation: breathe 620ms var(--ease-spring) backwards;
}

/* Chevron met de hand getekend: één dunne hoek, optisch uitgelijnd. */
.chevron {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--ink-3);
  border-right: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  opacity: 0.8;
  transition: transform var(--base) var(--ease-out), opacity var(--fast) var(--ease);
}

.daypart.open .chevron {
  transform: rotate(135deg) translate(-2px, -2px);
  opacity: 0.5;
}

.daypart-body { padding: 0 0 8px; }
.daypart-body.is-enter { animation: unfold var(--base) var(--ease-out); }
.daypart-body.is-enter .day-item { animation: row-in 300ms var(--ease-out) backwards; }
.daypart-body.is-enter .day-item:nth-child(1) { animation-delay: 25ms; }
.daypart-body.is-enter .day-item:nth-child(2) { animation-delay: 55ms; }
.daypart-body.is-enter .day-item:nth-child(3) { animation-delay: 85ms; }
.daypart-body.is-enter .day-item:nth-child(4) { animation-delay: 110ms; }
.daypart-body.is-enter .day-item:nth-child(n + 5) { animation-delay: 130ms; }

.part-prompt {
  margin: 0 0 4px;
  padding: 0 0 10px 40px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
}

/* -------------------------------- agenda -------------------------------- */
/*
   De agenda gebruikt dezelfde rustige inkt als Vandaag. Typen afspraken
   verschillen vooral in lijn en vlak, niet in een regenboog aan categorieen.
   De pager houdt horizontale beweging voor wisselen van periode; de pagina
   zelf blijft altijd een enkel verticaal scrollvlak.
*/

.agenda-page,
.agenda-screen {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.agenda-head {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.agenda-head > div { min-width: 0; }

.agenda-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 480;
  line-height: 1.05;
  letter-spacing: -0.024em;
}

.agenda-period-title {
  margin: 0;
  overflow: hidden;
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 480;
  line-height: 1.05;
  letter-spacing: -0.024em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-period {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.agenda-period {
  min-height: 44px;
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.agenda-today {
  min-width: 64px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 680;
  cursor: pointer;
}

.agenda-today:disabled {
  border-color: var(--rule);
  color: var(--ink-3);
  opacity: 0.58;
  cursor: default;
}

.agenda-view-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0 0 16px;
  padding: 3px;
  border-radius: 13px;
  background: var(--paper-2);
}

.agenda-view-switch button {
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
}

.agenda-view-switch button.active,
.agenda-view-switch button[aria-pressed="true"],
.agenda-view-switch button[aria-selected="true"] {
  background: var(--raise);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 26, 20, 0.1);
}

.agenda-pager {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  transition: height 190ms var(--ease-out);
}

[data-agenda-swipe] {
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}

.agenda-page-track {
  display: flex;
  width: 100%;
  transform: translate3d(-100%, 0, 0);
  transition: transform 190ms var(--ease-out);
  will-change: transform;
}

.agenda-pager.is-dragging .agenda-page-track,
.agenda-page-track.is-dragging { transition: none; }

.agenda-pane {
  min-width: 100%;
  flex: 0 0 100%;
  align-self: flex-start;
  padding: 0 1px;
}

/* Maand: minimaal 44px per dag, ook op het smalste ondersteunde scherm. */
.agenda-month-weekdays,
.agenda-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-month-weekdays {
  min-height: 30px;
  align-items: center;
  margin-bottom: 2px;
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 660;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.agenda-month-grid {
  gap: 1px;
  margin-bottom: 16px;
}

.agenda-month-day {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 3px;
  padding: 7px 2px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 570;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
}

.agenda-month-day > strong,
.agenda-month-day > .agenda-date-number,
.agenda-month-day > span:first-child {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 610;
}

.agenda-month-day.today > strong,
.agenda-month-day.today > .agenda-date-number,
.agenda-month-day.today > span:first-child,
.agenda-month-day.is-today > strong,
.agenda-month-day.is-today > .agenda-date-number,
.agenda-month-day.is-today > span:first-child,
.agenda-month-day[aria-current="date"] > strong,
.agenda-month-day[aria-current="date"] > .agenda-date-number,
.agenda-month-day[aria-current="date"] > span:first-child {
  color: var(--now);
  box-shadow: inset 0 0 0 1px var(--now-line);
}

.agenda-month-day.selected,
.agenda-month-day.is-selected,
.agenda-month-day[aria-selected="true"] {
  background: var(--accent-wash);
  color: var(--accent);
}

.agenda-month-day.selected > strong,
.agenda-month-day.selected > .agenda-date-number,
.agenda-month-day.selected > span:first-child,
.agenda-month-day.is-selected > strong,
.agenda-month-day.is-selected > .agenda-date-number,
.agenda-month-day.is-selected > span:first-child,
.agenda-month-day[aria-selected="true"] > strong,
.agenda-month-day[aria-selected="true"] > .agenda-date-number,
.agenda-month-day[aria-selected="true"] > span:first-child {
  background: var(--accent);
  color: var(--paper);
  box-shadow: none;
}

.agenda-month-day.outside,
.agenda-month-day.is-outside {
  color: var(--ink-3);
  opacity: 0.42;
}

.agenda-month-day.outside.selected,
.agenda-month-day.outside[aria-selected="true"],
.agenda-month-day.is-outside.is-selected,
.agenda-month-day.is-outside[aria-selected="true"] { opacity: 1; }

.agenda-dots,
.agenda-month-dots {
  display: flex;
  max-width: 34px;
  min-height: 4px;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.agenda-dot,
.agenda-month-dot,
.agenda-dots > i,
.agenda-month-dots > i {
  width: 3px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-3);
}

.agenda-dot.event,
.agenda-month-dot.event,
.agenda-dots > i.event,
.agenda-month-dots > i.event { background: var(--accent); }

.agenda-dot.deadline,
.agenda-month-dot.deadline,
.agenda-dots > i.deadline,
.agenda-month-dots > i.deadline { background: var(--alert); }

.agenda-bars,
.agenda-month-bars {
  display: grid;
  width: min(34px, calc(100% - 4px));
  gap: 2px;
}

.agenda-bar,
.agenda-month-bar,
.agenda-bars > i,
.agenda-month-bars > i {
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent-line);
}

.agenda-bar.deadline,
.agenda-month-bar.deadline,
.agenda-bars > i.deadline,
.agenda-month-bars > i.deadline { background: var(--alert); }

.agenda-selected-day,
.agenda-selected-list {
  margin: 0 calc(var(--pad-x) * -1);
  padding: 18px var(--pad-x) 2px;
  border-top: 1px solid var(--rule);
}

.agenda-selected-day > header,
.agenda-selected-list > header {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agenda-selected-day h2,
.agenda-selected-day h3,
.agenda-selected-list h2,
.agenda-selected-list h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Week: zeven leesbare rijen in plaats van zeven onbruikbaar smalle kolommen. */
.agenda-week-list,
.agenda-week {
  display: grid;
  border-top: 1px solid var(--rule);
}

.agenda-week-day,
.agenda-day {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  min-height: 68px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.agenda-week-day > header,
.agenda-week-day > .agenda-week-date,
.agenda-day > header,
.agenda-day > .agenda-week-date {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-self: start;
  gap: 1px;
  border-radius: 11px;
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.agenda-week-day > header strong,
.agenda-week-day > .agenda-week-date strong,
.agenda-day > header strong,
.agenda-day > .agenda-week-date strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 520;
  letter-spacing: -0.01em;
}

button.agenda-week-date {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.agenda-week-day.today > header,
.agenda-week-day.today > .agenda-week-date,
.agenda-week-day.is-today > header,
.agenda-week-day.is-today > .agenda-week-date,
.agenda-day.today > header,
.agenda-day.today > .agenda-week-date,
.agenda-day.is-today > header,
.agenda-day.is-today > .agenda-week-date { color: var(--now); }

.agenda-week-day.today > header strong,
.agenda-week-day.today > .agenda-week-date strong,
.agenda-week-day.is-today > header strong,
.agenda-week-day.is-today > .agenda-week-date strong,
.agenda-day.today > header strong,
.agenda-day.today > .agenda-week-date strong,
.agenda-day.is-today > header strong,
.agenda-day.is-today > .agenda-week-date strong { color: var(--now); }

.agenda-week-day.selected > header,
.agenda-week-day.selected > .agenda-week-date,
.agenda-week-day.is-selected > header,
.agenda-week-day.is-selected > .agenda-week-date,
.agenda-day.selected > header,
.agenda-day.selected > .agenda-week-date,
.agenda-day.is-selected > header,
.agenda-day.is-selected > .agenda-week-date {
  background: var(--accent-wash);
  color: var(--accent);
}

.agenda-week-day.selected > header strong,
.agenda-week-day.selected > .agenda-week-date strong,
.agenda-week-day.is-selected > header strong,
.agenda-week-day.is-selected > .agenda-week-date strong,
.agenda-day.selected > header strong,
.agenda-day.selected > .agenda-week-date strong,
.agenda-day.is-selected > header strong,
.agenda-day.is-selected > .agenda-week-date strong { color: var(--accent); }

.agenda-week-day.empty,
.agenda-week-day.is-empty,
.agenda-day.empty,
.agenda-day.is-empty { min-height: 58px; }

.agenda-week-day.empty .agenda-week-events::after,
.agenda-week-day.is-empty .agenda-week-events::after,
.agenda-day.empty .agenda-week-events::after,
.agenda-day.is-empty .agenda-week-events::after {
  content: "Geen afspraken";
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: var(--t-meta);
  font-style: italic;
}

.agenda-week-events {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 5px;
}

/* Een afspraak blijft op elke plek dezelfde compacte, herkenbare rij. */
.agenda-event {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 9px 6px 10px;
  overflow: hidden;
  border: 0;
  border-left: 2px solid var(--rule);
  border-radius: 0 10px 10px 0;
  background: var(--paper-2);
  color: var(--ink);
  text-align: left;
}

button.agenda-event,
a.agenda-event { cursor: pointer; }

.agenda-event.fixed { border-left-color: var(--ink-3); }
.agenda-event.event { border-left-color: var(--accent); background: var(--accent-wash); }
.agenda-event.task { border: 1px solid var(--accent-line); border-left-width: 2px; background: transparent; }
.agenda-event.deadline { border-left-color: var(--alert); background: var(--alert-wash); }
.agenda-event.routine { border-left-color: var(--rest); background: var(--rest-wash); }

.agenda-time {
  align-self: start;
  padding-top: 2px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
}

.agenda-event-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.agenda-event-copy strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 630;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-event-copy small {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-event.deadline .agenda-time { color: var(--alert); }
.agenda-event.event .agenda-time,
.agenda-event.task .agenda-time { color: var(--accent); }

/* Dag: 72px per uur houdt tijd zichtbaar zonder een genest scrollgebied. */
.agenda-day-timeline {
  position: relative;
  height: var(--agenda-height, auto);
  min-height: 432px;
  margin-top: 4px;
}

.agenda-hour {
  display: grid;
  min-height: 72px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--rule-soft);
}

.agenda-hour > time,
.agenda-hour > span:first-child {
  padding-top: 7px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.agenda-hour-add {
  min-width: 0;
  min-height: 44px;
  align-self: stretch;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: transparent;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}

.agenda-hour-add:focus-visible,
.agenda-hour-add:active {
  background: var(--accent-wash);
  color: var(--accent);
}

.agenda-now-line {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 55px;
  height: 1px;
  background: var(--now);
  color: var(--now);
  pointer-events: none;
}

.agenda-now-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

.agenda-now-line > span {
  position: absolute;
  right: calc(100% + 9px);
  top: -6px;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agenda-time-event {
  position: absolute;
  z-index: 2;
  top: var(--agenda-top, 0px);
  left: calc(58px + ((100% - 58px) / var(--agenda-lanes, 1) * var(--agenda-lane, 0)));
  width: calc(((100% - 58px) / var(--agenda-lanes, 1)) - 3px);
  height: var(--agenda-height, 44px);
  min-height: 44px;
}

.agenda-time-event.agenda-event {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 5px;
  padding-inline: 6px;
  padding-block: 5px;
  box-shadow: 0 1px 0 var(--rule-soft);
}

.agenda-time-event .agenda-event-copy strong,
.agenda-time-event .agenda-event-copy small { white-space: normal; }

.agenda-day-notes {
  display: grid;
  gap: 5px;
  margin: 0 0 14px 58px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule-soft);
}

.agenda-day-notes:empty { display: none; }

.agenda-add-row {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid var(--accent-line);
  border-radius: 13px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 680;
  cursor: pointer;
}

.agenda-add-row::before {
  content: "+";
  font-size: 18px;
  font-weight: 430;
  line-height: 1;
}

.agenda-swipe-hint {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.agenda-swipe-hint::before,
.agenda-swipe-hint::after {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--rule);
}

.agenda-a11y-nav {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.agenda-a11y-nav:focus-within {
  position: relative !important;
  display: flex;
  width: auto !important;
  height: auto !important;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

.agenda-a11y-nav button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--raise);
  color: var(--ink);
  cursor: pointer;
}

.agenda-today:active,
.agenda-view-switch button:active,
.agenda-month-day:active,
.agenda-week-date:active,
.agenda-event:active,
.agenda-add-row:active {
  opacity: 0.62;
  transform: none;
}

/* --------------------------------- taken -------------------------------- */
/* Taken zijn regels met haarlijnen, geen losse doosjes. */

.item-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-row);
}

.day-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 0 14px;
  width: 100%;
  padding: 15px 0 15px 2px;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  background: transparent;
  text-align: left;
  transition: opacity var(--base) var(--ease), padding-left var(--base) var(--ease-out);
}

.day-item:first-child { border-top: 0; }
button.day-item { cursor: pointer; }
button.day-item:active { transform: none; }
button.day-item:active .item-title { opacity: 0.55; }

/* De eerstvolgende taak krijgt echt gewicht: inspringing, een inktlijn en
   grotere letter. Geen gekleurd vlak. */
/* De eerstvolgende taak springt in met een inktlijn, maar blijft binnen de
   kolom staan — anders loopt hij bij het actieve dagdeel van het scherm af. */
.day-item.recommended {
  padding-left: 12px;
  border-left: 2px solid var(--accent);
  border-top-color: transparent;
  grid-template-columns: 24px 1fr;
  gap: 0 12px;
}

.day-item.recommended .item-title {
  font-size: var(--t-lead);
  font-weight: 560;
  letter-spacing: -0.018em;
}

.day-item.context { opacity: 0.5; }
.day-item.done { opacity: 0.42; }

/* Een afvinkbare taak heeft een ring. Een afspraak een vlak. Verschillende
   dingen zien er verschillend uit. */
.check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 11px;
  font-weight: 700;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.recommended .check { border-color: var(--accent); border-width: 2px; }

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

.check.is-pulse { animation: seal 340ms var(--ease-spring); }

.event-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 0;
  border-radius: 7px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: var(--t-meta);
  font-weight: 520;
}

.event-icon.subtle {
  background: transparent;
  color: var(--ink-3);
  font-size: 17px;
  line-height: 0.4;
}

.item-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.item-title {
  font-size: var(--t-row);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
  transition: opacity var(--fast) var(--ease);
}

/* "eerst" hangt naast de titel als klein gezet kapitaal. */
.item-title em {
  display: inline-block;
  margin-left: 9px;
  color: var(--accent);
  font-style: normal;
  vertical-align: 1.5px;
}

.done .item-title {
  font-weight: 450;
  text-decoration: line-through;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
}

.item-detail {
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

.first-step {
  margin-top: 7px;
  padding-left: 11px;
  border-left: 1px solid var(--accent-line);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--t-meta);
  font-style: italic;
  line-height: 1.5;
}

.parked,
.empty-inline {
  margin: 14px 0 2px;
  padding-left: 40px;
  color: var(--ink-3);
  font-size: var(--t-meta);
}

/* ----------------------------- dagagenda ------------------------------- */

.timeline {
  position: relative;
  margin-top: 8px;
  padding-bottom: 20px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 92px;
  bottom: 30px;
  left: 59px;
  width: 1px;
  background: var(--rule);
}

.timeline-free-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 0 14px;
  border: 1px solid var(--rule-soft);
  border-radius: 13px;
  background: var(--rule-soft);
}

.timeline-free-overview > div {
  display: flex;
  min-width: 0;
  min-height: 52px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 7px 6px;
  background: var(--raise);
  text-align: center;
}

.timeline-free-overview span {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 680;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.timeline-free-overview strong {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 670;
  white-space: nowrap;
}

.timeline-part {
  position: relative;
  z-index: 1;
  margin: 20px 0 6px;
  padding-left: 76px;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.timeline-part:first-child { margin-top: 8px; }
.timeline-part:not(.unscheduled) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-right: 2px;
}
.timeline-part small {
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
}
.timeline-part.current { color: var(--now); }
.timeline-part.unscheduled { color: var(--alert); }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 16px minmax(0, 1fr);
  gap: 0 4px;
  align-items: start;
  min-height: 58px;
  padding: 4px 0;
}

.timeline-item > time {
  padding-top: 12px;
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  text-align: right;
}

.timeline-node {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin: 16px auto 0;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--rest);
  box-shadow: 0 0 0 1px var(--rule);
}

.timeline-item.dog .timeline-node { background: var(--accent); }
.timeline-item.focus .timeline-node { background: var(--focus); }
.timeline-item.meal .timeline-node { background: var(--meal); }
.timeline-item.rest .timeline-node { background: var(--rest); }

.timeline-block {
  min-width: 0;
  overflow: hidden;
  border-left: 3px solid var(--rest);
  border-radius: 12px;
  background: var(--rest-wash);
}

.timeline-item.dog .timeline-block { border-left-color: var(--accent); background: var(--accent-wash); }
.timeline-item.focus .timeline-block { border-left-color: var(--focus); background: var(--focus-wash); }
.timeline-item.meal .timeline-block { border-left-color: var(--meal); background: var(--meal-wash); }
.timeline-item.rest .timeline-block { border-left-color: var(--rest); background: var(--rest-wash); }

.timeline-main {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: 5px 6px 5px 4px;
}

.timeline-check,
.timeline-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
}

.timeline-check { cursor: pointer; }
.timeline-check.readonly { cursor: default; }
.timeline-check::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.timeline-item.done .timeline-check {
  color: var(--accent);
  font-size: 11px;
  font-weight: 760;
}

.timeline-item.done .timeline-check::before { display: none; }

.timeline-copy {
  display: flex;
  min-width: 0;
  min-height: 44px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 3px 6px 3px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

button.timeline-copy { cursor: pointer; }
button.timeline-copy:active { opacity: 0.58; transform: none; }

.timeline-title {
  overflow: hidden;
  font-size: 16px;
  font-weight: 610;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-title em {
  margin-left: 8px;
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 740;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.timeline-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-first {
  margin-top: 5px;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
}

.timeline-item.done { opacity: 0.46; }
.timeline-item.done .timeline-title { text-decoration: line-through; }
.timeline-item.context { opacity: 0.55; }
.timeline-item.recommended .timeline-block { box-shadow: 0 8px 20px -16px rgba(20, 26, 20, 0.65); }

.timeline-now {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 48px 16px minmax(0, 1fr);
  gap: 0 4px;
  align-items: center;
  min-height: 34px;
  margin: 5px 0;
  color: var(--now);
}

.timeline-now time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.timeline-now > span {
  grid-column: 2 / 4;
  height: 1px;
  background: var(--now);
}

.timeline-now strong {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  padding: 0 8px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Een doorlopend blok als school of werk. De lijn loopt van de beginstip
   naar de eindstip; alles wat er tussenin valt hangt er met een kort
   zijtakje aan. Dun en licht, want dit blok is de achtergrond van je dag,
   niet het onderwerp. */
.timeline-focus-span {
  position: relative;
  margin: 4px 0 14px;
  padding: 4px 0 8px;
  border-radius: 16px;
  background: linear-gradient(90deg, transparent 0 51px, var(--focus-wash) 51px 100%);
}

.timeline-focus-span::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 28px;
  bottom: 21px;
  left: 59px;
  width: 2px;
  border-radius: 999px;
  background: var(--focus);
  opacity: 0.55;
  pointer-events: none;
}

.timeline-focus-span > .timeline-item,
.timeline-focus-span > .timeline-now,
.timeline-span-end { position: relative; z-index: 1; }

/* Kleinere stippen binnen het blok: de lijn moet leiden, niet de punten. */
.timeline-focus-span .timeline-node {
  width: 7px;
  height: 7px;
  margin-top: 17px;
  box-shadow: none;
}

/* Het blok zelf houdt geen eigen vlak meer aan: het ligt al op de wash. */
.timeline-focus-span > .timeline-item.focus .timeline-block {
  background: transparent;
  border-left-color: transparent;
}

/* Zijtakje naar wat er tijdens het blok valt, in plaats van een onderbreking. */
.timeline-focus-span > .timeline-item:not(.focus) .timeline-node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 6px;
  height: 2px;
  transform: translateY(-1px);
  border-radius: 999px;
  background: var(--focus);
  opacity: 0.45;
}

.timeline-focus-span .timeline-now strong { background: var(--focus-wash); }

.timeline-span-end {
  display: grid;
  grid-template-columns: 48px 16px minmax(0, 1fr);
  align-items: center;
  gap: 0 4px;
  min-height: 34px;
}

.timeline-span-end time {
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  text-align: right;
}

.timeline-span-end > span {
  z-index: 1;
  justify-self: center;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--focus);
  opacity: 0.75;
}

/* "Werk klaar" hoort bij de eindstip, niet als eigen kop. */
.timeline-span-end strong {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 580;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-span-end { min-height: 26px; margin-top: 0; }

/* ------------------------------- dagstart ------------------------------- */
/* Eerst kiezen wat vandaag past, daarna pas het dagdeel. Geen datumformulier
   en geen tweede planner naast deze ene korte beslisroute. */

.kickoff {
  margin: 12px 0 18px;
  padding: 16px 0 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  animation: unfold var(--base) var(--ease-out);
}

.kickoff-label {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kickoff h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.016em;
}

.kickoff-help {
  margin: 4px 0 10px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

.kickoff-task-list { display: flex; flex-direction: column; }

.smart-task-list {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.smart-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 11px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-wash);
}

.smart-task > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.smart-task-mark {
  color: var(--accent);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.smart-task strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-task small { color: var(--ink-2); font-size: 11px; line-height: 1.4; }

.smart-task-actions { display: flex; flex-direction: column; align-items: stretch; }

.smart-task-actions button {
  min-width: 84px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.smart-task-actions .smart-task-skip {
  min-height: 44px;
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 620;
}

.smart-task-actions button:disabled {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-3);
  cursor: default;
}

.deadline-plan-block {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}

.deadline-plan-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.deadline-plan-heading strong { color: var(--ink); font-size: 13px; font-weight: 680; }
.deadline-plan-heading small { color: var(--ink-3); font-size: 10px; text-align: right; }
.deadline-plan-task { background: var(--raise); }

.smart-more { margin-top: 2px; }

.kickoff-task {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.kickoff-task:first-child { border-top: 0; }

.kickoff-task > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.kickoff-task strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kickoff-task small { color: var(--ink-3); font-size: 12px; }

.kickoff-task em {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 13px;
  font-style: normal;
  font-weight: 680;
}

.kickoff-task:active { opacity: 0.58; transform: none; }

.kickoff-more { border-top: 1px solid var(--rule-soft); }
.kickoff-more summary {
  min-height: 44px;
  padding: 11px 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 640;
  cursor: pointer;
}

.kickoff-empty {
  margin: 10px 0 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 14px;
}

.kickoff-picked {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 13px;
}

.kickoff-picked strong {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 12px;
}

.kickoff-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

/* --------------------------------- slot ---------------------------------- */
/* Eén veld, één knop. Rustig, niet streng. */

.lock-screen {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-content: center;
  padding-bottom: 12vh;
}

.lock { width: min(calc(100vw - 2 * var(--pad-x)), 340px); }

.lock h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 480;
  letter-spacing: -0.022em;
}

.lock-note {
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.5;
}

.lock input {
  width: 100%;
  min-height: 52px;
  margin-bottom: 10px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: var(--raise);
  color: var(--ink);
  font-size: 16px;
  transition: border-color var(--fast) var(--ease);
}

.lock input:focus { border-color: var(--accent); outline: 0; }

/* Twee accounts naast elkaar: wie ben je? */
.lock-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.lock-choice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.lock-choice strong { font-size: var(--t-row); font-weight: 560; }
.lock-choice small { color: var(--ink-3); font-size: var(--t-meta); }

.lock-choice.active {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.lock-choice.active small { color: var(--accent); }

/* Wie er is ingelogd, in Account en gegevens. */
/* ------------------------- huiswerk met een deadline --------------------- */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: 4px 0 18px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.toggle-row strong { display: block; font-size: var(--t-body); font-weight: 560; }
.toggle-row small { display: block; margin-top: 3px; color: var(--ink-3); font-size: var(--t-meta); line-height: 1.45; }

.toggle-row i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--check-border);
  border-radius: 50%;
  color: transparent;
  font-size: 13px;
  font-weight: 700;
}

.toggle-row.active { border-color: var(--accent); background: var(--accent-wash); }
.toggle-row.active i { border-color: var(--accent); background: var(--accent); color: var(--paper); }

.deadline-title {
  margin: 4px 0 4px;
  font-family: var(--serif);
  font-size: var(--t-title);
  font-weight: 480;
  letter-spacing: -0.016em;
  line-height: 1.2;
}

.deadline-meta {
  margin: 0 0 20px;
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.deadline-coach {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -4px 0 20px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--accent-wash);
}

.deadline-coach span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.deadline-coach strong { color: var(--ink-2); font-size: 13px; font-weight: 560; line-height: 1.45; }
.deadline-coach.tight { background: var(--alert-wash); }
.deadline-coach.tight span { color: var(--alert); }

.deadline-field-help {
  margin: -12px 0 18px;
  color: var(--ink-3);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.homework-chips { margin: -4px 0 14px; }

.homework-study-note,
.deadline-check-question,
.deadline-slot-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 2px 0 18px;
  padding: 14px 15px;
  border-radius: 14px;
  background: var(--accent-wash);
}

.homework-study-note > span,
.deadline-check-question > span,
.deadline-slot-preview > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.homework-study-note small { color: var(--ink-2); font-size: 12px; line-height: 1.45; }

.deadline-check-question { margin-top: 4px; }
.deadline-check-question h3 { margin: 4px 0 0; font-family: var(--serif); font-size: 21px; font-weight: 520; }
.deadline-check-question p { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.deadline-check-question .primary-button { margin-top: 3px; }
.deadline-slot-preview { margin-top: 4px; }
.deadline-slot-preview strong { color: var(--ink); font-size: 16px; font-weight: 680; }
.deadline-slot-preview small { color: var(--ink-2); font-size: 11px; line-height: 1.45; }

/* Huiswerk waar je vaker aan werkt: een onderbroken ring. Het vinkje sluit
   daar een werksessie af, niet de hele taak. Geen woordlabel, want een
   deadline is informatie en geen aparte status. */
.inbox-task.ongoing .check,
.day-item.ongoing .check,
.timeline-check.ongoing::before { border-style: dashed; }

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-soft);
}

.account-row strong { display: block; font-size: var(--t-row); font-weight: 560; }
.account-row small { color: var(--ink-3); font-size: var(--t-meta); }

/* Dagen kiezen met knoppen in plaats van een keuzelijst. */
.day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

.day-chip {
  min-width: 46px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 560;
  text-transform: capitalize;
  cursor: pointer;
}

.day-chip.active {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-weight: 660;
}

.lock-error {
  min-height: 22px;
  margin: 10px 2px 0;
  color: var(--alert);
  font-size: var(--t-meta);
}

/* ------------------------------ eetkiezer ------------------------------- */

.meal-idea-button {
  position: relative;
  display: grid;
  min-width: 62px;
  min-height: 44px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--meal);
  cursor: pointer;
}

.meal-idea-button::before {
  position: absolute;
  inset: 5px 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  content: "";
  opacity: 0.65;
}

.meal-idea-button span {
  position: relative;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.01em;
}

.meal-idea-button.chosen { color: var(--ink-2); }
.meal-idea-button.chosen::before { background: var(--meal-wash); }
.meal-idea-button:active { opacity: 0.58; transform: none; }

.meal-picker-intro {
  margin: -4px 0 14px;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.5;
}

.meal-categories,
.meal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.meal-categories button,
.meal-filters button {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--raise);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
}

.meal-categories button[aria-pressed="true"],
.meal-filters button[aria-pressed="true"] {
  border-color: var(--meal);
  background: var(--meal-wash);
  color: var(--meal);
}

.meal-guide {
  margin: 13px 0 14px;
  padding: 11px 13px;
  border-left: 2px solid var(--meal);
  border-radius: 0 10px 10px 0;
  background: var(--meal-wash);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.meal-selected {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 13px;
  border: 1px solid var(--meal);
  border-radius: 12px;
  background: var(--raise);
}

.meal-selected span { color: var(--meal); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.meal-selected strong { font-size: 14px; font-weight: 570; line-height: 1.4; }

.meal-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 19px 0 9px;
}

.meal-picker-actions strong { color: var(--ink-2); font-size: 13px; font-weight: 650; }
.meal-picker-actions button {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--meal);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.meal-filters { margin-bottom: 14px; }
.meal-filters button { min-height: 40px; padding-inline: 11px; font-size: 12px; }

.meal-options {
  overflow: hidden;
  border-top: 1px solid var(--rule-soft);
}

.meal-option {
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.meal-option > span { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.meal-option strong { font-size: 14px; font-weight: 560; line-height: 1.4; }
.meal-option small { display: flex; flex-wrap: wrap; gap: 5px; }
.meal-option em {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--raise);
  color: var(--ink-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 630;
}
.meal-option i { flex: 0 0 auto; color: var(--meal); font-size: 18px; font-style: normal; }
.meal-option.selected { background: var(--meal-wash); }
.meal-option:active { opacity: 0.6; transform: none; }

.meal-empty {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 24px 4px;
  color: var(--ink-2);
}
.meal-empty strong { color: var(--ink); font-size: 15px; }
.meal-empty span { font-size: 13px; }

/* --------------------------------- week --------------------------------- */

.week-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.week-actions .add-button { margin-left: 8px; }

.section-note {
  margin: -14px 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--t-body);
  font-style: italic;
  font-weight: 420;
  line-height: 1.5;
}

.week-note { margin-bottom: 14px; }

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 22px;
}

.week-chip {
  position: relative;
  min-width: 0;
  min-height: 76px;
  padding: 9px 1px 7px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  text-align: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.week-chip span {
  display: block;
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-chip strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 520;
  line-height: 1;
}

.week-chip small {
  display: block;
  margin-top: 7px;
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.week-chip i {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 9px;
  font-style: normal;
  font-weight: 720;
}

.week-chip.today strong { color: var(--now); }
.week-chip.balanced small { color: var(--now); }
.week-chip.full small { color: var(--alert); }

.week-chip.selected {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
}

.week-chip:active { transform: scale(0.96); }

.week-focus {
  margin: 0 calc(var(--pad-x) * -1);
  padding: 24px var(--pad-x) 20px;
  border-radius: 24px;
  background: var(--raise);
  box-shadow: var(--lift);
}

.week-focus-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.week-focus-head > div > span {
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.week-focus-head h2 {
  margin: 3px 0 0;
  font-family: var(--serif);
  font-size: var(--t-title);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}

.week-focus-head h2 small {
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 540;
  letter-spacing: 0;
}

.week-group-title {
  margin: 20px 0 4px;
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.week-group-title:first-of-type { margin-top: 0; }

/* Geen oordeel maar een getal: "±3,5 u vrij". Kleur zegt alleen hoe
   ruim het is; cijfers blijven op hun plek staan. */
.capacity {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

.capacity.balanced { color: var(--now); }
.capacity.full { color: var(--alert); }

.week-day-items {
  display: flex;
  flex-direction: column;
}

.week-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-size: var(--t-body);
  transition: opacity var(--fast) var(--ease);
}

button.week-row { cursor: pointer; }
button.week-row:active { opacity: 0.55; transform: none; }

.week-row small {
  display: block;
  margin-top: 3px;
  color: var(--now);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.week-time {
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.week-row.flexible .week-time { color: var(--accent); }
.week-open-space {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 18px;
  padding: 16px;
  border-radius: 16px;
  background: var(--paper);
}

.week-open-space strong { font-size: var(--t-body); font-weight: 620; }
.week-open-space span { color: var(--ink-3); font-family: var(--serif); font-size: var(--t-meta); line-height: 1.45; }

.week-dog-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.week-dog-summary span { font-weight: 680; }
.week-dog-summary strong { font-weight: 480; }

.week-plan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 22px;
}

.week-plan-actions button {
  min-height: 46px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  font-size: var(--t-meta);
  font-weight: 680;
  cursor: pointer;
}

.week-plan-primary { background: var(--accent); color: var(--paper); }
.week-plan-secondary { background: var(--accent-wash); color: var(--accent); }
.week-plan-actions button:active { transform: scale(0.98); }

/* --------------------------------- taken -------------------------------- */

.quick-add {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 3px 0;
  border: 0;
  border-bottom: 1.5px solid var(--rule);
  border-radius: 0;
  background: transparent;
  transition: border-color var(--base) var(--ease);
}

.quick-add:focus-within { border-bottom-color: var(--accent); }

.quick-add input {
  min-width: 0;
  min-height: 48px;
  flex: 1;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.quick-add input:focus { outline: 0; }
.quick-add input::placeholder { color: var(--ink-3); }

/* Een klein verzendknopje. De nadruk hoort bij wat je typt, niet bij de knop. */
.quick-add button {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.quick-add button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* Uitleg is gewone tekst. Cursieve serif blijft voor sfeer, niet voor
   instructies. */
.inbox-hint {
  margin: -10px 0 20px;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.5;
}

/* Drie vaste secties. De hele kop is de knop: naam, aantal en chevron horen
   bij elkaar in plaats van dat het aantal los rechts zweeft. */
.inbox-group + .inbox-group { border-top: 1px solid var(--rule-soft); }

/* Een lege sectie blijft staan, maar vraagt geen aandacht. */
.inbox-group.is-empty .inbox-group-copy strong {
  color: var(--ink-2);
  font-weight: 560;
}

.inbox-group-head {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.inbox-group-copy { min-width: 0; }

.inbox-group-copy strong {
  display: block;
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.inbox-group-copy small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.inbox-group-count {
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
}

.inbox-group.is-open .inbox-group-count { color: var(--ink-2); }

.inbox-chevron {
  display: block;
  color: var(--ink-3);
  font-size: 19px;
  line-height: 1;
  transition: transform var(--base) var(--ease);
}

.inbox-group.is-open .inbox-chevron { transform: rotate(90deg); }

.inbox-empty {
  margin: 0;
  padding: 0 0 18px;
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.inbox-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

/* Een taakregel krijgt meer contrast dan de scheiding tussen secties: de taak
   is het onderwerp, de sectie alleen de indeling. */
.inbox-task {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  background: transparent;
  transition: opacity var(--base) var(--ease);
}

.inbox-list > .inbox-task:first-child { border-top: 0; }

.task-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.task-line i {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Een deadline is extra informatie bij de taak, geen eigen status. */
.due-chip {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-style: normal;
  font-weight: 640;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.due-chip.soon { background: var(--now-wash); color: var(--now); }
.due-chip.late { background: var(--alert-wash); color: var(--alert); }

/* Plannen kan hier, zonder eerst naar Vandaag te hoeven. De kloktijd blijft
   het werk van "Plan mijn dag". */
.task-plan {
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 660;
  white-space: nowrap;
  cursor: pointer;
}

.task-plan::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 44px;
  transform: translateY(-50%);
}

.task-plan:active { background: var(--accent-wash); }

/* Het rondje blijft 22px, maar het raakvlak wordt 44px. Anders is afvinken
   in de takenlijst met een duim een kwestie van mikken. */
.check.standalone {
  position: relative;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.check.standalone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.check.standalone.readonly::after { display: none; }

.week-plan-actions.single { grid-template-columns: 1fr; }

.check.standalone.readonly,
.task-copy.readonly,
.week-row.readonly { cursor: default; }

.inbox-task.done .check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}

.task-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.task-copy:active { opacity: 0.55; transform: none; }

.task-copy strong {
  overflow: hidden;
  font-size: var(--t-row);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-copy span {
  color: var(--ink-3);
  font-size: var(--t-meta);
}

/* Afgerond mag rustiger en compacter: het is naslag, geen werk meer. Niet
   verder terug dan 0.62 — daaronder zakt de doorgestreepte tekst onder de
   leesbaarheidsgrens van 4,5:1. */
.inbox-task.done {
  min-height: 46px;
  padding: 9px 0;
  opacity: 0.62;
}

.inbox-task.done strong {
  font-size: var(--t-body);
  font-weight: 450;
  text-decoration: line-through;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
}

.empty-state {
  padding: 64px 0 40px;
  text-align: left;
  animation: fade-in var(--slow) var(--ease);
}

.empty-state > span {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 18px;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
}

.empty-state h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: var(--t-title);
  font-weight: 480;
  letter-spacing: -0.016em;
}

.empty-state p {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.55;
}

/* ----------------------------- instellingen ---------------------------- */

.settings-intro {
  max-width: 38ch;
  margin: -3px 0 32px;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.55;
}

.settings-readonly {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -10px 0 28px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--focus-wash);
}

.settings-readonly strong { font-size: var(--t-body); font-weight: 650; }
.settings-readonly span { color: var(--ink-2); font-size: var(--t-meta); line-height: 1.45; }

.settings-group { margin: 0 0 32px; }

.settings-group > h2 {
  margin: 0 0 7px;
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-category-list { border-top: 1px solid var(--rule-soft); }

.settings-category-row {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.settings-category-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.settings-category-row strong {
  overflow: hidden;
  font-size: var(--t-body);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-category-row small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-category-row > i {
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 22px;
  font-style: normal;
  text-align: right;
}

.settings-category-row:active { opacity: 0.58; transform: none; }

.settings-section {
  margin: 0 0 38px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.settings-section.compact { margin-bottom: 8px; }

.settings-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.settings-section-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.settings-section-head span {
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 680;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.018em;
}

.settings-section-head > button {
  min-height: 44px;
  padding: 0 3px 0 12px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 680;
  cursor: pointer;
}

.settings-help {
  max-width: 52ch;
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.5;
}

.schedule-list {
  margin-bottom: 12px;
  border-top: 1px solid var(--rule-soft);
}

.schedule-row {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 28px 62px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.schedule-row:active,
.settings-summary-row:active { opacity: 0.58; transform: none; }

.schedule-day {
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-time,
.schedule-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.schedule-time {
  color: var(--ink);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.schedule-time small,
.schedule-copy small {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.schedule-copy strong {
  overflow: hidden;
  font-size: var(--t-body);
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-row > i,
.settings-summary-row > i {
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 22px;
  font-style: normal;
}

.settings-primary {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  font-size: var(--t-body);
  font-weight: 660;
  cursor: pointer;
}

.settings-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  padding: 18px 0;
  color: var(--ink-2);
}

.settings-empty strong { color: var(--ink); font-size: var(--t-body); }
.settings-empty span { font-size: var(--t-meta); }

.settings-section > .weekly-goals { margin-bottom: 0; }

.settings-summary-row {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.settings-summary-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.settings-summary-row strong { font-size: var(--t-body); font-weight: 650; }
.settings-summary-row small { color: var(--ink-2); font-size: var(--t-meta); line-height: 1.4; }

/* -------------------------------- navigatie ----------------------------- */
/* Geen witte pil achter een label: de actieve bestemming krijgt inkt en een
   stip, de rest blijft stil. */

.tabs {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 var(--pad-x) max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: var(--veil);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
}

.tabs-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  width: min(100%, 420px);
  margin: 0 auto;
}

.tab {
  position: relative;
  min-height: 54px;
  width: 100%;
  padding-top: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 560;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color var(--base) var(--ease);
}

.tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translate(-50%, 4px) scale(0.4);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease-spring);
}

.tab.active {
  color: var(--ink);
  font-weight: 660;
}

.tab.active::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.tab:active { transform: none; opacity: 0.6; }

.tab-add {
  width: 52px;
  height: 52px;
  margin: -10px 0 4px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 10px 24px -14px rgba(32, 69, 49, 0.78);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 360;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.tab-add:active { transform: scale(0.94); }

/* --------------------------------- sheet -------------------------------- */

.sheet-backdrop {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 24px;
  background: var(--scrim);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.sheet {
  width: min(100%, 600px);
  max-height: min(91vh, 820px);
  max-height: min(91dvh, 820px);
  overflow: auto;
  border-radius: 28px 28px 0 0;
  background: var(--paper);
  box-shadow: var(--lift-sheet);
  overscroll-behavior: contain;
}

/* Alleen bij het openen glijdt het paneel omhoog. Zonder deze klasse zou
   elke hertekening -- een keuze, een veld -- de animatie opnieuw afspelen. */
.sheet-backdrop.is-opening { animation: fade-in var(--base) var(--ease); }
.sheet-backdrop.is-opening .sheet { animation: sheet-in var(--slow) var(--ease-out); }

.sheet-backdrop.is-leaving { animation: fade-in var(--base) var(--ease) reverse forwards; }
.sheet-backdrop.is-leaving .sheet { animation: sheet-out var(--base) var(--ease) forwards; }

.sheet-handle {
  width: 34px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--rule);
}

.sheet-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px var(--pad-x) 14px;
  background: var(--veil);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sheet-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-title);
  font-weight: 480;
  letter-spacing: -0.016em;
}

.sheet-content { padding: 6px var(--pad-x) calc(30px + env(safe-area-inset-bottom)); }

/* -------------------------------- velden -------------------------------- */

.field {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.field > span,
.settings-title {
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field input,
.field select,
.dog-setting input,
.dog-setting select {
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--raise);
  color: var(--ink);
  font-size: 16px;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.field input:focus,
.field select:focus,
.dog-setting input:focus,
.dog-setting select:focus {
  border-color: var(--accent);
  outline: 0;
}

.field-row { display: flex; gap: 12px; }

.sheet-note {
  margin: -6px 0 20px;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--t-meta);
  font-style: italic;
  line-height: 1.5;
}

.sheet-note.strong {
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-style: normal;
  font-weight: 620;
  text-transform: capitalize;
}

.plan-goals { margin: -4px 0 22px; }

.plan-goals > header { margin-bottom: 12px; }

.plan-goals > header > span {
  color: var(--focus);
  font-size: var(--t-micro);
  font-weight: 720;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.plan-goals h3 {
  margin: 3px 0 4px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 520;
  letter-spacing: -0.014em;
}

.plan-goals header p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.plan-picked-list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

.plan-picked-list > span {
  padding: 10px 0 5px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-picked-task {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.plan-picked-task > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.plan-picked-task strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.plan-picked-task small { color: var(--accent); font-size: 11px; }
.plan-picked-task em { color: var(--focus); font-size: 11px; font-style: normal; font-weight: 700; }
.plan-picked-task.incomplete small { color: var(--alert); }

.plan-next-hint {
  margin: 9px 8px 14px;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.plan-goal-list { border-top: 1px solid var(--rule); }

.plan-goal-row {
  display: grid;
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.plan-goal-row.recommended {
  margin: 0 -8px;
  padding-right: 8px;
  padding-left: 8px;
  border-radius: 12px;
  background: var(--accent-wash);
}

.plan-goal-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.plan-goal-copy strong { font-size: 15px; font-weight: 660; line-height: 1.3; }
.plan-goal-copy strong em {
  margin-left: 7px;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 740;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-goal-copy small { color: var(--ink-2); font-size: 11px; line-height: 1.35; }

.plan-goal-add {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--focus);
  border-radius: 11px;
  background: transparent;
  color: var(--focus);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.plan-goal-picked,
.plan-goal-hours {
  display: flex;
  align-items: center;
  gap: 5px;
}

.plan-goal-picked > span,
.plan-goal-done {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

.plan-goal-picked > button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: 19px;
  cursor: pointer;
}

.plan-goal-hours {
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.plan-goal-stepper {
  display: grid;
  grid-template-columns: 44px 54px 44px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.plan-goal-stepper button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--focus);
  font-size: 20px;
  cursor: pointer;
}

.plan-goal-stepper button:disabled { color: var(--ink-3); opacity: 0.36; cursor: default; }

.plan-goal-stepper > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.plan-goal-stepper strong { font-size: 12px; font-weight: 720; white-space: nowrap; }
.plan-goal-stepper small { color: var(--ink-3); font-size: 9px; }

.proposal-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 14px;
}

.proposal-summary strong { font-size: 16px; font-weight: 680; }
.proposal-summary span { color: var(--ink-3); font-size: var(--t-meta); white-space: nowrap; }

.proposal-step { margin: -4px 0 14px; }
.proposal-step > span {
  color: var(--focus);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.proposal-step h3 { margin: 3px 0 4px; font-family: var(--serif); font-size: 21px; font-weight: 520; }
.proposal-step p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.45; }

.proposal-free-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 18px;
}

.proposal-free-grid > div {
  display: flex;
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--paper-2);
}

.proposal-free-grid span { color: var(--ink-3); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.proposal-free-grid strong { color: var(--ink); font-size: 12px; font-weight: 660; }

.proposal-parts { margin: 0 0 16px; }
.proposal-part { margin: 0 0 14px; }
.proposal-part > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--rule);
}
.proposal-part > header strong { color: var(--ink); font-size: 13px; font-weight: 690; }
.proposal-part > header span { color: var(--accent); font-size: 10px; font-weight: 650; }
.proposal-part-empty { margin: 0; padding: 12px 0; color: var(--ink-3); font-size: 11px; }

.recovery-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--accent-wash);
}

.recovery-summary > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.recovery-summary > strong { font-size: 14px; font-weight: 680; }
.recovery-summary ul { margin: 3px 0 2px; padding-left: 18px; color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.recovery-summary li + li { margin-top: 3px; }
.recovery-summary p { margin: 1px 0 3px; color: var(--ink-2); font-size: 12px; }
.recovery-summary small { color: var(--ink-3); font-size: 11px; line-height: 1.4; }

.proposal-explain,
.proposal-ok {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.5;
}

.proposal-edit-note {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.proposal-list {
  margin-bottom: 0;
  overflow: hidden;
  border-top: 1px solid var(--rule-soft);
}

.proposal-list > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border-bottom: 1px solid var(--rule-soft);
}

.proposal-list time { color: var(--accent); font-size: 11px; font-weight: 660; white-space: nowrap; }
.proposal-time-edit { display: flex; align-items: center; gap: 2px; }
.proposal-time-edit small { color: var(--ink-3); font-size: 10px; }
.proposal-time {
  width: 68px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}
.proposal-time:focus { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.proposal-list strong { overflow: hidden; font-size: var(--t-body); font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.proposal-list span { color: var(--ink-3); font-size: var(--t-micro); white-space: nowrap; }
.proposal-continues {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.proposal-warnings {
  margin: 0 0 16px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--alert-wash);
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.proposal-warnings strong { color: var(--alert); font-weight: 680; }
.proposal-warnings ul { margin: 8px 0 0; padding-left: 18px; }
.proposal-warnings li + li { margin-top: 5px; }
.proposal-ok { padding: 12px 14px; border-radius: 12px; background: var(--accent-wash); color: var(--accent-strong); }

.plan-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-choices button {
  display: flex;
  min-height: 74px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--raise);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.plan-choices button:active { border-color: var(--accent-line); background: var(--accent-wash); transform: scale(0.99); }
.plan-choices span { color: var(--accent); font-size: var(--t-row); font-weight: 650; }
.plan-choices small { color: var(--ink-3); font-family: var(--serif); font-size: var(--t-meta); line-height: 1.4; }

.task-part-title {
  margin: 2px 0 18px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 520;
  line-height: 1.3;
}

.part-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.part-choices button {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--raise);
  text-align: left;
  cursor: pointer;
}

.part-choices button:active { border-color: var(--accent-line); background: var(--accent-wash); transform: scale(0.98); }
.part-choices button.active { border-color: var(--accent-line); background: var(--accent-wash); }
.part-choices button:disabled { opacity: 0.45; cursor: default; }
.part-choices span { color: var(--accent); font-size: 14px; font-weight: 660; }
.part-choices small { color: var(--ink-3); font-size: 11px; line-height: 1.3; }

.task-slot-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 12px;
  padding: 14px 15px;
  border-radius: 13px;
  background: var(--accent-wash);
}

.task-slot-preview > span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 740;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.task-slot-preview strong { color: var(--ink); font-size: 16px; font-weight: 680; }
.task-slot-preview small { color: var(--ink-2); font-size: 11px; line-height: 1.45; }

.primary-button,
.delete-button {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 13px;
  font-size: var(--t-row);
  font-weight: 620;
  letter-spacing: -0.006em;
  cursor: pointer;
}

.primary-button {
  background: var(--accent);
  color: var(--paper);
}

.primary-button:disabled { opacity: 0.42; cursor: default; }

.quiet-wide-button {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  font-weight: 620;
  cursor: pointer;
}

.quiet-wide-button.subtle {
  margin-top: 0;
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 580;
}

.primary-button:active { background: var(--accent-strong); }

.delete-button {
  margin-top: 10px;
  background: transparent;
  color: var(--alert);
  font-weight: 560;
}

.settings-title {
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.dog-setting {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) 104px minmax(104px, 1.2fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.dog-setting strong {
  font-size: var(--t-body);
  font-weight: 540;
}

.dog-setting input,
.dog-setting select {
  min-width: 0;
  min-height: 46px;
  padding: 0 10px;
  font-size: var(--t-body);
}

.settings-auto-note {
  margin: 4px 0 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--focus-wash);
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.settings-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  background: transparent;
}

.settings-block > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-block span {
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.small-action {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 620;
  cursor: pointer;
}

.settings-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.settings-actions button {
  min-height: 46px;
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 580;
  cursor: pointer;
}

.settings-actions button.danger {
  border-color: transparent;
  background: var(--alert-wash);
  color: var(--alert);
}

.settings-sheet-intro {
  max-width: 48ch;
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.5;
}

.goal-settings-list {
  margin: 0 0 18px;
  border-top: 1px solid var(--rule-soft);
}

.goal-settings-row {
  display: grid;
  width: 100%;
  min-height: 66px;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.goal-settings-row > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.goal-settings-row strong { overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.goal-settings-row small { color: var(--ink-2); font-size: 11px; line-height: 1.35; }
.goal-settings-row > i { color: var(--ink-3); font-size: 20px; font-style: normal; }

.settings-sheet-section {
  margin: 0 0 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}

.settings-sheet-section h3,
.dog-setting-card h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.settings-sheet-section > p {
  margin: -7px 0 0;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.meal-day-settings > p { margin-bottom: 16px; }

.meal-day-chips {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 20px;
}

.meal-day-chip {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: transparent;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  cursor: pointer;
}

.meal-day-chip.changed::after {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--meal);
  content: "";
}

.meal-day-chip.active {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-strong);
}

.meal-selected-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.meal-selected-head strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 520;
  text-transform: capitalize;
}

.meal-selected-head span { color: var(--ink-3); font-size: 11px; }

.meal-setting-card {
  padding: 13px 0 0;
  border-top: 1px solid var(--rule-soft);
}

.meal-setting-card > strong {
  display: block;
  margin-bottom: 9px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
}

.meal-setting-card .field:first-child { flex: 0 0 106px; }
.meal-setting-card .field { margin-bottom: 14px; }

.settings-field-label {
  display: block;
  margin: 0 0 8px;
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-number-grid .field { margin-bottom: 0; }

.settings-unit-note {
  margin: 9px 0 24px;
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.dog-setting-list {
  margin-bottom: 24px;
  border-top: 1px solid var(--rule-soft);
}

.dog-setting-card {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.dog-setting-card h3 { margin-bottom: 13px; }

.dog-setting-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dog-setting-fields .field,
.dog-owner-field { margin-bottom: 0; }

.dog-owner-field { margin-top: 10px; }

.notification-setting-list {
  margin: 0 0 24px;
  border-top: 1px solid var(--rule-soft);
}

.notification-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 70px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.notification-setting-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.notification-setting-row strong { font-size: var(--t-body); font-weight: 650; }
.notification-setting-row small { color: var(--ink-2); font-size: var(--t-meta); line-height: 1.4; }

.setting-switch {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--rule);
  transition: background 150ms ease;
}

.setting-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgb(35 31 27 / 18%);
  content: "";
  transition: transform 150ms ease;
}

.notification-setting-row[aria-checked="true"] .setting-switch { background: var(--accent); }
.notification-setting-row[aria-checked="true"] .setting-switch::after { transform: translateX(18px); }

.settings-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.settings-data-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.settings-data-row strong { font-size: var(--t-body); font-weight: 650; }
.settings-data-row small { color: var(--ink-3); font-size: var(--t-meta); line-height: 1.35; }

/* -------------------------------- overig -------------------------------- */

.toast {
  position: fixed;
  z-index: 80;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  max-width: calc(100% - 36px);
  transform: translate3d(-50%, 0, 0);
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-meta);
  font-weight: 560;
  letter-spacing: 0.01em;
  animation: toast-life 2600ms var(--ease) forwards;
}

.loading {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: var(--t-body);
  font-style: italic;
  animation: fade-in var(--slow) var(--ease) 120ms backwards;
}

.loading-mark {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* --------------------------------- hover -------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover { border-color: var(--ink-3); color: var(--ink); }
  .add-button:hover,
  .primary-button:hover,
  .quick-add button:hover { background: var(--accent-strong); }
  .week-plan-secondary:hover,
  .small-action:hover { color: var(--accent-strong); }
  .day-item:not(.context):hover .item-title { color: var(--accent); }
  .day-item:not(.context):hover .check { border-color: var(--accent); }
  .week-row:hover .week-time { color: var(--accent); }
  .agenda-today:not(:disabled):hover,
  .agenda-add-row:hover { border-color: var(--accent); background: var(--accent-wash); }
  .agenda-view-switch button:not(.active):hover { color: var(--ink); }
  .agenda-month-day:hover { background: var(--paper-2); }
  .agenda-month-day.selected:hover,
  .agenda-month-day.is-selected:hover,
  .agenda-month-day[aria-selected="true"]:hover { background: var(--accent-wash); }
  .agenda-event:hover .agenda-event-copy strong { color: var(--accent); }
  .agenda-hour:hover .agenda-hour-add { color: var(--accent); }
  .task-copy:hover strong { color: var(--accent); }
  .task-plan:hover { background: var(--accent-wash); }
  .inbox-group-head:hover .inbox-group-copy strong { color: var(--accent); }
  .inbox-group-head:hover .inbox-chevron { color: var(--ink-2); }
  .settings-category-row:hover strong { color: var(--accent); }
  .meal-idea-button:hover::before { opacity: 1; }
  .tab:not(.active):hover { color: var(--ink-2); }
  .tab-add:hover { background: var(--accent-strong); }
  .settings-actions button:hover { border-color: var(--ink-3); }
}

/* ------------------------------- responsief ----------------------------- */

@media (max-width: 360px) {
  :root { --pad-x: 16px; }

  .topbar { gap: 8px; }
  .topbar h1 { font-size: 30px; }
  .plan-in-button { padding-inline: 10px; }
  .topbar-actions .icon-button { width: 40px; }

  .daypart-head { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 11px; }
  .day-item { grid-template-columns: 22px 1fr; gap: 0 11px; }
  .part-prompt,
  .parked,
  .empty-inline { padding-left: 33px; }
  .day-overview-part span { font-size: 11px; }
  .timeline::before { left: 51px; }
  .timeline-part { padding-left: 66px; }
  .timeline-item { grid-template-columns: 42px 14px minmax(0, 1fr); column-gap: 5px; }
  .timeline-now { grid-template-columns: 42px 14px minmax(0, 1fr); column-gap: 5px; }
  .timeline-focus-span { background: linear-gradient(90deg, transparent 0 45px, var(--focus-wash) 45px 100%); }
  .timeline-focus-span::before { left: 50px; }
  .timeline-span-end { grid-template-columns: 42px 14px minmax(0, 1fr); column-gap: 5px; }
  .field-row { gap: 8px; }
  .meal-day-chips { gap: 3px; }
  .meal-setting-card .field:first-child { flex-basis: 92px; }
  .inbox-task { gap: 9px; }
  .task-plan { padding: 0 11px; }
  .tabs { padding-inline: 10px; }
  .tab { font-size: 10.5px; letter-spacing: 0; }
  .week-goal { gap: 8px; }
  .week-goal-actions { max-width: 90px; }
  .agenda-head h1,
  .agenda-period-title { font-size: 28px; }
  .agenda-today { min-width: 58px; padding-inline: 9px; }
  .agenda-month-day { min-height: 46px; padding-inline: 0; }
  .agenda-week-day,
  .agenda-day { grid-template-columns: 45px minmax(0, 1fr); gap: 8px; }
  .agenda-event { grid-template-columns: 46px minmax(0, 1fr); gap: 7px; padding-inline: 8px; }
  .agenda-hour { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .agenda-now-line { left: 49px; }
  .agenda-time-event {
    left: calc(52px + ((100% - 52px) / var(--agenda-lanes, 1) * var(--agenda-lane, 0)));
    width: calc(((100% - 52px) / var(--agenda-lanes, 1)) - 3px);
  }
  .agenda-day-notes { margin-left: 52px; }
  .schedule-row { grid-template-columns: 24px 58px minmax(0, 1fr) 14px; gap: 7px; }

  .dog-setting {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dog-setting strong { grid-column: 1 / -1; }
}

@media (min-width: 760px) {
  .shell { padding-top: 40px; }
  :root { --pad-x: 32px; }
  .today-pill { display: none; }

  .week-focus { margin-inline: -24px; padding-inline: 24px; }

  .sheet-backdrop { align-items: center; }

  .sheet {
    margin-bottom: 24px;
    border-radius: 24px;
    animation: none;
  }

  .sheet-backdrop.is-opening .sheet { animation: unfold var(--base) var(--ease-out); }

  .sheet-backdrop.is-leaving .sheet { animation: unfold var(--base) var(--ease) reverse forwards; }
}

/* Wie beweging uit heeft staan, krijgt alles meteen op zijn plek. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .toast { animation: none; }
  .agenda-page-track { transition: none; }
}