@layer legacy {
/* Verzoek Emanuel (7 september 2026): de paginascrollbalk weg. Html/body
 * kregen dit hier meteen goed (geverifieerd: window.innerWidth===
 * document.documentElement.clientWidth, dus geen scrollbalk-marge, op elke
 * pagina). De balk die Emanuel op 8 september bleef zien kwam NIET van
 * html/body -- die stonden allang op nul -- maar van .contextbar (de
 * subnav-strook "Overzicht/Planeten en punten/...", staat op vrijwel elke
 * /nl/-productpagina). Eerdere aanname hier was fout: reference.html regel
 * 17 geeft .contextbar alleen `overflow:auto`, ZONDER scrollbar-verberging;
 * de enige verberging die reference.html heeft (regel 249-250) zit BINNEN
 * `@media(max-width:760px)`, dus alleen op mobiel. Op elke desktop-breedte
 * tekende de browser daarom gewoon zijn eigen, echte scrollbalk voor
 * .contextbar's eigen 9px verticale overflow (bevestigd met
 * document.elementFromPoint op de balk se coördinaten: dat was
 * `DIV.contextbar`, geen document-scrollbalk). Hier nu op ALLE breedtes
 * verborgen, niet alleen mobiel -- reference.html zelf blijft onaangeraakt,
 * zoals gebruikelijk in dit bestand. Scrollen zelf blijft werken
 * (toetsenbord, muiswiel, touch) -- alleen de zichtbare balk verdwijnt. Op
 * zowel html als body, want body.chart-page (zie hieronder) is zelf ook een
 * eigen scrollcontainer. */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body{scrollbar-width:none}body::-webkit-scrollbar{display:none}.contextbar{scrollbar-width:none}.contextbar::-webkit-scrollbar{display:none}
/* Vervolg (8 september 2026): .contextbar was niet de enige plek. Na die
 * vondst is hier elke `overflow:auto`/`overflow-y:auto`/`overflow-x:auto`
 * in reference.html EN in dit bestand nagelopen (niet nog een keer één
 * plek tegelijk repareren) -- zes andere elementen hadden hetzelfde gat:
 * een reëel klein beetje overflow, nooit een scrollbar-verbergingsregel.
 * Bevestigd op /nl/naslagwerk/: .sidebar .mainnav (12px verticale
 * overflow, reference.html regel 61, ZONDER @media-voorwaarde dus overal)
 * toonde daar exact dezelfde klassieke browserbalk als .contextbar eerder.
 * De overige vijf zijn niet één voor één live gereproduceerd maar hebben
 * hetzelfde onderliggende gat (reference.html: .modal/.modalbody,
 * .chart-summary, .lesson-sequence; dit bestand: .live-places) en zijn nu
 * in dezelfde beweging meegenomen -- .legal-table blijft opzettelijk
 * horizontaal scrollbaar (brede tabel op smal scherm) maar ook daar hoort
 * de balk zelf niet zichtbaar te zijn, net als de rest hier. Scrollen zelf
 * blijft overal werken; alleen de zichtbare balk verdwijnt. */
/* Gevonden (8 september 2026, Emanuel: "komt ook niet overeen met de
 * bible"): de topbar gebruikt het verkeerde kleurtoken. work/
 * designbijbel-2026/style.css zet `.topbar{background:var(--paper)}` op
 * ELKE breedte, zonder uitzondering -- bewust bijna dezelfde kleur als de
 * navy zijbalk (--night, ongewijzigd tussen thema's), zodat de naad ertussen
 * nauwelijks zichtbaar is. reference.html regel 72 zet in plaats daarvan
 * `.topbar{...background:var(--panel)}`, ongeclausuleerd (geen @media),
 * wint van de eerdere --paper-poging op regel 17 door bron-volgorde. Live
 * gemeten (donker thema): zijbalk rgb(13,26,42), topbar-als-panel
 * rgb(20,37,54) -- een duidelijk zichtbare sprong. Met --paper (Astrae's
 * eigen donkere waarde #0c1420 = rgb(12,20,32)) zou het verschil met de
 * zijbalk nog maar 1-10 per kanaal zijn, nauwelijks te onderscheiden, zoals
 * de bijbel bedoelt. Geen vastgelegd besluit gevonden dat dit bewust
 * --panel moest zijn (--panel is elders gereserveerd voor kaarten/content-
 * vlakken, niet voor navigatiechrome) -- dit is dezelfde soort onopgemerkte
 * afwijking als de scrollbalken hierboven, geen bewuste keuze. */
.topbar{background:var(--paper)}
/* Zelfde ronde (8 september 2026): .crumb (het paginalabel in de topbar,
 * alleen zichtbaar in een smalle tussenbreedte waar de zijbalk al verborgen
 * is maar de mobiele modus nog niet actief) staat in reference.html op
 * color:var(--accent) (goud) -- de bijbel zegt var(--muted), net als de
 * rest van het kruimelpad (".crumb b" is daar apart donkerder voor nadruk).
 * Live bevestigd: rgb(226,181,99) = --accent (donker thema). */
.crumb{color:var(--muted)}
.sidebar .mainnav,.modal,.modalbody,.chart-summary,.lesson-sequence,.live-places,.legal-table{scrollbar-width:none}
.sidebar .mainnav::-webkit-scrollbar,.modal::-webkit-scrollbar,.modalbody::-webkit-scrollbar,.chart-summary::-webkit-scrollbar,.lesson-sequence::-webkit-scrollbar,.live-places::-webkit-scrollbar,.legal-table::-webkit-scrollbar{display:none}
.product-state{min-height:360px;padding:clamp(32px,7vw,88px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.product-state h2{max-width:760px;margin:10px 0;font:clamp(2rem,4.5vw,4.5rem)/1 var(--serif)}.product-state p{max-width:680px;color:var(--muted);line-height:1.7}.empty-state{border-color:#778da9}.error-state{padding:28px;border:1px solid #a0524d}.live-loading{min-height:180px;width:100%;display:grid;place-items:center;align-content:center;gap:10px;color:#a8b3c2;text-align:center}.live-loading i{width:34px;height:34px;border:2px solid #415a77;border-top-color:#e1c488;border-radius:50%;animation:live-spin .8s linear infinite}.live-loading span{font-size:.8rem}@keyframes live-spin{to{transform:rotate(360deg)}}
.live-form{display:grid;gap:17px;margin-top:24px}.live-form label>span{display:block;margin-bottom:7px;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.live-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.live-form .check{display:flex;align-items:center;gap:9px}.live-form .check input{width:20px;flex:none}.place-field{position:relative}.live-places{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:220px;overflow:auto;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}.live-places button{display:block;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer}.live-places button:hover{background:var(--soft)}.field-error{padding:13px;border-left:3px solid #a0524d;background:#a0524d18;color:var(--ink)}
.live-planet-list{display:grid}.live-planet-list button{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 0;border:0;border-bottom:1px solid #415a77;background:transparent;color:#e0e1dd;text-align:left;cursor:pointer}.live-planet-list span{color:#a8b3c2;font-size:.7rem}.technical-data{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.technical-data div{border-top:1px solid #415a77;padding-top:8px}.technical-data dt{font-size:.66rem;color:#a8b3c2;text-transform:uppercase}.technical-data dd{margin:3px 0 0;font-size:.78rem}.live-today{min-height:360px}.legal-page{max-width:900px;margin:auto}.legal-page h1{font:clamp(3rem,6vw,5.5rem)/.95 var(--serif)}.legal-page h2{margin-top:42px;font:2rem var(--serif)}.legal-page p,.legal-page li{color:var(--muted);line-height:1.75}.legal-links{display:flex;gap:16px;margin-top:50px;padding-top:24px;border-top:1px solid var(--line)}
.chart-layers .legend button.off{opacity:.35}.aspect-line{transition:opacity .16s ease}.wheel [data-kind="planet"]:focus{outline:none}.wheel [data-kind="planet"]:focus .planet-hit,.wheel [data-kind="planet"]:hover .planet-hit{stroke:#e1c488;stroke-width:1}
.selected-heading{display:flex;align-items:center;gap:12px;margin:10px 0 8px}.selected-heading .glyph{margin:0}.selected-heading h3{margin:0 0 2px}.selected-heading b{color:var(--muted);font-size:.75rem}.chart-insight-tools{margin-top:14px;border-top:1px solid var(--line)}.chart-legend-card{padding:12px 0}.chart-legend-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}.chart-legend-card header>b{font-size:.72rem}.chart-legend-card .aspect-scope{margin:0;padding:3px 0;border:0;background:transparent;color:var(--accent);font-size:.62rem;font-weight:700;cursor:pointer}.chart-legend-card .legend{display:flex;gap:6px;margin-top:10px}.chart-legend-card .legend button{flex:1;min-width:0;padding:7px 6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:.6rem;text-align:center}.chart-legend-card .legend i{display:inline-block;width:13px;height:2px;margin-right:4px;vertical-align:middle}.chart-next-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.chart-tool-link{position:relative;min-width:0;padding:11px 28px 11px 11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer}.chart-tool-link:hover{background:var(--soft)}.chart-tool-link span{display:block;margin-bottom:3px;color:var(--accent);font-size:.59rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.chart-tool-link b{display:block;font-size:.7rem;line-height:1.25}.chart-tool-link em{position:absolute;right:10px;top:50%;translate:0 -50%;color:var(--accent);font-style:normal}.chart-panel>.chart-layers{margin-top:8px}.chart-panel>.chart-layers summary{padding-block:10px;font-size:.68rem}
.chart-layout,.chart-stage{background:var(--paper)}.chart-panel{background:var(--panel);color:var(--ink);border-color:var(--line)}.chart-panel p,.live-planet-list span{color:var(--muted)}.chart-panel .eyebrow,.selected .glyph{color:var(--accent)}.chart-panel .ai-actions button,.live-planet-list button,.chart-panel .legend button{color:var(--ink);border-color:var(--line)}.viewtoggle{border-color:var(--line)}.viewtoggle button{color:var(--muted)}.viewtoggle button.on{background:var(--soft);color:var(--ink)}.legend .c i{background:var(--accent)}.legend .h i{background:var(--good)}.legend .t i{background:var(--bad)}.chart-meta{color:var(--muted)}
.chart-toolbar,.chart-summary{background:var(--panel);color:var(--ink);border-color:var(--line)}.chart-layers{border-color:var(--line)}.chart-layers summary{color:var(--muted)}.chart-panel .ai-actions button:after{color:var(--accent)}.chart-panel .ai-actions button:hover,.chart-panel .ai-actions button:focus-visible{color:var(--ink);background:var(--soft)}
.chart-panel{gap:12px}.chart-panel .selected{min-height:150px;padding:0 0 14px}.chart-panel .selected .glyph{margin-top:12px}.chart-panel .chart-layers{margin:0}.chart-panel .chart-layers summary{padding:12px 0;font-weight:650}.chart-panel .legend{grid-template-columns:1fr;margin:0 0 8px}.chart-panel .legend button{padding:9px 0}.chart-panel .ai-actions{margin-top:auto}
.chart-instruction{color:var(--muted);font-size:.78rem}.planet-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}.planet-facts div{padding-top:9px;border-top:1px solid var(--line)}.planet-facts dt{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.planet-facts dd{margin:2px 0 0;font-size:.8rem}
.chart-layout{height:clamp(540px,calc(100vh - 210px),680px);min-height:0;align-items:stretch}.chart-stage{height:100%;min-height:0}.chart-stage .wheel{max-height:calc(100% - 36px);min-width:0}.chart-panel{height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.chart-panel::-webkit-scrollbar{display:none}.chart-panel>*{flex:0 0 auto}.chart-panel .ai-actions{margin-top:12px}
/* GEVONDEN EN GEFIXT (7 september 2026, de echte oorzaak achter de
 * afknip-bug hierboven): packages/mockup/astrae_ultimate_product_mockup.
 * reference.html regel 168 zet `.chart-stage .wheel{...;min-width:370px}`
 * ZONDER @media-voorwaarde -- dus altijd actief, op elke schermgrootte, in
 * elke pagina waar die bron letterlijk in wordt geplakt. Geen van de
 * `width`/`max-height`-overrides hieronder raakt `min-width`, dus die
 * 370px bleef overal onbestreden staan. Met `aspect-ratio:1/1` (ook uit de
 * bron) wordt een `min-width` zonder eigen `min-height` door de browser
 * omgezet in een EVEN GROTE min-height via de ratio (CSS Sizing: een
 * transferred size) -- en min-height wint altijd van max-height, ongeacht
 * hoeveel ``s er op max-height staan. Vandaar dat het wiel nooit
 * kleiner werd dan ~370px, ook niet toen er minder dan 350px beschikbaar
 * was. `min-width:0` hierboven neemt die vloer weg; de eerdere
 * `.wheel svg{width:100%;height:100%}`-regel blijft staan als vangnet voor
 * de resterende, kleinere gevallen waar breedte- en hoogteformules elkaar
 * nog net niet perfect dekken. */
@media(max-width:820px){.chart-layout{height:auto}.chart-stage{height:auto;min-height:440px}.chart-panel{height:min(460px,60vh)}}
@media(max-width:520px){.chart-stage{min-height:390px}.chart-panel{height:min(430px,58vh)}}
.wheel svg{width:100%;height:100%}.wheel svg>circle:first-child{fill:var(--panel)}.wheel [data-kind="house"]{fill:transparent}.wheel svg>circle:not(.planet-hit){stroke:var(--line)}.wheel svg text{fill:var(--ink)}.wheel [data-kind="planet"] text{fill:var(--accent)}.aspect-scope{margin-top:4px;color:var(--accent);font-weight:700}
/* GEVONDEN EN GEFIXT (7 september 2026): op kortere vensterhoogtes
 * (~600px en lager) botsten .chart-stage .wheel se breedte-formule
 * (width:min(...,60vh,...) e.d., meerdere varianten per breakpoint) en
 * zijn max-height (calc(100% - Npx)) -- de breedte-kant weet niets van de
 * hoogte-kant, dus bij een strakke vensterhoogte werd de gevraagde breedte
 * groter dan wat de hoogte nog toestond. `aspect-ratio:1/1` verliest die
 * strijd altijd van een expliciete max-height, dus het wielvlak werd
 * niet-vierkant -- en zonder deze regel had de <svg> daarbinnen geen eigen
 * width/height, dus nam hij zijn eigen (grotere) vierkante voorkeursmaat en
 * stak door de max-height heen. `.chart-layout` se `overflow:hidden`
 * knipte dat overschot dan gewoon af: de onderkant van het wiel verdween
 * achter de knoppenrij eronder. Gemeten (1366x580, viewport-breed): het
 * wiel eindigde op y=637, zijn omhullende .chart-layout al op y=609 -- 28px
 * afgesneden. `width:100%;height:100%` op de svg zelf dwingt 'm nu altijd
 * exact in het vlak dat .wheel al berekent te passen; bij een niet-vierkant
 * vlak schaalt de (vierkante) tekening dan netjes terug met lege marge
 * (SVG se eigen standaard-`preserveAspectRatio`), in plaats van af te
 * knippen. De onderliggende breedte/hoogte-formules zelf zijn niet
 * herzien -- dat raakt acht losse breakpoints, dit is de kleine, correcte
 * vangnet-fix die de zichtbare fout wegneemt zonder dat risico. */
.avatar .person-icon{display:block;width:20px;height:20px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.avatar.authenticated{position:relative;width:auto;min-width:42px;padding:0 12px;display:flex;align-items:center;gap:7px;border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--panel));color:var(--ink);font-family:var(--sans)}
.avatar.authenticated .person-icon{width:18px;height:18px;margin:0;stroke:var(--good)}
.account-status{font-size:.72rem;font-weight:750;white-space:nowrap}
@media(max-width:760px){.avatar.authenticated{width:38px;min-width:38px;padding:0;justify-content:center}.avatar.authenticated .person-icon{margin:auto}.account-status{position:absolute;width:8px;height:8px;border-radius:50%;right:0;bottom:1px;background:var(--good);font-size:0;border:2px solid var(--paper)}}
@media(max-width:720px){.live-form-row{grid-template-columns:1fr}.product-state{min-height:300px}.live-planet-list button{grid-template-columns:1fr}.technical-data{grid-template-columns:1fr}.live-loading{min-height:130px}}
.modal:has(.access-choice){max-height:min(760px,calc(100vh - 36px))}.modal:has(.access-choice) .modalhead{min-height:58px;padding:12px 22px}.modal:has(.access-choice) .modalbody{padding:22px 28px}.access-choice h2{font-size:clamp(2rem,4vw,3rem);margin:7px 0 8px}.access-choice>p{margin:0;line-height:1.5}.access-choice .context-picker{margin-top:16px}.access-choice .toggle{padding:12px 0}.access-choice .toggle small{line-height:1.45}.access-choice .access-note{margin-top:14px;font-size:.78rem}.access-choice>.actions{margin-top:14px}.access-choice #registrationPanel{margin-top:14px}.access-choice #registrationPanel .live-form{gap:11px;margin-top:12px}
@media(max-width:720px){.modal:has(.access-choice) .modalbody{padding:18px}.access-choice h2{font-size:1.85rem}.access-choice .actions{display:grid}.access-choice .actions>*{width:100%}}
@media(prefers-reduced-motion:reduce){.live-loading i{animation:none}}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px clamp(18px,4vw,58px);border-top:1px solid var(--line);color:var(--muted);font-size:.75rem}.site-footer nav{display:flex;flex-wrap:wrap;gap:20px}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--ink)}
@media(max-width:640px){.site-footer{align-items:flex-start;flex-direction:column;padding-bottom:88px}.site-footer nav{gap:14px 20px}}

/* De intake gebruikt dezelfde vaste productrail, maar geen extra tabregel. */
body.intake-page .contextbar{display:none}
body.intake-page .main{padding-top:20px;padding-bottom:24px}
body.intake-page .pagehead{grid-template-columns:1fr;gap:6px;min-height:0;margin-bottom:16px}
body.intake-page .pagehead h1{max-width:760px;font-size:clamp(2.8rem,4.6vw,4.8rem);line-height:.94;margin-top:0}
body.intake-page .pagehead p{font-size:.95rem;line-height:1.4}
body.intake-page .surface{max-width:760px;margin-left:0}
body.intake-page .surface.pad{padding:18px 24px}
body.intake-page .live-form{gap:10px;margin-top:0}
body.intake-page .live-form label>span{margin-bottom:5px}
body.intake-page .live-form input:not([type=checkbox]),
body.intake-page .live-form select{padding:10px 12px;min-height:44px}
body.intake-page .live-form .actions{margin-top:2px}
body.intake-page .site-footer{display:none}
@media(min-width:761px){body.intake-page{height:100vh;overflow:hidden}body.intake-page .app{min-height:0;height:100vh}}
@media(max-width:760px){body.intake-page .mobile-nav{display:none}}

/* De geboortechart en context vormen op desktop één vaste, volledig zichtbare compositie. */
body.chart-page .main{padding-top:20px;padding-bottom:28px}
body.chart-page .pagehead{min-height:0;margin-bottom:16px;align-items:center}
body.chart-page .pagehead h1{font-size:clamp(3rem,4.6vw,4.8rem);line-height:.94;margin-top:0}
body.chart-page .pagehead p{font-size:.95rem;line-height:1.45}
body.chart-page .chart-toolbar{min-height:58px;padding:10px 20px}
body.chart-page .chart-layout{height:clamp(430px,calc(100vh - 300px),560px)}
body.chart-page .chart-stage{padding:16px}
body.chart-page .chart-stage .wheel{width:min(520px,92%);max-height:calc(100% - 28px)}
body.chart-page .chart-meta{bottom:10px}
body.chart-page .chart-panel{padding:18px 22px;overflow:hidden;display:flex;flex-direction:column}
body.chart-page .chart-panel .selected{min-height:0;padding:0 0 10px}
body.chart-page .chart-panel .selected .glyph{font-size:1.8rem;margin-top:8px}
body.chart-page .chart-panel .selected h3{font-size:1.35rem;margin:4px 0}
body.chart-page .chart-panel .selected p{margin:6px 0;line-height:1.45}
body.chart-page .planet-facts{margin-top:10px}
body.chart-page .chart-panel .chart-layers summary{padding:9px 0}
body.chart-page .chart-panel .legend button{padding:6px 0}
body.chart-page .chart-panel .ai-actions{margin-top:auto}
body.chart-page .chart-panel .ai-actions button{padding:9px 0}
@media(max-width:820px){body.chart-page .chart-layout{height:auto}body.chart-page .chart-panel{height:auto;overflow:visible}}
@media(min-width:821px){
 body.chart-page{height:100vh;overflow:hidden}
 body.chart-page .main{height:calc(100vh - 52px);padding-top:12px;padding-bottom:12px;overflow:hidden}
 body.chart-page .pagehead{grid-template-columns:auto 1fr;gap:40px;margin-bottom:10px;min-height:48px;align-items:center}
 body.chart-page .pagehead h1{font-size:2.45rem;line-height:1;letter-spacing:-.035em;white-space:nowrap}
 body.chart-page .pagehead p{justify-self:end;max-width:560px;font-size:.88rem;line-height:1.35;text-align:right}
 body.chart-page .chart-shell{height:calc(100% - 58px);display:grid;grid-template-rows:auto minmax(0,1fr)}
 body.chart-page .chart-toolbar{min-height:50px;padding:8px 18px}
 body.chart-page .chart-layout{height:100%;min-height:0}
 body.chart-page .chart-stage .wheel{width:min(500px,60vh,88%);max-height:calc(100% - 24px)}
 body.chart-page .chart-summary{display:none}
}
@media(min-width:821px){
 body.chart-page .chart-panel{padding:14px 18px;gap:7px}
 body.chart-page .chart-panel .selected{padding-bottom:6px}
 body.chart-page .chart-panel .selected .glyph{font-size:1.55rem;margin-top:4px}
 body.chart-page .chart-panel .selected h3{font-size:1.2rem;margin:2px 0}
 body.chart-page .chart-panel .selected p{font-size:.76rem;line-height:1.32;margin:4px 0}
 body.chart-page .planet-facts{gap:8px;margin-top:6px}
 body.chart-page .planet-facts div{padding-top:5px}
 body.chart-page .chart-panel .chart-layers summary{padding:6px 0;font-size:.78rem}
 body.chart-page .chart-panel .legend button{padding:4px 0;font-size:.75rem}
 body.chart-page .chart-panel .ai-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
 body.chart-page .chart-panel .ai-actions button{padding:7px 5px;font-size:.72rem;line-height:1.25}
}
@media(min-width:900px) and (max-height:900px){
 body:not(.intake-page):not(.chart-page) .main{padding-top:22px;padding-bottom:48px}
 body:not(.intake-page):not(.chart-page) .pagehead{min-height:0;margin-bottom:18px;gap:32px}
 body:not(.intake-page):not(.chart-page) .pagehead h1{font-size:clamp(2.8rem,4.5vw,4.5rem);line-height:.92}
 body:not(.intake-page):not(.chart-page) .pagehead p{font-size:.92rem;line-height:1.45}
 body:not(.intake-page):not(.chart-page) .sectionhead{min-height:58px;padding:13px 20px}
 body:not(.intake-page):not(.chart-page) .surface.pad{padding:22px}
 body[data-page="today"] .today-focus{min-height:480px;padding:36px}
 body[data-page="today"] .today-metrics>div{min-height:112px;padding:18px}
 body[data-page="today"] .today-context{padding:28px}
}
.relevance-copy{margin-top:30px;padding:28px;border:1px solid var(--line);background:var(--soft);max-width:760px}.relevance-copy h3{margin:10px 0 16px;font:clamp(1.55rem,2.3vw,2.25rem)/1.15 var(--serif)}.relevance-copy p{color:var(--muted);line-height:1.7}.reflection-check{margin:20px 0;padding:18px;border-left:3px solid var(--accent);background:var(--panel)}.reflection-check p{margin-bottom:0}.relevance-copy details{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.relevance-copy summary{cursor:pointer;color:var(--accent);font-weight:700}.compass-editor>p{max-width:650px;color:var(--muted);line-height:1.65}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.tool-grid button{min-height:132px;padding:28px;text-align:left;background:transparent;color:inherit;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;display:grid;align-content:center;gap:8px}
.tool-grid button:nth-child(2n){border-right:0}.tool-grid button:hover,.tool-grid button:focus-visible{background:var(--soft)}
.tool-grid b{font-family:var(--serif);font-size:clamp(22px,2vw,30px);font-weight:500}.tool-grid span{color:var(--muted);font-size:15px}.text-button{border:0;background:transparent;color:var(--accent);cursor:pointer;padding:10px}
.row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}.row-actions .text-button{font-size:13px}
.today-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.95fr);gap:24px;align-items:stretch}.today-primary{display:grid;grid-template-rows:1fr auto;min-width:0}.today-focus{min-height:610px;padding:clamp(38px,5vw,76px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-bottom:0}.today-focus h2{max-width:760px;margin:20px 0 28px;font:clamp(3rem,5.6vw,5.8rem)/.9 var(--serif);letter-spacing:-.045em}.today-focus>p{max-width:700px;color:var(--muted);font-size:clamp(18px,1.6vw,23px);line-height:1.65}.today-focus #todayDetails{width:100%;margin-top:26px}.today-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--panel)}.today-metrics>div{min-height:150px;padding:26px 24px;border-right:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;align-content:center;gap:10px 14px}.today-metrics>div:last-child{border-right:0}.today-metrics b{font:2rem/1 var(--serif)}.today-metrics span{color:var(--muted);line-height:1.45}.today-metrics small{display:block;margin-top:6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.today-context{height:100%;border-top:4px solid var(--accent);padding:clamp(30px,3.5vw,52px)}.today-context>h2{margin:24px 0;font:clamp(2rem,3vw,3.2rem)/1 var(--serif)}.today-context>p{color:var(--muted);font-size:18px;line-height:1.65}.today-context .context-picker{margin-top:30px}.today-context .toggle{grid-template-columns:18px 1fr auto;padding:20px 0}.today-context .toggle i{width:10px;height:10px;border-radius:50%;background:var(--good)}.today-context .toggle em{font-style:normal;color:var(--accent);font-size:13px}
@media(max-width:980px){.today-grid{grid-template-columns:1fr}.today-focus{min-height:500px}.today-context{min-height:0}.today-metrics{grid-template-columns:repeat(2,1fr)}.today-metrics>div:nth-child(2){border-right:0}.today-metrics>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:560px){.today-metrics{grid-template-columns:1fr}.today-metrics>div{min-height:108px;border-right:0;border-bottom:1px solid var(--line)}.today-metrics>div:last-child{border-bottom:0}}
.today-context .toggle i{background:transparent;border:1px solid var(--muted)}.today-context .toggle em{color:var(--muted)}.today-context .context-on i{background:var(--good);border-color:var(--good)}.today-context .context-on em{color:var(--good)}.today-context .context-off{opacity:.76}.today-context .context-locked{background:color-mix(in srgb,var(--soft) 55%,transparent);margin-inline:-14px;padding-inline:14px}.today-context .context-locked i{border-radius:2px;border-color:var(--accent)}.today-context .context-locked em{color:var(--accent);font-weight:750}
.today-metrics>div{grid-template-columns:1fr;grid-auto-rows:auto;justify-items:start;min-width:0;overflow:hidden}.today-metrics b{font-size:clamp(1.75rem,2.3vw,2.7rem);max-width:100%}.today-metrics span{min-width:0;max-width:100%;overflow-wrap:anywhere}.today-context .context-locked{margin:12px 0 0;padding:18px 16px;border:1px solid var(--accent);background:color-mix(in srgb,var(--soft) 62%,transparent)}.today-context .context-locked+.toggle{border-top:0}
@media(max-width:720px){.tool-grid{grid-template-columns:1fr}.tool-grid button{border-right:0;min-height:108px;padding:22px}}
.legal-table{display:grid;margin:20px 0;border:1px solid var(--line);overflow-x:auto}.legal-table>[role="row"]{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));border-top:1px solid var(--line)}.legal-table>[role="row"]:first-child{border-top:0}.legal-table span{padding:12px 14px;border-left:1px solid var(--line)}.legal-table span:first-child{border-left:0}.legal-table-head{font-weight:800;background:var(--soft)}

/* Compacte productdichtheid: meer bruikbare inhoud per scherm. */
@media(min-width:900px){
 body:not(.intake-page):not(.chart-page) .main{padding-top:20px;padding-bottom:44px}
 body:not(.intake-page):not(.chart-page) .pagehead{min-height:0;margin-bottom:16px;gap:30px;align-items:center}
 body:not(.intake-page):not(.chart-page) .pagehead h1{font-size:clamp(2.7rem,4.2vw,4.35rem);line-height:.94;margin-top:4px}
 body:not(.intake-page):not(.chart-page) .pagehead p{font-size:.9rem;line-height:1.42}
 .sectionhead{min-height:54px;padding:11px 18px}.surface.pad{padding:20px}
 .hero-card{min-height:260px;padding:32px 40px}.hero-card h2{font-size:clamp(2.35rem,4vw,4rem);margin:10px 0 14px}.hero-card p{line-height:1.5}
 .product-state{min-height:260px;padding:40px}.actions{margin-top:15px}
 .timeline{padding:8px 20px}.window{grid-template-columns:118px 12px 1fr auto;gap:15px;padding:16px 0}.scenario{padding:16px 20px}
 .life-grid{gap:14px}.editor{padding:22px}.editor textarea{min-height:220px;line-height:1.5}.event-list{padding-inline:20px}.event-row{padding:14px 0}
 .learn-hero>div{padding:28px 32px}.learn-hero h2{font-size:clamp(2.25rem,3.5vw,3.5rem);margin:8px 0}.learn-hero p{line-height:1.5}.progress strong{font-size:3.25rem;margin:14px 0 10px}
 .paths{gap:10px;margin:12px 0}.path{min-height:150px;padding:18px}.path h3{margin:18px 0 6px}.path footer{margin-top:12px}
 .reference{margin-top:12px}.reference-top{padding:18px 20px}.topic{min-height:140px;padding:18px}.topic h3{margin:18px 0 6px}.tool-grid button{min-height:100px;padding:20px}
 .today-grid{gap:16px}.today-focus{min-height:440px;padding:34px}.today-focus h2{margin:14px 0 18px;font-size:clamp(2.8rem,4.7vw,4.8rem)}.today-focus>p{font-size:18px;line-height:1.5}.today-focus #todayDetails{margin-top:18px}
 .today-metrics>div{min-height:108px;padding:16px 18px}.today-context{padding:26px}.today-context>h2{margin:16px 0;font-size:clamp(2rem,2.6vw,2.75rem)}.today-context>p{font-size:15px;line-height:1.5}.today-context .context-picker{margin-top:18px}.today-context .toggle{padding:13px 0}
 .context-picker{margin-top:16px}.toggle{padding:12px 0}.modal{max-height:calc(100vh - 24px)}.modalhead{padding:12px 20px}.modalbody{padding:22px}.modalbody h2{font-size:1.9rem;margin:6px 0 10px}
 .legal-page h1{font-size:clamp(2.8rem,4.5vw,4.3rem)}.legal-page h2{margin-top:28px;font-size:1.7rem}.legal-page p,.legal-page li{line-height:1.6}.site-footer{padding-block:18px}
}
.learning-overview{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.learning-overview meter{width:180px;height:10px}.path button{margin-top:14px}.path.is-done{border-top:3px solid var(--good)}.path.is-current{border-top:3px solid var(--accent)}.lesson-steps{display:grid;gap:1px;margin-top:16px;background:var(--line);border:1px solid var(--line)}.lesson-steps>div{background:var(--panel);padding:14px}.lesson-steps b{display:block;color:var(--accent);margin-bottom:4px}.learning-summary{margin-top:14px;padding:14px;border-left:3px solid var(--good);background:var(--soft)}

/* Iedere productpagina houdt ruimte vrij voor een consistente footer.
 * Drempel uitgelijnd op 951px -- hetzelfde punt waarop de zijbalk in
 * astrae_ultimate_product_mockup.reference.html verschijnt/verdwijnt (bijbel-
 * regel: onder 950px verdwijnt de zijbalk volledig, style.css regel 6). Onder
 * die drempel staat er geen vaste zijbalk meer om de pinned footer op af te
 * stemmen, dus krijgt de footer daar gewoon zijn normale, niet-vaste plek. */
@media(min-width:951px){
 .pagehead h1{font-size:clamp(2.35rem,3.2vw,3.25rem);line-height:.98;letter-spacing:-.035em}
 body.intake-page .pagehead h1{font-size:2.7rem}
 body.chart-page .pagehead h1{font-size:2.15rem}
 body.intake-page .site-footer,body.chart-page .site-footer{display:flex;position:fixed;left:var(--astrae-rail);right:0;bottom:0;z-index:24;height:42px;margin:0;padding:8px 28px;background:var(--paper)}
 body.intake-page .main{height:calc(100vh - 42px);padding-bottom:12px}
 body.chart-page .main{height:calc(100vh - 94px);padding-bottom:8px}
}
@media(max-width:950px){body.intake-page .site-footer{display:flex}}
.app{min-height:100vh;display:flex;flex-direction:column}.main{flex:1 0 auto}.site-footer{flex:0 0 auto}
.wheel .chart-field{fill:var(--panel)}

/* Definitief responsief raster ------------------------------------------------
 * .contextbar/.main/.site-footer krijgen HIER geen eigen width/margin-left meer:
 * ze zitten nu binnen .workspace (reference.html), dat zelf al margin-left:
 * var(--astrae-rail) krijgt zodra de zijbalk zichtbaar is. Een extra offset
 * hier zou dat verschuiven verdubbelen -- dat was de bug vóór deze wijziging. */
:root{--astrae-rail:224px;--astrae-footer:42px;--astrae-gap:clamp(12px,1.5vw,22px)}
html,body{max-width:100%;overflow-x:hidden}.app,.main,.surface,.grid,.today-grid,.life-grid,.learn-hero,.practice-layout{min-width:0}.main img,.main svg{max-width:100%}
.site-footer{min-height:var(--astrae-footer);padding:10px clamp(16px,3vw,36px);background:var(--paper)}
@media(min-width:951px) and (max-width:1200px){:root{--astrae-rail:196px}}
@media(min-width:951px){
 .main{padding-inline:clamp(26px,3.5vw,54px)}
 .pagehead{grid-template-columns:minmax(0,1fr) minmax(280px,42%);gap:clamp(24px,4vw,54px)}
 .pagehead h1{font-size:clamp(2.25rem,3vw,3.15rem)}
 .grid{grid-template-columns:minmax(0,1fr) clamp(290px,24vw,340px);gap:var(--astrae-gap)}
 .today-grid{grid-template-columns:minmax(0,1.55fr) minmax(290px,.85fr);gap:var(--astrae-gap)}
 .practice-layout{grid-template-columns:minmax(0,1fr) minmax(270px,310px);gap:var(--astrae-gap)}
 body.intake-page .main{height:calc(100dvh - var(--astrae-footer))}
 body.chart-page .main{height:calc(100dvh - 52px - var(--astrae-footer))}
 body.chart-page .chart-shell{height:calc(100% - 54px)}
 body.chart-page .chart-layout{grid-template-columns:minmax(0,1fr) clamp(270px,24vw,330px)}
 body.chart-page .chart-stage .wheel{width:min(54vh,78%,520px)}
}
@media(min-width:821px) and (max-width:950px){
 .main{padding:20px 24px 46px}.pagehead{grid-template-columns:minmax(0,1fr) minmax(250px,38%);gap:24px}
 .pagehead h1{font-size:clamp(2.2rem,4.5vw,3rem)}.grid{grid-template-columns:minmax(0,1fr) 290px}
 body.chart-page{height:auto;overflow:auto}body.chart-page .main{height:auto;overflow:visible}
 body.chart-page .chart-layout{height:auto;grid-template-columns:minmax(0,1fr) 280px}
 body.chart-page .chart-stage{min-height:500px}body.chart-page .chart-stage .wheel{width:min(440px,82%)}
 body.chart-page .chart-panel{height:auto;overflow:visible}
 body.intake-page{height:auto;overflow:auto}body.intake-page .app,body.intake-page .main{height:auto}
 body.intake-page .site-footer,body.chart-page .site-footer{position:static;width:100%;margin:0}
}
@media(max-width:820px){
 :root{--astrae-footer:auto}.main{padding:18px 16px 88px}.pagehead{display:block;margin-bottom:14px}.pagehead h1{font-size:clamp(2.15rem,10vw,3.2rem);white-space:normal}.pagehead p{margin-top:10px;line-height:1.45}
 .grid,.today-grid,.life-grid,.learn-hero,.practice-layout{grid-template-columns:1fr}.surface.pad{padding:18px}
 .chart-layout{height:auto;grid-template-columns:1fr}.chart-stage{min-height:0;padding:14px 10px 42px}.chart-stage .wheel{width:min(88vw,460px)}.chart-panel{height:auto;overflow:visible;border-left:0;border-top:1px solid var(--line)}
 .chart-meta{position:static;padding:10px 4px 0;display:grid;gap:3px}.chart-summary{display:none}
 .today-focus{min-height:0;padding:26px 20px}.today-focus h2{font-size:clamp(2.5rem,11vw,4rem);margin:12px 0 16px}.today-context{padding:22px 18px}
 .paths{grid-template-columns:1fr}.topics{grid-template-columns:repeat(2,1fr)}.topic:nth-child(odd){border-right:1px solid var(--line)}.topic:nth-child(even){border-right:0}
 .site-footer{width:100%;margin:0;position:static;height:auto;flex-direction:column;align-items:flex-start;padding-bottom:88px}
}
@media(max-width:520px){
 .main{padding-inline:12px}.pagehead h1{font-size:clamp(2rem,12vw,2.8rem)}.sectionhead{align-items:flex-start;gap:6px;flex-direction:column}
 .live-form-row,.answer-options,.topics,.today-metrics,.metrics,.tool-grid{grid-template-columns:1fr}.topic{border-right:0}.metric,.today-metrics>div{border-right:0;border-bottom:1px solid var(--line)}
 .modalback{padding:8px}.modal{width:100%;max-height:calc(100dvh - 16px)}.modalbody{padding:16px}.modalbody h2{font-size:1.65rem}.actions{display:grid}.actions>*{width:100%}
 .event-row{grid-template-columns:62px minmax(0,1fr);gap:10px}.event-row>span{grid-column:2}.window{grid-template-columns:1fr}.window .pin{display:none}
}
@media(max-width:420px){.chart-legend-card .legend{display:grid;grid-template-columns:1fr 1fr 1fr}.chart-next-actions{grid-template-columns:1fr}}
@media(max-height:720px) and (min-width:951px){
 .main{padding-top:12px}.pagehead{margin-bottom:10px}.pagehead h1{font-size:2.2rem}.pagehead p{font-size:.82rem}
 body.chart-page .chart-stage .wheel{width:min(48vh,72%,430px)}.today-focus{min-height:360px;padding:24px}.today-metrics>div{min-height:86px}
}

/* Astrocartografie: dezelfde equirectangulaire wereldkaart als de zes andere
 * talen (eiland.js), hier in de eigen tokens van de Nederlandse mockup. MC/IC
 * (de verticale as) krijgen --accent, AC/DC (de horizontale as) --accent2 --
 * zo dragen de twee assen elk hun eigen kleur in plaats van vier lijnen in
 * twee schakeringen van dezelfde tint. */
.wereldkaart{width:100%;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.wereldkaart svg{display:block;width:100%;height:auto}
.acg-lijn{fill:none;stroke-width:.6;vector-effect:non-scaling-stroke}
.acg-MC{stroke:var(--accent)}
.acg-IC{stroke:var(--accent);stroke-dasharray:2 2}
.acg-AC{stroke:var(--accent2)}
.acg-DC{stroke:var(--accent2);stroke-dasharray:2 2}
.acg-legenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:12px;color:var(--muted)}
.acg-legenda span{display:inline-flex;align-items:center;gap:6px}
.acg-legenda i{width:22px;height:0;border-top:2px solid var(--accent);display:inline-block}
.acg-legenda .IC{border-top-style:dashed}
.acg-legenda .AC{border-color:var(--accent2)}
.acg-legenda .DC{border-top-style:dashed;border-color:var(--accent2)}

/* Eén primaire actiecode op landing en product. */
:root:not([data-theme=dark]) .primary{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root:not([data-theme=dark]) .primary:hover{background:var(--soft);border-color:var(--line)}
:root[data-theme=dark] .primary{background:var(--accent);color:var(--paper);border-color:var(--accent)}
:root[data-theme=dark] .primary:hover{filter:brightness(1.06)}

/* Bijbelstructuur: de "vandaag"-hero wordt een donker paneel met een tweekoloms
 * bovenkant (tekst | visueel) en de bestaande .today-metrics als statenstrook
 * eronder -- zie work/designbijbel-2026/app.js, functie today(), de klasse
 * .daily en de omringende .panel.dark/.stat-strip. .today-focus/.today-metrics
 * bestonden al (regels 106-110 hierboven) en behouden hun data/gedrag; alleen
 * kleur en de nieuwe .daily-tweedeling zijn hier toegevoegd. Deze regels staan
 * bewust als laatste in dit bestand, zodat ze de var(--line)-scheidingskleur
 * uit eerdere media-queries (regels 107/108/196) overschrijven ongeacht
 * schermbreedte, zonder elke losse breekpunt-regel te moeten opzoeken. */
.today-focus{background:var(--sidebar-bg);color:#fff;border-radius:3px 3px 0 0}
.today-focus .eyebrow{color:var(--gold)}
.today-focus>p{color:#c7d2de}
.today-focus .daily{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;width:100%}
.today-glyphs{display:flex;align-items:center;gap:10px;font:3rem var(--serif);color:var(--gold);white-space:nowrap}
.today-metrics{background:var(--sidebar-bg);border-color:#ffffff26;border-radius:0 0 3px 3px}
.today-metrics>div{border-color:#ffffff26}
.today-metrics b{color:#fff}
.today-metrics span{color:#c7d2de}
.today-metrics small{color:var(--gold)}
@media(max-width:760px){.today-focus .daily{grid-template-columns:1fr}.today-glyphs{display:none}}

/* De tien "onder kaart"-verdiepingsroutes (7 september 2026): drie vaste
 * toelichtingskaarten onder de resultatenlijst, op elk van de tien identiek
 * qua vorm -- alleen de tekst verschilt (mockup-live-adapter.js, KAART_UITLEG).
 * Bouwt uitsluitend op .surface/.pad, die al bestaan; alleen het rooster en de
 * eigen typografie zijn nieuw. Drempels op dezelfde 820px/520px als .paths/
 * .topics hierboven, voor dezelfde reden: bij twee kolommen blijft een kaart
 * met drie zinnen leesbaar, bij één kolom op mobiel ook. */
.explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.explain-grid .explain-card h3{font:1.1rem var(--serif);margin:0 0 8px}
.explain-grid .explain-card p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.6}
@media(max-width:820px){.explain-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.explain-grid{grid-template-columns:1fr}}

}