/*
  Scherm "Deze week" (docs/ontwerp.md, Schermen, Deze week), plus de twee
  inline pagina's die het opent: de achterkant van een taak en de herinnering.
  Alleen tokens. Ritme volgens het hoogtebudget: 12 boven de strook, 8 tot de
  oogstregel, 12 tot de segmentbalk, 8 tot de eerste groepkop.
*/

/* ---------- Kop ---------- */
.week .kop-regel { margin-top: var(--space-1); }
.week-herinnering { display: inline-flex; align-items: center; gap: var(--space-0); white-space: nowrap; }
.week-herinnering svg { color: var(--color-text-2); }

/* Zeven mini-blaadjes rechts in de compacte navigatiebalk (stadium van de plant). */
.week-mini { display: inline-flex; gap: 1px; color: var(--color-control); padding-right: var(--space-1); }
.week-mini .aan { color: var(--color-accent); }

/* ---------- Strook, oogst, segmenten ---------- */
.week-inhoud > .groeistrook { margin-top: var(--space-3); }
.week-inhoud > .oogstregel { margin-top: var(--space-2); }
.week-inhoud > .segmenten { margin-top: var(--space-2); }
.week-inhoud > .segmenten:first-child { margin-top: var(--space-3); }
.week .groeistrook + .segmenten { margin-top: var(--space-2); }

/* Seizoenslaag: boven de scène, onder plant en tekst. */
.groeistrook-seizoen { z-index: -1; }

/* ---------- Secties en rijen ---------- */
/* Een sprong naar een sectie landt onder de plakkende segmentbalk
   (html heeft al scroll-padding voor de navigatiebalk). */
.week-sectie { scroll-margin-top: calc(var(--size-tap) + 4 * var(--space-1)); }
.week-sectie > .groepkop { margin-bottom: var(--space-2); }
.week-sectie > .groepkop:first-of-type { margin-top: var(--space-2); }
/* Tussen twee open groepen 12 (niet 16): met laatste kans, nieuw en de
   aanvulling "Sluit het eerst" passen zo vier rijen boven de tabbalk (390 x 844). */
.week-sectie > .lijst + .groepkop { margin-top: var(--space-3); }
.week-sectie > .inklap-kop:first-of-type { margin-top: var(--space-3); }
.week-sectie > .inklap-kop + .lijst[hidden] + .inklap-kop { margin-top: var(--space-2); }
.week-sectie + .week-sectie { margin-top: var(--space-8); }
.week-sectiekop {
  margin: 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-title-2);
  line-height: var(--leading-tight);
}
.week-sectiekop + .lege-staat { margin-top: var(--space-3); }

/* De taaktekst is de instructie: hoogstens twee regels in de rij (volledig
   op de achterkant). De doorlopers staan ingeklapt, dus dat past. */
.week .taakrij-uitleg { -webkit-line-clamp: 2; }
.week .taakrij-meta { margin-top: var(--space-0); }
/* Bewuste uitzondering op "alleen tokens": 7 boven en onder (basis 8,
   er is geen token voor 7) wint 8 px over vier rijen, zodat vier rijen
   boven de tabbalk passen. De rij blijft ruim boven de 44 px (91 px). */
.week .taakrij-binnen { padding-top: 7px; padding-bottom: 7px; }

/* ---------- Achterkant (detailpagina) ---------- */
.achterkant {
  display: flex;
  flex-direction: column;
  /* Vult de pagina, zodat de actieknop ook bij weinig inhoud onderin staat. */
  min-height: calc(100dvh - var(--safe-top) - var(--size-navbar) - var(--safe-bottom) - var(--size-tabbar) - var(--space-4) - var(--space-8));
}
.zonder-tabbalk .achterkant { min-height: calc(100dvh - var(--safe-top) - var(--size-navbar) - var(--safe-bottom) - var(--space-4) - var(--space-8)); }
.achterkant > :nth-last-child(3) { margin-bottom: var(--space-6); }
.achterkant-kop {
  position: relative;
  height: 120px;
  margin: calc(-1 * var(--space-4)) calc(-1 * (var(--gutter) + var(--safe-right))) 0 calc(-1 * (var(--gutter) + var(--safe-left)));
  display: grid;
  place-items: center;
  background-color: var(--vlak, var(--print-aarde));
  background-image: radial-gradient(var(--print-dots) 1px, transparent 1.2px);
  background-size: 6px 6px;
  /* Gekartelde bovenrand, zoals de bovenkant van een zaadzakje. */
  -webkit-mask: radial-gradient(circle at 6px 0, transparent 5px, var(--illu-ink) 5.5px) top / 12px 100% repeat-x;
  mask: radial-gradient(circle at 6px 0, transparent 5px, var(--illu-ink) 5.5px) top / 12px 100% repeat-x;
}
.drukvlak-lucht { --vlak: var(--print-lucht); }
.drukvlak-lila { --vlak: var(--print-lila); }
.drukvlak-geel { --vlak: var(--print-geel); }
.drukvlak-munt { --vlak: var(--print-munt); }
.drukvlak-biet { --vlak: var(--print-biet); }
.drukvlak-aarde { --vlak: var(--print-aarde); }
.achterkant-illu { display: grid; place-items: center; -webkit-touch-callout: none; }
.achterkant-stempel { position: absolute; right: var(--space-4); bottom: var(--space-3); }
.achterkant-titel {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-title-1);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
.achterkant-sub {
  margin-top: var(--space-1);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
}
.achterkant-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
}
.achterkant-wie { color: var(--color-done-fg); font-weight: var(--weight-bold); }
.achterkant-blok { margin-top: var(--space-6); }
.achterkant-blok > p { font-size: var(--text-callout); font-weight: var(--weight-medium); }
.achterkant-blokkop {
  margin-bottom: var(--space-2);
  font-size: var(--text-footnote);
  font-weight: var(--weight-bold);
  color: var(--color-text-2);
}
.achterkant-blok .seizoensbalk { margin: var(--space-3) 0 var(--space-2); }
.achterkant-legenda { color: var(--color-text-2); }
.achterkant-legenda time { color: var(--color-text); font-weight: var(--weight-bold); }
.achterkant-log { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-1); }
.achterkant-log li { display: flex; align-items: flex-start; gap: var(--space-2); }
.achterkant-log-tekst { display: flex; flex-direction: column; font-size: var(--text-subhead); }
.achterkant-log-kop { font-weight: var(--weight-bold); }
.achterkant-bronnen { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.achterkant-blok > .achterkant-bron {
  font-size: var(--text-footnote);
  font-weight: var(--weight-regular);
  color: var(--color-text-3);
  overflow-wrap: anywhere;
}
.achterkant-bron + .achterkant-bron { margin-top: var(--space-2); }
.achterkant-bron a { color: var(--color-text-2); }
/* Afvinken onderin, in de duimzone. */
.achterkant-acties {
  position: sticky;
  bottom: 0;
  margin: auto calc(-1 * (var(--gutter) + var(--safe-right))) calc(-1 * var(--space-8)) calc(-1 * (var(--gutter) + var(--safe-left)));
  padding: var(--space-3) calc(var(--gutter) + var(--safe-right)) var(--space-4) calc(var(--gutter) + 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);
}

/* ---------- Laten vervallen ---------- */
/* Twee tekstknoppen onder "Gedaan" op de achterkant. */
.achterkant-vervallen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-2);
  margin-top: var(--space-1);
}
.achterkant-vervallen .knop { font-size: var(--text-subhead); padding: 0 var(--space-1); }
.achterkant-vervallen .knop[hidden] { display: none; }
.achterkant-overgeslagen { color: var(--color-text-2); }

/* Rustige regel onderaan de week: "2 taken verborgen". */
.week-verborgen { margin-top: var(--space-6); display: flex; justify-content: center; }
.week-verborgen-knop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
}
.week-verborgen-knop svg { color: var(--color-text-3); }

/* ---------- Herinnering ---------- */
.herinnering-beeld {
  width: 72px;
  height: 72px;
  margin: var(--space-2) auto 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-accent);
}
.herinnering-intro {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-callout);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
}
.herinnering-blok { margin-top: var(--space-6); }
.herinnering-agenda { display: flex; flex-direction: column; gap: var(--space-2); }
.herinnering-agenda a.knop { text-decoration: none; }
.herinnering-voetnoot {
  margin: 0 var(--space-4);
  font-size: var(--text-footnote);
  color: var(--color-text-3);
}