/* =========================================================================
   Onskerkgebouw.nl — gebouwdossier

   Bovenop site.css en demo.css. Hier staan twee dingen: de tokens die het
   dossier extra nodig heeft, en de opmaak van de portefeuille.

   De ontwerpen zijn getekend in de FinQDC-tokens (navy met limegroen,
   Spectral). Die zijn hier vertaald naar de huisstijl van deze site; de
   vertaaltabel per token staat in docs/ontwerp/gebouwdossier/bouwplan.md, §3.
   Twee dingen komen wél letterlijk uit het ontwerp: de zes conditiekleuren van
   NEN 2767, want die zijn semantisch en staan los van een merk, en de
   maatvoering van de kaders.

   De lettergroottes uit het ontwerp zijn omhoog gegaan. Daar staan veldlabels
   op 10,5px en bronlabels op 9,5px; het merkblad van deze site houdt 13px aan
   als ondergrens voor interfacetekst, vanwege dezelfde lezer die de briefing
   als maatgevend aanwijst — een vrijwilliger van boven de zestig. Twee
   documenten over dezelfde lezer, en dan wint de ondergrens.
   ========================================================================= */

:root {
  /*
   * De scheidingslijn bínnen een paneel. De site kent alleen --colour-line, en
   * het dossier heeft twee niveaus nodig: de rand om een paneel en de streep
   * tussen twee rijen erin. Zonder dat verschil wordt een lijst van veertig
   * objecten een hek.
   */
  --colour-line-soft: #edf1f5;

  /*
   * NEN 2767, zes niveaus: 1 uitstekend tot 6 zeer slecht. Niet wijzigen.
   * 1 tot en met 3 zijn navytinten uit dezelfde familie als Leisteen, 4 is
   * amber en 5 en 6 zijn rood. De schaal is semantisch en staat los van de
   * merkkleur; dat is bewust, zodat een conditie nooit als merkuiting leest.
   */
  --conditie-1: #4e6b80;
  --conditie-2: #5e7c90;
  --conditie-3: #7e93a1;
  --conditie-4: #c4841d;
  --conditie-5: #b5502e;
  --conditie-6: #8e2b20;

  /*
   * De vlakken bij conditie 4 en 5-6 zijn de statuskleuren die de site al heeft.
   * Het ontwerp vraagt #FBF0DC en #F8E5DE; die liggen op een haar van
   * --status-aandacht-bg en --status-verlopen-bg. Eén tint per betekenis, en
   * conditie 4 valt daarmee samen met "aandacht" en 5-6 met "verlopen" — wat
   * precies is wat ze betekenen.
   */
  --conditie-vlak-aandacht: var(--status-aandacht-bg);
  --conditie-vlak-alert: var(--status-verlopen-bg);

  /*
   * Codes en identificaties: BAG-pand-id van zestien cijfers,
   * monumentnummers, jaartallen in een kolom. Een systeemstapel en geen extra
   * lettertypebestand: geen extra verzoek, en zestien cijfers blijven leesbaar.
   */
  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
}

/*
 * Een eigen regel met `display` verslaat de [hidden] van de browser: die staat
 * in de standaardstylesheet en verliest van elke klasseselector. Zonder deze
 * regel filtert het zoekveld wél de lijst maar verdwijnt er niets van het
 * scherm — en dat merk je pas in de browser, niet in de typecontrole.
 */
[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Bouwstenen die overal in het dossier terugkomen
   ------------------------------------------------------------------------- */

/*
 * Een label dat er voor een schermlezer wel is en voor het oog niet. Nodig bij
 * het zoekveld, dat in het ontwerp alleen een placeholder heeft — en een
 * placeholder is geen label: hij verdwijnt zodra iemand typt.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Het bronlabel. Dit is geen decoratie maar het hart van de propositie:
 * kerkbesturen wisselen om de paar jaar, en een dossier dat niet kan zeggen
 * waar een getal vandaan komt, wordt niet vertrouwd en dus niet bijgehouden.
 * Het staat achter de waarde, niet eronder, zodat het bij het getal hoort.
 */
.bronlabel {
  display: inline-block;
  margin-left: 0.4em;
  padding: 1px 5px;
  border: 1px solid var(--colour-line);
  border-radius: 3px;
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Een bron die zichzelf tegenspreekt is een uitkomst, geen fout. Die mag opvallen. */
.bronlabel--bronconflict {
  border-color: var(--status-verlopen-dot);
  color: var(--status-verlopen-text);
}

/* Demogegevens: verzonnen, en dat moet te zien zijn zonder de tekst te lezen. */
.bronlabel--demo {
  border-style: dashed;
}

/* De conditiescore als badge: wit op de conditiekleur, altijd met het cijfer erbij. */
.conditie-badge {
  display: inline-block;
  min-width: 2.4em;
  padding: 2px 7px;
  border-radius: 4px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.conditie-badge--1 {
  background-color: var(--conditie-1);
}
.conditie-badge--2 {
  background-color: var(--conditie-2);
}
.conditie-badge--3 {
  background-color: var(--conditie-3);
}
.conditie-badge--4 {
  background-color: var(--conditie-4);
}
.conditie-badge--5 {
  background-color: var(--conditie-5);
}
.conditie-badge--6 {
  background-color: var(--conditie-6);
}

/* Niet geïnspecteerd is iets anders dan conditie 1. Het zegt dat, en het is grijs. */
.conditie-badge--onbekend {
  min-width: 0;
  background-color: var(--colour-fond);
  border: 1px solid var(--colour-line);
  color: var(--colour-text-muted);
}

/* De stip voor een signaal: dezelfde schaal, kleiner. */
.conditie-stip {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.conditie-stip--1 {
  background-color: var(--conditie-1);
}
.conditie-stip--2 {
  background-color: var(--conditie-2);
}
.conditie-stip--3 {
  background-color: var(--conditie-3);
}
.conditie-stip--4 {
  background-color: var(--conditie-4);
}
.conditie-stip--5 {
  background-color: var(--conditie-5);
}
.conditie-stip--6 {
  background-color: var(--conditie-6);
}

/* Codes, identificaties en getallen in een kolom. */
.code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Portefeuille

   Op een breed scherm een vaste kolom van 344px naast het dossier; nu nog een
   scherm op zichzelf. De klassenamen zijn daarom van de lijst en niet van de
   pagina: als hij straks een kolom wordt, verhuist alleen de omhulling.
   ------------------------------------------------------------------------- */

.portefeuille {
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.portefeuille__telling {
  margin: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/*
 * De twee weergaven zijn twee pagina's en geen tabs met JavaScript. Op een
 * statische site is dat het eerlijke antwoord: elke weergave heeft een eigen
 * adres, werkt zonder script, is te delen en staat in de geschiedenis van de
 * browser. Ze zien eruit als tabs omdat ze zich zo gedragen.
 */
.portefeuille__weergaven {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  padding: 0 var(--space-m);
  border-bottom: 1px solid var(--colour-line);
  background-color: var(--colour-fond);
}

.portefeuille__weergavelijst {
  display: flex;
  gap: var(--space-m);
}

.portefeuille__weergave {
  padding: var(--space-s) 0;
  border-bottom: 3px solid transparent;
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.portefeuille__weergave:hover {
  color: var(--colour-base);
}

.portefeuille__weergave[aria-current="page"] {
  border-bottom-color: var(--colour-accent);
  color: var(--colour-base);
  font-weight: 700;
}

/*
 * Zoeken en filteren staan verborgen tot het script ze aanzet. Zonder
 * JavaScript is er geen server die kan filteren, en een zoekveld dat niets
 * doet is erger dan geen zoekveld: de hele lijst staat er wél, en Ctrl-F van
 * de browser werkt gewoon.
 */
.portefeuille__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--colour-line);
}

.portefeuille__zoek {
  flex: 1 1 14rem;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  background-color: var(--colour-surface);
  font: inherit;
  font-size: 1rem;
  color: var(--colour-ink);
}

.portefeuille__chip {
  min-height: 44px;
  padding: 3px 12px;
  border: 1px solid var(--colour-line);
  border-radius: 999px;
  background-color: var(--colour-surface);
  color: var(--colour-text-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.portefeuille__chip[aria-pressed="true"] {
  border-color: var(--colour-base);
  background-color: var(--colour-base);
  color: var(--colour-surface);
}

.portefeuille__uitkomst {
  padding: var(--space-xs) var(--space-m);
  border-bottom: 1px solid var(--colour-line-soft);
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.portefeuille__lijst,
.portefeuille__objecten {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* De groepskop: het complex. Blijft staan tijdens het scrollen. */
.portefeuille__complex {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  background-color: var(--colour-fond);
  border-block: 1px solid var(--colour-line);
}

.portefeuille__complexnaam {
  margin: 0;
  max-width: none;
  color: var(--colour-base);
  font-size: 1rem;
  font-weight: 800;
}

.portefeuille__complexnaam a {
  color: inherit;
  text-decoration: none;
}

.portefeuille__complexnaam a:hover {
  text-decoration: underline;
}

.portefeuille__adres {
  margin: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.portefeuille__complextelling {
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * De objectrij. De linkerrand draagt de érnstigste bevinding, de badge het
 * gemiddelde. Twee verschillende dingen dus, met opzet: een gebouw dat
 * gemiddeld op 3,5 staat maar één dakvlak op 5 heeft, moet in een lijst van
 * veertig objecten opvallen. Met het gemiddelde in de rand doet het dat niet.
 */
.portefeuille__object {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--colour-line-soft);
  border-left: 4px solid var(--colour-line);
}

.portefeuille__object--1 {
  border-left-color: var(--conditie-1);
}
.portefeuille__object--2 {
  border-left-color: var(--conditie-2);
}
.portefeuille__object--3 {
  border-left-color: var(--conditie-3);
}
.portefeuille__object--4 {
  border-left-color: var(--conditie-4);
}
.portefeuille__object--5 {
  border-left-color: var(--conditie-5);
}
.portefeuille__object--6 {
  border-left-color: var(--conditie-6);
}

.portefeuille__objectnaam {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.portefeuille__objectnaam:hover strong {
  text-decoration: underline;
}

.portefeuille__objectnaam strong {
  display: block;
  color: var(--colour-base);
  font-size: 1rem;
  font-weight: 600;
}

.portefeuille__objectsoort {
  display: block;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.portefeuille__leeg {
  padding: var(--space-m);
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   Werkvoorraad: dezelfde lijst, geordend naar wat er moet gebeuren
   ------------------------------------------------------------------------- */

.werkvoorraad__tellers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0;
  margin: 0;
  background-color: var(--colour-base);
  border-bottom: 1px solid var(--colour-line);
}

.werkvoorraad__teller {
  padding: var(--space-s) var(--space-m);
  color: var(--colour-surface);
}

/* De scheiding als rand en niet als doorschijnende tussenruimte: een gap van
   1px valt bij ongelijke hoogtes uiteen in losse streepjes. */
.werkvoorraad__teller + .werkvoorraad__teller {
  border-left: 1px solid var(--colour-slate-60);
}

.werkvoorraad__getal {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.werkvoorraad__wat {
  display: block;
  color: var(--colour-on-dark-muted);
  font-size: 0.875rem;
}

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

.werkvoorraad__rij {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--colour-line-soft);
}

/* De stip staat op de hoogte van de eerste regel, niet in het midden van het blok. */
.werkvoorraad__rij .conditie-stip {
  margin-top: 0.45em;
}

.werkvoorraad__wie {
  flex: 1 1 auto;
  min-width: 0;
}

.werkvoorraad__waarover {
  display: block;
  color: var(--colour-base);
  font-size: 1rem;
  font-weight: 600;
}

.werkvoorraad__tekst {
  display: block;
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

.werkvoorraad__termijn {
  flex: none;
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Een signaal met een harde datum vóór de Sim-sluiting krijgt het aandachtsvlak. */
.werkvoorraad__rij--deadline {
  background-color: var(--conditie-vlak-aandacht);
}

/* -------------------------------------------------------------------------
   Breed scherm
   ------------------------------------------------------------------------- */

@media (min-width: 56em) {
  .portefeuille__object {
    padding-inline: var(--space-m);
  }

  /*
   * Vanaf hier past de portefeuille naast een dossier. De vaste breedte uit
   * het ontwerp is 344px; die staat klaar voor het moment dat de kolom er
   * werkelijk naast komt te staan.
   */
  .portefeuille--kolom {
    width: 21.5rem;
    flex: none;
  }
}

/* -------------------------------------------------------------------------
   Het dossierscherm

   Variant 1d: een beslisstrook die niet meewisselt, vier tabbladen eronder.
   ------------------------------------------------------------------------- */

.dossier-terug {
  margin: 0 0 var(--space-s);
  font-size: 0.9375rem;
}

/* De beslisstrook en de tabbladen staan in module.css: elke module deelt ze. */

/* De conditiekleur als tekstkleur, voor de ernstigste bevinding. De donkere
   drie zijn op wit leesbaar; 1 tot en met 3 worden daarom niet als tekst
   gebruikt, alleen 4, 5 en 6. */
.conditie-tekst--4 {
  color: #96650f;
}
.conditie-tekst--5 {
  color: var(--conditie-5);
}
.conditie-tekst--6 {
  color: var(--conditie-6);
}

.conditiebalk {
  display: flex;
  gap: 1px;
  height: 6px;
  margin-top: var(--space-xs);
  border-radius: 3px;
  overflow: hidden;
}

.conditiebalk__deel {
  display: block;
  flex-basis: 0;
}

.conditiebalk__deel--1 {
  background-color: var(--conditie-1);
}
.conditiebalk__deel--2 {
  background-color: var(--conditie-2);
}
.conditiebalk__deel--3 {
  background-color: var(--conditie-3);
}
.conditiebalk__deel--4 {
  background-color: var(--conditie-4);
}
.conditiebalk__deel--5 {
  background-color: var(--conditie-5);
}
.conditiebalk__deel--6 {
  background-color: var(--conditie-6);
}

.dossier-inhoud {
  padding-top: var(--space-m);
}

.dossier-sectie + .dossier-sectie {
  margin-top: var(--space-l);
}

.dossier-sectie__kop {
  margin: 0 0 var(--space-s);
  max-width: none;
  font-size: 1.25rem;
}

.dossier-bij,
.dossier-leeg {
  margin: var(--space-s) 0 0;
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

/*
 * Het veldenraster: label, waarde, bron. Drie kolommen op een breed scherm,
 * één op een smal. Een <dl> en geen tabel, want dit zijn losse paren en geen
 * rijen die je met elkaar wilt vergelijken.
 */
.velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-s) var(--space-m);
  margin: 0;
}

.veld {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--colour-line-soft);
}

.veld__label {
  margin: 0;
  color: var(--colour-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.veld__waarde {
  margin: 0.15em 0 0;
  color: var(--colour-ink);
}

.veld__bij {
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.veld__bij--aandacht {
  color: #96650f;
}

/*
 * Een leeg veld verdwijnt niet maar zegt dat het leeg is, en waarom. Dat is
 * het verschil tussen een dossier en een brochure: een ontbrekend meetrapport
 * dat je wegfiltert wordt nooit meer opgevraagd.
 */
.veld__leeg {
  color: var(--colour-text-muted);
  font-style: italic;
}

/* Tabellen: conditie per bouwdeel en het meerjarenonderhoudsplan. */
.dossier-tabel__omhulsel {
  overflow-x: auto;
}

.dossier-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.dossier-tabel th,
.dossier-tabel td {
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--colour-line-soft);
  text-align: left;
  vertical-align: top;
}

.dossier-tabel thead th {
  background-color: var(--colour-fond);
  border-bottom: 1px solid var(--colour-line);
  color: var(--colour-text-muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.dossier-tabel tbody th {
  color: var(--colour-base);
  font-weight: 600;
}

.dossier-tabel__waarneming {
  color: var(--colour-text-muted);
}

.dossier-tabel__bedrag {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.dossier-tabel__sim {
  white-space: nowrap;
}

/* De markering dat een post binnen de Sim subsidiabel is. */
.sim-vlag {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--colour-accent-strong);
  border-radius: 3px;
  color: #8a5f1e;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/*
 * Het uitgelichte blok. Voor de momenten waarop het dossier een antwoord geeft
 * dat een kerkbestuur nergens anders krijgt — de labelplicht voorop. Die
 * momenten mogen visueel meer gewicht krijgen dan een regel in een tabel.
 */
.uitgelicht {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--colour-accent-strong);
  border-radius: var(--radius-card);
  background-color: var(--colour-fond);
}

.uitgelicht__kop {
  margin: 0;
  max-width: none;
  color: var(--colour-base);
  font-size: 1.0625rem;
}

.uitgelicht__tekst {
  margin: 0.3em 0 0;
  max-width: 42rem;
}

/* Kaarten voor terrein en inventaris. */
/*
 * Een tegel: een omkaderd blokje met een kop erboven. Niets met landkaarten te
 * maken — dat is `.kaartbeeld`, verderop.
 *
 * Die twee hebben hier een tijd dezelfde naam gedragen, en omdat de kaart
 * later in dit bestand staat won die: elke tegel kreeg er ongevraagd een
 * `display: grid` bij en op een breed scherm een eerste kolom van 224 px. Het
 * viel niet op omdat een tegel met een kop en een lijst er als grid vrijwel
 * hetzelfde uitziet. Twee blokken met één naam is geen naamkwestie maar een
 * fout die wacht.
 */
.kaart {
  margin-top: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-surface);
}

.kaart__kop {
  margin: 0 0 var(--space-xs);
  max-width: none;
  font-size: 1.0625rem;
}

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

.kaartlijst__regel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--colour-line-soft);
}

.kaartlijst__regel:last-child {
  border-bottom: 0;
}

/* -------------------------------------------------------------------------
   Factsheet — één object op één A4

   Variant 1j. Op het scherm staat het blad op ware grootte in de
   demo-omgeving; bij het afdrukken valt alles eromheen weg en blijft het blad
   over. De afdrukregels staan onderaan dit bestand.
   ------------------------------------------------------------------------- */

.dossier-terug {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.dossier-factsheetlink {
  margin-left: auto;
}

.factsheet {
  box-sizing: border-box;
  width: 100%;
  max-width: 210mm;
  padding: 12mm;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-surface);
  box-shadow: var(--shadow-card);
  color: var(--colour-ink);
  /*
   * Vaste maten in millimeters en punten, niet in rem. De rest van de site
   * schaalt bewust mee met de tekstgrootte van de browser, maar dit blad is
   * papier: een lezer die zijn browser op 125% zet, moet dezelfde A4 uit de
   * printer krijgen.
   */
  font-size: 10pt;
  line-height: 1.4;
}

.factsheet__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 3mm;
  border-bottom: 2px solid var(--colour-base);
}

.factsheet__titel {
  margin: 0;
  max-width: none;
  color: var(--colour-base);
  font-size: 19pt;
  font-weight: 800;
  line-height: 1.1;
}

.factsheet__adres {
  margin: 1mm 0 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 9pt;
  line-height: 1.35;
}

.factsheet__kenmerk {
  flex: none;
  margin: 0;
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 7.5pt;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.factsheet__kenmerk p {
  margin: 0;
  max-width: none;
}

.factsheet__kerngetallen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  margin: 4mm 0;
}

.factsheet__kerngetal {
  padding: 2mm 3mm;
  border: 1px solid var(--colour-line);
  border-radius: 4px;
}

.factsheet__kerngetal-label {
  margin: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.factsheet__kerngetal-waarde {
  margin: 0.5mm 0 0;
  max-width: none;
  color: var(--colour-base);
  font-size: 13pt;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.factsheet__letop {
  margin: 0 0 4mm;
  max-width: none;
  padding: 1.5mm 3mm;
  border-left: 3px solid var(--colour-accent-strong);
  background-color: var(--colour-fond);
  font-size: 9pt;
  line-height: 1.35;
}

.factsheet__kolommen {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6mm;
  margin-bottom: 4mm;
}

/* Ruimte tussen de blokken. Zonder dit botst de "nog n bouwdelen"-regel tegen
   de kop van het blok eronder, en dat valt pas op papier op. */
.factsheet > section {
  margin-bottom: 4mm;
}

.factsheet > section:last-of-type {
  margin-bottom: 0;
}

.factsheet__sectiekop {
  margin: 0 0 1.5mm;
  max-width: none;
  color: var(--colour-base);
  font-size: 9pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.factsheet__gegevens {
  margin: 0;
}

.factsheet__gegeven {
  display: flex;
  justify-content: space-between;
  gap: 3mm;
  padding: 0.8mm 0;
  border-bottom: 1px solid var(--colour-line-soft);
}

.factsheet__gegeven dt {
  flex: none;
  color: var(--colour-text-muted);
}

.factsheet__gegeven dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* Het bronlabel op papier: klein, mono, zonder kader. Op een blad dat in
   zwart-wit uit de printer komt is een kader om elk label alleen maar inkt. */
.factsheet__bron {
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 7pt;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

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

.factsheet__complexregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3mm;
  padding: 0.8mm 0;
  border-bottom: 1px solid var(--colour-line-soft);
}

.factsheet__complexregel--dit {
  font-weight: 700;
}

.factsheet__bijschrift {
  margin: 1.5mm 0 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 8pt;
  line-height: 1.35;
}

.factsheet__tabel {
  width: 100%;
  border-collapse: collapse;
}

.factsheet__tabel th,
.factsheet__tabel td {
  padding: 0.8mm 2mm 0.8mm 0;
  border-bottom: 1px solid var(--colour-line-soft);
  text-align: left;
  vertical-align: top;
}

.factsheet__tabel tbody th {
  color: var(--colour-base);
  font-weight: 600;
  white-space: nowrap;
}

.factsheet__waarneming {
  width: 55%;
  color: var(--colour-text-muted);
}

.factsheet__bedrag {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.factsheet__sim {
  width: 1%;
  white-space: nowrap;
}

.factsheet__restregel th {
  color: var(--colour-text-muted);
  font-weight: 400;
  font-style: italic;
}

.factsheet__totaal {
  margin: 2mm 0 0;
  max-width: none;
  font-size: 9pt;
  line-height: 1.4;
}

.factsheet__leeg {
  margin: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-style: italic;
}

.factsheet__voet {
  margin-top: 4mm;
  padding-top: 2mm;
  border-top: 1px solid var(--colour-line);
  color: var(--colour-text-muted);
  font-size: 7.5pt;
  line-height: 1.35;
}

.factsheet__voet p {
  margin: 0;
  max-width: none;
}

.factsheet__disclaimer {
  margin-top: 1mm;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Het dossier achter de inlog

   Dezelfde klassen als in de demo; alleen wat het bewerken nodig heeft komt
   erbij. De portefeuillerij is daar een link en hier een knop, want er is geen
   pagina om naartoe te gaan: het dossier wordt op zijn plek getekend.
   ------------------------------------------------------------------------- */

.portefeuille__objectnaam {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.koppelknop {
  border: 0;
  background: none;
  padding: 0;
  color: var(--colour-base);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.dossier-kop h2 {
  margin: 0;
}

.dossier__rolregel {
  margin: 0 0 var(--space-m);
}

/* De bewerkknop staat achter de waarde en niet ernaast: hij hoort bij dat ene
   veld, en in een raster van drie kolommen is een eigen kolom voor knoppen
   twee derde lege ruimte. */
.veld__bewerk {
  border: 0;
  background: none;
  padding: 0;
  color: var(--colour-accent-strong);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}

.veld__formulier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.veld__invoer {
  flex: 1 1 8rem;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  font: inherit;
}

.button--klein {
  min-height: 44px;
  padding: 6px 12px;
  font-size: 0.9375rem;
}

/* Een mislukte wijziging is geen detail: als het beleid hem weigert, moet dat
   in gewone taal op het scherm staan en niet alleen in de console. */
.veld__fout {
  flex: 1 1 100%;
  margin: 0;
  color: var(--status-verlopen-text);
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
   Situatieschets en kaart

   Allebei inline SVG en geen kaartbibliotheek: er ligt nog geen ondergrond
   onder. Wat hier staat is de meetkunde en de codering; zie de koptekst van
   src/site/kaartbeeld.ts voor wat er nog bij moet.
   ------------------------------------------------------------------------- */

.schets,
.kaartbeeld {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}

.schets__tekening svg,
.kaartbeeld__beeld svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-fond);
}

/* Het terrein: een gestippelde grens, geen vlak. Een dichtgeverfd terrein
   suggereert een perceelgrens die uit het kadaster komt, en die staat er niet. */
.schets__terrein {
  fill: none;
  stroke: var(--colour-text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

/*
 * De panden: witte vulling, dikke lijn in de conditiekleur. Uit het ontwerp, en
 * met reden — een vlak dat je in de conditiekleur dichtverft is op dit formaat
 * niet meer van zijn buren te onderscheiden, en dan zegt de kleur niets meer.
 */
.schets__vlak {
  fill: var(--colour-surface);
  stroke: var(--colour-line);
  stroke-width: 3;
}

.schets__vlak--1 {
  stroke: var(--conditie-1);
}
.schets__vlak--2 {
  stroke: var(--conditie-2);
}
.schets__vlak--3 {
  stroke: var(--conditie-3);
}
.schets__vlak--4 {
  stroke: var(--conditie-4);
}
.schets__vlak--5 {
  stroke: var(--conditie-5);
}
.schets__vlak--6 {
  stroke: var(--conditie-6);
}

/* Een terrein is geen gebouw: gestippeld en licht groen, zodat het kerkhof niet
   voor een pand wordt aangezien. */
.schets__vlak--terrein {
  fill: #eef4e9;
  stroke: #7d9a72;
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
}

.schets__naam {
  fill: var(--colour-base);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}

.schets__noord path,
.schets__schaal path {
  fill: none;
  stroke: var(--colour-text-muted);
  stroke-width: 1.5;
}

.schets__noord text,
.schets__schaal text {
  fill: var(--colour-text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
}

.schets__bijschrift,
.kaartbeeld__bron {
  margin: var(--space-xs) 0 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.schetslijst,
.kaartbeeld__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schetslijst__regel,
.kaartbeeld__complex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--colour-line-soft);
}

.schetslijst__kenmerk,
.kaartbeeld__kenmerk {
  display: block;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

/*
 * De marker draagt twee dingen tegelijk: de vulling is de conditie, de ring is
 * het gebruik. Dat is het ontwerpbesluit uit het pakket, en het werkt alleen
 * zolang die twee gescheiden blijven — een ring die ook van kleur verandert
 * maakt er één onleesbare mengeling van.
 */
.kaart-marker circle {
  stroke-width: 2.5;
}

.kaart-marker text {
  fill: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.kaart-marker--c0 circle {
  fill: var(--colour-text-muted);
}
.kaart-marker--c1 circle,
.kaart-marker--c2 circle,
.kaart-marker--c3 circle {
  fill: var(--conditie-3);
}
.kaart-marker--c4 circle {
  fill: var(--conditie-4);
}
.kaart-marker--c5 circle {
  fill: var(--conditie-5);
}
.kaart-marker--c6 circle {
  fill: var(--conditie-6);
}

.kaart-marker--eredienst circle {
  stroke: var(--colour-accent-strong);
}
.kaart-marker--overig circle {
  stroke: var(--colour-text-muted);
}

/* Dezelfde codering, klein, voor de lijst en de legenda. */
.kaartbeeld__stip,
.kaartbeeld__ring {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.2em;
  border-radius: 50%;
}

.kaartbeeld__stip.kaart-marker--c0 {
  background-color: var(--colour-text-muted);
}
.kaartbeeld__stip.kaart-marker--c1,
.kaartbeeld__stip.kaart-marker--c2,
.kaartbeeld__stip.kaart-marker--c3 {
  background-color: var(--conditie-3);
}
.kaartbeeld__stip.kaart-marker--c4 {
  background-color: var(--conditie-4);
}
.kaartbeeld__stip.kaart-marker--c5 {
  background-color: var(--conditie-5);
}
.kaartbeeld__stip.kaart-marker--c6 {
  background-color: var(--conditie-6);
}

.kaartbeeld__ring {
  background-color: transparent;
  border: 2.5px solid var(--colour-text-muted);
}

.kaartbeeld__ring.kaart-marker--eredienst {
  border-color: var(--colour-accent-strong);
}

/* De legenda staat ónder de kaart en niet erover; dat staat zo in het ontwerp
   en het is de enige plek waar hij niets bedekt. */
.kaartbeeld__legenda {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-fond);
}

.kaartbeeld__legendakop {
  margin: 0 0 var(--space-xs);
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.kaartbeeld__legenda ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.kaartbeeld__legenda li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.kaartbeeld__legendabij {
  margin: var(--space-xs) 0 0;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

@media (min-width: 56em) {
  /* De tekening links, de lijst rechts — zoals variant 1n. Op een smal scherm
     onder elkaar, met de tekening eerst. */
  .schets {
    grid-template-columns: 1.4fr 1fr;
  }

  /* En bij de kaart andersom: de lijst is de bediening en staat links, zoals
     variant 1i. */
  .kaartbeeld {
    grid-template-columns: 224px 1fr;
  }
}

/*
 * Op een smal scherm klapt het blad in.
 *
 * De factsheet is 210 mm breed; op een telefoon van 393 px past dat niet en
 * loopt de pagina zijwaarts uit beeld. De vier kerngetallen worden daarom twee
 * bij twee en de twee kolommen worden er één. Wat je op papier krijgt verandert
 * daar niet door — de afdrukregels hieronder houden de A4-indeling aan. Dat een
 * printweergave op een scherm anders oogt dan op papier is normaal; een pagina
 * die je opzij moet schuiven om te lezen is dat niet.
 *
 * `screen and` is hier geen overbodige precisie. Een A4 min de marges is 186 mm
 * en dat is 703 px; zonder die beperking slaat deze regel ook aan tijdens het
 * afdrukken en komt het blad met twee kolommen kerngetallen uit de printer.
 */
@media screen and (max-width: 48em) {
  .factsheet {
    padding: var(--space-m);
  }

  .factsheet__kerngetallen {
    grid-template-columns: repeat(2, 1fr);
  }

  .factsheet__kolommen {
    grid-template-columns: 1fr;
  }

  .factsheet__kop {
    flex-wrap: wrap;
  }

  .factsheet__kenmerk {
    text-align: left;
  }
}

/* -------------------------------------------------------------------------
   Afdrukken

   Alles wat om het blad heen staat gaat weg, en alle kleurvlakken worden
   randen. Browsers drukken achtergronden standaard niet af: een gevulde
   conditiebadge zou als wit op wit uit de printer komen. Daarom hier zwarte
   randen met zwarte cijfers — de conditie blijft leesbaar zonder kleur, en dat
   is ook precies waarom het cijfer altijd in de badge staat.
   ------------------------------------------------------------------------- */

@page {
  size: A4;
  margin: 12mm;
}

@media print {
  .demo-banner,
  .demo-kop,
  .demo-zijbalk,
  .demo-kruimel,
  .demo-slot,
  .demo-intro,
  .demo-noscript,
  .skip-link,
  .dossier-terug,
  .demo-inhoud > h1 {
    display: none !important;
  }

  body,
  .demo,
  .demo-indeling,
  .demo-inhoud {
    display: block;
    margin: 0;
    padding: 0;
    max-width: none;
    background: #ffffff;
  }

  .factsheet {
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #000000;
  }

  .factsheet__titel,
  .factsheet__kerngetal-waarde,
  .factsheet__sectiekop,
  .factsheet__tabel tbody th {
    color: #000000;
  }

  .factsheet__kop {
    border-bottom-color: #000000;
  }

  .factsheet__adres,
  .factsheet__kenmerk,
  .factsheet__kerngetal-label,
  .factsheet__gegeven dt,
  .factsheet__bron,
  .factsheet__waarneming,
  .factsheet__bijschrift,
  .factsheet__voet,
  .factsheet__leeg,
  .factsheet__restregel th {
    color: #333333;
  }

  /* De kleur is weg, het cijfer blijft. */
  .conditie-badge {
    min-width: 0;
    padding: 0 3px;
    border: 1px solid #000000;
    background: none !important;
    color: #000000;
  }

  .sim-vlag {
    border-color: #000000;
    color: #000000;
  }

  .factsheet__letop {
    border-left-color: #000000;
    background: none !important;
    color: #000000;
  }

  /* Een sectie die over de vouw breekt is op één A4 een fout, geen opmaak. */
  .factsheet section,
  .factsheet__tabel tr,
  .factsheet__kolommen {
    break-inside: avoid;
  }
}

/* -------------------------------------------------------------------------
   Gebouw toevoegen

   Het blok staat onder de gebouwenlijst en niet erboven: wie binnenkomt wil
   eerst zien wat er al is. Alleen bij een leeg dossier is het het enige wat er
   staat, en dan is de lege lijst er nog steeds boven — die vertelt met zoveel
   woorden dat er nog niets is, en dit blok is dan het antwoord daarop.
   ------------------------------------------------------------------------- */

.inrichten {
  margin-top: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background: var(--colour-fond);
}

.inrichten__kop {
  margin: 0 0 var(--space-xs);
  font-size: 1.0625rem;
}

.inrichten__inleiding {
  margin: 0 0 var(--space-m);
  max-width: 46ch;
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

/* Onder elkaar en niet naast elkaar. Een raster van twee kolommen wint ruimte
   en verliest volgorde: bij deze doelgroep telt dat laatste zwaarder. Pas
   vanaf een brede kolom mogen ze naast elkaar. */
.inrichten__formulier {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
  max-width: 30rem;
}

.inrichten__veld {
  display: grid;
  gap: 4px;
}

.inrichten__veld label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.inrichten__veld input,
.inrichten__veld select {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
}

.inrichten__hulp {
  margin: 0;
  color: var(--colour-text-muted);
  font-size: 0.8125rem;
}

/* De knop krijgt geen volle breedte: hij is een handeling, geen veld. */
.inrichten__formulier .button {
  justify-self: start;
}

/* -------------------------------------------------------------------------
   Intake: de kerngegevens voor de factsheet (tabblad Profiel, echt dossier)
   ------------------------------------------------------------------------- */

.intake-teller__stand {
  margin: 0 0 var(--space-xs);
  font-size: 1rem;
}

.intake-teller__balk {
  display: block;
  height: 0.5rem;
  max-width: 24rem;
  overflow: hidden;
  background-color: var(--colour-soft);
  border-radius: 999px;
}

.intake-teller__vulling {
  display: block;
  height: 100%;
  background-color: var(--colour-base);
}

.intake-teller__lijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.25rem var(--space-m);
  margin: var(--space-m) 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.intake-teller__lijst li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.intake-teller__lijst .is-open {
  color: var(--colour-text-muted);
}

.intake-teller__teken {
  width: 1rem;
  font-weight: 700;
  color: var(--status-ok-dot);
}

.intake-teller__lijst .is-open .intake-teller__teken {
  color: var(--colour-accent-strong);
}

.intake-teller__verder {
  margin: 0;
}

.intake-formulier {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: flex-end;
  margin: var(--space-s) 0;
}

.intake-vinkje {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: var(--space-s) 0 0;
  font-weight: 700;
}

.intake-veld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
}

/* In een kolom zou `flex: 1` het veld in de hoogte laten groeien. */
.intake-veld .veld__invoer {
  flex: none;
  max-width: 100%;
}

.intake-gevonden {
  margin: var(--space-s) 0 0;
  font-weight: 700;
}

.intake-knoppen,
.factsheet__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  margin: var(--space-s) 0;
}

.factsheet__uitleg {
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.factsheet__open {
  font-style: italic;
  color: var(--colour-accent-strong);
}

/*
 * Afdrukken vanuit het echte dossier. Staat er een factsheet op het scherm,
 * dan gaat alleen het blad naar de printer: kop, voet, tabbladen en de rest
 * van de pagina blijven achter. Met :has, zodat Ctrl+P hetzelfde doet als de
 * knop en er geen klasse aan en uit hoeft.
 */
@media print {
  body:has(.factsheet-omlijsting) .site-header,
  body:has(.factsheet-omlijsting) .site-footer,
  body:has(.factsheet-omlijsting) .hero,
  body:has(.factsheet-omlijsting) .section:not(:has(.factsheet-omlijsting)),
  body:has(.factsheet-omlijsting) .section__kop,
  body:has(.factsheet-omlijsting) .dossier__rolregel,
  body:has(.factsheet-omlijsting) .dossier-scherm > :not(.dossier-inhoud),
  .factsheet__knoppen {
    display: none !important;
  }

  body:has(.factsheet-omlijsting) .section,
  body:has(.factsheet-omlijsting) .container {
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .factsheet__open {
    color: #333333;
  }
}

/* -------------------------------------------------------------------------
   De gebouwen: een kaart per gebouw, de hele kaart is de knop.
   ------------------------------------------------------------------------- */

.gebouwen__complex {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-s);
  margin: var(--space-m) 0 var(--space-s);
  font-size: 1.0625rem;
}

.gebouwen__complex span {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--colour-text-muted);
}

.gebouwen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gebouwen__raster > li {
  display: flex;
}

.gebouwkaart {
  display: grid;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-m);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background: var(--colour-surface);
  box-shadow: 0 2px 8px rgb(28 40 48 / 6%);
  font: inherit;
  color: var(--colour-ink);
  text-align: left;
  cursor: pointer;
}

.gebouwkaart:hover {
  border-color: var(--colour-base);
}

.gebouwkaart:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 2px;
}

.gebouwkaart__kop {
  display: grid;
  gap: 0.15rem;
}

.gebouwkaart__naam {
  font-size: 1.0625rem;
  color: var(--colour-base);
}

.gebouwkaart__soort {
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.gebouwkaart__feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-s);
  font-size: 0.875rem;
}

.gebouwkaart__monument {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--colour-soft);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--colour-base);
}

.gebouwkaart__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--colour-line);
}

.gebouwkaart__dossierregel {
  display: grid;
  gap: 0.2rem;
  min-width: 7rem;
  font-size: 0.75rem;
  color: var(--colour-text-muted);
}

.gebouwkaart__dossier {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--colour-soft);
  overflow: hidden;
}

.gebouwkaart__vulling {
  display: block;
  height: 100%;
  background: var(--colour-base);
}

.gebouwen__toevoegen {
  margin-top: var(--space-m);
}

.gebouwen__leeg {
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   Het dossier van één gebouw: balk bovenaan, blokken per onderwerp

   Met een gebouw open valt de kop van het werkblad weg ("Ons gebouw",
   "Gebouwen", de uitleg): de balk zegt al waar u bent. De kop blijft er voor
   een schermlezer.
   ------------------------------------------------------------------------- */

.wr-blad--gebouw-open > .wr-blad__eyebrow,
.wr-blad--gebouw-open > .wr-blad__intro,
.wr-blad--gebouw-open .dossier__rolregel {
  display: none;
}

.wr-blad--gebouw-open > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* De tint per onderwerp: een kleur voor de rand en de kop, een lichte voor het vlak. */
.dossier-tab--gegevens,
.dossier-sectie--gegevens {
  --onderwerp: var(--colour-base);
  --onderwerp-tint: var(--colour-soft);
}
.dossier-tab--onderhoud,
.dossier-sectie--onderhoud {
  --onderwerp: #96650f;
  --onderwerp-tint: #fbf1dd;
}
.dossier-tab--monument,
.dossier-sectie--monument {
  --onderwerp: #8a2f21;
  --onderwerp-tint: #f9e7e4;
}
.dossier-tab--ligging,
.dossier-sectie--ligging {
  --onderwerp: #1f5631;
  --onderwerp-tint: #eaf4ec;
}
.dossier-tab--beheer,
.dossier-sectie--beheer {
  --onderwerp: var(--colour-slate-60);
  --onderwerp-tint: #e7eef5;
}

.dossier-balk {
  position: sticky;
  top: var(--dossier-kop, 0);
  z-index: 4;
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-m) 0;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background: var(--colour-surface);
  box-shadow: 0 2px 8px rgba(28, 40, 48, 0.06);
}

/*
 * De voorgevel staat rechtsboven, naast de naam, en maakt de kop niet hoger:
 * de kop blijft staan bij scrollen, en elke pixel gaat van het werkblad af.
 */
.dossier-balk__voorgevel {
  position: absolute;
  top: var(--space-s);
  right: var(--space-m);
}

.dossier-balk__voorgevel img {
  display: block;
  width: 7rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-photo, var(--radius));
  background: var(--colour-fond);
  cursor: pointer;
}

.dossier-balk__voorgevelknop {
  display: grid;
  place-items: center;
  width: 7rem;
  height: 4.5rem;
  padding: 0.25rem;
  border: 1px dashed var(--colour-line);
  border-radius: var(--radius-photo, var(--radius));
  background: var(--colour-fond);
  color: var(--colour-text-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.dossier-balk__voorgevelknop:hover {
  color: var(--colour-base);
  border-color: var(--colour-base);
}

/* Ruimte voor de voorgevel, zodat een lange naam er niet onder loopt. */
.dossier-balk:has(.dossier-balk__voorgevel:not([hidden])) .dossier-balk__titel {
  padding-right: 8rem;
}

.dossier-balk__titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-s);
}

.dossier-balk__terug {
  flex-basis: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--colour-base);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--colour-accent-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.dossier-balk__naam {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.dossier-balk__soort {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

.dossier-tabs {
  display: flex;
  gap: 0.375rem;
  margin-top: var(--space-s);
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Op een breed scherm lopen de tabbladen terug naar een tweede regel in plaats
   van weg te schuiven; op een telefoon schuiven ze, zodat de balk laag blijft. */
@media (min-width: 40.01em) {
  .dossier-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.dossier-tab {
  flex: none;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: none;
  color: var(--colour-text-muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.dossier-tab:hover {
  background: var(--onderwerp-tint);
  color: var(--colour-ink);
}

/* Waar u bent: vlak, streep en gewicht, nooit alleen kleur. */
.dossier-tab[aria-current="page"] {
  border-bottom-color: var(--onderwerp);
  background: var(--onderwerp-tint);
  color: var(--colour-ink);
  font-weight: 700;
}

.dossier-tab:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: -3px;
}

/* De blokken: kaarten naast elkaar op een breed scherm, onder elkaar op een smal. */
/*
 * Kaartjes naast elkaar zijn even hoog: `stretch` rekt elk kaartje op tot de
 * hoogste in zijn rij. Zo lopen de randen strak door; de inhoud blijft bovenaan.
 */
.dossier-inhoud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: stretch;
  gap: var(--space-m);
  padding-top: 0;
}

.dossier-inhoud--factsheet {
  display: block;
}

.dossier-inhoud > .dossier-sectie {
  margin: 0;
  padding: 0 var(--space-m) var(--space-m);
  border: 1px solid var(--colour-line);
  border-top: 4px solid var(--onderwerp, var(--colour-base));
  border-radius: var(--radius-card);
  background: var(--colour-surface);
  box-shadow: 0 2px 8px rgba(28, 40, 48, 0.06);
  min-width: 0;
}

.dossier-inhoud > .dossier-sectie + .dossier-sectie {
  margin-top: 0;
}

.dossier-inhoud > .dossier-sectie--breed {
  grid-column: 1 / -1;
}

.dossier-inhoud > .dossier-sectie > .dossier-sectie__kop {
  margin: 0 calc(-1 * var(--space-m)) var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--onderwerp-tint, var(--colour-soft));
  color: var(--onderwerp, var(--colour-base));
  font-size: 1.0625rem;
  font-weight: 800;
}

/* Tabellen in een blok: niet breder dan het blok, wel scrollen. */
.dossier-inhoud > .dossier-sectie table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Het kaartje */
.ligging__vak {
  position: relative;
  height: 16rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--colour-fond);
}

.ligging__tegels {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ligging__tegels img {
  position: absolute;
  max-width: none;
}

/* De panden uit de BAG: aanwezig, maar de ondergrond blijft leesbaar. */
.ligging__tegels .ligging__bag {
  opacity: 0.7;
}

/* Het eigen pand: een dikke lijn en een lichte vulling, boven de pandlaag. */
.ligging__pand {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

.ligging__pand polygon {
  fill: var(--colour-accent-strong);
  fill-opacity: 0.2;
  stroke: var(--colour-accent-strong);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* De speld: een stip met een witte rand, de punt op de plek zelf. */
.ligging__speld {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -1.5rem 0 0 -0.75rem;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--colour-accent-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.ligging__knoppen {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: flex;
  gap: 0.25rem;
}

.ligging__knop {
  min-width: 2.25rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  background: var(--colour-surface);
  color: var(--colour-base);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.ligging__knop[aria-pressed="true"] {
  border-color: var(--colour-base);
  background: var(--colour-base);
  color: #fff;
}

.ligging__knop:disabled {
  opacity: 0.5;
  cursor: default;
}

.ligging__knop--zoom {
  font-size: 1rem;
  line-height: 1;
}

.ligging__onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  font-size: 0.8125rem;
}

.ligging__bron {
  color: var(--colour-text-muted);
}

@media (max-width: 40em) {
  .dossier-balk {
    padding: var(--space-xs) var(--space-s) 0;
  }
  .dossier-balk__naam {
    font-size: 1.25rem;
  }
  .dossier-balk__voorgevel {
    display: none;
  }
  .dossier-balk:has(.dossier-balk__voorgevel) .dossier-balk__titel {
    padding-right: 0;
  }
  .ligging__vak {
    height: 13rem;
  }
}

@media print {
  .dossier-balk {
    position: static;
    box-shadow: none;
  }
  .dossier-tabs,
  .dossier-balk__terug,
  .ligging__knoppen {
    display: none;
  }
}

/* Het werkblad Scans: de beheerscans van de kerk. De uitslag zelf gebruikt de
   klassen van scan.css, zodat hij er hetzelfde uitziet als na de scan. */
.scans-kerk {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.scans-uitslag {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.scans-uitslag h3,
.scans-kerk h3 {
  margin: var(--space-m) 0 0;
}

.scans-toelichting {
  margin: 0;
  padding: 0.75rem 1rem;
  white-space: pre-line;
  background-color: var(--colour-fond);
  border-left: 3px solid var(--colour-line);
  border-radius: var(--radius);
}

.scans-leeg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  max-width: var(--width-prose);
}

/* Foto's en documenten bij een gebouw */
.bestanden__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.bestanden__plaats {
  cursor: pointer;
}

.bestanden__bij,
.bestanden__filtervak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
}

.bestanden__filtervak {
  margin-bottom: var(--space-m);
}

.bestanden__filterlabel {
  font-weight: 700;
}

.bestanden__bijlijst,
.bestanden__filter,
.bestanden__ruimte {
  max-width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  background: var(--colour-surface);
  font: inherit;
  font-size: 0.875rem;
}

.bestanden__ruimte {
  align-self: flex-start;
  padding: 0.15rem 0.35rem;
  font-size: 0.8125rem;
}

.bestanden__plaats:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 2px;
}

.bestanden__uitleg,
.bestanden__meta {
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.bestanden__melding {
  margin: 0 0 var(--space-m);
  color: var(--colour-text-muted);
}

.bestanden__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-s);
  margin: 0 0 var(--space-m);
  padding: 0;
  list-style: none;
}

.bestanden__foto {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bestanden__foto figure {
  margin: 0;
}

.bestanden__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-photo);
  background: var(--colour-fond);
}

.bestanden__foto figcaption {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

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

.bestanden__document {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--colour-line);
  overflow-wrap: anywhere;
}

.bestanden__document .bestanden__weg {
  margin-left: auto;
}

/* Straatfoto's van Mapillary: een rij om de voorgevel uit te kiezen. */
.bestanden__straatfotos {
  margin: 0 0 var(--space-m);
  padding: var(--space-s);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background: var(--colour-fond);
}

.bestanden__straatkop {
  margin: 0 0 var(--space-xs);
  font-weight: 700;
}

.bestanden__straatlijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bestanden__straatfoto {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-photo);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bestanden__straatfoto:hover,
.bestanden__straatfoto:focus-visible {
  border-color: var(--colour-base);
}

.bestanden__straatfoto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

/* De foto die als voorgevel in de kop staat. */
.bestanden__voorgevel {
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  background: var(--colour-base);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.bestanden__weg {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--colour-text-muted);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.bestanden__weg:hover {
  color: #8a2f21;
}

/* De indeling van een gebouw: het nummer en de ruimtes */
.indeling__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.indeling__gebouwnummer {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.indeling__nummerform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.indeling__melding,
.indeling__leeg {
  margin: 0 0 var(--space-s);
  color: var(--colour-text-muted);
}

.indeling__tabelvak {
  overflow-x: auto;
}

.indeling__tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.dossier-inhoud > .dossier-sectie .indeling__tabel {
  display: table;
}

.indeling__tabel th {
  padding: var(--space-xs) var(--space-xs) var(--space-xs) 0;
  border-bottom: 2px solid var(--colour-line);
  color: var(--colour-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.indeling__tabel td {
  padding: var(--space-xs) var(--space-xs) var(--space-xs) 0;
  border-bottom: 1px solid var(--colour-line);
  vertical-align: middle;
}

.indeling__nummer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.indeling__link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.indeling__link:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 2px;
}

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

.indeling__acties {
  white-space: nowrap;
  text-align: right;
}

.indeling__knop {
  margin-left: var(--space-xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--colour-base);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: var(--colour-accent-strong);
  cursor: pointer;
}

.indeling__bewaar {
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
}

.indeling__bewerk td {
  background: var(--colour-fond);
}

.indeling__invoer {
  box-sizing: border-box;
  width: 100%;
  min-width: 6rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  background: var(--colour-surface);
  font: inherit;
  font-size: 0.9375rem;
}

.indeling__invoer--nummer {
  width: 3.5rem;
  min-width: 3.5rem;
  text-align: center;
}

.indeling__invoer--m2 {
  width: 5rem;
  min-width: 5rem;
}

.indeling__invoer[aria-invalid="true"] {
  border-color: #b3402e;
  outline: 2px solid #f9e7e4;
}

/* Werkblad Abonnement: de aanbevolen modules als kaarten naast elkaar. */

.abonnement-advies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.abonnement-advies__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-left: 4px solid var(--colour-base);
  border-radius: var(--radius-card);
}

.abonnement-advies__item h4,
.abonnement-advies__item p {
  margin: 0;
}

.abonnement-advies__waarom {
  font-weight: 600;
  color: var(--colour-base);
}

.abonnement-advies__item .abonnement-advies__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: auto;
  padding-top: var(--space-xs);
  font-variant-numeric: tabular-nums;
  color: var(--colour-text-muted);
}

.abonnement__sinds {
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

/* Werkbladen Basis en Bibliotheek: elke module als tegel, open of dicht. */

.bieb-groep + .bieb-groep {
  margin-top: var(--space-l);
}

.bieb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bieb-tegel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-left: 4px solid var(--colour-accent);
  border-radius: var(--radius-card);
}

.bieb-tegel--dicht {
  border-left-color: var(--colour-line);
  background: var(--colour-fond);
}

.bieb-tegel h4,
.bieb-tegel p {
  margin: 0;
}

.bieb-tegel .bieb-tegel__stand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--colour-accent-strong);
}

.bieb-tegel--dicht .bieb-tegel__stand {
  color: var(--colour-text-muted);
}

.bieb-tegel .bieb-tegel__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: auto;
  padding-top: var(--space-xs);
}

.bieb-tegel__aangevraagd {
  font-weight: 600;
  color: var(--colour-text-muted);
}

.bieb-groep__noot {
  margin-top: var(--space-s);
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

/* Werkblad Jaarkalender: per maand een lijst, de datum links. */

.jk-maand {
  margin-top: var(--space-l);
}

.jk-maand__kop {
  margin: 0 0 var(--space-xs);
  font-size: 1.125rem;
  text-transform: capitalize;
}

.jk-maand__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--colour-line);
}

.jk-termijn {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0 var(--space-m);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--colour-line);
}

.jk-termijn p {
  margin: 0;
}

.jk-termijn__datum {
  grid-row: span 2;
  font-variant-numeric: tabular-nums;
  color: var(--colour-text-muted);
}

.jk-termijn__titel {
  font-weight: 700;
}

.jk-termijn__over {
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.jk-termijn--telaat .jk-termijn__datum {
  color: var(--status-verlopen-text);
  font-weight: 700;
}

@media (max-width: 30em) {
  .jk-termijn {
    grid-template-columns: minmax(0, 1fr);
  }

  .jk-termijn__datum {
    grid-row: auto;
  }
}

/* De foto van de voorgevel boven op de kaart, als die gekozen is. */
.gebouwkaart__foto {
  display: block;
  margin: calc(-1 * var(--space-m)) calc(-1 * var(--space-m)) 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--colour-soft);
}

.gebouwkaart__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}