/* V4 — werksite-dichtheid (geen marketing-lucht) · Conditiecheck/intake via --rz-*
   Type scale Pass A 2026-08-12 — site-ladder H1–H4 (ONTWERP_REGEL_WERKOMGEVING_TYPE_SCALE)
   Button-systeem 2026-08-12 — Conditiecheck .cc-nav-block = canonieke content-knop */
:root {
 --portal-sidebar-w: 232px;
 --portal-space-1: 6px;
 --portal-space-2: 12px;
 --portal-space-3: 16px;
 --portal-radius: 8px;
 --stroke: var(--line, #96969b33);

 /* WO type scale (md+) — navy headings · kicker groen */
 --wo-h1: 2.5rem;
 --wo-h2: 2rem;
 --wo-h3: 1.5rem;
 --wo-h4: 1.25rem;
 --wo-body: 1rem;
 --wo-kicker: 0.875rem;
 --wo-button: 0.95rem;
 --wo-navy: #15153c;

 /* Content-knoppen = Conditiecheck-blokken (Mirelle #0705 focus · FO navy copy) */
 --wo-btn-font: 0.95rem;
 --wo-btn-weight: 400;
 --wo-btn-weight-on: 600;
 --wo-btn-pad-y: 0.7rem;
 --wo-btn-pad-x: 0.95rem;
 --wo-btn-radius: 6px;
 --wo-btn-border: #d1d5db;
 --wo-btn-color: var(--navy, #15153c);
 --wo-btn-bg: #fff;
 --wo-btn-hover-border: #0794d0;
 --wo-btn-on-bg: #e6f4ea;
 --wo-btn-on-border: rgba(4, 120, 74, 0.45);
 --wo-btn-focus: 0 0 0 2px #fff, 0 0 4px 2px #0794d0;
 --wo-btn-primary-bg: var(--green, #04784a);
 --wo-btn-primary-color: #fff;
}

body[data-app="client-portal"] {
 margin: 0;
 min-height: 100vh;
 background: var(--bg, var(--rz-grey-light, #f5f5f5));
 color: var(--text, var(--rz-warm-black, #2f2f26));
 /* DoD K14 — één bladspiegel; iets ruimer dan 52rem (operator 2026-08-13) */
 --wo-bladspiegel: 56rem;
}

.portal-layout {
 display: grid;
 grid-template-columns: var(--portal-sidebar-w) 1fr;
 min-height: 100vh;
}

.portal-layout[hidden] {
 display: none;
}

.portal-sidebar {
 background: var(--panel, #fff);
 border-right: 1px solid var(--stroke);
 padding: 12px 10px;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.sidebar-brand {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 gap: 10px;
 align-items: center;
 margin-bottom: 8px;
}

.sidebar-brand__logo {
 flex: 0 0 auto;
 display: block;
 width: 44px;
 height: 44px;
 object-fit: contain;
}

.sidebar-brand__text {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 0;
 min-width: 0;
 flex: 1 1 auto;
}

.brand-kicker {
 margin: 0;
 font-family: Montserrat, system-ui, sans-serif;
 font-size: var(--wo-kicker, 0.875rem);
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--green, #04784a);
 line-height: 1.2;
}

.sidebar-title {
 margin: 0;
 font-family: Montserrat, sans-serif;
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--navy, #15153c);
 line-height: 1.2;
}

.module-chrome {
 margin: 0;
 font-size: 12px;
 color: var(--muted, #96969b);
 line-height: 1.3;
}

.nav-label,
.zone-label {
 margin: 8px 0 2px;
 font-size: var(--wo-kicker, 0.875rem);
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted, #96969b);
 font-weight: 600;
}

/* Intake-CSS injecteert een groene streep (::before) die als «—» leest — operator: geen streepje. */
body[data-app="client-portal"] .zone-label::before {
 content: none;
 display: none;
 width: 0;
 height: 0;
}

.nav-list {
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.nav-item {
 display: block;
 width: 100%;
 text-align: left;
 border: 1px solid transparent;
 background: transparent;
 border-radius: var(--portal-radius);
 padding: 7px 10px;
 font: inherit;
 font-size: 0.92rem;
 cursor: pointer;
 color: var(--navy, #15153c);
}

.nav-item:hover {
 background: var(--rz-green-light, #e6f5ee);
}

.nav-item:focus-visible {
 outline: none;
 box-shadow: var(--rz-focus-ring);
}

.nav-item[aria-current="page"] {
 background: var(--rz-green-light, #e6f5ee);
 border-color: rgba(4, 120, 74, 0.28);
 font-weight: 600;
}

.nav-item.is-teaser {
 color: var(--muted, #96969b);
}

.nav-item.is-teaser[aria-current="page"] {
 color: var(--muted, #96969b);
}

.nav-chrome .nav-item {
 border-color: var(--stroke);
}

/* Training hoofd + inklapbare subs (DoD WO Training hoofd+subs) */
.nav-group {
 margin: 2px 0;
 border: 1px solid transparent;
 border-radius: var(--portal-radius);
}

.nav-group__head {
 cursor: pointer;
 list-style: none;
 padding: 7px 10px;
 font: inherit;
 font-size: 0.92rem;
 color: var(--navy, #15153c);
 border-radius: var(--portal-radius);
}

.nav-group__head::-webkit-details-marker {
 display: none;
}

.nav-group__head::after {
 content: " ▾";
 color: var(--muted, #96969b);
 font-size: 0.85em;
}

.nav-group[open] > .nav-group__head::after {
 content: " ▴";
}

.nav-group__head:hover {
 background: var(--rz-green-light, #e6f5ee);
}

.nav-group__head:focus-visible {
 outline: none;
 box-shadow: var(--rz-focus-ring);
}

.nav-group__subs {
 display: flex;
 flex-direction: column;
 gap: 2px;
 padding: 0 0 2px 8px;
}

.nav-item--sub {
 font-size: 0.88rem;
 padding-left: 14px;
}

.nav-more {
 margin: 4px 0;
}

.nav-more summary {
 cursor: pointer;
 list-style: none;
 padding: 8px 12px;
 border-radius: var(--portal-radius);
 color: var(--text, #2f2f26);
 border: 1px solid var(--stroke);
 background: var(--panel, #fff);
}

.nav-more summary::-webkit-details-marker {
 display: none;
}

.nav-more summary::after {
 content: " ▾";
 color: var(--muted, #96969b);
 font-size: 0.85em;
}

.nav-more[open] summary::after {
 content: " ▴";
}

.sidebar-footer {
 margin-top: auto;
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding-top: var(--portal-space-2);
}

.sidebar-footer__nav {
 margin: 0;
}

.sidebar-footnote {
 margin: 0;
 font-size: 12px;
 color: var(--muted, #96969b);
 line-height: 1.35;
}

.portal-main {
 padding: 12px 20px 24px;
 max-width: none;
 width: 100%;
 min-width: 0;
}

.portal-outlet.panel {
 box-sizing: border-box;
}

/* Geen full-bleed uitzonderingen meer: kaderrand = altijd bladspiegel (zoals Berichten). */

.brand-title {
 margin: 0;
 font-family: Montserrat, system-ui, sans-serif;
 font-size: var(--wo-h1, 2.5rem);
 font-weight: 600;
 color: var(--wo-navy, var(--navy, #15153c));
 line-height: 1.15;
 letter-spacing: -0.02em;
}

/* Geneste pagina-terug (Dossier → Berichten, Plan-audit → Audit, …) */
.page-back {
 display: inline-flex;
 align-items: center;
 margin: 0 0 0.35rem;
 padding: 0;
 border: 0;
 background: transparent;
 cursor: pointer;
 font-family: "Montserrat", system-ui, -apple-system, sans-serif;
 font-size: 0.8125rem;
 font-weight: 600;
 color: var(--rz-green, var(--green, #04784a));
 text-decoration: none;
 white-space: nowrap;
}

.page-back:hover {
 text-decoration: underline;
}

.page-back:focus-visible {
 outline: none;
 box-shadow: var(--rz-focus-ring, 0 0 0 3px rgba(4, 120, 74, 0.35));
 border-radius: 4px;
}

.portal-h2,
.portal-outlet h2 {
 margin: 0 0 4px;
 font-family: Montserrat, system-ui, sans-serif;
 font-size: var(--wo-h2, 2rem);
 font-weight: 600;
 color: var(--wo-navy, var(--navy, #15153c));
 line-height: 1.2;
}

.portal-outlet h3 {
 margin: 0 0 4px;
 font-family: Montserrat, system-ui, sans-serif;
 font-size: var(--wo-h3, 1.5rem);
 font-weight: 600;
 color: var(--wo-navy, var(--navy, #15153c));
}

.portal-outlet h4 {
 margin: 0 0 4px;
 font-family: Montserrat, system-ui, sans-serif;
 font-size: var(--wo-h4, 1.25rem);
 font-weight: 600;
 color: var(--wo-navy, var(--navy, #15153c));
}

.portal-outlet .lede {
 color: var(--muted, #96969b);
 margin: 0 0 10px;
 /* Volle bladspiegel (= outlet K14) — geen 70ch-leesmaat die eerder afbreekt dan de titel */
 max-width: none;
 font-size: var(--wo-body, 1rem);
 line-height: 1.4;
}

/* WO-breed: intro/tool-leads volgen bladspiegel (niet ch-measure) */
body[data-app="client-portal"] .tool-lead {
 max-width: none;
}

.portal-outlet .btn-primary,
.portal-outlet .btn-secondary,
.portal-outlet button.depth-choice {
 font-size: var(--wo-button, 1rem);
}

.status-band {
 margin: 0 0 var(--portal-space-2);
 padding: 10px 14px;
 border-radius: var(--portal-radius);
 background: var(--rz-green-light, #e6f5ee);
 border: 1px solid rgba(4, 120, 74, 0.18);
}

.status-intent {
 margin: 0;
 font-size: 0.9rem;
 color: var(--navy, #15153c);
}

.portal-outlet.panel {
 box-shadow: var(--rz-shadow-sm);
}

.stub-box,
.panel-inset,
.afspraak-confirm {
 margin-top: var(--portal-space-2);
 padding: var(--portal-space-2);
 border: 1px solid var(--stroke);
 border-radius: 12px;
 background: var(--panel, #fff);
 box-shadow: var(--rz-shadow-sm);
}

.host-frame {
 display: block;
 width: 100%;
 min-height: 70vh;
 margin-top: var(--portal-space-2);
 border: 1px solid var(--stroke);
 border-radius: 12px;
 background: #fff;
}

.afspraak-manage {
 margin: var(--portal-space-2) 0;
 padding: var(--portal-space-2);
 border: 1px solid rgba(4, 120, 74, 0.22);
 border-radius: 12px;
 background: var(--panel, #fff);
 box-shadow: var(--rz-shadow-sm);
}

.afspraak-manage .zone-label {
 margin-top: 0;
}

/* Eén statusfeit, kleur + label, geen tweede pill/badge */
.afspraak-status {
 margin: 0 0 6px;
 font-family: Montserrat, system-ui, sans-serif;
 font-size: 0.8rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 color: var(--green, #04784a);
}

.afspraak-status[data-status="gepland"] {
 color: var(--green, #04784a);
}

.afspraak-manage-title {
 margin: 0 0 4px;
 font-family: Montserrat, system-ui, sans-serif;
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

.afspraak-manage-summary {
 margin: 0 0 var(--portal-space-2);
 color: var(--text, #2f2f26);
}

.afspraak-confirm-title {
 margin: 0 0 8px;
 font-weight: 700;
 color: var(--navy, #15153c);
}

/* Contact merge (Rogier #0696) + planner calm (Mirelle #0697)
   Intake host H2 = zelfde card-hook gewicht (type-scale · Contact-patroon). */
.contact-title,
.intake-title {
 font-size: 1.65rem;
 line-height: 1.3;
 border-bottom: 1px solid var(--stroke);
 padding-bottom: 8px;
 margin-bottom: 4px;
}

/* Intake CSS mag shell-H1 / groene site-header-lijn niet overschrijven in WO. */
body[data-app="client-portal"] > .portal-layout .site-header {
 border-bottom: none;
 padding-bottom: 0;
}

body[data-app="client-portal"] > .portal-layout .brand-title {
 margin: 0;
}

.contact-lede,
.afspraak-lede {
 font-weight: 400;
 line-height: 1.6;
 margin-bottom: var(--portal-space-2);
}

/* Contact-split: gelijke framehoogte · CTA’s onderaan in het frame (DoD) */
.contact-split {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--portal-space-2);
 align-items: stretch;
 margin-top: var(--portal-space-2);
}

.contact-col {
 display: flex;
 flex-direction: column;
 align-self: stretch;
 min-height: 0;
 padding: var(--portal-space-2);
 border: 1px solid var(--stroke);
 border-radius: var(--portal-radius);
 background: #fff;
 box-sizing: border-box;
}

.contact-col-title {
 flex: 0 0 auto;
 margin: 0 0 var(--portal-space-2);
 font-family: Montserrat, system-ui, sans-serif;
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

.contact-col-body {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 min-height: 0;
 max-width: none !important; /* wint van .form-stack max-width: 420px */
 width: 100%;
}

.contact-col-fields {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 gap: 12px;
 min-height: 0;
}

.contact-col-fields > label:has(textarea) {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 min-height: 0;
}

.contact-col-fields textarea {
 flex: 1 1 auto;
 min-height: 6rem;
 resize: vertical;
}

.contact-col-actions {
 flex: 0 0 auto;
 margin-top: auto;
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding-top: var(--portal-space-2);
}

/* Embedded planner: geen tweede inset-kader; vult frame */
.contact-col--planner .afspraak-flow.panel-inset {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 min-height: 0;
 max-width: none;
 margin-top: 0;
 padding: 0;
 border: none;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
}

.contact-col--planner .afspraak-pane[data-pane="1"]:not([hidden]) {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 min-height: 0;
}

.contact-col--planner .afspraak-slots-zone {
 flex: 1 1 auto;
}

.contact-col--planner .afspraak-step-nav {
 margin-top: auto;
 padding-top: var(--portal-space-2);
}

.contact-col--planner .afspraak-step-nav .btn-primary {
 width: 100%;
}

.contact-col.is-focus {
 border-color: rgba(4, 120, 74, 0.45);
 box-shadow: 0 0 0 1px rgba(4, 120, 74, 0.12);
}

@media (min-width: 900px) {
 .contact-split {
 grid-template-columns: 1fr 1fr;
 gap: var(--portal-space-3, 1.5rem);
 }
}

/* legacy segment styles kept unused — split layout is canonical */
.contact-segments {
 display: none;
}

.contact-panel {
 margin-top: var(--portal-space-1);
}

/* Conditiecheck landing (geen score) — marketing bullets + FA-circle-check lookalike */
.cc-landing {
 max-width: 28rem;
}

/* Audit + Conditiecheck pakketlanding: volle breedte · prijs links · checklist 2 kolommen */
.audit-landing,
.wo-package-landing {
 max-width: none;
 width: 100%;
}

.audit-landing .cc-landing-title,
.audit-landing .cc-landing-lede,
.audit-landing .cc-landing-price,
.wo-package-landing .cc-landing-title,
.wo-package-landing .cc-landing-lede,
.wo-package-landing .cc-landing-price {
 max-width: none;
 text-align: left;
}

.audit-landing .cc-landing-list,
.wo-package-landing .cc-landing-list {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.75rem;
}

@media (min-width: 640px) {
 .audit-landing .cc-landing-list,
 .wo-package-landing .cc-landing-list {
  grid-template-columns: 1fr 1fr;
  column-gap: 1.75rem;
  row-gap: 0.75rem;
 }
}

.cc-landing-title {
 margin: 0 0 0.35rem;
 color: var(--navy, #15153c);
 font-family: Montserrat, "Open Sans", sans-serif;
 font-weight: 700;
 font-size: 1.25rem;
 text-align: center;
}

.cc-landing-price {
 margin: 0 0 var(--portal-space-2);
 text-align: center;
 font-size: 1.7rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

.cc-landing-list {
 list-style: none;
 margin: 0;
 padding: 0.5rem 0;
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}

.cc-landing-list li {
 display: flex;
 align-items: flex-start;
 gap: 0.625rem;
 font-size: 0.875rem;
 font-weight: 600;
 line-height: 1.4;
 color: var(--text, #2f2f26);
}

.rz-check {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: var(--green, #04784a);
 margin-top: 0.05rem;
 padding: 0;
 border: 0;
 background: transparent;
 cursor: pointer;
 transition: transform 0.15s ease;
}

button.rz-check:focus-visible {
 outline: 2px solid var(--green, #04784a);
 outline-offset: 2px;
}

.rz-check.is-grown {
 transform: scale(1.35);
}

.rz-check-icon {
 display: block;
}

.cc-landing-lede {
 margin: 0 0 var(--portal-space-2);
 font-size: 0.95rem;
 line-height: 1.5;
 color: var(--text, #2f2f26);
 text-align: left;
}

.cc-landing-cta {
 margin-top: var(--portal-space-2);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.75rem;
}

.cc-landing-select {
 display: inline-block;
 text-decoration: none;
 text-align: center;
 min-width: 8rem;
}

.cc-landing-secondary {
 margin: 0;
 font-size: 0.9rem;
}

.cc-landing-secondary a {
 color: var(--green, #04784a);
}

.cc-landing-balance {
 margin-top: 3rem;
 height: 1px;
 background: rgba(21, 21, 60, 0.12);
 max-width: none;
}

@media (min-width: 768px) {
 .cc-landing-list li {
 font-size: 1rem;
 }
}

/* Conditiecheck 5-tabs wireframe (2026-08-11) */
.cc-wireframe {
 display: flex;
 flex-direction: column;
 gap: var(--portal-space-2);
}

/* M5 Rogier FO — Koen-bericht sticky boven outlet */
.cc-koen-bericht {
 position: sticky;
 top: 0;
 z-index: 2;
 margin: 0 0 var(--portal-space-1);
 padding: 0.75rem 1rem;
 background: #f3f6f4;
 border: 1px solid rgba(4, 120, 74, 0.18);
 border-radius: 6px;
}

.cc-koen-lead {
 font-weight: 600;
}

.cc-status-row {
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 gap: 0.5rem 0.75rem;
 width: 100%;
 margin: 0.75rem 0 0;
 padding: 0;
 border-top: none; /* in module-head: onder intro, boven hoofdstuknav */
}

.cc-status-arrow {
 flex: 0 0 auto;
 align-self: center;
 color: var(--muted, #6b6b60);
 font-size: 1.05rem;
 line-height: 1;
 font-weight: 500;
 user-select: none;
 pointer-events: none;
}

.cc-module-head .cc-status-row {
 margin-top: 0.85rem;
}

.cc-module-intro-context {
 margin: 0.5rem 0 0;
 font-size: var(--wo-body, 1rem);
 line-height: 1.45;
 color: var(--muted, #6b6b60);
}

.cc-pill {
 appearance: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 1 1 0;
 min-width: 0;
 width: auto;
 font: inherit;
 font-size: 0.8125rem; /* Mirelle eindinspectie: lichter in module-head */
 line-height: 1.35;
 font-weight: var(--wo-btn-weight-on, 600);
 padding: 0.4rem 0.85rem;
 min-height: 2rem;
 border-radius: 0.75rem; /* subtiel afwijkend van nav 6px */
 border: 1px solid transparent;
 cursor: pointer;
 box-sizing: border-box;
}

.cc-pill:disabled {
 cursor: default;
 opacity: 1;
}

/* Mirelle #0744 PASS MET EDITS — palette #F5F5F5 / #E0E0E0 (lichter in head) */
.cc-pill--muted {
 color: #6b6b60;
 background: #f5f5f5;
 border-color: #e0e0e0;
 font-weight: var(--wo-btn-weight, 400);
}

/* Actief = zelfde lichte familie; zwaarder via type + rand (geen guidance-groen) */
.cc-pill--ok {
 color: #15153c;
 background: #f5f5f5;
 border-color: #e0e0e0;
 box-shadow: inset 0 0 0 1px #96969b;
 font-weight: var(--wo-btn-weight-on, 600);
}

.cc-pill--ok:hover:not(:disabled) {
 border-color: var(--wo-btn-hover-border, #0794d0);
 box-shadow: none;
}

.cc-pill:focus-visible {
 outline: none;
 box-shadow: var(--wo-btn-focus, 0 0 0 2px #fff, 0 0 4px 2px #0794d0);
}

.cc-pill-toast {
 margin: 0.5rem 0 0;
 font-size: 0.9rem;
 color: var(--muted, #6b6b60);
}

.cc-pill-toast[hidden] {
 display: none !important;
}

.cc-nav {
 /* SSOT: TEMPLATE_WO_HOOFDSTUK_CCS — 3 gelijke knoppen per rij (operator 2026-08-12) */
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0.5rem;
 width: 100%;
 max-width: none;
 margin-top: 0.75rem;
 padding-top: 0;
 border-top: none; /* groene lijn zit op .cc-module-head */
}

/* Lege landing (geen rapport): zelfde chrome — nav bovenaan met groene scheidingslijn */
.cc-wireframe[data-cc-empty-landing="1"] > .cc-nav,
.cc-wireframe[data-audit-empty-landing="1"] > .cc-nav,
.cc-wireframe[data-audit-empty-landing="1"] > .audit-kv-subnav {
 margin-top: 1.5rem;
 padding-top: 0.75rem;
 border-top: 2px solid #04784a;
}

.cc-wireframe[data-cc-empty-landing="1"] .cc-landing,
.cc-wireframe[data-audit-empty-landing="1"] .cc-landing {
 max-width: none;
 width: 100%;
}

.cc-nav-block.is-locked:disabled {
 opacity: 0.55;
 cursor: not-allowed;
}

@media (max-width: 899px) {
 .cc-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

/* Ruimte onder shell-titel / groene streep: module-intro (geen 2e «Conditiecheck») */
.cc-module-head {
 margin-top: 1.5rem;
 padding-top: 0.75rem;
 border-top: 2px solid #04784a;
}

.cc-module-intro {
 margin: 0 0 0.75rem;
 max-width: none; /* volle outlet-breedte (operator 2026-08-12) */
 width: 100%;
 color: var(--text, #2f2f26);
}

.cc-module-intro-lead {
 margin: 0 0 0.5rem;
 font-size: var(--wo-h3, 1.125rem);
 font-weight: 600;
 line-height: 1.35;
}

.cc-module-intro-body {
 margin: 0;
 font-size: var(--wo-body, 1rem);
 line-height: 1.5;
}

.cc-module-intro:empty,
.cc-module-intro[hidden] {
 display: none !important;
 margin: 0;
}

.cc-nav-block {
 appearance: none;
 display: inline-flex;
 align-items: center;
 justify-content: flex-start;
 width: 100%;
 height: 100%;
 min-height: 2.75rem;
 min-width: 0;
 max-width: none;
 box-sizing: border-box;
 text-align: left;
 font: inherit;
 font-size: var(--wo-btn-font);
 line-height: 1.35;
 font-weight: var(--wo-btn-weight);
 color: var(--wo-btn-color);
 background: var(--wo-btn-bg);
 border: 1px solid var(--wo-btn-border);
 border-radius: var(--wo-btn-radius);
 padding: var(--wo-btn-pad-y) var(--wo-btn-pad-x);
 cursor: pointer;
 /* SSOT: max 1 regel microcopy op hoofdstukpill */
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.cc-nav-block:hover {
 border-color: var(--wo-btn-hover-border);
}

.cc-nav-block.is-selected {
 background: var(--wo-btn-on-bg);
 border-color: var(--wo-btn-on-border);
 font-weight: var(--wo-btn-weight-on);
}

.cc-nav-block:focus-visible {
 outline: none;
 box-shadow: var(--wo-btn-focus);
}

.cc-panel {
 margin-top: var(--portal-space-1);
 max-width: none; /* volle breedte onder horizontale nav (FO: bovenaan) */
 width: 100%;
}

.cc-panel-diagram {
 margin: 0.85rem 0 0;
 padding: 0.5rem;
 border: 1px solid var(--stroke, #ddd);
 border-radius: var(--portal-radius, 8px);
 background: var(--panel, #fff);
 overflow: hidden;
 width: 100%;
 max-width: none;
 box-sizing: border-box;
}

.cc-panel-diagram img {
 display: block;
 width: 100%;
 height: auto;
 max-width: 100%;
}

/* Data-tabellen Conditiecheck (Frenk DTP→Cursor · operator-locked cellen) */
.cc-data-table-wrap {
 margin: 0.85rem 0 0;
 border: 1px solid var(--stroke, #ddd);
 border-radius: 12px;
 background: var(--panel, #fff);
 overflow: hidden;
 width: 100%;
 max-width: none;
 box-sizing: border-box;
}

.cc-data-table-title {
 margin: 0;
 padding: 0.75rem 1rem 0.5rem;
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

.cc-data-table-scroll {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.cc-data-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.92rem;
 color: var(--ink, #222);
}

.cc-data-table th,
.cc-data-table td {
 padding: 0.65rem 0.85rem;
 border-top: 1px solid var(--stroke, #e5e5e5);
 text-align: center;
 vertical-align: middle;
}

.cc-data-table thead th {
 background: #e8e8e8;
 color: var(--navy, #15153c);
 font-weight: 700;
 border-top: none;
}

.cc-data-table tbody th[scope="row"] {
 text-align: left;
 font-weight: 600;
 color: var(--navy, #15153c);
 background: transparent;
 white-space: nowrap;
}

.cc-data-table tbody tr.is-alt th[scope="row"],
.cc-data-table tbody tr.is-alt td {
 background: #f5f5f5;
}

.cc-data-table--prose .cc-data-table td {
 text-align: left;
 vertical-align: top;
 line-height: 1.45;
}

.cc-data-table--prose .cc-data-table tbody th[scope="row"] {
 white-space: normal;
 width: 11.5rem;
 vertical-align: top;
}

/* Conditiecheck/Audit artikelcopy — volle bladspiegel (= hoofdstuknav) */
.cc-article {
 margin: 0.35rem 0 0;
 max-width: none;
 width: 100%;
 color: var(--ink, #222);
}

.cc-article-section + .cc-article-section {
 margin-top: 1.35rem;
}

.cc-article-h2 {
 margin: 0 0 0.65rem;
 font-size: var(--wo-h2, 1.25rem);
 font-weight: 600;
 color: var(--navy, #15153c);
 line-height: 1.3;
}

.cc-article-h3 {
 margin: 0 0 0.55rem;
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

.cc-article-h4 {
 margin: 0 0 0.35rem;
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

/* Waarom het werkt — 3-kolom (Rogier #0810 · Mirelle #0811 · fade-in) */
.cc-stuurmodel-waarom {
 margin-top: 0.35rem;
}

.cc-stuurmodel-waarom-grid {
 display: flex;
 flex-direction: row;
 align-items: stretch;
 gap: 16px;
 width: 100%;
}

.cc-stuurmodel-waarom-point {
 flex: 1 1 0;
 min-width: 0;
 margin: 0;
 padding: 0.5rem 0;
 border-radius: 6px;
 transition: background-color 0.2s ease;
 animation: cc-waarom-fade-in 0.55s ease both;
 animation-delay: var(--waarom-delay, 0ms);
}

.cc-stuurmodel-waarom-point:hover {
 background-color: #f9fafb;
}

.cc-stuurmodel-waarom-eyebrow {
 margin: 0;
 padding: 0 0 0.4rem;
 font-size: 13px;
 font-weight: 800;
 letter-spacing: 0.02em;
 color: #6b7280;
 border-bottom: 1px solid #e5e7eb;
 line-height: 1.3;
 text-transform: none;
}

.cc-stuurmodel-waarom-point-title {
 margin: 8px 0 0.55rem;
 font-size: 18px;
 font-weight: 700;
 color: #1f2937;
 line-height: 1.3;
}

.cc-stuurmodel-waarom-point-body {
 margin: 0;
 font-size: 16px;
 line-height: 1.5;
 color: #374151;
}

@keyframes cc-waarom-fade-in {
 from {
  opacity: 0;
  transform: translateY(6px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

/* CC motion P0 — shared stagger + panel soft-enter (Mirelle freeze) */
:root {
 --cc-motion-stagger-dur: 0.5s;
 --cc-motion-panel-dur: 0.32s;
}

.cc-enter-stagger {
 animation: cc-waarom-fade-in var(--cc-motion-stagger-dur) ease both;
 animation-delay: var(--cc-stagger-delay, 0ms);
}

.cc-panel-soft-enter {
 animation: cc-panel-soft-enter var(--cc-motion-panel-dur) ease both;
}

@keyframes cc-panel-soft-enter {
 from {
  opacity: 0;
  transform: translateY(6px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

.cc-challenge-chips {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
 margin: 0.35rem 0 0.75rem;
}

.cc-challenge-chip {
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 gap: 0.75rem;
 margin: 0;
 padding: 0.65rem 0.75rem;
 border-radius: 8px;
 border: 1px solid #e5e7eb;
 background: #fafafa;
}

.cc-challenge-chip-num {
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.75rem;
 height: 1.75rem;
 padding: 0 0.35rem;
 border-radius: 999px;
 font-size: 0.85rem;
 font-weight: 800;
 line-height: 1;
 color: #fff;
 background: var(--navy, #15153c);
}

.cc-challenge-chip-body {
 flex: 1 1 auto;
 min-width: 0;
}

.cc-challenge-chip-body .cc-article-h3 {
 margin-top: 0.1rem;
 margin-bottom: 0.4rem;
 font-size: 1.05rem;
}

.cc-challenge-chip-body p:last-child {
 margin-bottom: 0;
}

@media (max-width: 768px) {
 .cc-stuurmodel-waarom-grid {
  flex-direction: column;
  gap: 24px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .cc-stuurmodel-waarom-point,
 .cc-enter-stagger,
 .cc-panel-soft-enter,
 .ps-f1-panel.cc-panel-soft-enter,
 .ps-f2-panel.cc-panel-soft-enter,
 .ps-f3-panel.cc-panel-soft-enter {
  animation: none;
 }
}

.cc-article p {
 margin: 0 0 0.75rem;
 line-height: 1.5;
}

.cc-article-list {
 margin: 0 0 0.75rem;
 padding-left: 1.25rem;
 line-height: 1.5;
}

.cc-article-list li + li {
 margin-top: 0.35rem;
}

.cc-article-list--arrow {
 list-style: none;
 padding-left: 0;
}

.cc-article-list--arrow li {
 padding-left: 1.25rem;
 position: relative;
}

.cc-article-list--arrow li::before {
 content: "→";
 position: absolute;
 left: 0;
 color: var(--navy, #15153c);
}

.cc-article-callout {
 margin: 0 0 0.75rem;
 padding: 0.75rem 0.9rem;
 border-left: 3px solid var(--green, #2f9e44);
 background: #f7f8f7;
 border-radius: 0 8px 8px 0;
}

.cc-article-callout p:last-child {
 margin-bottom: 0;
}

.cc-article-fase {
 margin: 0 0 0.5rem;
 font-size: 1.02rem;
 color: var(--navy, #15153c);
}

.cc-article-quote {
 margin: 0 0 0.85rem;
 font-size: 1.15rem;
 font-weight: 600;
 font-style: italic;
 color: var(--navy, #15153c);
 line-height: 1.35;
}

.cc-article-cta {
 margin-top: 1.35rem;
 padding-top: 0.35rem;
}

/* Partnerschap F1/F2/F3 nested chapter tabs (inside Conditiecheck / Audit detail) */
.ps-f1-report,
.ps-f2-report,
.ps-f3-report {
 margin-top: 0.25rem;
}
.ps-f1-nav.cc-nav,
.ps-f2-nav.cc-nav,
.ps-f3-nav.cc-nav {
 grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
 margin-top: 0;
 margin-bottom: 1rem;
}
.ps-f1-label,
.ps-f2-label,
.ps-f3-label {
 margin: 0.85rem 0 0.25rem;
}
.ps-f1-hr,
.ps-f2-hr,
.ps-f3-hr {
 border: 0;
 border-top: 1px solid var(--border, #d9d9cf);
 margin: 1.25rem 0;
}

.cc-panel-title {
 margin: 0 0 var(--portal-space-1);
 color: var(--navy, #15153c);
 font-size: var(--wo-h2, 1.25rem);
 font-weight: 600;
}

.cc-tab-lede {
 margin: 0;
 font-size: var(--wo-body, 1rem);
 font-weight: 400;
 line-height: 1.55;
 color: var(--text, #2f2f26);
 max-width: none;
 width: 100%;
}

.cc-version {
 margin-top: var(--portal-space-2);
 font-size: 0.85rem;
 color: var(--muted, #6b6b60);
}

@media (min-width: 900px) {
 .cc-wireframe {
 display: flex;
 flex-direction: column;
 gap: var(--portal-space-2);
 }
 .cc-module-head {
 margin-top: 0.75rem;
 }
 .cc-nav {
 margin-top: 0.75rem;
 }
 .cc-panel {
 margin-top: var(--portal-space-2);
 }
}

.afspraak-flow {
 max-width: 520px;
 gap: 16px;
}

.afspraak-steps {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 0 0 var(--portal-space-2);
}

.afspraak-step {
 appearance: none;
 border: 1px solid var(--stroke);
 background: #f7f7f4;
 color: var(--text, #2f2f26);
 border-radius: 999px;
 padding: 4px 10px;
 font: inherit;
 font-size: 0.78rem;
 cursor: default;
}

.afspraak-step.is-active {
 border-color: rgba(4, 120, 74, 0.45);
 background: var(--rz-green-light, #e6f5ee);
 color: var(--navy, #15153c);
 font-weight: 600;
}

.afspraak-zone {
 margin-bottom: 20px;
}

.afspraak-zone .zone-label {
 margin-bottom: 8px;
}

.form-fields-calm {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.form-fields-calm label {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.chip-soft {
 background: #f7f7f4;
 font-weight: 400;
}

.chip-more {
 background: #f7f7f4;
 color: #5c5c52;
}

.slot-grid-calm {
 padding: 10px;
 border: 1px solid var(--stroke);
 border-radius: 12px;
 background: #fafaf7;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.afspraak-slots-more {
 margin-top: 4px;
}

.afspraak-step-nav {
 margin-top: 8px;
}

.afspraak-confirm {
 margin-top: 0;
}

.contact-from-line {
 margin: 0 0 0.65rem;
 font-size: 0.9rem;
 line-height: 1.4;
 color: var(--muted, #6b6b60);
}

.form-stack {
 display: flex;
 flex-direction: column;
 gap: 12px;
 max-width: 420px;
}

.form-stack input[readonly],
.form-fields-calm input[readonly] {
 background: #f5f5f5;
 color: var(--muted, #6b6b60);
 cursor: default;
}

.cta-page--plan-audit {
 display: grid;
 gap: 1.25rem 1.5rem;
 align-items: start;
}

@media (min-width: 900px) {
 .cta-page--plan-audit {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
 }
}

.audit-package-card {
 margin: 0;
 padding: 1rem 1.1rem 1.15rem;
 border: 1px solid var(--stroke, #ddd);
 border-radius: var(--portal-radius, 8px);
 background: #fff;
}

.audit-package-title {
 margin: 0.15rem 0 0;
 font-size: var(--wo-h3, 1.1rem);
 color: var(--navy, #15153c);
}

.audit-package-price {
 margin: 0.35rem 0 0.75rem;
 font-size: 1.35rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

.audit-package-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 0.45rem;
}

.audit-package-list li {
 display: flex;
 gap: 0.5rem;
 align-items: flex-start;
 font-size: 0.92rem;
 line-height: 1.4;
 color: var(--text, #2f2f26);
}

.audit-package-list .rz-check {
 flex: 0 0 auto;
 margin-top: 0.1rem;
 color: #04784a;
}

.cta-page-form .form-stack {
 max-width: none;
}

.form-stack label {
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-weight: 600;
 color: var(--navy, #15153c);
}

.form-stack input,
.form-stack textarea,
.portal-select {
 font: inherit;
 padding: 10px 12px;
 border: 1px solid var(--stroke);
 border-radius: var(--portal-radius);
 background: var(--panel, #fff);
 color: var(--text, #2f2f26);
 appearance: none;
}

.portal-select {
 background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
 linear-gradient(135deg, var(--muted) 50%, transparent 50%);
 background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
 background-size: 6px 6px, 6px 6px;
 background-repeat: no-repeat;
 padding-right: 2rem;
}

.form-error {
 color: var(--danger, #b42318);
}

.form-ok {
 color: var(--ok, #04784a);
 font-weight: 600;
}

.choose-grid {
 display: grid;
 gap: 12px;
 margin-top: var(--portal-space-2);
 grid-template-columns: 1fr;
 align-items: stretch;
}

@media (min-width: 720px) {
 .choose-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (min-width: 1100px) {
 .choose-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

.choose-card {
 appearance: none;
 text-align: left;
 border: 1px solid var(--wo-btn-border);
 border-radius: var(--wo-btn-radius);
 padding: var(--wo-btn-pad-y) var(--wo-btn-pad-x);
 background: var(--wo-btn-bg);
 color: var(--wo-btn-color);
 cursor: pointer;
 font: inherit;
 font-size: var(--wo-btn-font);
 font-weight: var(--wo-btn-weight);
 line-height: 1.35;
 box-shadow: none;
 min-height: 0;
 height: 100%;
 display: flex;
 align-items: center;
 box-sizing: border-box;
}

.magic-welcome {
 max-width: 28rem;
 padding: var(--portal-space-2) 0;
}

.magic-welcome-msg {
 font-size: 1.05rem;
 margin-bottom: var(--portal-space-2);
}

.magic-welcome .btn-primary {
 margin-top: 4px;
}

.account-menu {
 position: relative;
 margin-left: auto;
}
.account-menu__toggle {
 font: inherit;
 background: #fff;
 border: 1px solid var(--wo-btn-border);
 border-radius: 6px;
 padding: 0.45rem 0.75rem;
 cursor: pointer;
}
.account-menu__panel {
 position: absolute;
 right: 0;
 top: calc(100% + 4px);
 background: #fff;
 border: 1px solid var(--wo-btn-border);
 border-radius: 6px;
 min-width: 12rem;
 padding: 0.35rem;
 z-index: 20;
 display: none;
 flex-direction: column;
 gap: 0.25rem;
}
.account-menu__panel:not([hidden]) {
 display: flex;
}
.account-menu__item {
 font: inherit;
 text-align: left;
 background: transparent;
 border: 0;
 padding: 0.45rem 0.6rem;
 cursor: pointer;
 border-radius: 4px;
}
.account-menu__item--primary {
 color: var(--ink, #15153c);
 font-weight: 600;
}
.account-menu__item--muted {
 color: #555;
 font-weight: 400;
 font-size: 0.92rem;
}
.account-menu__item:hover {
 background: #f4f4f4;
}
.account-settings .lede {
 max-width: 36rem;
}
.account-danger {
 margin-top: 2.5rem;
 padding-top: 1.25rem;
 border-top: 1px solid var(--stroke, #ddd);
}
.account-danger__title {
 font-size: 1rem;
 font-weight: 650;
 color: #7a271a;
 margin: 0 0 0.5rem;
}
.account-settings .btn-danger,
.btn-danger {
 background: #b42318;
 color: #fff;
 border: 0;
 border-radius: 6px;
 padding: 0.55rem 0.9rem;
 font: inherit;
 cursor: pointer;
}
.account-unsub-confirm {
 margin-top: 1rem;
 padding: 0.75rem;
 border: 2px solid #b42318;
 border-radius: 8px;
}
.account-unsub-confirm p {
 font-size: 1rem;
 font-weight: 700;
}

.choose-card:hover {
 border-color: var(--wo-btn-hover-border);
 background: var(--wo-btn-bg);
}

.choose-card:focus-visible {
 outline: none;
 box-shadow: var(--wo-btn-focus);
}

.audit-kv-stack {
 margin-top: var(--portal-space-2);
 width: 100%;
}

.audit-kv-grid {
 width: 100%;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin-top: 0;
 grid-template-columns: unset;
 align-items: stretch;
}

.audit-kv-grid.choose-grid {
 display: flex;
 grid-template-columns: unset;
}

@media (min-width: 720px) {
 .audit-kv-grid.choose-grid {
  grid-template-columns: unset;
 }
}

@media (min-width: 900px) {
 .audit-kv-grid.choose-grid {
  grid-template-columns: unset;
 }
}

@media (min-width: 1100px) {
 .audit-kv-grid.choose-grid {
  grid-template-columns: unset;
 }
}

@media (min-width: 1200px) {
 .audit-kv-grid.choose-grid {
  grid-template-columns: unset;
 }
}

.choose-card.audit-kv-row {
 flex: 1 1 calc(50% - 0.5rem);
 min-width: min(100%, 11rem);
 max-width: 100%;
 height: auto;
 min-height: 0;
 font-size: var(--wo-btn-font);
 font-weight: var(--wo-btn-weight);
}

@media (min-width: 900px) {
 .choose-card.audit-kv-row {
  flex: 1 1 calc(33.333% - 0.5rem);
 }
}

.audit-kv-hub-intro,
[data-testid="audit-kv-hub-intro"] {
 margin-bottom: var(--portal-space-2);
 max-width: none; /* zelfde bladspiegel als overige page-ledes */
}

.choose-card.audit-kv-row.kv-state-unavailable,
.cc-nav-block.audit-kv-row.kv-state-unavailable {
 opacity: 0.72;
 cursor: pointer;
 background: var(--panel-muted, #f0f1f3);
 color: var(--muted, #5b6470);
 border-color: var(--wo-btn-border);
 font-weight: var(--wo-btn-weight);
}

.choose-card.audit-kv-row.kv-state-unavailable:hover,
.cc-nav-block.audit-kv-row.kv-state-unavailable:hover {
 border-color: var(--wo-btn-border);
 background: var(--panel-muted, #f0f1f3);
}

.choose-card.audit-kv-row.kv-state-available-unread,
.cc-nav-block.audit-kv-row.kv-state-available-unread {
 background: var(--wo-btn-on-bg);
 border-color: var(--wo-btn-on-border);
 color: var(--wo-btn-color);
 font-weight: var(--wo-btn-weight-on);
}

.choose-card.audit-kv-row.kv-state-available-read,
.cc-nav-block.audit-kv-row.kv-state-available-read {
 background: var(--wo-btn-bg);
 border-color: var(--wo-btn-border);
 color: var(--wo-btn-color);
 opacity: 1;
 font-weight: var(--wo-btn-weight);
}

.choose-card.audit-kv-row.kv-state-available-read:hover,
.choose-card.audit-kv-row.kv-state-available-unread:hover,
.cc-nav-block.audit-kv-row.kv-state-available-read:hover,
.cc-nav-block.audit-kv-row.kv-state-available-unread:hover {
 border-color: var(--wo-btn-hover-border);
}

.audit-kv-subnav {
 margin-top: var(--portal-space-2);
}

.audit-kv-lock-toast {
 margin-top: var(--portal-space-2);
 padding: var(--portal-space-2);
 border: 1px solid var(--stroke);
 border-radius: var(--portal-radius);
 background: var(--panel, #fff);
 display: flex;
 flex-wrap: wrap;
 gap: var(--portal-space-1);
 align-items: center;
 justify-content: space-between;
}

.audit-kv-lock-toast[hidden] {
 display: none !important;
}

.assistent-etalage .assistent-compose {
 margin-top: var(--portal-space-2);
 display: flex;
 flex-direction: column;
 gap: var(--portal-space-1);
}

.assistent-input {
 width: 100%;
 font: inherit;
 padding: var(--portal-space-1);
 border: 1px solid var(--stroke);
 border-radius: var(--portal-radius);
 background: var(--panel-muted, #f0f1f3);
 resize: vertical;
}

.assistent-mode-row {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin-top: var(--portal-space-2);
}

.assistent-mode-row .btn-secondary {
 flex: 1 1 calc(50% - 0.5rem);
 min-width: min(100%, 11rem);
 justify-content: flex-start;
 text-align: left;
}

.assistent-mode-row .btn-secondary.is-active {
 border-color: var(--wo-btn-on-border);
 background: var(--wo-btn-on-bg);
 color: var(--wo-btn-color);
 font-weight: var(--wo-btn-weight-on);
 box-shadow: inset 0 0 0 1px rgba(4, 120, 74, 0.2);
}

.assistent-mode-row .btn-secondary:focus-visible {
 outline: none;
 border-color: var(--green, #04784a);
 box-shadow: 0 0 0 3px rgba(4, 120, 74, 0.35);
}

/* DoD K3b/FB10 — compacte etalage-balk + lucht tot content eronder */
.customer-only-panel {
 margin: 0 0 1rem;
 padding: 0.28rem 0.75rem;
 border-radius: var(--portal-radius, 0.5rem);
 border: 1px solid rgba(4, 120, 74, 0.28);
 background: var(--rz-green-light, #e6f5ee);
}

.customer-only-panel__copy {
 margin: 0;
 font-weight: 600;
 font-size: 0.875rem;
 line-height: 1.25;
 color: var(--navy, #15153c);
}

.trainer-mount {
 margin: 0;
 min-height: 0;
 width: 100%;
 position: relative;
}

/* Trainingsadvies compose — volle bladspiegel (zoals Berichten-composer) */
.trainer-open {
 width: 100%;
 max-width: none;
}

.trainer-open .trainer-advice-form,
.trainer-open [data-testid="trainer-advice-form"] {
 max-width: none;
 width: 100%;
}

.trainer-open .field__input,
.trainer-open .btn-primary {
 width: 100%;
 box-sizing: border-box;
}

.trainer-host-error {
 margin: 0 0 0.75rem;
 padding: 0.85rem 1rem;
 border-radius: var(--portal-radius);
 border: 1px solid rgba(4, 120, 74, 0.28);
 background: var(--rz-green-light, #e6f5ee);
}

.trainer-host-error[hidden] {
 display: none !important;
}

.trainer-host-error__title {
 margin: 0 0 0.35rem;
 font-weight: 700;
 color: var(--navy, #15153c);
}

.trainer-host-error__body {
 margin: 0 0 0.75rem;
}

.trainer-frame {
 display: block;
 width: 100%;
 min-height: calc(100vh - 5.5rem);
 height: calc(100vh - 5.5rem);
 border: 0;
 background: var(--panel, #fff);
 border-radius: 0.5rem;
}

.trainer-frame.is-host-error {
 min-height: 12rem;
 height: 12rem;
 opacity: 0.35;
 pointer-events: none;
}

.werkbank-tool-mount {
 width: 100%;
 max-width: none;
}

.werkbank-tool-bar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.75rem;
 margin: 0 0 0.75rem;
}

.werkbank-tool-bar .lede {
 margin: 0;
}

.werkbank-tool-frame {
 display: block;
 width: 100%;
 min-height: calc(100vh - 7rem);
 height: calc(100vh - 7rem);
 border: 0;
 background: var(--panel, #fff);
}

/* Intake mount in WO: volle breedte, keuze-knoppen gelijk in grid */
.intake-mount {
 width: 100%;
 max-width: none;
 min-height: 0;
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 /* Intake CSS: --measure: 68ch op .lede — in WO volgt lede de bladspiegel */
 --measure: none;
}

.intake-mount .lede,
.intake-mount .tool-lead {
 max-width: none;
}

/* Geneste intake-maat (36rem/28rem) → volle outlet-breedte in WO */
.intake-mount .panel,
.intake-mount .gate-panel,
.intake-mount .depth-actions-dual,
.intake-mount .depth-actions-triple,
.intake-mount .depth-welcome,
.intake-mount .behoefte-select-wrap,
.intake-mount .behoefte-micro,
.intake-mount .behoefte-help-details,
.intake-mount .field-block,
.intake-mount .chat-form,
.intake-mount .cta-row {
 max-width: none;
 width: 100%;
 box-sizing: border-box;
}

.intake-mount #intake-embed-host {
 width: 100%;
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.intake-mount #intake-embed-host .intake-embed {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.intake-mount #intake-embed-host .app-shell,
.intake-mount #intake-embed-host .shell {
 max-width: none;
 width: 100%;
 margin: 0;
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 padding-left: 0;
 padding-right: 0;
}

.intake-mount #intake-embed-host .depth-actions-dual {
 max-width: none;
 width: 100%;
}

@media (min-width: 720px) {
 .intake-mount #intake-embed-host .depth-actions-dual {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

.intake-mount #intake-embed-host .depth-question {
 font-size: 1rem;
 font-weight: 600;
 line-height: 1.35;
 margin: 0.35rem 0 0.5rem;
 color: var(--navy, #15153c);
}

.intake-mount #intake-embed-host .depth-choice {
 appearance: none;
 height: auto;
 min-height: 0;
 padding: var(--wo-btn-pad-y) var(--wo-btn-pad-x);
 border: 1px solid var(--wo-btn-border);
 border-radius: var(--wo-btn-radius);
 background: var(--wo-btn-bg);
 box-shadow: none;
 color: var(--wo-btn-color);
 font-size: var(--wo-btn-font);
 font-weight: var(--wo-btn-weight);
}

.intake-mount #intake-embed-host .depth-choice:hover {
 border-color: var(--green, #04784a);
 background: var(--rz-green-light, #e6f5ee);
}

.intake-mount #intake-embed-host .depth-choice:focus-visible {
 outline: none;
 border-color: var(--green, #04784a);
 box-shadow: 0 0 0 3px rgba(4, 120, 74, 0.35);
}

.intake-mount #intake-embed-host .depth-choice-label {
 font-weight: var(--wo-btn-weight-on);
 font-size: var(--wo-btn-font);
 color: var(--wo-btn-color);
}

.intake-mount #intake-embed-host .panel {
 max-width: none;
 width: 100%;
 padding-bottom: 1rem;
}

/* RV: outlet was 56rem gecentreerd → chat stond rechts van de H1.
   Links = bladspiegel (H1); rechts = oude 56rem-kaart-rand (wiki blijft). */
body[data-app="client-portal"] .portal-layout:has([data-testid="intake-mount-root"]) {
 height: 100vh;
 height: 100dvh;
 overflow: hidden;
}

body[data-app="client-portal"] .portal-main:has([data-testid="intake-mount-root"]) {
 display: flex;
 flex-direction: column;
 min-height: 0;
 height: 100%;
 overflow: hidden;
 padding-bottom: 12px;
}

body[data-app="client-portal"] .portal-outlet.panel:has([data-testid="intake-mount-root"]) {
 padding-left: 0;
 max-width: none;
 margin-left: 0;
 margin-right: auto;
 width: min(100%, calc(50% + (var(--wo-bladspiegel, 56rem) / 2)));
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.intake-mount [hidden] {
  display: none !important;
}

.intake-mount .chat-view:not([hidden]) {
 margin-top: 0.5rem;
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.intake-mount #intake-embed-host .chat-column.panel {
 margin-top: 0;
 min-height: 0;
 max-height: 100%;
 overflow: hidden;
}

.intake-mount #intake-embed-host .wiki-panel {
 min-height: 0;
 max-height: 100%;
 overflow: hidden;
}

.intake-mount #intake-embed-host .wiki-body,
.intake-mount #intake-embed-host .wiki-shell {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
}

.intake-mount #intake-embed-host .chat-log {
 max-height: none;
 flex: 1 1 auto;
 min-height: 0;
}

.intake-mount #intake-embed-host .chat-form {
 flex-shrink: 0;
}

.intake-mount #intake-embed-host .chat-form textarea {
 margin-bottom: 0.65rem;
}

@media (min-width: 768px) {
 .intake-mount #intake-embed-host .intake-workbench {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
 }
}

.werkbank-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: 12px;
 margin-top: 8px;
 align-items: stretch;
}

@media (min-width: 900px) {
 .werkbank-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (min-width: 1100px) {
 .werkbank-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

@media (min-width: 1400px) {
 .werkbank-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
}

.werkbank-card {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-height: 100%;
 height: 100%;
 padding: 12px 14px;
 border-radius: 8px;
 border: 1px solid rgba(4, 120, 74, 0.4);
 background: var(--panel, #fff);
 box-shadow: none;
 box-sizing: border-box;
}

.werkbank-card.is-favorite {
 background: var(--rz-green-light, #e6f5ee);
 border-color: #036b42;
}

/* Titelrij alleen vs Favoriet/Live — beschrijving volle breedte eronder (schaalvast; geen overlap) */
.werkbank-card__head {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 10px;
 flex: 0 0 auto;
 min-width: 0;
 width: 100%;
}

.werkbank-open {
 margin-top: auto;
 align-self: stretch;
 width: 100%;
 box-sizing: border-box;
}

/* Card-titel = cataloguslabel, geen portal H3 (Pass A lek: .portal-outlet h3 → 1.5rem) */
.portal-outlet h3.werkbank-card__title,
.werkbank-card__title {
 margin: 0;
 flex: 1 1 auto;
 min-width: 0;
 max-width: 100%;
 font-family: inherit;
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--ink, #0f172a);
 line-height: 1.3;
 letter-spacing: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
 hyphens: auto;
}

/* Volledige tagline zichtbaar — volle kaartbreedte, onder titelrij (niet naast Favoriet) */
.portal-outlet .lede.werkbank-card__desc,
.werkbank-card__desc {
 margin: 0;
 max-width: none;
 width: 100%;
 font-size: 0.8rem;
 line-height: 1.4;
 color: var(--muted, #64748b);
 display: block;
 overflow: visible;
 -webkit-line-clamp: unset;
 flex: 1 1 auto;
 min-height: 0;
}

.werkbank-card__badges {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 4px;
 flex: 0 0 auto;
 flex-shrink: 0;
 max-width: 42%;
}

.werkbank-fav {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 0.72rem;
 color: var(--muted, #64748b);
 cursor: pointer;
 user-select: none;
}

.werkbank-card.is-favorite .werkbank-fav {
 color: #a16207;
 font-weight: 600;
}

/* Trainingsaanbod — vereenvoudigde Werkbank-tegel (DoD T2–T5 · Marco E2) */
.trainingsaanbod-card {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-height: 100%;
 height: 100%;
 padding: 12px 14px;
 border-radius: 8px;
 border: 1px solid rgba(4, 120, 74, 0.4);
 background: #fff;
 text-decoration: none;
 color: inherit;
 box-sizing: border-box;
 transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.trainingsaanbod-card:hover {
 border-color: rgba(4, 120, 74, 0.75);
 box-shadow: 0 2px 8px rgba(4, 120, 74, 0.12);
}

.trainingsaanbod-card:hover .trainingsaanbod-card__title {
 text-decoration: underline;
 text-underline-offset: 2px;
}

.portal-outlet h3.trainingsaanbod-card__title,
.trainingsaanbod-card__title {
 margin: 0;
 font-size: 1.05rem;
 font-weight: 700;
 color: #1a1a1a;
 line-height: 1.25;
 /* Altijd 2 regels ruimte → lede/CTA uitlijnen (korte titels groeien niet mee) */
 min-height: calc(1.05rem * 1.25 * 2);
}

.portal-outlet .lede.trainingsaanbod-card__lede,
.trainingsaanbod-card__lede {
 margin: 0;
 flex: 1 1 auto;
 font-size: 0.9rem;
 line-height: 1.35;
 color: #4b5563;
 /* SSOT: tegeltekst nooit verbergen — herschrijf copy i.p.v. clamp/ellipsis */
}

.trainingsaanbod-card__cta {
 margin-top: 4px;
 align-self: flex-start;
 font-size: 0.85rem;
 font-weight: 600;
 color: var(--rc-green, #04784a);
}

.werkbank-fav__input:checked + span {
 color: #a16207;
}

.werkbank-badge {
 display: inline-block;
 padding: 0.2rem 0.55rem;
 border-radius: 999px;
 font-size: 0.75rem;
 line-height: 1.2;
 font-weight: 700;
 color: #036b42;
 background: var(--rz-green-light, #e6f5ee);
 border: 1px solid rgba(4, 120, 74, 0.35);
}

.werkbank-open {
 width: 100%;
 margin-top: auto;
 padding: 0.45rem 0.75rem;
 font-size: 0.88rem;
}

.werkbank-coming-soon {
 margin-top: var(--portal-space-2);
}


.boot-error {
 padding: 16px 20px;
 background: var(--danger-bg, #fee2e2);
 color: var(--danger, #b42318);
 border-bottom: 1px solid #fecaca;
}

.slot-grid {
 display: flex;
 flex-wrap: wrap;
 gap: var(--portal-space-1);
 margin: var(--portal-space-1) 0 var(--portal-space-2);
}

.slot-btn {
 border: 1px solid var(--stroke);
 background: var(--panel, #fff);
 padding: 10px 16px;
 min-height: 2.5rem;
 border-radius: var(--portal-radius);
 cursor: pointer;
 font: inherit;
 font-size: 0.95rem;
 color: var(--navy, #15153c);
}

.slot-btn:hover {
 border-color: rgba(4, 120, 74, 0.4);
 background: var(--rz-green-light, #e6f5ee);
}

.slot-btn:focus-visible {
 outline: none;
 box-shadow: var(--rz-focus-ring);
}

.slot-btn.is-selected {
 border-color: var(--green, #04784a);
 background: var(--rz-green-light, #e6f5ee);
 font-weight: 600;
}

.duration-field {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.duration-chip-row {
 margin: 0;
}

.duration-popover {
 display: flex;
 flex-wrap: wrap;
 gap: var(--portal-space-1);
 margin-top: var(--portal-space-1);
 padding: 10px;
 border: 1px solid var(--stroke);
 border-radius: 8px;
 background: var(--panel, #fff);
 box-shadow: var(--rz-shadow-sm);
}

.duration-popover[hidden] {
 display: none;
}

.btn-row {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 4px;
}

.btn-primary,
.btn-secondary,
.btn-danger {
 appearance: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--wo-btn-radius);
 padding: var(--wo-btn-pad-y) var(--wo-btn-pad-x);
 font: inherit;
 font-family: inherit;
 font-size: var(--wo-btn-font);
 font-weight: var(--wo-btn-weight-on);
 line-height: 1.35;
 cursor: pointer;
 transition: border-color 0.15s ease, background 0.15s ease, filter 0.15s ease;
 text-decoration: none;
 box-sizing: border-box;
}

.btn-primary {
 border: 1px solid var(--wo-btn-primary-bg);
 background: var(--wo-btn-primary-bg);
 color: var(--wo-btn-primary-color);
}

.btn-primary:hover {
 filter: brightness(1.05);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible {
 outline: none;
 border-color: var(--green, #04784a);
 box-shadow: 0 0 0 3px rgba(4, 120, 74, 0.35);
}

.btn-primary.is-loading,
.btn-primary:disabled {
 opacity: 0.72;
 cursor: wait;
}

.btn-secondary {
 border: 1px solid var(--wo-btn-border);
 background: var(--wo-btn-bg);
 color: var(--wo-btn-color);
 font-weight: var(--wo-btn-weight);
}

.btn-secondary:hover {
 border-color: var(--wo-btn-hover-border);
 background: var(--wo-btn-bg);
}

.btn-danger {
 border: 1px solid var(--danger, #b42318);
 background: transparent;
 color: var(--danger, #b42318);
}

.btn-danger:hover {
 background: var(--danger-bg, #fee2e2);
}

@media (max-width: 900px) {
 .portal-layout {
 grid-template-columns: 1fr;
 }
 .portal-sidebar {
 border-right: none;
 border-bottom: 1px solid var(--stroke);
 }
}

.checkout-panel{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border, #ddd);}
.checkout-panel .nav-item[disabled]{opacity:.5;pointer-events:none;}

.member-wo-message{margin:16px 24px;padding:12px 16px;border:1px solid var(--stroke);background:#fff;border-radius:var(--portal-radius)}
.member-wo-message__body{margin:0 0 8px 0}

/* Dossier V1 — list + in-outlet preview (Rogier #0740 · Marco E1) */
.portal-outlet:has(.dossier-page) {
  max-width: none;
}
.dossier-page {
  width: 100%;
}
.dossier-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1rem;
}
.dossier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.dossier-table th,
.dossier-table td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--stroke, #ddd);
  vertical-align: middle;
}
.dossier-table th {
  font-weight: 600;
  color: var(--muted, #555);
}
.dossier-row {
  cursor: pointer;
}
.dossier-row:hover,
.dossier-row.is-selected {
  background: var(--wo-btn-bg, #f5f5f5);
}
.dossier-row-actions {
  white-space: nowrap;
}
.dossier-preview {
  border: 1px solid var(--stroke, #ddd);
  border-radius: var(--portal-radius, 8px);
  padding: 1rem;
  background: #fff;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dossier-preview-text {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  flex: 1;
}
.dossier-preview-frame {
  width: 100%;
  min-height: 22rem;
  border: 1px solid var(--stroke, #ddd);
  border-radius: 4px;
  flex: 1;
}
.dossier-empty {
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--stroke, #ddd);
  border-radius: var(--portal-radius, 8px);
  max-width: 36rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 900px) {
  .dossier-split {
    grid-template-columns: 1fr;
  }
}

/* Landing hubs Stuurmodel + Training (DoD WO hubs 2026-08-12) */
.landing-hub {
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.landing-hub__title {
  margin: 0.15rem 0 0.35rem;
  /* Semantiek H2 · grootte via .portal-outlet h2 (--wo-h2) · nooit H1/shell-concurrent */
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.landing-hub__lead-q {
  margin: 0.65rem 0 0.35rem;
  font-size: 1.5rem; /* ~24 */
  font-weight: 600;
  color: var(--navy, #15153c);
  line-height: 1.3;
}

.landing-hub__bridge {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text, #2f2f26);
  line-height: 1.5;
}

.landing-hub__section {
  margin: 0 0 0.55rem;
  font-size: var(--wo-h3, 1.5rem);
  font-weight: 600;
  color: var(--navy, #15153c);
  line-height: 1.3;
}

.landing-hub__body-block {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.landing-hub__body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text, #2f2f26);
  line-height: 1.55;
}

.landing-hub__factor-list {
  margin: 0.15rem 0;
  padding-left: 1.15rem;
  color: var(--text, #2f2f26);
  font-size: 1rem;
  line-height: 1.5;
}

.landing-hub__scores {
  margin: 0.25rem 0;
  font-size: 1rem;
  color: var(--navy, #15153c);
}

.hub-stuurmodel-calc-wrap {
  margin: 0.35rem 0;
  overflow-x: auto;
  border: 1px solid var(--stroke, #ddd);
  border-radius: var(--portal-radius, 8px);
}

.hub-stuurmodel-calc {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem; /* ~14 th/body */
}

.hub-stuurmodel-calc th {
  font-weight: 600;
  text-align: left;
  padding: 0.55rem 0.75rem;
  background: rgba(21, 21, 60, 0.06);
  color: var(--navy, #15153c);
}

.hub-stuurmodel-calc td {
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--stroke, #eee);
  vertical-align: top;
}

.hub-stuurmodel-calc tbody tr:nth-child(even) {
  background: rgba(10, 26, 47, 0.05); /* Mirelle navy-a5 */
}

.hub-stuurmodel-calc__win {
  font-weight: 700;
  color: var(--accent, #2e8b57); /* Mirelle accent-green */
}

/* Hub: hergebruik cc-stuurmodel-waarom-grid (volbreedte wrapper) */
.landing-hub__slots {
  width: 100%;
  margin: 1.25rem 0 0;
}

.landing-hub__slots .cc-stuurmodel-waarom {
  margin-top: 0;
}

.landing-hub--stuurmodel .landing-hub__diagram {
  margin-top: 2.5rem; /* ~40 */
  margin-bottom: 2rem; /* ~32 */
}

.landing-hub__z3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.landing-hub__tile {
  padding: 0.9rem 1rem;
  border: 1px solid var(--stroke, #ddd);
  border-radius: var(--portal-radius, 8px);
  background: var(--panel, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.landing-hub__tile-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy, #15153c);
}

.landing-hub__bullets {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text, #2f2f26);
  font-size: 0.9rem;
}

.landing-hub__bullets li {
  margin: 0.15rem 0;
}

.landing-hub__z4 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  padding: 0.85rem 0 0.25rem;
  border-top: 1px solid var(--stroke, #eee);
}

/* E1: schaal binnen band — geen horizontale scroll */
.landing-hub__diagram {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--stroke, #ddd);
  border-radius: var(--portal-radius, 8px);
  background: var(--panel, #fff);
  overflow: hidden;
}

.landing-hub__diagram img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Intro + tellers vullen .portal-outlet bladspiegel (K14) — geen tweede 42rem-kolom / lege rechtergutter */
.landing-hub__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
}

.landing-hub__intro-p {
  margin: 0;
}

.landing-hub__expertise-title {
  margin: 0.5rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy, #15153c);
  text-align: left;
}

.landing-hub--training .landing-hub__teller {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.landing-hub__teller {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.landing-hub__metric {
  text-align: center;
  padding: 0.75rem 0.4rem;
  border: 1px solid var(--stroke, #ddd);
  border-radius: var(--portal-radius, 8px);
  background: var(--panel, #fff);
}

.landing-hub__metric-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy, #15153c);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.landing-hub__metric-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted, #96969b);
  line-height: 1.3;
}

.landing-hub__micro {
  margin-top: 0.25rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--stroke, #eee);
  border-radius: var(--portal-radius, 8px);
  background: var(--panel, #fff);
}

.landing-hub__micro summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--navy, #15153c);
}

.landing-hub__micro .lede {
  margin: 0.5rem 0 0;
}

@media (max-width: 720px) {
  .landing-hub__z3 {
    grid-template-columns: 1fr;
  }
  .landing-hub__teller {
    grid-template-columns: 1fr 1fr;
  }
}

/* Berichten V1 — thread + composer (FO #0802 · nieuwste onderaan · viewport op laatste) */
.berichten-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 60vh;
}
.berichten-thread {
  flex: 1;
  overflow-y: auto;
  max-height: min(55vh, 28rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.berichten-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--stroke, #ddd);
  background: #fff;
}
.berichten-bubble--operator {
  align-self: flex-start;
  background: #f3f6f4;
}
.berichten-bubble--customer {
  align-self: flex-end;
  background: #f7f7f8;
}
.berichten-bubble__meta {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: var(--muted, #555);
  font-weight: 600;
}
.berichten-bubble__body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
  color: var(--ink, #15153c);
}
.berichten-bubble__body strong {
  font-weight: 700;
  color: var(--ink, #15153c);
}
.berichten-bubble--operator .berichten-bubble__body {
  font-size: 0.95rem;
}
.berichten-status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #9a3412;
}
.berichten-pin-spacer {
  flex: 0 0 auto;
  width: 100%;
  pointer-events: none;
}
  padding: 1rem 0;
}
.berichten-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.75rem;
}
.berichten-composer {
  margin-top: auto;
  border-top: 1px solid var(--stroke, #ddd);
  padding-top: 1rem;
  width: 100%;
  max-width: none;
}
.berichten-composer--full .field__input,
.berichten-composer--full .btn-primary {
  width: 100%;
  box-sizing: border-box;
}
.berichten-composer--full .btn-primary {
  margin-top: 0.5rem;
}
.dossier-full {
  width: 100%;
  max-width: none;
}
.dossier-full .dossier-table {
  width: 100%;
}
.contact-bel-mij-row {
  margin: 0 0 1rem;
}
.portal-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(21, 21, 60, 0.45);
}
.portal-dialog {
  width: min(28rem, 100%);
  background: var(--panel, #fff);
  border-radius: var(--portal-radius, 0.5rem);
  padding: 1.25rem;
  box-shadow: 0 12px 40px rgba(21, 21, 60, 0.2);
}
.portal-dialog-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
/* DoD K14 — één rechter bladspiegel WO-breed
   Kaderrand = .portal-outlet. Children vullen die breedte (geen tweede smallere kolom).
   Operator 2026-08-13: geen full-bleed outlet met 52rem-inhoud ernaast (lege rechtergutter). */
.portal-outlet {
  max-width: var(--wo-bladspiegel, 56rem);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

.portal-outlet .landing-hub,
.portal-outlet .etalage-page,
.portal-outlet .berichten-page,
.portal-outlet .dossier-page,
.portal-outlet .cta-page,
.portal-outlet .contact-split,
.portal-outlet .intake-mount,
.portal-outlet .trainer-mount,
.portal-outlet .assistent-etalage,
.portal-outlet .audit-kv-hub,
.portal-outlet .werkbank-tool-mount {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

/* Intake-CSS lekt .app-shell { max-width: 1100px } — shell mag WO-main niet afknijpen */
body[data-app="client-portal"] > .portal-layout .portal-main.shell,
body[data-app="client-portal"] > .portal-layout .portal-main.app-shell {
  max-width: none;
  width: 100%;
}