/* LongCovidNieuws — publieke site. Sinds #64 (2026-10-05) in de stijl van skatr (css/skatr-ui.css):
   donkerblauwe kop, lichte ondergrond, witte lijsten met haarlijnen, smalle hoofdletterkoppen.
   Geen webfonts: de site laadt niets van derden (#43), dus systeemfonts. */
:root {
    --bg: #f2f5f9;
    --panel: #ffffff;
    --ink: #111f2e;
    --muted: #586a7e;
    --faint: #7b8a9b;
    --line: #d4dce6;
    --line-soft: #e3e9f0;
    --link: #0f6e9b;
    --accent: #a85d0a;
    --navy: #0a2342;
    --navy-2: #12325a;
    --orange: #eb8f28;
    --hover: #e8f0f8;
    --up: #1b8a55;
    --ok: #1b8a55; --ok-bg: #e3f3ea; --warn: #b26205; --warn-bg: #fcefdc; --bad: #b42d2d; --bad-bg: #f8e3e3;
    --gauge: #e3e9f0;
    --radius: 3px;
    --shadow: none;
    --f-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
    --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", "Noto Sans CJK JP", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.muted { color: var(--muted); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 56px; }

/* ---------- Kop (donkerblauwe balk over de volle breedte, zoals skatr) ---------- */
.site-head {
    /* #147: groter logo, menu eronder over de volle breedte */
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 16px 0 10px; margin-bottom: 24px;
    background: var(--navy); color: #fff;
    box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax);
    border-bottom: 3px solid var(--orange);
}
.site-head .kop-boven { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.site-head .brand-block { display: flex; flex-direction: column; gap: 2px; }
.site-head .brand {
    font: 700 34px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.site-head .brand:hover { text-decoration: none; color: #fff; }
.site-head .brand-logo { display: block; line-height: 0; }
.site-head .brand-logo img { display: block; height: 60px; width: auto; max-width: 100%; }
.site-head .subtitle {
    font: 600 13px/1.2 var(--f-head); letter-spacing: .09em; text-transform: uppercase; color: #cfe0f2;
}
.site-head nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; width: 100%; margin-left: -10px; }
.site-head nav a { display: inline-flex; align-items: center; gap: 6px; }
.site-head nav a .menu-pagina-icoon { flex: none; opacity: .85; }
.site-head nav a {
    color: #cfe0f2; font: 600 14px/1 var(--f-head); letter-spacing: .09em; text-transform: uppercase;
    padding: 8px 10px; border-radius: var(--radius);
}
.site-head nav a:hover { color: #fff; background: var(--navy-2); text-decoration: none; }
.site-head nav a.account { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #24466f; }
.site-head nav a.account .flag-img { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

/* ---------- 2-koloms layout ---------- */
.layout { display: grid; gap: 22px; }
/* Smal scherm (eigenaar 19-10): eerst de artikelen, de rechterbalk eronder. */
.content { order: 1; min-width: 0; }
.sidebar { order: 2; display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 901px) {
    .layout { grid-template-columns: minmax(0, 1fr) 296px; gap: 36px; align-items: start; }
    .content { order: 1; }
    .sidebar {
        /* Geen eigen scrollgebied meer: de zijbalk scrolt mee met de pagina (eigenaar 9-10). */
        order: 2; gap: 16px;
    }
}

/* ---------- Zijbalk ---------- */
.sb-block {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow);
}
.sb-block h2 {
    font: 700 15px/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em;
    color: var(--navy); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--navy);
}
.sb-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-nav a {
    display: block; padding: 5px 8px; border-radius: 6px; color: var(--muted); font-size: 13.5px;
}
.sb-nav a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.sb-nav a:hover { background: var(--hover); }
.sb-nav a.active { background: var(--navy); color: #fff; font-weight: 600; }

.sb-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-langs a {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px;
    border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel);
}
.sb-langs a:hover { border-color: var(--muted); color: var(--ink); text-decoration: none; }
.sb-langs a.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.sb-account .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

.sb-dossiers a {
    display: block; padding: 7px 0; font-size: 13px; line-height: 1.4;
    border-top: 1px solid var(--line-soft); color: var(--ink);
}
.sb-dossiers a:first-of-type { border-top: 0; padding-top: 0; }
.sb-dossiers a:hover { color: var(--accent); text-decoration: none; }
.sb-dossiers .d-meta { display: block; color: var(--faint); font-size: 11.5px; margin-top: 1px; }

.sb-cta { padding: 0; border: 0; box-shadow: none; background: transparent; }
.sb-cta .cta {
    display: block; text-align: center; padding: 10px; border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--link); font-size: 13px; background: var(--panel);
}
.sb-cta .cta:hover { border-color: var(--link); text-decoration: none; }

/* ---------- Vlag ---------- */
.flag-img {
    width: 17px; height: 12px; flex: none; border-radius: 2px; object-fit: cover;
    vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* ---------- Content-tabs (Nieuws / Wetenschappelijk) ---------- */
.content-tabs { display: flex; gap: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.content-tabs a {
    padding: 8px 2px; font-size: 14px; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.content-tabs a:hover { color: var(--ink); text-decoration: none; }
.content-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Lijstweergave ---------- */
.list-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border-bottom: 2px solid var(--navy); padding-bottom: 6px;
}
.list-head h1 { font: 700 24px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin: 0; }
.list-head a { font-size: 12.5px; color: var(--muted); }
.section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--faint); margin: 22px 0 10px;
}
.section-label:first-child { margin-top: 4px; }
.crumb { margin: 0 0 12px; font-size: 13px; }
.crumb a { color: var(--muted); }

/* ---------- Dossierkaarten ---------- */
.dossier-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 12px; margin-bottom: 8px; }
.sidebar .sb-dossier-cards { background: transparent; border: 0; box-shadow: none; padding: 0; }
.sb-dossier-cards .dossier-cards { grid-template-columns: 1fr; margin-bottom: 0; }
.dossier-card {
    position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
    border-left: 3px solid var(--link); border-radius: var(--radius); color: var(--ink);
    overflow: hidden; box-shadow: var(--shadow);
}
.dossier-card:hover { text-decoration: none; border-color: var(--link); }
.dossier-card.is-actueel {
    border-left-color: var(--orange); background: #fdf3e6; border-color: #f0d9b8;
}
.dossier-card .dc-cover { display: block; width: 100%; height: 108px; object-fit: cover; }
.dossier-card .dc-body { display: block; padding: 12px 14px; }
.dossier-card .dc-title { display: block; font-weight: 650; font-size: 14.5px; line-height: 1.35; margin: 6px 0 4px; color: inherit; text-decoration: none; }
.dossier-card .dc-title:hover { text-decoration: underline; }
.dossier-card .dc-summary { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.dossier-card .dc-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted); }
.dossier-card.is-actueel .dc-meta { color: var(--accent); }

.dossier-card .dc-toggle {
    position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #f0d9b8; background: rgba(255,255,255,.8); color: var(--accent);
    font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, background .15s ease;
}
.dossier-card .dc-toggle:hover { background: #fff; }
.dossier-card.is-open .dc-toggle { transform: rotate(180deg); }
.dossier-card .dc-summary-overlay {
    display: none; position: absolute; inset: 0; padding: 14px 16px; background: rgba(10,35,66,.95);
    color: #fdf3f3; font-size: 13px; line-height: 1.55; overflow-y: auto;
}
.dossier-card.is-open .dc-summary-overlay { display: block; }
.dossier-card .dc-summary-overlay p { margin: 0; }

.dossier-badge {
    display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--link); background: #eef1f5; border: 1px solid #dce3ec; border-radius: 999px; padding: 1px 8px;
}
.dossier-badge.is-actueel { color: var(--accent); background: #fdecd2; border-color: #f0d9b8; }
.dossier-badge.muted { color: var(--muted); background: transparent; border-color: var(--line); }

/* ---------- Dossierdetail ---------- */
.dossier-detail { padding: 2px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.dossier-detail .dossier-cover { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--radius); margin-bottom: 12px; }
.dossier-detail .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dossier-detail h1 { font-size: 24px; line-height: 1.3; margin: 10px 0 8px; letter-spacing: -.01em; }
.dossier-detail .dossier-summary { color: var(--ink); font-size: 15px; }

/* ---------- Artikellijst (één lijst; de twee kolommen uit #64 zijn op verzoek teruggedraaid) ---------- */
.stories {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-top: 0;
}
/* Voorpagina (19-10): bericht 11-20 in een tweede lijst, dicht tot "Toon 10 meer"; daarna links naar de soortpagina's. */
.stories-extra.is-dicht { display: none; }
.meer-knop, .lijst-verder a {
    display: block; padding: 11px 12px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); color: var(--link); font-weight: 600; font-size: 15px;
}
.meer-knop { margin-top: 14px; }
.meer-knop:hover, .lijst-verder a:hover { border-color: var(--link); text-decoration: none; }
.lijst-verder { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lijst-verder[hidden] { display: none; }
.lijst-verder a { flex: 1 1 180px; }
/* "In het kort" (19-10, kort.php::kortBalkRij): rij onder de vakken van de balk op de voorpagina; onder elk vak de zin van
   die soort, onder Social "Vandaag" + "Agenda". Op de telefoon onder elkaar. */
.ab-balk .ab-blokken:has(+ .ab-kort-kop) { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
.ab-kort-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 12px 0; background: var(--panel);
    border: 1px solid var(--line); border-width: 0 1px; border-top: 1px dashed var(--line); }
.ab-alleen-kort .ab-kort-kop { border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.ab-kort-kop span { font: 700 12px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.ab-kort-kop em { font-style: normal; font-size: 12px; color: var(--muted); }
.ab-kort { display: grid; grid-template-columns: repeat(var(--ab-n, 4), minmax(0, 1fr)); background: var(--panel);
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.ab-kort p { margin: 0; padding: 6px 12px 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink); min-width: 0; }
.ab-kort p + p { border-left: 1px solid var(--line-soft); }
.ab-kort a { font-weight: 600; }
.ab-kort .ak-leeg { color: var(--muted); font-style: italic; }
.ak-soort { display: block; font: 700 10.5px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; font-style: normal; }
.ak-agenda .ak-soort.ak-ag { margin-top: 6px; color: var(--muted); }
.ak-agenda .ak-soort:first-child { margin-top: 0; }
.ak-punt { display: block; }
.ak-punt strong { color: var(--ink); white-space: nowrap; }
.ak-meer { display: inline-block; margin-top: 4px; }
.ak-logo { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; border-radius: 3px; }
.ak-logo-leeg { width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: #7b9ebc; vertical-align: 1px; }
.ab-kort .ak-breed { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-soft); }
.ak-breed .ak-punt { display: inline; margin-right: 12px; }
.ak-breed .ak-soort { display: inline-block; margin: 0 6px 0 0; }
.ak-breed .ak-meer { margin-top: 0; }
.s-n { color: #2f6fa8; } .s-k { color: #c46f12; } .s-w { color: #4f8a4f; } .s-v { color: #b03a2e; }
@media (max-width: 620px) {
    .ab-kort { grid-template-columns: 1fr; }
    .ab-kort p + p { border-left: 0; border-top: 1px solid var(--line-soft); }
    .ab-kort p:not(.ak-agenda) .ak-soort { display: inline-block; margin: 0 6px 0 0; }
}
/* Agendapagina (agenda.php, 19-10). Op smalle schermen de rechterbalk onder de agenda. */
.ag-intro { margin: 6px 0 12px; font-size: 15px; }
.ag-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.ag-filter a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); background: var(--panel); }
.ag-filter a:hover { text-decoration: none; border-color: var(--link); }
.ag-filter a.actief { background: var(--navy); color: #fff; border-color: var(--navy); }
.ag-kop { font: 700 14px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; border: 0; padding: 0; }
.ag-lijst { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ag-punt { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 14px; align-items: baseline; }
.ag-punt + .ag-punt { border-top: 1px solid var(--line-soft); }
.ag-wanneer strong { display: block; font-size: 15px; color: var(--ink); }
.ag-wanneer span { font-size: 13px; color: var(--muted); }
.ag-wat a, .ag-titel { font-weight: 600; font-size: 15.5px; }
.ag-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ag-bron { display: block; margin-top: 4px; font-size: 13px; }
.ag-bron a { font-weight: 400; font-size: 13px; color: var(--muted); }
.ag-voet { margin-top: 18px; font-size: 14px; color: var(--muted); }
.ag-zij { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
@media (max-width: 620px) {
    .ag-punt { grid-template-columns: 1fr; gap: 2px; }
    .ag-wanneer strong { display: inline; margin-right: 6px; }
}
.story { display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; background: var(--panel); }
.story .s-body { flex: 1; min-width: 0; }
.story .headline { line-height: 1.42; }
.story .headline .flag-img { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.story .favicon, .story-dossiers .favicon { width: 20px; height: 20px; border-radius: 4px; background: #fff; display: inline-block; vertical-align: -5px; margin-right: 6px; }
.story .title { font-size: 15.5px; font-weight: 600; }
.story .title a { color: var(--ink); }
.story .title a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.story .title a:visited { color: #4a5b6e; }
.story .trans-title { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }
.story .meta { color: var(--faint); font: 400 12px/1.4 var(--f-mono); margin-top: 7px; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; }
.story .meta .dom { font-weight: 600; color: var(--muted); }
.story .meta a { color: var(--faint); }
.story .meta a.dom { color: var(--muted); }
.story .meta a:hover { color: var(--ink); }
.story .dupes { color: var(--faint); font-size: 12px; margin-top: 7px; }
.story .dupes a { color: var(--muted); white-space: nowrap; }
.story .dupes a:hover { color: var(--ink); }
.story .dupes .favicon { width: 12px; height: 12px; border-radius: 2px; margin: 0 3px -2px 0; display: inline-block; vertical-align: baseline; }
.story.muted { display: block; color: var(--muted); font-size: 14px; padding: 22px 14px; }

.story .ds-move { margin-top: 8px; font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.story .ds-move input[type=number] { padding: 2px 6px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 5px; }
.story .ds-move button { padding: 2px 8px; font: inherit; font-size: 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 5px; cursor: pointer; }

/* ---------- Artikeldetail ---------- */
.article { max-width: 680px; }
.article h1 { font-size: 25px; line-height: 1.28; margin: 4px 0 8px; letter-spacing: -.01em; }
.article h1 a { color: var(--ink); }
.article h1 a:hover { color: var(--accent); }
.article .trans-title { color: var(--muted); font-size: 16px; font-style: italic; margin: 2px 0 14px; }
.article .lead-meta {
    color: var(--faint); font-size: 13px; margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.article .lead-meta .favicon { width: 20px; height: 20px; border-radius: 3px; }
.article .lead-meta .dom { font-weight: 600; color: var(--muted); }
.article .lead-meta a { color: var(--faint); }
.article .lead-meta a.dom { color: var(--muted); }
.article .lead-meta a:hover { color: var(--ink); }
.article .body { white-space: pre-wrap; font-size: 15.5px; line-height: 1.72; }
.article .orig { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; word-break: break-word; }
.article .orig .lbl { color: var(--muted); }

/* ---------- Panels / formulieren (login.php, submit.php) ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); max-width: 560px; }
.panel h1 { font-size: 19px; margin: 0 0 12px; }
.stack { display: flex; flex-direction: column; gap: 11px; max-width: 420px; }
.stack label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.stack input, .stack select { padding: 8px 10px; border: 1px solid #cfccc4; border-radius: 6px; font: inherit; }
.stack button, button.primary {
    padding: 9px 16px; border: 0; border-radius: 6px; background: var(--navy); color: #fff;
    font: inherit; font-weight: 600; cursor: pointer; align-self: flex-start;
}
.stack button:hover, button.primary:hover { background: var(--navy-2); }

.flash { padding: 9px 13px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
.flash.ok { background: #eaf6e6; color: #2f5d1f; }
.flash.error { background: #fbe9e7; color: #8a2a20; }

.pager { margin-top: 22px; display: flex; gap: 14px; justify-content: space-between; align-items: center; }
.pager a { font-size: 13px; color: var(--muted); }
.pager a:hover { color: var(--ink); }

/* ---------- Responsief ---------- */
@media (max-width: 900px) {
    .sidebar .sb-account, .sidebar .sb-cta { display: none; }
    .sb-block { padding: 11px 13px; }
    .sb-nav { flex-flow: row wrap; gap: 6px; }
    .sb-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
    .sb-nav a:hover { background: var(--panel); }
}
@media (max-width: 620px) {
    .site-head { gap: 8px; padding-top: 14px; }
    .site-head .brand { font-size: 27px; }
    .site-head .brand-logo img { height: 46px; }
    .site-head .prikkelarm-knop .pk-tekst { display: none; }
}
@media (max-width: 560px) {
    .wrap { padding: 0 14px 40px; }
    .article h1, .dossier-detail h1 { font-size: 21px; }
    .story { gap: 10px; padding: 12px; }
    .dossier-cards { grid-template-columns: 1fr; }
}

.paywall-tag { color: #777; background: #eee; border-radius: 3px; padding: 0 5px; font-size: 0.8em; }

/* ---------- Footer + Over deze site (issue #44) ---------- */
.site-foot { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.site-foot a { color: var(--muted); text-decoration: underline; }
.site-foot .voet-soc { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.site-foot .voet-soc svg { width: 14px; height: 14px; flex: none; }
.prose { max-width: 720px; }
.prose h2 { font-size: 15px; margin: 18px 0 6px; }
.prose p { line-height: 1.6; margin: 0 0 10px; }
.ai-note { color: var(--muted); font-size: 12.5px; font-style: italic; margin: 6px 0 0; }
.list-head h1 .favicon { width: 16px; height: 16px; border-radius: 3px; background: #fff; vertical-align: -2px; }
.src-home { margin-left: 4px; }

/* ---------- Inzicht: Tweede Kamer (#65; voorlopig alleen admin, dummygegevens) ----------
   Eigen "politieke" kleur, ontleend aan gehoord.de: inkt #111, blauw #1d4ed8, papier #fbfbf8. */
.sb-inzicht {
    --gh-ink: #111111; --gh-blue: #1d4ed8; --gh-paper: #fbfbf8; --gh-faint: #6b6b63;
    background: var(--gh-paper); border-color: #dcdcd5; border-top: 4px solid var(--gh-blue); color: var(--gh-ink);
}
.sb-inzicht h2 { color: var(--gh-ink); border-bottom-color: var(--gh-ink); }
.sb-inzicht a { color: var(--gh-blue); }
.sb-inzicht .iz-note { margin: -4px 0 10px; font: 400 11.5px/1.3 var(--f-mono); color: var(--gh-faint); }
.sb-inzicht .iz-quote { margin: 12px 0 0; padding: 0 0 0 10px; border-left: 3px solid var(--gh-blue); }
.sb-inzicht .iz-quote p { margin: 0; font-size: 13.5px; line-height: 1.5; font-style: italic; }
.sb-inzicht .iz-quote footer { margin-top: 4px; font: 600 12.5px/1.3 var(--f-head); letter-spacing: .04em; color: var(--gh-ink); }
.sb-inzicht .iz-empty { margin: 0; font-size: 13px; color: var(--gh-faint); }
.sb-inzicht .iz-none { color: var(--gh-faint); font-style: italic; }
/* Aandachtsblok (#77): stip in de kleur van de actualiteit; de tijd staat er altijd als tekst bij. */
.sb-inzicht .iz-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sb-inzicht .iz-row { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; }
.sb-inzicht .iz-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }
.sb-inzicht .iz-groen { background: #2f7d32; }
.sb-inzicht .iz-oranje { background: #d97706; }
.sb-inzicht .iz-rood { background: #c62828; }
.sb-inzicht .iz-grijs { background: #b8b8b2; }
.sb-inzicht .iz-label { font: 600 12px/1.2 var(--f-head); letter-spacing: .08em; text-transform: uppercase; min-width: 100px; }
.sb-inzicht .iz-verg { margin: 8px 0 0; font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-inzicht .iz-k { font-weight: 600; }
.sb-inzicht .iz-quote p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Historie Tweede Kamer (tk.php, #66) */
.tk-historie .tk-citaat { margin: 10px 0 14px; padding: 0 0 0 12px; border-left: 3px solid var(--gh-blue, #1d4ed8); }
.tk-historie .tk-citaat p { margin: 0 0 4px; font-style: italic; }
.tk-historie .tk-citaat footer { font-size: 13px; color: var(--muted, #666); }

/* Kamerportaal (kamer*.php, #78) */
/* Kamerportaal over de volle breedte (eigenaar 9-10); .panel is smal (560px) voor formulieren. */
.panel.kamer { max-width: none; }
.kamer-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.kamer-nav a { padding: 5px 11px; border: 1px solid #dcdcd5; border-radius: 999px; font-size: 13px; text-decoration: none; }
.kamer-nav a.active, .kamer-nav a:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.kamer-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kamer-kaart { border: 1px solid #e3e1da; border-top: 3px solid #1d4ed8; border-radius: 6px; padding: 10px 14px; background: #fbfbf8; }
.kamer-kaart h2 { font-size: 15px; margin: 0 0 8px; }
.kamer-kaart ul { margin: 0 0 8px; padding-left: 16px; font-size: 13.5px; }
.kamer-meer { font-size: 13px; font-weight: 600; }
.kamer-meta { color: #6b6b63; font-size: 12.5px; }
.kamer-lijst { list-style: none; padding: 0; }
.kamer-item { padding: 8px 0; border-bottom: 1px solid #eee; }
.kamer-punten { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: #444; }
.kamer-uitslag { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 600; background: #eee; }
.kamer-uitslag.u-aangenomen { background: #dcfce7; color: #166534; }
.kamer-uitslag.u-verworpen { background: #fee2e2; color: #991b1b; }
.kamer-uitslag.u-open { background: #fef3c7; color: #92400e; }
/* Actuele Kamerdossiers (#174) */
.kamer-kop-dossiers { font-size: 17px; margin: 14px 0 8px; }
.kamer-dossiers { margin-bottom: 18px; }
a.kamer-dossier { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; border-top-color: var(--orange, #e07b00); }
a.kamer-dossier:hover { border-color: #1d4ed8; }
a.kamer-dossier strong { font-size: 14.5px; line-height: 1.35; }
.kamer-filters { font-size: 13px; }
.kamer-filters a { margin-right: 4px; }
.kamer-filters a.active { font-weight: 700; text-decoration: none; }
.kamer-tijdlijn { width: 100%; height: 60px; fill: #1d4ed8; }
.kamer-bron { margin-top: 24px; font-size: 12px; color: #6b6b63; }

/* ---------- Aandachtsbalk (deelproject 1, spec 2026-10-09) ----------
   Sinds #166 (variant B): één compacte band onder een smalle kop. */
.ab-balk { margin: 0 0 18px; }
.ab-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; border-bottom: 2px solid var(--navy); padding-bottom: 4px; }
.ab-kop h2 { margin: 0; font: 700 17px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.ab-kop span { font: 12px/1 var(--f-mono); color: var(--muted); }
.ab-noot { margin: 0 0 8px; font: 400 11.5px/1.3 var(--f-mono); color: var(--faint); }
/* #166 variant B: één band met vakken (icoon, naam + stip, getal, verschil, mini-trend van 13 weken); details in de tooltip. */
.ab-blokken { display: grid; grid-template-columns: repeat(var(--ab-n, 3), minmax(0, 1fr)); background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); }
.ab-blokken.ab-n1 { --ab-n: 1; } .ab-blokken.ab-n2 { --ab-n: 2; } .ab-blokken.ab-n3 { --ab-n: 3; } .ab-blokken.ab-n4 { --ab-n: 4; }
.ab-blok { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center;
    gap: 2px 10px; padding: 8px 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.ab-blok + .ab-blok { border-left: 1px solid var(--line-soft); }
a.ab-blok:hover { background: var(--hover); text-decoration: none; }
a.ab-blok:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.ab-blok.ab-actief { box-shadow: inset 0 3px 0 var(--orange); }
.ab-icoon { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--navy); }
svg.ab-icoon path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ab-naam { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; min-width: 0;
    font: 700 13px/1.1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-blok:not(:has(.ab-icoon)) .ab-naam { grid-column: 1 / 4; }
.ab-stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ab-stip.ab-hoog, .ab-stip.ab-normaal { background: var(--ok); }
.ab-stip.ab-laag { background: var(--warn); }
.ab-stip.ab-stil { background: var(--bad); }
.ab-stip.ab-rustig { background: var(--line); }
.ab-getal { font: 700 28px/1 var(--f-head); font-variant-numeric: tabular-nums; }
.ab-blok:not(:has(.ab-icoon)) .ab-getal { grid-column: 1; }
.ab-rechts { display: grid; gap: 2px; min-width: 0; }
.ab-verschil { font: 600 11.5px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.ab-verschil.ab-op { color: var(--ok); } .ab-verschil.ab-af { color: var(--warn); }
.ab-eenheid { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-weken { display: block; width: 100%; max-width: 110px; height: 18px; fill: #b9cbe0; }
.ab-weken .ab-nu { fill: var(--orange); }
.ab-geen { grid-column: 2 / 4; color: var(--faint); font-style: italic; font-size: 12.5px; }
@media (max-width: 900px) {
    .ab-blokken.ab-n3, .ab-blokken.ab-n4 { --ab-n: 2; }
    .ab-blokken .ab-blok:nth-child(2n+1) { border-left: none; }
    .ab-blokken .ab-blok:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* Kolom "In de Kamer" (zijbalk) */
.ik-kamer .ik-citaat { margin: 0; border-left: 4px solid var(--orange); padding: 2px 0 2px 12px; }
.ik-kamer .ik-citaat p { margin: 0 0 6px; font: 600 17px/1.35 var(--f-head); letter-spacing: .01em; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ik-kamer .ik-citaat footer { font-size: 12.5px; color: var(--muted); }
.ik-kamer .ik-lijst { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; font-size: 13.5px; }
.ik-kamer .ik-lab { display: block; margin-bottom: 2px; font: 700 12px/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.ik-kamer .ik-lab-quote { margin-top: 12px; }
.ik-kamer .ik-sublijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ik-kamer .ik-u-aangenomen { color: var(--ok); font-weight: 600; }
.ik-kamer .ik-u-verworpen { color: var(--bad); font-weight: 600; }
.ik-kamer .ik-meer { display: inline-block; margin-top: 10px; font: 600 13px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; }

/* Offline-stand (taak 10): alleen voor ingelogd beheer zichtbaar. */
.site-offline-balk { background: #b42d2d; color: #fff; padding: 10px 16px; margin: 0 0 12px; font-weight: 600; text-align: center;
    box-shadow: 0 0 0 100vmax #b42d2d; clip-path: inset(0 -100vmax); }
.site-offline-balk a { color: #fff; text-decoration: underline; margin-left: 8px; }

.ik-kamer .ik-meer-boven { display: block; margin: 0 0 10px; }
.ik-kamer .ik-knop { display: block; text-align: center; padding: 10px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--link); background: var(--panel); }
.ik-kamer .ik-knop:hover { border-color: var(--link); text-decoration: none; }
/* Gedeeld menu (issue #110) */
.site-head nav.site-menu a.active { color: #fff; background: var(--navy-2); }
.site-head nav.site-menu a.menu-thuis { padding: 8px 10px; }
.site-head nav.site-menu a.menu-thuis .menu-pagina-icoon { width: 18px; height: 18px; }
.panel form input[type=text], .panel form input[type=email], .panel form textarea { width: 100%; max-width: 520px; box-sizing: border-box; font: inherit; padding: 6px 8px; }
/* Actuele dossiers bovenaan de lijst; vanaf twee kaarten twee naast elkaar (#178), bij een oneven aantal de laatste over de
   volle breedte (geen leeg vak); op een telefoon onder elkaar. */
.story-dossiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); }
@media (min-width: 621px) {
    .story-dossiers.is-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .story-dossiers.is-paar > .dossier-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.s-summary { color: var(--muted); font-size: 13.5px; margin: 6px 0 0 18px; }
.s-summary + .ai-note { margin-left: 18px; }

/* Tweede Kamer-regels tussen de artikelen (#129) */
.story-kamer { background: #f1f5fa; border-left: 3px solid #1f4e79; }
.story-kamer .kamer-icoon { background: transparent; }
.story-kamer .kamer-soort { font-weight: 600; color: #1f4e79; }
/* Nieuws en wetenschap: nuance naast de Kamer-regels (blauw); geen opvallende kleuren. */
.story-nieuws { border-left: 3px solid #b9c6d3; }
.story-ws { background: #f2f7f4; border-left: 3px solid #3e7a68; }
.story-pol { border-left: 3px solid #5b6b8c; }   /* #160: artikel met overrule politiek */
.story-ws .meta a[href="index.php?cat=20"] { color: #3e7a68; font-weight: 600; }
.story .soort-icoon, .story-dossiers .soort-icoon { background: transparent; }
/* Filtervinkjes boven de lijst (#146) */
.soort-filter { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 12px; font-size: 13.5px; color: var(--muted); }
.soort-vinkje { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.soort-vinkje img { width: 16px; height: 16px; }
/* Pagina Wetenschap (onderzoek.php, #147) */
.ws-lijst { margin: 0 0 18px; padding-left: 18px; }
.ws-lijst li { margin-bottom: 8px; line-height: 1.45; }
main.panel h2 { font: 700 17px/1.2 var(--f-head); letter-spacing: .04em; text-transform: uppercase; margin: 22px 0 10px; }
.ws-intro { margin: 10px 0 4px; font-size: 13.5px; }
.ws-sectie { font: 700 15px/1.2 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin: 20px 0 8px; }
.ws-zij { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.ws-zij li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.4; }
.ws-zij li:last-child { border-bottom: 0; }
.ws-zij .muted { display: block; font-size: 12px; }
.ws-meer { display: inline-block; margin-top: 8px; font-size: 12.5px; }
/* Smal scherm: de rechterbalk staat boven de artikelen; de publicaties staan dan alleen onderaan de pagina (geen dubbele lijst). */
@media (max-width: 900px) { .sb-ws-publicaties, .sb-nw-bronnen { display: none; } }
.nw-tel { float: right; margin-left: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sb-nav a.active .nw-tel { color: inherit; }
@media (max-width: 900px) { .sb-nav .nw-tel { float: none; } }

/* Wetenschapsoverzicht (spec 2026-10-10) */
.ws-overzicht li { margin-bottom: 14px; }
.ws-overzicht li p { margin: 4px 0 0; }
.ws-geplaatst { margin-left: 6px; color: var(--navy); text-decoration: none; font-weight: 700; }
.ws-preprint { margin-left: 6px; font-size: 12px; color: var(--muted); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }

/* ---------- Delen (#149): één knop, klapt uit tot gewone links; geen scripts of plaatjes van derden ---------- */
details.delen { display: inline-block; position: relative; }
details.delen > summary { list-style: none; cursor: pointer; color: var(--faint); }
details.delen > summary::-webkit-details-marker { display: none; }
details.delen > summary:hover, details.delen[open] > summary { color: var(--ink); text-decoration: underline; }
.delen-lijst { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 6px; }
.delen-lijst a { color: var(--link); }
.delen-kopieer { font: inherit; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); cursor: pointer; }
.delen-melding { color: var(--ok); }

/* ---------- Prikkelarm (#148): knop in het menu, warme donkere tinten, rustiger beeld ---------- */
.site-head .prikkelarm-knop {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 10px; border: 1px solid #24466f; border-radius: var(--radius); background: transparent;
    color: #cfe0f2; font: 600 13px/1 var(--f-head); letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
}
.site-head .prikkelarm-knop[hidden] { display: none; }
.site-head .prikkelarm-knop:hover { color: #fff; background: var(--navy-2); }
.site-head .prikkelarm-knop[aria-pressed="true"] { color: var(--ink); background: var(--panel); }

html[data-prikkelarm="1"] {
    --bg: #2b2724; --panel: #332e2a; --ink: #e8e2d9; --muted: #bdb3a6; --faint: #a2988b; --line: #4a433d; --line-soft: #3e3833;
    --link: #d9b38c; --accent: #d6a46a; --navy: #3a332e; --navy-2: #463e37; --orange: #8f6f50; --hover: #3e3833;
    --ok: #a9c49a; --ok-bg: #34392f; --warn: #d9b07a; --warn-bg: #3d352b; --bad: #d99a8f; --bad-bg: #3d2f2c; --gauge: #3e3833;
}
html[data-prikkelarm="1"] .sb-inzicht { --gh-paper: #332e2a; --gh-ink: #e8e2d9; --gh-blue: #d9b38c; --gh-faint: #a2988b; border-color: var(--line); }
html[data-prikkelarm="1"] body { font-size: 17px; line-height: 1.6; }
html[data-prikkelarm="1"] .site-head { border-bottom-width: 1px; }
html[data-prikkelarm="1"] .s-n { color: #8fb3d9; } html[data-prikkelarm="1"] .s-k { color: #d9a066; }
html[data-prikkelarm="1"] .s-w { color: #9cc49a; } html[data-prikkelarm="1"] .s-v { color: #e09b8f; }

html[data-prikkelarm="1"] .site-head .brand-logo img { filter: saturate(.6) brightness(.95); }
html[data-prikkelarm="1"] .site-head .subtitle, html[data-prikkelarm="1"] .site-head nav a, html[data-prikkelarm="1"] .site-head .prikkelarm-knop { color: #d8cfc3; border-color: #4a433d; }
html[data-prikkelarm="1"] .story .title a:visited { color: #b9ab98; }
html[data-prikkelarm="1"] .story-ws, html[data-prikkelarm="1"] .story-kamer, html[data-prikkelarm="1"] .dossier-card.is-actueel,
html[data-prikkelarm="1"] .kamer-kaart, html[data-prikkelarm="1"] .flash { background: var(--panel); color: var(--ink); }
html[data-prikkelarm="1"] .story-ws, html[data-prikkelarm="1"] .story-kamer, html[data-prikkelarm="1"] .story-nieuws, html[data-prikkelarm="1"] .story-pol,
html[data-prikkelarm="1"] .dossier-card, html[data-prikkelarm="1"] .kamer-kaart { border-color: var(--line); border-left-color: var(--line); border-top-color: var(--line); }
html[data-prikkelarm="1"] .story-kamer .kamer-soort, html[data-prikkelarm="1"] .story-ws .meta a[href="index.php?cat=20"] { color: var(--muted); }
html[data-prikkelarm="1"] .dossier-badge, html[data-prikkelarm="1"] .dossier-badge.is-actueel, html[data-prikkelarm="1"] .paywall-tag,
html[data-prikkelarm="1"] .kamer-uitslag { background: var(--line-soft); color: var(--muted); border-color: var(--line); }
html[data-prikkelarm="1"] .kamer-meta, html[data-prikkelarm="1"] .kamer-bron, html[data-prikkelarm="1"] .kamer-punten { color: var(--muted); }
html[data-prikkelarm="1"] .kamer-nav a.active, html[data-prikkelarm="1"] .kamer-nav a:hover, html[data-prikkelarm="1"] .sb-nav a.active { background: var(--navy-2); border-color: var(--line); }
html[data-prikkelarm="1"] .story .favicon, html[data-prikkelarm="1"] .story-dossiers .favicon { opacity: .75; }
/* Aandachtsbalk eenvoudiger: alleen naam en getal; geen weekstaafjes, verschil, stippen of toelichting. */
html[data-prikkelarm="1"] .ab-weken, html[data-prikkelarm="1"] .ab-verschil, html[data-prikkelarm="1"] .ab-stip,
html[data-prikkelarm="1"] .ab-noot { display: none; }
html[data-prikkelarm="1"] .ab-blok.ab-actief { box-shadow: none; }
html[data-prikkelarm="1"] .ab-getal { font-size: 22px; }
html[data-prikkelarm="1"] .ab-kop { border-bottom-color: var(--line); }
html[data-prikkelarm="1"] .ab-kop h2, html[data-prikkelarm="1"] .ab-icoon { color: var(--muted); }
/* --navy is hier donker: koppen die --navy als tekstkleur gebruiken, zouden wegvallen. */
html[data-prikkelarm="1"] .sb-block h2, html[data-prikkelarm="1"] .list-head h1, html[data-prikkelarm="1"] .ws-sectie, html[data-prikkelarm="1"] .ws-geplaatst { color: var(--muted); }
html[data-prikkelarm="1"] .sb-block h2, html[data-prikkelarm="1"] .list-head { border-bottom-color: var(--line); }

/* Minder beweging als het toestel daarom vraagt (geldt voor iedereen, ook buiten de prikkelarme stand). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}