/* Rotterdam Nu! – havenstad: kadebeton, nachtblauw, kraangeel. */
:root {
  --kade: #E8ECEE;
  --vlak: #F7F9FA;
  --inkt: #14202B;
  --staal: #566572;
  --lijn: #C3CCD3;
  --kraan: #F2B705;
  --maas: #1C4F8A;
  --maas-tekst: #FFFFFF;
  --ribbel: rgba(20, 32, 43, .14);
  --kop: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --tekst: "Atkinson Hyperlegible", system-ui, sans-serif;
  --Dash-Fill-Interactive-Strong: var(--maas);
  --Dash-Fill-Primary-Active: var(--maas);
  --Dash-Text-Strong: var(--inkt);
  --Dash-Stroke-Strong: var(--lijn);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kade: #0E1821; --vlak: #172532; --inkt: #E4EAEE; --staal: #9AA9B4; --lijn: #2C3D4C;
    --maas: #7FB0EA; --maas-tekst: #0E1821; --ribbel: rgba(14, 24, 33, .28); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kade: #0E1821; --vlak: #172532; --inkt: #E4EAEE; --staal: #9AA9B4; --lijn: #2C3D4C;
  --maas: #7FB0EA; --maas-tekst: #0E1821; --ribbel: rgba(14, 24, 33, .28); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--kade); color: var(--inkt); }
body { font: 17px/1.5 var(--tekst); -webkit-text-size-adjust: 100%; }
.app { max-width: 34rem; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* kop met voortgang */
.top { position: sticky; top: 0; z-index: 5; background: var(--kade); padding: 12px 16px 10px;
       display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--lijn); }
.merk { font: 800 26px/1 var(--kop); letter-spacing: .01em; display: inline-flex; align-items: center; gap: 6px; }
.merk-nu { background: var(--kraan); color: #14202B; padding: 3px 5px 1px; border-radius: 2px; }
.voortgang { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 4px; }
.voortgang .blok { width: 18px; height: 12px; border: 1.5px solid var(--inkt); border-radius: 1px; }
.voortgang .blok.gedaan, .voortgang .blok.nu {
  background: var(--kraan) repeating-linear-gradient(90deg, transparent 0 3px, var(--ribbel) 3px 4px); border-color: var(--kraan); }
.voortgang .blok.nu { border-color: var(--inkt); }
.voortgang-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* schermen */
.schermen { flex: 1; padding: 8px 16px 120px; }
.stap { display: none; }
.stap.actief { display: block; }
h1 { font: 800 40px/1.02 var(--kop); margin: 20px 0 8px; letter-spacing: .005em; max-width: 14ch; }
.intro { margin: 0 0 20px; max-width: 34em; }
.uitleg { margin: 2px 0 12px; color: var(--staal); font-size: 15px; max-width: 34em; }

.vraag { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.vraag legend { font-weight: 700; font-size: 18px; padding: 0; }

/* chips: meerkeuze en enkele keuze */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips .dash-options-list-option { display: inline-flex; align-items: center; cursor: pointer; margin: 0;
  padding: 9px 14px; border: 1.5px solid var(--lijn); border-radius: 8px; background: var(--vlak);
  font-size: 16px; line-height: 1.25; min-height: 44px; }
.chips .dash-options-list-option-wrapper { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.chips .dash-options-list-option[aria-selected="true"] { background: var(--maas); border-color: var(--maas); color: var(--maas-tekst); }
.chips .dash-options-list-option:focus-within { outline: 3px solid var(--kraan); outline-offset: 2px; }
#zin { display: grid; grid-template-columns: 1fr 1fr; }
#zin .dash-options-list-option { align-items: flex-start; padding: 12px; min-height: 76px; }
#zin b { display: block; font-size: 17px; }
#zin b + span { display: block; font-size: 14px; opacity: .8; margin-top: 2px; }

/* de stapel: vijf containers, steeds hoger; gekozen tot en met de keuze = kraangeel */
.stapel { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.stapel .dash-options-list-option { position: relative; flex: 1 1 0; display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-end; gap: 6px; margin: 0; cursor: pointer; min-width: 0; }
.stapel .dash-options-list-option-wrapper { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.stapel .dash-options-list-option::before { content: ""; display: block; border: 1.5px solid var(--inkt); border-radius: 2px;
  background: transparent; transition: background-color .15s; }
.stapel .dash-options-list-option:nth-child(1)::before { height: 14px; }
.stapel .dash-options-list-option:nth-child(2)::before { height: 24px; }
.stapel .dash-options-list-option:nth-child(3)::before { height: 34px; }
.stapel .dash-options-list-option:nth-child(4)::before { height: 44px; }
.stapel .dash-options-list-option:nth-child(5)::before { height: 54px; }
.stapel .dash-options-list-option[aria-selected="true"]::before,
.stapel .dash-options-list-option:not(:nth-child(6)):has(~ .dash-options-list-option:nth-child(-n+5)[aria-selected="true"])::before {
  background: var(--kraan) repeating-linear-gradient(90deg, transparent 0 5px, var(--ribbel) 5px 6px); border-color: var(--kraan); }
.stapel .dash-options-list-option[aria-selected="true"]::before { border-color: var(--inkt); }
.stapel-woord { display: block; font-size: 13px; line-height: 1.15; text-align: center; color: var(--staal); }
.stapel .dash-options-list-option[aria-selected="true"] .stapel-woord { color: var(--inkt); font-weight: 700; }
/* 'weet ik niet' staat apart, als tekstknop */
.stapel .dash-options-list-option:nth-child(6) { flex: 0 0 auto; padding-left: 6px; }
.stapel .dash-options-list-option:nth-child(6)::before { display: none; }
.stapel .dash-options-list-option:nth-child(6) .stapel-woord { border: 1.5px dashed var(--lijn); border-radius: 8px;
  padding: 8px 8px; min-height: 44px; display: flex; align-items: center; }
.stapel .dash-options-list-option:nth-child(6)[aria-selected="true"] .stapel-woord { border-style: solid; border-color: var(--inkt); }
.stapel .dash-options-list-option:focus-within::before,
.stapel .dash-options-list-option:nth-child(6):focus-within .stapel-woord { outline: 3px solid var(--maas); outline-offset: 2px; }

/* schuiven */
.schuif-blok { margin-top: 10px; }
.schuif .dash-range-slider-input { display: none; }
.schuif .dash-slider-track { background: var(--lijn); height: 6px; }
.schuif .dash-slider-thumb { width: 28px; height: 28px; background: var(--kraan); border: 2px solid var(--inkt); }
.schuif-einden { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--staal); margin-top: 4px; }
.schuif-einden span:last-child { text-align: right; }

/* invoer */
.getal { font: 700 22px var(--tekst); width: 6ch; padding: 8px 10px; border: 1.5px solid var(--lijn); border-radius: 8px;
         background: var(--vlak); color: var(--inkt); }
.kiezer { min-height: 44px; border: 1.5px solid var(--lijn) !important; border-radius: 8px; background: var(--vlak); }

/* knoppen onderaan */
.acties { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--kade); border-top: 1px solid var(--lijn);
          padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 12px; justify-content: center; }
.acties .knop { flex: 1; max-width: 16rem; }
.knop { font: 700 17px var(--tekst); min-height: 48px; padding: 10px 16px; border-radius: 8px; cursor: pointer;
        border: 1.5px solid var(--inkt); background: transparent; color: var(--inkt); }
.knop.hoofd { background: var(--maas); border-color: var(--maas); color: var(--maas-tekst); }
.knop:disabled { opacity: .35; cursor: default; }
.knop:focus-visible { outline: 3px solid var(--kraan); outline-offset: 2px; }

/* overzicht */
.tips { list-style: none; padding: 0; margin: 12px 0 0; }
.tip { padding: 14px 0; border-top: 1px solid var(--lijn); }
.tip-tijd { display: inline-block; font: 800 20px/1 var(--kop); background: var(--kraan); color: #14202B;
            padding: 3px 6px 2px; margin-right: 8px; border-radius: 2px; }
.tip-plek { color: var(--staal); font-size: 15px; margin-top: 2px; }
.tip-waarom { font-size: 14px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* gekozen chip: tekst altijd leesbaar, ook met focus (Dash kleurt de focus anders) */
.chips .dash-options-list-option[aria-selected="true"],
.chips .dash-options-list-option[aria-selected="true"] * { color: var(--maas-tekst) !important; }

/* label 'uit Lekker eten' naast een onderwerp dat een tegel hoog heeft gezet */
.bron:not(:empty) { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 2px; vertical-align: 2px;
  background: var(--kraan); color: #14202B; font-size: 13px; font-weight: 700; }
.melding:empty { display: none; }
.melding { margin: 0 0 24px; padding: 10px 12px; border-left: 4px solid var(--kraan); background: var(--vlak); font-size: 15px; }
.knop.meer { display: block; width: 100%; margin-top: 16px; }
.extra { margin-top: 10px; }
.knop.klein { min-height: 44px; margin-top: 10px; font-size: 16px; }
.kaart { height: 260px; margin: 8px 0 4px; border: 1.5px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.tip-nr { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px;
          border-radius: 50%; background: var(--kraan); color: #14202B; font-weight: 700; font-size: 14px; vertical-align: 2px; }
.tip-feiten { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; margin-top: 4px; }
.tip-knoppen { display: flex; gap: 10px; margin-top: 10px; }
.tip-knoppen .knop { text-decoration: none; display: inline-flex; align-items: center; margin-top: 0; padding: 8px 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* taalknop */
.taal { margin-left: auto; font-size: 14px; color: var(--inkt); text-decoration: underline; padding: 8px 4px; }
.taal + .voortgang { margin-left: 12px; }

/* duimpjes */
.duimen { display: inline-flex; gap: 6px; margin-left: auto; }
.duim { min-width: 44px; min-height: 44px; border: 1.5px solid var(--lijn); border-radius: 8px; background: var(--vlak);
        font-size: 18px; cursor: pointer; filter: grayscale(1); opacity: .75; }
.duim.aan { filter: none; opacity: 1; border-color: var(--inkt); background: var(--kraan); }
.duim:focus-visible { outline: 3px solid var(--maas); outline-offset: 2px; }

/* sterren bij een tip */
.sterren { color: #B98A00; font-weight: 700; letter-spacing: 1px; }
:root[data-theme="dark"] .sterren { color: var(--kraan); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sterren { color: var(--kraan); } }

/* Hoe was het? */
.hoe-was { margin: 4px 0 28px; padding: 12px 14px; border-left: 4px solid var(--kraan); background: var(--vlak); }
.hoe-was h2 { font: 800 26px/1.1 var(--kop); margin: 0 0 4px; }
.beoordeel { padding: 10px 0; border-top: 1px solid var(--lijn); }
.sterknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.ster { min-width: 44px; min-height: 44px; font-size: 24px; line-height: 1; border: 0; background: transparent;
        color: var(--lijn); cursor: pointer; }
.sterknoppen:hover .ster { color: var(--kraan); }
.ster:hover ~ .ster { color: var(--lijn); }
.ster:focus-visible { outline: 3px solid var(--maas); }
.sterknoppen .knop { margin: 0 0 0 8px; }
.taal { font-weight: 700; text-decoration: none; border: 1.5px solid var(--inkt); border-radius: 6px;
        padding: 4px 7px; min-height: 32px; display: inline-flex; align-items: center; }
.top { gap: 10px; }
.voortgang { gap: 3px; }
.voortgang .blok { width: 14px; }
/* tegels en chips: gewone tekstkleur, ook bij focus of hover (Dash kleurt die anders blauw) */
.chips .dash-options-list-option, .chips .dash-options-list-option * { color: var(--inkt); }
.tip-actie { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--inkt);
             text-decoration-color: var(--kraan); text-decoration-thickness: 2px; }