/* Grafiekfiguur (B-164 t/m B-168, v2.46.0) · orj-core
 * Zelfde kaart als de andere figuren (B-144): mint, onderschrift erbuiten. De grafiek past zich aan de breedte van
 * de kaart aan (container query), niet aan het scherm: dezelfde markup klopt in de artikelkolom, op de telefoon en
 * in het voorbeeld van de editor. Kleur: inklijn, wit en mint, één groen accent, geen oranje (§6a). Tekst in ink of
 * #4b5563 (6,8 : 1 op mint; muted haalt daar 4,3 : 1). Tekst altijd in volle kleur, geen animatie. */
.orj-art-grafiek .orj-gr-wrap { container-type: inline-size; }
.orj-gr { --gr-h: 240px; display: grid !important; grid-template-columns: var(--gr-goot, 76px) minmax(0, 1fr); grid-template-rows: var(--gr-h) auto; margin: 0 !important; padding: 0 !important; }
.orj-gr-yas { position: relative; grid-column: 1; grid-row: 1; }
.orj-gr-vlak { position: relative; grid-column: 2; grid-row: 1; }
.orj-gr-xas { position: relative; grid-column: 2; grid-row: 2; height: 30px; }
.orj-gr-raster { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--orj-ink, #111827) 16%, var(--orj-mint, #ebf5f1)); }
.orj-gr-raster.is-nul { border-top: 1.5px solid var(--orj-ink, #111827); }
.orj-gr-yt, .orj-gr-xt { position: absolute; font-size: 13px !important; line-height: 16px !important; font-weight: 500 !important; color: #4b5563 !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orj-gr-yt { right: 10px; transform: translateY(-50%); }
.orj-gr-xt { top: 9px; transform: translateX(-50%); }
.orj-gr-yt::before, .orj-gr-xt::before { content: attr(data-t); }   /* steigerwerk: zichtbaar, geen DOM-tekst (B-165) */
.orj-gr-xt.is-w12 { display: none; }
.orj-gr-tick { position: absolute; top: 0; width: 1px; height: 5px; background: color-mix(in srgb, var(--orj-ink, #111827) 35%, var(--orj-mint, #ebf5f1)); }
.orj-gr-svg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; overflow: visible; }
.orj-gr-lijn { fill: none; stroke: var(--orj-ink, #111827); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.orj-gr-accent { fill: none; stroke: var(--orj-green, #269c74); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.orj-gr-punt, .orj-gr-knoop { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.orj-gr-punt { width: 11px; height: 11px; background: var(--orj-green, #269c74); box-shadow: 0 0 0 2.5px var(--orj-mint, #ebf5f1); }
.orj-gr-knoop { width: 8px; height: 8px; box-sizing: border-box; background: #fff; border: 2px solid var(--orj-ink, #111827); }   /* inktring, zoals de knopen van de tijdlijn */
.orj-gr-lab { position: absolute; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; color: var(--orj-ink, #111827) !important; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translate(var(--gr-lx, 0px), var(--gr-ly, 0px)); }
.orj-gr-lab.is-onder { --gr-ly: 12px; }
.orj-gr-lab.is-boven { --gr-ly: calc(-100% - 12px); }
.orj-gr-staven { position: absolute; inset: 0; }
.orj-gr-kolom { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; }
.orj-gr-staaf { display: block; width: 62%; box-sizing: border-box; background: #fff; border: 1.5px solid var(--orj-ink, #111827); border-bottom: 0; border-radius: 3px 3px 0 0; }
.orj-gr-staaf.is-groen { background: var(--orj-green, #269c74); border-color: var(--orj-green, #269c74); }
/* Alle waarden: native details, standaard dicht (B-167) */
.orj-gr-cijfers { margin: 18px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.orj-gr-cijfers summary { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; color: var(--orj-ink, #111827) !important; border-radius: 4px; }
.orj-gr-cijfers summary::-webkit-details-marker { display: none; }
.orj-gr-cijfers summary::marker { content: ""; }
.orj-gr-cijfers summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
.orj-gr-cijfers summary:focus-visible { outline: 2px solid var(--orj-green, #269c74); outline-offset: 2px; }
.orj-gr-cijfers[open] summary svg { transform: rotate(180deg); }
.orj-gr-tabel { margin: 12px 0 0 !important; border-collapse: collapse !important; width: 100% !important; max-width: 360px; font-variant-numeric: tabular-nums; background: none !important; border: 0 !important; }
.orj-gr-tabel th, .orj-gr-tabel td { padding: 7px 0 !important; font-size: 15px !important; line-height: 22px !important; color: var(--orj-ink, #111827) !important; text-align: left !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--orj-mint-donker, #d7ebe3) !important; vertical-align: top; }
.orj-gr-tabel thead th { font-size: 13px !important; line-height: 16px !important; font-weight: 600 !important; color: #4b5563 !important; border-bottom: 1.5px solid color-mix(in srgb, var(--orj-ink, #111827) 30%, var(--orj-mint, #ebf5f1)) !important; }
.orj-gr-tabel tbody th { font-weight: 600 !important; }
.orj-gr-tabel .is-getal, .orj-gr-tabel thead th:last-child { text-align: right !important; }
.orj-gr-noot { font-weight: 500; color: #4b5563; }
/* Smalle kaart (telefoon, zijkolom, voorbeeld): hoger vlak, hoogstens zes jaarlabels, labels 13 */
@container (max-width: 420px) {
	.orj-gr { --gr-h: 190px; }
	.orj-gr-yt { right: 7px; }
	.orj-gr-lab { font-size: 13px !important; line-height: 16px !important; }
	.orj-gr-staaf { width: 70%; }
}
/* Jaarlabels per kaartbreedte (B-166): 12 · 8 · 6 · 4 · 3, genest; zie orj_art_grafiek_dun() */
@container (max-width: 520px) { .orj-gr-xt.is-w12 { display: block; } .orj-gr-xt.is-w8 { display: none; } }
@container (max-width: 380px) { .orj-gr-xt.is-w8 { display: block; } .orj-gr-xt.is-w6 { display: none; } }
@container (max-width: 300px) { .orj-gr-xt.is-w6 { display: block; } .orj-gr-xt.is-w4 { display: none; } }
@container (max-width: 230px) { .orj-gr-xt.is-w4 { display: block; } .orj-gr-xt.is-w3 { display: none; } }
/* Hoog contrast (Windows): lijnen en vlakken in systeemkleuren */
@media (forced-colors: active) {
	.orj-gr-lijn { stroke: CanvasText; } .orj-gr-accent { stroke: Highlight; }
	.orj-gr-punt { background: Highlight; box-shadow: none; } .orj-gr-knoop, .orj-gr-staaf { border-color: CanvasText; }
	.orj-gr-staaf.is-groen { background: Highlight; border-color: Highlight; } .orj-gr-raster { border-top-color: GrayText; }
}