@import '_content/Ratho.Cockpit.UI/Ratho.Cockpit.UI.vnudxa5lxv.bundle.scp.css';
@import '_content/Ratho.Shared.UI/Ratho.Shared.UI.lw7ourqvks.bundle.scp.css';
@import '_content/Ratho.SparkForge.UI/Ratho.SparkForge.UI.yiau96ljf7.bundle.scp.css';

/* /Components/Chat/PendingWriteApproval.razor.rz.scp.css */
/* De goedkeuringskaart in het gesprek (#3639). Zelfde warme kaartidioom als de goedkeuringenlijst,
   maar smaller: hij hoort bij de laatste beurt, niet bij de pagina. */
.ck-chat-approval[b-48w8vebnuz] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-accent-soft);
    border-left: 3px solid var(--ck-accent);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-4);
    margin-bottom: var(--ck-space-2);
}

.ck-chat-approval__head[b-48w8vebnuz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
}

.ck-chat-approval__icon[b-48w8vebnuz] {
    font-size: 1.15rem;
    color: var(--ck-accent-ink);
}

.ck-chat-approval__title[b-48w8vebnuz] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-chat-approval__meta[b-48w8vebnuz] {
    margin-left: auto;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.ck-chat-approval__intro[b-48w8vebnuz] {
    margin: var(--ck-space-2) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-chat-approval__label[b-48w8vebnuz] {
    margin-top: var(--ck-space-3);
    font-size: var(--ck-text-xs);
    letter-spacing: var(--ck-tracking-wide);
    text-transform: uppercase;
    color: var(--ck-text-muted);
}

.ck-chat-approval__body[b-48w8vebnuz] {
    margin: var(--ck-space-1) 0 0;
    padding: var(--ck-space-3);
    max-height: 16rem;
    overflow: auto;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    font-size: var(--ck-text-xs);
    line-height: var(--ck-leading-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
}

.ck-chat-approval__actions[b-48w8vebnuz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
}

.ck-chat-approval__btn[b-48w8vebnuz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--ck-radius-full);
    border: 1px solid var(--ck-border-strong);
    background: var(--ck-surface);
    color: var(--ck-text);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    cursor: pointer;
}

.ck-chat-approval__btn:disabled[b-48w8vebnuz] {
    color: var(--ck-text-disabled);
    cursor: default;
}

.ck-chat-approval__btn--primary[b-48w8vebnuz] {
    background: var(--ck-accent);
    border-color: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-chat-approval__btn--ghost[b-48w8vebnuz] {
    background: transparent;
}

.ck-chat-approval__btn-icon[b-48w8vebnuz] {
    font-size: 1rem;
}

.ck-chat-approval__link[b-48w8vebnuz] {
    margin-left: auto;
    font-size: var(--ck-text-sm);
    color: var(--ck-accent);
    text-decoration: underline;
}

/* De vier standen (#3657). De eerste vraagt iets van je en houdt daarom de accentrand; de andere drie
   vertellen iets en worden rustiger naarmate er minder te doen valt. */
.ck-chat-approval--waiting[b-48w8vebnuz] {
    border-left-color: var(--ck-text-muted);
}

.ck-chat-approval--done[b-48w8vebnuz] {
    border-left-color: var(--ck-accent-soft);
    box-shadow: none;
}

.ck-chat-approval--expired[b-48w8vebnuz] {
    border-left-color: var(--ck-border-strong);
    box-shadow: none;
}
/* /Components/Dashboards/DashboardViewer.razor.rz.scp.css */
/* Dashboard-detail · consumer trust-layer (#1347 Werkvlakken frame).
   Warm Richting-A vocabulary via --ck- tokens — the read-only "what Studio composed" signals. */

.dash-studio-badge[b-umo97796sn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    color: var(--ck-text-muted);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: 6px 12px;
    box-shadow: var(--ck-shadow-sm);
}

.dash-refresh[b-umo97796sn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--ck-text-subtle);
}

.dash-refresh-dot[b-umo97796sn] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-success);
    animation: dash-dot-pulse-b-umo97796sn 1.8s ease-in-out infinite;
}

.dash-provenance[b-umo97796sn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--ck-text-subtle);
}

[b-umo97796sn] .dash-correct {
    margin-left: var(--ck-space-3);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ck-accent-ink);
}

@keyframes dash-dot-pulse-b-umo97796sn {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-refresh-dot[b-umo97796sn] {
        animation: none;
    }
}
/* /Components/Demo/DemoLanding.razor.rz.scp.css */
/* ============================================================
   Demo landing (/demo) — scoped styles
   Demo-only: only loaded when /demo is in the render tree.
   Uses existing CSS custom-properties from the Cockpit design system.
   No new color palette is introduced.
   ============================================================ */

/* ── Hero strip ─────────────────────────────────────────────────────────────── */
.dl-demo-hero[b-aowbl6xm9p] {
    margin-bottom: var(--ck-space-8);
}

/* ── Tier cards ─────────────────────────────────────────────────────────────── */
.dl-tier-grid[b-aowbl6xm9p] {
    --tier-transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dl-tier-card[b-aowbl6xm9p] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
    transition: var(--tier-transition);
}

.dl-tier-card:hover[b-aowbl6xm9p] {
    transform: translateY(-3px);
}

.dl-tier-card__icon-box[b-aowbl6xm9p] {
    /* One treatment for all four levels (MERKKOMPAS §7: same colours, no per-level palette).
       The brand wash is a faint fill only; the icon itself stays ink. */
    background: var(--ck-primary-subtle);
    color: var(--ck-primary-text);
}

.dl-tier-badge[b-aowbl6xm9p] {
    font-size: var(--ck-text-xs);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dl-tier-card__name[b-aowbl6xm9p] {
    font-size: var(--ck-text-lg);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.dl-tier-card__kernwoord[b-aowbl6xm9p] {
    /* The relation. Plain ink: the brand gradient runs into light amber, which is not a text colour. */
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.dl-tier-card__coreline[b-aowbl6xm9p] {
    font-size: var(--ck-text-xl);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0;
    line-height: 1.25;
}

.dl-tier-card__wow[b-aowbl6xm9p] {
    flex: 1;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ck-text-sm);
    line-height: 1.5;
}

/* Price per user per month, with the annual price (or Start's route) as a quieter second line. */
.dl-tier-card__price[b-aowbl6xm9p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ck-space-1);
    margin-top: auto;
    padding-top: var(--ck-space-3);
    border-top: 1px solid var(--mud-palette-lines-inputs);
}

.dl-tier-card__price-main[b-aowbl6xm9p] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--ck-space-1-5);
}

.dl-tier-card__price-amount[b-aowbl6xm9p] {
    font-size: var(--ck-text-xl);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dl-tier-card__price-period[b-aowbl6xm9p],
.dl-tier-card__price-note[b-aowbl6xm9p] {
    font-size: var(--ck-text-sm);
    color: var(--mud-palette-text-secondary);
}

.dl-pricing-note[b-aowbl6xm9p] {
    margin: var(--ck-space-4) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--mud-palette-text-secondary);
    max-width: var(--ck-reading-max);
}

.dl-tier-card__cta[b-aowbl6xm9p] {
    margin-top: var(--ck-space-2);
}

/* ── Help-mode cards ─────────────────────────────────────────────────────────── */
.dl-helpmode-card[b-aowbl6xm9p] {
    text-align: center;
}

/* ── The demo account on a card ───────────────────────────────────────────── */
.dl-tier-card__account[b-aowbl6xm9p] {
    margin-top: var(--ck-space-3);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    word-break: break-all;
}

/* ── Responsive adjustments ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dl-tier-grid[b-aowbl6xm9p] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .dl-tier-grid[b-aowbl6xm9p] {
        grid-template-columns: 1fr !important;
    }
}
/* /Components/Feedback/FeedbackDialog.razor.rz.scp.css */
/* Feedback dialog (Lane M3) — warm chrome via MudBlazor hooks + --ck- tokens.
   Header divider + warm footer floor; fields stay MudBlazor (CockpitTheme). */

.fb-dlg[b-hepvqwkz90]  .mud-dialog-title {
    padding: 18px 22px 15px;
    border-bottom: 1px solid var(--ck-border);
}

.fb-dlg[b-hepvqwkz90]  .mud-dialog-content {
    padding: 18px 22px;
}

.fb-dlg[b-hepvqwkz90]  .mud-dialog-actions {
    padding: 14px 22px;
    margin: 0;
    background: var(--ck-surface);
    border-top: 1px solid var(--ck-border);
    gap: 10px;
}

/* Read-only page-context line */
.fb-context[b-hepvqwkz90] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    line-height: 1.45;
}

.fb-context[b-hepvqwkz90]  .mud-icon-root {
    color: var(--ck-text-subtle);
}
/* /Components/Home/InboxSection.razor.rz.scp.css */
/* Jouw inbox — warm Richting-A task cards (#1381). Each row is a calm tile + title +
   honest meta + deadline + an "Openen" action. Filled-accent tile and a red dot mark the
   genuinely urgent ones (overdue / due-soon / Critical). Status colours are LOCKED. */

/* min-width: 0 lets the section shrink inside any grid or flex parent; without it the nowrap title and meta lines
   become the section's minimum width and push the card past the screen (#4027). */
.ck-inbox[b-cjsu4kn8nk] {
    display: block;
    min-width: 0;
}

.ck-inbox__header[b-cjsu4kn8nk] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-3);
}

.ck-inbox__eyebrow[b-cjsu4kn8nk] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text-subtle);
}

.ck-inbox__hint[b-cjsu4kn8nk] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.ck-inbox__spacer[b-cjsu4kn8nk] {
    flex: 1;
}

.ck-inbox__source[b-cjsu4kn8nk] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.ck-inbox__source-icon[b-cjsu4kn8nk] {
    color: var(--ck-success);
}

.ck-inbox__list[b-cjsu4kn8nk] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

.ck-inbox-card[b-cjsu4kn8nk] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-4);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-4);
    box-shadow: var(--ck-shadow-sm);
}

.ck-inbox-card__tile[b-cjsu4kn8nk] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--ck-radius-sm);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ck-inbox-card__tile--strong[b-cjsu4kn8nk] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-inbox-card__tile-glyph[b-cjsu4kn8nk] {
    font-size: var(--ck-text-md);
}

.ck-inbox-card__body[b-cjsu4kn8nk] {
    flex: 1;
    min-width: 0;
}

.ck-inbox-card__title[b-cjsu4kn8nk] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-inbox-card__meta[b-cjsu4kn8nk] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-inbox-card__due[b-cjsu4kn8nk] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-inbox-card__due--urgent[b-cjsu4kn8nk] {
    color: var(--ck-error);
    font-weight: var(--ck-weight-semibold);
}

.ck-inbox-card__due-dot[b-cjsu4kn8nk] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ck-error);
}

.ck-inbox-card__action[b-cjsu4kn8nk] {
    flex: none;
    font-family: inherit;
    border: 1px solid var(--ck-border-strong);
    background: var(--ck-surface);
    color: var(--ck-text-muted);
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-2) var(--ck-space-4);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.ck-inbox-card__action:hover[b-cjsu4kn8nk] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-text);
}

.ck-inbox-card__action--primary[b-cjsu4kn8nk] {
    border: none;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    box-shadow: var(--ck-shadow-sm);
}

.ck-inbox-card__action--primary:hover[b-cjsu4kn8nk] {
    background: var(--ck-accent-hover);
    color: var(--ck-accent-contrast);
}

/* Narrow screens: tile, deadline and "Openen" have fixed widths, and on a phone they leave the title too little
   room — at 320px they no longer fit at all and the button sticks out of the card (#4027). Title and meta take the
   whole first row; the deadline and the action move to a second row. */
@media (max-width: 40rem) {
    .ck-inbox-card:not(.ck-inbox-card--skeleton)[b-cjsu4kn8nk] {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        grid-template-areas:
            "tile body body"
            "due  due  action";
        row-gap: var(--ck-space-3);
    }

    .ck-inbox-card__tile[b-cjsu4kn8nk] { grid-area: tile; }
    .ck-inbox-card__body[b-cjsu4kn8nk] { grid-area: body; }
    .ck-inbox-card__due[b-cjsu4kn8nk] { grid-area: due; }
    .ck-inbox-card__action[b-cjsu4kn8nk] { grid-area: action; }
}

/* Empty + loading states */
.ck-inbox__empty[b-cjsu4kn8nk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-8) var(--ck-space-6);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
}

.ck-inbox__empty-icon[b-cjsu4kn8nk] {
    width: 52px;
    height: 52px;
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-success);
    box-shadow: var(--ck-shadow-sm);
}

.ck-inbox__empty-title[b-cjsu4kn8nk] {
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-inbox-card--skeleton[b-cjsu4kn8nk] {
    pointer-events: none;
}

.ck-inbox-card__skel-line[b-cjsu4kn8nk] {
    display: block;
    height: 13px;
    border-radius: var(--ck-radius-sm);
}

.ck-inbox-card__skel-line + .ck-inbox-card__skel-line[b-cjsu4kn8nk] {
    margin-top: var(--ck-space-2);
    width: 40%;
}

.ck-inbox-card__skel-line--wide[b-cjsu4kn8nk] {
    width: 62%;
}

/* Wat er NIET in deze tegel staat (#3639) — beslissingen wachten bij Goedkeuringen. Rustige voetregel,
   alleen zichtbaar als er echt iets wacht. */
.ck-inbox__elsewhere[b-cjsu4kn8nk] {
    display: inline-block;
    margin-top: var(--ck-space-3);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    text-decoration: underline;
}

.ck-inbox__elsewhere:hover[b-cjsu4kn8nk],
.ck-inbox__elsewhere:focus-visible[b-cjsu4kn8nk] {
    color: var(--ck-accent-ink);
}
/* /Components/Home/SuggestionsSection.razor.rz.scp.css */
/* Suggesties van de assistent — warm right-rail cards (#1381). A calm accent-tint icon tile,
   a short reason, and a primary / "Later" action pair. Lives in the Vandaag rail. */

.ck-suggest[b-m8qb2evbn1] {
    display: block;
}

.ck-suggest__eyebrow[b-m8qb2evbn1] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text-subtle);
    margin-bottom: var(--ck-space-3);
}

.ck-suggest__list[b-m8qb2evbn1] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

.ck-suggest-card[b-m8qb2evbn1] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    padding: var(--ck-space-4);
    box-shadow: var(--ck-shadow-sm);
}

.ck-suggest-card__head[b-m8qb2evbn1] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
}

.ck-suggest-card__icon[b-m8qb2evbn1] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--ck-radius-sm);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ck-suggest-card__icon-glyph[b-m8qb2evbn1] {
    font-size: var(--ck-text-base);
}

.ck-suggest-card__title[b-m8qb2evbn1] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-suggest-card__reason[b-m8qb2evbn1] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-normal);
    margin: var(--ck-space-2) 0 0;
}

.ck-suggest-card__actions[b-m8qb2evbn1] {
    display: flex;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
}

.ck-suggest-card__btn[b-m8qb2evbn1] {
    font-family: inherit;
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-2) var(--ck-space-3);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ck-suggest-card__btn--primary[b-m8qb2evbn1] {
    flex: 1;
    border: none;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-suggest-card__btn--primary:hover[b-m8qb2evbn1] {
    background: var(--ck-accent-ink);
}

.ck-suggest-card__btn--ghost[b-m8qb2evbn1] {
    border: 1px solid var(--ck-border-strong);
    background: transparent;
    color: var(--ck-text-muted);
    font-weight: var(--ck-weight-medium);
}

.ck-suggest-card__btn--ghost:hover[b-m8qb2evbn1] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-text);
}

.ck-suggest-card--skeleton[b-m8qb2evbn1] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
}

.ck-suggest-card__skel-line[b-m8qb2evbn1] {
    display: block;
    height: 12px;
    border-radius: var(--ck-radius-sm);
    width: 50%;
}

.ck-suggest-card__skel-line--wide[b-m8qb2evbn1] {
    width: 80%;
}
/* /Components/Home/WorkdaySection.razor.rz.scp.css */
.workday[b-lck40tw0i3] {
    padding: var(--ck-space-5);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface-raised);
    min-width: 0;
}

.workday__header[b-lck40tw0i3], .workday__heading[b-lck40tw0i3], .workday__source-header[b-lck40tw0i3], .workday__item[b-lck40tw0i3], .workday__setup[b-lck40tw0i3] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
}

.workday__header[b-lck40tw0i3], .workday__item[b-lck40tw0i3] { justify-content: space-between; }
.workday__heading[b-lck40tw0i3], .workday__setup[b-lck40tw0i3] { align-items: flex-start; }
.workday__heading[b-lck40tw0i3] { color: var(--ck-text-muted); }
.workday h2[b-lck40tw0i3], .workday h3[b-lck40tw0i3], .workday h4[b-lck40tw0i3] { margin: 0; color: var(--ck-text); }
.workday h2[b-lck40tw0i3] { font-size: var(--ck-text-lg); font-weight: var(--ck-weight-semibold); }
.workday h3[b-lck40tw0i3], .workday h4[b-lck40tw0i3] { font-size: var(--ck-text-sm); font-weight: var(--ck-weight-semibold); }
.workday__heading p[b-lck40tw0i3], .workday__fetched[b-lck40tw0i3] {
    margin: var(--ck-space-1) 0 0;
    color: var(--ck-text-muted);
    font-size: var(--ck-text-xs);
    line-height: var(--ck-leading-relaxed);
}
.workday__settings[b-lck40tw0i3], .workday__setup[b-lck40tw0i3] {
    margin-top: var(--ck-space-4);
    padding: var(--ck-space-3);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
}
.workday__settings summary[b-lck40tw0i3] { cursor: pointer; font-size: var(--ck-text-sm); }
.workday__settings summary[b-lck40tw0i3]  svg { vertical-align: middle; margin-right: var(--ck-space-2); }
.workday__settings-body[b-lck40tw0i3] { padding-top: var(--ck-space-3); }
.workday__setup h3[b-lck40tw0i3] { margin-bottom: var(--ck-space-2); }
.workday__source[b-lck40tw0i3] { margin-top: var(--ck-space-5); }
.workday__source-header[b-lck40tw0i3] { color: var(--ck-text-muted); gap: var(--ck-space-2); }
.workday__count[b-lck40tw0i3] { margin-left: auto; font-size: var(--ck-text-xs); font-variant-numeric: tabular-nums; }
.workday__fetched[b-lck40tw0i3] { margin-bottom: var(--ck-space-3); }
.workday__item[b-lck40tw0i3] { padding: var(--ck-space-3) 0; border-top: 1px solid var(--ck-border); }
.workday__item-content[b-lck40tw0i3] { min-width: 0; overflow-wrap: anywhere; }
.workday__item h4[b-lck40tw0i3] { margin-bottom: var(--ck-space-1); line-height: var(--ck-leading-relaxed); }
.workday__item[b-lck40tw0i3]  .mud-button-root { flex-shrink: 0; }
.workday__footer[b-lck40tw0i3] { margin-top: var(--ck-space-4); padding-top: var(--ck-space-3); border-top: 1px solid var(--ck-border); }

@media (max-width: 600px) {
    .workday[b-lck40tw0i3] { padding: var(--ck-space-4); }
    .workday__header[b-lck40tw0i3] { align-items: flex-start; flex-wrap: wrap; }
    .workday__item[b-lck40tw0i3] { align-items: flex-start; flex-direction: column; }
}
/* /Components/Pages/Agents/Index.razor.rz.scp.css */
/* Agents workspace (#1347) — warm rebuild of "Agent-configuratie · lijst + instellingen-paneel".
   Mockup: docs/proposals/immersive-design-kit/designs/"Cockpit App - Agents.dc.html".
   All colours map to the warm --ck- tokens; the accent family recolours per tenant. */

.agents-surface[b-rfmbsjlgjh] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-bg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), .05), 0 24px 60px -34px rgba(var(--ck-shadow-rgb), .22);
}

/* breadcrumb strip */
.agents-surface__bar[b-rfmbsjlgjh] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    flex: none;
    padding: 0 24px;
    border-bottom: 1px solid var(--ck-border);
    background: var(--ck-surface);
}

.agents-crumb[b-rfmbsjlgjh] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.agents-crumb--current[b-rfmbsjlgjh] {
    font-weight: 600;
    color: var(--ck-text);
}

.agents-crumb__sep[b-rfmbsjlgjh] {
    color: var(--ck-border-strong);
}

/* master-detail body */
.agents-surface__body[b-rfmbsjlgjh] {
    display: flex;
    align-items: stretch;
    min-height: 560px;
}

/* ---- agent list ---- */
.agents-list[b-rfmbsjlgjh] {
    width: 264px;
    flex: none;
    border-right: 1px solid var(--ck-border);
    background: var(--ck-surface);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agents-list__title[b-rfmbsjlgjh] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    padding: 2px 6px 4px;
}

.agent-tile[b-rfmbsjlgjh] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--ck-border);
    border-radius: 12px;
    background: var(--ck-surface-raised);
    padding: 12px 13px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), .04);
    transition: border-color var(--ck-duration-fast) var(--ck-ease-default),
                background var(--ck-duration-fast) var(--ck-ease-default);
    font: inherit;
    color: var(--ck-text);
}

.agent-tile:hover[b-rfmbsjlgjh] {
    border-color: var(--ck-border-strong);
}

.agent-tile--active[b-rfmbsjlgjh] {
    background: var(--ck-accent-tint);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px var(--ck-accent-glow);
}

.agent-tile__icon[b-rfmbsjlgjh] {
    width: 30px;
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ck-surface-high);
    color: var(--ck-text-subtle);
}

.agent-tile--active .agent-tile__icon[b-rfmbsjlgjh] {
    background: var(--ck-surface-raised);
    color: var(--ck-accent-ink);
}

.agent-tile__text[b-rfmbsjlgjh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.agent-tile__name[b-rfmbsjlgjh] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
}

.agent-tile--active .agent-tile__name[b-rfmbsjlgjh] {
    color: var(--ck-accent-ink);
}

.agent-tile__summary[b-rfmbsjlgjh] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.agent-tile--active .agent-tile__summary[b-rfmbsjlgjh] {
    color: var(--ck-accent-ink);
}

/* ---- config panel ---- */
.agent-config[b-rfmbsjlgjh] {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    overflow-y: auto;
}

.agent-config__head[b-rfmbsjlgjh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.agent-config__title[b-rfmbsjlgjh] {
    font-size: var(--ck-text-md);
    font-weight: 600;
    margin: 0;
    color: var(--ck-text);
}

.agent-config__desc[b-rfmbsjlgjh] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: 5px 0 0;
}

.agent-active[b-rfmbsjlgjh] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.agent-active__text[b-rfmbsjlgjh] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-accent-ink);
}

/* settings grid */
.agent-config__grid[b-rfmbsjlgjh] {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 640px;
}

.agent-field--full[b-rfmbsjlgjh] {
    grid-column: span 2;
}

.agent-field__label[b-rfmbsjlgjh] {
    display: block;
    font-size: var(--ck-text-xs);
    font-weight: 500;
    color: var(--ck-text-muted);
    margin-bottom: 6px;
}

.agent-field__input[b-rfmbsjlgjh] {
    width: 100%;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border-strong);
    border-radius: 10px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    line-height: 1.5;
    transition: border-color var(--ck-duration-fast) var(--ck-ease-default),
                box-shadow var(--ck-duration-fast) var(--ck-ease-default);
}

.agent-field__input:hover[b-rfmbsjlgjh] {
    border-color: var(--ck-text-disabled);
}

.agent-field__input:focus[b-rfmbsjlgjh],
.agent-field__input:focus-visible[b-rfmbsjlgjh] {
    outline: none;
    border-color: var(--ck-border-focus);
    box-shadow: var(--ck-shadow-glow);
}

.agent-field__input--focus[b-rfmbsjlgjh] {
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px var(--ck-accent-glow);
}

/* guardrails */
.agent-config__section-label[b-rfmbsjlgjh] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ck-text-subtle);
    font-weight: 600;
    margin: 22px 0 11px;
}

.agent-guardrails[b-rfmbsjlgjh] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 640px;
}

.guardrail[b-rfmbsjlgjh] {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 11px;
    padding: 8px 14px;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), .04);
}

.guardrail__shield[b-rfmbsjlgjh] {
    font-size: var(--ck-text-base);
    flex: none;
    color: var(--ck-text-subtle);
}

.guardrail--on .guardrail__shield[b-rfmbsjlgjh] {
    color: var(--ck-success);
}

.guardrail__label[b-rfmbsjlgjh] {
    flex: 1;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
}

/* trust line */
.agent-trust[b-rfmbsjlgjh] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    max-width: 640px;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.agent-trust__icon[b-rfmbsjlgjh] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
    flex: none;
}

/* save action */
.agent-config__actions[b-rfmbsjlgjh] {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    max-width: 640px;
}

/* stack the master-detail on narrow viewports */
@media (max-width: 720px) {
    .agents-surface__body[b-rfmbsjlgjh] {
        flex-direction: column;
    }

    .agents-list[b-rfmbsjlgjh] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--ck-border);
    }

    .agent-config__grid[b-rfmbsjlgjh] {
        grid-template-columns: 1fr;
    }

    .agent-field--full[b-rfmbsjlgjh] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Approvals/ApprovalDetailPanel.razor.rz.scp.css */
/* The folded evidence block on an approval card (#3569). It has to sit IN the card, not on it:
   MudBlazor's panel ships a surface, a radius and its own padding, and all three would read as a
   second card inside the first one. */

.ck-approval__detail[b-g728063z9i] {
    margin-top: var(--ck-space-4);
    background: transparent;
}

/* The heading repeats the card's own section-label look. It is spelled out here rather than
   borrowed, because scoped CSS does not cross a component boundary: Overview.razor.css styles
   Overview's own markup and reaches nothing rendered in here. */
.ck-approval__detail-title[b-g728063z9i] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    font-weight: var(--ck-weight-semibold);
}

[b-g728063z9i] .ck-approval__detail-icon {
    margin-right: var(--ck-space-2);
    vertical-align: middle;
    color: var(--ck-accent-ink);
}

pre[b-g728063z9i] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 28rem;
    overflow: auto;
}

[b-g728063z9i] .mud-expand-panel {
    background: transparent;
}

[b-g728063z9i] .mud-expand-panel-header {
    padding: 0;
}

[b-g728063z9i] .mud-expand-panel-content {
    padding: var(--ck-space-2) 0 0;
}

/* MudBlazor draws a divider above a panel to separate it from the one before it. There is only
   ever one panel here, so that line has nothing to separate and reads as a stray rule. */
[b-g728063z9i] .mud-expand-panel::before {
    display: none;
}
/* /Components/Pages/Approvals/ApprovalDocStoreDiff.razor.rz.scp.css */
/* The document change on an approval card (#4174) — the agreements version diff's treatment, card-sized. */
.dsd-summary[b-7c2lpk43o8] {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.dsd-summary--delete[b-7c2lpk43o8] {
    color: var(--ck-error);
}

.dsd-count[b-7c2lpk43o8] {
    font-family: var(--ck-font-mono);
    font-weight: 600;
}

.dsd-count--add[b-7c2lpk43o8] { color: var(--ck-success); }
.dsd-count--del[b-7c2lpk43o8] { color: var(--ck-error); }

.dsd-meta[b-7c2lpk43o8] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-bottom: 4px;
}

.dsd-diff[b-7c2lpk43o8] {
    border: 1px solid var(--ck-border);
    border-radius: 11px;
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
    font-size: var(--ck-text-sm);
    line-height: 1.5;
}

.dsd-line[b-7c2lpk43o8] {
    display: flex;
    gap: 12px;
    padding: 4px 14px;
    color: var(--ck-text-muted);
}

.dsd-line + .dsd-line[b-7c2lpk43o8] {
    border-top: 1px solid var(--ck-border);
}

.dsd-gutter[b-7c2lpk43o8] {
    flex: none;
    width: 16px;
    text-align: center;
    font-family: var(--ck-font-mono);
    font-weight: 700;
    color: var(--ck-text-disabled);
}

.dsd-text[b-7c2lpk43o8] {
    white-space: pre-wrap;
    word-break: break-word;
}

.dsd-line--add[b-7c2lpk43o8] {
    background: var(--ck-success-subtle);
    color: var(--ck-success);
}

.dsd-line--add .dsd-gutter[b-7c2lpk43o8] { color: var(--ck-success); }

.dsd-line--del[b-7c2lpk43o8] {
    background: var(--ck-error-subtle);
    color: var(--ck-error);
}

.dsd-line--del .dsd-gutter[b-7c2lpk43o8] { color: var(--ck-error); }

.dsd-line--del .dsd-text[b-7c2lpk43o8] {
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--ck-error) 50%, transparent);
}

.dsd-line--fold[b-7c2lpk43o8] {
    color: var(--ck-text-disabled);
}

.dsd-none[b-7c2lpk43o8] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: 6px;
}
/* /Components/Pages/Approvals/ApprovalExpiry.razor.rz.scp.css */
/* The deadline strip on an approval card: words first, the local moment beside them, the lifetime bar underneath.
   The bar reuses the shared ck-meter track and fills; only the urgency tints the words. */

.ck-expiry[b-7vuu9szksy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--ck-space-2);
    row-gap: var(--ck-space-1-5);
    margin-top: var(--ck-space-4);
}

.ck-expiry[b-7vuu9szksy]  .ck-expiry__icon {
    font-size: 1.05rem;
    color: var(--ck-text-muted);
}

.ck-expiry__left[b-7vuu9szksy] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-expiry__until[b-7vuu9szksy] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-expiry__track[b-7vuu9szksy] {
    flex: 1 1 100%;
    height: 4px;
}

.ck-expiry--today .ck-expiry__left[b-7vuu9szksy],
.ck-expiry--today[b-7vuu9szksy]  .ck-expiry__icon {
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
}

.ck-expiry--soon .ck-expiry__left[b-7vuu9szksy],
.ck-expiry--soon[b-7vuu9szksy]  .ck-expiry__icon {
    color: var(--ck-error);
}

.ck-expiry--expired .ck-expiry__left[b-7vuu9szksy] {
    color: var(--ck-text-muted);
}
/* /Components/Pages/Approvals/ApprovalProcessChange.razor.rz.scp.css */
/* A process's details as a change proposes them (#1722) — every value whole, the old one muted, the new one plain. */
.apc-list[b-8hlu4ye45t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--ck-border);
    border-radius: 11px;
    padding: 12px;
    max-height: 480px;
    overflow-y: auto;
}

.apc-name[b-8hlu4ye45t] {
    font-size: var(--ck-text-sm);
    font-weight: 600;
}

.apc-values[b-8hlu4ye45t] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: var(--ck-text-sm);
}

.apc-value[b-8hlu4ye45t] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.apc-value--from[b-8hlu4ye45t] {
    color: var(--ck-text-muted);
}

.apc-arrow[b-8hlu4ye45t] {
    color: var(--ck-text-muted);
}

.apc-meta[b-8hlu4ye45t],
.apc-none[b-8hlu4ye45t] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: 8px;
}
/* /Components/Pages/Approvals/History.razor.rz.scp.css */
/* Readable approval history (WP-30) — the same warm card language as the approvals queue next door, but a
   row here is a record of what happened rather than something to act on, so it carries no action row. */

.ck-history[b-f5syjin2gs] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

.ck-history__row[b-f5syjin2gs] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-5);
}

.ck-history__head[b-f5syjin2gs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
}

.ck-history__title[b-f5syjin2gs] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ck-history__time[b-f5syjin2gs] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.ck-history__section-label[b-f5syjin2gs] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
    margin-top: var(--ck-space-4);
}

.ck-history__summary[b-f5syjin2gs] {
    margin: var(--ck-space-2) 0 0;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ck-history__facts[b-f5syjin2gs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--ck-space-3);
    margin: var(--ck-space-4) 0 0;
}

.ck-history__facts dt[b-f5syjin2gs] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
}

.ck-history__facts dd[b-f5syjin2gs] {
    margin: 2px 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

/* An account id is machine text; monospace keeps a near-miss readable. */
.ck-history__actor[b-f5syjin2gs] {
    font-family: var(--ck-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--ck-text-xs);
}

.ck-history__reason[b-f5syjin2gs] {
    margin-top: var(--ck-space-2);
}

.ck-history__reason-text[b-f5syjin2gs] {
    margin: var(--ck-space-2) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

.ck-history__explain[b-f5syjin2gs] {
    margin: var(--ck-space-4) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* Filters */

.ck-history__filters[b-f5syjin2gs] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

.ck-history__scope[b-f5syjin2gs],
.ck-history__outcomes[b-f5syjin2gs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
}

.ck-history__pill[b-f5syjin2gs] {
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: var(--ck-space-1) var(--ck-space-3);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-default),
        color var(--ck-duration-fast) var(--ck-ease-default),
        border-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-history__pill:hover:not(:disabled)[b-f5syjin2gs] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-text);
}

.ck-history__pill:disabled[b-f5syjin2gs] {
    opacity: 0.6;
    cursor: default;
}

.ck-history__pill.is-active[b-f5syjin2gs] {
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    border-color: transparent;
    font-weight: var(--ck-weight-semibold);
}

.ck-history__dates-note[b-f5syjin2gs] {
    margin: 0;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

/* Pager */

.ck-history__pager[b-f5syjin2gs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
}

.ck-history__pager-count[b-f5syjin2gs] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}
/* /Components/Pages/Approvals/Overview.razor.rz.scp.css */
/* Warm approval cards (#1347) — "voorgesteld door de assistent" proposals. */

.ck-approvals[b-kz4y6k1grt] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

.ck-approval[b-kz4y6k1grt] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-5);
}

.ck-approval__head[b-kz4y6k1grt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
}

.ck-approval__chip-icon[b-kz4y6k1grt] {
    font-size: 0.95rem;
    margin-right: 3px;
}

.ck-approval__title[b-kz4y6k1grt] {
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    flex: 1 1 100%;
    min-width: 0;
    order: -1;
    overflow-wrap: anywhere;
}

.ck-approval__eyebrow[b-kz4y6k1grt] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
    margin-top: var(--ck-space-4);
}

.ck-approval__explain[b-kz4y6k1grt] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
    margin: var(--ck-space-2) 0 0;
}

.ck-approval__section-label[b-kz4y6k1grt] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
    margin-top: var(--ck-space-4);
    margin-bottom: var(--ck-space-2);
}

/* A skill send's full mail list can run to hundreds of lines: wrap long values and scroll inside the card. */
.ck-approval__full-list[b-kz4y6k1grt] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 24rem;
    overflow: auto;
}

.ck-approval__actions[b-kz4y6k1grt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-4);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
}

.ck-approval__plan[b-kz4y6k1grt] {
    font-family: inherit;
    font-size: var(--ck-text-sm);
    line-height: var(--ck-leading-relaxed);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--ck-accent-tint);
    border-left: 3px solid var(--ck-accent);
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-4);
    margin: 0;
}

.ck-approval__explanation[b-kz4y6k1grt] { margin-top: var(--ck-space-3); font-size: var(--ck-text-sm); color: var(--ck-text-muted); }
.ck-approval__explanation summary[b-kz4y6k1grt] { cursor: pointer; padding-block: var(--ck-space-2); }
.ck-approval__explanation summary:focus-visible[b-kz4y6k1grt] { outline: 2px solid var(--ck-border-focus); outline-offset: 2px; }

.ck-approval__btn[b-kz4y6k1grt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--ck-radius-md);
    padding: 9px 16px;
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background-color var(--ck-duration-fast) var(--ck-ease-default),
        border-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-approval__btn:disabled[b-kz4y6k1grt] {
    opacity: 0.55;
    cursor: default;
}

.ck-approval__btn-icon[b-kz4y6k1grt] {
    font-size: 1.05rem;
}

.ck-approval__btn--primary[b-kz4y6k1grt] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-approval__btn--primary:not(:disabled):hover[b-kz4y6k1grt] {
    background: var(--ck-accent-ink);
}

.ck-approval__btn--ghost[b-kz4y6k1grt] {
    background: var(--ck-surface-raised);
    border-color: var(--ck-border-strong);
    color: var(--ck-text-muted);
}

.ck-approval__btn--ghost:not(:disabled):hover[b-kz4y6k1grt] {
    border-color: var(--ck-border-strong);
    background: var(--ck-surface-high);
    color: var(--ck-text);
}

/* Relative timestamp on the head row (#1381) — calm, right of the status badge. */
.ck-approval__time[b-kz4y6k1grt] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

/* Filter pills above the queue. */
.ck-approval-filters[b-kz4y6k1grt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-4);
}

.ck-approval-filter[b-kz4y6k1grt] {
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: var(--ck-space-1) var(--ck-space-3);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-default),
        color var(--ck-duration-fast) var(--ck-ease-default),
        border-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-approval-filter:hover[b-kz4y6k1grt] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-text);
}

.ck-approval-filter.is-active[b-kz4y6k1grt] {
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    border-color: transparent;
    font-weight: var(--ck-weight-semibold);
}

/* Bulk-select checkbox + selected-row accent. */
.ck-approval__select[b-kz4y6k1grt] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ck-approval__select input[b-kz4y6k1grt] {
    width: 16px;
    height: 16px;
    accent-color: var(--ck-accent);
    cursor: pointer;
}

.ck-approval.is-selected[b-kz4y6k1grt] {
    border-color: var(--ck-accent-soft);
    box-shadow: var(--ck-shadow-soft), 0 0 0 1px var(--ck-accent-soft) inset;
}

/* A selected card the group approval leaves out: one quiet line, so the bar's "Goedkeuren" is not read as covering it. */
.ck-approval__one-by-one[b-kz4y6k1grt] {
    margin-top: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* The review a link opened (#3522) — marked more firmly than a selection, so it reads as "this one" on arrival.
   The ring is the only cue, so it uses the readable accent: raw --ck-accent is ~2:1 on the tint in light theme. */
.ck-approval.is-focused[b-kz4y6k1grt] {
    border-color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    box-shadow: var(--ck-shadow-soft), 0 0 0 2px var(--ck-accent-ink) inset;
}

/* Schrijfacties uit een gesprek (#3639) — een eigen kopblok boven de kaarten, zodat twee soorten
   beslissingen in één lijst staan zonder dat ze op elkaar gaan lijken. */
.ck-approval-group[b-kz4y6k1grt] {
    margin: var(--ck-space-2) 0 var(--ck-space-3);
}

.ck-approval-group__title[b-kz4y6k1grt] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-approval-group__desc[b-kz4y6k1grt] {
    margin: var(--ck-space-1) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    max-width: 68ch;
}

/* De regel die zegt wat hier NIET staat. Rustig, onderaan, met de andere plek als link. */
.ck-approval-elsewhere[b-kz4y6k1grt] {
    margin: var(--ck-space-5) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-approval-elsewhere a[b-kz4y6k1grt] {
    margin-left: var(--ck-space-1);
    color: var(--ck-accent);
    text-decoration: underline;
}

/* Goedgekeurd, wacht op uitvoering (#3657) — leesbaar, geen knoppen. Rustiger dan een openstaande
   beslissing: er is hier niets te doen, alleen iets te weten. */
.ck-approval--awaiting[b-kz4y6k1grt] {
    border-style: dashed;
    box-shadow: none;
}

/* MCP write approvals (Bifrost port WP-28a) — the facts a reviewer weighs, above the payload-free summary. */
.ck-connector-write__facts[b-kz4y6k1grt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--ck-space-3);
    margin: var(--ck-space-3) 0 0;
}

.ck-connector-write__facts dt[b-kz4y6k1grt] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
}

.ck-connector-write__facts dd[b-kz4y6k1grt] {
    margin: 2px 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

/* An actor id and a connector route are machine text: monospace keeps a near-miss readable. */
.ck-connector-write__actor[b-kz4y6k1grt],
.ck-connector-write__target[b-kz4y6k1grt] {
    font-family: var(--ck-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--ck-text-xs);
}

.ck-connector-write .ck-approval__full-list[b-kz4y6k1grt] {
    max-height: 16rem;
}
/* /Components/Pages/Approvals/RejectReasonDialog.razor.rz.scp.css */
/* Reject-reason dialog (Lane M3) — governance (terracotta) warm chrome. md-formaat. */

.rr-dlg[b-jc3wavftc3]  .mud-dialog-title {
    padding: 18px 22px 15px;
    border-bottom: 1px solid var(--ck-border);
}

.rr-dlg[b-jc3wavftc3]  .mud-dialog-content {
    padding: 18px 22px;
}

.rr-dlg[b-jc3wavftc3]  .mud-dialog-actions {
    padding: 14px 22px;
    margin: 0;
    background: var(--ck-surface);
    border-top: 1px solid var(--ck-border);
    gap: 10px;
}

.rr-body[b-jc3wavftc3] {
    min-width: min(440px, 72vw);
}

.rr-context[b-jc3wavftc3] { margin: 0 0 18px; padding: 12px 16px; background: var(--ck-surface); border: 1px solid var(--ck-border); border-radius: 8px; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 480px) {
    .rr-body[b-jc3wavftc3] { min-width: 0; }
}
/* /Components/Pages/Approvals/SendAnywayDialog.razor.rz.scp.css */
/* Send-anyway dialog (#3461) — governance (terracotta) warm chrome, same md-formaat as the reason dialog.
   The .rr-dlg / .rr-body hooks are shared on purpose: this is the same modal family, one decision wide. */

.rr-dlg[b-oko5d40z2q]  .mud-dialog-title {
    padding: 18px 22px 15px;
    border-bottom: 1px solid var(--ck-border);
}

.rr-dlg[b-oko5d40z2q]  .mud-dialog-content {
    padding: 18px 22px;
}

.rr-dlg[b-oko5d40z2q]  .mud-dialog-actions {
    padding: 14px 22px;
    margin: 0;
    background: var(--ck-surface);
    border-top: 1px solid var(--ck-border);
    gap: 10px;
}

.rr-body[b-oko5d40z2q] {
    min-width: 0;
}

.sa-context[b-oko5d40z2q] { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--ck-text); }
.sa-context span[b-oko5d40z2q] { display: block; margin-top: 3px; font-size: .85rem; color: var(--ck-text-muted); }
.sa-context div[b-oko5d40z2q] { min-width: 0; overflow-wrap: anywhere; }
.sa-reason[b-oko5d40z2q] { padding: 14px 16px; margin-bottom: 16px; border-left: 3px solid var(--ck-accent); background: var(--ck-surface); border-radius: 8px; }
.sa-reason p[b-oko5d40z2q] { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.sa-heading[b-oko5d40z2q] { margin: 20px 0 10px; font-size: 1rem; font-weight: 600; }
.sa-mail[b-oko5d40z2q] { display: block; width: 100%; height: min(55vh, 520px); min-height: 280px; border: 1px solid var(--ck-border); border-radius: 8px; background: white; }
.sa-technical[b-oko5d40z2q] { margin-top: 16px; font-size: .85rem; }
.sa-technical summary[b-oko5d40z2q] { cursor: pointer; color: var(--ck-text-muted); }
.sa-technical summary:focus-visible[b-oko5d40z2q] { outline: 2px solid var(--ck-border-focus); outline-offset: 4px; }
.sa-technical p[b-oko5d40z2q] { margin: 12px 0 4px; }
.sa-scope[b-oko5d40z2q] { padding-top: 16px; margin: 16px 0 0; border-top: 1px solid var(--ck-border); line-height: 1.6; font-size: .9rem; }

/* The facts of the mail: label column narrow and quiet, value column carries the reading. */
.rr-body[b-oko5d40z2q]  .sa-facts th {
    width: 34%;
    color: var(--ck-text-muted);
    font-weight: 600;
    vertical-align: top;
    white-space: nowrap;
}

.rr-body[b-oko5d40z2q]  .sa-facts td {
    word-break: break-word;
}

/* The hash is evidence, not prose: it may wrap anywhere and never widens the dialog. */
.sa-hash[b-oko5d40z2q] {
    font-size: 0.78rem;
    color: var(--ck-text-muted);
    word-break: break-all;
}

@media (max-width: 560px) {
    .rr-body[b-oko5d40z2q] { min-width: 0; }

    .rr-body[b-oko5d40z2q]  .sa-facts th {
        width: auto;
        white-space: normal;
    }
    .rr-body[b-oko5d40z2q]  .sa-facts tr { display: grid; }
    .rr-body[b-oko5d40z2q]  .sa-facts th { padding-bottom: 2px; border-bottom: 0; }
    .rr-body[b-oko5d40z2q]  .sa-facts td { padding-top: 2px; }
    .rr-dlg[b-oko5d40z2q]  .mud-dialog-actions { flex-wrap: wrap; }
}
/* /Components/Pages/Billing/MijnVerbruik.razor.rz.scp.css */
/* Tenant-self "Mijn verbruik & saldo" (G4 / #1668). Warm Richting-A surfaces driven by the global
   --ck-* tokens; only the page-local usage widgets live here. The donut/bars themselves are inline
   (data-driven geometry), so this file carries just the reusable chrome. */

.ck-usage__live[b-osj6brta2s] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: var(--ck-text-xs);
    color: var(--ck-success);
    font-weight: 600;
}

.ck-usage__live-dot[b-osj6brta2s] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-success);
    flex: none;
    animation: ckUsageDot-b-osj6brta2s 1.8s ease-in-out infinite;
}

@keyframes ckUsageDot-b-osj6brta2s {
    0%, 100% { opacity: .45; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1); }
}

.ck-usage__hero-label[b-osj6brta2s] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-usage__hero-value[b-osj6brta2s] {
    font-size: var(--ck-text-2xl);
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ck-usage__hero-value--sm[b-osj6brta2s] {
    font-size: var(--ck-text-xl);
    margin-top: 7px;
}

.ck-usage__hero-sub[b-osj6brta2s] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    margin-top: 2px;
}

.ck-usage__hero-divider[b-osj6brta2s] {
    width: 1px;
    align-self: stretch;
    background: var(--ck-border);
}

.ck-usage__status[b-osj6brta2s] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--ck-surface-high);
}

.ck-usage__status-dot[b-osj6brta2s] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.ck-usage__bar-track[b-osj6brta2s] {
    height: 9px;
    background: var(--ck-surface-high);
    border-radius: 999px;
    overflow: hidden;
}

.ck-usage__bar-fill[b-osj6brta2s] {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ck-usage__live-dot[b-osj6brta2s] { animation: none; }
    .ck-usage__bar-fill[b-osj6brta2s] { transition: none; }
}
/* /Components/Pages/Dashboards/List.razor.rz.scp.css */
/* Galerij — warm Richting-A overzichts-laag (#1381). Shared idiom for the dashboards and
   wizards galleries: a header with a live-federated pill, a tab-strip, and a 3-column card
   grid wrapped by the cross-cutting search overlay. */

.ck-galerij__live[b-sekmou20iu] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-success);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: var(--ck-space-1) var(--ck-space-3);
}

.ck-galerij__live-dot[b-sekmou20iu] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-success);
    animation: ck-galerij-pulse-b-sekmou20iu 1.8s ease-in-out infinite;
}

@keyframes ck-galerij-pulse-b-sekmou20iu {
    0%, 100% { opacity: 0.45; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1); }
}

/* Tab strip */
.ck-galerij__tabs[b-sekmou20iu] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-4);
    border-bottom: 1px solid var(--ck-border);
    margin-bottom: var(--ck-space-5);
}

.ck-galerij__tab[b-sekmou20iu] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    text-decoration: none;
    padding: 0 var(--ck-space-1) var(--ck-space-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-galerij__tab:hover[b-sekmou20iu] {
    color: var(--ck-text);
}

.ck-galerij__tab.is-active[b-sekmou20iu] {
    color: var(--ck-accent-ink);
    font-weight: var(--ck-weight-semibold);
    border-bottom-color: var(--ck-accent);
}

.ck-galerij__tab-count[b-sekmou20iu] {
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-bold);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    border-radius: var(--ck-radius-full);
    padding: 1px 7px;
}

.ck-galerij__tab-count--muted[b-sekmou20iu] {
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
}

/* Card grid */
.ck-galerij__grid[b-sekmou20iu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-4);
}

@media (max-width: 1100px) {
    .ck-galerij__grid[b-sekmou20iu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ck-galerij__grid[b-sekmou20iu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ck-galerij-card[b-sekmou20iu] {
    display: flex;
    flex-direction: column;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-5);
}

.ck-galerij-card__top[b-sekmou20iu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ck-galerij-card__tile[b-sekmou20iu] {
    width: 36px;
    height: 36px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ck-galerij-card__tile-glyph[b-sekmou20iu] {
    font-size: var(--ck-text-md);
}

.ck-galerij-card__title[b-sekmou20iu] {
    font-size: var(--ck-text-md);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    margin: var(--ck-space-3) 0 0;
}

.ck-galerij-card__desc[b-sekmou20iu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-normal);
    margin: var(--ck-space-1) 0 0;
    flex: 1;
}

.ck-galerij-card__foot[b-sekmou20iu] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    /* Stick to the bottom even when the card has no description paragraph. */
    margin-top: auto;
    padding-top: var(--ck-space-3);
    border-top: 1px solid var(--ck-border);
}

.ck-galerij-card__meta[b-sekmou20iu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    flex: 1;
}

.ck-galerij-card__studio[b-sekmou20iu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ck-radius-sm);
    color: var(--ck-text-muted);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-default), color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-galerij-card__studio:hover[b-sekmou20iu] {
    background: var(--ck-surface-high);
    color: var(--ck-accent-ink);
}

.ck-galerij-card__open[b-sekmou20iu] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-accent-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--ck-space-1) var(--ck-space-2);
    border-radius: var(--ck-radius-sm);
    appearance: none;
    -webkit-appearance: none;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-galerij-card__open:hover[b-sekmou20iu] {
    background: var(--ck-accent-tint);
}

.ck-galerij-card__open-icon[b-sekmou20iu] {
    font-size: var(--ck-text-base);
}

/* Empty state */
.ck-galerij__empty[b-sekmou20iu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-10) var(--ck-space-6);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
}

.ck-galerij__empty-icon[b-sekmou20iu] {
    width: 52px;
    height: 52px;
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-muted);
    box-shadow: var(--ck-shadow-sm);
    margin-bottom: var(--ck-space-2);
}

.ck-galerij__empty-title[b-sekmou20iu] {
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-galerij__empty-desc[b-sekmou20iu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    max-width: 360px;
    margin: 0 0 var(--ck-space-3);
}

/* Skeleton cards */
.ck-galerij-card--skeleton[b-sekmou20iu] {
    gap: var(--ck-space-3);
}

.ck-galerij-card__skel-line[b-sekmou20iu] {
    display: block;
    height: 13px;
    border-radius: var(--ck-radius-sm);
    width: 55%;
}

.ck-galerij-card__skel-line--wide[b-sekmou20iu] {
    width: 80%;
    margin-top: var(--ck-space-3);
}
/* /Components/Pages/DataAnalytics/DataAnalytics.razor.rz.scp.css */
/* App "Data & Analyse"-lens (#2249) — warme Richting-A: rustige kaart-galerij per sectie,
   read-only. Leunt op de gedeelde --ck-* tokens zodat het per sector-pack/tenant mee-relabelt. */

.ck-data-analyse .ck-da-section[b-w9nu6qkosu] {
    margin-top: var(--ck-space-8);
}

.ck-da-section__head[b-w9nu6qkosu] {
    margin-bottom: var(--ck-space-4);
}

.ck-da-section__title[b-w9nu6qkosu] {
    font-size: var(--ck-text-xl);
    font-weight: 600;
    color: var(--ck-text);
    margin: 0;
}

.ck-da-section__sub[b-w9nu6qkosu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: var(--ck-space-1) 0 0;
}

.ck-da-empty[b-w9nu6qkosu] {
    padding: var(--ck-space-6);
    border: 1px dashed var(--ck-border);
    border-radius: var(--ck-radius-lg);
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
    background: var(--ck-surface);
}

.ck-da-grid[b-w9nu6qkosu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ck-space-4);
}

.ck-da-card[b-w9nu6qkosu] {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface-raised);
    padding: var(--ck-space-4);
    box-shadow: var(--ck-shadow-sm);
    transition: box-shadow var(--ck-duration-fast) var(--ck-ease-default),
                border-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-da-card:hover[b-w9nu6qkosu] {
    box-shadow: var(--ck-shadow-md);
    border-color: var(--ck-border-strong);
}

.ck-da-card__kind[b-w9nu6qkosu] {
    display: inline-block;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-radius: var(--ck-radius-full);
    padding: 2px var(--ck-space-2);
}

.ck-da-card__name[b-w9nu6qkosu] {
    margin-top: var(--ck-space-2);
    font-size: var(--ck-text-md);
    font-weight: 600;
    color: var(--ck-text);
}

.ck-da-card__meta[b-w9nu6qkosu] {
    margin-top: var(--ck-space-1);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-da-card__actions[b-w9nu6qkosu] {
    margin-top: var(--ck-space-3);
}

.ck-da-card__panel[b-w9nu6qkosu] {
    margin-top: var(--ck-space-3);
    padding-top: var(--ck-space-3);
    border-top: 1px solid var(--ck-border);
}

.ck-da-highlight[b-w9nu6qkosu] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    margin: 0 0 var(--ck-space-3);
}

.ck-da-stats[b-w9nu6qkosu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--ck-space-3);
    margin: 0;
}

.ck-da-stats div[b-w9nu6qkosu] {
    display: flex;
    flex-direction: column;
}

.ck-da-stats dt[b-w9nu6qkosu] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.ck-da-stats dd[b-w9nu6qkosu] {
    margin: 0;
    font-size: var(--ck-text-lg);
    font-weight: 600;
    color: var(--ck-text);
}

.ck-da-table-wrap[b-w9nu6qkosu] {
    overflow-x: auto;
}
/* /Components/Pages/Dev/SignatureKit.razor.rz.scp.css */
/* Dev showcase for the signature kit (#1345). Not a product screen. */

.ck-sigkit[b-wi5ynzypus] {
    min-height: 100vh;
    background: var(--ck-border-strong);
}

.sigkit[b-wi5ynzypus] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 40px 80px;
    color: var(--ck-text);
    font-family: var(--ck-font);
}

.sigkit__eyebrow[b-wi5ynzypus] {
    font-size: var(--ck-text-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ck-text-disabled);
    font-weight: 600;
}

.sigkit__title[b-wi5ynzypus] {
    font-size: var(--ck-text-2xl);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 10px 0 0;
}

.sigkit__lead[b-wi5ynzypus] {
    font-size: var(--ck-text-base);
    color: var(--ck-text-subtle);
    max-width: 760px;
    margin: 12px 0 0;
    line-height: 1.55;
}

.sigkit__lead code[b-wi5ynzypus] {
    font-family: 'Spline Sans Mono', monospace;
    font-size: var(--ck-text-sm);
}

.sigkit__section[b-wi5ynzypus] {
    margin-top: 30px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 18px;
    box-shadow: var(--ck-shadow-soft);
    overflow: hidden;
}

.sigkit__section-head[b-wi5ynzypus] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 24px;
    border-bottom: 1px solid var(--ck-border);
    font-size: var(--ck-text-base);
    font-weight: 600;
}

.sigkit__n[b-wi5ynzypus] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    font-weight: 700;
    font-size: var(--ck-text-sm);
}

.sigkit__demo[b-wi5ynzypus] {
    padding: 26px 28px;
    background: var(--ck-surface-high);
}

.sigkit__demo--row[b-wi5ynzypus] {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.sigkit__demo--grid[b-wi5ynzypus] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.sigkit__case[b-wi5ynzypus] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}

.sigkit__case--wide[b-wi5ynzypus] {
    flex: 1;
    min-width: 340px;
}

.sigkit__case--chain[b-wi5ynzypus] {
    width: 360px;
}

.sigkit__caption[b-wi5ynzypus] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-disabled);
}

.sigkit__caption--top[b-wi5ynzypus] {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

.sigkit__chips[b-wi5ynzypus] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: flex-start;
}

/* ── cross-cutting (#1381) showcase helpers ── */
.sigkit__divider[b-wi5ynzypus] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 44px 0 4px;
}

.sigkit__divider-label[b-wi5ynzypus] {
    font-size: var(--ck-text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ck-text-disabled);
    background: var(--ck-border-strong);
    padding: 0 14px;
}

.sigkit__status[b-wi5ynzypus] {
    font-size: var(--ck-text-xs);
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 9px;
}

.sigkit__status--ok[b-wi5ynzypus] {
    color: var(--ck-success);
    background: var(--ck-success-subtle);
}

.sigkit__status--attention[b-wi5ynzypus] {
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
    background: var(--ck-warning-subtle);
}

.sigkit__result[b-wi5ynzypus] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
    border-radius: 10px;
}

.sigkit__result:hover[b-wi5ynzypus] {
    background: var(--ck-surface);
    cursor: pointer;
}

.sigkit__result-avatar[b-wi5ynzypus] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ck-accent-tint);
    flex: none;
}
/* /Components/Pages/Entiteit360/Entiteit360.razor.rz.scp.css */
/* Entiteit-360 hub (#1347) — "hub-lijst → instance-360", het entiteit-gerichte pinned dashboard.
   Warme Richting-A skin (greige + per-sector accent token-familie, #1307); niets hardcoded. Mockup:
   designs/"Cockpit App - Entiteit-360 hub.dc.html" frame 2. Links: een rustige instance-lijst van het
   focal-type; rechts: het vastgepinde dashboard dat zich vult voor de gekozen instance. */

.e360[b-n5nf4o3hz6] {
    padding-block: var(--ck-space-6);
}

.e360-shell[b-n5nf4o3hz6] {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--ck-space-6);
    align-items: start;
}

/* ── Hub-lijst (links) ─────────────────────────────────────────────────────────────────── */
.e360-list[b-n5nf4o3hz6] {
    display: flex;
    flex-direction: column;
    min-height: 30rem;
    max-height: calc(100vh - 9rem);
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.05), 0 18px 44px -26px rgba(var(--ck-shadow-rgb), 0.3);
}

.e360-list__head[b-n5nf4o3hz6] {
    flex: none;
    height: 3.25rem;
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding-inline: var(--ck-space-4);
    border-bottom: 1px solid var(--ck-border);
    background: var(--ck-surface-raised);
}

.e360-list__head-icon[b-n5nf4o3hz6] {
    color: var(--ck-accent-ink);
}

.e360-list__head-title[b-n5nf4o3hz6] {
    font-weight: 600;
    color: var(--ck-text);
}

.e360-list__search[b-n5nf4o3hz6] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin: var(--ck-space-3);
    padding: var(--ck-space-2) var(--ck-space-3);
    background: var(--ck-bg);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
}

.e360-list__search:focus-within[b-n5nf4o3hz6] {
    border-color: var(--ck-border-focus);
}

.e360-list__search-icon[b-n5nf4o3hz6] {
    color: var(--ck-text-subtle);
}

.e360-list__search-input[b-n5nf4o3hz6] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--ck-text);
    font: inherit;
    font-size: 0.875rem;
    outline: none;
}

.e360-list__search-input[b-n5nf4o3hz6]::placeholder {
    color: var(--ck-text-subtle);
}

.e360-list__body[b-n5nf4o3hz6] {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--ck-space-3) var(--ck-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-1);
}

.e360-list__hint[b-n5nf4o3hz6] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-4);
    color: var(--ck-text-muted);
    font-size: 0.85rem;
}

.e360-list__hint--warn[b-n5nf4o3hz6] {
    color: var(--ck-warning);
}

.e360-list__foot[b-n5nf4o3hz6] {
    flex: none;
    padding: var(--ck-space-3) var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
    font-size: 0.72rem;
    color: var(--ck-text-subtle);
    font-family: var(--ck-font-mono);
}

/* ── Instance row (picker) ─────────────────────────────────────────────────────────────── */
.e360-row[b-n5nf4o3hz6] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    width: 100%;
    padding: var(--ck-space-2) var(--ck-space-3);
    border: 1px solid transparent;
    border-radius: var(--ck-radius-md);
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    transition: background var(--ck-duration-fast) var(--ck-ease-default),
                box-shadow var(--ck-duration-fast) var(--ck-ease-default);
}

.e360-row:hover[b-n5nf4o3hz6] {
    background: var(--ck-surface-raised);
}

.e360-row:focus-visible[b-n5nf4o3hz6] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.e360-row--active[b-n5nf4o3hz6] {
    background: var(--ck-accent-tint);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.e360-row__avatar[b-n5nf4o3hz6] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    font-weight: 700;
    font-size: 0.75rem;
}

.e360-row--active .e360-row__avatar[b-n5nf4o3hz6] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.e360-row__body[b-n5nf4o3hz6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.e360-row__name[b-n5nf4o3hz6] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ck-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.e360-row--active .e360-row__name[b-n5nf4o3hz6] {
    color: var(--ck-accent-ink);
}

.e360-row__sub[b-n5nf4o3hz6] {
    font-size: 0.72rem;
    color: var(--ck-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Instance-360 (rechts) — het vastgepinde dashboard ─────────────────────────────────── */
.e360-detail[b-n5nf4o3hz6] {
    display: flex;
    flex-direction: column;
    min-height: 30rem;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--ck-shadow-rgb), 0.05), 0 24px 60px -28px rgba(var(--ck-shadow-rgb), 0.28);
}

.e360-detail__bar[b-n5nf4o3hz6] {
    flex: none;
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: var(--ck-space-2);
    padding: var(--ck-space-5);
    border-bottom: 1px solid var(--ck-border);
    background: var(--ck-surface-raised);
}

.e360-detail__crumb[b-n5nf4o3hz6] {
    font-size: 0.82rem;
    color: var(--ck-text-muted);
}

.e360-detail__sep[b-n5nf4o3hz6] {
    color: var(--ck-text-subtle);
}

.e360-detail__name[b-n5nf4o3hz6] {
    margin: 0;
    font-size: var(--ck-text-2xl);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

.e360-identity[b-n5nf4o3hz6] { display: flex; align-items: center; gap: var(--ck-space-4); min-width: 0; }
.e360-identity__avatar[b-n5nf4o3hz6] { display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; background: var(--ck-accent-tint); color: var(--ck-accent-ink); border-radius: var(--ck-radius-md); font-size: var(--ck-text-xl); font-weight: var(--ck-weight-semibold); }
.e360-identity__subtitle[b-n5nf4o3hz6] { margin: var(--ck-space-1) 0 0; color: var(--ck-text-muted); overflow-wrap: anywhere; }

.e360-detail__pill[b-n5nf4o3hz6] {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-radius: var(--ck-radius-full);
    padding: 0.12rem 0.5rem;
}

.e360-detail__edit[b-n5nf4o3hz6] {
    margin-inline-start: auto;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    color: var(--ck-text);
    font-size: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}
.e360-detail__edit:hover[b-n5nf4o3hz6] { border-color: var(--ck-accent); color: var(--ck-accent-ink); }
.e360-detail__edit:focus-visible[b-n5nf4o3hz6] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: var(--ck-focus-offset);
}

.e360-detail__canvas[b-n5nf4o3hz6] {
    flex: 1;
    padding: var(--ck-space-4);
    background: var(--ck-bg);
    min-width: 0;
}

.e360-detail__placeholder[b-n5nf4o3hz6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    min-height: 12rem;
    color: var(--ck-text-muted);
    font-size: 0.9rem;
}

/* Record contents flow with the page instead of scrolling inside a fixed canvas. */
.e360-detail__immersive[b-n5nf4o3hz6] {
    min-width: 0;
}

.e360-detail__note[b-n5nf4o3hz6] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
    padding: var(--ck-space-3) var(--ck-space-4);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    color: var(--ck-text-subtle);
    font-size: 0.72rem;
}

/* ── Empty / skeleton ──────────────────────────────────────────────────────────────────── */
.e360-empty[b-n5nf4o3hz6] {
    text-align: center;
    padding: var(--ck-space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ck-space-2);
}

.e360-empty__icon[b-n5nf4o3hz6] {
    font-size: 2.5rem;
    color: var(--ck-accent-soft);
}

.e360-empty__title[b-n5nf4o3hz6] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ck-text);
    margin: 0;
}

.e360-empty__body[b-n5nf4o3hz6] {
    color: var(--ck-text-muted);
    max-width: 32rem;
    margin: 0;
}

.e360-skel[b-n5nf4o3hz6] {
    border-radius: var(--ck-radius-lg);
}

.e360-skel--list[b-n5nf4o3hz6] {
    height: 30rem;
}

.e360-skel--detail[b-n5nf4o3hz6] {
    height: 30rem;
}

.e360-detail__immersive[hidden][b-n5nf4o3hz6], .e360-detail__note[hidden][b-n5nf4o3hz6] {
    display: none;
}

/* ── Narrow screens: stack list above detail ───────────────────────────────────────────── */
@media (max-width: 60rem) {
    .e360-shell[b-n5nf4o3hz6] {
        grid-template-columns: 1fr;
    }
    .e360-list[b-n5nf4o3hz6] {
        min-height: 0;
        max-height: 16rem;
    }
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* /Vandaag — the dagstart (#3885), in the look of the #3672 prototype. The blocks are child components, so every
   rule below reaches them through ::deep from the page's own .today wrapper. Only the shapes Cockpit has no shared
   component for live here; PageHeader-free greeting, TrustLine, KpiCard and ProcesStap are shared. Tokens only — no
   literal colour, no absolute type size — so the page follows the light/dark switch and scales with browser zoom. */

.ck-today__greeting[b-r3fclh2ku7] {
    margin-bottom: var(--ck-space-4);
}

.today__overview[b-r3fclh2ku7], .today__daily[b-r3fclh2ku7] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
    gap: var(--ck-space-6);
    align-items: start;
    margin-bottom: var(--ck-space-6);
}
.today__overview[b-r3fclh2ku7]  > *, .today__daily[b-r3fclh2ku7]  > * { min-width: 0; }
/* Every single-column grid on Vandaag names its track minmax(0, 1fr). An implicit track is `auto`, and an auto track
   lets a child's longest unbreakable line (a nowrap task card, a long URL) set the column's minimum width — the card
   then ellipsises nothing and the page scrolls sideways (#4027). */
.today__tasks[b-r3fclh2ku7] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ck-space-5); min-width: 0; }
[b-r3fclh2ku7] .today__attention-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ck-space-3); }
[b-r3fclh2ku7] .today__details { margin-top: var(--ck-space-3); font-size: var(--ck-text-sm); }
[b-r3fclh2ku7] .today__details summary { cursor: pointer; color: var(--ck-text-muted); font-weight: var(--ck-weight-medium); }
[b-r3fclh2ku7] .today__more { margin-top: var(--ck-space-3); }
[b-r3fclh2ku7] .today__outcomes { display: flex; gap: var(--ck-space-1); margin-top: var(--ck-space-4); }
[b-r3fclh2ku7] .today__outcomes span { height: var(--ck-space-3); border-radius: var(--ck-radius-sm); }
[b-r3fclh2ku7] .today__outcome--sent { background: var(--ck-success); }
[b-r3fclh2ku7] .today__outcome--held { background: var(--ck-warning); }
[b-r3fclh2ku7] .today__outcome--failed { background: var(--ck-error); }
[b-r3fclh2ku7] .today__outcome--other { background: var(--ck-text-muted); }

@media (max-width: 70rem) {
    .today__overview[b-r3fclh2ku7], .today__daily[b-r3fclh2ku7] { grid-template-columns: minmax(0, 1fr); }
    [b-r3fclh2ku7] .today__counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ck-today__title[b-r3fclh2ku7] {
    font-size: var(--ck-text-2xl);
    font-weight: var(--ck-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--ck-text);
    margin: 0;
}

.ck-today__subtitle[b-r3fclh2ku7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: var(--ck-space-2) 0 var(--ck-space-3);
}

.ck-today__sep[b-r3fclh2ku7] {
    color: var(--ck-border-strong);
}

.ck-today__attention[b-r3fclh2ku7] {
    color: var(--ck-text);
    font-weight: var(--ck-weight-medium);
}

/* ── Kop ─────────────────────────────────────────────────────────────────────── */

[b-r3fclh2ku7] .today__daynote {
    margin: 0;
    max-width: var(--ck-reading-max);
    font-size: var(--ck-text-base);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
}

[b-r3fclh2ku7] .today__klant {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ck-border-strong);
    text-underline-offset: 0.15em;
}

[b-r3fclh2ku7] .today__klant:hover {
    text-decoration-color: var(--ck-accent);
}

[b-r3fclh2ku7] .today__trust {
    margin-top: var(--ck-space-3);
    max-width: var(--ck-reading-max);
}

[b-r3fclh2ku7] .today__counts {
    margin-top: var(--ck-space-6);
    margin-bottom: var(--ck-space-8);
}

[b-r3fclh2ku7] .today__counts > * {
    min-width: 0;
}

/* ── Sectiekop ───────────────────────────────────────────────────────────────── */

[b-r3fclh2ku7] .today__sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ck-space-3);
    margin-bottom: var(--ck-space-3);
}

[b-r3fclh2ku7] .today__sec-title {
    margin: 0;
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    letter-spacing: var(--ck-tracking-tight);
}

[b-r3fclh2ku7] .today__sec-note {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

[b-r3fclh2ku7] .today__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
}

[b-r3fclh2ku7] .today__sec-sub {
    margin: 0 0 var(--ck-space-4);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* Monospace is not a global class in Cockpit (ck-mono exists only as a scoped rule in another app),
   so hashes, invoice numbers and the exception rule set it here. */

[b-r3fclh2ku7] .today__mono {
    font-family: var(--ck-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Vastgehouden klantactie ─────────────────────────────────────────────────── */

[b-r3fclh2ku7] .today__approval {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-left: 3px solid var(--ck-warning);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-5);
    overflow-wrap: anywhere;
}

[b-r3fclh2ku7] .today__approval-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-2);
}

[b-r3fclh2ku7] .today__approval-age {
    margin-left: auto;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

[b-r3fclh2ku7] .today__approval-title {
    margin: var(--ck-space-1) 0 0;
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

[b-r3fclh2ku7] .today__micro {
    margin-bottom: var(--ck-space-2);
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text-subtle);
}

[b-r3fclh2ku7] .today__note {
    margin: var(--ck-space-3) 0 0;
    padding: var(--ck-space-3) var(--ck-space-4);
    background: var(--ck-surface-subtle);
    border-radius: var(--ck-radius-md);
    font-size: var(--ck-text-sm);
    font-style: italic;
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
}

[b-r3fclh2ku7] .today__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-4);
}

[b-r3fclh2ku7] .today__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    border-radius: var(--ck-radius-md);
    padding: var(--ck-space-2) var(--ck-space-4);
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    cursor: pointer;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border-strong);
    color: var(--ck-text-muted);
    transition: background-color var(--ck-duration-fast) var(--ck-ease-default),
    border-color var(--ck-duration-fast) var(--ck-ease-default);
}

[b-r3fclh2ku7] .today__btn:hover {
    background: var(--ck-surface-high);
    color: var(--ck-text);
}

[b-r3fclh2ku7] .today__btn--primary {
    background: var(--ck-accent);
    border-color: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

[b-r3fclh2ku7] .today__btn--primary:hover {
    background: var(--ck-accent-hover);
    color: var(--ck-accent-contrast);
}

/* ── Estafette + verstuurde regels ───────────────────────────────────────────── */

[b-r3fclh2ku7] .today__relay {
    display: flex;
    flex-direction: column;
}

[b-r3fclh2ku7] .today__totals {
    margin: var(--ck-space-4) 0 0;
    font-family: var(--ck-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* Losse kaarten met gap — Vandaag zet zijn rijen ook zo neer, nooit als naadloze 1px-lijst. */

[b-r3fclh2ku7] .today__sent-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ck-space-3);
    margin-top: var(--ck-space-3);
}

[b-r3fclh2ku7] .today__sent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--ck-space-1) var(--ck-space-4);
    align-items: baseline;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-4) var(--ck-space-5);
    overflow-wrap: anywhere;
}

[b-r3fclh2ku7] .today__sent-who {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

[b-r3fclh2ku7] .today__sent-meta,
[b-r3fclh2ku7] .today__proof {
    grid-column: 1 / -1;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

[b-r3fclh2ku7] .today__proof-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    margin-top: var(--ck-space-2);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--ck-text-sm);
    color: var(--ck-info);
    cursor: pointer;
}

[b-r3fclh2ku7] .today__proof-body {
    margin-top: var(--ck-space-2);
    padding: var(--ck-space-4);
    background: var(--ck-surface-subtle);
    border-radius: var(--ck-radius-md);
}

[b-r3fclh2ku7] .today__proof-hint {
    margin: 0 0 var(--ck-space-3);
    max-width: var(--ck-reading-max);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
}

[b-r3fclh2ku7] .today__hash-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--ck-space-1) var(--ck-space-4);
    margin: 0;
    font-size: var(--ck-text-sm);
}

[b-r3fclh2ku7] .today__hash-row dt {
    color: var(--ck-text-muted);
}

[b-r3fclh2ku7] .today__hash-row dd {
    margin: 0;
    color: var(--ck-text);
    overflow-wrap: anywhere;
}

[b-r3fclh2ku7] .today__verdict {
    margin: var(--ck-space-3) 0 0;
    padding: var(--ck-space-2) var(--ck-space-3);
    background: var(--ck-success-subtle);
    border-radius: var(--ck-radius-md);
    font-size: var(--ck-text-sm);
    color: var(--ck-success);
}

[b-r3fclh2ku7] .today__verdict strong {
    display: block;
    margin-top: var(--ck-space-1);
}

[b-r3fclh2ku7] .today__hub-note {
    margin: var(--ck-space-3) 0 0;
    max-width: var(--ck-reading-max);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* ── Afspraken ───────────────────────────────────────────────────────────────── */

/* ── Routines ────────────────────────────────────────────────────────────────── */

[b-r3fclh2ku7] .today__routines {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ck-space-3);
}

[b-r3fclh2ku7] .today__routine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--ck-space-1) var(--ck-space-4);
    align-items: baseline;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-4) var(--ck-space-5);
    overflow-wrap: anywhere;
}

[b-r3fclh2ku7] .today__routine--off {
    background: var(--ck-surface);
    box-shadow: none;
}

[b-r3fclh2ku7] .today__routine-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

[b-r3fclh2ku7] .today__routine--off .today__routine-name {
    color: var(--ck-text-muted);
}

[b-r3fclh2ku7] .today__routine-when {
    font-family: var(--ck-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    white-space: nowrap;
}

[b-r3fclh2ku7] .today__routine-meta {
    grid-column: 1 / -1;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
}

/* ── Agenda + mail band ──────────────────────────────────────────────────────── */

[b-r3fclh2ku7] .today__band {
    display: grid;
    gap: var(--ck-space-6);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* ── Voetnoot ─────────────────────────────────────────────────────────────────── */

[b-r3fclh2ku7] .today__footnote {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ck-space-2) var(--ck-space-5);
    margin: var(--ck-space-6) 0 0;
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* ── Smal scherm ─────────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
    [b-r3fclh2ku7] .today__sent,
    [b-r3fclh2ku7] .today__routine {
        grid-template-columns: minmax(0, 1fr);
    }

    [b-r3fclh2ku7] .today__hash-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    [b-r3fclh2ku7] .today__hash-row dt {
        margin-top: var(--ck-space-2);
    }
}

/* ── Lege toestanden, links, reden, rail ──────────────────────────────────────── */

[b-r3fclh2ku7] .today__empty {
    margin: 0;
    padding: var(--ck-space-4);
    border: 1px dashed var(--ck-border);
    border-radius: var(--ck-radius-md);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

[b-r3fclh2ku7] .today__level {
    margin-left: var(--ck-space-1);
}

[b-r3fclh2ku7] .today__link {
    color: var(--ck-info);
    font-weight: var(--ck-weight-medium);
    text-decoration: none;
}

[b-r3fclh2ku7] .today__link:hover {
    text-decoration: underline;
}

[b-r3fclh2ku7] .today__reason {
    grid-column: 1 / -1;
    margin: var(--ck-space-1) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    line-height: var(--ck-leading-relaxed);
}

[b-r3fclh2ku7] .today__rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-5);
    margin-top: var(--ck-space-6);
}

[b-r3fclh2ku7] .today__rail > * {
    flex: 1 1 280px;
    min-width: 0;
}
/* /Components/Pages/Meetings/AutoJoin.razor.rz.scp.css */
/* Automatisch deelnemen — meeting-scope (#1347, getrimd "1 · Nu"-frame).
   Hoofdtoggle-kaart + welke-overleggen-rij + meeting-opties-grid. Warm Richting-A. */

.ck-autojoin[b-5duy0efihp] {
    max-width: 760px;
}

.ck-autojoin__body[b-5duy0efihp] {
    display: flex;
    flex-direction: column;
}

/* ----- Hoofdtoggle (hero card, accent-soft rand) ----- */
.ck-autojoin__hero[b-5duy0efihp] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: 17px 19px;
    background: var(--ck-surface-raised);
    border: 1.5px solid var(--ck-accent-soft);
    border-radius: var(--ck-radius-xl);
    box-shadow: var(--ck-shadow-soft), 0 8px 20px -14px rgba(var(--ck-accent-rgb), 0.16);
}

.ck-autojoin__hero-icon[b-5duy0efihp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--ck-radius-lg);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.ck-autojoin__hero-text[b-5duy0efihp] {
    flex: 1;
    min-width: 0;
}

.ck-autojoin__hero-title[b-5duy0efihp] {
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-autojoin__hero-sub[b-5duy0efihp] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: 2px;
}

/* ----- Section labels ----- */
.ck-autojoin__section-label[b-5duy0efihp] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text-subtle);
    margin: var(--ck-space-5) 0 var(--ck-space-3);
}

/* ----- Welke overleggen — per-bron rij ----- */
.ck-autojoin__row[b-5duy0efihp] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: 13px 15px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
}

.ck-autojoin__row-icon[b-5duy0efihp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--ck-radius-md);
    background: var(--ck-success-subtle);
    color: oklch(from var(--ck-success) calc(l - 0.14) c h);
}

.ck-autojoin__row-text[b-5duy0efihp] {
    flex: 1;
    min-width: 0;
}

.ck-autojoin__row-title[b-5duy0efihp] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-autojoin__row-sub[b-5duy0efihp] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    margin-top: 1px;
}

/* ----- Hoe de assistent deelneemt — opties-grid ----- */
.ck-autojoin__grid[b-5duy0efihp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ck-space-4);
}

.ck-autojoin__field[b-5duy0efihp] {
    display: flex;
    flex-direction: column;
}

.ck-autojoin__field--wide[b-5duy0efihp] {
    grid-column: span 2;
}

.ck-autojoin__label[b-5duy0efihp] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    margin-bottom: var(--ck-space-1);
}

/* ----- Lobby/M365-caveat ----- */
.ck-autojoin__note[b-5duy0efihp] {
    margin: var(--ck-space-5) 0 0;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    line-height: 1.55;
}

/* ----- Save ----- */
.ck-autojoin__actions[b-5duy0efihp] {
    display: flex;
    margin-top: var(--ck-space-5);
}

@media (max-width: 640px) {
    .ck-autojoin__grid[b-5duy0efihp] {
        grid-template-columns: 1fr;
    }

    .ck-autojoin__field--wide[b-5duy0efihp] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Onboarding/Welcome.razor.rz.scp.css */
/* Guided first-run welcome flow (#1347). Warm stepper + single-question card,
   centered on the workspace canvas. Mockup: Cockpit Systeem-schermen.dc.html → "Onboarding". */

.ck-onb[b-vj16ovull4] {
    max-width: 540px;
    margin: 0 auto;
    padding-top: var(--ck-space-6);
}

/* ---- Stepper ---- */
.ck-onb__steps[b-vj16ovull4] {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--ck-space-6);
}

.ck-onb__step[b-vj16ovull4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: none;
    width: 110px;
}

.ck-onb__node[b-vj16ovull4] {
    width: 30px;
    height: 30px;
    border-radius: var(--ck-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-semibold);
    background: var(--ck-surface-raised);
    border: 2px solid var(--ck-border-strong);
    color: var(--ck-text-disabled);
}

.ck-onb__node--current[b-vj16ovull4] {
    border-color: var(--ck-accent);
    color: var(--ck-accent-ink);
    box-shadow: 0 0 0 4px var(--ck-accent-glow);
}

.ck-onb__node--done[b-vj16ovull4] {
    background: var(--ck-accent);
    border-color: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-onb__step-label[b-vj16ovull4] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    text-align: center;
}

.ck-onb__step-label--active[b-vj16ovull4] {
    color: var(--ck-accent-ink);
    font-weight: var(--ck-weight-semibold);
}

/* Connector line between nodes — sits level with the node centres. */
.ck-onb__connector[b-vj16ovull4] {
    height: 2px;
    flex: 1;
    background: var(--ck-border-strong);
    margin-top: 14px;
}

.ck-onb__connector--done[b-vj16ovull4] {
    background: var(--ck-accent-soft);
}

/* ---- Card ---- */
.ck-onb__card[b-vj16ovull4] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-7) var(--ck-space-7);
    text-align: center;
    animation: ck-fade-in var(--ck-duration-slow) var(--ck-ease-out) both;
}

.ck-onb__heading[b-vj16ovull4] {
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    letter-spacing: var(--ck-tracking-tight);
    margin: 0;
}

.ck-onb__body[b-vj16ovull4] {
    font-size: var(--ck-text-base);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
    margin: var(--ck-space-2) 0 0;
}

.ck-onb__sovereignty[b-vj16ovull4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-5);
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

/* ---- Workspace step: read-only field + progress ---- */
.ck-onb__field[b-vj16ovull4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-3);
    margin-top: var(--ck-space-5);
    padding: var(--ck-space-3) var(--ck-space-4);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    text-align: left;
}

.ck-onb__field-label[b-vj16ovull4] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
}

.ck-onb__field-value[b-vj16ovull4] {
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text);
}

.ck-onb__done-icon[b-vj16ovull4] {
    width: 58px;
    height: 58px;
    border-radius: var(--ck-radius-xl);
    background: var(--ck-success-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ck-space-3);
}

/* ---- Actions ---- */
.ck-onb__actions[b-vj16ovull4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--ck-space-5);
}

/* Explicit reduced-motion safeguard (mirrors components/system.css). The global
   tokens/motion.css already neutralises animations under this query; this keeps the
   intent self-documenting and the card safe if the global contract ever changes. */
@media (prefers-reduced-motion: reduce) {
    .ck-onb__card[b-vj16ovull4] { animation: none; }
}
/* /Components/Pages/Processes/Detail.razor.rz.scp.css */
/* Process detail · runs (Richting B: run-teller + zijlijst) — warm rebuild (#1347).
   Left run-sidelist (active runs with progress + status dot) → selected run drives the
   estafette + step-detail-on-focus. Counter collapses the list; edge states for 1 / 0 runs. */

.ck-runs[b-ec17ab7lig] {
    max-width: 1240px;
}

/* ----- Back link ----- */
.ck-runs__back[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--ck-space-3);
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    text-decoration: none;
    transition: color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__back:hover[b-ec17ab7lig] {
    color: var(--ck-accent-ink);
}

/* ----- Header ----- */
.ck-runs__head[b-ec17ab7lig] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ck-space-4);
    margin-bottom: var(--ck-space-5);
}

.ck-runs__title[b-ec17ab7lig] {
    margin: 0;
    font-size: var(--ck-text-xl);
    font-weight: var(--ck-weight-semibold);
    line-height: var(--ck-leading-tight);
    color: var(--ck-text);
}

.ck-runs__subtitle[b-ec17ab7lig] {
    margin: var(--ck-space-1) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

/* Single active run · calm label (no selector). */
.ck-runs__single[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: var(--ck-space-2);
    padding: 7px 12px 7px 8px;
    background: var(--ck-surface-high);
    border-radius: var(--ck-radius-md);
}

.ck-runs__single-mark[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-bold);
}

.ck-runs__single-name[b-ec17ab7lig] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-runs__single-meta[b-ec17ab7lig] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

/* Run counter pill — collapses the sidelist. */
.ck-runs__counter[b-ec17ab7lig] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 6px;
    border: none;
    border-radius: var(--ck-radius-full);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--ck-accent-glow);
    transition: box-shadow var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__counter--collapsed[b-ec17ab7lig] {
    box-shadow: none;
}

/* 1-run header · tertiary "+ Nieuwe run" — present and findable, but subordinate to the estafette
   (mockup frame 1): white surface + hairline border, no accent fill; warms to accent on hover.
   One primary path stays (the relay); this action whispers. */
.ck-runs__newrun-head[b-ec17ab7lig] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--ck-border-strong);
    border-radius: 10px;
    background: var(--ck-surface-raised);
    color: var(--ck-text-muted);
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    cursor: pointer;
    transition: border-color var(--ck-duration-fast) var(--ck-ease-default),
                color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__newrun-head:hover[b-ec17ab7lig] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.ck-runs__newrun-head:focus-visible[b-ec17ab7lig] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

/* Inline create-form takes the same right-hand header slot when the tertiary action is engaged. */
.ck-runs__head-create[b-ec17ab7lig] {
    flex: none;
    width: 280px;
}

.ck-runs__counter-num[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    font-size: var(--ck-text-xs);
}

/* ----- Panes ----- */
.ck-runs__panes[b-ec17ab7lig] {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    overflow: hidden;
    min-height: 420px;
}

/* ----- Run sidelist ----- */
.ck-runs__list[b-ec17ab7lig] {
    width: 236px;
    flex: none;
    border-right: 1px solid var(--ck-border);
    background: var(--ck-surface-high);
    padding: var(--ck-space-4) var(--ck-space-3);
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
}

.ck-runs__list-head[b-ec17ab7lig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 4px;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-runs__list-count[b-ec17ab7lig] {
    color: var(--ck-text-subtle);
    font-weight: var(--ck-weight-medium);
}

.ck-runs__run[b-ec17ab7lig] {
    display: block; /* override the global button display so name / bar / meta stack vertically */
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 11px 12px;
    box-shadow: var(--ck-shadow-soft);
    transition: border-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__run:hover[b-ec17ab7lig] {
    border-color: var(--ck-border-strong);
}

.ck-runs__run--selected[b-ec17ab7lig] {
    background: var(--ck-accent-tint);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px var(--ck-accent-glow);
}

.ck-runs__run:focus-visible[b-ec17ab7lig] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.ck-runs__run-top[b-ec17ab7lig] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ck-runs__run-dot[b-ec17ab7lig] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-success);
    flex: none;
}

/* Lifecycle health: on-track = green (default), at-risk = amber. Colors both the status dot
   and the progress bar so a behind-pace run reads at a glance — B's whole reason for existing. */
.ck-runs__run--atrisk .ck-runs__run-dot[b-ec17ab7lig] {
    background: var(--ck-warning);
}

.ck-runs__run-name[b-ec17ab7lig] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-runs__run--selected .ck-runs__run-name[b-ec17ab7lig] {
    color: var(--ck-accent-ink);
}

.ck-runs__run-bar[b-ec17ab7lig] {
    height: 5px;
    background: var(--ck-border-strong);
    border-radius: var(--ck-radius-full);
    margin-top: 9px;
    overflow: hidden;
}

.ck-runs__run-fill[b-ec17ab7lig] {
    height: 100%;
    background: var(--ck-success);
    border-radius: var(--ck-radius-full);
    transition: width var(--ck-duration-fast) var(--ck-ease-default);
}

/* At-risk runs get an amber fill (the dot is amber via the rule above). */
.ck-runs__run--atrisk .ck-runs__run-fill[b-ec17ab7lig] {
    background: var(--ck-warning);
}

/* Selected run: paper track + accent fill (sits on the accent-tint card). */
.ck-runs__run--selected .ck-runs__run-bar[b-ec17ab7lig] {
    background: var(--ck-surface-raised);
}

.ck-runs__run--selected .ck-runs__run-fill[b-ec17ab7lig] {
    background: var(--ck-accent);
}

.ck-runs__run-meta[b-ec17ab7lig] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    margin-top: 5px;
}

.ck-runs__list-foot[b-ec17ab7lig] {
    margin-top: auto;
    padding-top: var(--ck-space-2);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ck-runs__newrun[b-ec17ab7lig],
.ck-runs__completed-toggle[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-accent-ink);
    cursor: pointer;
    border-radius: var(--ck-radius-sm);
    transition: background var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__completed-toggle[b-ec17ab7lig] {
    color: var(--ck-text-muted);
}

.ck-runs__newrun:hover[b-ec17ab7lig],
.ck-runs__completed-toggle:hover[b-ec17ab7lig] {
    background: var(--ck-surface-raised);
}

/* ----- Completed runs (expandable / empty-state history) ----- */
.ck-runs__completed[b-ec17ab7lig] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.ck-runs__completed-item[b-ec17ab7lig] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 7px 8px;
    border: none;
    background: none;
    border-radius: var(--ck-radius-sm);
    cursor: pointer;
    opacity: 0.85;
    transition: background var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__completed-item:hover[b-ec17ab7lig],
.ck-runs__completed-item--selected[b-ec17ab7lig] {
    background: var(--ck-surface-raised);
    opacity: 1;
}

.ck-runs__completed-icon[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    flex: none;
}

.ck-runs__completed-icon--done[b-ec17ab7lig] {
    background: var(--ck-success-subtle);
    color: oklch(from var(--ck-success) calc(l - 0.16) c h);
}

.ck-runs__completed-icon--failed[b-ec17ab7lig] {
    background: var(--ck-error-subtle);
    color: var(--ck-error);
}

.ck-runs__completed-name[b-ec17ab7lig] {
    flex: 1;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-runs__completed-status[b-ec17ab7lig] {
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text-subtle);
}

.ck-runs__completed-empty[b-ec17ab7lig] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    padding: 6px 8px;
}

/* ----- Create-run inline form ----- */
.ck-runs__create[b-ec17ab7lig] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px 2px;
}

.ck-runs__create-input[b-ec17ab7lig] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface-raised);
    font: inherit;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
}

.ck-runs__create-input:focus-visible[b-ec17ab7lig] {
    outline: none;
    border-color: var(--ck-border-focus);
    box-shadow: var(--ck-shadow-glow);
}

.ck-runs__create-actions[b-ec17ab7lig] {
    display: flex;
    gap: 7px;
}

/* ----- Estafette (selected run) ----- */
.ck-runs__main[b-ec17ab7lig] {
    flex: 1;
    min-width: 0;
    padding: var(--ck-space-6) var(--ck-space-6) var(--ck-space-6) var(--ck-space-5);
}

.ck-runs__run-title[b-ec17ab7lig] {
    margin: 0;
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-runs__run-subtitle[b-ec17ab7lig] {
    margin: var(--ck-space-1) 0 var(--ck-space-5);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-runs__relay[b-ec17ab7lig] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 4px;
}

.ck-runs__relay[b-ec17ab7lig]::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--ck-border-strong);
}

.ck-runs__step[b-ec17ab7lig] {
    position: relative;
    display: block;
}

.ck-runs__step--trigger[b-ec17ab7lig] {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 14px;
    transition: transform var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__step--trigger:hover[b-ec17ab7lig] {
    transform: translateX(2px);
}

.ck-runs__step--trigger:focus-visible[b-ec17ab7lig] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.ck-runs__step--focused[b-ec17ab7lig]::after {
    content: "";
    position: absolute;
    inset: 0 -4px;
    border-radius: 14px;
    box-shadow: 0 0 0 1.5px var(--ck-accent-soft);
    pointer-events: none;
}

/* ----- Action buttons ----- */
.ck-runs__btn[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: none;
    border-radius: var(--ck-radius-md);
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ck-duration-fast) var(--ck-ease-default),
                border-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-runs__btn--primary[b-ec17ab7lig] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-runs__btn--primary:hover[b-ec17ab7lig] {
    background: var(--ck-accent-ink);
}

.ck-runs__btn--ghost[b-ec17ab7lig] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border-strong);
    color: var(--ck-text-muted);
}

.ck-runs__btn--ghost:hover[b-ec17ab7lig] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

/* ----- Step-detail aside ----- */
.ck-runs__aside[b-ec17ab7lig] {
    flex: none;
    width: 300px;
    border-left: 1px solid var(--ck-border);
    background: var(--ck-surface-high);
    padding: var(--ck-space-6) var(--ck-space-5);
    overflow-y: auto;
}

.ck-runs__eyebrow[b-ec17ab7lig] {
    font-size: var(--ck-text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ck-text-subtle);
    font-weight: var(--ck-weight-semibold);
}

.ck-runs__eyebrow--spaced[b-ec17ab7lig] {
    margin-top: var(--ck-space-4);
}

.ck-runs__aside-title[b-ec17ab7lig] {
    margin: var(--ck-space-2) 0 var(--ck-space-1);
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-runs__aside-desc[b-ec17ab7lig] {
    margin: 0;
    font-size: var(--ck-text-sm);
    line-height: 1.5;
    color: var(--ck-text-muted);
}

.ck-runs__fact[b-ec17ab7lig] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: var(--ck-space-4);
    padding: 12px 14px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    box-shadow: var(--ck-shadow-soft);
}

.ck-runs__fact-icon[b-ec17ab7lig] {
    color: var(--ck-accent-ink);
}

.ck-runs__fact-title[b-ec17ab7lig] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-runs__fact-sub[b-ec17ab7lig] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-runs__handoff[b-ec17ab7lig] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-runs__avatar[b-ec17ab7lig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border-strong);
    color: var(--ck-text-muted);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-bold);
}

.ck-runs__avatar--accent[b-ec17ab7lig] {
    background: var(--ck-accent-tint);
    border-color: transparent;
    color: var(--ck-accent-ink);
}

.ck-runs__handoff-arrow[b-ec17ab7lig] {
    color: var(--ck-text-subtle);
}

.ck-runs__provenance[b-ec17ab7lig] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--ck-space-5);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

/* ----- 0 active runs · empty / history ----- */
.ck-runs__empty[b-ec17ab7lig] {
    max-width: 520px;
    padding: var(--ck-space-6);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
}

.ck-runs__empty-title[b-ec17ab7lig] {
    margin: 0;
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-runs__empty-body[b-ec17ab7lig] {
    margin: var(--ck-space-1) 0 var(--ck-space-4);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-runs__empty .ck-runs__completed[b-ec17ab7lig] {
    margin-top: var(--ck-space-5);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
}

/* ----- Responsive ----- */
@media (max-width: 1040px) {
    .ck-runs__panes[b-ec17ab7lig] {
        flex-direction: column;
    }

    .ck-runs__list[b-ec17ab7lig] {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--ck-border);
    }

    .ck-runs__aside[b-ec17ab7lig] {
        width: auto;
        border-left: none;
        border-top: 1px solid var(--ck-border);
    }
}
/* /Components/Pages/Processes/List.razor.rz.scp.css */
/* Process list · warm card grid (#1347). Published process flows the user can open as an
   estafette. Mirrors the warm card language used across the App werkvlakken. */

/* ----- Card grid ----- */
.ck-proc-list__grid[b-zlvekr2d20] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ck-space-4);
}

.ck-proc-card[b-zlvekr2d20] {
    display: flex;
    flex-direction: column;
    padding: var(--ck-space-5);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    transition: border-color var(--ck-duration-fast) var(--ck-ease-default),
                transform var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-proc-card:hover[b-zlvekr2d20] {
    border-color: var(--ck-border-strong);
    transform: translateY(-2px);
}

.ck-proc-card__top[b-zlvekr2d20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ck-space-3);
}

.ck-proc-card__mark[b-zlvekr2d20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.ck-proc-card__status[b-zlvekr2d20] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ck-radius-full);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
}

.ck-proc-card__status--live[b-zlvekr2d20] {
    color: oklch(from var(--ck-success) calc(l - 0.14) c h);
    background: var(--ck-success-subtle);
}

.ck-proc-card__status--draft[b-zlvekr2d20] {
    color: var(--ck-text-muted);
    background: var(--ck-surface-high);
}

.ck-proc-card__title[b-zlvekr2d20] {
    margin: 0;
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-proc-card__domain[b-zlvekr2d20] {
    margin: var(--ck-space-1) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-subtle);
}

.ck-proc-card__actions[b-zlvekr2d20] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-4);
}

.ck-proc-card__view[b-zlvekr2d20] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    text-decoration: none;
    transition: background var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-proc-card__view:hover[b-zlvekr2d20] {
    background: var(--ck-accent-ink);
}

.ck-proc-card__builder[b-zlvekr2d20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    color: var(--ck-text-muted);
    text-decoration: none;
    transition: border-color var(--ck-duration-fast) var(--ck-ease-default),
                color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-proc-card__builder:hover[b-zlvekr2d20] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

/* ----- Empty / locked states ----- */
.ck-proc-list__empty[b-zlvekr2d20] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-8);
}

.ck-proc-list__empty-icon[b-zlvekr2d20] {
    font-size: 3rem;
    color: var(--ck-text-subtle);
    opacity: 0.5;
}

.ck-proc-list__empty-title[b-zlvekr2d20] {
    margin: var(--ck-space-2) 0 0;
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-proc-list__empty-text[b-zlvekr2d20] {
    margin: 0;
    max-width: 420px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}
/* /Components/Pages/Processes/ProcessStepJourneyPanel.razor.rz.scp.css */
/* What a routine step did in the selected run (#3840): sits in the step aside, below the step's facts. */
.ck-journey[b-zokdvdeh9h] {
    margin-top: var(--ck-space-4);
    padding: 12px 14px;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    box-shadow: var(--ck-shadow-soft);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ck-journey__eyebrow[b-zokdvdeh9h] {
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ck-journey__routine[b-zokdvdeh9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-journey__meta[b-zokdvdeh9h],
.ck-journey__method[b-zokdvdeh9h] {
    font-size: var(--ck-text-xs);
    font-weight: normal;
    color: var(--ck-text-subtle);
}

.ck-journey__link[b-zokdvdeh9h] {
    color: var(--ck-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ck-journey__muted[b-zokdvdeh9h] {
    margin: var(--ck-space-2) 0 0;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-journey__warn[b-zokdvdeh9h] {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--ck-text-xs);
    font-weight: normal;
    color: var(--ck-text);
    padding-left: 8px;
    border-left: 3px solid var(--ck-warning);
}

.ck-journey__state[b-zokdvdeh9h] {
    margin: var(--ck-space-2) 0 0;
    padding: 6px 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    background: var(--ck-surface);
    border-left: 3px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
}

.ck-journey__state--attention[b-zokdvdeh9h] {
    background: var(--ck-warning-subtle);
    border-left-color: var(--ck-warning);
}

.ck-journey__state--failed[b-zokdvdeh9h] {
    background: var(--ck-error-subtle);
    border-left-color: var(--ck-error);
}

.ck-journey__state--done[b-zokdvdeh9h] {
    background: var(--ck-success-subtle);
    border-left-color: var(--ck-success);
}

.ck-journey__runs[b-zokdvdeh9h] {
    list-style: none;
    margin: var(--ck-space-2) 0 0;
    padding: 0;
}

.ck-journey__run + .ck-journey__run[b-zokdvdeh9h] {
    margin-top: var(--ck-space-2);
    padding-top: var(--ck-space-2);
    border-top: 1px solid var(--ck-border);
}

.ck-journey__run-head[b-zokdvdeh9h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    font-size: var(--ck-text-sm);
}

.ck-journey__run-status[b-zokdvdeh9h] {
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-journey__run-meta[b-zokdvdeh9h] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-journey__approvals[b-zokdvdeh9h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    margin-top: var(--ck-space-3);
    padding-top: var(--ck-space-2);
    border-top: 1px solid var(--ck-border);
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
}
/* /Components/Pages/Processes/StepDetail.razor.rz.scp.css */
/* Process step detail · warm (#1347). The process-orakel chat-context page for one step:
   role + SLA + bound agent, framed in the warm card language of the estafette. */

.ck-stepdetail[b-1fykm1hnmb] {
    max-width: 760px;
}

.ck-stepdetail__back[b-1fykm1hnmb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--ck-space-3);
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    text-decoration: none;
    transition: color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-stepdetail__back:hover[b-1fykm1hnmb] {
    color: var(--ck-accent-ink);
}

.ck-stepdetail__head[b-1fykm1hnmb] {
    margin-bottom: var(--ck-space-4);
}

.ck-stepdetail__eyebrow[b-1fykm1hnmb] {
    font-size: var(--ck-text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ck-text-subtle);
    font-weight: var(--ck-weight-semibold);
}

.ck-stepdetail__title[b-1fykm1hnmb] {
    margin: var(--ck-space-1) 0 0;
    font-size: var(--ck-text-xl);
    font-weight: var(--ck-weight-semibold);
    line-height: var(--ck-leading-tight);
    color: var(--ck-text);
}

.ck-stepdetail__card[b-1fykm1hnmb] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-4);
}

.ck-stepdetail__desc[b-1fykm1hnmb] {
    margin: 0;
    font-size: var(--ck-text-base);
    line-height: 1.55;
    color: var(--ck-text);
}

.ck-stepdetail__facts[b-1fykm1hnmb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
}

.ck-stepdetail__fact[b-1fykm1hnmb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--ck-radius-full);
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-stepdetail__fact strong[b-1fykm1hnmb] {
    color: var(--ck-text);
    font-weight: var(--ck-weight-semibold);
}

.ck-stepdetail__fact--accent[b-1fykm1hnmb] {
    background: var(--ck-accent-tint);
    border-color: transparent;
    color: var(--ck-accent-ink);
}

.ck-stepdetail__fact--accent strong[b-1fykm1hnmb] {
    color: var(--ck-accent-ink);
}

.ck-stepdetail__hint[b-1fykm1hnmb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    font-size: var(--ck-text-sm);
    line-height: 1.45;
}
/* /Components/Pages/ScheduledJobs/Detail.razor.rz.scp.css */
.job-overview[b-2fve33omju] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ck-space-4); margin: 0; }
.job-overview > div[b-2fve33omju] { background: var(--ck-surface-raised); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); padding: var(--ck-space-5); overflow-wrap: anywhere; }
.job-overview dt[b-2fve33omju] { font-size: var(--ck-text-xs); color: var(--ck-text-muted); margin: var(--ck-space-3) 0 var(--ck-space-2); }
.job-overview dd[b-2fve33omju] { margin: 0; font-size: var(--ck-text-lg); font-weight: var(--ck-weight-semibold); }
.job-overview span[b-2fve33omju] { font-size: var(--ck-text-sm); color: var(--ck-text-muted); }
[b-2fve33omju] .routine-agreements .mud-grid-item { border-top: 1px solid var(--ck-border); padding-bottom: var(--ck-space-4); overflow-wrap: anywhere; }
[b-2fve33omju] .mud-expand-panel-header { padding-block: var(--ck-space-4); }
[b-2fve33omju] .mud-expand-panel-content { border-left: 2px solid var(--ck-border); margin-left: var(--ck-space-5); }
@media (max-width: 600px) { .job-overview[b-2fve33omju] { grid-template-columns: 1fr; } }
/* /Components/Pages/ScheduledJobs/List.razor.rz.scp.css */
.job-grid[b-8to8xjbbtl] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: var(--ck-space-4); }
.job-card[b-8to8xjbbtl] { padding: var(--ck-space-5); min-width: 0; display: flex; flex-direction: column; gap: var(--ck-space-4); overflow-wrap: anywhere; }
.job-card__heading[b-8to8xjbbtl] { display: flex; gap: var(--ck-space-3); align-items: flex-start; }
.job-card__heading > div[b-8to8xjbbtl] { flex: 1; min-width: 0; }
.job-card h2[b-8to8xjbbtl] { margin: 0; font-size: var(--ck-text-lg); font-weight: var(--ck-weight-semibold); }
.job-card h2[b-8to8xjbbtl]  a { font: inherit; color: var(--ck-text); }
.job-card__icon[b-8to8xjbbtl] { display: flex; padding: var(--ck-space-3); border-radius: var(--ck-radius-md); background: var(--ck-accent-tint); color: var(--ck-accent-ink); }
.job-card__type[b-8to8xjbbtl] { font-size: var(--ck-text-xs); color: var(--ck-text-muted); }
.job-card__schedule[b-8to8xjbbtl] { display: flex; align-items: center; gap: var(--ck-space-2); color: var(--ck-accent-ink); background: var(--ck-accent-tint); border-radius: var(--ck-radius-md); padding: var(--ck-space-3); }
.job-card__facts[b-8to8xjbbtl] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-space-4); margin: 0; }
.job-card__facts dt[b-8to8xjbbtl] { color: var(--ck-text-muted); font-size: var(--ck-text-xs); margin-bottom: var(--ck-space-2); }
.job-card__facts dd[b-8to8xjbbtl] { margin: 0; display: flex; align-items: flex-start; flex-direction: column; gap: var(--ck-space-1); font-size: var(--ck-text-sm); }
.job-card__footer[b-8to8xjbbtl] { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--ck-space-2); border-top: 1px solid var(--ck-border); padding-top: var(--ck-space-3); margin-top: auto; }
@media (max-width: 420px) {
    .job-card__facts[b-8to8xjbbtl] { grid-template-columns: 1fr; }
    .job-card__heading[b-8to8xjbbtl] { flex-wrap: wrap; }
    .job-card__heading > div[b-8to8xjbbtl] { order: 3; flex-basis: 100%; }
    .job-card__icon[b-8to8xjbbtl] { margin-right: auto; }
}
/* /Components/Pages/ScheduledJobs/Run.razor.rz.scp.css */
/* The rebuilt mail (#3451). The body is somebody else's HTML, so it lives in a sandboxed frame with a visible
   edge — a reader must be able to see where Cockpit stops and the mail begins. */
.run-mail-body[b-ylr2veq4v5] {
    width: 100%;
    min-height: 420px;
    margin-top: 0.5rem;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: #ffffff; /* allow-raw-hex: the frame is a mail canvas, not a Cockpit surface — a themed background would recolour the mail and misrepresent what was sent */
}

.run-mail-hashes[b-ylr2veq4v5] {
    word-break: break-all;
}

/* The outcome row (#3569): four key figures under the status badges. Auto-fit rather than a fixed
   four-column grid, so the tiles stay legible when the shell's two navigation columns leave less
   width than a desktop suggests, and wrap to two rows on a narrow viewport instead of shrinking
   the numbers. */
.run-outcome[b-ylr2veq4v5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--ck-space-3);
    margin-bottom: var(--ck-space-4);
}

/* A zero here is a fact, not an absence — "0 mislukt" is exactly what the reader came to confirm,
   so a tile is never dropped; only its status dot goes neutral. The per-tile classes on the cards
   are selector hooks for the component tests, not styling: KpiCard renders them on its own root,
   which this component's scoped CSS cannot reach, and ::deep for a rule that changes nothing would
   be a lie about where the styling lives. */

/* The delivery reference of a notification that arrived (#3425). It hangs under the line it belongs to, past
   the state icon, so it reads as a detail of that destination rather than as a statement of its own — and it
   breaks anywhere, because a Teams activity id is one long unbroken token. */
.run-notification-reference[b-ylr2veq4v5] {
    margin-left: 2rem;
    word-break: break-all;
}

/* The executor's own JSON, inside the folded panel. It keeps the code block's surface from
   cards.css and only caps its height, so a long record scrolls in place instead of pushing the
   rest of the page out of reach. */
.run-output-json[b-ylr2veq4v5] {
    max-height: 22rem;
    overflow: auto;
}
/* /Components/Pages/ScheduledJobs/RunStepInspector.razor.rz.scp.css */
.run-step-sequence[b-p5z1llxvko] {
    display: grid;
    gap: var(--ck-space-2);
    margin: var(--ck-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.run-step[b-p5z1llxvko] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    width: 100%;
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.run-step:hover[b-p5z1llxvko],
.run-step[aria-pressed="true"][b-p5z1llxvko] {
    border-color: var(--ck-primary);
    background: var(--ck-surface-raised);
}

.run-step:focus-visible[b-p5z1llxvko] {
    outline: 2px solid var(--ck-border-focus);
    outline-offset: 2px;
}

.run-step-name[b-p5z1llxvko] {
    flex: 1;
    min-width: 0;
}

.run-step-outcome[b-p5z1llxvko],
.run-step-count[b-p5z1llxvko] {
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
}

.run-step-detail[b-p5z1llxvko] {
    margin-top: var(--ck-space-4);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
}

.run-step-detail-state[b-p5z1llxvko] {
    display: inline-flex;
    margin-top: var(--ck-space-2);
}

[b-p5z1llxvko] .run-step-evidence-hint {
    display: block;
    margin-top: var(--ck-space-2);
}

.run-step-evidence-list[b-p5z1llxvko] {
    display: grid;
    gap: var(--ck-space-2);
    max-height: 22rem;
    overflow: auto;
    margin: var(--ck-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.run-step-evidence-row[b-p5z1llxvko] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ck-space-2) var(--ck-space-3);
    padding: var(--ck-space-2) var(--ck-space-3);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    overflow-wrap: anywhere;
}

.run-step-evidence-row code[b-p5z1llxvko] {
    overflow-wrap: anywhere;
}

.run-step-invoice-ref[b-p5z1llxvko]::before {
    content: "· ";
}

@media (max-width: 600px) {
    .run-step[b-p5z1llxvko] {
        flex-wrap: wrap;
    }

    .run-step-name[b-p5z1llxvko] {
        flex-basis: calc(100% - 3rem);
    }
}
/* /Components/Pages/Skills/Detail.razor.rz.scp.css */
.skill-section[b-414g1tudan] { padding: var(--ck-space-5); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); overflow-wrap: anywhere; }
.skill-section--publish[b-414g1tudan] { background: var(--ck-surface-raised); }
.skill-section--publish > * + *[b-414g1tudan] { margin-top: var(--ck-space-3); }
.skill-section__heading[b-414g1tudan] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-space-3); margin-bottom: var(--ck-space-4); }
.skill-section h2[b-414g1tudan] { margin: 0; font-size: var(--ck-text-lg); font-weight: var(--ck-weight-semibold); }
.skill-steps[b-414g1tudan] { counter-reset: skill-step; list-style: none; padding: 0; margin: 0 0 var(--ck-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--ck-space-3); }
.skill-steps li[b-414g1tudan] { counter-increment: skill-step; display: flex; align-items: flex-start; gap: var(--ck-space-3); padding: var(--ck-space-4); border-radius: var(--ck-radius-md); background: var(--ck-accent-tint); line-height: var(--ck-leading-relaxed); }
.skill-steps li[b-414g1tudan]::before { content: counter(skill-step); display: grid; place-items: center; flex: 0 0 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ck-surface-raised); color: var(--ck-accent-ink); font-weight: var(--ck-weight-semibold); }
.skill-facts[b-414g1tudan] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--ck-space-4); margin: 0; }
.skill-facts > div[b-414g1tudan] { border-top: 1px solid var(--ck-border); padding-top: var(--ck-space-3); min-width: 0; }
.skill-facts dt[b-414g1tudan] { color: var(--ck-text-muted); font-size: var(--ck-text-xs); margin-bottom: var(--ck-space-2); }
.skill-facts dd[b-414g1tudan] { margin: 0; line-height: var(--ck-leading-relaxed); }
.skill-facts .ck-badge[b-414g1tudan] { margin: 0 var(--ck-space-1) var(--ck-space-1) 0; white-space: normal; }
.skill-section[b-414g1tudan]  .mud-table-container { overflow-x: auto; }
.skill-section[b-414g1tudan]  .mud-table-cell { white-space: normal; overflow-wrap: anywhere; }
.skill-section[b-414g1tudan]  .mud-stack { flex-wrap: wrap; }
/* /Components/Pages/Skills/List.razor.rz.scp.css */
.skill-grid[b-rymv588drw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--ck-space-4);
}

.skill-card[b-rymv588drw] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-4);
    padding: var(--ck-space-5);
    min-width: 0;
    overflow-wrap: anywhere;
}

.skill-card__heading[b-rymv588drw] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--ck-space-3);
}

.skill-card__heading > div[b-rymv588drw] { flex: 1; min-width: 9rem; }
.skill-card h2[b-rymv588drw] { margin: 0; font-size: var(--ck-text-lg); font-weight: var(--ck-weight-semibold); }
.skill-card h2 a[b-rymv588drw] { color: var(--ck-text); text-decoration: none; }
.skill-card h2 a:hover[b-rymv588drw] { color: var(--ck-accent-ink); text-decoration: underline; }
.skill-card h2 a:focus-visible[b-rymv588drw] { outline: 2px solid var(--ck-border-focus); outline-offset: 4px; }
.skill-card__icon[b-rymv588drw] { display: flex; padding: var(--ck-space-3); border-radius: var(--ck-radius-md); background: var(--ck-accent-tint); color: var(--ck-accent-ink); }
.skill-card__version[b-rymv588drw], .skill-card__label[b-rymv588drw] { color: var(--ck-text-muted); font-size: var(--ck-text-xs); }
.skill-card__description[b-rymv588drw] { margin: 0; line-height: var(--ck-leading-relaxed); color: var(--ck-text-muted); }
.skill-card__footer[b-rymv588drw] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-space-3); border-top: 1px solid var(--ck-border); padding-top: var(--ck-space-4); margin-top: auto; font-size: var(--ck-text-sm); }
.skill-card__footer > div[b-rymv588drw] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ck-space-1); }
@media (max-width: 420px) { .skill-card__footer[b-rymv588drw] { grid-template-columns: 1fr; } }
/* /Components/Pages/Tasks/MyTasks.razor.rz.scp.css */
/* Warm "Mijn taken" — card list of work-items (signature ProcesStap). #1347 */

.ck-tasks[b-t7nsw2ax2u] {
    max-width: 920px;
}

.ck-tasks__head[b-t7nsw2ax2u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ck-space-4);
    margin-bottom: var(--ck-space-5);
}

/* Open / Klaar segmented toggle — greige inset pill, active = raised white chip. */
.ck-tasks__toggle[b-t7nsw2ax2u] {
    display: flex;
    gap: 4px;
    flex: none;
    background: var(--ck-surface-high);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 3px;
}

.ck-tasks__seg[b-t7nsw2ax2u] {
    border: none;
    background: none;
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-subtle);
    border-radius: var(--ck-radius-sm);
    padding: 5px 13px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--ck-duration-fast) var(--ck-ease-default),
        color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-tasks__seg:hover[b-t7nsw2ax2u] {
    color: var(--ck-text);
}

.ck-tasks__seg--active[b-t7nsw2ax2u] {
    background: var(--ck-surface-raised);
    color: var(--ck-text);
    font-weight: var(--ck-weight-semibold);
    box-shadow: var(--ck-shadow-sm);
}

/* Active-filters row. */
.ck-tasks__filters[b-t7nsw2ax2u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-4);
    padding: var(--ck-space-3) var(--ck-space-4);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
}

.ck-tasks__filters-label[b-t7nsw2ax2u] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.ck-tasks__filter-chip[b-t7nsw2ax2u] {
    font-size: var(--ck-text-xs);
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-radius: var(--ck-radius-full);
    padding: 3px 10px;
}

.ck-tasks__filters-clear[b-t7nsw2ax2u] {
    border: none;
    background: none;
    font: inherit;
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-accent-ink);
    cursor: pointer;
    margin-left: auto;
}

.ck-tasks__section-label[b-t7nsw2ax2u] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wider);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
    margin-bottom: var(--ck-space-3);
}

/* Card list — one ProcesStap per task, wrapped in a full-card navigation link. */
.ck-tasks__list[b-t7nsw2ax2u] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2-5);
}

.ck-tasks__link[b-t7nsw2ax2u] {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ck-radius-lg);
    transition: transform var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-tasks__link:hover[b-t7nsw2ax2u] {
    transform: translateY(-1px);
}

.ck-tasks__link:focus-visible[b-t7nsw2ax2u] {
    outline: none;
    box-shadow: var(--ck-shadow-glow);
}

/* Empty state. */
.ck-tasks__empty[b-t7nsw2ax2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-10) var(--ck-space-6);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    text-align: center;
}

.ck-tasks__empty-icon[b-t7nsw2ax2u] {
    font-size: 2.6rem;
    color: var(--ck-accent-soft);
}

.ck-tasks__empty-text[b-t7nsw2ax2u] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: 0;
}

/* Wat er NIET op deze pagina staat (#3639): beslissingen wachten bij Goedkeuringen. */
.ck-tasks__elsewhere[b-t7nsw2ax2u] {
    margin: var(--ck-space-5) 0 0;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-tasks__elsewhere a[b-t7nsw2ax2u] {
    margin-left: var(--ck-space-1);
    color: var(--ck-accent);
    text-decoration: underline;
}
/* /Components/Pages/Tasks/WorkItemDetail.razor.rz.scp.css */
/* Warm work-item detail (#1347). Quiet panel, TrustLine provenance, warm action row. */

.ck-workitem[b-3yryoe5y0k] {
    max-width: 720px;
}

.ck-workitem__back[b-3yryoe5y0k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: var(--ck-space-3);
}

.ck-workitem__back:hover[b-3yryoe5y0k] {
    color: var(--ck-accent-ink);
}

.ck-workitem__back-icon[b-3yryoe5y0k] {
    font-size: 1.05rem;
}

.ck-workitem__panel[b-3yryoe5y0k] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xl);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-6) var(--ck-space-6) var(--ck-space-5);
}

.ck-workitem__overline[b-3yryoe5y0k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-3);
}

.ck-workitem__eyebrow[b-3yryoe5y0k] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wider);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
}

.ck-workitem__id[b-3yryoe5y0k] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-disabled);
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
}

.ck-workitem__title[b-3yryoe5y0k] {
    font-size: var(--ck-text-xl);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    letter-spacing: var(--ck-tracking-tight);
    line-height: var(--ck-leading-tight);
    margin: var(--ck-space-2) 0 0;
}

.ck-workitem__badges[b-3yryoe5y0k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
}

.ck-workitem__desc[b-3yryoe5y0k] {
    font-size: var(--ck-text-base);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-relaxed);
    margin: var(--ck-space-4) 0 0;
}

/* TrustLine wrapper — a hairline above to seat it as the provenance footer of the panel. */
.ck-workitem__trust[b-3yryoe5y0k] {
    margin-top: var(--ck-space-5);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
}

/* Quiet provenance line for hand-made / unknown-origin tasks. */
.ck-workitem__prov-line[b-3yryoe5y0k] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-5);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.ck-workitem__prov-icon[b-3yryoe5y0k] {
    font-size: 1.05rem;
    color: var(--ck-text-subtle);
}

/* Facts grid — role / claimed-by / deadline. */
.ck-workitem__facts[b-3yryoe5y0k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-6);
    margin-top: var(--ck-space-5);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
}

.ck-workitem__fact[b-3yryoe5y0k] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ck-workitem__fact-label[b-3yryoe5y0k] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ck-tracking-wide);
    color: var(--ck-text-disabled);
    font-weight: var(--ck-weight-semibold);
}

.ck-workitem__fact-value[b-3yryoe5y0k] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
}

/* Action row. */
.ck-workitem__actions[b-3yryoe5y0k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-6);
    justify-content: flex-end;
}

.ck-workitem__btn[b-3yryoe5y0k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--ck-radius-md);
    padding: 9px 16px;
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background-color var(--ck-duration-fast) var(--ck-ease-default),
        border-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-workitem__btn:disabled[b-3yryoe5y0k] {
    opacity: 0.55;
    cursor: default;
}

.ck-workitem__btn-icon[b-3yryoe5y0k] {
    font-size: 1.05rem;
}

.ck-workitem__btn--primary[b-3yryoe5y0k] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
}

.ck-workitem__btn--primary:not(:disabled):hover[b-3yryoe5y0k] {
    background: var(--ck-accent-ink);
}

.ck-workitem__btn--outline[b-3yryoe5y0k] {
    background: var(--ck-surface-raised);
    border-color: var(--ck-border-strong);
    color: var(--ck-text-muted);
}

.ck-workitem__btn--outline:not(:disabled):hover[b-3yryoe5y0k] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.ck-workitem__btn--ghost[b-3yryoe5y0k] {
    background: none;
    color: var(--ck-text-muted);
}

.ck-workitem__btn--ghost:hover[b-3yryoe5y0k] {
    color: var(--ck-accent-ink);
}

.ck-workitem__btn--warn[b-3yryoe5y0k] {
    background: var(--ck-warning-subtle);
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
}

.ck-workitem__btn--warn:not(:disabled):hover[b-3yryoe5y0k] {
    background: color-mix(in oklab, var(--ck-warning) 22%, transparent);
}

/* Not-found state. */
.ck-workitem__missing[b-3yryoe5y0k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-10) var(--ck-space-6);
    text-align: center;
    color: var(--ck-text-muted);
}

.ck-workitem__missing-icon[b-3yryoe5y0k] {
    font-size: 2.6rem;
    color: var(--ck-warning);
}
/* /Components/Pages/VoiceAi/Calls.razor.rz.scp.css */
/* Gesprekken-lijst · warme rij-lijst (#1347, Open IA-punten frame 2).
   "Nu live" puls-teller boven, recent eronder; klik op een rij opent het bestaande
   gesprek-detail / live-meekijken. Status-kleuren LOCKED (--ck-success / --ck-warning). */

.ck-calls[b-nf36ekasuf] {
    max-width: 820px;
}

/* ----- Live puls-teller (header pill) ----- */
.ck-calls__live-pill[b-nf36ekasuf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: var(--ck-radius-full);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-error);
    background: var(--ck-error-subtle);
}

.ck-calls__live-dot[b-nf36ekasuf] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-error);
    /* Canonieke LIVE-puls (#1533): gedeelde ck-dot-pulse, één timing kit-breed (1.8s). */
    animation: ck-dot-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ck-calls__live-dot[b-nf36ekasuf] { animation: none; }
}

/* ----- Sections ----- */
.ck-calls__section[b-nf36ekasuf] {
    margin-bottom: var(--ck-space-5);
}

.ck-calls__section-label[b-nf36ekasuf] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text-subtle);
    padding: 0 var(--ck-space-1) var(--ck-space-2);
}

.ck-calls__list[b-nf36ekasuf] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
}

/* ----- Row (clickable button styled as a card row) ----- */
.ck-calls__row[b-nf36ekasuf] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    box-shadow: var(--ck-shadow-soft);
    cursor: pointer;
    font: inherit;
    color: var(--ck-text);
    transition: border-color var(--ck-duration-fast) var(--ck-ease-default),
                transform var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-calls__row:hover[b-nf36ekasuf] {
    border-color: var(--ck-border-strong);
    transform: translateY(-1px);
}

.ck-calls__row:focus-visible[b-nf36ekasuf] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

/* Selected / live emphasis: accent-tint wash + soft ring (geselecteerd-staat uit de mockup). */
.ck-calls__row--live[b-nf36ekasuf] {
    background: var(--ck-accent-tint);
    border: 1.5px solid var(--ck-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--ck-accent-rgb), 0.08);
}

.ck-calls__row--live:hover[b-nf36ekasuf] {
    border-color: var(--ck-accent-soft);
    transform: translateY(-1px);
}

/* ----- Avatar (live) ----- */
.ck-calls__avatar[b-nf36ekasuf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-bold);
}

/* ----- Outcome icon tile (recent) ----- */
.ck-calls__outcome[b-nf36ekasuf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--ck-radius-md);
}

.ck-calls__outcome--ok[b-nf36ekasuf] {
    background: var(--ck-success-subtle);
    color: oklch(from var(--ck-success) calc(l - 0.14) c h);
}

.ck-calls__outcome--attention[b-nf36ekasuf] {
    background: var(--ck-warning-subtle);
    color: oklch(from var(--ck-warning) calc(l - 0.16) c h);
}

/* ----- Row text ----- */
.ck-calls__row-main[b-nf36ekasuf] {
    flex: 1;
    min-width: 0;
}

.ck-calls__row-title[b-nf36ekasuf] {
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-calls__row-title--live[b-nf36ekasuf] {
    color: var(--ck-accent-ink);
}

.ck-calls__row-sub[b-nf36ekasuf] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-calls__row-sub--live[b-nf36ekasuf] {
    color: var(--ck-accent-ink);
    opacity: 0.85;
}

.ck-calls__row-sub--attention[b-nf36ekasuf] {
    color: oklch(from var(--ck-warning) calc(l - 0.18) c h);
}

/* ----- Auto-join chip (live row) ----- */
.ck-calls__chip[b-nf36ekasuf] {
    flex: none;
    padding: 2px 9px;
    border-radius: var(--ck-radius-full);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-bold);
    color: var(--ck-accent-ink);
    background: var(--ck-surface-raised);
}

.ck-calls__chevron[b-nf36ekasuf] {
    flex: none;
    color: var(--ck-text-disabled);
}

/* ----- Empty state ----- */
.ck-calls__empty[b-nf36ekasuf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-8);
}

.ck-calls__empty-icon[b-nf36ekasuf] {
    font-size: 3rem;
    color: var(--ck-text-subtle);
    opacity: 0.5;
}

.ck-calls__empty-title[b-nf36ekasuf] {
    margin: var(--ck-space-2) 0 0;
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-calls__empty-text[b-nf36ekasuf] {
    margin: 0;
    max-width: 420px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}
/* /Components/Pages/VoiceAi/Live.razor.rz.scp.css */
/* Gesprek-detail · live transcript + read-only meeluister context (#1347, Werkvlakken frame).
   Warm Richting-A vocabulary via --ck- tokens — no hardcoded colours. Layout mirrors the mockup:
   two zones (transcript left, meeluister aside right) inside one card. */

.gd-header-actions[b-5zzblzh2dr] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
}

/* LIVE pulse badge — uses the LOCKED error/status hue (not the accent), like the mockup. */
.gd-live-badge[b-5zzblzh2dr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ck-error);
    background: var(--ck-error-subtle);
    border-radius: var(--ck-radius-full);
    padding: 3px 10px;
}

.gd-live-dot[b-5zzblzh2dr] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-error);
    /* Canonieke LIVE-puls (#1533): gedeelde ck-dot-pulse, één timing kit-breed (1.8s). */
    animation: ck-dot-pulse 1.8s ease-in-out infinite;
}

.gd-state-card[b-5zzblzh2dr] {
    margin-top: var(--ck-space-4);
    text-align: center;
    padding: var(--ck-space-8);
}

/* ── Two-zone shell ─────────────────────────────────────────────────────────────────────── */
.gd-shell[b-5zzblzh2dr] {
    display: flex;
    padding: 0;
    overflow: hidden;
    margin-top: var(--ck-space-4);
    height: min(72vh, 760px);
}

.gd-main[b-5zzblzh2dr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ── Call header strip ──────────────────────────────────────────────────────────────────── */
.gd-callheader[b-5zzblzh2dr] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-4) var(--ck-space-5);
    border-bottom: 1px solid var(--ck-border);
}

.gd-avatar[b-5zzblzh2dr] {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.gd-callwho[b-5zzblzh2dr] {
    flex: 1;
    min-width: 0;
}

.gd-callname[b-5zzblzh2dr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ck-text);
}

.gd-callsub[b-5zzblzh2dr] {
    font-size: 0.78rem;
    color: var(--ck-text-subtle);
}

/* Decorative live waveform — animated equaliser bars. */
.gd-wave[b-5zzblzh2dr] {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 26px;
}

.gd-wave span[b-5zzblzh2dr] {
    width: 3px;
    border-radius: 2px;
    background: var(--ck-accent-soft);
    animation: gd-wave-b-5zzblzh2dr 1.1s ease-in-out infinite;
}

.gd-wave span:nth-child(1)[b-5zzblzh2dr] { height: 40%; animation-delay: 0s; }
.gd-wave span:nth-child(2)[b-5zzblzh2dr] { height: 80%; animation-delay: .12s; background: var(--ck-accent); }
.gd-wave span:nth-child(3)[b-5zzblzh2dr] { height: 55%; animation-delay: .24s; }
.gd-wave span:nth-child(4)[b-5zzblzh2dr] { height: 100%; animation-delay: .36s; background: var(--ck-accent); }
.gd-wave span:nth-child(5)[b-5zzblzh2dr] { height: 65%; animation-delay: .48s; }
.gd-wave span:nth-child(6)[b-5zzblzh2dr] { height: 35%; animation-delay: .6s; }
.gd-wave span:nth-child(7)[b-5zzblzh2dr] { height: 75%; animation-delay: .72s; background: var(--ck-accent); }

.gd-autojoin[b-5zzblzh2dr] {
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ck-accent-ink);
    background: var(--ck-accent-tint);
    border-radius: var(--ck-radius-full);
    padding: 4px 10px;
}

/* ── Transcript ─────────────────────────────────────────────────────────────────────────── */
.gd-transcript[b-5zzblzh2dr] {
    flex: 1;
    overflow-y: auto;
    padding: var(--ck-space-5) var(--ck-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
}

.gd-caption[b-5zzblzh2dr] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--ck-text-subtle);
}

.gd-row[b-5zzblzh2dr] {
    display: flex;
    flex-direction: column;
    max-width: 520px;
}

.gd-row--owner[b-5zzblzh2dr] {
    align-self: flex-start;
}

.gd-row--agent[b-5zzblzh2dr] {
    align-self: flex-end;
    align-items: flex-end;
}

.gd-bubble-label[b-5zzblzh2dr] {
    font-size: 0.72rem;
    color: var(--ck-text-subtle);
    margin: 0 2px 4px;
}

.gd-bubble[b-5zzblzh2dr] {
    padding: 12px 15px;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Tail radius points to the speaker side — 4px corner on the owner's top-left / agent's top-right. */
.gd-bubble--owner[b-5zzblzh2dr] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: 4px 14px 14px 14px;
    color: var(--ck-text);
    box-shadow: var(--ck-shadow-sm);
}

.gd-bubble--agent[b-5zzblzh2dr] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    border-radius: 14px 4px 14px 14px;
}

.gd-bubble--interim[b-5zzblzh2dr] {
    font-style: italic;
    opacity: 0.85;
}

.gd-caret[b-5zzblzh2dr] {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-left: 2px;
    vertical-align: -2px;
    /* Caret knippert (#1535, MOTION.md §6) — steps(1) is een echte blink, geen puls/glow-fake. */
    animation: ck-caret-blink 1.1s steps(1) infinite;
}

/* ── Meeluister aside (read-only) ───────────────────────────────────────────────────────── */
.gd-aside[b-5zzblzh2dr] {
    width: 320px;
    flex: none;
    border-left: 1px solid var(--ck-border);
    background: var(--ck-surface);
    padding: var(--ck-space-5);
    overflow-y: auto;
}

.gd-aside-head[b-5zzblzh2dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gd-aside-eyebrow[b-5zzblzh2dr] {
    font-size: 0.7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ck-text-subtle);
    font-weight: 600;
}

.gd-readonly[b-5zzblzh2dr] {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ck-text-muted);
    background: var(--ck-surface-high);
    border-radius: var(--ck-radius-full);
    padding: 3px 8px;
}

.gd-aside-intro[b-5zzblzh2dr] {
    font-size: 0.78rem;
    color: var(--ck-text-subtle);
    line-height: 1.5;
    margin: var(--ck-space-2) 0 var(--ck-space-4);
}

.gd-aside-card[b-5zzblzh2dr] {
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 13px 14px;
    box-shadow: var(--ck-shadow-sm);
    margin-bottom: var(--ck-space-3);
}

.gd-aside-card--muted[b-5zzblzh2dr] {
    color: var(--ck-text-subtle);
}

.gd-aside-card__row[b-5zzblzh2dr] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.gd-aside-card__title[b-5zzblzh2dr] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ck-text);
}

/* Proposal card — uppercase eyebrow + slightly stronger body, mirroring the mockup's
   "VOORSTEL VAN DE ASSISTENT" card under the aandachtspunt. */
.gd-aside-card__eyebrow[b-5zzblzh2dr] {
    font-size: 0.66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ck-text-subtle);
    margin-bottom: 7px;
}

.gd-aside-card__body--proposal[b-5zzblzh2dr] {
    color: var(--ck-text-muted);
    font-size: 0.8rem;
}

.gd-aside-card__body[b-5zzblzh2dr] {
    font-size: 0.78rem;
    color: var(--ck-text-subtle);
    line-height: 1.45;
    margin-top: 2px;
}

.gd-dot[b-5zzblzh2dr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
}

.gd-dot--warning[b-5zzblzh2dr] {
    background: var(--ck-warning);
}

.gd-provenance[b-5zzblzh2dr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--ck-space-4);
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
    font-size: 0.75rem;
    color: var(--ck-text-subtle);
}

/* MudButton renders a child component, so reach its root with ::deep to add top spacing. */
[b-5zzblzh2dr] .gd-takeover {
    margin-top: var(--ck-space-3);
}

@keyframes gd-wave-b-5zzblzh2dr {
    0%, 100% { transform: scaleY(.6); }
    50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gd-live-dot[b-5zzblzh2dr],
    .gd-caret[b-5zzblzh2dr],
    .gd-wave span[b-5zzblzh2dr] {
        animation: none;
    }
}
/* /Components/Pages/Wizards/List.razor.rz.scp.css */
/* Galerij — warm Richting-A overzichts-laag (#1381). Shared idiom for the dashboards and
   wizards galleries: a header with a live-federated pill, a tab-strip, and a 3-column card
   grid wrapped by the cross-cutting search overlay. */

.ck-galerij__live[b-nb19vj8tc8] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-success);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: var(--ck-space-1) var(--ck-space-3);
}

.ck-galerij__live-dot[b-nb19vj8tc8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-success);
    animation: ck-galerij-pulse-b-nb19vj8tc8 1.8s ease-in-out infinite;
}

@keyframes ck-galerij-pulse-b-nb19vj8tc8 {
    0%, 100% { opacity: 0.45; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1); }
}

/* Tab strip */
.ck-galerij__tabs[b-nb19vj8tc8] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-4);
    border-bottom: 1px solid var(--ck-border);
    margin-bottom: var(--ck-space-5);
}

.ck-galerij__tab[b-nb19vj8tc8] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-text-base);
    font-weight: var(--ck-weight-medium);
    color: var(--ck-text-muted);
    text-decoration: none;
    padding: 0 var(--ck-space-1) var(--ck-space-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-galerij__tab:hover[b-nb19vj8tc8] {
    color: var(--ck-text);
}

.ck-galerij__tab.is-active[b-nb19vj8tc8] {
    color: var(--ck-accent-ink);
    font-weight: var(--ck-weight-semibold);
    border-bottom-color: var(--ck-accent);
}

.ck-galerij__tab-count[b-nb19vj8tc8] {
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-bold);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    border-radius: var(--ck-radius-full);
    padding: 1px 7px;
}

.ck-galerij__tab-count--muted[b-nb19vj8tc8] {
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
}

/* Card grid */
.ck-galerij__grid[b-nb19vj8tc8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-4);
}

@media (max-width: 1100px) {
    .ck-galerij__grid[b-nb19vj8tc8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ck-galerij__grid[b-nb19vj8tc8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ck-galerij-card[b-nb19vj8tc8] {
    display: flex;
    flex-direction: column;
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-soft);
    padding: var(--ck-space-5);
}

.ck-galerij-card__top[b-nb19vj8tc8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ck-galerij-card__tile[b-nb19vj8tc8] {
    width: 36px;
    height: 36px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ck-galerij-card__tile-glyph[b-nb19vj8tc8] {
    font-size: var(--ck-text-md);
}

.ck-galerij-card__title[b-nb19vj8tc8] {
    font-size: var(--ck-text-md);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
    margin: var(--ck-space-3) 0 0;
}

.ck-galerij-card__desc[b-nb19vj8tc8] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    line-height: var(--ck-leading-normal);
    margin: var(--ck-space-1) 0 0;
    flex: 1;
}

.ck-galerij-card__foot[b-nb19vj8tc8] {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    /* Stick to the bottom even when the card has no description paragraph. */
    margin-top: auto;
    padding-top: var(--ck-space-3);
    border-top: 1px solid var(--ck-border);
}

.ck-galerij-card__meta[b-nb19vj8tc8] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    flex: 1;
}

.ck-galerij-card__studio[b-nb19vj8tc8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ck-radius-sm);
    color: var(--ck-text-muted);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-default), color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-galerij-card__studio:hover[b-nb19vj8tc8] {
    background: var(--ck-surface-high);
    color: var(--ck-accent-ink);
}

.ck-galerij-card__open[b-nb19vj8tc8] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    font: inherit;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-accent-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--ck-space-1) var(--ck-space-2);
    border-radius: var(--ck-radius-sm);
    appearance: none;
    -webkit-appearance: none;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-default);
}

.ck-galerij-card__open:hover[b-nb19vj8tc8] {
    background: var(--ck-accent-tint);
}

.ck-galerij-card__open-icon[b-nb19vj8tc8] {
    font-size: var(--ck-text-base);
}

/* Empty state */
.ck-galerij__empty[b-nb19vj8tc8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ck-space-2);
    padding: var(--ck-space-10) var(--ck-space-6);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
}

.ck-galerij__empty-icon[b-nb19vj8tc8] {
    width: 52px;
    height: 52px;
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface-raised);
    border: 1px solid var(--ck-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-muted);
    box-shadow: var(--ck-shadow-sm);
    margin-bottom: var(--ck-space-2);
}

.ck-galerij__empty-title[b-nb19vj8tc8] {
    font-size: var(--ck-text-lg);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-text);
}

.ck-galerij__empty-desc[b-nb19vj8tc8] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    max-width: 360px;
    margin: 0 0 var(--ck-space-3);
}

/* Skeleton cards */
.ck-galerij-card--skeleton[b-nb19vj8tc8] {
    gap: var(--ck-space-3);
}

.ck-galerij-card__skel-line[b-nb19vj8tc8] {
    display: block;
    height: 13px;
    border-radius: var(--ck-radius-sm);
    width: 55%;
}

.ck-galerij-card__skel-line--wide[b-nb19vj8tc8] {
    width: 80%;
    margin-top: var(--ck-space-3);
}
/* /Components/Pages/Workbench/Workbench.razor.rz.scp.css */
/* Page layout only. Tile internals live in WorkbenchTile.razor.css; a dashboard's own look lives in its
   own artifacts (TileDefinition.Styles / WorkbenchDefinition.Styles, #3013) and never here.

   Every colour and space comes from the shared token set, which is what makes the dark theme work here
   without a single extra rule. */

/* The frame around the workbench (#4317): the containing block for anything its own CSS or a tile's
   positions fixed or absolute, and the edge where that paint stops. Its CSS cannot select this element. */
.wb-frame[b-curl5meaw7] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    contain: paint;
    isolation: isolate;
}

.wb[b-curl5meaw7] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    gap: var(--ck-space-4);
    min-height: 100%;
    padding: var(--ck-space-4) var(--ck-space-5);
    background: var(--ck-bg);
    color: var(--ck-text);
}

.wb-top[b-curl5meaw7] {
    display: flex;
    align-items: baseline;
    gap: var(--ck-space-3);
}

.wb-title[b-curl5meaw7] {
    margin: 0;
    font-size: var(--ck-text-xl);
    font-weight: var(--ck-weight-semibold);
}

.wb-clear[b-curl5meaw7] {
    margin-left: auto;
    font: inherit;
    font-size: var(--ck-text-sm);
    background: none;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    padding: var(--ck-space-1) var(--ck-space-3);
    color: var(--ck-text-muted);
    cursor: pointer;
}

/* Twelve columns, Bootstrap-style, in ONE grid for the whole workbench. Each tile spans the columns and
   rows it declared (--wb-w / --wb-h, set by the markup); `dense` lets the tiles after a tall one flow
   into the space beside it instead of leaving a hole. */
.wb-grid[b-curl5meaw7] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--ck-space-4);
    align-items: start;
}

/* The workbench's own script failed (#3014). Stays visible above the grid while the author looks at it. */
.wb-script-error[b-curl5meaw7] {
    margin: 0;
    padding: var(--ck-space-2) var(--ck-space-3);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    color: var(--ck-error);
    font-family: var(--ck-font-mono);
    font-size: var(--ck-text-xs);
    white-space: pre-wrap;
}

.wb-not-found[b-curl5meaw7] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.wb-not-found__text[b-curl5meaw7] {
    margin: 0;
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
}

.wb-tile-placeholder[b-curl5meaw7] {
    min-height: 120px;
    grid-column: span var(--wb-w, 12);
    grid-row: span var(--wb-h, 1);
}

.wb-skel[b-curl5meaw7] { height: 100%; min-height: 96px; border-radius: var(--ck-radius-md); }

/* A screen or a tile the Api held back (#4344): throttled, or the session needs a new sign-in. Not an error, so it
   reads quieter than one — muted text, a dashed edge, and a retry where waiting helps. */
.wb-hold[b-curl5meaw7] {
    flex-direction: column;
    gap: var(--ck-space-3);
}

.wb-tile-hold[b-curl5meaw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-3);
    padding: var(--ck-space-4);
    border: 1px dashed var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
}

.wb-tile-hold__text[b-curl5meaw7] {
    margin: 0;
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
    text-align: center;
}

.wb-retry[b-curl5meaw7] {
    font: inherit;
    font-size: var(--ck-text-sm);
    background: none;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    padding: var(--ck-space-1) var(--ck-space-3);
    color: var(--ck-text);
    cursor: pointer;
}

/* One breakpoint, because there is one decision: is there room for columns or not. */
@media (max-width: 900px) {
    .wb-grid[b-curl5meaw7] { grid-template-columns: 1fr; }
    .wb-tile-placeholder[b-curl5meaw7] { grid-column: auto; grid-row: auto; }
}
/* /Components/Pages/Workbench/WorkbenchList.razor.rz.scp.css */
/* List page layout only. Every colour and space comes from the shared token set. */

.wbl[b-1fds1domig] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-4);
    padding: var(--ck-space-4) var(--ck-space-5);
    background: var(--ck-bg);
    color: var(--ck-text);
}

.wbl-title[b-1fds1domig] {
    margin: 0;
    font-size: var(--ck-text-xl);
    font-weight: var(--ck-weight-semibold);
}

.wbl-skel[b-1fds1domig] {
    height: 2.5rem;
    border-radius: var(--ck-radius-md);
}

.wbl-empty__text[b-1fds1domig] {
    color: var(--ck-text-muted);
}

.wbl-list[b-1fds1domig] {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wbl-item[b-1fds1domig] {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
}

.wbl-link[b-1fds1domig] {
    display: block;
    padding: var(--ck-space-3) var(--ck-space-4);
    color: var(--ck-text);
    text-decoration: none;
    font-weight: var(--ck-weight-medium);
}

.wbl-link:hover[b-1fds1domig] {
    background: var(--ck-surface-high);
}
/* /Components/Pages/Workbench/WorkbenchTile.razor.rz.scp.css */
/* Tile chrome only: frame, header, state icons, footer buttons and the fallback form. This file exists
   SEPARATELY from Workbench.razor.css because Blazor CSS isolation does not cross a component boundary.

   A dashboard's own look (its rows, pills, cards) is NOT here and never will be again (#3013): it lives
   in the tile's own Styles, stored with the tile and confined to its placement by the platform. */

/* The frame around the tile (#4317). Paint containment makes it the containing block for fixed and
   absolute descendants and clips what they paint to its box; isolation keeps a z-index inside it. The tile's own
   CSS cannot select this element, so it cannot undo either. */
.wb-tile-frame[b-ltvs41f6n3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    contain: paint;
    isolation: isolate;
    border-radius: var(--ck-radius-md);
}

.wb-tile[b-ltvs41f6n3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    overflow: hidden;
}

.wb-tile__head[b-ltvs41f6n3] {
    display: flex;
    align-items: baseline;
    gap: var(--ck-space-2);
    padding: var(--ck-space-3) var(--ck-space-4);
    border-bottom: 1px solid var(--ck-border);
}

.wb-tile__title[b-ltvs41f6n3] {
    margin: 0;
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-semibold);
    letter-spacing: var(--ck-tracking-wide);
    text-transform: uppercase;
    color: var(--ck-text-muted);
}

.wb-tile__asof[b-ltvs41f6n3] {
    margin-left: auto;
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

/* The tile grows with its content. No fixed height — a queue of forty rows must be able to be forty
   rows tall, which is exactly what the old 158px card could not do. */

.wb-tile__body[b-ltvs41f6n3] {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--ck-space-3) var(--ck-space-4);
    overflow: auto;
    color: var(--ck-text);
}

/* A scripted tile draws inside its sandbox frame (#4620): the frame fills the body, which then adds no padding of its own. */
.wb-tile__body:has(> .wb-tile__sandbox)[b-ltvs41f6n3] {
    padding: 0;
    overflow: hidden;
}

.wb-tile__sandbox[b-ltvs41f6n3] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

.wb-tile__note[b-ltvs41f6n3] {
    margin: 0;
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
}

/* The tile's own script failed (#3014). Stays visible under the body while the author looks at it. */
/* The AI is still answering (#3016): a quiet chip in the header, the body already shows the reads. */
.wb-tile__ai-pending[b-ltvs41f6n3] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    font-size: var(--ck-text-xs);
    color: var(--ck-text-subtle);
}

.wb-tile__ai-pending-icon[b-ltvs41f6n3] {
    animation: wb-ai-pulse-b-ltvs41f6n3 1.6s ease-in-out infinite;
}

@keyframes wb-ai-pulse-b-ltvs41f6n3 {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* The answer to a question (#3016): tile chrome under the body, so every tile shows it the same way. */
.wb-tile__answer[b-ltvs41f6n3] {
    display: flex;
    gap: var(--ck-space-3);
    align-items: flex-start;
    padding: var(--ck-space-3) var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
    background: var(--ck-bg);
}

.wb-tile__answer-chip[b-ltvs41f6n3] {
    flex: none;
    padding: 2px var(--ck-space-2);
    border-radius: 999px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ck-accent-ink);
    background: var(--ck-accent-soft);
}

.wb-tile__answer-text[b-ltvs41f6n3] {
    margin: 0;
    font-size: var(--ck-text-sm);
    line-height: 1.5;
    white-space: pre-wrap;
}

.wb-tile__script-error[b-ltvs41f6n3] {
    margin: 0;
    padding: var(--ck-space-2) var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
    color: var(--ck-error);
    font-family: var(--ck-font-mono);
    font-size: var(--ck-text-xs);
    white-space: pre-wrap;
}

/* Denied, WaitingForSelection, Empty and Error each get their own icon and colour so a viewer can tell
   "you may not see this" apart from "nothing here yet" at a glance — the reason TileState has five
   values instead of one. */

.wb-tile__state[b-ltvs41f6n3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    height: 100%;
    min-height: 96px;
    text-align: center;
}

.wb-tile__state--denied .wb-tile__state-icon[b-ltvs41f6n3] {
    color: var(--ck-text-muted);
}

.wb-tile__state--waiting .wb-tile__state-icon[b-ltvs41f6n3] {
    color: var(--ck-info);
}

.wb-tile__state--empty .wb-tile__state-icon[b-ltvs41f6n3] {
    color: var(--ck-text-subtle);
}

.wb-tile__state--error .wb-tile__state-icon[b-ltvs41f6n3] {
    color: var(--ck-error);
}

.wb-tile__actions[b-ltvs41f6n3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    padding: var(--ck-space-3) var(--ck-space-4);
    border-top: 1px solid var(--ck-border);
}

.wb-action[b-ltvs41f6n3] {
    font: inherit;
    font-size: var(--ck-text-sm);
    padding: var(--ck-space-1) var(--ck-space-3);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface-raised);
    color: var(--ck-text);
    cursor: pointer;
}

.wb-action:disabled[b-ltvs41f6n3] {
    opacity: .45;
    cursor: not-allowed;
}

/* The footer form (#3012): drawn only when the template draws no buttons of its own, one control per
   declared input, so a tile with typed inputs and no form markup still gets a working form. */

.wb-tile__form[b-ltvs41f6n3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ck-space-2) var(--ck-space-3);
    width: 100%;
}

.wb-field[b-ltvs41f6n3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wb-field--check[b-ltvs41f6n3] {
    flex-direction: row;
    align-items: center;
    gap: var(--ck-space-2);
}

.wb-field__label[b-ltvs41f6n3] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.wb-field__control[b-ltvs41f6n3] {
    font: inherit;
    font-size: var(--ck-text-sm);
    padding: var(--ck-space-1) var(--ck-space-2);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    color: var(--ck-text);
    min-width: 0;
}

.wb-field__control--multiline[b-ltvs41f6n3] {
    min-height: 3.5em;
    resize: vertical;
}

/* Where the tile sits in the workbench grid: the columns and rows it declared, handed over as two custom
   properties by the markup (#3013). The frame is the grid item. On a narrow screen every tile takes the single column. */
.wb-tile-frame[b-ltvs41f6n3] {
    grid-column: span var(--wb-w, 12);
    grid-row: span var(--wb-h, 1);
}

@media (max-width: 900px) {
    .wb-tile-frame[b-ltvs41f6n3] {
        grid-column: auto;
        grid-row: auto;
    }
}

/* The status picker next to the "wachtrij" button (#3012): a select the template fills from
   actions.wachtrij.inputs.status.choices, so the options are the source's own picklist. */
.wb-tile__body[b-ltvs41f6n3]  .td-status-pick {
    display: inline-flex;
    gap: var(--ck-space-1);
    align-items: center;
}

.wb-tile__body[b-ltvs41f6n3]  .td-select {
    font: inherit;
    font-size: var(--ck-text-sm);
    padding: var(--ck-space-1) var(--ck-space-2);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    color: var(--ck-text);
}

/* The footer form (#3012): drawn only when the template draws no buttons of its own, one control per
   declared input, so a tile with typed inputs and no form markup still gets a working form. */
.wb-tile__form[b-ltvs41f6n3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ck-space-2) var(--ck-space-3);
    width: 100%;
}

.wb-field[b-ltvs41f6n3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wb-field--check[b-ltvs41f6n3] {
    flex-direction: row;
    align-items: center;
    gap: var(--ck-space-2);
}

.wb-field__label[b-ltvs41f6n3] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.wb-field__control[b-ltvs41f6n3] {
    font: inherit;
    font-size: var(--ck-text-sm);
    padding: var(--ck-space-1) var(--ck-space-2);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    color: var(--ck-text);
    min-width: 0;
}

.wb-field__control--multiline[b-ltvs41f6n3] {
    min-height: 3.5em;
    resize: vertical;
}
/* /Components/Shared/LivePausedStatus.razor.rz.scp.css */
/* "Updates gepauzeerd" — ingetogen, want dit is een mededeling en geen alarm. Hij bestaat alleen
   tijdens de pauze, dus hij mag rustig blijven: de boodschap is dat wat je ziet stilstaat. */
.ck-livepause[b-qyn9hyd6m5] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: 4px 6px 4px 8px;
    border-radius: var(--ck-radius-full);
    background: var(--ck-surface-high);
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
    white-space: nowrap;
}

.ck-livepause__icon[b-qyn9hyd6m5] {
    font-size: 1.05rem;
}

/* Een echte knop: bereikbaar met Tab, bedienbaar met Enter en Spatie, en aankondigbaar als knop. */
.ck-livepause__action[b-qyn9hyd6m5] {
    border: 0;
    background: none;
    padding: 2px 6px;
    border-radius: var(--ck-radius-sm);
    color: var(--ck-accent-ink);
    font: inherit;
    font-weight: var(--ck-weight-medium);
    cursor: pointer;
    text-decoration: underline;
}

.ck-livepause__action:hover[b-qyn9hyd6m5] {
    background: var(--ck-accent-soft);
}

.ck-livepause__action:focus-visible[b-qyn9hyd6m5] {
    outline: 2px solid var(--ck-border-focus);
    outline-offset: 2px;
}

/* Op smalle schermen telt de actie, niet de uitleg — de statusregel blijft aankondigbaar via aria. */
@media (max-width: 720px) {
    .ck-livepause__label[b-qyn9hyd6m5] {
        display: none;
    }
}
/* /Components/Shared/SeatAwareAccessDenied.razor.rz.scp.css */
.ck-seat-elsewhere[b-vfc7u1qx8q] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ck-space-2);
    max-width: 480px;
    margin: calc(-1 * var(--ck-space-6)) auto var(--ck-space-8);
    padding: 0 16px;
}

.ck-seat-elsewhere__label[b-vfc7u1qx8q] {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
}

.ck-seat-elsewhere__error[b-vfc7u1qx8q] {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    color: var(--ck-error);
    font-size: var(--ck-text-sm);
}

.ck-seat-connections[b-vfc7u1qx8q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ck-space-2);
    max-width: 480px;
    margin: calc(-1 * var(--ck-space-6)) auto var(--ck-space-8);
    padding: 0 16px;
}

.ck-seat-elsewhere + .ck-seat-connections[b-vfc7u1qx8q] {
    margin-top: 0;
}

.ck-seat-connections__hint[b-vfc7u1qx8q] {
    margin: 0;
    text-align: center;
    color: var(--ck-text-muted);
    font-size: var(--ck-text-sm);
}
/* /Components/Shared/SovereigntySignal.razor.rz.scp.css */
/* Soevereiniteit-signaal (#1538) — 'live · gefedereerd'-pill in de trigger-rij.
   Warm Richting-A: rustig, één accent. Kleur/materiaal via --ck- tokens, geen hardcoded waarden.
   De live-puls zit op de posture-stip (gedeelde .ck-live-dot); deze pill is een rustige tekst-chip. */

.ck-sovereignty__pill[b-94jy5dvjv6] {
    display: inline-flex;
    align-items: center;
    margin-left: var(--ck-space-1);
    padding: 1px var(--ck-space-2);
    border-radius: var(--ck-radius-full);
    border: 1px solid var(--ck-border);
    background: var(--ck-surface-raised);
    color: var(--ck-success);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.6;
    white-space: nowrap;
}

/* Verbonden bronnen (#1552, design D2) — een rustige rij chips onder de signaal-regel: per
   ECHTE connector een stip + naam, plus een telling rechts. De live-puls hergebruikt de gedeelde
   .ck-live-dot (ck-dot-pulse 1.8s, inclusief de reduced-motion-vloer uit motion.css) — geen lokale
   keyframe. Een verstoorde bron krijgt .is-degraded: een stille warning-stip zonder puls. */
.ck-sovereignty__sources[b-94jy5dvjv6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-2);
    padding-top: var(--ck-space-2);
    border-top: 1px solid var(--ck-border);
}

.ck-sovereignty__source[b-94jy5dvjv6] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    color: var(--ck-success);
    font-size: var(--ck-text-xs);
    font-weight: var(--ck-weight-semibold);
}

/* 6px stip (design) — de scoped selector wint qua specificiteit van .ck-live-dot's 8px-basis,
   zodat de bron-stippen kleiner/secundair blijven t.o.v. de posture-stip. */
.ck-sovereignty__source-dot[b-94jy5dvjv6] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: var(--ck-radius-full);
}

.ck-sovereignty__source-dot.is-healthy[b-94jy5dvjv6] {
    background: var(--ck-success);
}

.ck-sovereignty__source-dot.is-degraded[b-94jy5dvjv6] {
    background: var(--ck-warning);
}

.ck-sovereignty__source-count[b-94jy5dvjv6] {
    margin-left: auto;
    color: var(--ck-text-muted);
    font-size: var(--ck-text-xs);
}
/* /Components/Shared/WaitingWorkChip.razor.rz.scp.css */
/* "Wacht op jou" — een rustige pil in de topbalk, geen alarm. Hij verschijnt alleen als er echt
   iets wacht, dus hij mag opvallen zonder te schreeuwen. */
.ck-waiting[b-p5rllgaqms] {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding: 4px 10px 4px 8px;
    border-radius: var(--ck-radius-full);
    background: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
    font-size: var(--ck-text-sm);
    font-weight: var(--ck-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.ck-waiting:hover[b-p5rllgaqms],
.ck-waiting:focus-visible[b-p5rllgaqms] {
    background: var(--ck-accent-tint);
}

.ck-waiting__icon[b-p5rllgaqms] {
    font-size: 1.05rem;
}

.ck-waiting__count[b-p5rllgaqms] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 5px;
    border-radius: var(--ck-radius-full);
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    font-variant-numeric: tabular-nums;
}

/* Op smalle schermen telt het getal, niet het woord. */
@media (max-width: 720px) {
    .ck-waiting__label[b-p5rllgaqms] {
        display: none;
    }
}
/* /Components/Voice/BelScherm.razor.rz.scp.css */
/* Bel-scherm (#1879) — gefocust overlay bovenop de chat. Warm Richting-A via --ck- tokens, geen hardcoded
   kleuren; translucenties via color-mix zodat de per-tenant accent doorwerkt. Mockup-leidend:
   docs/proposals/immersive-design-kit/designs/Cockpit App - Bellen (desktop + tablet).dc.html. */

.bel-overlay[b-j6r9cs3kqm] {
    position: fixed;
    inset: 0;
    z-index: 1400; /* boven de shell + floating chat */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px;
    outline: none;
}

.bel-scrim[b-j6r9cs3kqm] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ck-text) 52%, transparent);
    backdrop-filter: blur(1.5px);
}

.bel-card[b-j6r9cs3kqm] {
    position: relative;
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    background: var(--ck-surface-raised);
    border-radius: 28px;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .5) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bel-rise-b-j6r9cs3kqm .5s cubic-bezier(.2, .7, .2, 1) both;
}

.bel-glow[b-j6r9cs3kqm] {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ck-accent) 10%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.bel-center[b-j6r9cs3kqm] {
    flex: 1;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-3);
    color: var(--ck-text-muted);
}

/* ── Setup / permissie-kaarten ───────────────────────────────────────────── */
.bel-setup[b-j6r9cs3kqm] {
    position: relative;
    padding: 48px 40px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 420px;
    justify-content: center;
}

.bel-setup-badge[b-j6r9cs3kqm] {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: var(--ck-surface);
    color: var(--ck-text-muted);
}

.bel-setup-badge--accent[b-j6r9cs3kqm] {
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.bel-setup-badge--error[b-j6r9cs3kqm] {
    background: var(--ck-error-subtle);
    color: var(--ck-error);
}

.bel-setup-badge--muted[b-j6r9cs3kqm] {
    background: var(--ck-surface);
    color: var(--ck-text-muted);
}

.bel-setup-title[b-j6r9cs3kqm] {
    font-size: var(--ck-text-xl);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ck-text);
    margin: 0;
}

.bel-setup-lead[b-j6r9cs3kqm] {
    font-size: var(--ck-text-base);
    color: var(--ck-text-muted);
    line-height: 1.55;
    margin: 12px 0 0;
    max-width: 440px;
}

.bel-guarantees[b-j6r9cs3kqm] {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    max-width: 420px;
}

.bel-guarantees li[b-j6r9cs3kqm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    line-height: 1.45;
}

.bel-guarantees li > svg[b-j6r9cs3kqm] {
    color: var(--ck-accent-ink);
    flex: none;
    margin-top: 1px;
}

.bel-path[b-j6r9cs3kqm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: var(--ck-text-xs);
    color: var(--ck-text);
    font-family: 'Spline Sans Mono', ui-monospace, monospace;
}

.bel-setup-actions[b-j6r9cs3kqm] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 26px;
    width: 100%;
    max-width: 340px;
}

.bel-setup-actions--row[b-j6r9cs3kqm] {
    flex-direction: row;
}

.bel-setup-actions--row .bel-btn[b-j6r9cs3kqm] {
    flex: 1;
}

.bel-btn[b-j6r9cs3kqm] {
    font-family: inherit;
    cursor: pointer;
    border-radius: 12px;
    padding: 12px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.bel-btn:disabled[b-j6r9cs3kqm] {
    opacity: .6;
    cursor: default;
}

.bel-btn--primary[b-j6r9cs3kqm] {
    background: var(--ck-accent);
    color: var(--ck-accent-contrast);
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--ck-accent) 40%, transparent);
}

.bel-btn--primary:hover:not(:disabled)[b-j6r9cs3kqm] {
    background: var(--ck-accent-ink);
}

.bel-btn--ghost[b-j6r9cs3kqm] {
    background: var(--ck-surface-raised);
    color: var(--ck-text);
    border-color: var(--ck-border);
}

.bel-btn--ghost:hover:not(:disabled)[b-j6r9cs3kqm] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

/* ── In-call ─────────────────────────────────────────────────────────────── */
.bel-call[b-j6r9cs3kqm] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: min(748px, calc(100vh - 48px));
}

.bel-topbar[b-j6r9cs3kqm] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 26px 0;
}

.bel-ident[b-j6r9cs3kqm] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bel-ident-mark[b-j6r9cs3kqm] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--ck-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--ck-accent) 50%, transparent);
}

.bel-ident-dot[b-j6r9cs3kqm] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ck-accent-contrast);
    opacity: .92;
}

.bel-ident-text[b-j6r9cs3kqm] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.bel-ident-name[b-j6r9cs3kqm] {
    font-size: var(--ck-text-base);
    font-weight: 600;
    color: var(--ck-text);
}

.bel-ident-sub[b-j6r9cs3kqm] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.bel-topbar-spacer[b-j6r9cs3kqm] {
    flex: 1;
}

.bel-pill[b-j6r9cs3kqm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    border-radius: var(--ck-radius-full);
    padding: 6px 12px;
}

.bel-pill--ok[b-j6r9cs3kqm] {
    color: var(--ck-success);
    background: var(--ck-success-subtle);
    border: 1px solid color-mix(in srgb, var(--ck-success) 30%, transparent);
}

.bel-pill-dot[b-j6r9cs3kqm] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-success);
    animation: ck-dot-pulse 1.8s ease-in-out infinite;
}

.bel-timer[b-j6r9cs3kqm] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.bel-tochat[b-j6r9cs3kqm] {
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ck-text-sm);
    font-weight: 600;
    color: var(--ck-text);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 7px 12px;
    transition: border-color .18s ease, color .18s ease;
}

.bel-tochat:hover[b-j6r9cs3kqm] {
    border-color: var(--ck-accent-soft);
    color: var(--ck-accent-ink);
}

.bel-audiobadge-row[b-j6r9cs3kqm] {
    flex: none;
    display: flex;
    justify-content: center;
    padding: 14px 0 0;
}

.bel-audiobadge[b-j6r9cs3kqm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    border-radius: var(--ck-radius-full);
    padding: 5px 12px;
}

.bel-audiobadge--local[b-j6r9cs3kqm] {
    color: var(--ck-success);
    background: var(--ck-success-subtle);
    border: 1px solid color-mix(in srgb, var(--ck-success) 28%, transparent);
}

.bel-audiobadge--cloud[b-j6r9cs3kqm] {
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
    background: var(--ck-warning-subtle);
    border: 1px solid color-mix(in srgb, var(--ck-warning) 40%, transparent);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.bel-hero[b-j6r9cs3kqm] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 40px;
    min-height: 0;
}

.bel-who[b-j6r9cs3kqm] {
    display: inline-flex;
    align-items: center;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: 3px;
    gap: 2px;
    margin-bottom: 26px;
}

.bel-who-seg[b-j6r9cs3kqm] {
    font-size: var(--ck-text-xs);
    font-weight: 600;
    color: var(--ck-text-muted);
    padding: 6px 14px;
    border-radius: var(--ck-radius-full);
}

.bel-who-seg--on[b-j6r9cs3kqm] {
    font-weight: 700;
    color: var(--ck-accent-contrast);
    background: var(--ck-accent);
}

.bel-orb[b-j6r9cs3kqm] {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--ck-accent-ink);
}

.bel-orb--rest[b-j6r9cs3kqm] {
    background: var(--ck-accent-tint);
    border: 1px solid var(--ck-accent-soft);
    animation: bel-breathe-b-j6r9cs3kqm 4s ease-in-out infinite;
}

.bel-orb--rest .bel-orb-core[b-j6r9cs3kqm] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--ck-accent);
    opacity: .85;
}

.bel-orb--you[b-j6r9cs3kqm] {
    background: var(--ck-surface);
    border: 2px solid var(--ck-accent-soft);
}

.bel-orb--assistant[b-j6r9cs3kqm] {
    background: radial-gradient(circle at 50% 38%, var(--ck-accent-bright), var(--ck-accent));
    color: var(--ck-accent-contrast);
    box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--ck-accent) 60%, transparent);
}

.bel-orb--processing[b-j6r9cs3kqm] {
    background: var(--ck-accent-tint);
    color: var(--ck-accent-ink);
}

.bel-orb-ring[b-j6r9cs3kqm] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ck-accent);
    opacity: .12;
    animation: bel-pulse-ring-b-j6r9cs3kqm 1.8s ease-out infinite;
}

.bel-orb-spinner[b-j6r9cs3kqm] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--ck-accent-soft);
    border-top-color: var(--ck-accent);
    animation: bel-spin-b-j6r9cs3kqm .9s linear infinite;
}

/* ── Equalizer ───────────────────────────────────────────────────────────── */
.bel-eq[b-j6r9cs3kqm] {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 18px;
}

.bel-eq-bar[b-j6r9cs3kqm] {
    width: 4px;
    border-radius: 2px;
    transform-origin: center;
}

.bel-eq--rest .bel-eq-bar[b-j6r9cs3kqm] {
    height: 8px;
    background: color-mix(in srgb, var(--ck-text-muted) 35%, transparent);
}

.bel-eq--active .bel-eq-bar[b-j6r9cs3kqm] {
    height: calc(16px + (var(--i) % 5) * 8px);
    background: var(--ck-accent);
    animation: bel-vbar-b-j6r9cs3kqm calc(.7s + (var(--i) % 4) * .08s) ease-in-out infinite;
    animation-delay: calc(var(--i) * -.07s);
}

.bel-eq--active .bel-eq-bar:nth-child(3n)[b-j6r9cs3kqm] {
    background: var(--ck-accent-soft);
}

/* ── Hero text / transcript / review ─────────────────────────────────────── */
.bel-hero-text[b-j6r9cs3kqm] {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 560px;
    width: 100%;
}

.bel-hero-title[b-j6r9cs3kqm] {
    font-size: var(--ck-text-lg);
    font-weight: 600;
    color: var(--ck-text);
    line-height: 1.4;
}

.bel-hero-hint[b-j6r9cs3kqm] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin: 10px 0 0;
}

.bel-hero-sub[b-j6r9cs3kqm] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
}

.bel-live-flag[b-j6r9cs3kqm] {
    font-size: var(--ck-text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ck-error);
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bel-live-dot[b-j6r9cs3kqm] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-error);
    animation: ck-dot-pulse 1.8s ease-in-out infinite;
}

.bel-turnnote[b-j6r9cs3kqm] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    background: var(--ck-warning-subtle);
    border: 1px solid color-mix(in srgb, var(--ck-warning) 40%, transparent);
    color: color-mix(in oklab, var(--ck-warning) 72%, var(--ck-text));
    border-radius: 12px;
    padding: 9px 14px;
    font-size: var(--ck-text-sm);
    line-height: 1.4;
}

.bel-turnnote > svg[b-j6r9cs3kqm] {
    flex: none;
}

.bel-review-label[b-j6r9cs3kqm] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    margin-bottom: 8px;
}

.bel-review-input[b-j6r9cs3kqm] {
    width: 100%;
    max-width: 520px;
    resize: none;
    font-family: inherit;
    font-size: var(--ck-text-md);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ck-text);
    background: var(--ck-surface-raised);
    border: 1.5px solid var(--ck-accent-soft);
    border-radius: 14px;
    padding: 13px 16px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-accent) 6%, transparent);
}

.bel-review-input:focus[b-j6r9cs3kqm] {
    outline: none;
    border-color: var(--ck-border-focus);
}

.bel-review-hint[b-j6r9cs3kqm] {
    font-size: var(--ck-text-sm);
    color: var(--ck-text-muted);
    margin-top: 10px;
}

/* ── Control dock ────────────────────────────────────────────────────────── */
.bel-dock[b-j6r9cs3kqm] {
    position: relative;
    flex: none;
    border-top: 1px solid var(--ck-border);
    background: color-mix(in srgb, var(--ck-surface) 60%, transparent);
    padding: 20px 26px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 36px;
}

.bel-dock-item[b-j6r9cs3kqm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bel-round[b-j6r9cs3kqm] {
    font-family: inherit;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ck-border);
    background: var(--ck-surface-raised);
    color: var(--ck-text);
    transition: border-color .18s ease, background-color .18s ease, transform .15s ease;
}

.bel-round:active[b-j6r9cs3kqm] {
    transform: scale(.96);
}

.bel-round:disabled[b-j6r9cs3kqm] {
    opacity: .55;
    cursor: default;
}

.bel-round--ghost[b-j6r9cs3kqm] {
    width: 56px;
    height: 56px;
}

.bel-round--ghost:hover:not(:disabled)[b-j6r9cs3kqm] {
    border-color: var(--ck-accent-soft);
}

.bel-round--mic[b-j6r9cs3kqm] {
    width: 66px;
    height: 66px;
    touch-action: none;
}

.bel-round--mic:hover:not(:disabled)[b-j6r9cs3kqm] {
    border-color: var(--ck-accent-soft);
}

.bel-round--mic-active[b-j6r9cs3kqm] {
    background: var(--ck-accent);
    border-color: var(--ck-accent);
    color: var(--ck-accent-contrast);
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--ck-accent) 50%, transparent);
}

.bel-round--send[b-j6r9cs3kqm] {
    width: 66px;
    height: 66px;
    background: var(--ck-accent);
    border-color: var(--ck-accent);
    color: var(--ck-accent-contrast);
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--ck-accent) 50%, transparent);
}

.bel-round--send:hover:not(:disabled)[b-j6r9cs3kqm] {
    background: var(--ck-accent-ink);
}

/* Afbreek-knop (#2608). Zelfde 66px-maat als de mic die hij vervangt, zodat de dock niet verspringt zodra de
   assistent begint te praten — en gevuld met de accentkleur, want zolang hij er staat is dit de primaire actie.
   Bewust niet de error-rood van ophangen: onderbreken is geen fout, en die twee mogen niet op elkaar lijken. */
.bel-round--stop[b-j6r9cs3kqm] {
    width: 66px;
    height: 66px;
    background: var(--ck-accent);
    border-color: var(--ck-accent);
    color: var(--ck-accent-contrast);
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--ck-accent) 50%, transparent);
}

.bel-round--stop:hover:not(:disabled)[b-j6r9cs3kqm] {
    background: var(--ck-accent-ink);
}

.bel-round--hangup[b-j6r9cs3kqm] {
    width: 72px;
    height: 72px;
    background: var(--ck-error);
    border-color: var(--ck-error);
    color: var(--ck-surface-raised);
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--ck-error) 60%, transparent);
}

.bel-round--hangup:hover[b-j6r9cs3kqm] {
    background: color-mix(in srgb, var(--ck-error) 88%, var(--ck-text));
}

.bel-dock-label[b-j6r9cs3kqm] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
    font-weight: 600;
}

.bel-dock-label--accent[b-j6r9cs3kqm] {
    color: var(--ck-accent-ink);
    font-weight: 700;
}

.bel-dock-sub[b-j6r9cs3kqm] {
    font-size: var(--ck-text-xs);
    color: var(--ck-text-muted);
}

.bel-mode[b-j6r9cs3kqm] {
    display: inline-flex;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-full);
    padding: 4px;
}

/* Knop, geen span: de gebruiker kiest hier zelf tussen doorpraten en nakijken (#2608). Vandaar de reset van
   de browser-standaarden — zonder deze regels krijgt de segmented control een grijze knoprand en een eigen
   achtergrond, en valt hij uit de pil. */
.bel-mode-seg[b-j6r9cs3kqm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: var(--ck-text-xs);
    font-weight: 600;
    color: var(--ck-text-muted);
    padding: 6px 11px;
    border: none;
    background: none;
    border-radius: var(--ck-radius-full);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.bel-mode-seg:hover:not(.bel-mode-seg--on)[b-j6r9cs3kqm] {
    color: var(--ck-text);
}

/* Toetsenbord-focus moet zichtbaar blijven: dit is nu een echte keuze, dus met tab bereikbaar. */
.bel-mode-seg:focus-visible[b-j6r9cs3kqm] {
    outline: var(--ck-focus-width) solid var(--ck-border-focus);
    outline-offset: 2px;
}

.bel-mode-seg--on[b-j6r9cs3kqm] {
    font-weight: 700;
    color: var(--ck-accent-contrast);
    background: var(--ck-accent);
}


/* ── Keyframes (prefixed to avoid global collisions) ─────────────────────── */
@keyframes bel-rise-b-j6r9cs3kqm {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes bel-pulse-ring-b-j6r9cs3kqm {
    0% { transform: scale(.82); opacity: .5; }
    75% { transform: scale(1.6); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes bel-breathe-b-j6r9cs3kqm {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes bel-spin-b-j6r9cs3kqm {
    to { transform: rotate(360deg); }
}

@keyframes bel-vbar-b-j6r9cs3kqm {
    0%, 100% { transform: scaleY(.3); }
    50% { transform: scaleY(1); }
}

/* Terughoudend bij prefers-reduced-motion — de kit-conventie. */
@media (prefers-reduced-motion: reduce) {
    .bel-card[b-j6r9cs3kqm],
    .bel-orb--rest[b-j6r9cs3kqm],
    .bel-orb-ring[b-j6r9cs3kqm],
    .bel-orb-spinner[b-j6r9cs3kqm],
    .bel-eq--active .bel-eq-bar[b-j6r9cs3kqm],
    .bel-pill-dot[b-j6r9cs3kqm],
    .bel-live-dot[b-j6r9cs3kqm] {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ── Tablet landscape (mockup E) ─────────────────────────────────────────── */
@media (max-width: 1080px) {
    .bel-overlay[b-j6r9cs3kqm] { padding: 26px; }
    .bel-orb[b-j6r9cs3kqm] { width: 132px; height: 132px; }
    .bel-eq[b-j6r9cs3kqm] { height: 48px; }
}
/* /Components/Wizards/WizardStepper.razor.rz.scp.css */
/* ck-wizard styles moved to Ratho.Shared.UI/wwwroot/css/components/designstudio.css */