/* Raadsinformatie Alkmaar — één stylesheet, geen framework, geen buildstap.

   Alles wat deze pagina's laden komt van deze site: geen lettertypen of
   scripts van derden (ARCHITECTURE.md §1.7, en een raadstool belt niet naar
   buiten). De CSP staat zonder 'unsafe-inline', dus niets staat inline.

   **Licht, en alleen licht.** Er was een donkere variant die als `prefers-
   color-scheme`-blok achter een dun licht ontwerp hing. Die is weg: de vier
   soorten gezag (vergaderstuk, regeling, rijkswet, bibliotheekkopie) hebben
   elk een kleur die een contrasteis moet halen, en dat tweemaal onderhouden
   zonder het te kunnen zien is precies hoe één van de twee stil kapotgaat.
   Op papier is alles toch licht, en dat is wat de fractie print.

   Contrast, uitgerekend (WCAG 2.x, AA vraagt 4,5:1 voor tekst, 3:1 voor
   randen van bedieningselementen):
     tekst #1f2328 op wit 15,8   · op pagina #f4f5f2 14,4
     gedempt #555d66 op wit 6,7  · op pagina 6,1
     link #0b4f9c op wit 8,0     · merkgroen #1b5e20 op wit 7,9 · wit op merkgroen 7,9
     focusring #ffd54a op merkgroen 5,6 · invoerrand #8a929a op wit 3,15
     soortlabels: vergaderstuk #14532d/#e3f2e6 7,9 · regeling #4c1d95/#efe9fb 9,2
                  rijkswet #1e3a8a/#e5ebfa 8,7 · bibliotheek #7a3b00/#fdf0dc 7,6
                  spraak #0c4a55/#e0f2f5 8,6 · waarschuwing #6b3f00/#fff7e0 8,4
     soortranden op wit: #2e7d32 5,1 · #6d28d9 7,1 · #1d4ed8 6,7 · #c2410c 5,2 · #0e7490 5,4
     (de gele rand van een melding, #e3c57a, haalt 1,7 en is decoratie: de tekst
      erin haalt 8,4 en de linkerbalk is vijf pixels breed)
   Kleur is nooit het enige signaal: elk soortlabel is ook een woord. */

:root {
  color-scheme: light;
  --tekst: #1f2328;
  --gedempt: #555d66;
  --pagina: #f4f5f2;
  --vlak: #ffffff;
  --lijn: #d5d9dd;
  --rand: #8a929a;
  --merk: #1b5e20;
  --merk-donker: #144a19;
  --merk-licht: #e3f2e6;
  --link: #0b4f9c;
  --focus: #0b4f9c;
  --focus-op-donker: #ffd54a;
  --waarschuwing-tekst: #6b3f00;
  --waarschuwing-vlak: #fff7e0;
  --waarschuwing-rand: #e3c57a;
  --fout: #a01c1c;
  --code-vlak: #eef0f2;

  --bron-vergaderstukken-tekst: #14532d; --bron-vergaderstukken-vlak: #e3f2e6; --bron-vergaderstukken-rand: #2e7d32;
  --bron-modules-tekst: #14532d;         --bron-modules-vlak: #e3f2e6;         --bron-modules-rand: #2e7d32;
  --bron-regelgeving-tekst: #4c1d95;     --bron-regelgeving-vlak: #efe9fb;     --bron-regelgeving-rand: #6d28d9;
  --bron-rijksrecht-tekst: #1e3a8a;      --bron-rijksrecht-vlak: #e5ebfa;      --bron-rijksrecht-rand: #1d4ed8;
  --bron-dossiers-tekst: #7a3b00;        --bron-dossiers-vlak: #fdf0dc;        --bron-dossiers-rand: #c2410c;
  --bron-spraak-tekst: #0c4a55;          --bron-spraak-vlak: #e0f2f5;          --bron-spraak-rand: #0e7490;

  --breedte: 62rem;
  --gutter: 1rem;
  --radius: 6px;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pagina);
  color: var(--tekst);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* ---- lezen -------------------------------------------------------------- */
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 1.6rem 0 .5rem; }
h3 { font-size: 1.1rem; line-height: 1.3; margin: 0; }
p, ul, ol, dl { margin: 0 0 .9rem; }
a { color: var(--link); text-decoration: underline; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
code, .code { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: .86em; }
em { font-style: italic; }
q { quotes: "‘" "’" "‚" "’"; }
.uitleg { color: var(--gedempt); max-width: 48rem; }
.technisch { color: var(--gedempt); font-size: .9rem; margin-top: 2rem; }
.fout { font-size: 1.05rem; max-width: 48rem; }
.code { color: var(--gedempt); font-weight: 400; }

/* ---- focus en toetsenbord ----------------------------------------------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.kop :focus-visible { outline-color: var(--focus-op-donker); }
main:focus { outline: none; }
.spring {
  position: absolute; left: var(--gutter); top: -10rem;
  background: var(--vlak); color: var(--link); padding: .5rem .8rem;
  border: 2px solid var(--focus); border-radius: var(--radius); z-index: 10;
}
.spring:focus { top: .5rem; }

/* ---- kop en navigatie --------------------------------------------------- */
.kop { background: var(--merk); color: #fff; }
.kop-binnen {
  max-width: var(--breedte); margin: 0 auto; padding: .6rem var(--gutter);
  display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap;
}
.merk { color: #fff; text-decoration: none; font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.merk span { font-weight: 400; opacity: .9; }
.kop nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.kop nav a {
  color: #fff; text-decoration: none; display: inline-block; padding: .35rem 0;
  border-bottom: 3px solid transparent;
}
.kop nav a:hover { border-bottom-color: rgba(255, 255, 255, .6); }
.kop nav a[aria-current="page"] { border-bottom-color: #fff; font-weight: 600; }

main { max-width: var(--breedte); width: 100%; margin: 0 auto; padding: 1.5rem var(--gutter) 2rem; }
.voet {
  border-top: 1px solid var(--lijn); color: var(--gedempt); font-size: .88rem;
}
.voet p { max-width: var(--breedte); margin: 0 auto; padding: 1rem var(--gutter) 1.5rem; }

/* ---- formulieren -------------------------------------------------------- */
.zoekform {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 1rem var(--gutter) .5rem; margin: 1rem 0 1.5rem;
}
.form-kop { font-size: 1.05rem; margin: 0 0 .8rem; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
input, select, button {
  font: inherit; font-size: 1rem;              /* 16px: anders zoomt een telefoon in */
  color: var(--tekst); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .5rem .65rem; min-height: 2.75rem; max-width: 100%;
}
input[type="search"] { -webkit-appearance: none; appearance: none; }
select { width: 100%; }
input[type="date"] { width: 100%; }
.zoekbalk { margin-bottom: .9rem; }
.zoekbalk-rij { display: flex; gap: .6rem; flex-wrap: wrap; }
.zoekbalk-rij input { flex: 1 1 16rem; }
.knop {
  background: var(--merk); color: #fff; border-color: var(--merk);
  font-weight: 600; padding: .5rem 1.25rem; cursor: pointer; flex: 0 0 auto;
}
.knop:hover { background: var(--merk-donker); border-color: var(--merk-donker); }
.hint { color: var(--gedempt); font-size: .88rem; margin: .35rem 0 0; }

fieldset { border: 1px solid var(--lijn); border-radius: var(--radius); padding: .6rem .9rem .9rem; margin: 0 0 .9rem; min-width: 0; }
legend { font-weight: 700; font-size: .95rem; padding: 0 .35rem; }
.filters { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.filters legend { grid-column: 1 / -1; }
.veld { min-width: 0; }

/* Zoeken op betekenis: een eigen vak, zichtbaar anders dan de filters. Kan het
   niet, dan blijft het vak staan maar zegt het dat, met de reden. */
.betekenis { background: var(--merk-licht); border-color: #b9dcc0; }
.betekenis.uit { background: var(--code-vlak); border-color: var(--lijn); }
.betekenis .keuze { display: flex; align-items: center; gap: .6rem; }
.betekenis input[type="checkbox"] { width: 1.35rem; height: 1.35rem; min-height: 0; margin: 0; accent-color: var(--merk); flex: 0 0 auto; }
.betekenis label { margin: 0; font-size: 1rem; }
.betekenis .hint { margin-top: .4rem; max-width: 48rem; }
.betekenis .status { display: block; color: var(--tekst); margin-top: .3rem; }
.betekenis input:disabled + label { color: var(--gedempt); }

/* ---- uitslag ------------------------------------------------------------ */
.uitslag h2 { margin-top: 0; }
.samenvatting { color: var(--gedempt); margin-top: -.3rem; }
.melding {
  background: var(--waarschuwing-vlak); color: var(--waarschuwing-tekst);
  border: 1px solid var(--waarschuwing-rand); border-left-width: 5px;
  padding: .6rem .9rem; border-radius: var(--radius); max-width: 48rem;
}
.leeg { color: var(--gedempt); }

.legenda { margin: 0 0 1rem; font-size: .9rem; }
.legenda summary { cursor: pointer; color: var(--link); text-decoration: underline; width: max-content; max-width: 100%; }
.legenda dl { margin: .6rem 0 0; display: grid; gap: .4rem .8rem; grid-template-columns: max-content 1fr; }
.legenda dl > div { display: contents; }
.legenda dt, .legenda dd { margin: 0; }
.legenda em { color: var(--gedempt); }

.treffers { list-style: none; padding: 0; margin: 0; }
.treffers > li { margin: 0 0 .8rem; }
.treffer {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  border-left: 5px solid var(--lijn); padding: .8rem var(--gutter) .7rem;
}
.soort { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0 0 .35rem; font-size: .88rem; color: var(--gedempt); }
.soort-label {
  display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .03em;
  text-transform: uppercase; padding: .1rem .5rem; border-radius: 999px;
  background: var(--code-vlak); color: var(--tekst);
}
.titel { margin: 0 0 .35rem; }
.titel a { color: var(--link); }
.kenmerken { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: 0 0 .5rem; font-size: .88rem; }
.kenmerken > div { display: flex; gap: .35rem; }
.kenmerken dt { color: var(--gedempt); }
.kenmerken dt::after { content: ":"; }
.kenmerken dd { margin: 0; }
.tekst { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.meer { margin: -.3rem 0 .6rem; font-size: .92rem; }
.meer summary { cursor: pointer; color: var(--link); text-decoration: underline; width: max-content; max-width: 100%; }
.meer .tekst { margin-top: .4rem; }
.let-op {
  color: var(--waarschuwing-tekst); background: var(--waarschuwing-vlak);
  border: 1px solid var(--waarschuwing-rand); border-radius: var(--radius);
  padding: .35rem .6rem; font-size: .88rem; margin: 0 0 .6rem; max-width: 48rem;
}
.vindplaats { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem; margin: 0; font-size: .85rem; color: var(--gedempt); }
.vindplaats .k, .agendapunt .k { font-weight: 600; }
.vindplaats code { overflow-wrap: anywhere; background: var(--code-vlak); padding: .05rem .3rem; border-radius: 3px; color: var(--tekst); }
.geen-link { color: var(--fout); }
.agendapunt { font-size: .92rem; color: var(--gedempt); margin: 0 0 .4rem; }
.tijd { font-weight: 600; }
.rol, .gremium { color: var(--gedempt); }

/* De soort van de bron: een kleur per soort gezag, en altijd ook het woord. */
.bron-vergaderstukken { border-left-color: var(--bron-vergaderstukken-rand); }
.bron-vergaderstukken .soort-label { background: var(--bron-vergaderstukken-vlak); color: var(--bron-vergaderstukken-tekst); }
.bron-modules { border-left-color: var(--bron-modules-rand); }
.bron-modules .soort-label { background: var(--bron-modules-vlak); color: var(--bron-modules-tekst); }
.bron-regelgeving { border-left-color: var(--bron-regelgeving-rand); }
.bron-regelgeving .soort-label { background: var(--bron-regelgeving-vlak); color: var(--bron-regelgeving-tekst); }
.bron-rijksrecht { border-left-color: var(--bron-rijksrecht-rand); }
.bron-rijksrecht .soort-label { background: var(--bron-rijksrecht-vlak); color: var(--bron-rijksrecht-tekst); }
.bron-dossiers { border-left-color: var(--bron-dossiers-rand); }
.bron-dossiers .soort-label { background: var(--bron-dossiers-vlak); color: var(--bron-dossiers-tekst); }
.bron-spraak { border-left-color: var(--bron-spraak-rand); }
.bron-spraak .soort-label { background: var(--bron-spraak-vlak); color: var(--bron-spraak-tekst); text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* ---- startpagina -------------------------------------------------------- */
.kaarten { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kaart {
  display: block; height: 100%; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 1rem; text-decoration: none; color: inherit;
}
a.kaart:hover, a.kaart:focus-visible { border-color: var(--merk); }
.kaart h2, .kaart h3 { margin: 0 0 .3rem; color: var(--merk); font-size: 1.1rem; }
.kaart p { margin: 0; color: var(--gedempt); font-size: .92rem; }
.kaart.let-op { border-left: 5px solid var(--waarschuwing-rand); margin: 1rem 0; max-width: 48rem; }
.kaart.let-op h2 { color: var(--waarschuwing-tekst); }
.kaart.let-op p { color: var(--tekst); }

/* ---- dekking: alleen aantallen, dus de getallen moeten uitlijnen -------- */
.tabel-schuif { overflow-x: auto; margin: 1rem 0; }
table.dekking { border-collapse: collapse; min-width: 32rem; background: var(--vlak); }
table.dekking caption { text-align: left; font-weight: 600; padding: 0 0 .4rem; }
table.dekking th, table.dekking td { padding: .45rem .9rem; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
table.dekking thead th { border-bottom: 2px solid var(--rand); }
table.dekking tbody th { font-weight: 500; }
table.dekking .getal { text-align: right; font-variant-numeric: tabular-nums; }
table.dekking tfoot th, table.dekking tfoot td { border-top: 2px solid var(--rand); border-bottom: none; font-weight: 700; }
.uitleglijst > div { margin-bottom: .5rem; max-width: 48rem; }
.uitleglijst dt { font-weight: 600; display: inline; }
.uitleglijst dt::after { content: " — "; }
.uitleglijst dd { display: inline; margin: 0; }

/* ---- klein scherm ------------------------------------------------------- */
@media (max-width: 40rem) {
  h1 { font-size: 1.5rem; }
  .kop-binnen { gap: .5rem 1.5rem; }
  .zoekbalk-rij input { flex-basis: 100%; }
  .knop { width: 100%; }
  .filters { grid-template-columns: 1fr; }
  .legenda dl { grid-template-columns: 1fr; }
}

/* ---- papier --------------------------------------------------------------
   Mensen printen hun voorbereiding. Dus: geen navigatie en geen formulier,
   wél wat er gezocht is, elke treffer heel op één pagina, en elke link met
   zijn adres erbij -- een vindplaats op papier moet na te slaan zijn. */
@media print {
  :root { --pagina: #fff; }
  body { color: #000; font-size: 11pt; }
  .kop nav, .spring, .zoekform, .legenda, .bronlink { display: none; }
  .kop { background: none; color: #000; border-bottom: 2px solid #000; }
  .merk, .merk span { color: #000; }
  main { padding-top: .5rem; }
  .treffer { break-inside: avoid; border: 1px solid #999; border-left-width: 5px; }
  .titel a { color: #000; text-decoration: none; }
  .titel a[href]::after { content: " — " attr(href); font-weight: 400; font-size: .8em; overflow-wrap: anywhere; }
  .tijd[href]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: .9em; }
  .soort-label { border: 1px solid #000; }
  .melding, .let-op { border-color: #000; }
  .voet { border-top: 1px solid #000; }
}

/* ---- inloggen, account, beheer ------------------------------------------
   Dezelfde vormen als het zoekformulier (een wit vlak met een rand), maar
   onder elkaar: één veld per regel, want dit zijn geen filters maar stappen. */
.account-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem 1.25rem; flex-wrap: wrap; }
.account-nav a { color: #fff; text-decoration: none; display: inline-block; padding: .35rem 0; border-bottom: 3px solid transparent; }
.account-nav a:hover { border-bottom-color: rgba(255, 255, 255, .6); }
.account-nav a[aria-current="page"] { border-bottom-color: #fff; font-weight: 600; }
.uitlog { margin: 0; }
.knop-kop {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7);
  padding: .25rem .7rem; min-height: 0; border-radius: var(--radius); cursor: pointer; font-size: .92rem;
}
.knop-kop:hover { background: rgba(255, 255, 255, .15); }

.formulier {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 1rem var(--gutter) 1rem; margin: 1rem 0 1.5rem; max-width: 34rem;
}
.formulier .veld { margin-bottom: .9rem; }
.formulier input[type="email"], .formulier input[type="text"] { width: 100%; }
.code-invoer { font-size: 1.5rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.acties { display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; }
.knop-licht { background: var(--vlak); color: var(--merk); border-color: var(--merk); font-weight: 600; cursor: pointer; }
.knop-licht:hover { background: var(--merk-licht); }
.knop-gevaar { background: var(--vlak); color: var(--fout); border-color: var(--fout); font-weight: 600; cursor: pointer; }
.knop-gevaar:hover { background: #fbeaea; }
.knop-klein { padding: .25rem .7rem; min-height: 0; font-size: .92rem; }
.fout-melding { color: var(--fout); background: #fbeaea; border-color: #e3a3a3; }
.rijform { display: inline; margin: 0; }

.sleutel-toon {
  background: var(--waarschuwing-vlak); border: 1px solid var(--waarschuwing-rand); border-left-width: 5px;
  border-radius: var(--radius); padding: .8rem var(--gutter); margin: 1rem 0; max-width: 48rem;
}
.sleutel-toon code { display: block; font-size: 1.05rem; padding: .5rem .6rem; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--radius); overflow-wrap: anywhere; margin: .5rem 0; }

table.lijst { border-collapse: collapse; width: 100%; background: var(--vlak); font-size: .95rem; }
table.lijst caption { text-align: left; font-weight: 600; padding: 0 0 .4rem; }
table.lijst th, table.lijst td { padding: .45rem .7rem; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
table.lijst thead th { border-bottom: 2px solid var(--rand); }
table.lijst td.acties { white-space: nowrap; }
.status-tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .1rem .5rem; border-radius: 999px; background: var(--code-vlak); }
.status-tag.actief { background: var(--merk-licht); color: var(--bron-vergaderstukken-tekst); }
.status-tag.aangevraagd { background: var(--waarschuwing-vlak); color: var(--waarschuwing-tekst); }
.status-tag.afgewezen { background: #fbeaea; color: var(--fout); }
.stempel { color: var(--gedempt); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 40rem) {
  .account-nav { margin-left: 0; }
}
@media print {
  .account-nav { display: none; }
}