/* De Kiesmannen's look, from dekiesmannen.nl. Fonts and logo load from their own CDN. */
@font-face { font-family: Vtcmartin; font-weight: 700; font-display: swap; src: url("https://cdn.prod.website-files.com/69a99593c1c03e3686a8ef55/69a9a3a0111b17d3fc453641_VTCMartin-XBold.otf") format("opentype"); }
@font-face { font-family: Deuterium; font-weight: 400; font-display: swap; src: url("https://cdn.prod.website-files.com/69a99593c1c03e3686a8ef55/69a998c5492d6d221769a4c7_Deuterium-Regular.otf") format("opentype"); }
@font-face { font-family: Deuterium; font-weight: 700; font-display: swap; src: url("https://cdn.prod.website-files.com/69a99593c1c03e3686a8ef55/69a998c5407a9a94d174555b_Deuterium-Bold.otf") format("opentype"); }

:root {
  --groen: #002923; --mint: #03FFD0; --roze: #FB6DFD; --oranje: #FF3D00; --bruin: #4D0E01;
  --wit: #EFEEEC; --kaart: #fff; --soft: #40564f; --line: #b9c4bf;
  --kop: Vtcmartin, Impact, "Arial Narrow", sans-serif;
  --tekst: Deuterium, Verdana, sans-serif;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--wit); color: var(--groen); font: 16px/1.55 var(--tekst); overflow-x: clip; }
main { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 6rem; }
p { margin: 0 0 1rem; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }

.top { background: var(--groen); color: #fff; padding: 1.5rem 1rem 3.25rem; }
.top > div { max-width: 46rem; margin: 0 auto; }
.top img { display: block; width: 52px; height: auto; margin-bottom: 1.5rem; }
h1, h2 { font-family: var(--kop); font-weight: 700; text-transform: uppercase; line-height: 1; }
h1 { font-size: clamp(3rem, 13vw, 6rem); margin: 0 0 1rem; }
h2 { font-size: 1.9rem; margin: 2rem 0 .6rem; }
.lead { max-width: 34rem; margin: 0; }
.band { background: #000; color: #fff; font: 700 1.5rem/1 var(--kop); text-transform: uppercase; white-space: nowrap; padding: .4rem 0; transform: rotate(-1.2deg) scaleX(1.04); overflow: hidden; }
.band-clip { overflow: hidden; padding: .75rem 0; margin-top: -2.1rem; position: relative; }

label { display: block; font-weight: 700; margin-bottom: .3rem; }
input { width: 100%; font: inherit; padding: .7rem 1rem; border: 2px solid var(--groen); border-radius: 160px; background: #fff; color: inherit; }
.box, .week { background: var(--kaart); border-radius: 24px; padding: 1.25rem; margin-top: 1rem; }
.box h2, .week h2, .done h2 { margin-top: 0; }
.box p:last-child { margin-bottom: 0; }
.fun { background: var(--mint); transform: rotate(-.7deg); }
.note { background: var(--mint); padding: .6rem .8rem; border-radius: 12px; font-size: .92rem; margin: 1.25rem 0 0; }
.error { color: var(--bruin); font-weight: 700; }
#status { margin: 0; }
#status:not(:empty) { margin-top: .5rem; }

.heads, .day { display: grid; grid-template-columns: 7.5rem 1fr 1fr; gap: .5rem; align-items: stretch; }
.heads { font-size: .85rem; color: var(--soft); padding-bottom: .25rem; }
.day { padding: .5rem 0; border-top: 1px solid var(--line); }
.date { align-self: center; font-weight: 700; }
.date small { display: block; font-weight: 400; color: var(--soft); font-size: .85rem; }
.column { display: grid; gap: .35rem; align-content: start; }
.slot { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 3rem; text-align: left; font: inherit; padding: .45rem .8rem; border-radius: 14px; border: 2px solid transparent; color: inherit; background: none; }
button.slot { background: #fff; border-color: var(--groen); cursor: pointer; }
button.slot:hover { background: var(--wit); }
button.slot .time { font-weight: 700; }
button.slot.paired { background: var(--mint); }
button.slot.paired:hover { background: #7dffe7; }
button.slot[aria-pressed="true"], button.slot.paired[aria-pressed="true"] { background: var(--groen); border-color: var(--groen); color: var(--mint); }
.why, .why-ok { font-size: .82rem; line-height: 1.3; }
.slot.hidden-slot { border: 1px dashed var(--line); color: var(--soft); }
.slot.none { color: var(--soft); font-size: .85rem; }

form { margin: .25rem 0 1rem; background: var(--wit); border-radius: 24px; padding: 1.25rem; display: grid; gap: .8rem; }
form p { margin: 0; font-weight: 700; }
.submit, .secondary { font: 600 1rem var(--tekst); text-transform: uppercase; border-radius: 160px; padding: .7rem 1.4rem; cursor: pointer; justify-self: start; }
.submit { background: var(--groen); color: var(--mint); border: 0; }
.submit:disabled { opacity: .5; cursor: default; }
.secondary { background: none; color: var(--groen); border: 2px solid var(--groen); margin-top: 1rem; }
.done { background: var(--groen); color: #fff; padding: 1.5rem; margin-top: 1.5rem; border-radius: 24px; }
.done h2 { color: var(--mint); margin-bottom: .5rem; }
.done p { margin: 0 0 .5rem; }
.prefs { margin-top: 0; }
.counter { position: sticky; bottom: .5rem; z-index: 1; font-weight: 700; background: var(--groen); color: var(--mint); border-radius: 18px; padding: .6rem 1rem; margin: 1rem 0 .75rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }
#explain { margin-top: 2rem; font-size: .92rem; }
.link { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 34rem) {
  .heads { display: none; }
  .day { grid-template-columns: 1fr 1fr; }
  .date { grid-column: 1 / -1; }
  .date small { display: inline; margin-left: .35rem; }
  main { padding: 1.25rem .75rem 5rem; min-height: 100dvh; }
  .top { padding: 1rem .9rem 2.75rem; }
  .top img { width: 40px; margin-bottom: 1rem; }
  h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
  h2 { font-size: 1.6rem; }
  .box, .week { padding: 1rem; }
  form { padding: 1rem; }
  .why, .why-ok { font-size: .875rem; }
  .slot { padding: .45rem .65rem; }
  .slot.none { min-height: 0; padding: .45rem .65rem; }
  .submit, .secondary { width: 100%; justify-self: stretch; }
  form:not(.prefs) .submit { position: sticky; bottom: .5rem; }
  #school { scroll-margin-top: .75rem; }
  #school-list { max-height: 45dvh; }
  .map { height: 200px; }
}

.map { height: 240px; border-radius: 16px; margin-bottom: .75rem; isolation: isolate; background: var(--wit); }
.map .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.05); }
.map .leaflet-tooltip { font: 700 .8rem var(--tekst); color: var(--groen); border: 0; border-radius: 160px; padding: .1rem .5rem; box-shadow: none; }
.map .leaflet-tooltip::before { display: none; }
.map-note { font-size: .92rem; }

.picker { position: relative; }
#school-list { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + .35rem); margin: 0; padding: .35rem; list-style: none; background: #fff; border: 2px solid var(--groen); border-radius: 18px; max-height: 21rem; overflow-y: auto; }
#school-list li { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; padding: .5rem .7rem; border-radius: 12px; cursor: pointer; }
#school-list li[aria-selected="true"], #school-list li:hover { background: var(--mint); }
.pick-name { font-weight: 700; }
.pick-where { grid-row: 2; font-size: .85rem; color: var(--soft); overflow-wrap: anywhere; }
.pick-type { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: .75rem; font-weight: 700; background: var(--groen); color: var(--mint); border-radius: 160px; padding: .1rem .55rem; }

.submit, .secondary, .jump { min-height: 44px; }
.link { min-height: 44px; display: inline-block; }
#school-list li { min-height: 44px; }
.epas { font-size: .92rem; margin: 1rem .25rem 0; }
.epas a { font-weight: 700; display: inline; }
.counter { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
.jump { flex: none; font: 600 .9rem var(--tekst); text-transform: uppercase; background: var(--mint); color: var(--groen); border: 0; border-radius: 160px; padding: .4rem 1rem; cursor: pointer; }
.jump:disabled { opacity: .45; cursor: default; }

.counter { flex-wrap: wrap; }
.counter > span[role="status"] { flex: 1 1 10rem; }
.meter { flex: 1 1 100%; display: flex; gap: 3px; }
.box-mark { flex: 1 1 0; max-width: 1.25rem; height: .8rem; border-radius: 3px; border: 1px solid var(--mint); opacity: .75; }
.box-mark.lit { background: var(--mint); opacity: 1; }
.box-mark.milestone { border: 2px solid var(--oranje); opacity: 1; }
.confetti { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
@media (min-width: 58rem) {
  .meter { position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 2; flex-direction: column-reverse; gap: 4px; height: min(76vh, 36rem); width: 1.5rem; }
  .box-mark { flex: 1 1 0; max-width: none; height: auto; min-height: 5px; border-color: var(--groen); }
  .box-mark.lit { background: var(--groen); }
}

.box-mark.next { box-shadow: 0 0 0 2px var(--oranje); }
.counter.reached { outline: 3px solid var(--oranje); outline-offset: 2px; }

#agenda > * { scroll-margin-top: 1rem; }