/* ==========================================================================
   Design tokens — palette is unchanged from the existing design system
   (2026-07-29 layout-spec). Everything below is a native-mobile-app pass on
   top of the same colors: elevation, motion, spacing and safe-area tokens,
   plus refined/added component rules. Every class name already referenced
   by the EJS views is preserved so no template needed to change to pick up
   the new look; a handful of flagship screens (app shell, timeline, media
   viewer, auth, settings) also got markup passes and use the newer classes
   noted inline.
   ========================================================================== */

:root {
  color-scheme: light;
  --navy: #2b3a52;
  --sky: #7bb8d4;
  --gold: #d4943a;
  --gold-dk: #b87a28;
  --green: #4e7c3a;
  --sand: #e8d5a3;
  --sand-lt: #f5edd6;
  --cream: #fdfaf3;
  --warm: #f0e8ce;
  --brown: #7a5230;
  --yellow: #f5c342;
  --yellow-lt: #fdf3cc;
  --red: #e96a6a;
  --purple: #c47fd4;

  --bg: #f2ede4;
  --border: rgba(43, 58, 82, 0.12);

  /* surfaces */
  --surface: #ffffff;
  --surface-2: var(--cream);
  --ink: var(--navy);
  --ink-soft: rgba(43, 58, 82, 0.64);
  --ink-faint: rgba(43, 58, 82, 0.42);

  /* elevation — soft, warm-tinted shadows instead of neutral grey */
  --shadow-xs: 0 1px 3px rgba(43, 58, 82, 0.07);
  --shadow-sm: 0 2px 10px rgba(43, 58, 82, 0.08);
  --shadow-md: 0 8px 24px rgba(43, 58, 82, 0.13);
  --shadow-lg: 0 18px 44px rgba(43, 58, 82, 0.2);
  --shadow-gold: 0 10px 22px rgba(212, 148, 58, 0.4);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --gap: 1rem;
  --tabbar-height: 62px;
  --header-height: 3.25rem;
  --sticky-bar-height: 4.5rem;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
}

/* Elke class die zelf `display` zet (o.a. .flash, .btn, .avatar) wint van
   de standaard `[hidden] { display: none }` van de browser, want
   auteur-CSS heeft altijd voorrang op de user-agent-stylesheet, ongeacht
   specificiteit — dus een correct gezet hidden-attribuut of `el.hidden =
   true` in JS heeft dan geen zichtbaar effect. Dit patroon is al meerdere
   keren los per component gepatcht (zie .age-compare-modal[hidden],
   .photo-lightbox[hidden], .reaction-popover[hidden], .more-sheet[hidden]
   verderop) — één globale, altijd-winnende regel voorkomt dat dit voor elk
   nieuw component opnieuw ontdekt/gepatcht moet worden. */
[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--yellow);
  color: var(--brown);
}

img,
video {
  max-width: 100%;
}

:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--navy);
}

h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

a {
  color: var(--navy);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

small {
  color: var(--ink-soft);
}

/* ---- App brand mark (used in .brand, mobile header, auth screens) ---- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 28%;
  background: var(--navy);
  color: var(--cream);
  line-height: 0;
}

.brand-logo svg {
  display: block;
}

/* ---- Topnav (desktop) ---- */
.topnav {
  /* Er hangen makkelijk 12+ losse links onder deze balk (zie partials/
     nav.ejs) — met de standaard flex-wrap:nowrap kunnen individuele
     flex-items niet verder krimpen dan hun eigen min-content-breedte, dus
     bij te weinig ruimte werd voorheen alleen de meerwoordige link ("Snel
     taggen") kapotgeknepen tot een tekst die middenin een woord afbrak,
     terwijl de rest van de rij niet netjes meeschoof. flex-wrap + expliciet
     flex-shrink:0 op de items laat de balk in plaats daarvan gewoon naar
     een tweede regel doorlopen, wat er bij smallere/desktop-site-breedtes
     opgeruimd uitziet i.p.v. verminkt. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.85rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topnav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  margin-right: 0.5rem;
  text-decoration: none;
  color: var(--navy);
}

/* Signatuur-detail uit hetzelfde designsysteem als meesdegraaf.nl/
   juuldegraaf.nl: een gouden punt direct na de merknaam. Zit op
   .brand-name (niet op .brand zelf) omdat .brand een flex-container is
   (voor de logo-icoon + naam ernaast) — een ::after direct op een
   flex-container wordt zélf een flex-item en met align-items:center dan
   los als eigen doosje gecentreerd i.p.v. gewoon op de tekstbaseline mee te
   lopen, waardoor de punt boven de tekst leek te zweven. Binnen
   .brand-name (geen flex-context) staat de pseudo-content gewoon inline
   ná de naam, op dezelfde baseline. */
.topnav .brand-name::after {
  content: '.';
  color: var(--gold);
}

.topnav a {
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--navy);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease);
  white-space: nowrap;
}

.topnav a:hover,
.topnav a.active {
  opacity: 1;
}

/* ---- Desktop topnav: primary links + compact actions cluster ---- */
.topnav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-right: auto;
}

.topnav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.topnav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--navy);
  opacity: 0.75;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.topnav-icon-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topnav-icon-btn:hover,
.topnav-icon-btn[aria-expanded='true'] {
  opacity: 1;
  background: rgba(43, 58, 82, 0.08);
}

.topnav-icon-btn .tab-badge {
  top: 1px;
  right: 1px;
}

.topnav-family-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.3rem 0.85rem 0.3rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--sand-lt);
  color: var(--brown);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.topnav-family-btn:hover {
  background: var(--sand);
}

.topnav-family-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  opacity: 0.6;
}

.topnav-more {
  position: relative;
  flex-shrink: 0;
}

.topnav-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease-spring);
  pointer-events: none;
}

.topnav-more-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Hergebruikt dezelfde .settings-group/.settings-list-markup als de
   mobiele "Meer"-sheet (partials/moreMenuContent.ejs) — hier compacter
   ingesteld voor een dropdown i.p.v. een volledig-schermbreed paneel. */
.topnav-more-menu .settings-group {
  margin-bottom: 0.6rem;
}

.topnav-more-menu .settings-group:last-child {
  margin-bottom: 0;
}

.topnav-more-menu .settings-group-title {
  margin: 0 0.5rem 0.3rem;
}

.topnav-more-menu .settings-list {
  box-shadow: none;
  border-radius: 0;
  background: none;
}

.topnav-more-menu .settings-list li + li {
  border-top: none;
}

.topnav-more-menu .settings-row {
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  min-height: 0;
}

.topnav-more-menu .settings-row:hover {
  background: var(--sand-lt);
}

.topnav-more-menu .settings-row-icon {
  width: 28px;
  height: 28px;
}

.topnav-more-menu .settings-row-icon svg {
  width: 15px;
  height: 15px;
}

.topnav-more-menu .settings-row-chevron {
  display: none;
}

/* ---- Family switcher / mobile app header ---- */
/* Op desktop zit de familieswitcher + alle snelle acties nu al netjes in
   .topnav (zie partials/nav.ejs) — deze balk is dus alleen nog de mobiele
   app-header en blijft standaard verborgen; hieronder in de
   max-width:720px-media-query wordt hij weer getoond. */
.familybar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.5rem;
  background: var(--sand-lt);
  border-bottom: 1px solid var(--border);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

.familybar > a:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--brown);
}

.familybar .switch-hint {
  margin-left: 0.5rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: underline;
}

/* ---- Bottom tab bar (mobile) ---- */
.tabbar {
  display: none;
}

@media (max-width: 720px) {
  .topnav {
    display: none;
  }

  .tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(43, 58, 82, 0.1);
    padding-bottom: var(--safe-b);
  }

  .tabbar-group {
    display: flex;
    flex: 1;
    min-width: 0;
  }

  .tabbar a,
  .tabbar button {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 0.55rem 0.2rem 0.45rem;
    min-height: 44px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.64rem;
    text-decoration: none;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    transition:
      color var(--dur) var(--ease),
      transform var(--dur-fast) var(--ease);
  }

  .tabbar a:active:not(.tab-upload),
  .tabbar button:active {
    transform: scale(0.92);
  }

  .tabbar .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 24px;
    border-radius: var(--radius-pill);
    transition: background-color var(--dur) var(--ease-spring);
  }

  .tabbar .tab-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tabbar a.active {
    color: var(--gold-dk);
  }

  .tabbar a.active .tab-icon {
    background: var(--yellow-lt);
  }

  .tabbar a.active .tab-icon svg {
    stroke-width: 2.1;
  }

  .tabbar .tab-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: var(--radius-pill);
    background: var(--red);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
  }

  .tabbar .tab-upload {
    flex: 0 0 auto;
    position: relative;
  }

  .tabbar .tab-upload .tab-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(155deg, var(--gold) 0%, var(--gold-dk) 100%);
    color: #fff;
    margin-top: -24px;
    box-shadow:
      var(--shadow-gold),
      0 0 0 4px rgba(255, 255, 255, 0.92);
    transition: transform var(--dur-fast) var(--ease-spring);
  }

  .tabbar .tab-upload .tab-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.4;
  }

  .tabbar .tab-upload:active .tab-icon {
    transform: scale(0.9);
  }

  /* main.app-main (element+class) i.p.v. .app-main (class): moet zwaarder
     wegen dan de latere, ongeconditioneerde ".container { padding: ... }"
     verderop in dit bestand. Die shorthand-regel heeft anders exact
     dezelfde specificiteit en staat later in het bestand, en overschreef
     zo stilletjes elke padding-bottom die hier gezet werd — vandaar dat
     eerdere aanpassingen van deze waarde helemaal geen effect hadden. */
  main.app-main {
    /* Moet exact de werkelijke hoogte van .tabbar compenseren, en die is
       zelf niet vast: .tabbar telt env(safe-area-inset-bottom) óók bovenop
       de 64px (voor het gebaren-navigatiegebied/home-indicator op telefoons
       die dat hebben). */
    padding-bottom: calc(var(--tabbar-height) + var(--safe-b) + 1.25rem);
  }

  .familybar {
    display: flex;
    flex-wrap: wrap;
    padding: calc(0.6rem + var(--safe-t)) 1rem 0.6rem;
    gap: 0.4rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 15;
    background: rgba(245, 237, 214, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .familybar > a:first-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timeline-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
  }

  .media-nav {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  button:where(:not(.btn)) {
    min-height: 44px;
  }

  .calendar-nav-arrow {
    min-width: 44px;
    min-height: 44px;
  }
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

@media (max-width: 720px) {
  .container {
    padding: 1.1rem 1rem;
  }
}

.inline-form {
  display: inline;
}

.error-page {
  text-align: center;
  padding: 3rem 1rem;
}

form.stacked {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 420px;
  background: var(--surface);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}

.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.media-actions form {
  margin: 0;
}

form.stacked label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
}

/* Labels die een checkbox/radio omwikkelen (bv. "Kinderen taggen") zijn
   losse rijen, geen sectietitels — die moeten dus als flex-rij uitlijnen
   i.p.v. de standaard block-achtige label-styling hierboven. Puur-tekst
   labels (zonder input erin, bv. de "Kinderen taggen"-sectietitel) blijven
   ongemoeid. */
form.stacked label:has(input[type='checkbox']),
form.stacked label:has(input[type='radio']) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}

form.stacked input:not([type='checkbox']):not([type='radio']),
form.stacked select,
form.stacked textarea {
  padding: 0.7rem 0.85rem;
  min-height: 46px;
  border: 1.5px solid var(--sand);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--cream);
  color: var(--ink);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* Checkboxes/radio's horen niet de tekstveld-styling hierboven te krijgen
   (padding/min-height 46px maakte er een enorm, van het label losstaand
   vierkant van) — gewoon een normale, iets grotere native checkbox. */
form.stacked input[type='checkbox'],
form.stacked input[type='radio'] {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex-shrink: 0;
  accent-color: var(--gold);
}

form.stacked textarea {
  min-height: 90px;
}

form.stacked input:not([type='checkbox']):not([type='radio']):focus,
form.stacked select:focus,
form.stacked textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 148, 58, 0.16);
}

@media (max-width: 720px) {
  form.stacked > .btn,
  form.stacked > button.btn {
    align-self: stretch;
    text-align: center;
  }
}

.btn,
button:where(:not(.btn)) {
  transition:
    transform var(--dur-fast) var(--ease-spring),
    opacity var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  min-height: 46px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
  .btn:hover {
    opacity: 0.92;
    box-shadow: var(--shadow-md);
  }
}

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

.btn-gold {
  background: linear-gradient(155deg, var(--gold) 0%, var(--gold-dk) 100%);
  box-shadow: var(--shadow-gold);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--sand);
  box-shadow: none;
}

.btn-danger {
  background: var(--red);
}

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

.btn-sm {
  padding: 0.5rem 1.1rem;
  min-height: 0;
  font-size: 0.85rem;
}

/* :where() geeft deze selector 0 specificiteit ondanks de :not() — daardoor
   verliest deze generieke "kale knop"-fallback altijd van elke component
   die zijn eigen knopklasse zet (.tile-reaction, .settings-row,
   .reaction-popover-emoji, .media-actionbar-btn, enz.), ook al staat die
   component-CSS eerder in dit bestand. Zonder :where() heeft
   "button:not(.btn)" specificiteit (0,1,1) — gelijk aan of hoger dan een
   los klasse-selector (0,1,0) — en wint hij soms alsnog van later
   gedefinieerde component-stijlen, wat meermaals per ongeluk een knop in
   een groot, romig standaardblokje veranderde i.p.v. het bedoelde
   subtiele uiterlijk. */
button:where(:not(.btn)) {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--sand);
  background: var(--cream);
  color: var(--navy);
  cursor: pointer;
}

button:where(:not(.btn)):active {
  transform: scale(0.95);
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}

.timeline-grid figure {
  margin: 0;
  position: relative;
}

.timeline-grid figure > a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease);
}

.timeline-grid figure > a:active {
  transform: scale(0.94);
}

/* ---- Nog-te-bevestigen suggestie-badge op zoekresultaten (/search) ---- */
.suggestion-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--brown);
  box-shadow: var(--shadow-xs);
}

/* Zelfde label, maar los van een foto-tegel gebruikt (bv. als voorbeeld in
   een uitlegtekst) — daar zou de absolute positionering hierboven t.o.v.
   de verkeerde voorouder positioneren. */
.suggestion-badge.inline {
  position: static;
  display: inline-block;
}

.favorite-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 26, 38, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  font-size: 0.8rem;
  pointer-events: none;
}

.timeline-grid img,
.timeline-grid video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  box-shadow: var(--shadow-sm);
}

.timeline-grid figure > a img,
.timeline-grid figure > a video {
  box-shadow: none;
}

/* ---- Media-detailweergave: swipe/pijltjes tussen foto's ---- */
.media-viewer {
  position: relative;
  margin: -1.1rem -1rem 1.25rem;
  touch-action: pan-y;
  background: #000;
}

@media (min-width: 721px) {
  .media-viewer {
    margin: 0 0 1.25rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

.media-viewer-media {
  width: 100%;
  max-height: 80vh;
  display: block;
  object-fit: contain;
  background: #000;
}

@media (min-width: 721px) {
  .media-viewer-media {
    border-radius: var(--radius-lg);
  }
}

.media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 26, 38, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  z-index: 2;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.media-nav:active {
  transform: translateY(-50%) scale(0.88);
}

.media-nav-prev {
  left: 0.5rem;
}

.media-nav-next {
  right: 0.5rem;
}

.media-viewer-media[data-zoomable] {
  cursor: zoom-in;
}

body.media-viewer-open {
  overflow: hidden;
}

.media-viewer.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  margin: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
}

.media-viewer.fullscreen .media-viewer-media {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border-radius: 0;
  object-fit: contain;
  cursor: zoom-out;
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

.media-viewer.fullscreen .media-nav {
  z-index: 101;
}

.thumbnail-pending {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--warm) 30%, var(--sand-lt) 50%, var(--warm) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.7s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  opacity: 0.75;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.timeline-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
}

.timeline-filters select,
.timeline-filters input[type='search'] {
  padding: 0.55rem 0.7rem;
  min-height: 42px;
  border: 1.5px solid var(--sand);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-family: inherit;
}

.timeline-filters label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* ---- Uitklapbare filters ---- */
.timeline-filters-wrap {
  margin-bottom: 1.25rem;
}

.timeline-filters-wrap summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: box-shadow var(--dur) var(--ease);
}

.timeline-filters-wrap summary::-webkit-details-marker {
  display: none;
}

.timeline-filters-wrap summary::before {
  content: '\1F50D';
}

.timeline-filters-wrap .filter-badge {
  background: var(--gold);
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}

.timeline-filters-wrap[open] summary {
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-md);
}

.timeline-filters-wrap .timeline-filters {
  margin-bottom: 0;
}

/* ---- Maand-tijdlijn: tabs + hero-kaart per maand ---- */
.month-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  scrollbar-width: none;
}

.month-tabs::-webkit-scrollbar {
  display: none;
}

.month-tab {
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--sand);
  background: var(--surface);
  color: var(--navy);
  text-decoration: none;
  scroll-snap-align: start;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

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

.month-tab.active {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
  box-shadow: var(--shadow-gold);
}

.month-section {
  margin-bottom: 2.5rem;
  scroll-margin-top: 4.5rem;
}

.month-hero-wrap {
  position: relative;
}

.month-hero {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 0.85rem;
  aspect-ratio: 4 / 3;
  transition: transform var(--dur-fast) var(--ease);
}

.month-hero:active {
  transform: scale(0.98);
}

.month-hero img,
.month-hero .thumbnail-pending {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.month-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 1.25rem 1.1rem;
  background: linear-gradient(transparent, rgba(18, 23, 34, 0.8));
  color: #fff;
}

.month-hero-overlay h2 {
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: 0.15rem;
}

.month-hero-overlay p {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.92;
  margin: 0;
}

.month-hero-favorite {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  color: var(--yellow);
  font-size: 1.4rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid transparent;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  box-shadow: var(--shadow-xs);
}

.flash.error {
  background: rgba(233, 106, 106, 0.13);
  color: #a83030;
  border-left-color: var(--red);
}

.flash.success {
  background: rgba(78, 124, 58, 0.13);
  color: #2d5c1a;
  border-left-color: var(--green);
}

.flash.warning {
  background: rgba(212, 148, 58, 0.13);
  color: #8a5a1a;
  border-left-color: var(--gold);
}

.flash.info {
  background: rgba(123, 184, 212, 0.18);
  color: #1f5a78;
  border-left-color: var(--sky);
}

.flash p {
  margin: 0;
}

.live-update-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  text-align: center;
}

.verify-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-radius: 0;
  border-left: none;
  text-align: center;
  box-shadow: none;
}

.verify-banner form {
  display: inline-flex;
  margin: 0;
}

/* Eenmalige welkomstbanner na het lid worden van een familie: meerdere
   rijen (titel, meldingen aanzetten, installeren) onder elkaar i.p.v. de
   gecentreerde eenregelige .verify-banner/#pwa-install-banner. */
.welcome-banner {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
}

.welcome-banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

.member-list,
.child-list,
.activity-feed,
.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.member-list li,
.child-list li,
.activity-item,
.notification-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.55rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.member-list li > span,
.child-list li > span {
  overflow-wrap: anywhere;
}

/* ---- Tags/pills, reused for roles, emoji stamps, etc. ---- */
.tag {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--sand-lt);
  color: var(--brown);
}

/* ---- Avatars (initials, activity feed) ---- */
.avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  box-shadow: var(--shadow-xs);
}

/* Eigen profielfoto i.p.v. initialen: zelfde vorm/afmeting als .avatar,
   maar dan als foto in plaats van een gekleurde cirkel met letters. */
img.avatar {
  object-fit: cover;
}

/* Een kleine/wazige gezichtscrop kan op twee mensen erg op elkaar lijken —
   op hover (desktop) of tik (mobiel, zie avatar-overlay.js) tonen we
   daarom alsnog even de initialen erover, als geheugensteun wie het is. */
.avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.avatar-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.avatar-wrap:hover .avatar-overlay,
.avatar-wrap.show-overlay .avatar-overlay {
  opacity: 1;
}

.avatar-sky {
  background: var(--sky);
}
.avatar-gold {
  background: var(--gold);
}
.avatar-green {
  background: var(--green);
}
.avatar-purple {
  background: var(--purple);
}
.avatar-red {
  background: var(--red);
}
.avatar-yellow {
  background: var(--yellow);
  color: var(--brown);
}
.avatar-brown {
  background: var(--brown);
}

/* ---- Activity feed ---- */
.activity-visits {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.visit-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.visit-avatar small {
  font-size: 0.7rem;
  opacity: 0.6;
  white-space: nowrap;
}

.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-body p {
  margin: 0 0 2px;
  font-size: 0.9rem;
}

.activity-body small {
  opacity: 0.55;
  font-size: 0.75rem;
}

.activity-thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.activity-thumb img,
.activity-thumb .thumbnail-pending {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* ---- Kalender ---- */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.calendar-nav h3 {
  margin: 0;
}

.calendar-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease);
}

.calendar-nav-arrow:active {
  background: var(--sand-lt);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}

.calendar-weekday {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  opacity: 0.5;
  padding-bottom: 0.25rem;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: var(--navy);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease);
}

.calendar-day:active {
  transform: scale(0.92);
}

.calendar-day.empty {
  background: transparent;
  box-shadow: none;
}

.calendar-day.has-media {
  background: var(--sand-lt);
  font-weight: 700;
}

.calendar-day.is-today {
  border: 2px solid var(--gold);
}

.calendar-day-num {
  font-size: 0.9rem;
}

.calendar-day-count {
  font-size: 0.65rem;
  color: var(--gold);
  font-weight: 700;
}

/* ---- Selectie-checkbox op foto-tegels (kindherkenning trainen, filmbuilder) ---- */
.media-pick-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
}

/* ---- Infinite scroll: "meer laden"-sentinel onder een timeline-grid ---- */
.infinite-scroll-sentinel {
  text-align: center;
  padding: 1.25rem;
  color: var(--navy);
  opacity: 0.55;
  font-size: 0.85rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

/* ---- Vaste actiebalk onderaan (bv. "toevoegen aan album"-picker) — blijft
   bereikbaar ongeacht hoever je door een lange/infinite-scroll-lijst
   gescrold bent, i.p.v. een knop die pas na alle foto's komt. ---- */
.sticky-submit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  padding-bottom: calc(0.85rem + var(--safe-b));
  background: rgba(253, 250, 243, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(43, 58, 82, 0.1);
}

.sticky-submit-bar-spacer {
  height: var(--sticky-bar-height);
}

@media (max-width: 720px) {
  .sticky-submit-bar {
    /* Boven de vaste .tabbar onderaan blijven staan, niet erdoorheen. */
    bottom: calc(var(--tabbar-height) + var(--safe-b));
    padding-bottom: 0.85rem;
  }

  .sticky-submit-bar-spacer {
    height: calc(var(--sticky-bar-height) + var(--tabbar-height) + var(--safe-b));
  }
}

/* ---- Storiesbalk met 1-seconde-films, boven de tijdlijn ---- */
.reel-stories {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 1.25rem;
  margin-bottom: 0.5rem;
}

.reel-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  width: 72px;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.reel-story:active {
  transform: scale(0.93);
}

.reel-story-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm);
  font-size: 1.4rem;
  box-shadow: var(--shadow-xs);
  /* Instagram/Facebook-achtige verloopring rond een nog niet bekeken
     verhaal/film — de "border als 2 lagen achtergrond"-truc, want een
     gewone `border` kan geen gradient tekenen op een cirkel. */
  border: 3px solid transparent;
  background-image: linear-gradient(var(--warm), var(--warm)),
    linear-gradient(135deg, var(--gold), var(--red), var(--purple));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.reel-story.seen .reel-story-thumb {
  background-image: linear-gradient(var(--warm), var(--warm)), linear-gradient(var(--border), var(--border));
}

.reel-story-add .reel-story-thumb {
  background-image: none;
  border-color: var(--border);
  border-style: dashed;
  color: var(--ink-soft);
  font-size: 1.6rem;
}

.reel-story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wrapper los van .reel-story-thumb (die zelf overflow:hidden heeft voor de
   ronde crop) zodat het "van wie is dit verhaal"-badge er half overheen/
   overheen kan steken zonder zelf ook afgesneden te worden. */
.reel-story-thumb-wrap {
  position: relative;
  display: inline-flex;
}

.reel-story-avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  font-size: 0.55rem;
  border: 2px solid var(--bg);
}

.reel-story small {
  font-size: 0.7rem;
  text-align: center;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- Verhaal-speler: full-screen foto-slideshow met muziek, Instagram/
   Facebook-story-stijl (zie reels/storyPlayer.ejs + photo-reel-player.js).
   Bewust los van .media-viewer (dat is voor 1 los medium met zoom/pan) —
   deze speler stuurt zijn eigen slide-timing/audio-sync aan. ---- */
.story-player {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.story-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #000;
}

.story-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  animation: story-slide-in 260ms var(--ease);
}

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

.story-tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.story-tap-prev {
  left: 0;
}

.story-tap-next {
  right: 0;
  width: 68%;
}

.story-progress {
  position: absolute;
  top: calc(var(--safe-t) + 0.6rem);
  left: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.story-progress-seg {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.story-progress-seg span {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

.story-header {
  position: absolute;
  top: calc(var(--safe-t) + 1.1rem);
  left: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.story-header-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.story-header-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.65rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.story-header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.story-header-title {
  font-weight: 800;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-header-creator {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.85;
}

.story-close,
.story-sound-toggle {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  width: 32px;
  height: 32px;
  min-height: 0;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.story-sound-toggle {
  font-size: 0.95rem;
  margin-left: auto;
}

.story-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem calc(0.7rem + var(--safe-b));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

button.story-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 0.7rem;
  min-height: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
}

.story-comment-btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
}

button.story-view-count {
  margin-left: auto;
  border: none;
  background: none;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.85;
  cursor: pointer;
  min-height: 0;
  padding: 0.3rem 0.2rem;
}

.story-comments-tray {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: flex-end;
}

.story-comments-tray-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.story-comments-tray-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 70vh;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1rem 1rem calc(1rem + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.story-comments-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.story-comments-tray-header button {
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

.story-comments-tray .comment-list {
  overflow-y: auto;
  flex: 1;
}

.story-comment-delete {
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.story-comments-empty {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.story-comment-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.story-comment-form textarea {
  flex: 1;
  min-height: 2.4rem;
  resize: none;
}

.story-delete-form {
  padding: 0.8rem;
  text-align: center;
}

.story-delete-form button {
  color: var(--red);
  background: none;
  border: none;
}

/* ---- Reacties/weergaven-rij bovenaan een filmpagina (reels/show.ejs) ---- */
.reel-social-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0;
}

.reel-view-count {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 700;
}

/* ---- Verhaal aanmaken, stap 2: full-screen preview + muziek kiezen
   (reels/storyNew.ejs + story-music-picker.js) — Facebook/Instagram-stijl:
   eerst foto's kiezen, dan een donkere, full-bleed preview van hoe het
   verhaal er straks uitziet (zelfde beeldtaal als reels/storyPlayer.ejs),
   met titel en muziekknop er zwevend overheen i.p.v. op een gewone
   lichte pagina. ---- */
.story-create-preview {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #000;
  display: flex;
  flex-direction: column;
}

.story-create-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  overflow: hidden;
}

.story-create-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.story-create-back {
  position: absolute;
  top: calc(var(--safe-t) + 1.1rem);
  left: 0.9rem;
  z-index: 2;
}

.story-create-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.2rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.story-title-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 0.6rem 0.8rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.story-title-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.story-create-hint {
  color: rgba(255, 255, 255, 0.75);
}

.story-preview-filmstrip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.6rem 0.9rem;
  background: #000;
  flex-shrink: 0;
}

.story-preview-filmstrip img {
  width: 56px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease);
}

.story-preview-filmstrip img:hover,
.story-preview-filmstrip img:active {
  opacity: 1;
}

.story-create-preview .sticky-submit-bar {
  position: static;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
  justify-content: center;
}

.story-create-preview .sticky-submit-bar-spacer {
  display: none;
}

.story-music-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 1rem;
}

button.story-music-trigger-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}

.story-music-trigger-icon {
  font-size: 1.1rem;
}

button.story-music-trigger-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  border-radius: 50%;
  border: none;
  background: var(--warm);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.story-music-tray {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-end;
}

.story-music-tray-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.story-music-tray-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 80vh;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1rem 1rem calc(1rem + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
}

.story-music-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.story-music-tray-header button {
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

.story-music-search {
  width: 100%;
}

.story-music-mood-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.story-music-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.story-music-chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.story-music-option {
  text-align: left;
  border: none;
  background: var(--warm);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.story-music-track-list {
  overflow-y: auto;
  flex: 1;
}

.story-music-track {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.story-music-preview-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-height: 0;
  border-radius: 50%;
  border: none;
  background: var(--warm);
  color: var(--ink);
  font-size: 0.75rem;
  cursor: pointer;
}

.story-music-track[data-preview-playing] .story-music-preview-btn {
  background: var(--gold);
  color: #fff;
}

.story-music-track-title {
  font-weight: 700;
}

/* ---- Filmtegel tussen foto's/video's op de tijdlijn ---- */
.reel-tile {
  position: relative;
  display: block;
}

.reel-tile-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(43, 58, 82, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* ---- Meldingen ---- */
.notification-item.unread {
  border-left: 3px solid var(--gold);
}

.notification-thumb {
  flex-shrink: 0;
}

.notification-body {
  flex: 1;
  min-width: 0;
}

.notification-body p {
  margin: 0 0 2px;
  font-size: 0.9rem;
  font-weight: 600;
}

.notification-item:not(.unread) .notification-body p {
  font-weight: 400;
  opacity: 0.65;
}

.notification-body small {
  opacity: 0.55;
  font-size: 0.75rem;
}

.notification-item form {
  margin: 0;
  flex-shrink: 0;
}

/* ---- Upload-formulier: drag & drop, mobiel-vriendelijk ---- */
.upload-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 560px;
}

.upload-dropzone {
  position: relative;
}

.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-dropzone-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 3.25rem 1.5rem;
  border: 2px dashed var(--sand);
  border-radius: var(--radius-lg);
  background: var(--cream);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .upload-dropzone-label:hover {
    border-color: var(--gold);
  }
}

.upload-dropzone-label:active {
  transform: scale(0.99);
}

.upload-input:focus-visible + .upload-dropzone-label {
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.upload-dropzone.drag-active .upload-dropzone-label {
  border-color: var(--gold);
  background: var(--sand-lt);
}

.upload-dropzone-icon {
  font-size: 2.6rem;
}

.upload-dropzone-label strong {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}

.upload-dropzone-hint {
  font-size: 0.85rem;
  opacity: 0.6;
}

.upload-summary {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.upload-filelist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upload-filelist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}

.upload-file-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.upload-file-info {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
}

.upload-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-file-size {
  opacity: 0.55;
  font-size: 0.75rem;
}

button.upload-file-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--sand-lt);
  color: var(--brown);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.upload-submit {
  align-self: flex-start;
}

.upload-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .upload-dropzone-label {
    padding: 2.5rem 1rem;
  }

  .upload-submit {
    align-self: stretch;
    text-align: center;
  }
}

/* ---- Gezichtsherkenning-suggesties ---- */
.face-suggestions {
  margin-bottom: 1.25rem;
}

.face-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--yellow-lt);
  border: 1.5px solid var(--yellow);
  border-radius: var(--radius);
}

.face-suggestion-crop {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--yellow);
  object-fit: cover;
}

.face-reassign-select {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--sand);
  background: var(--cream);
  color: var(--navy);
  cursor: pointer;
}

/* Hoe zeker het systeem is van een suggestie ("82% match") — de score komt
   uit MediaFaceDetection.confidenceScore (1 - afstand tot het dichtstbij-
   zijnde gezichtsprofiel), berekend op het moment van suggereren. */
.face-match-score {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--brown);
}

/* ---- Trainen: kandidaat-gezichten (/people/:id/train, /children/:id/train) ---- */
.face-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.face-candidate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--yellow-lt);
  border: 1.5px solid var(--yellow);
  border-radius: var(--radius-sm);
}

.face-candidate-crop-slot {
  width: 96px;
  height: 96px;
}

.face-candidate-crop {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--yellow);
  object-fit: cover;
}

.face-candidate-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
}

.face-candidate-actions .btn,
.face-candidate-actions button,
.face-candidate-actions select {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}

.face-candidate-crop-slot {
  cursor: zoom-in;
}

/* Gelijkenis-score t.o.v. deze persoon ("82%") — alleen zichtbaar zodra de
   pool al op gelijkenis herrangschikt is (zie personTrainingService/
   childTrainingService.listCandidates), dus niet bij een net toegevoegd,
   nog ongetraind kind/familielid. */
.face-candidate-score {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--cream);
}

/* "Getrainde foto's"-pagina: markeert een training-sample die opvallend
   afwijkt van de rest van hetzelfde profiel (findOutlierKeys) -- puur een
   signaal om te bekijken, geen automatische afkeuring. */
.face-candidate-outlier-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
}

/* ---- Foto-lightbox (volledige foto bekijken vanuit een uitsnede) ----
   Zelfde patroon als .age-compare-modal (children/list.ejs), maar zonder
   navigatie tussen meerdere foto's -- hier gaat het altijd om precies 1
   foto per keer openen. */
body.photo-lightbox-open {
  overflow: hidden;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 34, 0.78);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.photo-lightbox.is-visible .photo-lightbox-backdrop {
  opacity: 1;
}

.photo-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.photo-lightbox.is-visible .photo-lightbox-content {
  opacity: 1;
  transform: scale(1);
}

.photo-lightbox-content img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.photo-lightbox-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--sand-lt);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- Snelle tagger (/tagger) ---- */
.tagger-progress {
  font-weight: 700;
  color: var(--brown);
}

.tagger-presence {
  font-size: 0.85rem;
  color: #1f5a78;
  margin-top: -0.5rem;
}

.tagger-card {
  background: var(--cream);
  border: 1.5px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.tagger-photo {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--navy);
}

.tagger-children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.child-tag-btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--sand);
  background: var(--cream);
  color: var(--navy);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.child-tag-btn:active {
  transform: scale(0.94);
}

.child-tag-btn.suggested {
  border-color: var(--yellow);
}

.child-tag-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---- Andere familieleden in de tagger: bewust kleiner/rustiger dan de
   kind-knoppen hierboven — kinderen blijven de primaire workflow. ---- */
.tagger-section-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--brown);
  margin: 0 0 0.4rem;
}

.tagger-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.person-tag-btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--sand);
  background: var(--cream);
  color: var(--navy);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.person-tag-btn:active {
  transform: scale(0.94);
}

.person-tag-btn.suggested {
  border-color: var(--yellow);
}

.person-tag-btn.active {
  background: var(--brown);
  border-color: var(--brown);
  color: #fff;
}

.tagger-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.tagger-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tagger-hint {
  font-size: 0.85rem;
  color: var(--brown);
}

.tagger-empty {
  text-align: center;
  padding: 3rem 1rem;
}

/* ---- Vergelijk op leeftijd (kinderenpagina) ---- */
.age-compare {
  margin-bottom: 1.75rem;
}

.age-compare-title {
  margin-bottom: 0.6rem;
}

.age-compare-strip {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0.25rem 1rem;
  margin: 0 -0.25rem;
}

.age-compare-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 168px;
  background: var(--surface);
  border: 1.5px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 0.9rem 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.age-compare-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.age-compare-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.age-compare-label:active {
  transform: scale(0.94);
}

@media (hover: hover) {
  .age-compare-label:hover {
    filter: brightness(1.06);
  }
}

.age-compare-photos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.age-compare-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 68px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.age-compare-photo img {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 2px solid var(--sand-lt);
  transition: border-color var(--dur) var(--ease);
}

.age-compare-photo:hover img {
  border-color: var(--gold);
}

.age-compare-child-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--navy);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.age-compare-open {
  overflow: hidden;
}

.age-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
}

/* Een class-selector met `display` heeft dezelfde specificiteit als de
   standaard-`[hidden] { display: none }` van de browser, en auteur-CSS wint
   dan altijd van die UA-regel — zonder deze regel bleef de modal dus een
   onzichtbare, volledig-scherm laag die alle klikken/scrollen op de hele
   pagina onderschepte, óók terwijl het hidden-attribuut nog stond. */
.age-compare-modal[hidden] {
  display: none;
}

.age-compare-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 34, 0.78);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.age-compare-modal.is-visible .age-compare-modal-backdrop {
  opacity: 1;
}

.age-compare-modal-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.age-compare-modal.is-visible .age-compare-modal-content {
  opacity: 1;
  transform: scale(1);
}

.age-compare-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--sand-lt);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.age-compare-modal-age {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 0 0 1.25rem;
}

.age-compare-modal-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

.age-compare-modal-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 220px;
}

.age-compare-modal-figure img {
  width: 220px;
  height: 220px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.age-compare-modal-figure figcaption {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--navy);
}

.age-compare-modal-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(43, 58, 82, 0.55);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 1;
  /* Standaard onzichtbaar en niet-klikbaar: zonder dit blijven de pijlen
     zichtbaar "hangen" terwijl de achtergrond/inhoud al wegfadet bij het
     sluiten (die fade duurt 200ms, zie children-compare.js), want zonder
     eigen transition sprongen ze in één keer van zichtbaar naar weg. */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.age-compare-modal.is-visible .age-compare-modal-nav {
  opacity: 1;
  pointer-events: auto;
}

.age-compare-modal.is-visible .age-compare-modal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .age-compare-modal {
    padding: 0.5rem;
  }

  .age-compare-modal-nav {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  .age-compare-modal-figure,
  .age-compare-modal-figure img {
    width: 150px;
    height: 150px;
  }
}

/* ==========================================================================
   New native-feeling components — settings list, chips, cards, media action
   bar, reaction row, album grid, auth shell. Used by the redesigned
   screens; kept scoped so they don't clash with the shared rules above.
   ========================================================================== */

/* ---- Grouped settings/menu list ("Meer", Instellingen) ---- */
.settings-group {
  margin-bottom: 1.5rem;
}

.settings-group-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0.25rem 0.5rem;
}

.settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.settings-list li + li {
  border-top: 1px solid var(--border);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 30px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.settings-row:active {
  background: var(--sand-lt);
}

.settings-row-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--sand-lt);
  color: var(--brown);
}

.settings-row-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-row-label {
  flex: 1;
  min-width: 0;
}

.settings-row-meta {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.settings-row-chevron {
  flex-shrink: 0;
  color: var(--ink-faint);
  display: inline-flex;
}

.settings-row-chevron svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-row.danger {
  color: var(--red);
}

.settings-row.danger .settings-row-icon {
  background: rgba(233, 106, 106, 0.14);
  color: var(--red);
}

/* ---- Album grid (native "Albums" tab look) ---- */
.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 560px) {
  .album-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.album-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease);
}

.album-card:active {
  transform: scale(0.97);
}

.album-card-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--sand) 0%, var(--warm) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.55rem;
  overflow: hidden;
}

.album-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-card-cover svg {
  width: 34%;
  height: 34%;
  stroke: var(--brown);
  fill: none;
  stroke-width: 1.5;
  opacity: 0.65;
}

.album-card-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* ---- Familie-overzicht (personen + leden) ---- */
.familie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.familie-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.familie-card.familie-card-person-only {
  border: 1px dashed var(--sand-lt);
  box-shadow: none;
}

.familie-card-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.4rem;
}

.familie-card-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
}

.familie-card-relation {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.familie-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.familie-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.25rem;
}

.familie-card-actions form,
.familie-card-actions a {
  width: 100%;
}

/* ---- Media detail action bar + reaction chips ---- */
.media-actionbar {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.media-actionbar form {
  margin: 0;
}

.media-actionbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--sand);
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-spring);
}

.media-actionbar-btn:active {
  transform: scale(0.94);
}

.media-actionbar-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-actionbar-btn.is-active {
  background: var(--yellow-lt);
  border-color: var(--yellow);
  color: var(--brown);
}

.media-actionbar-btn.is-active svg {
  fill: var(--gold);
  stroke: var(--gold-dk);
}

.media-actionbar-btn.danger {
  color: var(--red);
  border-color: rgba(233, 106, 106, 0.4);
}

.reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--sand-lt);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brown);
}

.reaction-picker {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}

.reaction-picker button {
  font-size: 1.2rem;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.reaction-picker button:active {
  transform: scale(0.85);
}

/* ---- Snel reageren rechtstreeks vanaf een tegel (tijdlijn/zoeken/
   suggesties, overal waar partials/timelineGridItems.ejs gebruikt wordt) —
   een badge op de tegel + een centrale popover met de 5 emoji, zodat
   reageren niet meer vereist dat je eerst de foto opent. ---- */
/* "button.tile-reaction" (element+klasse) i.p.v. ".tile-reaction" alleen:
   moet minstens even zwaar wegen als de generieke "button:not(.btn)"-regel
   verderop in dit bestand (die ook min-height:44px zet op mobiel) — anders
   wint die generieke resetstijl alsnog en werd dit een groot, romig blok
   zonder het bedoelde subtiele, doorschijnende badge-uiterlijk. Zelfde
   klasse bug als eerder bij .more-sheet-handle. */
button.tile-reaction {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  border: none;
  background: rgba(20, 26, 38, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

button.tile-reaction:active {
  transform: scale(0.88);
  opacity: 1;
}

.tile-reaction svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.tile-reaction.is-mine {
  background: var(--gold);
  opacity: 1;
}

.tile-reaction-emoji {
  font-size: 0.78rem;
}

/* De hero-varianten van tile-reaction/tile-comment-badge worden niet meer
   los absoluut gepositioneerd, maar zitten samen in .month-hero-badges
   (zie hieronder) — die ene wrapper regelt de plek, hier alleen nog de
   grotere afmeting t.o.v. de gewone tegel-badges. */
button.tile-reaction.tile-reaction--hero {
  position: static;
  height: 30px;
  min-width: 30px;
  padding: 0 0.6rem;
  font-size: 0.78rem;
}

.tile-reaction--hero svg {
  width: 15px;
  height: 15px;
}

.tile-reaction--hero .tile-reaction-emoji {
  font-size: 0.95rem;
}

/* Zelfde reden als hierboven bij .tile-reaction--hero: "button.tile-reaction"
   (element+klasse) alléén verliezen van .story-like-btn zou een kwestie van
   bron-volgorde zijn (beide even specifiek) — een latere wijziging elders in
   dit bestand kan die volgorde per ongeluk omdraaien. Vandaar ook hier de
   dubbele klasse, net als bij --hero, zodat de override altijd wint ongeacht
   waar in het bestand hij staat. (Eerder stond deze regel vóór de
   button.tile-reaction-basisregel en verloor hij daardoor de position:static
   weer, met een like-knop die bovenop de kijkers-knop belandde tot gevolg.) */
button.tile-reaction.story-like-btn {
  position: static;
  height: 34px;
  min-width: 34px;
  padding: 0 0.7rem;
  font-size: 0.85rem;
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}

.story-like-btn svg {
  width: 16px;
  height: 16px;
}

/* Aantal comments (Comment-model, tekst-reacties) op een tegel — bewust
   een <span>, geen <button>: het icoon is puur informatief, de hele tegel
   is al de link naar de detailpagina waar je de comments leest. Andere
   hoeken zijn al bezet (.suggestion-badge linksboven, .favorite-badge
   rechtsboven, .tile-reaction/.reel-tile-badge rechtsonder), dus linksonder. */
.tile-comment-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(20, 26, 38, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.tile-comment-badge svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-comment-badge--hero {
  position: static;
  height: 30px;
  min-width: 30px;
  padding: 0 0.6rem;
  font-size: 0.78rem;
}

.tile-comment-badge--hero svg {
  width: 15px;
  height: 15px;
}

/* Groepeert de hero-badges (comments/reactie) linksboven, als flex-rij
   i.p.v. losse position:absolute-hoeken — zo maakt het voor de layout niet
   uit of er 0, 1 of 2 badges zijn. Bewust NIET onderin (zoals de gewone
   tegel-badges): de tekst-overlay (maandnaam + leeftijden) staat daar en
   kan lang worden, dus badges liepen daar overheen. Rechtsboven is al
   .month-hero-favorite, dus linksboven. */
.month-hero-badges {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.reaction-popover {
  position: fixed;
  inset: 0;
  /* Moet boven ELKE andere overlay kunnen verschijnen, ook de full-screen
     verhaal-speler (.story-player z-index 200, de reacties/muziek-lades
     daarbinnen tot 220) — anders opent de popover wel (JS-wise), maar zit
     hij onzichtbaar/ontikbaar erachter. Vandaar ruim boven dat bereik. */
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1rem 2rem;
}

.reaction-popover[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .reaction-popover {
    padding-bottom: calc(var(--tabbar-height) + var(--safe-b) + 1rem);
  }
}

.reaction-popover-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 34, 0.4);
  opacity: 0;
  border: none;
  padding: 0;
  transition: opacity var(--dur) var(--ease);
}

.reaction-popover.is-open .reaction-popover-backdrop {
  opacity: 1;
}

.reaction-popover-panel {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.4rem;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 0.55rem 0.65rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease-spring);
}

.reaction-popover.is-open .reaction-popover-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

button.reaction-popover-emoji {
  width: 50px;
  height: 50px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

button.reaction-popover-emoji:active {
  transform: scale(0.85);
}

button.reaction-popover-emoji.is-active {
  background: var(--yellow-lt);
  box-shadow: 0 0 0 2px var(--gold) inset;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comment-list li {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.comment-list p {
  margin: 0 0 2px;
}

/* ---- Auth screens: branded, centered onboarding shell ---- */
.auth-shell {
  max-width: 380px;
  margin: 0 auto;
  padding-top: calc(var(--safe-t) + clamp(1rem, 6vh, 3rem));
}

.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.auth-header .brand-logo {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
}

.auth-header h1 {
  margin: 0;
  font-size: 1.5rem;
}

.auth-header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.auth-shell form.stacked {
  max-width: none;
  box-shadow: var(--shadow-md);
}

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

/* ---- Section headers used on flagship screens ---- */
.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.page-title-row h1 {
  margin: 0;
}

/* ---- "Meer"-tabblad als toggelbaar bottom sheet i.p.v. alleen een losse
   pagina: tikken op de tab opent een overlay-paneel, nogmaals tikken (of de
   achtergrond/handle) sluit hem weer — /more blijft daarnaast als volwaardige
   pagina bestaan (progressive enhancement: werkt ook zonder JS). ---- */
.more-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.more-sheet[hidden] {
  display: none;
}

.more-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 34, 0.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  border: none;
  padding: 0;
}

.more-sheet.is-open .more-sheet-backdrop {
  opacity: 1;
}

.more-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border-radius: 26px 26px 0 0;
  padding: 0.5rem 1.1rem calc(1.5rem + var(--safe-b));
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-spring);
}

.more-sheet.is-open .more-sheet-panel {
  transform: translateY(0);
}

/* Specificiteit (element+klasse) moet minstens gelijk zijn aan de generieke
   "button:not(.btn)"-regel verderop in dit bestand — anders wint die
   generieke knopstyling (padding/min-height:44px/rand/achtergrond) alsnog
   van deze regel ondanks dat hij later in het bestand staat, en werd deze
   sluitknop een groot, leeg pilvormig blok zonder zichtbaar icoon. */
button.more-sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  border-radius: 50%;
  background: var(--sand-lt);
  border: none;
  margin: 0.7rem auto 1rem;
  padding: 0;
  color: var(--brown);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}

button.more-sheet-handle:active {
  transform: scale(0.9);
}

.more-sheet-handle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
}

body.more-sheet-open {
  overflow: hidden;
}

/* ---- Empty states ---- */
.empty-state {
  text-align: center;
  padding: 3rem 1.25rem;
  color: var(--ink-soft);
}

.empty-state-icon {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* ---- Verjaardagsbanner: subtiele viering bovenaan de tijdlijn als een
   kind vandaag jarig is (mediaController.timeline berekent dit puur uit de
   al opgehaalde kinderenlijst, geen extra query). Bewust rustig gehouden —
   een licht wapperend vlaggenlijntje en een zachtjes wiebelend taartje,
   geen volledige-schermbrede confetti-explosie. Respecteert de globale
   prefers-reduced-motion-regel bovenaan dit bestand. ---- */
.birthday-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--yellow-lt) 0%, var(--sand-lt) 100%);
  padding: 1.85rem 1.25rem 1.15rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.birthday-flags {
  position: absolute;
  top: 0;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.birthday-flags span {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 13px solid var(--gold);
  transform-origin: top center;
  animation: birthday-flag-sway 2.6s ease-in-out infinite;
}

.birthday-flags span:nth-child(2n) {
  border-top-color: var(--sky);
  animation-delay: 0.15s;
}

.birthday-flags span:nth-child(3n) {
  border-top-color: var(--purple);
  animation-delay: 0.3s;
}

.birthday-flags span:nth-child(4n) {
  border-top-color: var(--green);
  animation-delay: 0.45s;
}

.birthday-flags span:nth-child(5n) {
  border-top-color: var(--red);
  animation-delay: 0.6s;
}

@keyframes birthday-flag-sway {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

.birthday-banner-icon {
  display: inline-block;
  font-size: 1.9rem;
  animation: birthday-icon-bounce 1.8s ease-in-out infinite;
}

@keyframes birthday-icon-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-6deg);
  }
}

.birthday-banner p {
  margin: 0.4rem 0 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--brown);
}

/* ---- Seizoensbanner (kerst/oud&nieuw/pasen) — zelfde opzet/animatie als
   .birthday-banner hierboven (deelt .birthday-flags en .birthday-banner-
   icon), alleen de kleurthema's per feest verschillen. Bepaald puur op
   datum in utils/seasonalEvents.js, geen instelbare kalender. ---- */
.seasonal-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.25rem 1.15rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.seasonal-banner p {
  margin: 0.4rem 0 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--brown);
}

.seasonal-banner--christmas {
  background: linear-gradient(150deg, #fdeceb 0%, var(--cream) 100%);
}

.seasonal-banner--christmas .birthday-flags span {
  border-top-color: var(--red);
}

.seasonal-banner--christmas .birthday-flags span:nth-child(2n) {
  border-top-color: var(--green);
}

.seasonal-banner--christmas .birthday-flags span:nth-child(3n) {
  border-top-color: var(--gold);
}

.seasonal-banner--newyear {
  background: linear-gradient(150deg, var(--yellow-lt) 0%, #f3ecfb 100%);
}

.seasonal-banner--newyear .birthday-flags span {
  border-top-color: var(--purple);
}

.seasonal-banner--newyear .birthday-flags span:nth-child(2n) {
  border-top-color: var(--gold);
}

.seasonal-banner--newyear .birthday-flags span:nth-child(3n) {
  border-top-color: var(--sky);
}

.seasonal-banner--easter {
  background: linear-gradient(150deg, #eef7e5 0%, var(--yellow-lt) 100%);
}

.seasonal-banner--easter .birthday-flags span {
  border-top-color: var(--green);
}

.seasonal-banner--easter .birthday-flags span:nth-child(2n) {
  border-top-color: var(--sky);
}

.seasonal-banner--easter .birthday-flags span:nth-child(3n) {
  border-top-color: var(--yellow);
}

/* ---- Leeftijdsdekking van het trainingsprofiel (children/train.ejs) ---- */
.age-coverage-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}

.age-coverage-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 62px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--sand-lt);
  font-family: 'Nunito', sans-serif;
}

/* Een leeg leeftijdsjaar is juist het signaal om op te trainen, dus valt op
   in plaats van weg. */
.age-coverage-band.is-empty {
  background: transparent;
  border: 1px dashed var(--red);
  color: var(--red);
}

.age-coverage-year {
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.age-coverage-band.is-empty .age-coverage-year {
  color: inherit;
}

.age-coverage-count {
  font-weight: 800;
  font-size: 0.95rem;
}