/* METEOPROOF -- gedeelde opmaak van de verificatiepagina's (Daily, Monthly) in de nieuwe stijl (2026-09-27).
   Op de --sk-*-tokens van site-kop.css (donkere modus vanzelf). Grafieken en tabellen zelf blijven hun eigen
   (Tailwind-)opmaak houden; dit stylet enkel kop, instellingen, knoppen, sectiekoppen en uitlegblokken. */
body.dv { margin: 0; background: var(--sk-papier); color: var(--sk-inkt); font: 15px/1.6 var(--sk-sans); -webkit-font-smoothing: antialiased; }
.dv main { max-width: 1160px; margin: 0 auto; padding: 8px 20px 64px; box-sizing: border-box; }
.dv-kop { padding: 28px 0 22px; }
.dv-eyebrow { font: 500 11px/1 var(--sk-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-accent); margin: 0 0 12px; }
.dv-intro { font-size: 17px; line-height: 1.55; color: var(--sk-inkt2); max-width: 60ch; margin: 14px 0 0; }
.dv-kop h1 { font: 600 clamp(30px, 4.2vw, 44px)/1.1 "Source Serif 4", Georgia, serif; letter-spacing: -.01em; margin: 0; }

/* instellingen: vlak, tussen een donkere en een lichte lijn */
.dv-instellingen { border-top: 1px solid var(--sk-inkt); border-bottom: 1px solid var(--sk-lijn); padding: 14px 0 12px; }
.dv-instellingen > h2 { display: none; }
.dv-rij { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .dv-rij { flex-direction: row; align-items: stretch; gap: 28px; } .dv-loc { width: 256px; flex-shrink: 0; } }
.dv-loc, .dv-par { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-loc { gap: 10px; }
.dv-veld { display: flex; flex-direction: column; gap: 6px; }
.dv-par { flex: 1; }
.dv-label { font: 500 11px/1.2 var(--sk-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sk-inkt3); }
.dv-select { font: 14px var(--sk-sans); color: var(--sk-inkt); background: var(--sk-paneel); border: 1px solid var(--sk-lijn); border-radius: 2px; padding: 6px 10px; }
.dv-select:focus-visible, .dv-knop:focus-visible, #typeKnoppenRow button:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.dv-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sk-inkt2); }
.dv-toggle label { cursor: pointer; }
.dv-toggle input { accent-color: var(--sk-accent); cursor: pointer; margin: 0; }
.dv-scheiding { display: none; }
@media (min-width: 1024px) { .dv-scheiding { display: block; width: 1px; background: var(--sk-lijn); } }
#typeKnoppenRow { display: flex; flex-wrap: wrap; gap: 8px; }
#typeKnoppenRow button { font: 500 13px/1.2 var(--sk-sans); color: var(--sk-inkt2); background: transparent; border: 1px solid var(--sk-lijn);
    border-radius: 2px; padding: 7px 12px; cursor: pointer; }
#typeKnoppenRow button:hover { color: var(--sk-inkt); border-color: var(--sk-inkt3); }
#typeKnoppenRow button[aria-pressed="true"] { color: var(--sk-papier); background: var(--sk-inkt); border-color: var(--sk-inkt); }
.dv-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; font-size: 13px; }
.dv-links a { color: var(--sk-inkt); text-decoration: none; border-bottom: 1px solid var(--sk-accent); }
.dv-links a:hover { color: var(--sk-accent); }

/* datumnavigatie */
.dv-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 22px 0 14px; }
.dv-knop { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 13px/1.2 var(--sk-sans); color: var(--sk-inkt);
    background: var(--sk-paneel); border: 1px solid var(--sk-lijn); border-radius: 2px; padding: 8px 12px; cursor: pointer; }
.dv-knop:hover { border-color: var(--sk-inkt3); }
.dv-knop.hidden { display: none; }
.dv-knop:disabled { opacity: .4; cursor: not-allowed; }
.dv-knop:disabled:hover { border-color: var(--sk-lijn); }
@media (max-width: 520px) { .dv-knop { font-size: 12px; padding: 6px 9px; } }

/* secties: kop links met lijn erboven; grafiek/tabel zelf ongewijzigd in hun donkere paneel */
.dv-blok { margin-top: 48px; }
.dv-blokkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-top: 1px solid var(--sk-inkt); padding-top: 14px; margin-bottom: 8px; }
.dv-blokkop h2 { font: 600 22px/1.25 "Source Serif 4", Georgia, serif; margin: 0 0 6px; }
.dv-sub { font: 500 11px/1.4 var(--sk-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--sk-inkt3); margin: 0; }
.dv-download { flex-shrink: 0; font: 500 12px var(--sk-sans); color: var(--sk-inkt2); background: none; border: 1px solid var(--sk-lijn); border-radius: 2px; padding: 6px 10px; cursor: pointer; }
.dv-download:hover { color: var(--sk-inkt); border-color: var(--sk-inkt3); }
.dv-toelichting { font-size: 13.5px; color: var(--sk-inkt2); margin: 0 0 12px; max-width: 80ch; }
/* tabellen: rechte hoeken + donkere rand rondom (gekleurde cellen liepen anders tot aan de rand rechts/onder) */
.dv-tabelpaneel { border-radius: 0 !important; border: 2px solid #161b22; border-right-width: 6px; border-bottom-width: 6px; }
#rmseTable, #stabiliteitTable { border-radius: 0; }
.dv-paneel { background: #161b22; border-radius: 0; padding: 6px; box-sizing: border-box; }
@media (min-width: 768px) { .dv-paneel { padding: 16px; } }
.dv-schaal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; font-size: 11px; color: var(--sk-inkt3); }
.dv-schaal > div:first-child { display: flex; align-items: center; gap: 8px; }
.dv-merkje { font: 500 11px var(--sk-mono); letter-spacing: .08em; }

/* uitleg onder grafiek/tabel: rustige uitklapper i.p.v. blauwe kaart */
.dv-uitleg { margin-top: 18px; border-left: 2px solid var(--sk-accent); padding: 2px 0 2px 14px; max-width: 80ch; font-size: 14px; color: var(--sk-inkt2); }
.dv-uitleg summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; cursor: pointer; }
.dv-uitleg summary::-webkit-details-marker { display: none; }
.dv-uitleg summary > span:first-child { font-weight: 600; color: var(--sk-inkt); }
.dv-meer { font-size: 12.5px; white-space: nowrap; user-select: none; color: var(--sk-inkt2); }
.dv-meer:hover { color: var(--sk-accent); }
.dv-meer span:last-child { display: inline-block; font-size: 9px; margin-left: 4px; transition: transform .2s; }
.dv-uitleg-body { margin-top: 10px; line-height: 1.6; }
.dv-uitleg-body p { margin: 0 0 10px; }
@media (max-width: 760px) { .dv main { padding: 4px 16px 48px; } .dv-kop { padding-top: 16px; } .dv-intro { font-size: 15.5px; } }

/* horizon-/bereikknoppen (Monthly): zelfde pil als de parameterknoppen, groepsknoppen met stippellijn */
.dv-pil { font: 500 12.5px/1.2 var(--sk-sans); color: var(--sk-inkt2); background: transparent; border: 1px solid var(--sk-lijn);
    border-radius: 2px; padding: 5px 9px; cursor: pointer; }
.dv-pil:hover { color: var(--sk-inkt); border-color: var(--sk-inkt3); }
.dv-pil-groep { border-style: dashed; border-color: var(--sk-inkt3); }
.dv-pil[aria-pressed="true"] { color: var(--sk-papier); background: var(--sk-inkt); border: 1px solid var(--sk-inkt); }
.dv-pil:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }

/* modusschakelaar Operationeel/Ensemble (Daily) */
.dv-links { align-items: center; }
.dv-modus { display: inline-flex; border: 1px solid var(--sk-lijn); border-radius: 2px; }
.dv-links .dv-modus a { border: 0; padding: 5px 12px; font-weight: 500; color: var(--sk-inkt2); }
.dv-links .dv-modus a + a { border-left: 1px solid var(--sk-lijn); }
.dv-links .dv-modus a:hover { color: var(--sk-inkt); }
.dv-links .dv-modus a[aria-current="page"] { background: var(--sk-inkt); color: var(--sk-papier); }
html.dv-ensemble .dv-enkel-oper { display: none; }