/* kandepolouit.nl — stylesheet
 *
 * De kleuren en vormen volgen de huisstijl van politie.nl. De tokens hieronder
 * komen letterlijk uit hun stylesheet (--politie-blauw, --politie-accent-*), en
 * de eerste versie van deze site gebruikte er al een paar van.
 *
 * Twee dingen maken hun stijl herkenbaar en zijn hier overgenomen: scherpe
 * hoeken — nergens een afronding — en volvlakken met witte tekst in plaats van
 * getinte kaders.
 *
 * Donkere modus kent politie.nl niet; die is hier afgeleid met hun nachtblauw
 * als grondtoon.
 */

:root {
  /* politie huisstijl */
  --blauw:       #182866;  /* --politie-blauw        */
  --nachtblauw:  #10133f;  /* --politie-nachtblauw   */
  --blauw-80:    #475485;  /* --politie-blauw-80     */
  --blauw-40:    #a3a9c2;  /* --politie-blauw-40     */
  --blauw-20:    #d0d3e0;  /* --politie-blauw-20     */
  --blauw-10:    #e7e8ef;  /* --politie-blauw-10     */
  --blauw-5:     #f3f4f7;  /* --politie-blauw-5      */
  --ijsblauw:    #eaf0f7;  /* --politie-ijsblauw-100 */
  --cyaan:       #0093d9;  /* --politie-lichtblauw   */

  --logo:        #182866;  /* officieel blauw; op donker het witte diapositief */
  --vlak:        #ffffff;
  --verzonken:   var(--ijsblauw);
  --inkt:        var(--blauw);
  --gedempt:     #4f5355;  /* --politie-donkergrijs  */
  --lijn:        var(--blauw-20);
  --lijn-zacht:  var(--blauw-10);

  /* accenten, ook uit hun palet */
  /* --politie-groen in plaats van --politie-accent-donkergroen (#008a35): wit
     op die laatste haalt 4,45:1 en dat is net te weinig voor de kleine regel in
     het volvlak. Dit is ook een officieel token en haalt 4,8:1. */
  --ja:          #008500;  /* --politie-groen              */
  --geel:        #e59c00;  /* --politie-accent-donkergeel  */
  --nee:         #b3220a;  /* --politie-accent-donkerrood  */
  --oranje:      #f28e00;  /* --politie-accent-oranje      */

  /* Lichte tinten van hun geel en oranje, voor het notitielabeltje bij de
     locatieknop. Die houdt in beide thema's dezelfde kleur, net als de gevulde
     oordeelblokken. */
  --geel-licht:   #fdf1c4;
  --oranje-licht: #fbe0c2;

  /* tekst op de gevulde vlakken; op geel en oranje moet die donker */
  --op-geel:     var(--nachtblauw);
  --op-blauw:    #ffffff;

  --knop:        var(--blauw);

  /* Politie Text staat op een politiewerkplek geïnstalleerd; elders valt hij
     terug op Arial, precies zoals politie.nl zelf doet. */
  --font: "Politie Text", PolitieText, Arial, "Helvetica Neue", Helvetica, sans-serif;
  --cijfer: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Breedte waarbinnen de inhoud blijft; achtergronden lopen door tot de rand. */
  --maxbreedte: 520px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vlak:       #131a3d;
    --verzonken:  #1b2350;
    --inkt:       #eaf0f7;
    --gedempt:    #a3a9c2;
    --lijn:       #2e3767;
    --lijn-zacht: #232b57;

    --logo:       #ffffff;
    --blauw:      #8ea6e8;
    --blauw-5:    #1b2350;
    --ijsblauw:   #1b2350;

    --knop:       #2a58b8;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vlak);
  color: var(--inkt);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.cijfers { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--cyaan);
  outline-offset: 2px;
}

/* ---------- raamwerk ---------- */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--vlak);
}

.kaart {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.kaart-kop,
.kaart-lijf,
.kaart-voet,
.installatie {
  padding-left:  max(calc(20px + env(safe-area-inset-left)),  calc((100% - var(--maxbreedte)) / 2));
  padding-right: max(calc(20px + env(safe-area-inset-right)), calc((100% - var(--maxbreedte)) / 2));
}

/* De installatiestrook is een gekleurd blok en loopt niet door tot de rand;
   die volgt dezelfde lijn met marges in plaats van padding. */
.installatie {
  padding-left: 12px;
  padding-right: 12px;
  margin-left:  max(calc(20px + env(safe-area-inset-left)),  calc((100% - var(--maxbreedte)) / 2));
  margin-right: max(calc(20px + env(safe-area-inset-right)), calc((100% - var(--maxbreedte)) / 2));
}

.kaart-lijf {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Verticaal gecentreerd tussen kop en voet. De overgebleven ruimte valt zo aan
     beide kanten in plaats van alles onderaan. */
  justify-content: center;
  gap: 20px;
  padding-top: 6px;
  padding-bottom: 24px;
}

.kolom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---------- kop ---------- */

.kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 18px;
}

.merk { display: block; color: var(--logo); }
.merk svg { display: block; width: 104px; height: auto; }

/* De pil met de plaatsnaam las als een label in plaats van als knop, terwijl dit
   de enige plek is waar de toestemmingsvraag vandaan kan komen. Het pijltje
   eronder wijst er letterlijk naar, en verdwijnt zodra de locatie is gebruikt. */
.locatie-blok {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
  /* De grens hoort hier en niet op de knop zelf: een percentage op de knop
     rekent tegen een ouder die zijn breedte juist aan die knop ontleent, en dan
     knijpt hij zichzelf dicht tot "Utr…". */
  max-width: 62%;
}

/* Een geel notitielabeltje met een tuitje naar de knop erboven. Het draagt zijn
   eigen achtergrond, dus het werkt in beide thema's zonder aparte kleuren — net
   als de gevulde oordeelblokken. */
.locatie-hint {
  position: relative;
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: var(--geel-licht);
  color: var(--nachtblauw);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  animation: wenk 2.6s ease-in-out 3;
}
.locatie-hint[hidden] { display: none; }

/* Het tuitje: een driehoekje bovenop, uitgelijnd onder de knop. */
.locatie-hint::after {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 13px;
  height: 6px;
  background: inherit;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Een krullend pijltje, geen recht: dat is het speelse tegenwicht bij een
   verder strak, hoekig scherm. */
.locatie-hint .pijl {
  width: 14px;
  height: 14px;
  flex: none;
  animation: krul 2.6s ease-in-out 3;
}

.locatie-hint[data-stand="mislukt"] {
  background: var(--oranje-licht);
  animation: none;
}

@keyframes krul {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-12deg) translateY(1px); }
  60%      { transform: rotate(6deg); }
}

@keyframes wenk {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

.locatie {
  appearance: none;
  border: 1px solid var(--lijn);
  background: transparent;
  color: var(--gedempt);
  padding: 5px 10px 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  max-width: 100%;
}
.locatie svg { width: 14px; height: 14px; flex: none; }
.locatie span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locatie:hover { color: var(--inkt); border-color: var(--gedempt); }
.locatie[data-bezig="ja"] { opacity: .55; }

/* ---------- titel ---------- */

.titel {
  margin: 0;
  font-size: clamp(30px, 8.5vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--inkt);
  text-wrap: balance;
}
.titel em { font-style: normal; color: var(--geel); }

.keuze-label {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gedempt);
}

/* ---------- oordeel ---------- */

/* Volvlak met witte tekst, zoals politie.nl zijn nadrukblokken doet — en zoals
   de eerste versie van deze site het al deed. */
.oordeel {
  padding: 20px;
  background: var(--blauw-5);
  color: var(--gedempt);
}
.oordeel p { margin: 0; }

.oordeel-context {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 6px !important;
}
.oordeel-hoofd {
  font-size: clamp(34px, 10vw, 44px);
  font-weight: 700;
  line-height: 1.05;
}
.oordeel-sub { font-size: 15px; font-weight: 600; margin-top: 5px !important; }

.oordeel[data-uitkomst="ja"]  { background: var(--ja);  color: #ffffff; }
.oordeel[data-uitkomst="nee"] { background: var(--nee); color: #ffffff; }

/* ---------- meting ---------- */

.meting {
  margin: 0;
  display: flex;
  border: 1px solid var(--lijn);
}
.meting > div {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.meting > div + div { border-left: 1px solid var(--lijn); }
.meting dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gedempt);
}
/* margin-top: auto duwt de waarde naar de onderkant van de cel. Op een smal
   scherm past "Piek gevoeld" niet op één regel; zonder dit zakt alleen die ene
   waarde mee en staan de drie cijfers niet meer op één lijn. */
.meting dd {
  margin: auto 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--inkt);
}

/* ---------- verloop ---------- */

.verloop { margin: 0; display: flex; flex-direction: column; gap: 6px; color: var(--blauw); }

.verloop-vlak { position: relative; }
.verloop svg { width: 100%; height: 110px; display: block; }

.verloop-uren { position: relative; height: 14px; }
.verloop-uren span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--gedempt);
}
.verloop-uren span:first-child { transform: none; }
.verloop-uren span:last-child  { transform: translateX(-100%); }

.verloop-as {
  display: flex;
  justify-content: center;
  font-size: 11px;
  color: var(--gedempt);
}

/* ---------- KNMI-waarschuwing ---------- */

.waarschuwing[hidden] { display: none; }

.waarschuwing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--geel);
  color: var(--op-geel);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.waarschuwing[data-niveau="oranje"] { background: var(--oranje); color: var(--nachtblauw); }
.waarschuwing[data-niveau="rood"]   { background: var(--nee);    color: #ffffff; }

.waarschuwing-kop { margin: 0; display: flex; align-items: flex-start; gap: 10px; }
.waarschuwing .stip {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; flex: none; margin-top: 5px;
}
.waarschuwing-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid currentColor;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  background: transparent;
}
.waarschuwing-knop svg { width: 12px; height: 12px; flex: none; }
.waarschuwing-knop:hover { background: rgba(255, 255, 255, .2); }

.bron {
  margin: 0;
  font-size: 11px;
  color: var(--gedempt);
  text-align: right;
}

/* ---------- acties ---------- */

.acties { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Politie.nl gebruikt rechthoekige knoppen zonder afronding. */
.dag-knop {
  appearance: none;
  border: 2px solid var(--knop);
  background: transparent;
  color: var(--knop);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
}
.dag-knop svg { width: 14px; height: 14px; }
.dag-knop:hover { background: var(--knop); color: var(--op-blauw); }
.dag-knop[data-richting="terug"] svg { transform: rotate(180deg); order: -1; }

.tekst-knop {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gedempt);
  padding: 6px 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tekst-knop svg { width: 14px; height: 14px; transition: transform .18s ease; }
.tekst-knop:hover { color: var(--inkt); }
.tekst-knop[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.kolom-detail.dicht { display: none; }

/* ---------- installatiestrook ---------- */

.installatie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--blauw-5);
  border-left: 4px solid var(--blauw);
}
.installatie[hidden] { display: none; }
.installatie-icoon { width: 20px; height: 20px; flex: none; color: var(--blauw); }
.installatie-tekst { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.installatie-tekst b { display: block; font-weight: 700; }
.installatie-tekst span { color: var(--gedempt); font-size: 12px; }
.installatie-actie {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--knop);
  color: var(--op-blauw);
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.installatie-sluit {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--gedempt);
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
  flex: none;
}

/* ---------- plaatsenkiezer ---------- */

/* Een venster in plaats van een uitklaplijst: de lijst is te lang om onder een
   knop te hangen, en met zoeken erbij hoort er toch een eigen vlak omheen.
   Hoekig en met een volvlak als kop, net als de rest. */
.kiezer {
  display: none;
  padding: 0;
  border: 1px solid var(--lijn);
  background: var(--vlak);
  color: var(--inkt);
  width: min(420px, calc(100% - 24px));
  max-height: min(80dvh, 620px);
  overflow: hidden;   /* de lijst scrollt zelf, kop en zoekvak blijven staan */
}
.kiezer[open] { display: flex; flex-direction: column; }
.kiezer::backdrop { background: rgba(16, 19, 63, .55); }

/* Zonder <dialog>-ondersteuning staat het venster er als gewoon blok; dan zet
   deze regel het alsnog midden in beeld. */
@supports not selector(dialog::backdrop) {
  .kiezer[open] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; }
}

.kiezer-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px 12px 16px;
  /* --knop en niet --blauw: die laatste is in donkere modus juist een lichte
     tint voor tekst, en dan valt de witte kop erop weg. */
  background: var(--knop);
  color: var(--op-blauw);
}
.kiezer-titel { margin: 0; font-size: 15px; font-weight: 700; flex: 1; }
.kiezer-sluit {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 2px 8px;
  flex: none;
}

.kiezer-gps {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--lijn-zacht);
  background: var(--blauw-5);
  color: var(--inkt);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-family: var(--font);
  font-size: 14px;
  text-align: left;
}
.kiezer-gps svg { width: 18px; height: 18px; flex: none; color: var(--blauw); }
.kiezer-gps b { display: block; font-weight: 700; }
.kiezer-gps-uitleg { color: var(--gedempt); font-size: 12px; }
.kiezer-gps[hidden] { display: none; }
.kiezer-gps:disabled { cursor: default; }
.kiezer-gps:disabled b { color: var(--gedempt); font-weight: 600; }

.kiezer-zoekvak { padding: 12px 16px; border-bottom: 1px solid var(--lijn-zacht); }
.kiezer-zoek {
  appearance: none;
  width: 100%;
  border: 1px solid var(--lijn);
  background: var(--vlak);
  color: var(--inkt);
  padding: 9px 11px;
  font-family: var(--font);
  /* Onder de 16px zoomt iOS in op een veld zodra het focus krijgt. */
  font-size: 16px;
}
.kiezer-zoek::-webkit-search-cancel-button { filter: grayscale(1); }

.kiezer-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.kiezer-lijst li[hidden] { display: none; }

.kiezer-plaats {
  appearance: none;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--inkt);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 10px 13px;
  font-family: var(--font);
  font-size: 15px;
  text-align: left;
}
.kiezer-plaats:hover { background: var(--blauw-5); }
.kiezer-plaats .prov { color: var(--gedempt); font-size: 12px; flex: none; }

/* De plaats waar de verwachting nu voor geldt. */
.kiezer-plaats[aria-current="true"] {
  border-left-color: var(--blauw);
  font-weight: 700;
  background: var(--blauw-5);
}

.kiezer-leeg { margin: 0; padding: 16px; color: var(--gedempt); font-size: 13px; }
.kiezer-leeg[hidden] { display: none; }

/* Achter een open venster hoort de pagina niet mee te scrollen. */
body.kiest { overflow: hidden; }

/* ---------- voet ---------- */

.kaart-voet {
  border-top: 1px solid var(--lijn);
  background: var(--verzonken);
  padding-top: 18px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--knop);
  color: var(--op-blauw);
  text-decoration: none;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
}
.sponsor svg { width: 15px; height: 15px; }
.sponsor:hover { filter: brightness(1.12); }

.voet-regels {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gedempt);
  text-wrap: balance;
}
.voet-regels a {
  color: var(--gedempt);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.voet-regels a:hover { color: var(--inkt); }

/* ---------- laadtoestand ---------- */

body.laadt .oordeel-hoofd,
body.laadt .oordeel-sub,
body.laadt .meting dd {
  color: transparent;
  background: linear-gradient(90deg, var(--lijn-zacht) 25%, var(--lijn) 50%, var(--lijn-zacht) 75%);
  background-size: 300% 100%;
  animation: schuif 1.4s ease-in-out infinite;
}
body.laadt .oordeel-sub { max-width: 70%; }
body.laadt .verloop { opacity: .2; }

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

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  :root { --maxbreedte: 1000px; }

  .kaart-kop { padding-top: 26px; padding-bottom: 20px; margin-bottom: 26px; }
  .merk svg { width: 120px; }

  .kaart-lijf {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    padding-top: 8px;
    padding-bottom: 32px;
  }

  .kolom-keuze  { flex: 1 1 50%; gap: 20px; }
  .kolom-detail { flex: 1 1 50%; gap: 18px; }

  /* Op deze breedte staat de tweede kolom er toch; inklappen zou alleen een
     leeg vlak opleveren. De knop is daarmee overbodig. */
  #details-knop { display: none; }
  .kolom-detail.dicht { display: flex; }

  .titel { font-size: 46px; }
  .oordeel { padding: 26px; }
  .oordeel-hoofd { font-size: 52px; }
  .oordeel-sub { font-size: 16px; }

  .meting dd { font-size: 22px; }

  /* De grafiek groeit mee met de schermhoogte, met een boven- en ondergrens:
     hoger dan dat gaat het verloop er alleen maar uitgerekt uitzien. */
  .verloop-vlak { height: clamp(180px, 34vh, 340px); }
  .verloop svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  .kaart-voet {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-top: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .sponsor { flex: none; padding: 11px 22px; }
  .voet-regels { text-align: right; align-items: flex-end; }
}

@media (min-width: 1200px) {
  :root { --maxbreedte: 1120px; }
  .kaart-lijf { gap: 60px; }
}

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