/*
 * Feeder — stijlblad
 *
 * Eén eigen stijlblad met de tokens uit de Fraser Valley Huisstijl. Geen
 * Bootstrap: dit ontwerp is één raster van twee kolommen, één lijst, één
 * uitklaplijst, twee dialogen en één toast, en dat is minder werk dan een
 * huisstijl-override telkens terugvechten.
 *
 * De tokens hieronder zijn overgenomen uit `tokens.css` versie 1.1 van de
 * huisstijl. Alleen wat hier wordt gebruikt staat erin; het bestand zelf
 * wordt niet meegeleverd omdat het `body` op Jost zet en meer regels bevat
 * dan deze app nodig heeft. De donkere set is dezelfde als daar.
 */

:root {
  /* Inkt en papier */
  --fv-inkt:            #232F29;
  --fv-inkt-kop:        #1A251F;
  --fv-inkt-zacht:      #55524E;
  --fv-label:           #6E6A64;
  --fv-papier:          #FCFBF8;
  --fv-papier-warm:     #F2F0EB;
  --fv-papier-wit:      #FFFFFF;

  /* Salie */
  --fv-salie:           #3D5247;
  --fv-salie-donker:    #2E3F36;
  --fv-salie-lijn:      #C8D5CF;

  /* Lijnen */
  --fv-lijn:            #DFDBD4;

  /* Typografie */
  --fv-serif:  "Spectral", Georgia, "Times New Roman", serif;
  --fv-sans:   "Jost", "Helvetica Neue", Arial, sans-serif;
  --fv-regelafstand:     1.65;
  --fv-regelafstand-kop: 1.3;
  --fv-label-grootte:    11px;
  --fv-label-spatie:     0.20em;

  /* Ruimte, vorm */
  --fv-ruimte-1: 8px;
  --fv-ruimte-2: 16px;
  --fv-ruimte-3: 24px;
  --fv-ruimte-4: 40px;
  --fv-ruimte-5: 64px;
  --fv-radius:  2px;
  --fv-raakvlak-min: 44px;

  /* Rollen — licht. De rest van het blad gebruikt uitsluitend deze namen,
     zodat het donkere thema één blok met andere waarden is. */
  --vlak:        var(--fv-papier);
  --paneel:      var(--fv-papier-wit);
  --selectie:    var(--fv-papier-warm);
  --rand:        var(--fv-lijn);
  --tekst:       var(--fv-inkt);
  --tekst-kop:   var(--fv-inkt-kop);
  --tekst-zacht: var(--fv-inkt-zacht);
  --tekst-label: var(--fv-label);
  --accent:      var(--fv-salie);
  --accent-hover: var(--fv-salie-donker);
  --op-accent:   var(--fv-papier-wit);
  --linklijn:    var(--fv-salie-lijn);
  --sluier:      rgba(35, 47, 41, 0.32);
  --toastvlak:   var(--fv-inkt);
  --toasttekst:  var(--fv-papier);

  /* Zonder dit volgen systeemkleuren als CanvasText het besturingssysteem in
     plaats van het gekozen thema. Een <dialog> erft van de browser
     'color: CanvasText'; op een Mac in lichte stand werd die tekst dan zwart
     op het donkere paneel van deze app. */
  color-scheme: light;
}

/* Donker. Standaard volgt de weergave het apparaat; wie zelf heeft gekozen,
   krijgt die keuze op elk apparaat. Twee blokken met dezelfde waarden: het
   ene voor 'volg het apparaat', het andere voor de expliciete keuze. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="light"]) {
    --vlak:        #1A251F;
    --paneel:      #141D18;
    --selectie:    #232F29;
    --rand:        #33413A;
    --tekst:       #EFEDE8;
    --tekst-kop:   #EFEDE8;
    --tekst-zacht: #D5DFD9;
    --tekst-label: #A8B7AE;
    --accent:      #7FAF95;
    --accent-hover: #6C9B82;
    --op-accent:   #141D18;
    --linklijn:    #33413A;
    --sluier:      rgba(10, 16, 13, 0.55);
    --toastvlak:   #EFEDE8;
    --toasttekst:  #141D18;
    color-scheme: dark;
  }
}

:root[data-thema="dark"] {
  --vlak:        #1A251F;
  --paneel:      #141D18;
  --selectie:    #232F29;
  --rand:        #33413A;
  --tekst:       #EFEDE8;
  --tekst-kop:   #EFEDE8;
  --tekst-zacht: #D5DFD9;
  --tekst-label: #A8B7AE;
  --accent:      #7FAF95;
  --accent-hover: #6C9B82;
  --op-accent:   #141D18;
  --linklijn:    #33413A;
  --sluier:      rgba(10, 16, 13, 0.55);
  --toastvlak:   #EFEDE8;
  --toasttekst:  #141D18;
  color-scheme: dark;
}

/* --- Lettertypen, van het eigen domein ---------------------------------- */

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/statisch/fonts/spectral-300-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/statisch/fonts/spectral-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/statisch/fonts/jost-500-latin.woff2") format("woff2");
}

/* --- Basis -------------------------------------------------------------- */

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

/* Het hidden-attribuut moet winnen van elke display-regel hieronder. Zonder
   deze regel staat het terugvalveld van 'Link kopiëren' altijd in beeld: de
   .terugval-regel zet display:flex en overrulet daarmee de standaard van de
   browser. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--vlak);
  color: var(--tekst);
  font-family: var(--fv-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: var(--fv-regelafstand);
}

h1, h2, h3 {
  font-family: var(--fv-serif);
  font-weight: 300;
  color: var(--tekst-kop);
  line-height: var(--fv-regelafstand-kop);
  margin: 0 0 var(--fv-ruimte-2) 0;
}

h1 { font-size: 30px; }
h2 { font-size: 28px; }

p { margin: 0 0 var(--fv-ruimte-2) 0; }

a { color: var(--tekst); border-bottom: 1px solid var(--linklijn); text-decoration: none; }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Focus is altijd zichtbaar. Nooit outline: none zonder iets erbij. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fv-label {
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: var(--fv-label-spatie);
  text-transform: uppercase;
  color: var(--tekst-label);
  line-height: 1.4;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Knoppen ------------------------------------------------------------ */

.knop, .knop-tekst {
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: var(--fv-label-spatie);
  text-transform: uppercase;
  border-radius: var(--fv-radius);
  min-height: var(--fv-raakvlak-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-bottom: none;
}

.knop {
  background: var(--accent);
  color: var(--op-accent);
  border: 1px solid var(--accent);
  padding: 0 var(--fv-ruimte-3);
}
.knop:hover { background: var(--accent-hover); border-color: var(--accent-hover);
              color: var(--op-accent); }

.knop-tekst {
  background: none;
  border: none;
  color: var(--tekst-label);
  padding: 0 var(--fv-ruimte-1);
}
.knop-tekst:hover { color: var(--accent); }

.knoppen {
  display: flex;
  align-items: center;
  gap: var(--fv-ruimte-2);
  flex-wrap: wrap;
}

/* --- Velden ------------------------------------------------------------- */

.veldenlijst { display: flex; flex-direction: column; gap: var(--fv-ruimte-3); margin: 0; }

.veld { display: flex; flex-direction: column; gap: var(--fv-ruimte-1); }

.veld input {
  font-family: var(--fv-serif);
  font-size: 17px;
  color: var(--tekst);
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--fv-radius);
  padding: 11px 14px;
  min-height: var(--fv-raakvlak-min);
  width: 100%;
}
.veld input:focus-visible { border-color: var(--accent); }

.hint {
  font-family: var(--fv-serif);
  font-size: 15px;
  color: var(--tekst-zacht);
  margin: 0;
}

/* Een foutregel is geen bijschrift. Geen rood en geen uitroepteken — dat vraagt
   het ontwerp — maar wel de gewone tekstkleur en de verticale streep van 2 px
   in de accentkleur, dezelfde die een geselecteerde rij aanwijst. Zonder dat
   onderscheid valt de melding weg tegen de uitleg die er al stond, en lijkt er
   niets te gebeuren. */
.melding {
  font-family: var(--fv-serif);
  font-size: 16px;
  color: var(--tekst);
  margin: 0;
  padding: 12px var(--fv-ruimte-2);
  background: var(--selectie);
  border-left: 2px solid var(--accent);
  border-radius: var(--fv-radius);
}

/* Een kapitaaltjeslabel erboven in plaats van een kleur uit een palet dat
   geen statuskleuren kent. Nadruk via typografie en vlak, niet via rood: de
   styleguide zegt dat kleur voor de tint is en nooit voor de nadruk. */
.melding::before {
  content: "Let op";
  display: block;
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: var(--fv-label-spatie);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

/* De regel die tijdens het typen onder een veld verschijnt. Zelfde taal als
   hierboven, maar zonder het vlak — anders springt het formulier op elke
   toetsaanslag. */
.meldinglink {
  display: inline-block;
  margin-top: var(--fv-ruimte-1);
}

.veldmelding {
  font-family: var(--fv-serif);
  font-size: 15px;
  color: var(--tekst);
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}

/* --- De kaartpagina's: aanmelden, registreren, fout --------------------- */

.kaartpagina { display: flex; }

.kaartvlak {
  margin: auto;
  padding: var(--fv-ruimte-5) var(--fv-ruimte-3);
  width: 520px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--fv-ruimte-3);
}

.kaart {
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--fv-radius);
  padding: var(--fv-ruimte-4);
}

.voetregel { font-size: 15px; color: var(--tekst-zacht); margin: 0; }

.verwijzingen { display: flex; gap: var(--fv-ruimte-3); margin: var(--fv-ruimte-3) 0 0 0; }
.verwijzingen a { font-size: 16px; }

.tweedeactie { margin-top: var(--fv-ruimte-2); }

/* --- Merkteken ---------------------------------------------------------- */

.merk { display: flex; align-items: center; gap: 12px; border-bottom: none; }
.merkteken { display: block; }
.merknaam {
  font-family: var(--fv-serif);
  font-weight: 300;
  font-size: 22px;
  color: var(--tekst-kop);
}

/* Op donker het omgekeerde merkteken. Beide bestanden staan in de pagina en
   het blad verbergt er één. Niet met een filter verkleuren: het teken heeft
   drie eigen tinten, en die keren om, ze worden niet lichter. */
.merkteken-donker { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="light"]) .merkteken-licht { display: none; }
  :root:not([data-thema="light"]) .merkteken-donker { display: block; }
}
:root[data-thema="dark"] .merkteken-licht { display: none; }
:root[data-thema="dark"] .merkteken-donker { display: block; }

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

.lezer, .instellingen { display: flex; flex-direction: column; height: 100%; }

.kop {
  flex: 0 0 72px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--fv-ruimte-3);
  padding: 0 var(--fv-ruimte-3);
  background: var(--paneel);
  border-bottom: 1px solid var(--rand);
}

.koprechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--fv-ruimte-2);
}

.gebruikersnaam {
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: var(--fv-label-spatie);
  text-transform: uppercase;
  color: var(--tekst-label);
  border-bottom: none;
}
.gebruikersnaam:hover { color: var(--accent); }

.paginanaam { margin-left: var(--fv-ruimte-2); }

/* --- De licht/donker-schakelaar ---------------------------------------- */

.themaschakelaar {
  display: flex;
  border: 2px solid var(--rand);
  border-radius: var(--fv-radius);
}

.themavak {
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--tekst-label);
  padding: 6px 10px;
  cursor: pointer;
}
.themavak.aan { background: var(--accent); color: var(--op-accent); }

/* --- De kanaalkeuze ----------------------------------------------------- */

.kanaalkeuze { position: relative; }

.kanaalkeuze > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--fv-ruimte-1);
  min-height: var(--fv-raakvlak-min);
  padding: 0 var(--fv-ruimte-2);
  border: 1px solid var(--rand);
  border-radius: var(--fv-radius);
  cursor: pointer;
}
.kanaalkeuze > summary::-webkit-details-marker { display: none; }

.keuzenaam { font-family: var(--fv-serif); font-size: 16px; }

.uitklaplijst {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--fv-ruimte-1));
  left: 0;
  min-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--fv-ruimte-1) 0;
  list-style: none;
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--fv-radius);
}

.uitklaplijst li { padding: 0; }

.uitklaplijst a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fv-ruimte-2);
  padding: 10px var(--fv-ruimte-2);
  min-height: var(--fv-raakvlak-min);
  border-bottom: none;
  border-left: 2px solid transparent;
}
.uitklaplijst a:hover { background: var(--selectie); }
.uitklaplijst a.gekozen { background: var(--selectie); border-left-color: var(--accent); }

.kanaalnaam { font-family: var(--fv-serif); font-size: 16px; }

.kapot {
  display: block;
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: var(--fv-label-spatie);
  text-transform: uppercase;
  color: var(--tekst-label);
  padding: 0 var(--fv-ruimte-2) var(--fv-ruimte-1) var(--fv-ruimte-2);
}

/* --- Badge -------------------------------------------------------------- */

.badge {
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: 0.10em;
  min-width: 26px;
  padding: 2px 6px;
  text-align: center;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--fv-radius);
}

/* --- Het raster --------------------------------------------------------- */

.raster {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  min-height: 0;
}

.lijstkolom {
  border-right: 1px solid var(--rand);
  background: var(--paneel);
  overflow-y: auto;
  min-height: 0;
}

.lijstkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fv-ruimte-2);
  padding: var(--fv-ruimte-2) var(--fv-ruimte-2);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  background: var(--paneel);
}

.artikellijst { list-style: none; margin: 0; padding: 0; }

.rij {
  display: flex;
  gap: 10px;
  padding: 14px var(--fv-ruimte-2) 14px 14px;
  border-bottom: 1px solid var(--rand);
  border-left: 2px solid transparent;
  min-height: var(--fv-raakvlak-min);
}
.rij:hover { background: var(--selectie); }

/* Selectie: een gevuld vlak plus een verticale streep van 2 px links. Niet
   met vetter zetten. */
.rij.geopend { background: var(--selectie); border-left-color: var(--accent); }

.teken { flex: 0 0 6px; width: 6px; height: 6px; margin-top: 8px; }
.teken.ongelezen { background: var(--accent); }
.teken.gelezen { border: 1px solid var(--accent); opacity: 0.35; }

.rijtekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.kanaallabel { color: var(--tekst-label); }

.rijtitel {
  font-family: var(--fv-serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--tekst);
}
.rij .teken.gelezen ~ .rijtekst .rijtitel { font-weight: 300; }
.rij .teken.ongelezen ~ .rijtekst .rijtitel { font-weight: 400; }

.rijdatum { color: var(--tekst-label); }

.meerladen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fv-ruimte-1);
  padding: var(--fv-ruimte-3);
}

.leeg { padding: var(--fv-ruimte-3); color: var(--tekst-zacht); font-size: 16px; }

/* --- De leeskolom ------------------------------------------------------- */

.leeskolom { overflow-y: auto; min-height: 0; background: var(--vlak); }

.artikel { max-width: 66ch; margin: 0 auto; padding: var(--fv-ruimte-5) 72px; }

.artikeltitel {
  font-family: var(--fv-serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.22;
  margin-bottom: var(--fv-ruimte-2);
}

.artikelherkomst { margin-bottom: var(--fv-ruimte-3); }

.artikelacties {
  display: flex;
  align-items: center;
  gap: var(--fv-ruimte-2);
  margin-bottom: var(--fv-ruimte-3);
}

.opgehaald { margin-bottom: var(--fv-ruimte-3); }

/* Dit is een leesomgeving, geen pagina met een leestekst erin: 18 px in
   plaats van de 17 px van de huisstijl. */
.artikeltekst { font-size: 18px; line-height: var(--fv-regelafstand); }
.artikeltekst img { max-width: 100%; height: auto; }
.artikeltekst pre { overflow-x: auto; }
.artikeltekst table { display: block; overflow-x: auto; border-collapse: collapse; }

.terugval { display: flex; flex-direction: column; gap: var(--fv-ruimte-1);
            margin-bottom: var(--fv-ruimte-3); }
.terugval input {
  font-family: var(--fv-serif);
  font-size: 16px;
  padding: 11px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--fv-radius);
  background: var(--paneel);
  color: var(--tekst);
  width: 100%;
}

.kader {
  border: 1px solid var(--rand);
  border-radius: var(--fv-radius);
  padding: var(--fv-ruimte-3);
  margin-bottom: var(--fv-ruimte-3);
}
.kaderkop {
  font-family: var(--fv-sans);
  font-size: var(--fv-label-grootte);
  font-weight: 500;
  letter-spacing: var(--fv-label-spatie);
  text-transform: uppercase;
  color: var(--tekst-label);
  margin-bottom: var(--fv-ruimte-1);
}

.leegvlak {
  max-width: 66ch;
  margin: 0 auto;
  padding: var(--fv-ruimte-5) 72px;
  color: var(--tekst-zacht);
}

/* --- Dialogen ----------------------------------------------------------- */

.dialoog[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border: none;
  background: var(--sluier);
  padding: var(--fv-ruimte-4);
  overflow-y: auto;
  display: flex;
}

.dialoogkaart {
  /* Expliciet, en niet geërfd van het dialog-element: dat staat bij de
     browser op een systeemkleur. */
  color: var(--tekst);
  margin: auto;
  width: 760px;
  max-width: 100%;
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--fv-radius);
  padding: var(--fv-ruimte-4);
}

.dialoogvoet { margin-top: var(--fv-ruimte-3); }

.dialoogkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fv-ruimte-3);
  position: sticky;
  top: calc(var(--fv-ruimte-4) * -1);
  background: var(--paneel);
  padding-top: var(--fv-ruimte-1);
  margin-bottom: var(--fv-ruimte-2);
}
.dialoogkop h1 { margin: 0; }

.zoekbalk {
  display: flex;
  align-items: flex-end;
  gap: var(--fv-ruimte-2);
  margin-bottom: var(--fv-ruimte-3);
}
.zoekbalk .veld { flex: 1 1 auto; }

.catalogus { list-style: none; margin: 0; padding: 0; }
.catalogus li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fv-ruimte-3);
  padding: var(--fv-ruimte-2) 0;
  border-bottom: 1px solid var(--rand);
}
.catalogustekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catalogustitel { font-family: var(--fv-serif); font-size: 17px; }
.catalogusomschrijving { font-size: 16px; color: var(--tekst-zacht); margin: 0; }

/* --- Instellingen ------------------------------------------------------- */

.instellingenblad {
  flex: 1 1 auto;
  overflow-y: auto;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: var(--fv-ruimte-5) var(--fv-ruimte-3);
  display: flex;
  flex-direction: column;
  gap: var(--fv-ruimte-5);
}

.abonnementenlijst { list-style: none; margin: var(--fv-ruimte-2) 0 0 0; padding: 0; }
.abonnementenlijst li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fv-ruimte-3);
  padding: var(--fv-ruimte-2) 0;
  border-bottom: 1px solid var(--rand);
}
.abonnementenlijst > li > div { display: flex; flex-direction: column; gap: 4px; }
.abonnementnaam { font-family: var(--fv-serif); font-size: 17px; }

.uitloggen { margin-top: var(--fv-ruimte-3); }

/* --- Toast -------------------------------------------------------------- */

/* Linksonder, 24 px van de rand. Op licht een inktvlak met papierkleurige
   tekst, op donker omgekeerd; de enige plaats waar het contrast omdraait. */
.toast {
  position: fixed;
  left: var(--fv-ruimte-3);
  bottom: var(--fv-ruimte-3);
  max-width: 420px;
  background: var(--toastvlak);
  color: var(--toasttekst);
  border-radius: var(--fv-radius);
  padding: 14px var(--fv-ruimte-3);
  font-family: var(--fv-serif);
  font-size: 16px;
  line-height: var(--fv-regelafstand);
  z-index: 100;
}
.toast[hidden] { display: none; }