/* Het rapport: dezelfde stijl op de site en in de PDF.
   De site laadt dit bestand naast style.css; de PDF-renderer zet het inline
   in een zelfstandig document (server/reporthtml.py). De kleuren volgen de
   huisstijl uit brand.css, met dezelfde waarden als terugval, zodat de PDF
   er zonder brand.css precies zo uitziet. Geen stijlattributen: de site
   heeft style-src 'self' zonder 'unsafe-inline'. */

.rapport{
  --r-ink:var(--ink,#1E2B3A);
  --r-soft:var(--ink-soft,#5A6B7E);
  --r-line:var(--line,#C9CFD6);
  --r-floor:var(--floor,#1F7A5C);
  --r-warn:var(--warn,#B4540A);
  --r-card:var(--card,#FFFFFF);
  --r-paper:var(--paper,#F7F6F2);
  --r-mono:var(--mono,ui-monospace,"DejaVu Sans Mono","Liberation Mono",monospace);
  --r-body:var(--body,system-ui,"Liberation Sans","DejaVu Sans",Arial,sans-serif);
  color:var(--r-ink);font-family:var(--r-body);font-size:14.5px;line-height:1.5;
  display:flex;flex-direction:column;gap:16px;
}
.rapport h2{font-size:21px;line-height:1.25;margin:0;font-weight:650;text-wrap:balance}
.rapport h3{font-size:17px;line-height:1.3;margin:0;font-weight:650;text-wrap:balance}
.rapport h4{font-size:14px;margin:0 0 6px;font-weight:650}
.rapport p{margin:0}
.rapport ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.rapport table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.rapport .bedrag{white-space:nowrap}

.rapport-kop{display:flex;flex-direction:column;gap:4px;padding-bottom:10px;border-bottom:1px solid var(--r-line)}
.rapport-kop .merk{font-family:var(--r-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--r-floor)}
.rapport-kop p{color:var(--r-soft);font-size:13.5px}
.rapport-kop p[data-veld="positie"]{color:var(--r-ink);font-size:15px;font-weight:600}
.rapport .let-op{color:var(--r-warn)}

.rapport-meldingen,.rapport-meter{background:var(--r-card);border:1px solid var(--r-line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.rapport-meldingen li{color:var(--r-ink)}
/* Bovenaan als de gekozen expiratie geen bruikbaar contract heeft en andere
   expiraties wel (FC-07): opvallend, met een streep in de waarschuwingskleur. */
.rapport-expiraties{background:var(--r-card);border:1px solid var(--r-line);border-left:4px solid var(--r-warn);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.rapport-meter p{font-size:13.5px}
.rapport-meter .meter-neutraal{color:var(--r-soft)}

.strategieen{display:flex;flex-direction:column;gap:18px}
.strategie{background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.strategie-kop{display:flex;flex-direction:column;gap:4px}
.strategie-nummer{font-family:var(--r-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--r-soft)}
.strategie h3 .sub{font-weight:400;color:var(--r-soft);font-size:14px}
.strategie .kernzin{font-weight:600;border-left:3px solid var(--r-floor);padding-left:10px}
.strategie[data-strategie="stop_loss"] .kernzin,.strategie[data-strategie="put_spread"] .kernzin{border-left-color:var(--r-warn)}
.blok{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--r-line)}
.blok .noot{font-size:12.5px;color:var(--r-soft)}
.blok .slot,.strategie .slot,.rapport-alternatieven .slot{font-size:13px;color:var(--r-soft);font-style:italic}
.niet-beschikbaar{color:var(--r-soft)}
/* Gevraagd, werkelijk en totaal onder de kernzin (FC-05): label links,
   waarde rechts; op een smal scherm onder elkaar. */
.niveaus{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.niveaus dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}
.niveaus dt{font-weight:600;color:var(--r-soft)}
.niveaus dd{margin:0}
.niveaus .noot{font-size:12.5px;color:var(--r-soft)}
@media (max-width:560px){
  .niveaus dl{grid-template-columns:1fr;gap:0}
  .niveaus dd{margin-bottom:4px}
}

table.geld{width:100%;max-width:560px}
table.geld th{text-align:left;font-weight:400;padding:4px 12px 4px 0;vertical-align:top}
table.geld th small{display:block;font-size:12px;color:var(--r-soft)}
table.geld td{text-align:right;padding:4px 0;white-space:nowrap;vertical-align:top}
table.geld tr.totaal th,table.geld tr.totaal td{font-weight:650;border-top:1px solid var(--r-line);padding-top:6px}
.let-op li{color:var(--r-warn)}

.grafiek-figuur{margin:4px 0}
svg.grafiek{display:block;width:100%;max-width:640px;height:auto;font-family:var(--r-body)}
/* Elke figuur heeft de grafiek twee keer: breed (viewBox 640) en smal (280).
   Standaard de brede; tot en met 700 px de smalle (zie het blok hieronder).
   Het omslagpunt: op 701 px is de figuur 631 px, dus de brede nooit kleiner
   dan 0,98 (labels 10,8 px); de smalle op 320 px is 262/280, labels 10,3 px.
   De PDF (body.pdf) en afdrukken tonen altijd de brede. display:none, zodat
   een schermlezer de grafiek niet twee keer voorleest (BR-3). */
svg.grafiek-smal{display:none}
@media (max-width:700px){
  body:not(.pdf) svg.grafiek:not(.grafiek-smal){display:none}
  body:not(.pdf) svg.grafiek-smal{display:block;width:100%;max-width:420px;height:auto}
}
body.pdf svg.grafiek-smal{display:none}
@media print{
  svg.grafiek-smal{display:none!important}
  svg.grafiek:not(.grafiek-smal){display:block!important}
}
.g-vlak{fill:#FBFBF9;stroke:var(--r-line)}
.g-raster{stroke:#E6E9ED;stroke-width:1}
.g-label{font-size:11px;fill:var(--r-soft)}
.g-astitel{font-size:11.5px;fill:var(--r-ink);font-weight:600}
.g-legenda{font-size:11.5px;fill:var(--r-ink)}
.g-nul{stroke:var(--r-ink);stroke-width:1;stroke-dasharray:2 3}
.g-nu{stroke:var(--r-soft);stroke-width:1;stroke-dasharray:4 3}
.g-strike{stroke:var(--r-floor);stroke-width:1;stroke-dasharray:1 3}
.g-strike-label{fill:var(--r-floor)}
.g-stop{stroke:var(--r-warn);stroke-width:1.5;stroke-dasharray:5 3}
.g-stop-label{fill:var(--r-warn)}
.g-totaal{stroke:var(--r-ink);stroke-width:2.5;fill:none}
.g-gedekt{stroke:var(--r-floor);stroke-width:2;stroke-dasharray:6 4;fill:none}

table.scenario{width:100%;font-size:13px;margin-top:4px}
table.scenario th{text-align:right;font-weight:600;padding:5px 8px;border-bottom:1px solid var(--r-line);color:var(--r-soft);font-size:12px;vertical-align:bottom}
table.scenario th:first-child,table.scenario td:first-child{text-align:left;padding-left:0}
table.scenario td{text-align:right;padding:4px 8px;border-bottom:1px solid #EEF0F2;white-space:nowrap}

.grenzen li,.zoekregels li{line-height:1.45}
.zoekregels li{font-family:var(--r-mono);font-size:12.5px}
details.verdieping{border-top:1px solid var(--r-line);padding-top:10px}
details.verdieping summary{cursor:pointer;color:var(--r-floor);font-weight:600}
details.verdieping summary:focus-visible{outline:2px solid var(--r-floor);outline-offset:2px}
details.verdieping p{margin-top:6px}

.rapport-alternatieven{display:flex;flex-direction:column;gap:10px}
.alternatief{background:var(--r-card);border:1px solid var(--r-line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;overflow-x:auto}
.alt-cat{font-family:var(--r-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--r-floor)}
table.alt-vergelijking{font-size:13px;width:100%}
table.alt-vergelijking th,table.alt-vergelijking td{padding:4px 8px;text-align:left;border-bottom:1px solid #EEF0F2;vertical-align:top}
.alt-noten{font-size:12.5px;color:var(--r-soft)}

.rapport-voet{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--r-line);padding-top:12px}
.rapport-voet .disclaimer{font-size:12.5px;color:var(--r-soft)}
.rapport-voet .versies{font-family:var(--r-mono);font-size:10.5px;color:var(--r-soft);overflow-wrap:anywhere}
.sommetje{display:flex;flex-direction:column;gap:6px}

.tabel-scroll{overflow-x:auto}
.rapport .verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* De vergelijking van de standaardstrategieën (BR-2): een kaart zoals de
   meter, met de maatstaven als regels en de strategieën als kolommen. Op
   een smal scherm gestapeld, zoals de vergelijking van een alternatief:
   per maatstaf een kop en per strategie een regel met haar naam ervoor
   (data-kolom), zodat bij 390 px niets buiten beeld valt. */
.rapport-vergelijking{background:var(--r-card);border:1px solid var(--r-line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.rapport-vergelijking .noot{font-size:12.5px;color:var(--r-soft)}
table.vergelijking{width:100%;font-size:13px}
table.vergelijking th,table.vergelijking td{padding:5px 8px;text-align:left;vertical-align:top;border-bottom:1px solid #EEF0F2}
table.vergelijking thead th{font-weight:600;color:var(--r-soft);font-size:12px;border-bottom:1px solid var(--r-line)}
table.vergelijking tbody th{font-weight:600;padding-left:0;width:24%}
@media (max-width:560px){
  table.vergelijking thead{display:none}
  table.vergelijking tr,table.vergelijking th,table.vergelijking td{display:block;width:auto}
  table.vergelijking tr{padding:6px 0;border-bottom:1px solid #EEF0F2}
  table.vergelijking th,table.vergelijking td{border:0;padding:2px 0}
  table.vergelijking td:empty{display:none}
  table.vergelijking td::before{content:attr(data-kolom) ": ";color:var(--r-soft)}
  /* Zo specifiek als de 24% hierboven (0,1,3), anders blijft die gelden en
     breekt een gestapelde regelnaam in een smalle kolom (review, bevinding 15). */
  table.vergelijking tbody th{width:auto}
}

@media (max-width:560px){
  .strategie{padding:14px 12px}
  table.geld td{white-space:normal}
  table.scenario{font-size:12px}
  table.scenario td,table.scenario th{padding:4px 4px}
  /* De vergelijking van een alternatief: gestapeld, met de kolomnaam voor
     elke waarde, zodat de laatste kolom niet buiten beeld valt. */
  table.alt-vergelijking thead{display:none}
  table.alt-vergelijking tr,table.alt-vergelijking th,table.alt-vergelijking td{display:block}
  table.alt-vergelijking tr{padding:6px 0;border-bottom:1px solid #EEF0F2}
  table.alt-vergelijking td{border:0;padding:2px 0}
  table.alt-vergelijking td::before{content:attr(data-kop) ": ";color:var(--r-soft)}
}

/* ---------------------------------------------------------------- print --
   Voor de PDF (body.pdf) en voor wie de pagina zelf afdrukt. A4, lichte
   achtergrond, elke strategie op een nieuwe pagina, en tabellen en
   grafieken nooit doormidden. De marges zet de renderer (page.pdf). */
@page{size:A4}
body.pdf{margin:0;background:#fff}
body.pdf .rapport{font-size:10.5pt;gap:10px}
body.pdf .rapport h2{font-size:16pt}
body.pdf .rapport h3{font-size:13pt}
body.pdf .rapport h4{font-size:10.5pt}
body.pdf .strategie{border:0;padding:0;break-before:page;gap:9px}
body.pdf .strategie:first-child{break-before:auto;border-top:1px solid var(--r-line);padding-top:10px}
body.pdf .blok{gap:5px;padding-top:7px}
body.pdf svg.grafiek{max-width:100%}
body.pdf table.scenario{font-size:9pt}
body.pdf .rapport-alternatieven{break-before:page}
/* Spec 01 §5, pagina 4: de vergelijking op een eigen pagina (BR-2). */
body.pdf .rapport-vergelijking{break-before:page;border:0;padding:0}
body.pdf table.vergelijking{font-size:8pt;line-height:1.3}
body.pdf table.vergelijking th,body.pdf table.vergelijking td{padding:3px 5px}
body.pdf table.vergelijking tbody th{width:17%}
body.pdf details.verdieping summary{list-style:none;color:var(--r-ink)}
body.pdf details.verdieping summary::-webkit-details-marker{display:none}
.rapport figure,.rapport table,.rapport .kernzin,.rapport .grenzen li,.alternatief{break-inside:avoid}
.rapport h3,.rapport h4{break-after:avoid}
/* Afbreken (C8). Een blok dat op één pagina past, gaat heel naar de
   volgende pagina in plaats van dat een staart van een paar regels alleen
   staat; een kop blijft bij wat erop volgt; een alinea laat aan geen van
   beide kanten van een paginagrens minder dan drie regels achter. "avoid"
   is een voorkeur (CSS Fragmentation 3): een blok dat langer is dan een
   pagina loopt gewoon door, en een tabel herhaalt dan haar kop. Zonder
   body.pdf, zodat zelf afdrukken van de site hetzelfde doet; op het scherm
   doen deze eigenschappen niets. */
.rapport .blok,.rapport details.verdieping,.rapport .rapport-meldingen,.rapport .rapport-meter,.rapport .rapport-expiraties,.rapport .rapport-vergelijking,.rapport .strategie-kop,.rapport .niet-beschikbaar,.rapport .sommetje,.rapport .niveaus{break-inside:avoid}
.rapport .strategie-kop,.rapport .blok > h4,.rapport details.verdieping > summary,.rapport .rapport-vergelijking > h3{break-after:avoid}
.rapport p,.rapport li,.rapport dd{orphans:3;widows:3}
.rapport tr{break-inside:avoid}
/* De vergelijking mag als tabel wel over een pagina doorlopen, regel voor
   regel en met haar kop herhaald: past ze niet op één pagina, dan blijft
   anders de kop met de inleiding alleen achter. */
.rapport table.vergelijking{break-inside:auto}
.rapport thead{display:table-header-group}
@media print{
  .rapport details.verdieping > *{display:block}
}