/*
 * Eén stylesheet, met de hand. Geen build, geen framework: dat was het punt van
 * de overstap, en op deze omvang is het ook eerlijk gezegd korter.
 *
 * De opmaak onder `.tekst` geldt voor gerenderde markdown uit de redactie. Die
 * teksten hebben een bekende, vaste vorm: koppen, alinea's, lijsten, tabellen,
 * rekenblokken en verwijzingen naar claims uit het dossier.
 */

:root {
    --papier: #fbfaf8;
    --inkt: #1b1a17;
    --lijn: #e3dfd7;
    --gedempt: #6a655c;
    --akkoord: #1f6b45;
    --opmerking: #a4531c;
    --vlak: #f4f2ec;
    --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

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

html, body { height: 100%; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--papier);
    color: var(--inkt);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: #1c4f8a; }
a.stil { color: inherit; text-decoration: none; }
a.stil:hover { text-decoration: underline; }

.midden { width: 100%; max-width: 52rem; margin: 0 auto; padding: 0 1.5rem; }
.midden-breed { max-width: 68rem; }
.groei { flex: 1; }

/* ---------- koppen en balken ---------- */

.balk {
    border-bottom: 1px solid var(--lijn);
    background: #fff;
}
.balk-publiek { background: transparent; }
.balk .midden { display: flex; align-items: center; gap: 1.25rem; padding-top: .7rem; padding-bottom: .7rem; }
.balk .naam { font-weight: 600; }
.balk a { color: var(--gedempt); text-decoration: none; }
.balk a:hover, .balk a.naam { color: var(--inkt); }
.balk .rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: var(--gedempt); }
.balk form { margin: 0; }

h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h1.groot { font-family: var(--serif); font-size: 2rem; font-weight: normal; line-height: 1.2; }
h2 { font-size: 1rem; margin: 0; }
.kopje {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gedempt);
    margin: 0 0 .5rem;
}
.gedempt { color: var(--gedempt); }
.klein { font-size: .82rem; }
.mono { font-family: var(--mono); font-size: .8rem; }
.akkoord { color: var(--akkoord); }
.opmerking { color: var(--opmerking); }

/* ---------- kaarten, lijsten, roosters ---------- */

.kaart {
    border: 1px solid var(--lijn);
    border-radius: 6px;
    background: #fff;
}
.kaart > .kop {
    border-bottom: 1px solid var(--lijn);
    padding: .6rem .9rem;
}
.kaart > .romp { padding: .9rem; }

.rooster { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .rooster.twee { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .rooster.review { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }

ul.plat, ol.plat { list-style: none; margin: 0; padding: 0; }
ul.plat > li { border-top: 1px solid var(--lijn); }
ul.plat > li:first-child { border-top: 0; }
.rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .55rem .9rem; }
.rij .duw { margin-left: auto; }
a.rij { text-decoration: none; color: inherit; }
a.rij:hover { background: var(--papier); }
.stapel { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .9rem; }

.merk {
    display: inline-block;
    border: 1px solid var(--lijn);
    border-radius: 3px;
    padding: .05rem .35rem;
    font-size: .75rem;
    color: var(--gedempt);
    background: var(--papier);
}

/* ---------- formulieren ---------- */

label.veld { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; margin-bottom: .8rem; }
label.veld > span { font-weight: 500; }
input[type=text], input[type=email], input[type=password], textarea {
    font: inherit;
    padding: .45rem .55rem;
    border: 1px solid var(--lijn);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    width: 100%;
}
input[type=number] {
    font: inherit;
    padding: .45rem .55rem;
    border: 1px solid var(--lijn);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    width: 100%;
}
input:focus, textarea:focus { outline: 0; border-color: var(--inkt); }
textarea { resize: vertical; }
.teken-teller { display: block; margin-top: .2rem; text-align: right; }

button {
    font: inherit;
    font-weight: 500;
    padding: .45rem .9rem;
    border-radius: 4px;
    border: 1px solid transparent;
    background: var(--inkt);
    color: var(--papier);
    cursor: pointer;
}
button.vol { width: 100%; }
button.goed { background: var(--akkoord); color: #fff; }
button.terug { background: #fff; color: var(--opmerking); border-color: var(--opmerking); }
button.rand { background: #fff; color: var(--inkt); border-color: var(--lijn); }
button.link {
    background: none; border: 0; padding: 0; color: var(--gedempt);
    text-decoration: underline; font-weight: normal; font-size: .82rem;
}
button.link:hover { color: var(--opmerking); }
button:disabled { opacity: .4; cursor: not-allowed; }

.melding {
    border: 1px solid var(--opmerking);
    background: #fdf6f0;
    color: var(--opmerking);
    border-radius: 4px;
    padding: .5rem .7rem;
    font-size: .85rem;
    margin: 0 0 .8rem;
}
.melding.goed { border-color: var(--akkoord); background: #f1f7f3; color: var(--akkoord); }

/* ---------- redactieplanning ---------- */

.planning-hoofd { align-items: start; }
.formulier-scheiding { border-top: 1px solid var(--lijn); margin-top: 1.25rem; padding-top: 1.25rem; }
.werk-lijst > li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border-top: 1px solid var(--lijn);
    background: #fff;
}
.werk-lijst > li:first-child { border-top: 0; }
.werk-lijst > li.wordt-gesleept { opacity: .45; }
.sleep { color: var(--gedempt); cursor: grab; font-size: 1.2rem; letter-spacing: -.2em; padding-right: .2em; }
.werk-inhoud { min-width: 0; flex: 1; }
.werk-status { margin: 0; padding: .55rem .9rem; border-top: 1px solid var(--lijn); }
.sectie-kop { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.sectie-kop p { margin: .2rem 0 0; }
.zonder-padding { padding: 0; }
.idee-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .4rem 0; }
.idee-acties form { display: flex; align-items: center; gap: .75rem; margin: 0; }
.werk-verplaats { display: flex; gap: .35rem; }
.werk-verplaats button { font-size: 1rem; text-decoration: none; }
.planning-details > summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; }
.planning-details[open] > summary { border-bottom: 1px solid var(--lijn); }

/* ---------- frontmatter en documenten ---------- */

details.document { border: 1px solid var(--lijn); border-radius: 6px; background: #fff; margin-bottom: 1rem; }
details.document > summary {
    cursor: pointer;
    padding: .5rem .9rem;
    border-bottom: 1px solid var(--lijn);
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--gedempt);
}
dl.frontmatter {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: .15rem 1rem;
    margin: 0;
    padding: .7rem .9rem;
    background: var(--papier);
    border-bottom: 1px solid var(--lijn);
    font-size: .8rem;
}
dl.frontmatter dt { font-family: var(--mono); color: var(--gedempt); }
dl.frontmatter dd { margin: 0; }
dl.frontmatter dd.leeg { color: var(--opmerking); }
dl.gegevens { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .45rem 1rem; margin: 0; }
dl.gegevens dt { color: var(--gedempt); font-size: .85rem; }
dl.gegevens dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- gerenderde markdown ---------- */

.tekst { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; }
.tekst.ruim { padding: 1.2rem 1.5rem; }
.tekst > * + * { margin-top: 1.1em; }
.tekst h1, .tekst h2, .tekst h3 {
    font-family: var(--sans);
    font-weight: 600;
    line-height: 1.25;
    margin: 2em 0 .6em;
}
.tekst h1 { font-size: 1.5rem; }
.tekst h2 { font-size: 1.2rem; border-top: 1px solid var(--lijn); padding-top: 1.1em; }
.tekst h3 { font-size: 1.03rem; }
.tekst ul, .tekst ol { padding-left: 1.4em; margin-top: 1.1em; }
.tekst li + li { margin-top: .35em; }
.tekst blockquote {
    border-left: 3px solid var(--lijn);
    margin-left: 0;
    padding-left: 1em;
    color: var(--gedempt);
}
.tekst code {
    font-family: var(--mono);
    font-size: .9em;
    background: #f1efe9;
    border: 1px solid var(--lijn);
    border-radius: 3px;
    padding: .05em .3em;
}
.tekst pre {
    font-family: var(--mono);
    font-size: .85rem;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: .9em 1em;
    overflow-x: auto;
}
.tekst pre code { background: none; border: 0; padding: 0; }
.tekst table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: .88rem;
}
.tekst th, .tekst td {
    border: 1px solid var(--lijn);
    padding: .35em .6em;
    text-align: left;
    vertical-align: top;
}
.tekst th { background: var(--vlak); font-weight: 600; }
.tekst hr { border: 0; border-top: 1px solid var(--lijn); }
.tekst img { max-width: 100%; height: auto; }

/* Verwijzing naar een claim uit het dossier; alleen zichtbaar in het beheer. */
.tekst sup.claim {
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gedempt);
    border: 1px solid var(--lijn);
    border-radius: 3px;
    padding: .1em .25em;
    margin-left: .15em;
    cursor: help;
}

/* Een narekenbare berekening. Bewust geen codeblok: dit is een formule met een
   uitkomst, niet iets wat je intikt. */
.tekst figure.reken {
    margin: 1.1em 0;
    border: 1px solid var(--lijn);
    border-left: 3px solid var(--gedempt);
    border-radius: 4px;
    background: #f7f5f0;
    padding: .9em 1.1em;
    font-family: var(--mono);
    font-size: .85rem;
}
.tekst .reken-formule { font-size: 1rem; }
.tekst .reken-waarden { margin-top: .35em; color: var(--gedempt); }
.tekst .reken-waarden span { margin-right: .35em; }
.tekst .reken-resultaat { margin-top: .35em; font-weight: 600; }
.tekst figure.reken figcaption {
    margin-top: .6em;
    border-top: 1px solid var(--lijn);
    padding-top: .5em;
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gedempt);
}

/* Gestructureerde redactievormen. Alle inhoud is al ge-escaped door de renderers. */
.tekst .proefje,
.tekst figure.ascii-schema,
.tekst figure.circuit,
.tekst .bijzonder-fout {
    max-width: 100%;
    margin: 1.1em 0;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    break-inside: avoid;
}
.tekst .proefje,
.tekst figure.circuit,
.tekst .bijzonder-fout,
.tekst .schema-melding { overflow-wrap: anywhere; }
.tekst .proefje { padding: 1em 1.1em; border-left: 4px solid #336c7d; background: #f5fafb; }
.tekst .proefje h3 { margin: 0 0 .8em; font-size: 1.05rem; }
.tekst .proefje h4 { margin: 1em 0 .35em; font-family: var(--sans); font-size: .9rem; }
.tekst .proefje dl { margin: .7em 0 0; }
.tekst .proefje dt { font-family: var(--sans); font-size: .78rem; font-weight: 600; text-transform: uppercase; }
.tekst .proefje dd { margin: .15em 0 0; }
.tekst .proefje ol { margin: .35em 0 0; }

.tekst figure.ascii-schema { overflow-x: auto; background: var(--vlak); }
.tekst figure.ascii-schema figcaption,
.tekst figure.circuit figcaption {
    padding: .55em .85em;
    border-bottom: 1px solid var(--lijn);
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tekst figure.ascii-schema pre { min-width: max-content; margin: 0; border: 0; border-radius: 0; overflow: visible; }
.tekst figure.circuit { overflow: hidden; background: #fff; }
.tekst figure.circuit svg { display: block; width: 100%; height: auto; min-height: 12rem; }
.circuit-lijnen line,
.circuit-component path,
.circuit-component rect,
.circuit-component circle,
.circuit-meetpunt line,
.circuit-meetpunt circle,
.circuit-massa line,
.circuit-massa circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.circuit-component text,
.circuit-meetpunt text,
.circuit-aansluiting { font-family: var(--sans); font-size: 12px; fill: currentColor; }
.circuit-component .circuit-detail { font-size: 10px; fill: var(--gedempt); }
.circuit-knoop { fill: currentColor; }
.circuit-meetpunt circle { fill: #fff; }
.circuit-meetpunten { margin: 0; padding: 0 .9em .8em; font-family: var(--sans); font-size: .78rem; }
.alleen-voorlezer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tekst .bijzonder-fout,
.tekst .schema-melding {
    padding: .65em .8em;
    background: #fdf6f0;
    color: var(--opmerking);
    font-family: var(--sans);
    font-size: .82rem;
}
.tekst .schema-melding { display: inline-block; }

@media (max-width: 24rem) {
    .midden { padding-left: .75rem; padding-right: .75rem; }
    .tekst.ruim { padding: .85rem; }
    .tekst .proefje { padding: .8em; }
}

@media print {
    .tekst .proefje,
    .tekst figure.ascii-schema,
    .tekst figure.circuit { background: #fff; border: 1px solid #555; color: #000; }
    .tekst figure.ascii-schema { overflow: visible; }
    .tekst figure.ascii-schema pre { white-space: pre-wrap; }
    .tekst figure.ascii-schema figcaption,
    .tekst figure.circuit figcaption,
    .tekst .proefje h3,
    .tekst .proefje h4,
    .tekst .proefje dt { color: #000; }
}

/* ---------- publieke site ---------- */

.artikellijst { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.artikellijst > li { border-bottom: 1px solid var(--lijn); padding: 1.4rem 0; }
.artikellijst h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: normal; }
.artikellijst .samenvatting { font-family: var(--serif); margin: .4rem 0 0; color: #33312c; }
.verdieping { margin-top: 3.5rem; }
.verdieping > details { border-top: 1px solid var(--lijn); padding-top: 1rem; margin-top: 1rem; }
.verdieping > details > summary { font-family: var(--serif); font-size: 1.1rem; cursor: pointer; }

footer.voet { border-top: 1px solid var(--lijn); }
footer.voet .midden { padding-top: 1.2rem; padding-bottom: 1.2rem; font-size: .8rem; color: var(--gedempt); }

/*
 * Beheeroverzichten op de afgeleide onderwerpstatus: /admin/onderwerpen en
 * /admin/voortgang. Een eigen tabelstijl, want `.tekst table` geldt voor
 * gerenderde markdown uit de redactie en dit is een beheerlijst.
 */
.tabel-schuif { overflow-x: auto; }
table.lijst {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
table.lijst th, table.lijst td {
    border-bottom: 1px solid var(--lijn);
    padding: .45rem .6rem;
    text-align: left;
    vertical-align: top;
}
table.lijst th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gedempt);
    font-weight: 600;
}
table.lijst tr:last-child td { border-bottom: 0; }

/* Aandeel per status. Niet `.balk`: dat is de navigatiebalk. */
.meterbalk {
    background: var(--vlak);
    border-radius: 3px;
    height: .4rem;
    margin-top: .2rem;
    overflow: hidden;
}
.meterbalk span {
    display: block;
    height: 100%;
    background: var(--gedempt);
}