/* Sustiro-skin (2026-09-27). single.php, archive.php en page-pillar-hub.php gebruiken de
   Celluviva-opmaak (#cvart, #cvarc, #cvhub). Deze regels zijn overgenomen uit celluviva-fable,
   waar ze live getest zijn, en krijgen hier de Sustiro-kleuren en -letters via de variabelen. */
#sustiro-chrome{
  --teal:#2C5F8A; --teal-dark:#1A2A3A; --teal-light:#E8EFF5;
  --ink:#1a2332; --ink-soft:#4a5568; --muted:#5d6675;
  --line:#D8DEE5; --line-strong:#b9c2cc; --bg:#FAFAF7; --bg-alt:#EEF2ED;
  /* Kicker en xl-k in navy (R7, 30-09-2026; was terracotta #A65426). De alarmblok-rand leest --su-alarm. */
  --copper:#2C5F8A; --copper-txt:#2C5F8A;
  /* Koppen zonder serif (tokenvoorstel §2, reparatie 30-09-2026): IBM Plex Sans, zelf gehost via methodepaneel-tokens.css.
     De variabelenaam --serif blijft, zodat de overige regels ongewijzigd doorwerken. */
  --serif:'IBM Plex Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'IBM Plex Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --ev-high:#2d5a3f; --ev-mid:#b8893d; --ev-low:#8b93a3; --ev-empty:#D8DEE5; --ev-mixed:#7a6b8f;
}

  /* ===================== PAGINA-SPECIFIEK: artikel ===================== */
  #cvart{
    background:radial-gradient(120% 50% at 92% -10%, rgba(10,110,110,.055), transparent 60%), var(--bg);
  }
  #cvart *,#cvart *::before,#cvart *::after{box-sizing:border-box;}
  #cvart a:focus-visible,#cvart summary:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:6px;}
  #cvart .wrap{max-width:760px; margin:0 auto; padding:0 32px;}
  #cvart .crumb{font-size:13px; color:var(--muted); padding:26px 0 20px;}
  #cvart .crumb a{color:var(--muted); text-decoration:none;}
  #cvart .crumb a:hover{color:var(--teal);}
  #cvart .crumb .cur{color:var(--ink-soft);}
  #cvart .area-chip{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--copper); margin-bottom:16px;}
  #cvart .area-chip::before{content:""; width:22px; height:2px; background:var(--copper);}
  #cvart h1{font-family:var(--serif); font-weight:700; font-size:clamp(30px,4.4vw,48px); line-height:1.15; letter-spacing:-.02em; margin:0 0 20px;}
  /* byline (locked: kleine, waarheidsgetrouwe research-synthese-credit) */
  #cvart .byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:28px;}
  #cvart .avatar{width:42px; height:42px; border-radius:50%; background:var(--teal); color:#fff; font-family:var(--serif); font-size:19px; display:flex; align-items:center; justify-content:center; flex:none;}
  #cvart .byline .who{font-size:14px; line-height:1.4;}
  #cvart .byline .who b{color:var(--ink); font-weight:700;}
  #cvart .byline .who a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(10,110,110,.3);}
  #cvart .byline .who .role{color:var(--muted);}
  #cvart .byline .when{font-size:13px; color:var(--muted); margin-left:auto;}
  /* Snel antwoord (verplicht, eerste content-blok) */
  #cvart .quick{background:var(--teal-light); border:1px solid rgba(10,110,110,.18); border-radius:14px; padding:22px 24px; margin-bottom:14px;}
  #cvart .quick .qh{display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:10px;}
  /* De Quick Answer is de opener en stond kleiner dan de bodytekst eronder. Een
     lede hoort juist iets groter te zijn dan wat volgt. 14-09-2026. */
  #cvart .quick p{font-size:18.5px; line-height:1.62; color:var(--ink-soft); margin:0;}
  /* evidence-icoon + badge (3-balkjes-taal) */
  #cvart .cv-grade{display:inline-flex; align-items:flex-end; gap:2.5px; height:14px; flex:none;}
  #cvart .cv-grade b{width:3.5px; border-radius:1.5px; background:var(--ev-empty); display:block;}
  #cvart .cv-grade b:nth-child(1){height:45%;}#cvart .cv-grade b:nth-child(2){height:72%;}#cvart .cv-grade b:nth-child(3){height:100%;}
  #cvart .cv-grade--high b{background:var(--ev-high);}
  #cvart .cv-grade--mid b:nth-child(1),#cvart .cv-grade--mid b:nth-child(2){background:var(--su-ev-redelijk-txt,#7D5D29);} /* R7: Redelijk-tekst, was amber --ev-mid */
  #cvart .cv-grade--low b:nth-child(1){background:var(--ev-low);}
  #cvart .cv-badge{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:99px; vertical-align:middle;}
  #cvart .cv-badge--high{background:rgba(46,125,79,.10); color:#1E5A38;}
  #cvart .cv-badge--mid{background:var(--su-ev-redelijk-tint,#F6F1E8); color:var(--su-ev-redelijk-txt,#7D5D29);} /* R7: Redelijk-tint, was amber */
  #cvart .cv-badge--low{background:rgba(139,147,163,.16); color:#4C5361;}
  #cvart .badgerow{margin:16px 0 4px;}
  /* TOC */
  #cvart .toc{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:26px 0;}
  #cvart .toc h2{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 10px;}
  #cvart .toc ol{margin:0; padding-left:18px; font-size:15px; line-height:1.9;}
  #cvart .toc a{color:var(--teal-dark); text-decoration:none;}
  #cvart .toc a:hover{color:var(--teal); text-decoration:underline;}
  /* body */
  /* Leesmaat, gemeten 14-09-2026 op /nl/vitamine-d-tekort/ bij 1600px venster.
     Was 17,5px in een kolom van 696px = 79 tekens per regel. Dat is niet te smal
     maar te LANG: de comfortabele band ligt op 50-75 tekens. De kolom verbreden
     zou het dus erger maken. Bij 19px komt dezelfde kolom op ~73 tekens, en de
     tekstblokken krijgen meer gewicht op een breed scherm — precies de klacht dat
     de pagina er dun uitzag. Kolombreedte blijft daarom 760px. */
  #cvart .body{font-size:19px; line-height:1.68; color:var(--ink-soft);}
  #cvart .body h2{font-family:var(--serif); font-weight:700; font-size:28px; line-height:1.2; color:var(--ink); margin:36px 0 12px; letter-spacing:-.015em;}
  #cvart .body p{margin:0 0 18px;}
  #cvart .body a.ref{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(10,110,110,.3);}
  #cvart .body em{font-style:italic;}
  /* Kernbevinding-callout */
  #cvart .callout{background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:0 12px 12px 0; padding:18px 22px; margin:24px 0;}
  #cvart .callout .cl{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:8px;}
  #cvart .callout p{font-size:16px; line-height:1.6; color:var(--ink); margin:0;}
  /* claim-inline met badge */
  #cvart .claimline{display:flex; gap:12px; align-items:flex-start; background:var(--bg-alt); border-radius:12px; padding:16px 18px; margin:22px 0;}
  #cvart .claimline .ct{font-size:16px; line-height:1.55; color:var(--ink); margin:0;}
  #cvart .claimline .ct .src{display:block; font-size:12.5px; color:var(--muted); margin-top:6px;}
  #cvart .claimline .ct .src a{color:var(--teal); text-decoration:none;}
  /* sources */
  #cvart .sources{margin-top:36px; padding-top:22px; border-top:1px solid var(--line);}
  #cvart .sources h2{font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink); margin:0 0 14px;}
  #cvart .sources ol{margin:0; padding-left:20px; font-size:14px; line-height:1.75; color:var(--muted);}
  #cvart .sources li{margin-bottom:10px;}
  #cvart .sources a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(10,110,110,.3);}
  #cvart .sources .idlink{display:inline-flex; align-items:center; gap:5px;}
  #cvart .sources .idlink::after{content:"↗"; font-size:11px; opacity:.7;}
  /* FAQ */
  #cvart .faq{margin-top:34px;}
  #cvart .faq h2{font-family:var(--serif); font-weight:600; font-size:24px; color:var(--ink); margin:0 0 14px;}
  #cvart .faq details{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden;}
  #cvart .faq summary{list-style:none; cursor:pointer; padding:18px 22px; font-weight:600; font-size:16.5px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px;}
  #cvart .faq summary::-webkit-details-marker{display:none;}
  #cvart .faq summary .pm{flex:none; width:22px; height:22px; position:relative;}
  #cvart .faq summary .pm::before,#cvart .faq summary .pm::after{content:""; position:absolute; background:var(--teal); border-radius:2px;}
  #cvart .faq summary .pm::before{top:10px; left:2px; right:2px; height:2px;}
  #cvart .faq summary .pm::after{left:10px; top:2px; bottom:2px; width:2px; transition:transform .2s ease;}
  #cvart .faq details[open] summary .pm::after{transform:scaleY(0);}
  #cvart .faq .faq-a{padding:0 22px 20px; font-size:15px; line-height:1.65; color:var(--muted);}
  /* author bio */
  /* Auteursbox herzien 2026-09-18: werkwijze voorop, naam als ondertekening.
     De avatar en .ab-name zijn vervallen; .ab-kop, .ab-hoe en .ab-sign zijn nieuw. */
  #cvart .authorbox{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; margin-top:28px;}
  #cvart .authorbox .ab-kop{font-weight:700; font-size:15.5px; color:var(--ink); margin-bottom:10px;}
  #cvart .authorbox .ab-hoe{margin:0 0 12px; padding-left:18px;}
  #cvart .authorbox .ab-hoe li{font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:6px;}
  #cvart .authorbox .ab-hoe li::marker{color:var(--teal);}
  #cvart .authorbox .ab-grens{font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0;}
  #cvart .authorbox .ab-sign{font-size:13px; line-height:1.5; color:var(--muted); margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);}
  #cvart .authorbox .ab-sign b{color:var(--ink-soft); font-weight:700;}
  #cvart .authorbox .ab-role{color:var(--muted);}
  #cvart .authorbox p{font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0;}
  #cvart .authorbox a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(10,110,110,.3);}
  /* crosslinks */
  #cvart .xlinks{margin-top:34px;}
  #cvart .xlinks h2{font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink); margin:0 0 14px;}
  #cvart .xgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  #cvart .xl{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; color:inherit; display:flex; flex-direction:column; box-shadow:0 2px 12px rgba(26,26,46,.05);}
  @media (prefers-reduced-motion:no-preference){#cvart .xl{transition:box-shadow .2s ease, transform .2s ease;}}
  #cvart .xl:hover{box-shadow:0 12px 30px rgba(26,26,46,.10); transform:translateY(-3px);}
  #cvart .xl .xl-k{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--copper); margin-bottom:8px;}
  #cvart .xl h3{font-family:var(--serif); font-weight:600; font-size:18px; margin:0 0 6px; color:var(--ink);}
  #cvart .xl p{font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 12px;}
  #cvart .xl .read{color:var(--teal); font-weight:600; font-size:13px; margin-top:auto;}
  #cvart .disc{border-left:4px solid var(--teal); background:var(--teal-light); border-radius:0 12px 12px 0; padding:20px 22px; margin:34px 0 46px; font-size:14.5px; line-height:1.6; color:var(--ink-soft);}
  @media (max-width:640px){#cvart .xgrid{grid-template-columns:1fr;}}  /* ===================== VISUALS IN HET ARTIKEL =====================
     Vergrendeld 2026-08-30. Tekstkolom 760, visual 860 (50px uitloop per zijde).
     Reden: een FABLE-visual is 940 breed getekend met 13px als kleinste tekst.
     Op 760 schaalt die 13px naar 10,5px — onder de ondergrens uit
     outputs/celluviva/FABLE-VISUAL-BRIEF.md. Op 860 komt hij op 11,9px, en de
     14px-tekst op 12,8px. Verder verbreden maakt er een breakout van; verder
     versmallen breekt de brief. Wijzig dit niet zonder de brief mee te wijzigen. */
  #cvart figure.cv-visual{margin:34px 0; padding:0;}
  #cvart figure.cv-visual img,#cvart figure.cv-visual svg{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; background:#fff;}
  #cvart figure.cv-visual figcaption{font-size:13px; line-height:1.5; color:var(--muted); margin-top:10px;}
  @media (min-width:1000px){
    #cvart figure.cv-visual{margin:40px -50px;}
  }
  /* Mobiele variant: eigen SVG op 400 breed onder 780px.
     Zie outputs/celluviva/FABLE-MOBILE-SCROLL-IMPLEMENTATIE.md */
  #cvart figure.cv-visual picture{display:block;}
  /* mobile_strategy = scroll: desktop-SVG horizontaal scrollbaar, met veeg-hint */
  #cvart .cv-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px;}
  #cvart .cv-scroll:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
  #cvart .cv-scroll > img,#cvart .cv-scroll > svg{width:940px; max-width:none;}
  @media (min-width:781px){
    #cvart .cv-scroll{overflow-x:visible;}
    #cvart .cv-scroll > img,#cvart .cv-scroll > svg{width:100%;}
    #cvart figure.cv-visual .veeg{display:none;}
  }
  #cvart figure.cv-visual .veeg{font-size:12.5px; color:var(--muted); margin-top:8px;}
  /* ===================== BEWIJSOVERZICHT-TABEL =====================
     Contrast: kop op ink, cellen op ink-soft, rijlijn op line-strong.
     Nooit tekst onder #5C5C6D in deze tabel. */
  #cvart .evtable{margin:30px 0;}
  #cvart .evtable h2{font-family:var(--serif); font-weight:600; font-size:24px; color:var(--ink); margin:0 0 14px;}
  #cvart .evtable .tw{overflow-x:auto; border:1px solid var(--line-strong,#D6D3CA); border-radius:14px; background:#fff;}
  #cvart .evtable table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.55; min-width:560px;}
  #cvart .evtable thead th{text-align:left; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--bg-alt); padding:13px 18px; border-bottom:2px solid #C9C5BA;}
  #cvart .evtable tbody td{padding:15px 18px; vertical-align:top; color:var(--ink-soft); border-bottom:1px solid #DCD9D1;}
  #cvart .evtable tbody tr:last-child td{border-bottom:0;}
  #cvart .evtable tbody tr:nth-child(even) td{background:#FCFCFA;}
  #cvart .evtable td.ev{white-space:nowrap; font-weight:700;}
  #cvart .evtable td.src{font-size:14px;}
  #cvart .evtable td.src a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(10,110,110,.3);}
  /* Bewijslabel-kleuren — één bron van waarheid, gelijk aan de SVG-visuals.
     Vulkleur = de heldere waarde, tekstkleur = de donkere variant (4,5:1 op wit). */
  #cvart .ev-sterk{color:#1E5A38;}
  #cvart .ev-redelijk{color:#8A5406;}
  #cvart .ev-wisselend{color:#7A5715;}
  #cvart .ev-beperkt{color:#4C5361;}
  #cvart .ev-nietaangetoond{color:#8E2723;}
  #cvart .ev-onderzoek{color:#3F4250;}
  @media (max-width:640px){
    #cvart .evtable table{font-size:14px;}
    #cvart .evtable thead th,#cvart .evtable tbody td{padding:12px 14px;}
  }

/* Figuren (Sustiro): doek van 940 px, breekt uit de tekstkolom; zie verify_fable_svg.py. */
#cvart figure.kb-figure{width:min(940px, calc(100vw - 48px)); max-width:none; margin:36px 0; position:relative; left:50%; transform:translateX(-50%);}
#cvart figure.kb-figure picture{display:block;}
#cvart figure.kb-figure img,#cvart figure.kb-figure svg{display:block; width:100%; height:auto; border-radius:12px; background:#fff;}
#cvart figure.kb-figure figcaption.vc{display:flex; justify-content:space-between; gap:18px; padding:10px 4px 0; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
#cvart figure.kb-figure .vc-brand{flex:0 0 auto; font-weight:700; letter-spacing:.4px; color:var(--teal);}
@media (max-width:1000px){ #cvart figure.kb-figure{width:auto; left:auto; transform:none; margin:28px 0;} }

/* Reparatie 30-09-2026. Plaatonderschrift = kop van de plaat + bron; de lange
   beschrijving staat inklapbaar onder de figuur (details.plaat-tekst). */
#cvart figure.kb-figure figcaption:not(.vc){padding:10px 4px 0; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
#cvart .body details.plaat-tekst{margin:-22px 0 30px; font-size:15px; line-height:1.55; color:var(--ink-soft);}
#cvart .body details.plaat-tekst summary{cursor:pointer; color:var(--teal); font-size:14.5px; font-weight:700; width:max-content; max-width:100%;}
#cvart .body details.plaat-tekst summary:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;}
#cvart .body details.plaat-tekst p{margin:8px 0 0; padding:12px 16px; background:var(--bg-alt); border-radius:10px;}
@media (max-width:1000px){ #cvart .body details.plaat-tekst{margin-top:-14px;} }

/* Alarmblok: compact kader, altijd open. Alleen opmaak; tekst ongewijzigd.
   Klasse komt uit tools/publish_sustiro.py (alarmblok()). */
#cvart .body blockquote.alarmblok{margin:18px 0 26px; padding:12px 16px 12px 18px; border:2px solid var(--su-alarm,#9b2c2c); border-left-width:6px; border-radius:10px; background:#FBF3EE; font-size:16px; line-height:1.5; color:var(--ink);}
#cvart .body blockquote.alarmblok p{margin:0 0 8px;}
#cvart .body blockquote.alarmblok ul{margin:4px 0 8px; padding-left:20px;}
#cvart .body blockquote.alarmblok li{margin:0 0 3px;}
#cvart .body blockquote.alarmblok > :last-child{margin-bottom:0;}
@media (max-width:640px){ #cvart .body blockquote.alarmblok{font-size:15.5px; padding:10px 12px 10px 14px;} }