:root {
    --color-primary: #dc2626;
    --color-primary-hover: #b91c1c;
    --color-primary-active: #991b1b;
    --color-on-primary: #ffffff;
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-surface-muted: #f3f4f6;
    --color-surface-raised: #ffffff;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-text-subtle: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-focus: #ef4444;
    --color-selected: #fef2f2;
    --color-disabled: #f3f4f6;
    --color-disabled-text: #9ca3af;
    --color-success: #047857;
    --color-success-surface: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-warning: #b45309;
    --color-warning-surface: #fffbeb;
    --color-warning-border: #fcd34d;
    --color-danger: #dc2626;
    --color-danger-surface: #fef2f2;
    --color-danger-border: #fecaca;
    --color-info: #1d4ed8;
    --color-info-surface: #eff6ff;
    --color-info-border: #bfdbfe;
    --font-family-sans: Figtree, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --line-tight: 1.25;
    --line-snug: 1.35;
    --line-normal: 1.5;
    --line-relaxed: 1.625;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 999px;
    --shadow-xs: 0 1px 1px rgb(17 24 39 / 0.04);
    --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.06);
    --shadow-md: 0 8px 20px rgb(17 24 39 / 0.08);
    --shadow-lg: 0 18px 40px rgb(17 24 39 / 0.12);
    --control-height-sm: 2.25rem;
    --control-height-md: 2.75rem;
    --control-height-lg: 3rem;
    --content-width-sm: 40rem;
    --content-width-md: 56rem;
    --content-width-lg: 72rem;
    --content-width-xl: 80rem;
    --breakpoint-mobile: 390px;
    --breakpoint-tablet: 768px;
    --breakpoint-laptop: 1280px;
    --breakpoint-desktop: 1440px;
    --z-dropdown: 40;
    --z-sticky: 50;
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 260ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
}

/* Phase 5D designation, category, and source-management workspaces */
.ui-source-mobile-list,
.ui-source-role-list,
.ui-source-role-groups,
.ui-role-source-list,
.ui-source-member-grid {
    display: grid;
    gap: var(--space-3);
}

.ui-source-mobile-card,
.ui-source-section,
.ui-source-preview-panel,
.ui-source-preview-result,
.ui-source-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}

.ui-source-mobile-card,
.ui-source-section,
.ui-source-preview-panel,
.ui-source-preview-result {
    padding: var(--space-5);
}

.ui-source-mobile-card.is-inactive {
    opacity: 0.72;
}

.ui-source-card-actions,
.ui-source-drawer-actions,
.ui-source-header-actions,
.ui-source-pill-list,
.ui-source-label-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-source-drawer-actions,
.ui-source-header-actions {
    margin-top: var(--space-4);
}

.ui-source-form-grid {
    display: grid;
    gap: var(--space-4);
}

.ui-readonly-field {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    display: flex;
    min-height: var(--control-height-md);
    padding: 0 var(--space-3);
}

.ui-access-model-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}

.ui-access-model-panel h3 {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.ui-access-model-panel dl {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-top: var(--space-4);
}

.ui-access-model-panel dl div {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.ui-access-model-panel dt {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-access-model-panel dd {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    margin-top: var(--space-1);
}

.ui-source-pill {
    margin-bottom: var(--space-1);
}

.ui-source-pill-muted {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.ui-source-pill-added {
    background: var(--color-success-surface);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.ui-source-pill-removed {
    background: var(--color-danger-surface);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.ui-source-hero {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
}

.ui-source-mapping-shell {
    align-items: start;
    display: grid;
    gap: var(--space-5);
}

.ui-source-mapping-main {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.ui-source-mapping-aside {
    min-width: 0;
}

.ui-mapping-role-option {
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ui-mapping-role-option:hover,
.ui-mapping-role-option:focus-within {
    background: color-mix(in srgb, var(--color-selected) 55%, white);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.ui-mapping-role-main {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-width: 0;
    width: 100%;
}

.ui-mapping-role-main strong {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
}

.ui-mapping-role-main small {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
    margin-top: var(--space-1);
}

.ui-mapping-role-meta {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: flex-end;
}

.ui-preview-change-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.ui-source-preview-result {
    display: grid;
    gap: var(--space-4);
}

.ui-source-preview-result.is-blocked {
    border-color: var(--color-danger-border);
}

.ui-role-source-summary {
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
}

.ui-source-member-row {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-3);
}

.ui-source-member-row span {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ui-source-member-row small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
    .ui-source-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-source-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
    }
}

@media (min-width: 1024px) {
    .ui-source-mapping-shell {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    }

    .ui-source-mapping-aside {
        position: sticky;
        top: var(--space-5);
    }
}

@media (max-width: 640px) {
    .ui-source-header-actions,
    .ui-source-card-actions,
    .ui-source-drawer-actions,
    .ui-mapping-role-main {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-source-header-actions .ui-btn,
    .ui-source-card-actions .ui-btn,
    .ui-source-drawer-actions .ui-btn,
    .ui-source-drawer-actions form,
    .ui-source-drawer-actions button {
        width: 100%;
    }

    .ui-sticky-action-bar {
        margin-left: 0;
        margin-right: 0;
    }

    .ui-mapping-role-meta {
        justify-content: flex-start;
    }
}

/* Phase 7C tasks and attendance workflows */
.ui-operational-page {
    max-width: var(--content-width-xl);
}

.ui-operational-form-page {
    max-width: var(--content-width-xl);
}

.ui-task-header-actions,
.ui-event-panel-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.ui-task-summary-grid,
.ui-attendance-metrics,
.ui-event-operations-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.ui-task-summary-grid strong,
.ui-attendance-metrics strong,
.ui-my-task-priority-strip strong,
.ui-attendance-progress strong {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
}

.ui-task-summary-grid small,
.ui-attendance-metrics small {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

.ui-inline-check {
    align-items: center;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
    min-height: var(--control-height-md);
}

.ui-inline-check input {
    border-radius: var(--radius-sm);
}

.ui-table-primary {
    color: var(--color-text);
    display: block;
    font-weight: var(--font-weight-semibold);
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-table-primary:hover,
.ui-table-primary:focus-visible {
    color: var(--color-primary);
}

.ui-workflow-table td small {
    color: var(--color-text-muted);
    display: block;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-row-attention {
    background: var(--color-danger-surface);
}

.ui-task-mobile-list,
.ui-my-task-group {
    display: grid;
    gap: var(--space-3);
}

.ui-task-mobile-card,
.ui-my-task-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    color: inherit;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ui-task-mobile-card.is-overdue,
.ui-my-task-card.is-overdue {
    border-left: 4px solid var(--color-danger);
}

.ui-my-task-card.is-complete {
    opacity: 0.72;
}

.ui-task-mobile-card-main,
.ui-my-task-main {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-task-mobile-title,
.ui-my-task-title {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-task-mobile-meta,
.ui-my-task-facts,
.ui-my-task-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-task-mobile-meta span,
.ui-my-task-facts span {
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: 0.25rem var(--space-2);
}

.ui-drawer-definition-list {
    display: grid;
    gap: var(--space-3);
}

.ui-drawer-definition-list div,
.ui-event-detail-grid div {
    min-width: 0;
}

.ui-drawer-definition-list dt,
.ui-event-detail-grid dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.ui-drawer-definition-list dd,
.ui-event-detail-grid dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

.ui-two-column-fields,
.ui-task-detail-layout {
    display: grid;
    gap: var(--space-5);
}

.ui-help-text,
.ui-field-error {
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
    margin-top: var(--space-1);
}

.ui-help-text {
    color: var(--color-text-muted);
}

.ui-field-error {
    color: var(--color-danger);
}

.ui-info-panel,
.ui-disclosure {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.ui-info-panel strong,
.ui-disclosure summary {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-info-panel p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

.ui-disclosure summary {
    cursor: pointer;
}

.ui-checkbox-stack,
.ui-checkbox-grid {
    display: grid;
    gap: var(--space-2);
}

.ui-checkbox-grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-top: var(--space-3);
}

.ui-task-detail-hero,
.ui-attendance-hero {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.ui-status-choice-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.ui-status-choice-grid span,
.ui-status-pill {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    justify-content: center;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
}

.ui-status-choice-grid input:checked + span,
.ui-status-pill.is-selected {
    background: var(--color-selected);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.ui-task-timeline {
    display: grid;
    gap: var(--space-3);
}

.ui-task-timeline article {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-3);
}

.ui-task-timeline article > div {
    align-items: baseline;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
}

.ui-task-timeline time,
.ui-task-timeline small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-task-timeline p {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

.ui-my-tasks-page {
    max-width: 42rem;
}

.ui-my-task-priority-strip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.ui-my-task-priority-strip div {
    padding: var(--space-3);
    text-align: center;
}

.ui-my-task-priority-strip div + div {
    border-left: 1px solid var(--color-border);
}

.ui-my-task-priority-strip span {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
}

.ui-attendance-progress {
    background: var(--color-selected);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, white);
    border-radius: var(--radius-xl);
    min-width: 9rem;
    padding: var(--space-4);
    text-align: center;
}

.ui-attendance-progress span {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
}

.ui-attendance-setup-grid {
    display: grid;
    gap: var(--space-4);
}

.ui-attendance-member-picker {
    grid-column: 1 / -1;
}

.ui-attendance-rows {
    display: grid;
    gap: var(--space-2);
}

.ui-attendance-row {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(14rem, 1fr) auto auto;
    padding: var(--space-3);
}

.ui-attendance-member {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    min-width: 0;
}

.ui-attendance-member img,
.ui-attendance-member > span {
    border-radius: var(--radius-full);
    flex: 0 0 2.5rem;
    height: 2.5rem;
    width: 2.5rem;
}

.ui-attendance-member > span {
    align-items: center;
    background: var(--color-selected);
    color: var(--color-primary-hover);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    justify-content: center;
}

.ui-attendance-member strong,
.ui-attendance-member small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-attendance-member small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-attendance-status-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: flex-end;
}

.ui-status-pill {
    border-radius: var(--radius-full);
    min-height: 2rem;
}

.ui-attendance-summary-grid,
.ui-operational-progress-panel {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.ui-attendance-summary-grid div,
.ui-operational-progress-panel div {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.ui-attendance-summary-grid span,
.ui-operational-progress-panel span {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
}

.ui-attendance-summary-grid strong,
.ui-operational-progress-panel strong {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-1);
}

@media (min-width: 768px) {
    .ui-two-column-fields,
    .ui-attendance-setup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-task-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }
}

@media (max-width: 640px) {
    .ui-task-header-actions,
    .ui-task-detail-hero,
    .ui-attendance-hero,
    .ui-attendance-row,
    .ui-my-task-actions,
    .ui-attendance-status-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-task-header-actions .ui-btn,
    .ui-task-detail-hero .ui-btn,
    .ui-attendance-hero .ui-btn,
    .ui-my-task-actions .ui-btn {
        width: 100%;
    }

    .ui-attendance-row {
        grid-template-columns: 1fr;
    }

    .ui-attendance-status-actions {
        justify-content: stretch;
    }

    .ui-attendance-status-actions form,
    .ui-attendance-status-actions .ui-status-pill {
        width: 100%;
    }

    .ui-status-pill {
        min-height: 2.75rem;
    }

    .ui-has-sticky-actions {
        padding-bottom: calc(9rem + var(--safe-area-bottom));
    }

    .ui-sticky-action-bar {
        bottom: calc(4.5rem + var(--safe-area-bottom));
        box-shadow: var(--shadow-lg);
        margin-left: 0;
        margin-right: 0;
    }

    .ui-my-task-priority-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-my-task-priority-strip div:nth-child(odd) {
        border-left: 0;
    }

    .ui-my-task-priority-strip div:nth-child(n + 3) {
        border-top: 1px solid var(--color-border);
    }
}

/* Phase 7A: calling campaign operations workspace */
.ui-calling-admin {
    max-width: var(--content-width-xl);
}

.ui-calling-workspace-header,
.ui-calling-form-shell,
.ui-calling-reassign-shell {
    display: grid;
    gap: var(--space-4);
}

.ui-calling-hero {
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    padding: var(--space-5);
}

.ui-calling-hero-main {
    min-width: 0;
}

.ui-calling-badge-row,
.ui-calling-hero-actions,
.ui-calling-card-title,
.ui-calling-card-meta,
.ui-calling-panel-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-calling-hero-actions {
    align-content: flex-start;
    justify-content: flex-end;
}

.ui-calling-context-list,
.ui-calling-stat-list {
    display: grid;
    gap: var(--space-3);
}

.ui-calling-context-list {
    grid-template-columns: repeat(5, minmax(0, auto));
    margin-top: var(--space-4);
}

.ui-calling-context-list dt,
.ui-calling-stat-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.ui-calling-context-list dd,
.ui-calling-stat-list dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-1);
}

.ui-calling-context-list a,
.ui-link,
.ui-calling-parent-card,
.ui-calling-caller-card {
    color: var(--color-primary);
}

.ui-link:hover {
    text-decoration: underline;
}

.ui-calling-action-menu {
    position: relative;
}

.ui-calling-action-menu summary {
    cursor: pointer;
    list-style: none;
}

.ui-calling-action-menu summary::-webkit-details-marker {
    display: none;
}

.ui-calling-action-menu-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: var(--space-1);
    min-width: 12rem;
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: var(--z-dropdown);
}

.ui-calling-action-menu-panel a {
    border-radius: var(--radius-sm);
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
}

.ui-calling-action-menu-panel a:hover {
    background: var(--color-surface-muted);
}

.ui-calling-workspace-tabs {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.ui-calling-workspace {
    display: grid;
    gap: var(--space-5);
}

.ui-calling-main-column,
.ui-calling-side-column,
.ui-calling-campaign-cards,
.ui-calling-caller-cards,
.ui-calling-target-cards,
.ui-calling-activity-list,
.ui-calling-attention-list {
    display: grid;
    gap: var(--space-4);
}

.ui-calling-summary-grid,
.ui-calling-review-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.ui-calling-summary-panel,
.ui-calling-review-panel {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.ui-calling-summary-panel span,
.ui-calling-review-panel span,
.ui-calling-campaign-card p,
.ui-calling-campaign-card small,
.ui-calling-caller-card span,
.ui-calling-caller-card small,
.ui-calling-target-card span,
.ui-calling-target-card small {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
}

.ui-calling-summary-panel strong,
.ui-calling-review-panel strong {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-2xl);
    line-height: var(--line-tight);
    margin-top: var(--space-1);
}

.ui-calling-progress-hero {
    display: grid;
    gap: var(--space-3);
}

.ui-calling-progress-hero span {
    color: var(--color-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

.ui-calling-progress-hero p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-calling-progress-cell {
    align-items: center;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 3rem minmax(6rem, 1fr);
}

.ui-calling-progress-track {
    background: var(--color-border);
    border-radius: var(--radius-full);
    height: 0.5rem;
    overflow: hidden;
}

.ui-calling-progress-track span {
    background: var(--color-primary);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.ui-calling-campaign-card,
.ui-calling-caller-card,
.ui-calling-target-card,
.ui-calling-parent-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-height: 4.5rem;
    padding: var(--space-4);
}

.ui-calling-card-main {
    min-width: 0;
}

.ui-calling-card-main strong {
    color: var(--color-text);
}

.ui-calling-card-progress {
    min-width: 5rem;
    text-align: right;
}

.ui-calling-card-progress span {
    color: var(--color-primary);
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.ui-calling-caller-card,
.ui-calling-target-card,
.ui-calling-parent-card {
    flex-direction: column;
}

.ui-calling-target-card > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.ui-calling-attention-item {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    padding: var(--space-3);
}

.ui-calling-attention-item.is-warning {
    background: var(--color-warning-surface);
    border-color: var(--color-warning-border);
}

.ui-calling-attention-item.is-danger {
    background: var(--color-danger-surface);
    border-color: var(--color-danger-border);
}

.ui-calling-activity-list > div,
.ui-calling-preview-row {
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0;
}

.ui-calling-activity-list > div:last-child,
.ui-calling-preview-row:last-child {
    border-bottom: 0;
}

.ui-calling-stepper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    overflow: hidden;
}

.ui-calling-stepper a {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-3) var(--space-4);
}

.ui-calling-stepper a:first-child {
    border-top: 0;
}

.ui-calling-stepper a.is-active {
    background: var(--color-selected);
    color: var(--color-primary);
}

.ui-calling-source-context,
.ui-calling-preview-card,
.ui-calling-distribution-preview {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.ui-calling-source-context span {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.ui-calling-form-grid,
.ui-calling-picker-layout,
.ui-calling-distribution-grid,
.ui-calling-check-grid {
    display: grid;
    gap: var(--space-4);
}

.ui-calling-form-wide {
    grid-column: 1 / -1;
}

.ui-calling-check-grid {
    gap: var(--space-2);
}

.ui-calling-group-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin: var(--space-4) 0 var(--space-2);
    text-transform: uppercase;
}

.ui-calling-option-card {
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ui-calling-option-card:has(input:checked) {
    background: var(--color-selected);
    border-color: var(--color-primary);
}

.ui-calling-option-card small {
    color: var(--color-text-muted);
    display: block;
    margin-top: var(--space-1);
}

.ui-calling-manual-row,
.ui-check-inline {
    align-items: center;
    display: flex;
    gap: var(--space-3);
}

.ui-calling-manual-row {
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.ui-calling-manual-row input {
    max-width: 7rem;
}

.ui-calling-preview-row {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (min-width: 768px) {
    .ui-calling-stepper {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ui-calling-stepper a {
        border-left: 1px solid var(--color-border);
        border-top: 0;
    }

    .ui-calling-stepper a:first-child {
        border-left: 0;
    }

    .ui-calling-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-calling-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-calling-picker-layout,
    .ui-calling-reassign-shell {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }

    .ui-calling-distribution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .ui-calling-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
    }

    .ui-calling-side-column {
        align-self: start;
        position: sticky;
        top: var(--space-5);
    }
}

@media (max-width: 640px) {
    .ui-calling-hero,
    .ui-calling-hero-actions,
    .ui-calling-badge-row,
    .ui-calling-campaign-card,
    .ui-calling-card-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-calling-hero-actions .ui-btn,
    .ui-calling-action-menu,
    .ui-calling-action-menu summary,
    .ui-calling-action-menu-panel,
    .ui-calling-campaign-card {
        width: 100%;
    }

    .ui-calling-action-menu-panel {
        position: static;
        margin-top: var(--space-2);
    }

    .ui-calling-context-list,
    .ui-calling-summary-grid,
    .ui-calling-review-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ui-calling-workspace-tabs {
        overflow-x: auto;
    }

    .ui-calling-card-progress {
        text-align: left;
    }
}

/* Phase 7B: mobile calling task execution */
.ui-container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-width-xl);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    width: 100%;
}

.ui-kicker {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.ui-section-heading,
.ui-caller-header,
.ui-caller-card-head,
.ui-caller-summary-main,
.ui-caller-title-row,
.ui-caller-primary-actions,
.ui-caller-navigation {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-btn-success {
    background: var(--color-success);
    color: var(--color-on-primary);
}

.ui-btn-success:hover {
    background: color-mix(in srgb, var(--color-success) 86%, black);
}

.ui-btn.is-disabled,
.ui-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.ui-caller-task-page {
    display: grid;
    gap: var(--space-5);
}

.ui-caller-hero,
.ui-caller-queue-summary,
.ui-caller-target-card,
.ui-caller-queue-panel,
.ui-caller-assignment-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.ui-caller-hero,
.ui-caller-queue-summary,
.ui-caller-target-card,
.ui-caller-queue-panel,
.ui-caller-assignment-card {
    padding: var(--space-5);
}

.ui-caller-hero {
    align-items: stretch;
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
}

.ui-caller-hero-stats,
.ui-caller-metrics,
.ui-caller-target-meta {
    display: grid;
    gap: var(--space-3);
}

.ui-caller-hero-stats {
    grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
    min-width: min(100%, 24rem);
}

.ui-caller-hero-stats > div,
.ui-caller-metrics > div,
.ui-caller-target-meta > div {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.ui-caller-hero-stats span,
.ui-caller-metrics dt,
.ui-caller-target-meta dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-caller-hero-stats strong,
.ui-caller-metrics dd,
.ui-caller-target-meta dd {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-tight);
    margin-top: var(--space-1);
}

.ui-caller-assignment-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.ui-caller-assignment-card,
.ui-caller-queue-summary {
    display: grid;
    gap: var(--space-4);
}

.ui-caller-assignment-card.is-overdue,
.ui-caller-queue-summary.is-overdue {
    border-color: var(--color-danger-border);
    box-shadow: inset 0.25rem 0 0 var(--color-danger);
}

.ui-caller-metrics,
.ui-caller-target-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-caller-progress {
    background: var(--color-border);
    border-radius: var(--radius-full);
    height: 0.55rem;
    overflow: hidden;
}

.ui-caller-progress span {
    background: var(--color-primary);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.ui-caller-card-foot {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-caller-completed-list,
.ui-caller-queue-list,
.ui-caller-outcome-grid {
    display: grid;
    gap: var(--space-3);
}

.ui-caller-completed-row,
.ui-caller-queue-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    min-height: 4.5rem;
    padding: var(--space-3);
}

.ui-caller-completed-row:hover,
.ui-caller-queue-row:hover,
.ui-caller-queue-row.is-active {
    background: var(--color-selected);
    border-color: var(--color-primary);
}

.ui-caller-completed-row small,
.ui-caller-queue-row small,
.ui-caller-outcome-card span,
.ui-caller-note span,
.ui-caller-history small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-caller-workspace {
    align-items: start;
    display: grid;
    gap: var(--space-5);
}

.ui-caller-active-column,
.ui-caller-queue-column {
    min-width: 0;
}

.ui-caller-filter-tabs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    padding: var(--space-2);
}

.ui-caller-filter-tabs a {
    align-items: center;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    gap: var(--space-2);
    min-height: var(--control-height-md);
    padding: var(--space-2) var(--space-3);
}

.ui-caller-filter-tabs a.is-active {
    background: var(--color-selected);
    color: var(--color-primary);
}

.ui-caller-filter-tabs strong {
    color: inherit;
    font-size: var(--font-size-xs);
}

.ui-caller-target-card {
    display: grid;
    gap: var(--space-5);
}

.ui-caller-target-head {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
}

.ui-caller-avatar {
    align-items: center;
    background: var(--color-selected);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: var(--font-weight-bold);
    height: 3.5rem;
    justify-content: center;
    overflow: hidden;
    width: 3.5rem;
}

.ui-caller-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ui-caller-note {
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.ui-caller-note p {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

.ui-caller-call-btn,
.ui-caller-primary-actions .ui-btn,
.ui-caller-sticky-actions .ui-btn,
.ui-caller-outcome-card .ui-btn {
    min-height: 2.75rem;
}

.ui-caller-primary-actions .ui-btn {
    flex: 1 1 0;
}

.ui-caller-history {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

.ui-caller-history summary {
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    min-height: var(--control-height-md);
}

.ui-caller-history ol {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.ui-caller-history li {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
}

.ui-caller-history li > div {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
}

.ui-caller-history p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-caller-queue-column {
    display: none;
}

.ui-caller-queue-panel {
    display: grid;
    gap: var(--space-4);
}

.ui-caller-pagination {
    overflow-x: auto;
}

.ui-caller-sticky-actions {
    align-items: center;
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    bottom: 0;
    box-shadow: var(--shadow-lg);
    display: flex;
    gap: var(--space-3);
    left: 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-area-bottom));
    position: sticky;
    right: 0;
    z-index: var(--z-sticky);
}

.ui-caller-sticky-actions .ui-btn {
    flex: 1 1 0;
}

.ui-caller-outcome-card {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ui-caller-outcome-card strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.ui-caller-outcome-card label {
    display: grid;
    gap: var(--space-1);
}

.ui-caller-outcome-card label span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-caller-action-sheet .ui-dialog-panel {
    max-height: min(88vh, 44rem);
}

@media (min-width: 768px) {
    .ui-caller-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }

    .ui-caller-queue-column {
        display: block;
        position: sticky;
        top: var(--space-5);
    }

    .ui-caller-outcome-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-caller-outcome-wide {
        grid-column: 1 / -1;
    }

    .ui-caller-sticky-actions {
        display: none;
    }
}

@media (max-width: 767px) {
    .ui-container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .ui-caller-task-page {
        padding-bottom: calc(5rem + var(--safe-area-bottom));
    }

    .ui-caller-header,
    .ui-caller-hero,
    .ui-caller-card-foot,
    .ui-caller-primary-actions,
    .ui-caller-navigation,
    .ui-caller-title-row,
    .ui-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-caller-hero-stats,
    .ui-caller-metrics,
    .ui-caller-target-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-caller-target-head {
        gap: var(--space-3);
    }

    .ui-caller-target-meta dd {
        overflow-wrap: anywhere;
    }

    .ui-caller-primary-actions {
        background: color-mix(in srgb, var(--color-surface) 96%, transparent);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        bottom: calc(4rem + var(--safe-area-bottom));
        box-shadow: var(--shadow-lg);
        flex-direction: row;
        margin: 0 calc(var(--space-3) * -1);
        padding: var(--space-3);
        position: sticky;
        z-index: var(--z-sticky);
    }

    .ui-caller-primary-actions .ui-btn {
        flex: 1 1 0;
    }

    .ui-caller-action-sheet .ui-dialog-panel {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        bottom: 0;
        left: 0;
        max-height: 88vh;
        max-width: 100vw;
        top: auto;
        transform: none;
    }

    .ui-caller-action-sheet .ui-dialog-body {
        padding-bottom: calc(var(--space-5) + var(--safe-area-bottom));
    }
}

/* Phase 6B meeting workspace and invitee management */
.ui-meeting-admin,
.ui-meeting-form-page {
    max-width: 88rem;
}

.ui-meeting-workspace-header {
    background: color-mix(in srgb, var(--color-background) 88%, transparent);
    display: grid;
    gap: var(--space-3);
    position: sticky;
    top: var(--space-3);
    z-index: 30;
}

.ui-meeting-hero {
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    padding: var(--space-5);
}

.ui-meeting-hero-main {
    min-width: 0;
}

.ui-meeting-badge-row,
.ui-meeting-hero-actions,
.ui-meeting-panel-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-meeting-hero-actions {
    justify-content: flex-end;
}

.ui-meeting-context-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-4);
}

.ui-meeting-context-list div {
    min-width: min(12rem, 100%);
}

.ui-meeting-context-list dt,
.ui-meeting-group-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    line-height: var(--line-tight);
}

.ui-meeting-context-list dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-snug);
    margin-top: var(--space-1);
}

.ui-meeting-context-list dd a {
    color: var(--color-primary-hover);
    font-weight: var(--font-weight-semibold);
}

.ui-meeting-action-menu {
    position: relative;
}

.ui-meeting-action-menu summary {
    list-style: none;
}

.ui-meeting-action-menu summary::-webkit-details-marker {
    display: none;
}

.ui-meeting-action-menu-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    min-width: 12rem;
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: var(--z-dropdown);
}

.ui-meeting-action-menu-panel a {
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
}

.ui-meeting-action-menu-panel a:hover,
.ui-meeting-action-menu-panel a:focus-visible {
    background: var(--color-surface-muted);
}

.ui-meeting-workspace-tabs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding-inline: var(--space-2);
}

.ui-meeting-workspace,
.ui-meeting-main-column,
.ui-meeting-side-column {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.ui-meeting-summary-grid,
.ui-meeting-review-grid {
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: 1px;
    overflow: hidden;
}

.ui-meeting-summary-panel,
.ui-meeting-review-grid > div {
    background: var(--color-surface);
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    min-height: 7rem;
    padding: var(--space-4);
}

.ui-meeting-summary-panel:hover,
.ui-meeting-summary-panel:focus-visible {
    background: color-mix(in srgb, var(--color-selected) 58%, white);
}

.ui-meeting-summary-panel strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-meeting-summary-panel small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}

.ui-meeting-source-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-meeting-source-strip span {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: 0.25rem var(--space-3);
}

.ui-meeting-invitee-tools {
    align-items: center;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem);
}

.ui-meeting-invitee-cards,
.ui-meeting-compact-list {
    display: grid;
    gap: var(--space-2);
}

.ui-meeting-invitee-card,
.ui-meeting-compact-list a,
.ui-meeting-parent-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
}

.ui-meeting-compact-list a,
.ui-meeting-parent-card {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: var(--control-height-lg);
}

.ui-meeting-compact-list a:hover,
.ui-meeting-compact-list a:focus-visible,
.ui-meeting-parent-card:hover,
.ui-meeting-parent-card:focus-visible {
    background: var(--color-surface-muted);
}

.ui-meeting-invitee-card strong,
.ui-meeting-compact-list strong,
.ui-meeting-parent-card strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-meeting-invitee-card span,
.ui-meeting-invitee-card small,
.ui-meeting-compact-list small,
.ui-meeting-parent-card span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-meeting-stat-list {
    display: grid;
    gap: var(--space-2);
}

.ui-meeting-stat-list div {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--space-2);
}

.ui-meeting-stat-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-meeting-stat-list dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-meeting-mobile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
    display: grid;
    gap: var(--space-3);
    min-height: 7rem;
    padding: var(--space-4);
}

.ui-meeting-mobile-main,
.ui-meeting-mobile-title-row,
.ui-meeting-mobile-meta {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.ui-meeting-mobile-main {
    justify-content: space-between;
}

.ui-meeting-mobile-title-row {
    min-width: 0;
}

.ui-meeting-mobile-open {
    color: var(--color-primary-hover);
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-meeting-mobile-meta {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    justify-content: space-between;
    padding-top: var(--space-3);
}

.ui-meeting-form-shell {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.ui-meeting-event-context,
.ui-meeting-note-panel,
.ui-meeting-invitee-preview {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.ui-meeting-event-context {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.ui-meeting-event-context span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-meeting-event-context a {
    color: var(--color-primary-hover);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-meeting-form-grid,
.ui-meeting-invitee-layout {
    display: grid;
    gap: var(--space-4);
}

.ui-meeting-form-wide {
    grid-column: 1 / -1;
}

.ui-meeting-invitee-controls {
    display: grid;
    gap: var(--space-5);
}

.ui-meeting-check-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.ui-check-row {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    gap: var(--space-2);
    min-height: var(--control-height-md);
    padding: var(--space-2) var(--space-3);
}

.ui-check-row input {
    accent-color: var(--color-primary);
}

.ui-check-row span {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.ui-meeting-group-label {
    margin: var(--space-4) 0 var(--space-2);
    text-transform: none;
}

.ui-error {
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

@media (min-width: 768px) {
    .ui-meeting-summary-grid,
    .ui-meeting-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-meeting-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ui-meeting-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
    }

    .ui-meeting-side-column {
        align-self: start;
        position: sticky;
        top: 13rem;
    }

    .ui-meeting-invitee-layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    }

    .ui-meeting-invitee-preview {
        align-self: start;
        position: sticky;
        top: var(--space-5);
    }
}

@media (min-width: 1280px) {
    .ui-meeting-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ui-meeting-workspace-header,
    .ui-meeting-side-column,
    .ui-meeting-invitee-preview {
        position: static;
    }

    .ui-meeting-hero,
    .ui-meeting-hero-actions,
    .ui-meeting-panel-actions,
    .ui-meeting-compact-list a,
    .ui-meeting-parent-card,
    .ui-meeting-event-context {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-meeting-hero-actions .ui-btn,
    .ui-meeting-panel-actions .ui-btn,
    .ui-meeting-action-menu,
    .ui-meeting-action-menu .ui-btn,
    .ui-meeting-action-menu-panel {
        width: 100%;
    }

    .ui-meeting-action-menu-panel {
        margin-top: var(--space-2);
        position: static;
    }

    .ui-meeting-context-list,
    .ui-meeting-invitee-tools {
        display: grid;
        gap: var(--space-3);
        grid-template-columns: 1fr;
    }

    .ui-meeting-summary-grid,
    .ui-meeting-review-grid {
        grid-template-columns: 1fr;
    }

    .ui-meeting-form-shell {
        padding: var(--space-4);
    }
}

/* Phase 6A event workspace and operational overview */
.ui-event-admin {
    max-width: 88rem;
}

.ui-table-subtext,
.ui-table-warning {
    display: block;
    font-size: var(--font-size-xs);
    line-height: var(--line-snug);
    margin-top: var(--space-1);
}

.ui-table-subtext {
    color: var(--color-text-muted);
}

.ui-table-warning {
    color: var(--color-warning);
}

.ui-event-parent-link {
    align-items: center;
    background: var(--color-selected);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, white);
    border-radius: var(--radius-xl);
    color: var(--color-primary-hover);
    display: flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    min-height: var(--control-height-md);
    padding: 0 var(--space-4);
}

.ui-event-workspace-header {
    background: color-mix(in srgb, var(--color-background) 88%, transparent);
    display: grid;
    gap: var(--space-3);
    position: sticky;
    top: var(--space-3);
    z-index: 30;
}

.ui-event-hero {
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    padding: var(--space-5);
}

.ui-event-hero-main {
    min-width: 0;
}

.ui-event-badge-row,
.ui-event-hero-actions,
.ui-event-panel-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-event-hero-actions {
    justify-content: flex-end;
}

.ui-event-context-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-4);
}

.ui-event-context-list div {
    min-width: min(12rem, 100%);
}

.ui-event-context-list dt,
.ui-panel-kicker,
.ui-event-team-list span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    line-height: var(--line-tight);
}

.ui-event-context-list dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-snug);
    margin-top: var(--space-1);
}

.ui-event-action-menu {
    position: relative;
}

.ui-event-action-menu summary {
    list-style: none;
}

.ui-event-action-menu summary::-webkit-details-marker {
    display: none;
}

.ui-event-action-menu-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    min-width: 12rem;
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: var(--z-dropdown);
}

.ui-event-action-menu-panel a {
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
}

.ui-event-action-menu-panel a:hover,
.ui-event-action-menu-panel a:focus-visible {
    background: var(--color-surface-muted);
}

.ui-event-workspace-tabs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding-inline: var(--space-2);
}

.ui-event-workspace {
    display: grid;
    gap: var(--space-5);
}

.ui-event-main-column,
.ui-event-side-column {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.ui-event-summary-grid {
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: 1px;
    overflow: hidden;
}

.ui-event-summary-panel {
    background: var(--color-surface);
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    min-height: 7rem;
    padding: var(--space-4);
}

.ui-event-summary-panel:hover,
.ui-event-summary-panel:focus-visible {
    background: color-mix(in srgb, var(--color-selected) 58%, white);
}

.ui-event-summary-panel strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-event-summary-panel small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}

.ui-event-timeline {
    display: grid;
    gap: var(--space-3);
}

.ui-event-timeline li {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    font-size: var(--font-size-sm);
    gap: var(--space-3);
}

.ui-event-timeline li span {
    background: var(--color-surface-muted);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    height: 0.875rem;
    width: 0.875rem;
}

.ui-event-timeline li.is-complete {
    color: var(--color-success);
}

.ui-event-timeline li.is-complete span {
    background: var(--color-success);
    border-color: var(--color-success);
}

.ui-event-timeline li.is-active {
    color: var(--color-info);
}

.ui-event-timeline li.is-active span {
    background: var(--color-info);
    border-color: var(--color-info);
}

.ui-event-timeline li.is-attention {
    color: var(--color-warning);
}

.ui-event-timeline li.is-attention span {
    background: var(--color-warning);
    border-color: var(--color-warning);
}

.ui-event-compact-list,
.ui-event-team-list {
    display: grid;
    gap: var(--space-2);
}

.ui-event-compact-list a,
.ui-event-team-list div {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-height: var(--control-height-lg);
    padding: var(--space-3);
}

.ui-event-compact-list a:hover,
.ui-event-compact-list a:focus-visible {
    background: var(--color-surface-muted);
}

.ui-event-compact-list strong,
.ui-event-team-list a {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-event-compact-list small {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

.ui-event-detail-grid {
    display: grid;
    gap: var(--space-3);
}

.ui-event-detail-grid div {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-3);
}

.ui-event-detail-grid dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-event-detail-grid dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

.ui-event-mobile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
    display: grid;
    gap: var(--space-3);
    min-height: 7rem;
    padding: var(--space-4);
}

.ui-event-mobile-main,
.ui-event-mobile-title-row,
.ui-event-mobile-meta {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.ui-event-mobile-main {
    justify-content: space-between;
}

.ui-event-mobile-title-row {
    min-width: 0;
}

.ui-event-mobile-open {
    color: var(--color-primary-hover);
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-event-mobile-meta {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    justify-content: space-between;
    padding-top: var(--space-3);
}

@media (min-width: 768px) {
    .ui-event-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ui-event-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
    }

    .ui-event-side-column {
        align-self: start;
        position: sticky;
        top: 13rem;
    }
}

@media (min-width: 1280px) {
    .ui-event-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ui-event-workspace-header,
    .ui-event-side-column {
        position: static;
    }

    .ui-event-hero,
    .ui-event-hero-actions,
    .ui-event-panel-actions,
    .ui-event-compact-list a,
    .ui-event-team-list div {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-event-hero-actions .ui-btn,
    .ui-event-panel-actions .ui-btn,
    .ui-event-action-menu,
    .ui-event-action-menu .ui-btn,
    .ui-event-action-menu-panel {
        width: 100%;
    }

    .ui-event-action-menu-panel {
        margin-top: var(--space-2);
        position: static;
    }

    .ui-event-context-list {
        display: grid;
        gap: var(--space-3);
    }

    .ui-event-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Phase 5E: delegated access, approval queues, and contextual profiles. */
.ui-access-summary-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-access-summary-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-access-mobile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.ui-access-mobile-only {
    display: none;
}

.ui-access-table-only {
    display: block;
    min-width: 0;
}

.ui-access-card-head,
.ui-access-hero-head,
.ui-access-header-actions,
.ui-access-decision-actions {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-access-card-meta,
.ui-access-definition-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-access-card-meta dt,
.ui-access-definition-grid dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ui-access-card-meta dd,
.ui-access-definition-grid dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin: var(--space-1) 0 0;
}

.ui-access-definition-grid.single {
    grid-template-columns: 1fr;
}

.ui-access-hero,
.ui-access-detail-grid,
.ui-access-form-shell {
    display: grid;
    gap: var(--space-5);
}

.ui-access-form-aside,
.ui-access-side-panel {
    align-self: start;
    display: grid;
    gap: var(--space-4);
}

.ui-access-review-panel,
.ui-access-preview-panel,
.ui-access-locked-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}

.ui-access-review-panel ul,
.ui-access-preview-list {
    color: var(--color-text-muted);
    display: grid;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
    list-style: disc;
    margin: var(--space-3) 0 0 var(--space-5);
}

.ui-access-form-grid,
.ui-access-toggle-grid,
.ui-access-change-columns {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-access-change-columns.compact {
    grid-template-columns: 1fr;
}

.ui-access-permission-list,
.ui-access-change-list,
.ui-access-role-picker {
    display: grid;
    gap: var(--space-2);
}

.ui-access-role-picker {
    max-height: 20rem;
    overflow: auto;
    padding-right: var(--space-1);
}

.ui-access-permission-option,
.ui-access-role-option,
.ui-access-toggle,
.ui-access-change-row,
.ui-access-ability-row {
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-3);
}

.ui-access-role-option,
.ui-access-toggle {
    justify-content: flex-start;
}

.ui-access-permission-option strong,
.ui-access-toggle strong,
.ui-access-change-row strong,
.ui-access-ability-row strong {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-access-permission-option small,
.ui-access-toggle small,
.ui-access-change-row small,
.ui-access-ability-row small,
.ui-table-secondary {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
    margin-top: var(--space-1);
}

.ui-access-permission-option em {
    color: var(--color-warning);
    display: inline-block;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-1);
}

.ui-access-change-row:hover,
.ui-access-permission-option:hover,
.ui-access-role-option:hover {
    background: color-mix(in srgb, var(--color-selected) 55%, white);
}

.ui-access-ability-row.is-held {
    border-color: color-mix(in srgb, var(--color-success) 22%, white);
}

.ui-ability-marker {
    align-items: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    height: 1.75rem;
    justify-content: center;
    width: 2.5rem;
}

.ui-access-ability-row.is-held .ui-ability-marker {
    background: var(--color-success-surface);
    color: var(--color-success);
}

.ui-risk-pill {
    align-items: center;
    border-radius: var(--radius-full);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    padding: 0.1875rem var(--space-2);
    text-transform: capitalize;
}

.ui-risk-low {
    background: var(--color-success-surface);
    color: var(--color-success);
}

.ui-risk-medium {
    background: var(--color-info-surface);
    color: var(--color-info);
}

.ui-risk-high {
    background: var(--color-warning-surface);
    color: var(--color-warning);
}

.ui-risk-critical,
.ui-risk-unknown {
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.ui-access-reason {
    background: var(--color-surface-muted);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    margin: 0;
    padding: var(--space-3);
}

.ui-table-primary {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-tab-count {
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin-left: var(--space-1);
    padding: 0.125rem var(--space-2);
}

.ui-code {
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: 0.125rem var(--space-2);
}

@media (min-width: 1024px) {
    .ui-access-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(24rem, 0.9fr);
    }

    .ui-access-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    }

    .ui-access-form-shell {
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    }

    .ui-access-form-shell-reversed {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    }

    .ui-access-form-aside,
    .ui-access-side-panel {
        position: sticky;
        top: var(--space-5);
    }
}

@media (max-width: 767px) {
    .ui-access-mobile-only {
        display: grid;
    }

    .ui-access-table-only {
        display: none;
    }

    .ui-access-summary-grid,
    .ui-access-summary-grid.compact,
    .ui-access-card-meta,
    .ui-access-definition-grid,
    .ui-access-form-grid,
    .ui-access-toggle-grid,
    .ui-access-change-columns {
        grid-template-columns: 1fr;
    }

    .ui-access-card-head,
    .ui-access-hero-head,
    .ui-access-header-actions,
    .ui-access-decision-actions,
    .ui-access-permission-option,
    .ui-access-change-row,
    .ui-access-ability-row {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-access-header-actions .ui-btn,
    .ui-access-decision-actions .ui-btn {
        width: 100%;
    }

    .ui-access-form-aside {
        order: 2;
        position: static;
    }
}

@media (max-width: 899px) {
    .ui-access-mobile-only {
        display: grid;
    }

    .ui-access-table-only {
        display: none;
    }
}

@media (min-width: 900px) {
    .ui-access-mobile-only {
        display: none;
    }

    .ui-access-table-only {
        display: block;
    }
}

@media (min-width: 640px) and (max-width: 800px) {
    .app-shell-role-pill {
        display: none;
    }

    .app-shell-desktop-nav {
        margin-left: var(--space-4) !important;
    }

    .app-shell-desktop-nav > :not([hidden]) ~ :not([hidden]) {
        margin-left: var(--space-4) !important;
    }

    .app-shell-actions,
    .app-shell-desktop-actions {
        gap: var(--space-1);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ui-access-form-shell,
    .ui-access-form-shell-reversed {
        grid-template-columns: 1fr;
    }

    .ui-access-form-aside,
    .ui-access-side-panel {
        position: static;
    }
}

html {
    font-family: var(--font-family-sans);
    color: var(--color-text);
    background: var(--color-background);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    background: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-normal);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-toast);
    transform: translateY(-140%);
    border-radius: var(--radius-md);
    background: var(--color-text);
    color: #ffffff;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: transform var(--motion-base) var(--ease-standard);
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-focus) 75%, white);
    outline-offset: 3px;
}

.ui-page-title {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    letter-spacing: 0;
}

.ui-section-title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    letter-spacing: 0;
}

.ui-card-title {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    letter-spacing: 0;
}

.ui-body {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-normal);
}

.ui-muted,
.ui-helper {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
}

.ui-label {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-snug);
}

.ui-table-text {
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
}

.ui-metric {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
}

.ui-btn {
    align-items: center;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    gap: var(--space-2);
    justify-content: center;
    letter-spacing: 0;
    line-height: var(--line-tight);
    min-height: var(--control-height-md);
    padding: 0 var(--space-4);
    text-transform: none;
    touch-action: manipulation;
    transition: background-color var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard),
        color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    background: var(--color-disabled);
    border-color: var(--color-border);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

.ui-btn-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.ui-btn-primary:hover {
    background: var(--color-primary-hover);
}

.ui-btn-primary:active {
    background: var(--color-primary-active);
}

.ui-btn-secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.ui-btn-secondary:hover {
    background: var(--color-surface-muted);
}

.ui-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
}

.ui-btn-ghost:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.ui-btn-danger {
    background: var(--color-danger);
    color: #ffffff;
}

.ui-btn-danger:hover {
    background: #b91c1c;
}

.ui-icon-btn {
    width: var(--control-height-md);
    min-width: var(--control-height-md);
    padding: 0;
}

.ui-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.ui-card-pad {
    padding: var(--space-5);
}

.ui-section-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.ui-field {
    display: grid;
    gap: var(--space-2);
}

.ui-required {
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
}

.ui-input,
.ui-select,
.ui-textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-normal);
    min-height: var(--control-height-md);
    width: 100%;
}

.ui-input,
.ui-select {
    padding: 0 var(--space-3);
}

.ui-textarea {
    padding: var(--space-3);
}

.ui-input::placeholder,
.ui-textarea::placeholder {
    color: var(--color-text-subtle);
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
    background: var(--color-disabled);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

.ui-checkbox {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    min-height: 1rem;
    min-width: 1rem;
}

.ui-toggle {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    min-height: var(--control-height-md);
}

.ui-toggle-control {
    appearance: none;
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    height: 1.5rem;
    position: relative;
    transition: background-color var(--motion-base) var(--ease-standard);
    width: 2.75rem;
}

.ui-toggle-control::after {
    background: #ffffff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    content: "";
    height: 1.125rem;
    left: 0.1875rem;
    position: absolute;
    top: 0.1875rem;
    transition: transform var(--motion-base) var(--ease-standard);
    width: 1.125rem;
}

.ui-toggle-control:checked {
    background: var(--color-primary);
}

.ui-toggle-control:checked::after {
    transform: translateX(1.25rem);
}

.ui-alert {
    border: 1px solid;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    padding: var(--space-3) var(--space-4);
}

.ui-alert-success {
    background: var(--color-success-surface);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.ui-alert-warning {
    background: var(--color-warning-surface);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.ui-alert-danger {
    background: var(--color-danger-surface);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.ui-alert-info {
    background: var(--color-info-surface);
    border-color: var(--color-info-border);
    color: var(--color-info);
}

.ui-input-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
}

.ui-empty {
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
}

.ui-empty-icon {
    align-items: center;
    background: var(--color-selected);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    display: inline-flex;
    height: 3rem;
    justify-content: center;
    margin-bottom: var(--space-3);
    width: 3rem;
}

.ui-loading {
    align-items: center;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
}

.ui-spinner {
    animation: ui-spin 900ms linear infinite;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    height: 1rem;
    width: 1rem;
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

.ui-badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    gap: var(--space-1);
    line-height: var(--line-tight);
    padding: 0.1875rem var(--space-2);
    white-space: nowrap;
}

.ui-badge-xs {
    font-size: 0.6875rem;
    padding: 0.125rem var(--space-2);
}

.ui-badge-success {
    background: var(--color-success-surface);
    color: var(--color-success);
}

.ui-badge-info {
    background: var(--color-info-surface);
    color: var(--color-info);
}

.ui-badge-warning {
    background: var(--color-warning-surface);
    color: var(--color-warning);
}

.ui-badge-danger {
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.ui-badge-muted {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.ui-avatar {
    background: var(--color-selected);
    color: var(--color-primary-hover);
    font-variant-numeric: tabular-nums;
}

.ui-divider {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

.ui-tooltip {
    position: relative;
}

.ui-tooltip[data-tooltip]:hover::after,
.ui-tooltip[data-tooltip]:focus-visible::after {
    background: var(--color-text);
    border-radius: var(--radius-md);
    bottom: calc(100% + var(--space-2));
    color: #ffffff;
    content: attr(data-tooltip);
    font-size: var(--font-size-xs);
    left: 50%;
    max-width: 16rem;
    padding: var(--space-2) var(--space-3);
    position: absolute;
    transform: translateX(-50%);
    white-space: normal;
    z-index: var(--z-tooltip, 90);
}

.ui-table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ui-table {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
}

.ui-table thead {
    background: var(--color-surface-muted);
}

.ui-table th {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
}

.ui-filter-toolbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
}

.ui-filter-toolbar select,
.ui-filter-toolbar input {
    min-height: var(--control-height-md);
}

.ui-feedback-stack {
    display: grid;
    gap: var(--space-3);
}

.ui-auth-shell {
    min-height: 100dvh;
    padding-bottom: calc(var(--space-8) + var(--safe-area-bottom));
    padding-left: max(var(--space-5), var(--safe-area-left));
    padding-right: max(var(--space-5), var(--safe-area-right));
    padding-top: calc(var(--space-8) + var(--safe-area-top));
}

.ui-auth-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.ui-error-shell {
    min-height: 100dvh;
    padding-bottom: calc(var(--space-8) + var(--safe-area-bottom));
    padding-left: max(var(--space-4), var(--safe-area-left));
    padding-right: max(var(--space-4), var(--safe-area-right));
    padding-top: calc(var(--space-8) + var(--safe-area-top));
}

.ui-dashboard-foundation .bg-white.shadow-sm.rounded-xl {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.ui-dashboard-foundation button,
.ui-dashboard-foundation a {
    touch-action: manipulation;
}

.ui-dashboard-foundation button {
    min-height: var(--control-height-md);
}

@media (max-width: 640px) {
    .ui-page-title {
        font-size: var(--font-size-xl);
    }

    .ui-btn,
    .ui-input,
    .ui-select {
        min-height: var(--control-height-md);
    }

    .ui-card-pad {
        padding: var(--space-4);
    }

    .ui-section-header {
        flex-direction: column;
    }
}

/* Phase 4 workflow components */
.ui-workflow-filter {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ui-filter-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ui-filter-row > .ui-filter-search {
    flex: 1 1 18rem;
}

.ui-filter-row > .ui-filter-control {
    flex: 0 1 12rem;
}

.ui-filter-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
}

.ui-filter-meta {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
    justify-content: space-between;
}

.ui-filter-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-filter-chip {
    align-items: center;
    background: var(--color-selected);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, white);
    border-radius: var(--radius-full);
    color: var(--color-primary-hover);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    gap: var(--space-1);
    line-height: var(--line-tight);
    padding: 0.25rem var(--space-2);
}

.ui-result-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.ui-workflow-table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ui-workflow-table-scroll {
    max-height: min(70vh, 44rem);
    overflow: auto;
}

.ui-workflow-table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    min-width: 100%;
}

.ui-workflow-table th,
.ui-workflow-table td {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    vertical-align: top;
}

.ui-workflow-table th {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    position: sticky;
    text-align: left;
    top: 0;
    z-index: 1;
}

.ui-workflow-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-selected) 55%, white);
}

.ui-workflow-table-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.ui-mobile-row-list {
    display: grid;
    gap: var(--space-2);
}

.ui-bulk-toolbar {
    background: var(--color-text);
    bottom: 0;
    box-shadow: var(--shadow-lg);
    color: #ffffff;
    inset-inline: 0;
    padding-bottom: var(--safe-area-bottom);
    position: fixed;
    transform: translateY(100%);
    transition: transform var(--motion-base) var(--ease-standard);
    z-index: var(--z-sticky);
}

.ui-bulk-toolbar:not(.translate-y-full),
.ui-bulk-toolbar[data-open="true"] {
    transform: translateY(0);
}

.ui-bulk-toolbar-inner {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-inline: auto;
    max-width: var(--content-width-xl);
    padding: var(--space-3) var(--space-5);
}

.ui-sectioned-form {
    display: grid;
    gap: var(--space-5);
}

.ui-sectioned-form-shell {
    display: grid;
    gap: var(--space-5);
}

.ui-form-section-nav {
    align-self: start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2);
}

.ui-form-section-link,
.ui-form-section-nav a {
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
}

.ui-form-section-link:hover,
.ui-form-section-link:focus-visible,
.ui-form-section-nav a:hover,
.ui-form-section-nav a:focus-visible {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.ui-form-section {
    scroll-margin-top: var(--space-6);
}

.ui-form-section + .ui-form-section {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
}

.ui-form-section-title {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}

.ui-has-sticky-actions {
    padding-bottom: calc(var(--space-10) + var(--safe-area-bottom));
}

.ui-sticky-action-bar {
    align-items: center;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    border-top: 1px solid var(--color-border);
    bottom: 0;
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin: var(--space-5) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + var(--safe-area-bottom));
    position: sticky;
    z-index: var(--z-sticky);
}

.ui-dirty-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin-right: auto;
}

.ui-tabs {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
}

.ui-tab {
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    min-height: var(--control-height-md);
    padding: var(--space-3) var(--space-4);
}

.ui-tab[aria-current="page"],
.ui-tab[aria-selected="true"] {
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.ui-drawer,
.ui-dialog {
    inset: 0;
    position: fixed;
    z-index: var(--z-drawer);
}

.ui-dialog {
    z-index: var(--z-modal);
}

.ui-drawer[hidden],
.ui-dialog[hidden] {
    display: none;
}

.ui-drawer-backdrop,
.ui-dialog-backdrop {
    background: rgb(17 24 39 / 0.56);
    inset: 0;
    position: absolute;
}

.ui-drawer-panel {
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: auto;
    max-width: min(30rem, 100vw);
    position: relative;
    width: 100%;
}

.ui-drawer-header,
.ui-dialog-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-5);
}

.ui-drawer-body,
.ui-dialog-body {
    overflow-y: auto;
    padding: var(--space-5);
}

.ui-dialog-panel {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    left: 50%;
    max-height: min(86vh, 42rem);
    max-width: min(30rem, calc(100vw - 2rem));
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.ui-dialog-footer {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
}

.ui-member-picker {
    display: grid;
    gap: var(--space-3);
}

.ui-member-picker-list,
.ui-member-picker-selected {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-height: 13rem;
    overflow-y: auto;
}

.ui-member-picker-item,
.ui-member-picker-selected-item {
    align-items: center;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    min-height: var(--control-height-md);
    padding: var(--space-2) var(--space-3);
    width: 100%;
}

.ui-member-picker-item:last-child,
.ui-member-picker-selected-item:last-child {
    border-bottom: 0;
}

.ui-member-picker-item[aria-pressed="true"] {
    background: var(--color-selected);
}

.ui-member-admin-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
}

.ui-member-profile-hero {
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    padding: var(--space-5);
}

.ui-member-profile-main {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    min-width: 0;
}

.ui-member-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.ui-member-workspace-tabs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding-inline: var(--space-2);
}

.ui-member-workspace {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
}

.ui-member-side-panel {
    display: none;
}

.ui-member-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
    scroll-margin-top: var(--space-8);
}

.ui-member-panel-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.ui-member-summary-grid,
.ui-member-source-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-member-summary-grid > div,
.ui-member-source-grid > div {
    min-width: 0;
}

.ui-member-summary-grid dt,
.ui-member-mini-list dt,
.ui-member-detail-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ui-member-summary-grid dd,
.ui-member-mini-list dd,
.ui-member-detail-list dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
}

.ui-member-detail-list {
    display: grid;
    gap: 0;
}

.ui-member-detail-list > div {
    align-items: start;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
    padding-block: var(--space-3);
}

.ui-member-detail-list > div:last-child {
    border-bottom: 0;
}

.ui-member-mini-list {
    display: grid;
    gap: var(--space-2);
}

.ui-role-source-row {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.ui-source-pill {
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-full);
    color: var(--color-info);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
}

body.ui-overlay-open {
    overflow: hidden;
}

/* Phase 5B member import and dynamic field configuration */
.ui-page-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.ui-btn-sm {
    font-size: var(--font-size-xs);
    min-height: var(--control-height-sm);
    padding-inline: var(--space-3);
}

.ui-icon-button {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    justify-content: center;
    min-height: var(--control-height-sm);
    padding-inline: var(--space-2);
}

.ui-icon-button:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.ui-inline-note {
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-lg);
    color: var(--color-info);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    padding: var(--space-3) var(--space-4);
}

.ui-check-list {
    color: var(--color-text-muted);
    display: grid;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
    list-style: disc;
    padding-left: var(--space-5);
}

.ui-import-stepper {
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
}

.ui-import-step {
    align-items: center;
    border-right: 1px solid var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    gap: var(--space-2);
    min-height: var(--control-height-lg);
    padding: var(--space-3) var(--space-4);
}

.ui-import-step:last-child {
    border-right: 0;
}

.ui-import-step.is-current {
    background: var(--color-selected);
    color: var(--color-primary-hover);
}

.ui-import-step.is-complete {
    color: var(--color-success);
}

.ui-import-step-number {
    align-items: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    height: 1.5rem;
    justify-content: center;
    width: 1.5rem;
}

.ui-import-step.is-current .ui-import-step-number {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.ui-import-step.is-complete .ui-import-step-number {
    background: var(--color-success-surface);
}

.ui-import-step-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    min-width: 0;
}

.ui-import-shell {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
}

.ui-import-main,
.ui-import-aside,
.ui-import-section,
.ui-summary-card,
.ui-file-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.ui-import-main,
.ui-import-aside {
    padding: var(--space-5);
}

.ui-import-aside {
    position: sticky;
    top: var(--space-5);
}

.ui-upload-dropzone {
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.ui-file-summary {
    background: var(--color-success-surface);
    border-color: var(--color-success-border);
    padding: var(--space-4);
}

.ui-import-summary-strip,
.ui-import-count-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-import-summary-strip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
}

.ui-import-summary-strip > div,
.ui-summary-card {
    display: grid;
    gap: var(--space-1);
}

.ui-import-summary-strip strong,
.ui-summary-card strong {
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-tight);
}

.ui-summary-card {
    padding: var(--space-4);
}

.ui-import-section {
    overflow: hidden;
}

.ui-import-section-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.ui-import-map-grid {
    display: grid;
}

.ui-import-map-head,
.ui-import-map-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(13rem, 1fr) minmax(12rem, 0.8fr) minmax(18rem, 1.4fr);
}

.ui-import-map-head {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-3) var(--space-5);
}

.ui-import-map-row {
    align-items: start;
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5);
}

.ui-import-map-row:first-of-type {
    border-top: 0;
}

.ui-import-map-field {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-import-map-mobile-label {
    color: var(--color-text-muted);
    display: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-import-sample {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}

.ui-import-preview-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.ui-import-preview-summary span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ui-status-badge {
    align-items: center;
    border-radius: var(--radius-full);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    padding: 0.1875rem var(--space-2);
    white-space: nowrap;
}

.ui-status-success {
    background: var(--color-success-surface);
    color: var(--color-success);
}

.ui-status-danger {
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.ui-status-info {
    background: var(--color-info-surface);
    color: var(--color-info);
}

.ui-status-warning {
    background: var(--color-warning-surface);
    color: var(--color-warning);
}

.ui-status-muted {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.ui-import-error-card {
    background: var(--color-surface);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ui-import-error-header {
    align-items: center;
    background: var(--color-danger-surface);
    border-bottom: 1px solid var(--color-danger-border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.ui-switch-row,
.ui-check-option {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
}

.ui-switch-row {
    align-items: center;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-check-option {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.ui-check-option span {
    display: grid;
    gap: var(--space-1);
}

.ui-check-option small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-import-error-list {
    color: var(--color-danger);
    display: grid;
    font-size: var(--font-size-xs);
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5) 0;
}

.ui-import-correction-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-4) var(--space-5);
}

.ui-confirm-summary {
    color: var(--color-text-muted);
    display: grid;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
}

.ui-field-mobile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
}

.ui-field-mobile-card.is-inactive {
    opacity: 0.72;
}

.ui-field-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ui-field-usage-list {
    display: grid;
    gap: 0;
}

.ui-field-usage-list > div {
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    padding-block: var(--space-3);
}

.ui-field-usage-list > div:last-child {
    border-bottom: 0;
}

.ui-field-usage-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-field-usage-list dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

/* Phase 5C roles, permissions, and access workspaces */
.ui-role-stepper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.ui-role-stepper span {
    border-right: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-3) var(--space-4);
}

.ui-role-stepper span:last-child {
    border-right: 0;
}

.ui-role-stepper .is-current {
    background: var(--color-selected);
    color: var(--color-primary-hover);
}

.ui-role-stepper .is-complete {
    color: var(--color-success);
}

.ui-role-card-list,
.ui-role-user-cards {
    display: grid;
    gap: var(--space-3);
}

.ui-role-mobile-card,
.ui-role-user-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ui-role-mobile-card.is-archived {
    opacity: 0.72;
}

.ui-role-card-actions,
.ui-role-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-role-hero {
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    padding: var(--space-5);
}

.ui-role-hero-main {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.ui-role-badge-row,
.ui-role-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-role-tabs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding-inline: var(--space-3);
}

.ui-role-workspace {
    align-items: start;
    display: grid;
    gap: var(--space-5);
}

.ui-role-module-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.ui-role-module-card {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
}

.ui-role-module-card strong,
.ui-access-module-card strong,
.ui-access-role-card h4,
.ui-access-hero h3 {
    color: var(--color-text);
}

.ui-role-user-table {
    display: block;
}

.ui-role-user-cards {
    display: none;
}

.ui-role-user-main {
    align-items: center;
    display: flex;
    gap: var(--space-3);
}

.ui-role-user-main a {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-role-user-main p,
.ui-role-user-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-role-user-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-permission-shell {
    align-items: start;
    display: grid;
    gap: var(--space-5);
}

.ui-permission-toolbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.ui-permission-toolbar-actions,
.ui-permission-module-actions,
.ui-permission-preset-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-permission-modules {
    display: grid;
    gap: var(--space-3);
}

.ui-permission-module {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.ui-permission-module-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4);
    text-align: left;
    width: 100%;
}

.ui-permission-module-title,
.ui-permission-line > span:first-child {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.ui-permission-module-title strong,
.ui-permission-line strong,
.ui-access-permission-row strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.ui-permission-module-title small,
.ui-permission-line small,
.ui-access-permission-row p,
.ui-access-permission-group header p {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}

.ui-permission-module-summary {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.ui-permission-presets {
    align-items: flex-start;
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr) auto;
    padding: var(--space-4);
}

.preset-option {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    min-height: var(--control-height-sm);
    padding-inline: var(--space-3);
}

.preset-option.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.ui-permission-row-list {
    display: grid;
}

.ui-permission-row {
    align-items: flex-start;
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-4);
}

.ui-permission-row:hover {
    background: color-mix(in srgb, var(--color-selected) 55%, white);
}

.ui-permission-content {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.ui-permission-line {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-permission-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: flex-end;
}

.ui-permission-chip,
.ui-permission-key {
    align-items: center;
    border-radius: var(--radius-full);
    display: inline-flex;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    min-height: 1.375rem;
    padding-inline: var(--space-2);
}

.ui-permission-action {
    background: var(--color-info-surface);
    color: var(--color-info);
}

.ui-permission-scope {
    background: var(--color-success-surface);
    color: var(--color-success);
}

.ui-permission-warning {
    background: var(--color-warning-surface);
    color: var(--color-warning);
}

.ui-permission-critical {
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.ui-permission-muted,
.ui-permission-key {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.ui-permission-dependency,
.ui-permission-flash {
    color: var(--color-warning);
    font-size: var(--font-size-xs);
}

.ui-permission-change-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.ui-access-hero,
.ui-access-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}

.ui-access-hero {
    align-items: stretch;
    display: grid;
    gap: var(--space-5);
}

.ui-access-hero h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-tight);
    margin-top: var(--space-1);
}

.ui-access-hero p,
.ui-access-role-card p,
.ui-access-module-card p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    margin-top: var(--space-1);
}

.ui-access-hero dl {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-access-hero dl div,
.ui-access-module-card,
.ui-access-role-card {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.ui-access-hero dt,
.ui-access-module-card span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-access-hero dd {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.ui-access-role-grid,
.ui-access-module-grid,
.ui-access-permission-groups {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.ui-access-role-grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.ui-access-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.ui-access-role-card {
    display: grid;
    gap: var(--space-3);
}

.ui-access-role-card.is-active {
    border-color: var(--color-success-border);
    box-shadow: inset 0 0 0 1px var(--color-success-border);
}

.ui-access-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-access-technical {
    display: grid;
}

.ui-access-technical summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.ui-access-technical summary span {
    display: grid;
    gap: var(--space-1);
}

.ui-access-technical summary small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-access-permission-search {
    margin-top: var(--space-4);
}

.ui-access-permission-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ui-access-permission-group header {
    align-items: flex-start;
    background: var(--color-surface-muted);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4);
}

.ui-access-permission-list {
    display: grid;
}

.ui-access-permission-row {
    align-items: flex-start;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
}

@media (min-width: 1024px) {
    .ui-sectioned-form-shell {
        grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    }

    .ui-form-section-nav {
        position: sticky;
        top: var(--space-5);
    }

    .ui-member-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    }

    .ui-member-side-panel {
        display: block;
        position: sticky;
        top: var(--space-5);
    }

    .ui-role-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    }

    .ui-permission-shell {
        grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
    }

    .ui-permission-toolbar {
        position: sticky;
        top: var(--space-5);
    }

    .ui-access-hero {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 32rem);
    }
}

@media (max-width: 640px) {
    .ui-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-page-header .ui-btn {
        width: 100%;
    }

    .ui-import-stepper {
        grid-template-columns: 1fr;
    }

    .ui-import-step {
        border-right: 0;
        border-top: 1px solid var(--color-border);
    }

    .ui-import-step:first-child {
        border-top: 0;
    }

    .ui-import-shell,
    .ui-import-summary-strip,
    .ui-import-count-grid,
    .ui-role-stepper,
    .ui-permission-presets,
    .ui-access-hero dl,
    .ui-import-map-head,
    .ui-import-map-row,
    .ui-import-correction-grid,
    .ui-field-usage-list > div {
        grid-template-columns: 1fr;
    }

    .ui-import-aside {
        position: static;
    }

    .ui-import-map-head {
        display: none;
    }

    .ui-import-map-row {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin: var(--space-3);
        padding: var(--space-4);
    }

    .ui-import-map-mobile-label {
        display: block;
        margin-bottom: var(--space-1);
        width: 100%;
    }

    .ui-import-section-header,
    .ui-import-error-header,
    .ui-import-preview-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-field-card-actions,
    .ui-field-card-actions .ui-btn,
    .ui-field-card-actions form {
        width: 100%;
    }

    .ui-filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-filter-row > .ui-filter-search,
    .ui-filter-row > .ui-filter-control {
        flex-basis: auto;
        width: 100%;
    }

    .ui-bulk-toolbar-inner,
    .ui-sticky-action-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-dirty-note {
        margin-right: 0;
    }

    .ui-drawer-panel {
        max-width: 100vw;
    }

    .ui-role-hero,
    .ui-role-hero-actions,
    .ui-role-badge-row,
    .ui-permission-line,
    .ui-access-permission-row,
    .ui-access-permission-group header {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-role-stepper span {
        border-right: 0;
        border-top: 1px solid var(--color-border);
    }

    .ui-role-stepper span:first-child {
        border-top: 0;
    }

    .ui-role-user-table {
        display: none;
    }

    .ui-role-user-cards {
        display: grid;
    }

    .ui-role-card-actions,
    .ui-role-card-actions .ui-btn,
    .ui-role-card-actions form,
    .ui-role-hero-actions .ui-btn,
    .ui-role-hero-actions form,
    .ui-permission-toolbar-actions .ui-btn,
    .ui-permission-module-actions .ui-btn {
        width: 100%;
    }

    .ui-permission-chips {
        justify-content: flex-start;
    }

    .ui-dialog-panel {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        bottom: 0;
        left: 0;
        max-width: 100vw;
        top: auto;
        transform: none;
    }

    .ui-member-profile-hero,
    .ui-member-profile-main,
    .ui-member-panel-header {
        flex-direction: column;
    }

    .ui-member-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .ui-member-summary-grid,
    .ui-member-source-grid,
    .ui-member-detail-list > div {
        grid-template-columns: 1fr;
    }

    .ui-member-panel {
        padding: var(--space-4);
    }

    .ui-member-panel-header {
        margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
        padding: var(--space-4);
    }
}

/* Phase 5D final overrides: keep source modifiers after the shared badge rules. */
.ui-source-pill-muted {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.ui-source-pill-added {
    background: var(--color-success-surface);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.ui-source-pill-removed {
    background: var(--color-danger-surface);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

@media (min-width: 768px) {
    .ui-source-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-source-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
    }
}

@media (min-width: 1024px) {
    .ui-source-mapping-shell {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    }

    .ui-source-mapping-aside {
        position: sticky;
        top: var(--space-5);
    }
}

@media (max-width: 640px) {
    .ui-source-header-actions,
    .ui-source-card-actions,
    .ui-source-drawer-actions,
    .ui-mapping-role-main {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-source-header-actions .ui-btn,
    .ui-source-card-actions .ui-btn,
    .ui-source-drawer-actions .ui-btn,
    .ui-source-drawer-actions form,
    .ui-source-drawer-actions button {
        width: 100%;
    }

    .ui-sticky-action-bar {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .ui-mapping-role-meta {
        justify-content: flex-start;
    }
}
/* Phase 7C mobile bottom-nav sticky action override. */
@media (max-width: 640px) {
    .ui-has-sticky-actions {
        padding-bottom: calc(9rem + var(--safe-area-bottom));
    }

    .ui-sticky-action-bar {
        bottom: calc(4.5rem + var(--safe-area-bottom));
        box-shadow: var(--shadow-lg);
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

/* Phase 7D post-event reports, photos, and completion workflow */
.ui-post-event-workspace {
    display: grid;
    gap: var(--space-5);
}

.ui-post-event-main,
.ui-post-event-side {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.ui-post-event-side {
    align-self: start;
}

.ui-completion-meter {
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    height: 0.625rem;
    overflow: hidden;
}

.ui-completion-meter span {
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
    display: block;
    height: 100%;
    min-width: 0.25rem;
}

.ui-completion-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.ui-completion-item,
.ui-completion-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
}

.ui-completion-item:hover,
.ui-completion-item:focus-visible,
.ui-completion-row:hover,
.ui-completion-row:focus-visible {
    background: var(--color-surface-muted);
}

.ui-completion-item span,
.ui-completion-row span,
.ui-outstanding-list > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-completion-item strong,
.ui-completion-row strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-completion-item small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}

.ui-completion-item.is-complete,
.ui-completion-row.is-complete {
    border-color: color-mix(in srgb, var(--color-success) 35%, white);
}

.ui-completion-item.is-attention,
.ui-completion-row.is-attention {
    border-color: color-mix(in srgb, var(--color-warning) 45%, white);
}

.ui-completion-item.is-active,
.ui-completion-row.is-active {
    border-color: color-mix(in srgb, var(--color-info) 35%, white);
}

.ui-completion-list {
    display: grid;
    gap: var(--space-2);
}

.ui-outstanding-list {
    align-items: flex-start;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
}

.ui-outstanding-list div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-post-event-overview {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-4);
}

.ui-post-event-overview strong {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-1);
}

.ui-post-event-overview-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.ui-post-event-overview .ui-outstanding-list {
    grid-column: 1 / -1;
}

.ui-report-meta {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.ui-report-meta div {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.ui-report-meta dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-report-meta dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-snug);
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
}

.ui-report-section-tabs {
    margin-inline: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
}

.ui-report-reading-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.ui-report-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-width: 0;
    padding: var(--space-4);
}

.ui-report-section h4 {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-report-section p,
.ui-report-section li,
.ui-prose {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-relaxed);
    margin-top: var(--space-2);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.ui-report-section ul {
    list-style: disc;
    margin-left: var(--space-5);
    margin-top: var(--space-2);
}

.ui-report-status-strip {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    padding: var(--space-3);
}

.ui-report-status-strip > span:last-child {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ui-form-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.ui-form-field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.ui-form-field-wide {
    grid-column: 1 / -1;
}

.ui-help {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}

.ui-submission-review {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.ui-photo-gallery,
.ui-photo-management-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.ui-photo-card,
.ui-photo-manage-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.ui-photo-preview-trigger {
    background: var(--color-surface-muted);
    cursor: pointer;
    display: block;
    min-height: 9rem;
    position: relative;
    text-align: left;
    width: 100%;
}

.ui-photo-preview-trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
    outline-offset: 2px;
}

.ui-photo-card img,
.ui-photo-manage-card > img,
.ui-photo-preview-trigger img {
    aspect-ratio: 4 / 3;
    background: var(--color-surface-muted);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.ui-photo-cover-label {
    background: var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-on-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    left: var(--space-2);
    line-height: var(--line-tight);
    padding: var(--space-1) var(--space-2);
    position: absolute;
    top: var(--space-2);
}

.ui-photo-card-body {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
}

.ui-photo-card-body strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    overflow-wrap: anywhere;
}

.ui-photo-card-body small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}

.ui-photo-drawer-image {
    aspect-ratio: 4 / 3;
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.ui-photo-upload {
    align-items: end;
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-4);
}

.ui-file-input {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    min-height: var(--control-height-md);
    padding: var(--space-2);
    width: 100%;
}

.ui-file-input::file-selector-button {
    background: var(--color-selected);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-primary-hover);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    margin-right: var(--space-3);
    min-height: calc(var(--control-height-sm) - 0.25rem);
    padding: 0 var(--space-3);
}

.ui-photo-upload-preview {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-3);
    grid-column: 1 / -1;
    grid-template-columns: 5rem minmax(0, 1fr);
    padding: var(--space-3);
}

.ui-photo-upload-preview[hidden] {
    display: none;
}

.ui-photo-upload-preview img {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    width: 5rem;
}

.ui-photo-upload-preview strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.ui-photo-upload-preview ul {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.ui-photo-upload-preview li {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    font-size: var(--font-size-xs);
    gap: var(--space-2);
    justify-content: space-between;
    min-width: 0;
}

.ui-photo-upload-preview li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-photo-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .ui-post-event-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }

    .ui-post-event-side {
        position: sticky;
        top: 13rem;
    }
}

@media (max-width: 640px) {
    .ui-post-event-side {
        position: static;
    }

    .ui-completion-grid,
    .ui-report-meta,
    .ui-report-reading-grid,
    .ui-form-grid,
    .ui-photo-gallery,
    .ui-photo-management-grid {
        grid-template-columns: 1fr;
    }

    .ui-photo-upload {
        grid-template-columns: 1fr;
    }

    .ui-photo-upload .ui-btn,
    .ui-photo-actions .ui-btn,
    .ui-photo-card-body form .ui-btn {
        width: 100%;
    }

    .ui-photo-upload-preview {
        grid-template-columns: 1fr;
    }

    .ui-photo-upload-preview img {
        width: 100%;
    }

    .ui-post-event-overview,
    .ui-post-event-overview-actions {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .ui-post-event-overview-actions .ui-btn {
        width: 100%;
    }
}

/* UX Phase 8A: member dashboard priority layout */
.ui-member-dashboard {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}

.ui-dashboard-hero {
    align-items: end;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: var(--space-5);
}

.ui-dashboard-kicker,
.ui-dashboard-role-label,
.ui-dashboard-group-label {
    color: var(--color-text-muted);
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    line-height: var(--line-tight);
    text-transform: uppercase;
}

.ui-dashboard-role-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.ui-dashboard-role-row,
.ui-dashboard-actions,
.ui-dashboard-row-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-link-compact {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    text-decoration: none;
}

.ui-link-compact:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.ui-dashboard-alert {
    background: var(--color-selected);
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    border-radius: var(--radius-lg);
    display: block;
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
}

.ui-dashboard-layout {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
}

.ui-dashboard-main,
.ui-dashboard-side {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.ui-dashboard-side {
    position: sticky;
    top: var(--space-5);
}

.ui-dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-4);
}

.ui-dashboard-my-work {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
}

.ui-dashboard-section-head {
    align-items: start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-width: 0;
}

.ui-dashboard-title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    margin: var(--space-1) 0 0;
}

.ui-dashboard-summary-badge {
    border-radius: var(--radius-full);
    flex: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    padding: var(--space-1) var(--space-3);
}

.ui-dashboard-summary-badge.is-alert {
    background: var(--color-warning-surface);
    color: var(--color-warning);
}

.ui-dashboard-summary-badge.is-calm {
    background: var(--color-success-surface);
    color: var(--color-success);
}

.ui-dashboard-priority-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.ui-dashboard-priority-item {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    display: grid;
    gap: var(--space-1);
    min-height: 5rem;
    padding: var(--space-3);
    text-decoration: none;
}

.ui-dashboard-priority-item strong {
    font-size: var(--font-size-2xl);
    line-height: var(--line-tight);
}

.ui-dashboard-priority-item span,
.ui-dashboard-card-note,
.ui-dashboard-work-stream p,
.ui-dashboard-all-clear span,
.ui-dashboard-row-main em,
.ui-dashboard-next-row em,
.ui-dashboard-birthday-row span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: normal;
    line-height: var(--line-normal);
}

.ui-dashboard-priority-item.is-danger {
    background: var(--color-danger-surface);
    border-color: color-mix(in srgb, var(--color-danger) 24%, var(--color-border));
}

.ui-dashboard-priority-item.is-danger strong {
    color: var(--color-danger);
}

.ui-dashboard-priority-item.is-warning {
    background: var(--color-warning-surface);
    border-color: color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
}

.ui-dashboard-priority-item.is-warning strong {
    color: var(--color-warning);
}

.ui-dashboard-work-streams {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-dashboard-work-stream {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-width: 0;
    padding: var(--space-3);
}

.ui-dashboard-work-stream h3,
.ui-dashboard-row-main strong,
.ui-dashboard-next-row strong,
.ui-dashboard-birthday-row strong,
.ui-dashboard-all-clear strong {
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    overflow-wrap: anywhere;
}

.ui-dashboard-next-list,
.ui-dashboard-compact-list,
.ui-dashboard-birthday-group {
    display: grid;
    gap: var(--space-2);
}

.ui-dashboard-next-row,
.ui-dashboard-compact-row,
.ui-dashboard-birthday-row {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    text-decoration: none;
}

.ui-dashboard-next-row {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
}

.ui-dashboard-next-row span,
.ui-dashboard-row-action {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
}

.ui-dashboard-compact-row {
    grid-template-columns: 3.75rem minmax(0, 1fr) auto;
}

.ui-dashboard-birthday-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.ui-dashboard-date-chip {
    background: var(--color-selected);
    border-radius: var(--radius-md);
    color: var(--color-primary-hover);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    padding: var(--space-2);
    text-align: center;
}

.ui-dashboard-date-chip.is-muted {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.ui-icon-action {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    text-decoration: none;
}

.ui-dashboard-all-clear {
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
}

.ui-dashboard-progress {
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    height: 0.5rem;
    overflow: hidden;
}

.ui-dashboard-progress span {
    background: var(--color-primary);
    border-radius: inherit;
    display: block;
    height: 100%;
}

@media (max-width: 1023px) {
    .ui-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .ui-dashboard-side {
        position: static;
    }
}

@media (max-width: 640px) {
    .ui-member-dashboard {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    .ui-dashboard-hero,
    .ui-dashboard-work-streams {
        grid-template-columns: 1fr;
    }

    .ui-dashboard-role-card {
        width: 100%;
    }

    .ui-dashboard-card {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .ui-dashboard-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-dashboard-summary-badge {
        align-self: flex-start;
    }

    .ui-dashboard-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-dashboard-next-row,
    .ui-dashboard-compact-row,
    .ui-dashboard-birthday-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ui-dashboard-next-row em,
    .ui-dashboard-row-action,
    .ui-dashboard-row-actions {
        grid-column: 2;
    }

    .ui-dashboard-actions .ui-btn,
    .ui-dashboard-work-stream .ui-link-compact {
        width: 100%;
    }
}

/* UX Phase 8B: Teams directory */
.ui-teams-directory {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}

.ui-teams-shell {
    display: grid;
    gap: var(--space-5);
}

.ui-teams-header {
    align-items: end;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
}

.ui-teams-description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    margin-top: var(--space-1);
}

.ui-teams-count {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: grid;
    min-width: 9rem;
    padding: var(--space-3);
    text-align: right;
}

.ui-teams-count strong {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-tight);
}

.ui-teams-count span,
.ui-teams-count em {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: normal;
    line-height: var(--line-normal);
}

.ui-teams-layout {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
}

.ui-teams-nav {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    position: sticky;
    top: var(--space-5);
}

.ui-teams-category-list,
.ui-teams-mobile-categories {
    display: flex;
    gap: var(--space-2);
}

.ui-teams-category-list {
    flex-direction: column;
}

.ui-teams-chip {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    min-height: var(--control-height-sm);
    min-width: 0;
    padding: 0 var(--space-3);
    text-decoration: none;
}

.ui-teams-chip span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-teams-chip strong {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    min-width: 1.75rem;
    padding: var(--space-1) var(--space-2);
    text-align: center;
}

.ui-teams-chip.is-active {
    background: var(--color-selected);
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
    color: var(--color-primary-hover);
}

.ui-teams-main,
.ui-teams-section-stack,
.ui-teams-member-list {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.ui-teams-toolbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    position: sticky;
    top: var(--space-4);
    z-index: 20;
}

.ui-teams-search {
    display: grid;
    gap: var(--space-2);
}

.ui-teams-search label {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
}

.ui-teams-search-row {
    align-items: center;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.ui-teams-search-row input {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-base);
    min-height: var(--control-height-md);
    padding: 0 var(--space-3);
    width: 100%;
}

.ui-teams-search-row input:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent);
    outline: none;
}

.ui-teams-mobile-categories {
    display: none;
    margin: 0 calc(var(--space-3) * -1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 var(--space-3) var(--space-1);
    scroll-padding-inline: var(--space-3);
}

.ui-teams-mobile-categories .ui-teams-chip {
    flex: 0 0 auto;
}

.ui-teams-results-meta {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-teams-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
}

.ui-teams-section-head {
    align-items: start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-teams-section-head h2 {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-teams-section-head p,
.ui-teams-section-head span,
.ui-teams-more-hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
}

.ui-teams-section-head span {
    flex: none;
}

.ui-teams-member-list {
    gap: var(--space-2);
}

.ui-teams-member-row {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 4.25rem;
    padding: var(--space-3);
}

.ui-teams-avatar,
.ui-teams-avatar img,
.ui-teams-avatar span {
    border-radius: var(--radius-full);
    height: 2.75rem;
    width: 2.75rem;
}

.ui-teams-avatar {
    background: var(--color-selected);
    flex: none;
    overflow: hidden;
}

.ui-teams-avatar img {
    display: block;
    object-fit: cover;
}

.ui-teams-avatar span {
    align-items: center;
    color: var(--color-primary-hover);
    display: flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    justify-content: center;
}

.ui-teams-member-main {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.ui-teams-member-main a,
.ui-teams-member-main strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-teams-member-main a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.ui-teams-member-main span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    overflow-wrap: anywhere;
}

.ui-teams-member-actions {
    align-items: center;
    display: flex;
    justify-content: end;
}

.ui-teams-call,
.ui-teams-no-call {
    align-items: center;
    border-radius: var(--radius-full);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    justify-content: center;
    min-height: var(--control-height-sm);
    min-width: 3.25rem;
    padding: 0 var(--space-3);
}

.ui-teams-call {
    background: var(--color-success-surface);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
    text-decoration: none;
}

.ui-teams-no-call {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.ui-teams-empty {
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5);
    text-align: center;
}

.ui-teams-empty.is-compact {
    background: var(--color-surface-muted);
    padding: var(--space-4);
}

.ui-teams-empty h2,
.ui-teams-empty h3 {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-teams-empty p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
}

.ui-teams-more-hint {
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.ui-teams-more-hint a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 1023px) {
    .ui-teams-layout {
        grid-template-columns: 1fr;
    }

    .ui-teams-nav {
        display: none;
    }

    .ui-teams-mobile-categories {
        display: flex;
    }
}

@media (max-width: 640px) {
    .ui-teams-directory {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    .ui-teams-header,
    .ui-teams-search-row {
        grid-template-columns: 1fr;
    }

    .ui-teams-count {
        text-align: left;
        width: 100%;
    }

    .ui-teams-toolbar {
        top: 0;
    }

    .ui-teams-section {
        padding: var(--space-3);
    }

    .ui-teams-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-teams-member-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 4rem;
        padding: var(--space-2);
    }

    .ui-teams-member-main a,
    .ui-teams-member-main strong {
        white-space: normal;
    }

    .ui-teams-search-row .ui-btn {
        width: 100%;
    }
}

/* UX Phase 8C: Birthdays and wish actions */
.ui-birthday-page {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}

.ui-birthday-shell,
.ui-birthday-main,
.ui-birthday-upcoming-stack,
.ui-birthday-upcoming-list,
.ui-birthday-activity-list {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.ui-birthday-header {
    align-items: end;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
}

.ui-birthday-description,
.ui-birthday-section-head p,
.ui-birthday-empty p,
.ui-birthday-person-main span,
.ui-birthday-person-main em,
.ui-birthday-wish-history span,
.ui-birthday-activity-row span,
.ui-birthday-activity-row em,
.ui-birthday-wish-form p,
.ui-birthday-note span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: normal;
    line-height: var(--line-normal);
}

.ui-birthday-description {
    margin-top: var(--space-1);
}

.ui-birthday-counts {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
}

.ui-birthday-counts span {
    color: var(--color-text-muted);
    display: grid;
    font-size: var(--font-size-xs);
    line-height: var(--line-tight);
    min-width: 4.25rem;
}

.ui-birthday-counts strong {
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.ui-birthday-flash {
    background: var(--color-success-surface);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-lg);
    color: var(--color-success);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-3) var(--space-4);
}

.ui-birthday-section,
.ui-birthday-activity {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-4);
}

.ui-birthday-section-head {
    align-items: start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-birthday-section-head h2 {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
}

.ui-birthday-status-pill,
.ui-birthday-status {
    border-radius: var(--radius-full);
    flex: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    padding: var(--space-1) var(--space-3);
}

.ui-birthday-status-pill,
.ui-birthday-status.is-wished {
    background: var(--color-success-surface);
    color: var(--color-success);
}

.ui-birthday-status.is-pending {
    background: var(--color-warning-surface);
    color: var(--color-warning);
}

.ui-birthday-today-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.ui-birthday-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
}

.ui-birthday-card.is-today {
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}

.ui-birthday-person,
.ui-birthday-status-row,
.ui-birthday-actions,
.ui-birthday-activity-row {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    min-width: 0;
}

.ui-birthday-person {
    align-items: start;
}

.ui-birthday-avatar,
.ui-birthday-avatar img,
.ui-birthday-avatar span {
    border-radius: var(--radius-full);
    height: 3rem;
    width: 3rem;
}

.ui-birthday-avatar {
    background: var(--color-selected);
    flex: none;
    overflow: hidden;
}

.ui-birthday-avatar img {
    display: block;
    object-fit: cover;
}

.ui-birthday-avatar span {
    align-items: center;
    color: var(--color-primary-hover);
    display: flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    justify-content: center;
}

.ui-birthday-person-main {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.ui-birthday-person-main a,
.ui-birthday-person-main strong,
.ui-birthday-empty h3,
.ui-birthday-upcoming-group h3,
.ui-birthday-activity-row strong,
.ui-birthday-modal-head h3 {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    overflow-wrap: anywhere;
}

.ui-birthday-person-main a {
    text-decoration: none;
}

.ui-birthday-person-main a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.ui-birthday-status-row {
    align-items: start;
    flex-wrap: wrap;
}

.ui-birthday-wish-history {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-birthday-wish-history span {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2);
}

.ui-birthday-actions {
    flex-wrap: wrap;
}

.ui-birthday-action,
.ui-birthday-contact-empty {
    align-items: center;
    border-radius: var(--radius-full);
    display: inline-flex;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
}

.ui-birthday-action {
    border: 1px solid var(--color-border);
    cursor: pointer;
    text-decoration: none;
}

.ui-birthday-action.is-call {
    background: var(--color-success-surface);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.ui-birthday-action.is-whatsapp {
    background: var(--color-info-surface);
    border-color: var(--color-info-border);
    color: var(--color-info);
}

.ui-birthday-action.is-record {
    background: var(--color-selected);
    border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
    color: var(--color-primary-hover);
}

.ui-birthday-contact-empty {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.ui-birthday-layout {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
}

.ui-birthday-upcoming-stack {
    gap: var(--space-4);
}

.ui-birthday-upcoming-group {
    display: grid;
    gap: var(--space-2);
}

.ui-birthday-upcoming-group h3 {
    background: var(--color-surface);
    padding-block: var(--space-1);
    position: sticky;
    top: var(--space-4);
    z-index: 10;
}

.ui-birthday-card.is-upcoming {
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}

.ui-birthday-activity {
    position: sticky;
    top: var(--space-5);
}

.ui-birthday-activity-list {
    gap: var(--space-2);
}

.ui-birthday-activity-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.ui-birthday-activity-row > div {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-birthday-activity-row em {
    flex: none;
}

.ui-birthday-empty {
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
}

.ui-birthday-modal {
    inset: 0;
    position: fixed;
    z-index: var(--z-modal);
}

.ui-birthday-modal-scrim {
    background: rgb(17 24 39 / 0.48);
    border: 0;
    cursor: pointer;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.ui-birthday-modal-panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: var(--space-4);
    left: 50%;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: var(--space-4);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.ui-birthday-modal-head,
.ui-birthday-modal-actions {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.ui-birthday-modal-close {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
}

.ui-birthday-wish-form {
    display: grid;
    gap: var(--space-3);
}

.ui-birthday-method-option {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    display: flex;
    gap: var(--space-3);
    min-height: var(--control-height-md);
    padding: 0 var(--space-3);
}

.ui-birthday-method-option span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-birthday-note {
    display: grid;
    gap: var(--space-2);
}

.ui-birthday-note textarea {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-base);
    min-height: 5.5rem;
    padding: var(--space-3);
    resize: vertical;
    width: 100%;
}

@media (max-width: 1023px) {
    .ui-birthday-layout {
        grid-template-columns: 1fr;
    }

    .ui-birthday-activity {
        position: static;
    }
}

@media (max-width: 640px) {
    .ui-birthday-page {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    .ui-birthday-header {
        grid-template-columns: 1fr;
    }

    .ui-birthday-counts {
        width: 100%;
    }

    .ui-birthday-section,
    .ui-birthday-activity {
        padding: var(--space-3);
    }

    .ui-birthday-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-birthday-actions .ui-birthday-action,
    .ui-birthday-actions .ui-birthday-contact-empty {
        flex: 1 1 calc(50% - var(--space-2));
    }

    .ui-birthday-action.is-record,
    .ui-birthday-contact-empty {
        flex-basis: 100%;
    }

    .ui-birthday-modal-panel {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        bottom: 0;
        left: 0;
        max-width: none;
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        top: auto;
        transform: none;
    }

    .ui-birthday-modal-actions .ui-btn {
        flex: 1 1 0;
    }
}