/*
 * Layouts van Craft Convert Desk: de Desk met zijbalk (Nav, NavCollapsed), het portaal met bovenbalk (PortalNav) en
 * gsm-menu (PortalMenu), en de componentenpagina (States). Alleen tokens uit tokens.css; bundle.css blijft ongewijzigd.
 * Klassen met prefix ccd- zijn van de applicatie, cca- van het design system.
 * De stijlen volgen de <style>-blokken van de ontwerpschermen in docs/design/schermen/ (sd-*, pn-*, pm-* daar).
 */

/* ---------- Basis ---------- */
a { color: var(--text-accent); }
a:hover { color: var(--text-primary); }
a.cca-btn, a.cca-iconbtn, a.cca-navitem, a.cca-seg__opt, a.cca-tab, a.cca-menu__item, a.cca-filecard { text-decoration: none; box-sizing: border-box; }
.cca-seg__opt:disabled { cursor: not-allowed; opacity: 0.5; }
.ccd-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Desk: venster met zijbalk, kolom met balk en paneel (Brief, Main) ---------- */
.ccd-app { display: flex; width: 100%; height: 100vh; overflow: hidden; background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-sans); }
.ccd-col { flex: 999 1 560px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ccd-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 0 12px 0 20px; background: var(--surface-sidebar); border-bottom: 1px solid var(--border-subtle); box-sizing: border-box; }
.ccd-bar__title { flex: 1 1 auto; font-size: 13px; line-height: 18px; font-weight: 600; }
.ccd-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 32px 32px 48px; box-sizing: border-box; }
.ccd-pane__inner { width: 100%; max-width: 1080px; display: flex; flex-direction: column; gap: 28px; }
.ccd-page-head { display: flex; flex-direction: column; gap: 6px; }
.ccd-h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 650; letter-spacing: -0.025em; }
.ccd-h2 { margin: 0; font-size: 15.5px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.ccd-lead { margin: 0; font-size: 15px; line-height: 24px; color: var(--text-secondary); }
.ccd-meta { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.ccd-fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    .ccd-app { flex-wrap: wrap; height: auto; overflow: visible; }
    .ccd-pane { overflow: visible; padding: 24px 16px 48px; }
}

/* ---------- Desk: zijbalk (Nav.dc.html) ---------- */
.ccd-nav { position: relative; z-index: 2; display: flex; height: 100vh; font-family: var(--font-sans); color: var(--text-primary); background: var(--surface-sidebar); }
.ccd-nav > .cca-sidebar { display: flex; flex: none; align-self: stretch; }
@media (max-width: 760px) { .ccd-nav { height: auto; } }
.ccd-nav a.cca-navitem, .ccd-nav a.ccd-mode__opt, .ccd-nav a.ccd-mini-opt { text-decoration: none; box-sizing: border-box; }
.ccd-nav .cca-navitem__trail { font-variant-numeric: tabular-nums; }
.ccd-nav .cca-sidebar.is-collapsed .ccd-only-expanded { display: none; }
.ccd-nav .cca-sidebar:not(.is-collapsed) .ccd-only-collapsed { display: none; }
.ccd-nav .cca-sidebar.is-collapsed .ccd-grp { display: none; }
.ccd-systrail { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; }
.ccd-nav .ccd-dot--success { background: var(--status-success); }
.ccd-nav .ccd-dot--warning { background: var(--status-warning); }
.ccd-nav .ccd-dot--danger { background: var(--status-danger); }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem .ccd-systrail { min-width: 0; padding: 0; top: 8px; right: 8px; height: auto; background: transparent; box-shadow: none; }
.ccd-nav .cca-sidebar.is-collapsed .ccd-systxt { display: none; }
.ccd-nav .cca-sidebar.is-collapsed .cca-sidebar__section + .cca-sidebar__section { padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.ccd-nav__head { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 12px; margin: 0 -8px; padding: 12px 8px; background: var(--surface-sidebar); }
.ccd-nav__foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin: auto -8px 0; padding: 8px 8px 0; background: var(--surface-sidebar); border-top: 1px solid var(--border-subtle); }
.ccd-nav__brand { display: flex; align-items: center; gap: 10px; }
.ccd-nav__logo { display: inline-flex; padding-left: 8px; color: var(--text-primary); }
.ccd-nav__name { flex: 1 1 auto; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.ccd-nav__name span { color: var(--text-secondary); font-weight: 500; }
.ccd-nav__acct { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; }
.ccd-nav__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ccd-nav__who-name { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccd-nav__who-meta { font-size: 12px; line-height: 16px; color: var(--text-secondary); white-space: nowrap; }
.ccd-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: var(--surface-hover); }
.ccd-mode__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: transparent; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.ccd-mode__opt:hover { color: var(--text-primary); }
.ccd-mode__opt:active { transform: scale(0.97); }
.ccd-nav a:focus-visible, .ccd-logo-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ccd-mode__opt[data-on="true"] { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .ccd-mode__opt[data-on="true"], [data-theme="dark"] .ccd-mini-opt[data-on="true"] { background: var(--surface-selected); }
.ccd-mode__row { display: flex; align-items: center; gap: 6px; width: 100%; }
.ccd-mode__ico { display: inline-flex; }
.ccd-mode__opt[data-on="true"] .ccd-mode__ico { color: var(--text-accent); }
.ccd-mode__label { flex: 1 1 auto; font-size: 14px; line-height: 20px; font-weight: 600; }
.ccd-mode__sub { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--text-secondary); white-space: nowrap; }
.ccd-logo-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); cursor: pointer; transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.ccd-logo-btn:hover, .ccd-logo-btn:focus-visible { background: var(--surface-hover); }
.ccd-logo-btn__logo, .ccd-logo-btn__ico { grid-area: 1 / 1; display: inline-flex; transition: opacity 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.ccd-logo-btn__ico { opacity: 0; }
.ccd-logo-btn:hover .ccd-logo-btn__logo, .ccd-logo-btn:focus-visible .ccd-logo-btn__logo { opacity: 0; }
.ccd-logo-btn:hover .ccd-logo-btn__ico, .ccd-logo-btn:focus-visible .ccd-logo-btn__ico { opacity: 1; }
.ccd-mode-mini { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-hover); }
.ccd-mini-opt { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.ccd-mini-opt:hover { color: var(--text-primary); }
.ccd-mini-opt[data-on="true"] { background: var(--surface-raised); color: var(--text-accent); box-shadow: var(--shadow-sm); }
.ccd-mini-opt .cca-status__dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; }
.ccd-nav .cca-sidebar.is-collapsed .cca-sidebar__body { overflow: visible; }
.ccd-nav .cca-sidebar.is-collapsed .ccd-nav__head { position: relative; padding: 12px 8px; align-items: center; }
.ccd-nav .cca-sidebar.is-collapsed .ccd-nav__foot { position: relative; align-items: center; }
.ccd-nav .cca-sidebar.is-collapsed .ccd-nav__acct { justify-content: center; padding: 8px 0 12px; }
.ccd-nav .cca-sidebar.is-collapsed .cca-sidebar__section { align-items: center; gap: 4px; }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem { position: relative; justify-content: center; width: 40px; height: 40px; padding: 0; gap: 0; }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem:hover { background: var(--surface-hover); }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem.is-active { background: var(--surface-selected); }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem .cca-navitem__trail { display: inline-flex; position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 10px; font-weight: 600; line-height: 1; color: var(--text-secondary); transition: opacity 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem:hover .cca-navitem__trail, .ccd-nav .cca-sidebar.is-collapsed .cca-navitem:focus-visible .cca-navitem__trail { opacity: 0; }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem .cca-navitem__label::after { content: attr(data-count); display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--surface-canvas); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem .cca-navitem__label:not([data-count])::after, .ccd-nav .cca-sidebar.is-collapsed .cca-navitem .cca-navitem__label[data-count=""]::after { display: none; }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem .cca-navitem__label, .ccd-nav .ccd-tip::after { display: flex; align-items: center; position: absolute; z-index: -1; left: calc(100% - 8px); top: 0; height: 100%; max-width: none; padding: 0 14px 0 18px; box-sizing: border-box; overflow: visible; white-space: nowrap; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-primary); background: var(--surface-hover); border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: var(--shadow-sm); opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-4px); pointer-events: none; transition: clip-path 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.ccd-nav .ccd-tip::after { content: attr(data-tip); }
.ccd-nav .ccd-tip, .ccd-nav .cca-sidebar.is-collapsed .cca-navitem { isolation: isolate; }
.ccd-nav .ccd-mini-opt[data-on="true"]::after { background: var(--surface-raised); }
[data-theme="dark"] .ccd-nav .ccd-mini-opt[data-on="true"]::after { background: var(--surface-selected); }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem.is-active .cca-navitem__label { background: var(--surface-selected); }
.ccd-nav .cca-sidebar.is-collapsed .cca-navitem:hover .cca-navitem__label, .ccd-nav .cca-sidebar.is-collapsed .cca-navitem:focus-visible .cca-navitem__label, .ccd-nav .ccd-tip:hover::after, .ccd-nav .ccd-tip:focus-visible::after { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition-delay: 60ms; }
@media (prefers-reduced-motion: reduce) { .ccd-nav .cca-navitem__label, .ccd-nav .ccd-tip::after { transition: opacity 120ms linear; } }

/* ---------- Portaal: bovenbalk (PortalNav.dc.html) ---------- */
.ccd-portal { min-height: 100vh; background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-sans); }
.ccd-pmain { width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 560px) { .ccd-pmain { padding: 24px 16px 48px; } }
.ccd-pbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 20px; height: 60px; padding: 0 24px; box-sizing: border-box; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-sans); color: var(--text-primary); }
.ccd-pbar__brand { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; color: var(--text-primary); text-decoration: none; }
.ccd-pbar__brand:hover { color: var(--text-primary); }
.ccd-pbar__wm, .ccd-pbar__mk { display: inline-flex; }
.ccd-pbar__mk { display: none; }
.ccd-pbar__sep { width: 1px; height: 20px; background: var(--border-strong); }
.ccd-pbar__client { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.ccd-pbar__links { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto; min-width: 0; height: 100%; overflow-x: auto; scrollbar-width: none; }
.ccd-pbar__link { position: relative; display: inline-flex; align-items: center; padding: 0 10px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.ccd-pbar__link:hover { color: var(--text-primary); }
.ccd-pbar__link[data-on="true"] { color: var(--text-primary); font-weight: 600; }
.ccd-pbar__link[data-on="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.ccd-pbar__link:focus-visible, .ccd-pbar__icon:focus-visible, .ccd-pbar__me:focus-visible, .ccd-pbar__brand:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.ccd-pbar__right { display: flex; align-items: center; gap: 6px; flex: none; }
.ccd-pbar__icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); text-decoration: none; font: inherit; cursor: pointer; }
.ccd-pbar__icon:hover { background: var(--surface-hover); color: var(--text-primary); }
.ccd-pbar__icon[data-on="true"] { background: var(--surface-selected); color: var(--text-primary); }
.ccd-pbar__menu { display: none; }
.ccd-pbar__dot { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface-raised); }
.ccd-pbar__lang { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.ccd-pbar__lang:hover { background: var(--surface-hover); color: var(--text-primary); }
.ccd-pbar__me { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: var(--radius-pill); text-decoration: none; color: var(--text-primary); }
.ccd-pbar__me:hover { background: var(--surface-hover); color: var(--text-primary); }
.ccd-pbar__me[data-on="true"] { background: var(--surface-selected); }
.ccd-pbar__me-name { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.ccd-pbar__mclient { display: none; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Compact: op gsm vanzelf, of geforceerd met compact (previews). */
.ccd-pbar--compact { height: 56px; padding: 0 12px 0 16px; gap: 8px; }
.ccd-pbar--compact .ccd-pbar__links, .ccd-pbar--compact .ccd-pbar__lang, .ccd-pbar--compact .ccd-pbar__me-name, .ccd-pbar--compact .ccd-pbar__sep, .ccd-pbar--compact .ccd-pbar__client, .ccd-pbar--compact .ccd-pbar__wm { display: none; }
.ccd-pbar--compact .ccd-pbar__mk { display: inline-flex; }
.ccd-pbar--compact .ccd-pbar__brand { flex: 1 1 auto; }
.ccd-pbar--compact .ccd-pbar__mclient { display: block; }
.ccd-pbar--compact .ccd-pbar__menu { display: grid; }
@media (max-width: 760px) {
    .ccd-pbar__wm { display: none; }
    .ccd-pbar__mk { display: inline-flex; }
    .ccd-pbar { height: 56px; padding: 0 12px 0 16px; gap: 8px; }
    .ccd-pbar__links, .ccd-pbar__lang, .ccd-pbar__me-name, .ccd-pbar__sep, .ccd-pbar__client { display: none; }
    .ccd-pbar__brand { flex: 1 1 auto; }
    .ccd-pbar__mclient { display: block; }
    .ccd-pbar__menu { display: grid; }
}

/* ---------- Portaal: gsm-menu (PortalMenu.dc.html), een modale <dialog> ---------- */
.ccd-pmenu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; flex-direction: column; overflow: hidden; background: var(--surface-raised); color: var(--text-primary); font-family: var(--font-sans); }
.ccd-pmenu[open] { display: flex; }
.ccd-pmenu::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (min-width: 761px) { .ccd-pmenu { left: auto; width: 390px; border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); } }
.ccd-pmenu__top { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--border-subtle); }
.ccd-pmenu__logo { display: inline-flex; color: var(--text-primary); }
.ccd-pmenu__client { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccd-pmenu__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; }
.ccd-pmenu__close:hover { background: var(--surface-hover); color: var(--text-primary); }
.ccd-pmenu__close:focus-visible, .ccd-pmenu__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ccd-pmenu__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; padding: 12px 12px 24px; gap: 4px; }
.ccd-pmenu__me { display: flex; align-items: center; gap: 12px; padding: 8px 8px 14px; }
.ccd-pmenu__who { display: flex; flex-direction: column; min-width: 0; }
.ccd-pmenu__who-name { font-size: 15px; line-height: 22px; font-weight: 600; }
.ccd-pmenu__who-meta { font-size: 13px; line-height: 18px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccd-pmenu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ccd-pmenu__link { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 12px; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 15.5px; line-height: 22px; font-weight: 500; }
.ccd-pmenu__link:hover { background: var(--surface-hover); color: var(--text-primary); }
.ccd-pmenu__link[data-on="true"] { background: var(--surface-selected); font-weight: 600; }
.ccd-pmenu__link-i { flex: none; display: inline-flex; color: var(--text-secondary); }
.ccd-pmenu__link[data-on="true"] .ccd-pmenu__link-i { color: var(--text-accent); }
.ccd-pmenu__link-t { flex: 1 1 auto; min-width: 0; }
.ccd-pmenu__link-x { flex: none; display: inline-flex; color: var(--text-tertiary); }
.ccd-pmenu__sep { height: 1px; margin: 8px 12px; background: var(--border-subtle); }
.ccd-pmenu__lang { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 4px 0 12px; font-size: 15.5px; line-height: 22px; font-weight: 500; }
.ccd-pmenu__lang-t { flex: 1 1 auto; }
.ccd-pmenu .cca-seg__opt { height: 32px; padding: 0 14px; }
.ccd-pmenu__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding-top: 16px; font-size: 12px; line-height: 16px; color: var(--text-tertiary); }
.ccd-pmenu__foot a { color: var(--text-tertiary); text-decoration: none; }

/* ---------- Componentenpagina en staten (States.dc.html) ---------- */
.ccd-pane--board { background: var(--surface-sidebar); padding: 48px; }
.ccd-pane--board > .ccd-pane__inner { max-width: 1344px; gap: 32px; }
@media (max-width: 760px) { .ccd-pane--board { padding: 24px 16px 48px; } }
.ccd-board-head { display: flex; flex-direction: column; gap: 6px; }
.ccd-board-head h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.ccd-board-head p { margin: 0; font-size: 15px; line-height: 24px; color: var(--text-secondary); }
.ccd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ccd-section { display: flex; flex-direction: column; gap: 12px; }
.ccd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 20px; align-items: start; }
.ccd-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); }
.ccd-over { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
.ccd-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-canvas); }
.ccd-card p { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.ccd-card--flush { padding: 0; overflow: hidden; }
.ccd-card__over { padding: 20px 20px 0; }
.ccd-card .cca-empty { padding: 24px 20px 28px; }
.ccd-card .cca-empty p.ccd-empty-text { max-width: 340px; font-size: 14px; line-height: 22px; }
.ccd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccd-meter { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.ccd-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--status-warning); }
.ccd-meter__mark { position: absolute; top: -3px; bottom: -3px; left: 80%; width: 1px; background: var(--border-strong); }
.ccd-mini { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); font-size: 13px; line-height: 18px; }
.ccd-mini .ccd-meta { font-size: 12px; line-height: 16px; }
.ccd-kv { display: flex; justify-content: space-between; gap: 12px; }
.ccd-kv strong { font-weight: 600; }
.ccd-kv span:last-child { font-variant-numeric: tabular-nums; }
.ccd-conflict { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--status-danger); border-radius: var(--radius-md); }
.ccd-conflict__title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.ccd-conflict__icon { display: inline-flex; color: var(--status-danger); }
.ccd-conflict__files { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; }
.ccd-conflict__file { display: flex; gap: 8px; align-items: center; }
/* Voorbeelden van de zijbalk en de bovenbalk in een kader. */
.ccd-frame { display: flex; min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-canvas); }
.ccd-frame .ccd-nav { height: 900px; }
.ccd-frame--demo-collapsed { margin-right: 120px; }
.ccd-card > .cca-seg { align-self: flex-start; }
.ccd-frame--bar { display: block; overflow: hidden; }
.ccd-frame--bar .ccd-pbar { position: relative; }
.ccd-frame--demo-collapsed .ccd-nav .cca-sidebar.is-collapsed .cca-navitem.is-active .cca-navitem__label { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
.ccd-frame--demo-collapsed .ccd-nav .cca-sidebar.is-collapsed .cca-navitem.is-active .cca-navitem__trail { opacity: 0; }
.ccd-specimen { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-canvas); min-width: 0; overflow: auto; }
.ccd-specimen .cca-scrim { border-radius: var(--radius-lg); }
.ccd-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; padding: var(--space-5); }
.ccd-icons__cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--radius-md); color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; line-height: 14px; text-align: center; word-break: break-all; }
.ccd-icons__cell .cca-icon { color: var(--text-primary); }
.ccd-appscreen { display: flex; height: 560px; min-width: 0; overflow: hidden; }
.ccd-appscreen__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ccd-appscreen__chat { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-5); }
.ccd-appscreen__composer { flex: none; display: flex; justify-content: center; padding: 0 var(--space-5) var(--space-5); }
@media (max-width: 960px) { .ccd-appscreen .cca-panel, .ccd-appscreen .cca-sidebar { display: none; } }
.ccd-swatch { display: inline-flex; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); }
.ccd-swatch--accent { background: var(--accent); }
.ccd-swatch--sidebar { background: var(--surface-sidebar); }
.ccd-row--tip { padding-top: 32px; }
.ccd-row--top { align-items: flex-start; }
.ccd-frame--phone { width: 390px; max-width: 100%; }
.ccd-panel-host { height: 360px; display: flex; justify-content: flex-end; }
.ccd-stack { display: flex; flex-direction: column; gap: 12px; }

/* Schrijfcontrole op een tekst die geen stuk is (stap F6): voorstel, maandrapport, concept-bericht. */
.ccd-wcheck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 18px; }
.ccd-wcheck li { display: flex; align-items: flex-start; gap: 8px; }
.ccd-wcheck__i { flex: none; display: inline-flex; padding-top: 2px; color: var(--status-warning); }
.ccd-wcheck li[data-blocking="true"] .ccd-wcheck__i { color: var(--status-danger); }
.ccd-wcheck__where { font-weight: 600; }
.ccd-wcheck__fix { display: block; margin-top: 2px; color: var(--text-secondary); }
.ccd-wcheck q { color: var(--text-secondary); }
.ccd-piece-link { display: inline-flex; align-items: center; gap: 8px; }
.ccd-rp-writing, .ccd-msg-writing { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Smalle schermen: rijen van het design system die anders uit het scherm lopen ----------
   bundle.css is een kopie van het ontwerp en blijft ongewijzigd; deze regels gelden alleen onder 760 px. */
@media (max-width: 760px) {
    /* Tabs scrollen horizontaal. De lijn onder de rij wordt een schaduw in 1 px padding, zodat het onderlijntje van de
       actieve tab (bottom: -1px) binnen de scrollzone valt en er hetzelfde uitziet. */
    .cca-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 0; padding-bottom: 1px; box-shadow: inset 0 -1px 0 var(--border-subtle); }
    .cca-tabs::-webkit-scrollbar { display: none; }
    .cca-tab { flex: none; white-space: nowrap; }
    /* Gesegmenteerde keuzes: hoogstens de breedte van het scherm, de rest scrolt. */
    .cca-seg { max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
    .cca-seg::-webkit-scrollbar { display: none; }
    .cca-seg__opt { flex: none; white-space: nowrap; }
    /* Instellingen: de bediening onder de tekst, op de volle breedte. */
    .cca-setting { flex-wrap: wrap; row-gap: var(--space-3); }
    .cca-setting__text { flex: 1 1 100%; min-width: 0; }
    .cca-setting__control { max-width: 100%; min-width: 0; }
    .cca-setting__control > * { max-width: 100%; }
}

/* ---------- Portaal op een gsm (PortalMobile.dc.html, PortalMobileHome.dc.html, 390 px breed) ---------- */
@media (max-width: 520px) {
    /* Velden: 16 px tekst, anders zoomt iOS in bij het typen. */
    body.portal .cca-field__control { height: 48px; padding: 0 12px; }
    body.portal .cca-field__control input, body.portal .cca-field__control select, body.portal textarea { font-size: 16px; }
    /* Banners (bv. passkey aanmaken): tekst op de volle breedte, de knop eronder. */
    body.portal .cca-banner { flex-wrap: wrap; row-gap: 10px; padding: 12px 14px; }
    body.portal .cca-banner__text { flex: 1 1 0; min-width: 0; }
    body.portal .cca-banner > .cca-btn { flex: 1 1 100%; height: 40px; }

    /* Overzicht en cijfers (PortalMobileHome): titels 24/30 en 15/22, kaarten 16 px. */
    body.portal .ccd-rl-h1, body.portal .ccd-nb-h1 { font-size: 24px; line-height: 30px; letter-spacing: -0.02em; }
    body.portal .ccd-rl-h2, body.portal .ccd-nb-h2 { font-size: 15px; line-height: 22px; letter-spacing: -0.01em; }
    body.portal .ccd-rl-card, body.portal .ccd-nb-card { padding: 16px; gap: 12px; }
    body.portal .ccd-ph-ask { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
    body.portal .ccd-ph-ask__t { flex: none; }
    body.portal .ccd-ph-ask__t b { font-size: 15px; line-height: 21px; }
    body.portal .ccd-ph-ask .cca-btn { width: 100%; height: 44px; }
    body.portal .ccd-ph-ask .cca-btn .cca-icon { display: none; }
    body.portal .ccd-nb-toolbar .cca-seg__opt { padding: 0 8px; font-size: 12.5px; }

    /* Audit (PortalMobile): titels 24/31 en 16/22, kaarten 18 px, knoppen 46 px. */
    body.portal .ccd-pau-h1 { font-size: 24px; line-height: 31px; letter-spacing: -0.02em; }
    body.portal .ccd-pau-h2 { font-size: 16px; line-height: 22px; letter-spacing: -0.01em; }
    body.portal .ccd-pau-card, body.portal .ccd-pau-ready { padding: 18px; gap: 14px; }
    body.portal .ccd-pau-card .cca-btn--md, body.portal .ccd-pau-ready .cca-btn--md { height: 46px; padding: 0 18px; font-size: 15px; }
}