/* Urban Jungle: geschilderde jungle boven, jungle-bodem met labeltjes onder. Zie docs/stijl.md. */

:root {
  --paneel: #12241A;
  --tekst: #EFE8D2;
  --gedempt: #B9B49B;
  --label: #F4F0E6;        /* volgt 's avonds het label in de scène (app.js) */
  --nacht: 0;
  /* Vorm van de hangende labeltjes: vector met schuine hoeken en harde schaduw (app.js kleurt 'm mee) */
  /* zelfde vorm met een oranje rand langs de rand: de focusring van het naambordje */
  --tag-vorm-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='32' viewBox='0 0 30 32'%3E%3Cpath d='M9 2H21L30 11V32H0V11Z' fill='%23000' fill-opacity='.25'/%3E%3Cpath d='M9 0H21L30 9V30H0V9Z' fill='%23F4F0E6'/%3E%3Cpath d='M9.6 1.5H20.4L28.5 9.6V28.5H1.5V9.6Z' fill='none' stroke='%23C8481F' stroke-width='3'/%3E%3C/svg%3E");
  --tag-vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='32' viewBox='0 0 30 32'%3E%3Cpath d='M9 2H21L30 11V32H0V11Z' fill='%23000' fill-opacity='.25'/%3E%3Cpath d='M9 0H21L30 9V30H0V9Z' fill='%23F4F0E6'/%3E%3C/svg%3E");
  --stift: #1B1A18;
  --knop: #C8481F;
  --knop-rand: #6E2410;
  --lucht: #E6E2C3;
  --wieg: 1;              /* uitslag van het wiegen; gedempt bij minder beweging */
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --wieg: 0.5; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--paneel);
  color: var(--tekst);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ */
/* Scène                                                                */
/* ------------------------------------------------------------------ */

.scene {
  position: relative;
  height: clamp(290px, min(64svh, calc(100svh - 232px)), 640px);
  overflow: hidden;
  background: var(--lucht);
}

.laag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
}

/* Elke laag wiegt in een eigen tempo, rond het midden van de onderkant */
.laag-ver { animation: wieg-ver 11s ease-in-out infinite alternate; }
.laag-midden { animation: wieg-midden 8.5s ease-in-out infinite alternate; }
.laag-voor { animation: wieg-voor 7s ease-in-out -3s infinite alternate; }

@keyframes wieg-ver { from { transform: translateX(calc(-1.5px * var(--wieg))); } to { transform: translateX(calc(1.5px * var(--wieg))); } }
@keyframes wieg-midden { from { transform: rotate(calc(-0.55deg * var(--wieg))); } to { transform: rotate(calc(0.55deg * var(--wieg))); } }
@keyframes wieg-voor { from { transform: rotate(calc(0.6deg * var(--wieg))) translateX(calc(-1px * var(--wieg))); } to { transform: rotate(calc(-0.6deg * var(--wieg))) translateX(calc(1px * var(--wieg))); } }

/* De klimop wiegt zelf ook, de pot en het label staan stil */
.uj-klimop, .uj-ranken {
  transform-box: view-box;
  transform-origin: 195px 343px;
  animation: wieg-klimop 5.5s ease-in-out infinite alternate;
}
.uj-ranken { animation-duration: 6.5s; animation-delay: -2s; }
@keyframes wieg-klimop { from { transform: rotate(calc(-0.9deg * var(--wieg))); } to { transform: rotate(calc(0.9deg * var(--wieg))); } }

.stil .laag, .stil .uj-klimop, .stil .uj-ranken, .stil .hangtag { animation: none !important; }

/* Labeltjes die bovenin aan een touwtje hangen */
.hangtag {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: bengel 4.8s ease-in-out infinite alternate;
  /* doorzichtige marge: de randen van het bordje liggen dan binnen de draaiende laag
     en blijven glad (tegen de laagrand doet de grafische chip geen randafvlakking) */
  padding: 0 3px 3px;
  border: 0;
  background: none;
  z-index: 2;
}
.hangtag-titel { left: calc(15px + env(safe-area-inset-left)); }
/* heel smal (of 200% zoom): de titel is versiering, de naam is een knop */
@media (max-width: 300px) { .hangtag-titel { display: none; } }
.hangtag-wie { right: calc(13px + env(safe-area-inset-right)); animation-duration: 5.6s; animation-delay: -1.5s; cursor: pointer; min-width: 44px; }
@keyframes bengel { from { transform: rotate(calc(-1.6deg * var(--wieg))); } to { transform: rotate(calc(1.6deg * var(--wieg))); } }

.hangtag .touw {
  width: 1.5px;
  height: calc(18px + env(safe-area-inset-top));
  background: #D9D2BC;
  opacity: calc(0.85 - 0.35 * var(--nacht));
}
.hangtag .tag {
  position: relative;
  display: block;
  color: var(--stift);
  border-style: solid;
  border-color: transparent;
  border-width: 10px 10px 12px;
  border-image-source: var(--tag-vorm);
  border-image-slice: 10 10 12 fill;
  border-image-width: 10px 10px 12px;
  border-image-repeat: stretch;
  padding: 3px 2px 0;
  white-space: nowrap;
}
/* het gaatje waar het touwtje door gaat */
.hangtag .tag::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #5E5A4C;
}
.hangtag-titel .tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: #2E5A33;
}
.hangtag-wie .tag {
  min-height: 44px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.hangtag-wie small { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; color: #5E5A4C; }
.hangtag-wie b { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 17px; line-height: 1.15; max-width: clamp(3em, calc(100vw - 250px), 8.5em); overflow: hidden; text-overflow: ellipsis; }
.hangtag-wie:focus-visible { outline: none; }
.hangtag-wie:focus-visible .tag { border-image-source: var(--tag-vorm-focus); }

/* ------------------------------------------------------------------ */
/* Paneel                                                               */
/* ------------------------------------------------------------------ */

.paneel {
  max-width: 460px;
  margin: 0 auto;
  padding: 6px 20px calc(28px + env(safe-area-inset-bottom));
}

.kop {
  margin: 0;
  min-height: 1em;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
}
.zin {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--gedempt);
}
.zin strong { color: var(--tekst); font-weight: 600; }
.kop.laden { color: var(--gedempt); }

.water {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 64px;
  margin: 18px 0 6px;
  border: 0;
  border-radius: 2px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
  background: var(--knop);
  color: #FFF8EC;
  box-shadow: inset 0 -4px 0 var(--knop-rand);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 25px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.water svg { width: 40px; height: 32px; fill: currentColor; }
.water:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--knop-rand); }
.water:focus-visible { outline: 3px solid #FFF8EC; outline-offset: -7px; }
.water[aria-busy='true'] { cursor: progress; }

.melding {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gedempt);
}
.melding-knop {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--tekst);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.sectie {
  margin: 24px 0 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--gedempt);
}

/* Kwekerslabeltjes: punt links met een gaatje */
.labeltjes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.labeltje {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: 44px;
  padding: 6px 14px 6px 34px;
  background: var(--label);
  color: var(--stift);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
}
.labeltje:nth-child(odd) { transform: rotate(-0.4deg); }
.labeltje:nth-child(even) { transform: rotate(0.35deg); }
.labeltje::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--paneel);
}
.labeltje .datum { font-family: 'Permanent Marker', cursive; font-size: 18px; line-height: 1.1; }
.labeltje .wie { display: flex; justify-content: flex-end; align-items: baseline; min-width: 0; font-weight: 600; font-size: 15px; }
.labeltje .naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.labeltje .wie time { flex: none; font-weight: 400; color: #5E5A4C; margin-left: 6px; }
.labeltje .extra {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #5E5A4C;
}
.labeltje .ongedaan {
  min-height: 44px;
  padding: 0 8px;
  margin: -6px -8px -6px 0;
  border: 0;
  background: none;
  color: #8E3A22;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.labeltje.nieuw { animation: inschuiven 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; }
@keyframes inschuiven { from { transform: translateY(-14px) rotate(-2deg); opacity: 0; } }
.labeltje.wacht { background: color-mix(in srgb, var(--label) 88%, #8A8370); }

.labeltje.leeg { font-family: 'Permanent Marker', cursive; font-size: 17px; grid-template-columns: 1fr; }
.labeltjes-alles { margin-top: 7px; }
.labeltjes-alles .maand {
  margin: 14px 0 2px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--gedempt);
  list-style: none;
}

.meer {
  display: block;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tekst);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* Herinnering: uren als kwekerslabeltjes, acties als tekstknoppen */
.herinnering { margin-top: 26px; }
.herinnering .sectie { margin-top: 0; }
.herinnering-uitleg { margin: 0; font-size: 15px; line-height: 1.45; color: var(--gedempt); }
.uren { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.uur {
  position: relative;
  min-height: 44px;
  padding: 0 14px 0 30px;
  border: 0;
  --vul: color-mix(in srgb, var(--label) 30%, var(--paneel));
  background: var(--vul);
  color: var(--tekst);
  font-family: 'Permanent Marker', cursive;
  font-size: 17px;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  cursor: pointer;
}
.uur::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--paneel);
}
.uur[aria-pressed='true'] { --vul: var(--label); color: var(--stift); }
.herinnering-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 10px; }
.herinnering-acties:empty { display: none; }
.herinnering-acties .meer { margin: 0; }
.herinnering-acties a.meer { display: inline-flex; align-items: center; }
.herinner-mij {
  position: relative;
  min-height: 50px;
  padding: 0 18px 0 34px;
  border: 0;
  --vul: #2E5A33;
  background: var(--vul);
  color: var(--label);
  font-family: 'Permanent Marker', cursive;
  font-size: 19px;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  cursor: pointer;
}
.herinner-mij::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--paneel);
}

.herinner-mij[aria-busy='true'] { opacity: 0.7; cursor: progress; }

.voet {
  margin: 22px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gedempt);
}

/* ------------------------------------------------------------------ */
/* Kaartje "Wie ben jij?"                                              */
/* ------------------------------------------------------------------ */

.kaart {
  width: min(340px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 0;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
  background: var(--label);
  color: var(--stift);
}
.kaart::backdrop { background: rgba(6, 14, 9, 0.62); }
.kaart-inhoud { position: relative; padding: 30px 20px 14px; }
.kaart-inhoud::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #5E5A4C;
}
.kaart h2:focus { outline: none; }
.kaart h2 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; }
.kaart p { margin: 4px 0 16px; font-size: 15px; color: #4E4A3E; }
.keuzes { display: flex; flex-direction: column; gap: 8px; }
.keuze {
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px 0 34px;
  border: 0;
  --vul: #E7E0CC;
  background: var(--vul);
  color: var(--stift);
  font-family: 'Permanent Marker', cursive;
  font-size: 21px;
  text-align: left;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  position: relative;
  cursor: pointer;
}
.keuze::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--label);
}
.keuze.gekozen { --vul: #2E5A33; color: var(--label); }

/* Focusring die de vorm van het labeltje volgt: het hele labeltje wordt oranje en
   een iets kleinere kopie in de eigen kleur ligt erbovenop. Een gewone outline is
   rechthoekig en volgt de punt niet. */
.keuze, .uur, .herinner-mij { isolation: isolate; }
.keuze:focus-visible, .uur:focus-visible, .herinner-mij:focus-visible { outline: none; background: var(--knop); }
.keuze:focus-visible::after, .uur:focus-visible::after, .herinner-mij:focus-visible::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: var(--vul);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.anders { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.anders label { grid-column: 1 / -1; font-size: 14px; font-weight: 600; }
.anders input {
  min-height: 46px;
  padding: 0 12px;
  min-width: 0;
  width: 100%;
  border: 2px solid #CFC7B0;
  border-radius: 2px;
  background: #FFFDF7;
  color: var(--stift);
  font: 18px 'Barlow', sans-serif;
}
.anders input:focus { outline: none; border-color: #2E5A33; }
.bewaar {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 2px;
  background: #2E5A33;
  color: var(--label);
  font-weight: 600;
  cursor: pointer;
}
.sluit {
  display: block;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 0 12px;
  border: 0;
  background: none;
  color: #4E4A3E;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.noscript { padding: 20px; }

/* ------------------------------------------------------------------ */
/* Liggend en breed: scène links, paneel rechts                         */
/* ------------------------------------------------------------------ */

@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 440px);
    height: 100svh;
  }
  .scene { height: 100svh; }
  .paneel {
    height: 100svh;
    overflow-y: auto;
    max-width: none;
    margin: 0;
    padding: calc(22px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 24px;
  }
}

@media (min-width: 700px) {
  :root { --wieg: 0.6; }
  .hangtag-titel .tag { font-size: clamp(17px, 2.4svh, 26px); }
  .hangtag-wie b { font-size: clamp(17px, 2.4svh, 26px); }
}
@media (min-width: 700px) and (prefers-reduced-motion: reduce) {
  :root { --wieg: 0.3; }
}
@media (min-aspect-ratio: 1/1) and (min-width: 1000px) and (min-height: 700px) {
  .paneel { padding-top: max(40px, 9svh); }
  .kop { font-size: 46px; }
}