/*
  Tuindagboek, gedeelde componenten (docs/ontwerp.md, Componenten).
  Bijbehorende bouwstenen: js/ui/componenten.js. Alleen tokens, geen losse
  kleuren. Schermspecifieke stijl hoort in css/schermen/<naam>.css.
  Volgorde: kop en navigatiebalk, tabbalk, knoppen, segmentbalk, taakrij en
  afvinkrondje, statuslabels, groeistrook, oogst, chips, lijstgroepen,
  formulieren, lege staat, laden, meldingen, inline pagina.
*/

/* ===================== Grote titel en navigatiebalk ===================== */

.kop { padding-top: var(--space-1); }
.kop-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--size-tap);
}
.grote-titel {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-largetitle);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}
.kop-knoppen { display: flex; gap: var(--space-2); flex: none; }
.kop-regel {
  margin-top: var(--space-1);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
}
.kop-regel b, .kop-regel strong { color: var(--color-text); font-weight: var(--weight-bold); }

.navbalk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: calc(var(--safe-top) + var(--size-navbar));
  padding: var(--safe-top) calc(var(--safe-right) + var(--space-2)) 0 calc(var(--safe-left) + var(--space-2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--color-material);
  -webkit-backdrop-filter: var(--blur-material);
  backdrop-filter: var(--blur-material);
  border-bottom: 1px solid var(--color-line);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.navbalk.toon { opacity: 1; transform: none; pointer-events: auto; }
.navbalk-titel {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-headline);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.navbalk-rechts {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ===================== Tabbalk ===================== */

.tabbalk {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--color-material);
  -webkit-backdrop-filter: var(--blur-material);
  backdrop-filter: var(--blur-material);
  border-top: 1px solid var(--color-line);
}
.tabbalk ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: var(--content-max);
  margin: 0 auto;
}
.tab {
  width: 100%;
  min-height: var(--size-tabbar);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-0);
  padding: var(--space-1) 0 var(--space-0);
  color: var(--color-text-3);
  font-size: var(--text-caption-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: center;
}
.tab[aria-current="page"] { color: var(--color-accent); }
.tab-icoon { display: grid; place-items: center; width: 26px; height: 26px; }
.tab:focus-visible { outline-offset: -3px; }

/* ===================== Knoppen ===================== */

.icoonknop {
  width: var(--size-tap);
  height: var(--size-tap);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  color: var(--color-accent);
  transition: transform var(--duration-instant) var(--ease-standard);
}
.icoonknop-kaal { background: none; box-shadow: none; }
.icoonknop:active { transform: scale(0.94); }
.icoonknop[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }

.knop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-tap);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  transition: transform var(--duration-instant) var(--ease-standard), background-color var(--duration-fast);
}
.knop:active { transform: scale(0.98); }
.knop-primair { min-height: 50px; background: var(--color-accent); color: var(--color-on-accent); }
.knop-primair:active { background: var(--color-accent-pressed); }
.knop-secundair { min-height: 50px; background: var(--color-surface-2); color: var(--color-accent); }
.knop-secundair:active { background: var(--color-surface-3); }
.knop.knop-tekst { padding: 0 var(--space-2); background: none; color: var(--color-accent); }
.knop-destructief { background: none; color: var(--color-danger); }
.knop-breed { width: 100%; }
.knop[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.knop.bezig > :not(.knop-spruit) { visibility: hidden; }
.knop-spruit {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: spruit-groeit var(--duration-grow) var(--ease-out) infinite alternate;
  transform-origin: 50% 85%;
}
@keyframes spruit-groeit { from { transform: scale(0.6); } to { transform: scale(1); } }

/* ===================== Segmentbalk ===================== */

.segmenten.plakt {
  position: sticky;
  top: calc(var(--safe-top) + var(--size-navbar));
  z-index: 15;
  padding: var(--space-1) 0;
  background: var(--color-bg);
}
.segmentbalk {
  display: grid;
  grid-auto-flow: column;
  /* Gelijke kolommen, maar nooit smaller dan de inhoud: met grote tekst
     scrolt de balk zelf opzij in plaats van de hele pagina. */
  grid-auto-columns: minmax(min-content, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  position: relative; /* ook verborgen tekst (.sr) blijft binnen de balk */
}
.segmentbalk::-webkit-scrollbar { display: none; }
.segment {
  min-height: var(--size-tap);
  padding: 0 var(--space-2);
  border-radius: calc(var(--radius-lg) - var(--space-1));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-subhead);
  font-weight: var(--weight-bold);
  color: var(--color-text-2);
  text-align: center;
  transition: background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), color var(--duration-base);
}
.segment[aria-current="true"] {
  background: var(--color-surface);
  box-shadow: var(--shadow-segment);
  color: var(--color-text);
}
/* In donker is --color-surface donkerder dan het spoor: daar een lichtere vulling met een rand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segment[aria-current="true"] {
    background: var(--color-surface-3);
    box-shadow: var(--shadow-segment), inset 0 0 0 1px var(--color-control);
  }
}
:root[data-theme="dark"] .segment[aria-current="true"] {
  background: var(--color-surface-3);
  box-shadow: var(--shadow-segment), inset 0 0 0 1px var(--color-control);
}
.teller {
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.teller.is-nul { background: transparent; color: var(--color-text-2); box-shadow: inset 0 0 0 1.5px var(--color-control); }

/* ===================== Lijst met taakrijen ===================== */

.groepkop {
  margin: var(--space-6) var(--space-1) var(--space-3);
  font-size: var(--text-footnote);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
}
.lijst {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.taakrij { position: relative; user-select: none; -webkit-user-select: none; }
.taakrij + .taakrij { border-top: 1px solid var(--color-line); }
.taakrij::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-accent-soft));
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}
.taakrij.is-gedaan::before { opacity: 0.9; }
.taakrij.is-laatste { box-shadow: inset 4px 0 0 var(--color-last-line); }
.taakrij-binnen {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-row);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
}
.taakrij-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-check);
  border-radius: var(--radius-md);
  text-align: left;
}
.taakrij-tekst { min-width: 0; display: flex; flex-direction: column; }
.taakrij-titel {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
  transition: color var(--duration-slow);
}
.taakrij.is-gedaan .taakrij-titel { color: var(--color-text-2); }
.taakrij-uitleg {
  font-size: var(--text-subhead);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.taakrij-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
}
.venster { font-variant-numeric: tabular-nums; }
.venster-laatste { color: var(--color-last-fg); font-weight: var(--weight-bold); }
.taakrij-gedaan { color: var(--color-done-fg); font-weight: var(--weight-bold); }
.taakrij-kas { display: inline-flex; color: var(--color-text-2); }
.taakrij-overgeslagen { color: var(--color-text-2); font-weight: var(--weight-bold); }
.taakrij.is-overgeslagen .taakrij-titel { color: var(--color-text-2); }
/* Tekstknop in plaats van het afvinkrondje (overgeslagen klus terugzetten). */
.taakrij-actie {
  flex: none;
  min-height: var(--size-tap);
  min-width: var(--size-tap);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-subhead);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

/* Inklapbare groep ("Kan ook nog (18)"): de groepkop is een knop. */
.inklap-kop { margin-bottom: var(--space-2); }
.inklap-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--size-tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-size: var(--text-subhead);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-align: left;
}
.inklap-knop svg {
  flex: none;
  color: var(--color-text-3);
  transition: transform var(--duration-base) var(--ease-standard);
}
.inklap-knop[aria-expanded="true"] svg { transform: rotate(90deg); }
.taakrij-wacht { display: inline-flex; color: var(--color-text-3); }

/* ---------- Afvinkrondje: een zaadje dat uitloopt (uit Groeiend) ---------- */
.afvink {
  position: relative;
  flex: none;
  width: var(--size-check);
  height: var(--size-check);
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.afvink svg { width: var(--size-check); height: var(--size-check); overflow: visible; }
.afvink .rand {
  fill: var(--color-surface);
  stroke: var(--color-control);
  stroke-width: 2.25;
  transform-origin: 26px 30px;
  transition: fill var(--duration-base) var(--ease-standard), stroke var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-spring);
}
.afvink .haak {
  fill: none;
  stroke: var(--color-on-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--duration-base) var(--ease-out) var(--delay-check);
}
.afvink .spruit {
  transform: scale(0) rotate(-30deg);
  transform-origin: 26px 17px;
  transition: transform var(--duration-slow) var(--ease-spring) var(--delay-check);
}
.afvink .spruit path { fill: var(--illu-fresh); }
.afvink .spruit .nerf { fill: none; stroke: var(--color-accent); stroke-width: 1.2; }
.afvink[aria-pressed="true"] .rand, .afvink.is-gedaan .rand { fill: var(--color-accent); stroke: var(--color-accent); }
.afvink[aria-pressed="true"] .haak, .afvink.is-gedaan .haak { stroke-dashoffset: 0; }
.afvink[aria-pressed="true"] .spruit, .afvink.is-gedaan .spruit { transform: none; }
.afvink:active .rand { transform: scale(0.88); }
.afvink.plop .rand { animation: plop var(--duration-slow) var(--ease-spring); }
.afvink.plop::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid var(--illu-fresh);
  animation: kring var(--duration-ring) var(--ease-out) forwards;
  pointer-events: none;
}
/* Toekomstige week: een lege stip, geen knop. */
.afvink-stip .rand { fill: var(--color-surface-2); stroke: var(--color-line); transform: scale(0.45); }
.afvink-stip .spruit { display: none; }
@keyframes plop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes kring { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ===================== Statuslabels, stempels, initialen ===================== */

.statuslabel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2) 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
}
.status-nieuw { background: var(--color-new-bg); color: var(--color-new-fg); }
.status-loopt { background: var(--color-run-bg); color: var(--color-run-fg); }
.status-laatste { background: var(--color-last-bg); color: var(--color-last-fg); }
.status-oogsten { background: var(--color-harvest-bg); color: var(--color-harvest-fg); }
.status-gedaan { background: var(--color-accent-soft); color: var(--color-done-fg); }

.stempel-vak { display: inline-block; line-height: 0; }

.initiaal {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: 50%;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-on-person);
  background: var(--color-person-a);
}
.initiaal.persoon-b { background: var(--color-person-b); }

/* ===================== Groeistrook (basis) ===================== */

.groeistrook {
  position: relative;
  /* Tekst, balk en vorstregel staan onder elkaar in de stroom: op ware
     grootte precies zoals de tekening (96 hoog), met grote tekst groeit de
     strook mee in plaats van dat de regels over elkaar vallen. */
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) 3px 100px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* De getekende scène (s-strook, 360 x 96) staat rechtsonder op ware
     grootte, zodat zon en grond op elke breedte gelijk blijven. Links (en
     boven, als de strook groeit) vult dit vlak aan met dezelfde lagen als de
     rand van de tekening (lucht, heuvels, inktlijn, compost, grond), vanaf de
     onderkant gemeten, zodat er geen naad is. */
  background: linear-gradient(0deg,
    var(--scene-soil) 0 20px, var(--scene-compost) 20px 23px, var(--illu-ink) 23px 25px,
    var(--scene-hill) 25px 30px, var(--scene-hill-2) 30px 34px, var(--scene-sky-2) 34px 52px, var(--scene-sky-1) 52px);
  isolation: isolate;
}
/* Zonder vorstregel blijft de balk op dezelfde hoogte. */
.groeistrook:not(:has(.groeistrook-vorst)) { padding-bottom: 28px; }
.groeistrook-scene {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 360px;
  height: 96px;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--illu-ink) 48px);
  mask-image: linear-gradient(to right, transparent, var(--illu-ink) 48px);
}
@media (max-width: 400px) {
  .groeistrook-scene { -webkit-mask-image: none; mask-image: none; }
}
.groeistrook-scene svg { width: 360px; height: 96px; }
.groeistrook-plant { position: absolute; left: var(--space-3); bottom: 16px; width: 72px; height: 80px; }
.groeistrook-plant svg { width: 72px; height: 80px; transform-origin: 50% 90%; }
.groeistrook-plant svg.groeit { animation: plant-groeit var(--duration-grow) var(--ease-out); }
@keyframes plant-groeit { from { transform: scaleY(0.82) scaleX(0.94); opacity: 0.6; } to { transform: none; opacity: 1; } }
.groeistrook-tekst {
  position: relative;
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
  line-height: var(--leading-tight);
}
.groeistrook-getal {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-largetitle);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.groeistrook.is-klaar .groeistrook-rest {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-title-2);
  color: var(--color-text);
}
.groeistrook-blaadjes {
  position: relative;
  margin-top: auto;
  min-height: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-0);
  color: var(--color-control);
}
.groeistrook-blaadjes .aan { color: var(--color-accent); }
.groeistrook-balk {
  display: block;
  width: min(160px, 100%);
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent) calc(var(--deel) * 100%), var(--color-surface) 0);
  box-shadow: inset 0 0 0 1px var(--color-control);
}
.groeistrook-vorst {
  position: relative;
  align-self: flex-end;
  max-width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-footnote);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--scene-on-soil);
  text-align: right;
  /* Op ware grootte staat de regel op de grond; met grote tekst reikt hij
     tot over de heuvels, en dan houdt de grondkleur eronder hem leesbaar. */
  background: var(--scene-soil);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-1);
  margin-right: calc(-1 * var(--space-1));
}
.groeistrook-vorst svg { flex: none; }

/* ===================== Seizoensbalk (jaarbalk) ===================== */

.seizoensbalk { display: flex; flex-direction: column; gap: var(--space-1); }
.seizoensbalk-spoor {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--cal-track);
}
.seizoensbalk-balk {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--van) * 100%);
  width: calc((var(--tot) - var(--van)) * 100%);
  border-radius: var(--radius-pill);
  background: var(--cal-planten);
}
.seizoensbalk-balk.balk-binnen { background: var(--cal-binnen); }
.seizoensbalk-balk.balk-buiten { background: var(--cal-buiten); }
.seizoensbalk-balk.balk-oogst { background: var(--cal-oogst); }
.seizoensbalk-vandaag {
  position: absolute;
  top: -3px;
  left: calc(var(--op) * 100% - 1px);
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--cal-today);
}
.seizoensbalk-maanden {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-text-3);
  text-align: center;
}

/* ===================== Oogstregel en oogstchip ===================== */

.oogstregel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-tap);
  margin-right: calc(-1 * (var(--gutter) + var(--safe-right)));
}
.oogstregel-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-footnote);
  font-weight: var(--weight-bold);
  color: var(--color-harvest-fg);
}
.oogstregel-lijst {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--space-1) calc(var(--gutter) + var(--safe-right)) var(--space-1) var(--space-0);
}
.oogstregel-lijst::-webkit-scrollbar { display: none; }
/* Breder dan de inhoud (iPad, Mac): de rij loopt niet tot de schermrand, dus
   een zachte rand rechts laat zien dat er meer chips zijn. */
@media (min-width: 600px) {
  .oogstregel { margin-right: 0; }
  .oogstregel-lijst {
    padding-right: var(--space-8);
    -webkit-mask-image: linear-gradient(to left, transparent, var(--illu-ink) var(--space-8));
    mask-image: linear-gradient(to left, transparent, var(--illu-ink) var(--space-8));
  }
}
.oogstregel-lijst li { flex: none; scroll-snap-align: start; }
.oogstchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--size-tap);
  padding: 0 var(--space-4) 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: background-color var(--duration-slow);
}
.oogstchip-sticker { display: inline-grid; transition: transform var(--duration-slow) var(--ease-spring); }
.oogstchip-kas { display: inline-flex; color: var(--color-run-fg); }
.oogstchip-vink {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: scale(0);
  transition: transform var(--duration-slow) var(--ease-spring);
}
.oogstchip[aria-pressed="true"] { background: var(--color-accent-soft); }
.oogstchip[aria-pressed="true"] .oogstchip-sticker { transform: translateY(-3px); }
.oogstchip[aria-pressed="true"] .oogstchip-vink { transform: scale(1); }

/* ===================== Keuzechips ===================== */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * (var(--gutter) + var(--safe-right))) 0 0;
  padding-right: calc(var(--gutter) + var(--safe-right));
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  position: relative;
  isolation: isolate;
  flex: none;
  min-height: var(--size-tap);
  padding: 0 var(--space-4);
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
}
.chip::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  transition: background-color var(--duration-fast);
}
.chip[aria-checked="true"] { color: var(--color-on-accent); }
.chip[aria-checked="true"]::before { background: var(--color-accent); }

/* ===================== Lijstgroepen (iOS Instellingen) ===================== */

.lijstgroep { margin-top: var(--space-6); }
.lijstgroep-kop {
  margin: 0 var(--space-4) var(--space-2);
  font-size: var(--text-footnote);
  font-weight: var(--weight-bold);
  color: var(--color-text-2);
}
.lijstgroep-rijen {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.lijstgroep-rijen > li + li { border-top: 1px solid var(--color-line); margin-left: var(--space-4); }
/* Rijen na de eerste: de scheidingslijn springt in, de rij en de tekst niet. */
.lijstgroep-rijen > li + li > .lijstrij {
  width: calc(100% + var(--space-4));
  margin-left: calc(-1 * var(--space-4));
  padding-left: var(--space-4);
}
.lijstrij {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  text-align: left;
}
.lijstrij > svg { color: var(--color-accent); }
.lijstrij-label { flex: 1; min-width: 0; }
.lijstrij-waarde { color: var(--color-text-3); text-align: right; }
.lijstrij > svg:last-child:not(:first-child) { color: var(--color-text-3); }
.lijstrij-gevaar, .lijstrij-gevaar > svg { color: var(--color-danger); }
.lijstgroep-voetnoot {
  margin: var(--space-2) var(--space-4) 0;
  font-size: var(--text-footnote);
  color: var(--color-text-3);
}
.schakelaar { accent-color: var(--color-accent); width: 51px; height: 31px; flex: none; margin: 0; }

/* ===================== Formuliervelden ===================== */

.veld { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.veld-label { font-size: var(--text-footnote); font-weight: var(--weight-bold); color: var(--color-text-2); }
.veld-invoer {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  background-clip: padding-box; /* geen tweede ring van de achtergrond in de doorzichtige rand */
  color: var(--color-text);
  font-size: max(16px, var(--text-body));
  box-shadow: inset 0 0 0 1px var(--color-control);
}
textarea.veld-invoer { min-height: 96px; resize: vertical; line-height: var(--leading-body); }
.veld-invoer::placeholder { color: var(--color-text-3); }
.veld-invoer:focus { border-color: var(--color-accent); box-shadow: none; outline: none; }
.veld-invoer:focus-visible { outline: none; }
.veld-invoer[aria-invalid="true"] { border-color: var(--color-danger); }
.veld-fout {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-danger);
}

/* ===================== Lege staat ===================== */

.lege-staat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.lege-staat-beeld { display: grid; place-items: center; }
.lege-staat-titel {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.lege-staat-tekst { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.lege-staat-tekst p { color: var(--color-text-2); }
.lege-staat-compact {
  flex-direction: row;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.lege-staat-compact .lege-staat-tekst { align-items: flex-start; gap: var(--space-0); }
.lege-staat-compact .lege-staat-tekst p { font-size: var(--text-subhead); }

/* ===================== Laden (skeletrijen, zonder glans) ===================== */

.skelet .taakrij-binnen { gap: var(--space-3); }
.skelet-tegel, .skelet-rondje, .skelet-regels span { background: var(--color-surface-2); }
.skelet-tegel { width: var(--size-tile); height: var(--size-tile); border-radius: var(--radius-md); flex: none; }
.skelet-regels { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.skelet-regels span { height: 12px; border-radius: var(--radius-pill); width: 70%; }
.skelet-regels span + span { width: 45%; }
.skelet-rondje { width: 34px; height: 34px; margin: 9px; border-radius: 50%; flex: none; }

/* ===================== Meldingen ===================== */

.offline-balk {
  position: sticky;
  top: 0;
  z-index: 25;
  padding: calc(var(--safe-top) + var(--space-2)) calc(var(--gutter) + var(--safe-right)) var(--space-2) calc(var(--gutter) + var(--safe-left));
  background: var(--color-offline-bg);
  color: var(--color-offline-fg);
  font-size: var(--text-footnote);
  font-weight: var(--weight-bold);
  text-align: center;
}

.toast-plek {
  position: fixed;
  left: calc(var(--safe-left) + var(--gutter));
  right: calc(var(--safe-right) + var(--gutter));
  bottom: calc(var(--safe-bottom) + var(--size-tabbar) + var(--space-3));
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.zonder-tabbalk .toast-plek { bottom: calc(var(--safe-bottom) + var(--space-4)); }
.toast {
  pointer-events: auto;
  width: 100%;
  max-width: var(--content-max);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  font-weight: var(--weight-semibold);
  animation: toast-in var(--duration-base) var(--ease-out);
}
.toast-knop {
  min-height: var(--size-tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===================== Inline pagina (navigatiestapel) ===================== */

.pagina {
  position: fixed;
  inset: 0 0 calc(var(--safe-bottom) + var(--size-tabbar)) 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-sheet);
  box-shadow: var(--shadow-sheet);
}
.zonder-tabbalk .pagina { bottom: 0; }
.pagina.is-binnen { transform: none; }
.pagina-balk {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: calc(var(--safe-top) + var(--size-navbar));
  padding: var(--safe-top) calc(var(--safe-right) + var(--space-2)) 0 calc(var(--safe-left) + var(--space-1));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1);
  background: var(--color-material);
  -webkit-backdrop-filter: var(--blur-material);
  backdrop-filter: var(--blur-material);
  border-bottom: 1px solid var(--color-line);
}
.terugknop {
  justify-self: start;
  max-width: 100%;
  min-height: var(--size-tap);
  min-width: var(--size-tap);
  display: inline-flex;
  align-items: center;
  gap: var(--space-0);
  padding-right: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
}
.terugknop-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagina-titel {
  grid-column: 2;
  max-width: 60vw;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-headline);
  line-height: var(--leading-snug);
  text-align: center;
}
.pagina-acties { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-1); }
.pagina-inhoud {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) calc(var(--safe-right) + var(--gutter)) var(--space-8) calc(var(--safe-left) + var(--gutter));
}

/* ===================== Minder beweging ===================== */
/* De tokens zetten alle duren op 1 ms; keyframe-animaties gaan hier uit,
   anders blijft een tussenframe staan. */
@media (prefers-reduced-motion: reduce) {
  .afvink.plop .rand,
  .afvink.plop::after,
  .groeistrook-plant svg.groeit,
  .knop-spruit,
  .toast { animation: none; }
  .afvink.plop::after { display: none; }
}

/* ===================== Verborgen taken (pagina, js/ui/verborgen.js) ===================== */
/* Herbruikbaar: Deze week en later Mijn tuin. */
.verborgen-intro {
  margin: var(--space-2) var(--space-1) var(--space-5);
  font-size: var(--text-callout);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
}
.verborgen .lijstgroep-kop { margin-bottom: var(--space-2); }
.verborgen-rij {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-row);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
}
.verborgen-rij + .verborgen-rij { border-top: 1px solid var(--color-line); }
.verborgen-rij > svg { flex: none; }
.verborgen-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.verborgen-titel { font-size: var(--text-headline); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.verborgen-uitleg {
  font-size: var(--text-subhead);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}