/* UITLEG-BESTAND
Onderdeel van de MCP-/portaladapter: portal. Verbindt de gebruikersingang met de bestaande beveiligde platformcontracten.
Alle selectors en waarden blijven ongewijzigd. Het gekoppelde codeoverzicht verklaart eigenschappen en herbruikbare stijlvariabelen.
--purple: Herbruikbare stijlwaarde voor purple; begint met #512d72 en wordt via var(--purple) toegepast
--deep: Herbruikbare stijlwaarde voor deep; begint met #30124c en wordt via var(--deep) toegepast
--lavender: Herbruikbare stijlwaarde voor lavender; begint met #f5f0f9 en wordt via var(--lavender) toegepast
--green: Herbruikbare stijlwaarde voor green; begint met #cfe1b9 en wordt via var(--green) toegepast
--green-ink: Herbruikbare stijlwaarde voor green ink; begint met #3a4a2c en wordt via var(--green-ink) toegepast
--teal: Herbruikbare stijlwaarde voor teal; begint met var(--purple) en wordt via var(--teal) toegepast
--ink: Herbruikbare stijlwaarde voor ink; begint met #32263f en wordt via var(--ink) toegepast
--muted: Herbruikbare stijlwaarde voor muted; begint met #716279 en wordt via var(--muted) toegepast
--line: Herbruikbare stijlwaarde voor line; begint met #e3dce9 en wordt via var(--line) toegepast
--paper: Herbruikbare stijlwaarde voor paper; begint met #fff en wordt via var(--paper) toegepast
--soft: Herbruikbare stijlwaarde voor soft; begint met #f5f0f9 en wordt via var(--soft) toegepast
--red: Herbruikbare stijlwaarde voor red; begint met #9d2d42 en wordt via var(--red) toegepast
--radius: Herbruikbare stijlwaarde voor radius; begint met 18px en wordt via var(--radius) toegepast
--shadow: Herbruikbare stijlwaarde voor shadow; begint met 0 8px 32px #30124c06 en wordt via var(--shadow) toegepast
--visual-color: Herbruikbare stijlwaarde voor visual color; begint met var(--purple) en wordt via var(--visual-color) toegepast
--visual-soft: Herbruikbare stijlwaarde voor visual soft; begint met #e3d4ed en wordt via var(--visual-soft) toegepast
--visual-bar: Herbruikbare stijlwaarde voor visual bar; begint met #8b63af en wordt via var(--visual-bar) toegepast
--point-radius: Herbruikbare stijlwaarde voor point radius; begint met 4px en wordt via var(--point-radius) toegepast
--visual-color: Herbruikbare stijlwaarde voor visual color; begint met #176b73 en wordt via var(--visual-color) toegepast
--visual-soft: Herbruikbare stijlwaarde voor visual soft; begint met #d6e9e8 en wordt via var(--visual-soft) toegepast
--visual-bar: Herbruikbare stijlwaarde voor visual bar; begint met #267e87 en wordt via var(--visual-bar) toegepast
--visual-color: Herbruikbare stijlwaarde voor visual color; begint met #202630 en wordt via var(--visual-color) toegepast
--visual-soft: Herbruikbare stijlwaarde voor visual soft; begint met #e0e3e7 en wordt via var(--visual-soft) toegepast
--visual-bar: Herbruikbare stijlwaarde voor visual bar; begint met #434d5c en wordt via var(--visual-bar) toegepast
--visual-negative: Herbruikbare stijlwaarde voor visual negative; begint met #68717c en wordt via var(--visual-negative) toegepast
UITLEG-EINDE */
/* SpecialistenNet: local brand assets, accessible controls, no external requests. */
:root {
  font-family: system-ui, 'Segoe UI', system-ui, sans-serif; color: #32263f; background: #f9f7fb; font-synthesis: none;
  --purple: #512d72; --deep: #30124c; --lavender: #f5f0f9; --green: #cfe1b9; --green-ink: #3a4a2c;
  --teal: var(--purple); --ink: #32263f; --muted: #716279; --line: #e3dce9; --paper: #fff; --soft: #f5f0f9; --red: #9d2d42;
  --radius: 18px; --shadow: 0 8px 32px #30124c06;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button[aria-busy=true] { cursor: wait; }
[hidden] { display: none !important; }
a { color: var(--purple); text-underline-offset: 4px; }
:focus-visible { outline: 3px solid #7c46af; outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: system-ui, 'Arial Narrow', sans-serif; font-size: clamp(38px, 3.7vw, 54px); line-height: 1.06; font-weight: 700; letter-spacing: -.5px; margin-bottom: 16px; color: var(--deep); }
h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.4px; font-weight: 600; }
h3 { font-size: 18px; line-height: 1.4; font-weight: 600; }
p { line-height: 1.65; }
small, .muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: fixed; left: 16px; top: 10px; background: white; padding: 14px; z-index: 100; clip-path: inset(100%); }
.skip:focus { clip-path: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--deep); color: #f5f0f9; padding: 36px 22px 24px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: block; color: white; text-decoration: none; }
.brand img { width: 205px; max-width: 100%; height: 43px; object-fit: contain; object-position: left; }
.brand small { display: block; color: #dfcee9; font-size: 12px; margin-top: 12px; letter-spacing: 1px; }
.nav-label { font-size: 10px; letter-spacing: 1.8px; color: #ceb7df; margin: 50px 16px 16px; font-weight: 600; }
nav { display: grid; gap: 8px; }
nav a { display: flex; gap: 12px; align-items: center; color: #ebdff3; text-decoration: none; border-radius: 30px; padding: 14px 16px; font-size: 15px; font-weight: 600; }
nav a:hover { background: #ffffff0f; }
nav a.active { background: var(--green); color: var(--green-ink); }
.sidebar-note { margin-top: auto; border-top: 1px solid #624779; padding: 24px 12px 0; font-size: 13px; line-height: 1.6; }
.sidebar-note p { color: #d4c1e2; margin: 12px 0; }
.sidebar-note a { color: #f5f0f9; }
/* These links sit on the dark sidebar, not on the light content background.
   Keep their text, keyboard focus and touch targets clear in both layouts. */
.gov-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; padding: 0 8px; font-size: 13px; line-height: 1.5; }
.gov-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; color: var(--lavender); }
.gov-links a:focus-visible { outline-color: var(--green); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; }
.mobile-menu { display: none !important; }
.workspace { min-width: 0; }
.topbar { min-height: 88px; background: white; display: flex; justify-content: space-between; align-items: center; padding: 18px 36px; gap: 20px; border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: 13px; color: var(--muted); }
.account { display: flex; align-items: center; gap: 18px; font-size: 13px; }
.account #identity { display: flex; gap: 8px; align-items: center; }
main { padding: 32px 36px 40px; max-width: 1560px; margin: auto; min-height: 75vh; }
#main:focus { outline: none; }
footer { padding: 22px 36px; border-top: 1px solid var(--line); display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.button { border: 1px solid transparent; border-radius: 28px; padding: 11px 20px; font-weight: 600; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; transition: background .15s, box-shadow .15s; }
.primary { background: var(--purple); color: white; }
.primary:hover { background: var(--deep); box-shadow: 0 3px 12px #512d7220; }
.secondary { background: white; border-color: #d8c9e3; color: var(--purple); }
.secondary:hover { background: var(--lavender); }
.danger { background: #fff2f3; border-color: #ebc2c8; color: #992c42; }
.text-button { background: none; border: 0; padding: 5px; color: var(--purple); text-decoration: underline; min-height: 30px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.7px; color: var(--purple); font-weight: 600; margin-bottom: 13px; }
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; background: var(--purple); color: white; border-radius: 28px 70px 28px 28px; padding: 38px; margin-bottom: 30px; overflow: hidden; position: relative; }
.hero h1 { color: white; font-size: clamp(42px, 4.4vw, 62px); max-width: 530px; }
.hero p { color: #e9def0; max-width: 580px; font-size: 16px; }
.hero .eyebrow { color: var(--green); font-size: 10px; }
.hero .primary { background: var(--green); color: var(--green-ink); }
.hero .primary:hover { background: #dfedce; }
.hero .secondary { background: transparent; border-color: #c6acd9; color: white; }
.hero-aside { padding: 26px; display: grid; align-content: center; gap: 18px; border-radius: 60px 18px 42px 18px; background: #3d1d59; }
.hero-aside h2 { color: var(--green); font-size: 16px; margin-bottom: 4px; }
.hero-step { display: flex; align-items: center; gap: 13px; font-size: 14px; line-height: 1.5; }
.step-number { border: 1px solid #9274a9; border-radius: 50%; height: 32px; min-width: 32px; display: grid; place-items: center; color: var(--green); font-size: 13px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; margin-bottom: 26px; }
.page-head p { color: var(--muted); max-width: 740px; margin-bottom: 0; }
.page-head .eyebrow { color: var(--purple); margin-bottom: 12px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 25px; min-width: 0; box-shadow: var(--shadow); }
.card p { font-size: 14px; color: var(--muted); }
.card .button { margin-top: 8px; }
.card-num { font-size: 10px; letter-spacing: 1.3px; color: var(--muted); display: block; margin: 18px 0 12px; font-weight: 600; }
.card-icon { width: 43px; height: 43px; border-radius: 14px; background: var(--lavender); color: var(--purple); display: grid; place-items: center; }
.cards .card:nth-child(2) .card-icon { background: #eef5e7; color: var(--green-ink); }
.cards .card:nth-child(3) .card-icon { background: #fbefec; color: #805141; }
.plain-language { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 28px 0 4px; padding: 24px; border: 1px solid #dce6d1; border-radius: 18px; background: #f7f9f3; }
.plain-language h2 { margin: 0 0 6px; font-size: 21px; }
.plain-language p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 760px; }
.card.action-card { display: flex; flex-direction: column; align-items: flex-start; }
.action-card .button { margin-top: auto; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 32px 0 17px; }
.section-title h2 { margin: 0; font-size: 22px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.search { width: 100%; background: white; border: 1px solid #d8c9e3; border-radius: 14px; padding: 15px 18px; font-size: 15px; min-height: 48px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 30px; padding: 6px 11px; font-size: 12px; background: #eaf2e2; color: var(--green-ink); font-weight: 600; }
.pill.warn { background: #fff1d8; color: #79470b; }
.pill.error { background: #fae8ec; color: #942c42; }
.pill.neutral { background: var(--lavender); color: #6b527d; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin: 22px 0; }
.metric { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-width: 0; }
.metric-label { font-size: 13px; color: var(--muted); margin-bottom: 12px; overflow-wrap: anywhere; }
.metric-value { font-size: 32px; letter-spacing: -.6px; font-weight: 600; color: var(--purple); overflow-wrap: anywhere; }
.metric .button { display: block; margin-top: 12px; font-size: 12px; padding: 8px 12px; }
.result-highlights { padding: 22px; background: var(--lavender); border-radius: 18px; margin-bottom: 22px; }
.result-highlights h2 { margin-bottom: 0; }
.result-highlights .metric { border: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
.two-col > aside { position: sticky; top: 24px; }
.stack { display: grid; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 18px; font-size: 14px; font-weight: 600; }
.field small { font-weight: 400; line-height: 1.5; font-size: 12px; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 12px; min-height: 44px; border: 1px solid #b9a9c5; border-radius: 9px; color: var(--ink); background: white; font-weight: 400; }
.field textarea { min-height: 140px; resize: vertical; font-family: ui-monospace, monospace; font-size: 12px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.filter-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; align-items: start; gap: 10px; margin-bottom: 14px; padding: 16px; border-radius: 12px; background: var(--lavender); }
.filter-row .field { margin: 0; }
.filter-row > .button { margin-top: 25px; padding: 10px 13px; }
.period-picker { background: #f7f9f3; border: 1px solid #dce6d1; border-radius: 14px; padding: 18px; margin: 16px 0; }
.period-picker h3 { margin-bottom: 8px; }
.period-picker > p { font-size: 13px; }
.form-section { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 10px; }
.form-actions { position: static; margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 6px 26px #30124c15; z-index: 2; }
.plan-summary { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.plan-summary strong { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.notice { border: 1px solid #d8e5c9; background: #f1f7e9; padding: 15px 18px; border-radius: 12px; margin-bottom: 22px; line-height: 1.6; font-size: 14px; overflow-wrap: anywhere; }
.recipient { overflow-wrap: anywhere; }
.notice.error { border-color: #ebc2c8; background: #fff2f3; color: #8c2940; }
.notice.warn { border-color: #e8d4ad; background: #fff8e9; color: #744909; }
.notice.info { border-color: #ded0e9; background: var(--lavender); color: var(--purple); }
.empty { text-align: center; padding: 44px 24px; border: 1px dashed #d2c1df; border-radius: 18px; background: white; }
.empty p { color: var(--muted); max-width: 570px; margin: 12px auto 20px; }
.empty h2 { font-size: 23px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; max-height: 650px; background: white; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { position: sticky; top: 0; background: var(--lavender); font-weight: 600; white-space: nowrap; z-index: 1; }
th, td { padding: 14px; text-align: left; border-bottom: 1px solid var(--line); max-width: 420px; overflow-wrap: anywhere; }
td { vertical-align: top; }
tbody tr:nth-child(even) { background: #fdfbfe; }
tbody tr:hover { background: #f4eff8; }
td button, th .button { font-size: 13px; }
caption { text-align: left; font-size: 13px; padding: 14px; color: var(--muted); }
.tabs { display: flex; gap: 7px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.tab { background: transparent; border: 0; padding: 11px 16px; min-height: 44px; border-radius: 24px; color: var(--muted); font-size: 14px; font-weight: 600; }
.tab.active { background: var(--purple); color: white; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 560px; overflow: auto; border: 1px solid var(--line); background: #f8f5fa; padding: 18px; border-radius: 12px; font-size: 12px; line-height: 1.7; }
code { font-family: ui-monospace, monospace; font-size: .88em; overflow-wrap: anywhere; }
details { border: 1px solid var(--line); background: white; border-radius: 12px; padding: 17px; margin: 14px 0; }
summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--purple); }
.progress-line { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; }
.progress-step { border-top: 3px solid #d6c9e1; padding: 15px 8px; font-size: 13px; color: var(--muted); }
.progress-step.current { border-color: var(--purple); color: var(--purple); font-weight: 600; }
.progress-step.done { border-color: #95b778; }
.bar-chart { display: grid; gap: 14px; margin: 20px 0; }
.bar-row { display: grid; grid-template-columns: minmax(100px, 160px) 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.bar-track { height: 18px; background: #eee6f4; border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: #8b63af; border-radius: 5px; }
.bar-track.signed { position: relative; background: linear-gradient(to right, #eee6f4 49.8%, #6a537c 49.8%, #6a537c 50.2%, #eee6f4 50.2%); }
.bar-track.signed .bar-fill { position: absolute; }
.bar-fill.negative { background: #b7667c; }
.visual-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fdfbfe; }
.visual-output { min-height: 90px; margin: 18px 0 26px; }
.chart-svg { display: block; width: 100%; max-height: 420px; overflow: visible; }
.chart-axis { stroke: #8c7a98; stroke-width: 1.2; }
.chart-line { fill: none; stroke: var(--purple); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { fill: var(--purple); stroke: white; stroke-width: 1.5; }
.chart-column { fill: #8b63af; }
.chart-column.negative { fill: #b7667c; }
.chart-label { fill: var(--muted); font-size: 11px; font-family: inherit; }
.science-box { fill: #d9c5e7; stroke: var(--purple); stroke-width: 2; }
.science-median { stroke: var(--deep); stroke-width: 3; }
.forecast-band { fill: #cdb6e2; opacity: .45; }
.forecast-line { fill: none; stroke: #b7667c; stroke-width: 3; stroke-dasharray: 8 5; stroke-linecap: round; }
.science-figure { margin: 18px 0 28px; }
.science-figure figcaption { color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: 10px; }
.science-result { margin-top: 22px; background: #fdfbfe; }
.science-result:empty { display: none; }
.science-result .metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.science-result .metric-value { font-size: 28px; font-variant-numeric: tabular-nums; }
.science-result .metric { padding: 18px; }
.science-lab { border-color: #cdb6e2; }
.science-lab > h2 { font-size: 28px; letter-spacing: -.5px; }
.science-guide { border-left: 4px solid var(--purple); margin: 20px 0 24px; }
.science-guide strong { font-size: 17px; line-height: 1.5; }
.science-visual-workspace { --visual-color: var(--purple); --visual-soft: #e3d4ed; --visual-bar: #8b63af; --point-radius: 4px; margin: 24px 0; min-width: 0; }
.science-visual-workspace[data-palette=teal] { --visual-color: #176b73; --visual-soft: #d6e9e8; --visual-bar: #267e87; }
.science-visual-workspace[data-palette=mono] { --visual-color: #202630; --visual-soft: #e0e3e7; --visual-bar: #434d5c; --visual-negative: #68717c; }
.visual-heading { display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.visual-heading h3 { margin: 0; font-size: 22px; color: var(--deep); letter-spacing: -.3px; }
.visual-heading .eyebrow { margin: 0 0 8px; }
.visual-heading > p { margin: 0; max-width: 290px; font-size: 12px; line-height: 1.6; }
.visual-choice-cards { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0; }
.visual-choice-card { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 48px; border: 1px solid #d8c9e3; border-radius: 12px; background: white; color: var(--purple); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.visual-choice-card:hover { background: var(--lavender); border-color: #a587ba; }
.visual-choice-card.active { background: var(--purple); border-color: var(--purple); color: white; box-shadow: 0 3px 10px #512d721c; }
.visual-choice-card .icon { width: 19px; height: 19px; flex: none; }
.science-visual-workspace .visual-controls { background: white; margin-bottom: 10px; border-color: #e4d9ec; }
.science-visual-workspace .visual-controls .field { margin: 0; }
.visual-grid-control { margin: 0; border: 0; background: transparent; align-self: center; padding: 10px 0; }
.science-visual-canvas { padding: 20px 16px; border: 1px solid #e6deec; border-radius: 16px; background: white; min-width: 0; overflow-x: auto; }
.chart-scroll-hint { display: none; }
.science-visual-canvas .chart-svg { min-width: 520px; max-height: none; }
.science-visual-canvas .science-figure { margin: 8px 0 18px; }
.science-visual-canvas .chart-line { stroke: var(--visual-color); }
.science-visual-canvas .chart-point { fill: var(--visual-color); r: var(--point-radius); }
.science-visual-canvas .chart-column, .science-visual-canvas .bar-fill { fill: var(--visual-bar); background: var(--visual-bar); }
.science-visual-canvas .chart-column.negative, .science-visual-canvas .bar-fill.negative { fill: var(--visual-negative, #b7667c); background: var(--visual-negative, #b7667c); }
.science-visual-canvas .science-box { stroke: var(--visual-color); fill: var(--visual-soft); }
.science-visual-canvas .science-median { stroke: var(--visual-color); }
.science-visual-canvas .forecast-band { fill: var(--visual-soft); opacity: .9; }
.science-visual-canvas .forecast-line { stroke: var(--visual-color); }
.science-visual-canvas .bar-track { background: #efedf1; }
.science-visual-canvas .bar-track.signed { background: linear-gradient(to right, #efedf1 49.8%, #6a537c 49.8%, #6a537c 50.2%, #efedf1 50.2%); }
.chart-grid { stroke: #e7e2eb; stroke-width: 1; stroke-dasharray: 3 4; }
.no-chart-grid .chart-grid { display: none; }
@media (max-width: 760px) { .visual-heading { display: block; } .visual-heading > p { max-width: none; margin-top: 10px; } .visual-choice-card { flex: 1 1 160px; } .science-visual-canvas { padding: 14px 10px; } .science-visual-workspace .visual-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; } }
@media (max-width: 420px) { .science-visual-workspace .visual-controls { grid-template-columns: 1fr; } .visual-choice-card { flex-basis: 100%; } .science-result { padding: 14px; } .science-visual-canvas .bar-row { grid-template-columns: minmax(60px, 1fr) minmax(45px, 1fr) auto; gap: 8px; } }
@media (max-width: 640px) { .chart-scroll-hint:not([hidden]) { display: block; font-size: 12px; color: var(--purple); line-height: 1.6; } }
.dataset-overview { border-left: 5px solid var(--purple); }
.check-field { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--lavender); line-height: 1.5; font-size: 14px; cursor: pointer; margin-bottom: 18px; }
.check-field input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--purple); }
.donut-layout { display: grid; grid-template-columns: minmax(190px, 280px) minmax(220px, 1fr); gap: 28px; align-items: center; }
.donut-svg { display: block; width: 100%; max-width: 280px; }
.chart-legend { display: grid; gap: 9px; }
.chart-legend > div { display: grid; grid-template-columns: 14px minmax(90px, 1fr) auto; gap: 9px; align-items: center; font-size: 13px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; }
.metric-explanation { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.definition-row { display: grid; grid-template-columns: 175px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.65; }
.definition-row strong { font-weight: 600; color: var(--purple); }
.flow { display: grid; gap: 0; padding: 8px 0; }
.flow-node { border: 1px solid var(--line); background: white; border-radius: 12px; padding: 18px; font-size: 15px; }
.flow-node small { display: block; margin-top: 8px; line-height: 1.6; }
.flow-connector { height: 24px; border-left: 2px solid #cdb6e2; margin-left: 27px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 17px 0; }
dialog { border: 1px solid var(--line); border-radius: 22px; padding: 28px; max-width: min(860px, 94vw); width: 100%; max-height: 90vh; color: var(--ink); box-shadow: 0 24px 100px #30124c30; }
dialog::backdrop { background: #30124c80; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
dialog h2 { font-size: 25px; }
.code-editor { min-height: 330px !important; }
.link-list { display: grid; gap: 12px; }
.tool-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; background: white; border: 1px solid var(--line); padding: 22px; border-radius: 16px; box-shadow: var(--shadow); }
.tool-row h3 { margin-bottom: 7px; color: var(--deep); }
.tool-row p { margin-bottom: 0; max-width: 850px; font-size: 14px; color: var(--muted); }
.tool-row code { font-size: 11px; color: var(--muted); display: block; margin: 8px 0; }
.tool-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.favorite-button { min-width: 44px; padding: 10px; }
.favorite-button[aria-pressed=true] { background: var(--green); color: var(--green-ink); border-color: #bed4a6; }
.key-value { font-size: 14px; color: var(--muted); line-height: 1.8; }
.chart-note { font-size: 13px; color: var(--muted); }
.choice-list { border: 1px solid #b9a9c5; border-radius: 10px; padding: 10px; background: white; }
.choice-list > input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 7px; font-weight: 400; font-size: 13px; }
.choice-list > small { display: block; margin: 8px 0; font-size: 12px; }
.choice-options { max-height: 190px; overflow-y: auto; display: grid; gap: 3px; }
.choice-option { display: flex; align-items: flex-start; gap: 9px; padding: 7px 4px; font-size: 14px; cursor: pointer; line-height: 1.45; }
.choice-option input { width: 17px; height: 17px; min-height: 17px; flex: none; margin: 2px 0 0; accent-color: var(--purple); }
.choice-option:has(input:checked) { background: var(--lavender); border-radius: 5px; }
@media (min-width: 1700px) { main { padding-top: 42px; } .hero { padding: 48px; } .card { padding: 28px; } }
@media (max-width: 1150px) { .app-shell { grid-template-columns: 218px minmax(0, 1fr); } .sidebar { padding: 28px 16px; } main { padding: 28px 24px; } .topbar { padding: 18px 24px; } .hero { gap: 24px; padding: 28px; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-col { grid-template-columns: 1fr; } .two-col > aside { position: static; } footer { padding: 22px 24px; } }
@media (max-width: 760px) { .plain-language { grid-template-columns: auto 1fr; } .plain-language .button { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 760px) {
  /* Long Dutch page titles (for example Documentmigratie) must remain
     readable inside a phone viewport without creating horizontal scrolling. */
  .page-head h1 { font-size: clamp(26px, 8vw, 36px); overflow-wrap: anywhere; }
  .gov-links { grid-column: 1 / -1; margin-top: 8px; padding: 0; }
  .app-shell { display: block; } .sidebar { height: auto; position: static; padding: 19px 20px; display: grid; grid-template-columns: 1fr auto; gap: 0 15px; }
  .brand img { width: 176px; height: 36px; } .brand small { font-size: 10px; margin-top: 6px; } .mobile-menu { display: inline-flex !important; align-self: center; background: #ffffff12; border-color: #9d80b3; color: white; }
  .nav-label, .sidebar-note { display: none; } nav { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding-top: 18px; display: none; } nav.open { display: grid; } nav a { padding: 12px; font-size: 14px; }
  .topbar { min-height: 65px; padding: 12px 20px; } .breadcrumb { display: none; } .account { width: 100%; justify-content: space-between; gap: 8px; } .account #identity { max-width: 125px; overflow: hidden; text-overflow: ellipsis; }
  .topbar-help { display: none; } main { padding: 22px 18px; } .hero { display: block; padding: 27px; border-radius: 24px 48px 24px 24px; } .hero h1 { font-size: 47px; } .hero-aside { padding: 23px; margin-top: 24px; border-radius: 30px 12px; }
  .cards, .fields { grid-template-columns: 1fr; } .page-head { display: block; } .page-head > .button { margin-top: 18px; } .filter-row { grid-template-columns: 1fr 1fr; padding: 13px; } .filter-row > :first-child { grid-column: 1 / -1; } .filter-row > .button { margin-top: 0; }
  .definition-row { grid-template-columns: 1fr; gap: 5px; } .tool-row { align-items: flex-start; flex-direction: column; padding: 20px; } .tool-actions { width: 100%; justify-content: space-between; } .tool-row .toolbar { margin: 0; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric { padding: 16px; } .metric-value { font-size: 28px; } .progress-step { font-size: 12px; padding: 12px 4px; } .bar-row { grid-template-columns: minmax(75px, 100px) 1fr auto; }
  .donut-layout { grid-template-columns: 1fr; } .donut-svg { margin: 0 auto; }
  footer { padding: 20px; font-size: 11px; } .form-actions { position: static; box-shadow: none; } .card { padding: 21px; } .section-title { align-items: flex-start; } .section-title .button { padding: 9px 13px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .sidebar, .topbar, footer, .toolbar, .tabs, .button { display: none !important; } .app-shell { display: block; } main { padding: 0; } .table-wrap { max-height: none; overflow: visible; } th { position: static; } }

/* Login is the initial document state, including when scripts are unavailable. */
[hidden] { display: none !important; }
#protected-workspace[inert] { display: none !important; }
.login-page, .mapping-page .login-page { min-height: 100svh; max-width: none; margin: 0; padding: 42px; display: grid; place-items: center; background: #f5f0f9; }
.login-wrap { width: min(1150px, 100%); display: grid; grid-template-columns: 1.05fr 1fr; background: white; border-radius: 28px 76px 28px 28px; overflow: hidden; box-shadow: 0 25px 75px #30124c12; border: 1px solid var(--line); }
.login-intro, .mapping-page .login-intro { background: var(--deep); color: white; border: 0; margin: 0; border-radius: 0 65px 65px 0; padding: 52px; display: flex; flex-direction: column; }
.login-intro img { max-width: 100%; height: auto; align-self: flex-start; }
.login-intro .eyebrow { color: var(--green); margin-top: 62px; }
.login-intro h1 { color: white; font-size: clamp(48px, 5vw, 68px); margin: 0 0 22px; line-height: 1.06; }
.login-intro .login-lead { color: #e1d3eb; font-size: 19px; line-height: 1.65; }
.login-benefits { margin: 24px 0 48px; }
.login-benefits p { display: flex; align-items: center; gap: 16px; font-size: 14px; color: #f2eaf7; line-height: 1.5; }
.login-benefits span { background: #512d72; color: var(--green); padding: 8px; border-radius: 50%; font-size: 11px; flex: none; }
.login-intro > small { margin-top: auto; color: #c4b0d5; font-size: 12px; }
.login-card, .mapping-page .login-card { border: 0; margin: 0; box-shadow: none; border-radius: 0; padding: 65px 52px 48px; align-self: center; }
.login-mark { display: inline-flex; padding: 12px 18px; border-radius: 14px 25px 14px 14px; color: var(--purple); background: var(--lavender); font-weight: 600; font-size: 15px; margin-bottom: 27px; }
.login-card h2 { font-family: system-ui, 'Arial Narrow', sans-serif; color: var(--deep); font-size: 42px; margin: 10px 0 14px; }
.login-card > p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.login-card .login-button { width: 100%; justify-content: center; margin: 14px 0 6px; min-height: 52px; display: inline-flex; gap: 12px; align-items: center; }
.microsoft-mark { width: 20px; height: 20px; background: white; padding: 2px; border-radius: 3px; flex: none; }
.login-card .login-status { font-size: 13px; min-height: 42px; margin: 10px 0; }
.login-status.error { color: #943a4b; }
.login-card #login-retry { font-size: 13px; background: transparent; color: var(--purple); padding: 0; border: 0; margin: 0; }
.login-assurance { padding: 22px 0 4px; margin-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.login-assurance strong { color: var(--purple); }
.login-assurance p { color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 10px; }
.login-card details { padding: 13px 15px; }
.login-card details p { font-size: 13px; line-height: 1.7; margin: 14px 0 0; }
@media (max-width: 900px) { .login-page, .mapping-page .login-page { padding: 24px; } .login-intro { padding: 36px; } .login-card, .mapping-page .login-card { padding: 38px 30px; } }
@media (max-width: 650px) {
 .login-page, .mapping-page .login-page { padding: 18px; align-items: start; }
 .login-wrap { grid-template-columns: 1fr; border-radius: 20px 44px 20px 20px; }
 .login-intro, .mapping-page .login-intro { border-radius: 0 0 40px 0; padding: 28px; }
 .login-intro img { width: 190px; }
 .login-intro .eyebrow { margin-top: 30px; font-size: 10px; }
 .login-intro h1 { font-size: 45px; margin-bottom: 14px; }
 .login-intro .login-lead { font-size: 16px; margin-bottom: 0; }
 .login-benefits, .login-intro > small { display: none; }
 .login-card, .mapping-page .login-card { padding: 28px; }
 .login-mark { display: none; }
 .login-card h2 { font-size: 36px; }
 .login-card .login-button { font-size: 14px; padding: 12px; }
 .account { flex-wrap: wrap; justify-content: flex-end; }
 .account #identity { margin-right: auto; }
 .account .button { padding: 9px 11px; font-size: 12px; }
}
/* HF5: quieter sign-in and compact, accessible descriptive insights. */
.login-page, .mapping-page .login-page { background: #f4f5f5; }
.login-wrap { max-width: 960px; grid-template-columns: 1fr 1fr; border-radius: 16px; box-shadow: 0 16px 48px #30124c0c; }
.login-intro, .mapping-page .login-intro { padding: 46px; border-radius: 0; background: #30124c; min-height: 510px; }
.login-intro .eyebrow { margin-top: 78px; letter-spacing: .15em; font-size: 11px; }
.login-intro h1 { font-size: 58px; letter-spacing: -.03em; margin-bottom: 14px; }
.login-intro .login-lead { font-size: 17px; max-width: 260px; }
.login-topics { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 56px; }
.login-topics span { font-size: 12px; border: 1px solid #735a86; color: #eee5f4; border-radius: 4px; padding: 6px 9px; }
.login-card, .mapping-page .login-card { padding: 46px 40px; }
.login-card h2 { font-size: 30px; letter-spacing: -.02em; }
.login-card details { margin-top: 25px; background: transparent; border-radius: 6px; }
.login-card .login-button { border-radius: 6px; margin-top: 22px; }
.quick-insights { border-top: 3px solid var(--purple); margin: 18px 0; }
.quick-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.quick-heading h2 { margin-top: 0; }
.quick-heading .eyebrow { margin-top: 0; }
.quick-scope { color: var(--muted); font-size: 13px; }
.quick-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin: 20px 0; }
.quick-detail .metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.quick-detail .metric-value { font-size: 25px; overflow-wrap: anywhere; }
.quick-quality { display: flex; gap: 10px 24px; flex-wrap: wrap; padding: 16px 0 0; font-size: 13px; }
.quick-quality p { flex-basis: 100%; margin: 0; }
.quick-bars { display: grid; gap: 12px; margin: 20px 0; }
.quick-bar-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(60px, 2fr) minmax(75px, auto); gap: 12px; align-items: center; font-size: 13px; }
.quick-bar-label { overflow-wrap: anywhere; }
.quick-bar-track { height: 12px; background: #eeebf1; border-radius: 3px; overflow: hidden; }
.quick-bar-fill { height: 100%; background: var(--purple); min-width: 0; }
@media (max-width: 650px) {
 .login-page, .mapping-page .login-page { padding: 16px; }
 .login-wrap { grid-template-columns: 1fr; border-radius: 12px; }
 .login-intro, .mapping-page .login-intro { min-height: 0; padding: 28px; }
 .login-intro .eyebrow { margin-top: 28px; }
 .login-intro h1 { font-size: 42px; }
 .login-intro .login-lead { font-size: 15px; }
 .login-topics { display: none; }
 .login-card, .mapping-page .login-card { padding: 28px; }
 .quick-controls { grid-template-columns: minmax(0, 1fr); gap: 8px; }
 .quick-bar-row { grid-template-columns: minmax(65px, 1fr) minmax(35px, 1fr) minmax(65px, auto); gap: 8px; font-size: 12px; }
}
/* R16.2: token-bound recipient journey. System fonts; no external assets. */
.migration-steps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.migration-steps li { display: flex; align-items: center; gap: 12px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.migration-steps strong, .migration-steps small { display: block; }
.migration-steps strong { font-size: 14px; margin-bottom: 4px; }
.step-number { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; background: var(--lavender); border-radius: 50%; font-weight: 700; }
.migration-steps li.current { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.migration-steps li.current .step-number { background: var(--purple); color: white; }
.migration-steps li.complete .step-number { background: var(--green); color: var(--green-ink); }
.migration-identity { border-left: 5px solid var(--purple); }
.migration-card-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.migration-card-heading h2 { margin-bottom: 12px; }
.migration-address { font-size: clamp(21px, 2.3vw, 30px); font-weight: 650; letter-spacing: -.4px; overflow-wrap: anywhere; color: var(--deep); margin-bottom: 12px; }
.migration-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.migration-code { padding: 24px; border-radius: 16px; background: var(--lavender); margin-top: 18px; max-width: 610px; }
.migration-code h3 { margin-bottom: 16px; }
.migration-otp { max-width: 330px; letter-spacing: .25em; font-size: 24px; font-variant-numeric: tabular-nums; }
.migration-resend { margin-top: 14px; margin-bottom: 0; font-size: 13px; }
.migration-next { padding: 16px 8px; color: var(--muted); }
.migration-next h2 { font-size: 19px; color: var(--ink); }
.migration-hint { padding: 14px 18px; border-radius: 12px; background: var(--lavender); }
.migration-counter { font-size: 13px; font-weight: 600; margin: 0 0 18px; }
.migration-review { padding: 24px; margin-top: 24px; border-radius: 16px; background: var(--lavender); }
.migration-fixed-recipient { overflow-wrap: anywhere; }
.migration-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.migration-metrics div { padding: 18px; border-radius: 14px; background: var(--lavender); }
.migration-metrics strong { display: block; color: var(--deep); font-size: 28px; line-height: 1.2; }
.migration-metrics span { display: block; color: var(--muted); font-size: 13px; margin-top: 8px; }
@media (max-width: 760px) {
  .migration-steps { grid-template-columns: 1fr; gap: 8px; }
  .migration-steps li { padding: 12px 16px; }
  .migration-steps small { display: none; }
  .migration-code, .migration-review { padding: 18px 14px; }
  .migration-metrics { gap: 7px; }
  .migration-metrics div { padding: 14px 9px; }
  .migration-metrics span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.migration-consent { display:flex; align-items:flex-start; gap:.75rem; margin:1rem 0; cursor:pointer; line-height:1.5; }
.migration-consent input[type=checkbox] { flex:0 0 1.25rem; width:1.25rem; height:1.25rem; min-height:1.25rem; margin:.15rem 0 0; padding:0; accent-color:var(--purple); }
.migration-consent span { flex:1; }

/* Results remain readable without requiring statistical terminology first. */
.science-summary { padding: 24px 26px; margin: 22px 0; border: 1px solid #dcd0e7; border-left: 5px solid var(--purple); border-radius: 18px; background: linear-gradient(120deg, #f3ecf9, #fff); }
.science-summary h3 { font-size: 23px; line-height: 1.35; margin: 8px 0 12px; color: var(--deep); }
.science-summary p { max-width: 85ch; line-height: 1.7; }
.science-next-step { margin-bottom: 0; padding-top: 14px; border-top: 1px solid #dfd4e8; color: #463451; }
.science-model-review { background: #fff; border: 1px solid #d5c4e1; border-radius: 20px; padding: 26px; margin: 26px 0; }
.science-model-review h3 { font-size: 25px; margin: 8px 0 20px; }
.science-model-review h4 { font-size: 20px; margin: 25px 0 12px; }
.science-model-review .field { max-width: 600px; }
.science-scenario-output:not(:empty) { padding: 18px 22px; border-radius: 14px; margin: 18px 0; background: #edf4e3; color: #334520; }
.science-scenario-output strong { display: block; font-size: 34px; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.science-export-actions { border-top: 1px solid #e2d9e9; padding-top: 18px; margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.science-export-actions small { flex-basis: 100%; color: var(--muted); line-height: 1.6; }
.science-visual-canvas .bar-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .science-summary, .science-model-review { padding: 18px 16px; } .science-summary h3 { font-size: 21px; } .science-export-actions .button { width: 100%; } }
@media (max-width: 420px) { .science-visual-canvas .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin: 16px 0; } .science-visual-canvas .bar-row > span:first-child { grid-column: 1 / -1; } }
.science-automatic { border-left: 4px solid #16818a; min-width: 0; overflow-wrap: anywhere; }
.science-automatic > .science-summary { margin-top: 12px; }
.science-model-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 16px 0; }
.science-model-option { border: 1px solid #e4ddec; border-radius: 14px; padding: 18px; background: #fcfaff; min-width: 0; overflow-wrap: anywhere; }
.science-model-option h3 { margin-top: 0; }
.science-automatic-findings { margin-top: 18px; }
.science-automatic-finding { min-width: 0; padding: 16px 0; border-top: 1px solid #e4ddec; }