/* ── DocMX Design Tokens ─────────────────────────────── */

:root {
    /* The app shell's top bar: the grid row it occupies and the offset any
       fixed-position surface that must sit below it (the designer's drawers)
       starts from. */
    --top-bar-height: 56px;

    /* Primary brand */
    --color-brand: #074684;
    --color-brand-teal: #0ea5c6;
    --color-brand-accent: #a0edf7;

    /* Health state (semantic) */
    --color-healthy: #22c55e;
    --color-degraded: #f59e0b;
    --color-down: #ef4444;
    --color-unknown: #94a3b8;

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-raised: #f8fafc;
    --color-border: #e2e8f0;

    /* Text */
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;

    /* Paired status palettes (style guide 3.4): soft background, strong
       foreground, matching border. Added with the shared UI kit — the literals
       were previously copied into every feature's stylesheet, which is how
       "success green" drifted between surfaces. */
    --status-success-bg: #f0fdf4;
    --status-success-fg: #166534;
    --status-success-border: #86efac;
    --status-warning-bg: #fffbeb;
    --status-warning-fg: #78350f;
    --status-warning-border: #fde68a;
    --status-error-bg: #fef2f2;
    --status-error-fg: #991b1b;
    --status-error-border: #fca5a5;
    --status-info-bg: #eff6ff;
    --status-info-fg: #1e40af;
    --status-info-border: #bfdbfe;
    --status-neutral-bg: #f1f5f9;
    --status-neutral-fg: #475569;
    --status-neutral-border: #e2e8f0;

    /* Spacing / Radius */
    --radius: 0.5rem;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Typography */
    --font-title: 'Roboto', system-ui, sans-serif;
    --font-subtitle: 'Hind', system-ui, sans-serif;
    --font-body: 'Open Sans', system-ui, sans-serif;
}

/* ── Base ────────────────────────────────────────────── */

body {
    background: var(--color-surface-raised);
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
}

/* ── Page Header ─────────────────────────────────────── */

.page-header h1 {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0;
}

.page-header .subtitle {
    font-family: var(--font-subtitle);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* ── Buttons ─────────────────────────────────────────── */

.btn-primary {
    background: var(--color-brand);
    color: white;
    border: none;
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:hover {
    background: #05376a;
}

.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Production read-only (SystemReadOnlyUi.BlockedAttributes): a write button stays focusable
   (aria-disabled, not disabled) so its reason is announced, but reads as disabled. */
button[data-read-only="true"],
a[data-read-only="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary[data-read-only="true"]:hover {
    background: var(--color-brand);
}

.btn-secondary {
    background: white;
    color: var(--color-brand);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s;
}

.btn-secondary:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    color: var(--color-brand);
    text-decoration: none;
}

.btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid #dc2626;
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    text-decoration: none;
}

/* ─── Page header with action ───────────────────────────────── */

.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.page-header-row .page-header {
    margin-bottom: 0;
}

.page-subtitle {
    font-family: var(--font-subtitle);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* ─── Shared save-success banner ─────────────────────────────── */

.form-save-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius);
    color: #166534;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.form-save-success-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: #166534;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    opacity: 0.6;
}

.form-save-success-dismiss:hover {
    opacity: 1;
}

/* ─── Shared form styles ────────────────────────────────────── */

.form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.form-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 1.25rem;
}

.form-field {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
    padding-right: 1.5rem;
}

.form-field:nth-child(even) {
    padding-right: 0;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-border);
}

.form-field:last-child,
.form-field:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

/* .form-field prefix so a full-width field in an even slot beats :nth-child(even)'s indent. */
.form-field.form-field--full {
    grid-column: 1 / -1;
    padding-right: 0;
    padding-left: 0;
    border-left: none !important;
}

.form-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

.form-label--checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.form-required {
    color: #dc2626;
    font-size: 0.75rem;
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.form-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.1s, box-shadow 0.1s;
}

.form-input:focus {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.form-input--error {
    border-color: #dc2626;
}

.form-input--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-error {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #dc2626;
    margin-top: 0.3rem;
}

.form-checkbox {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.form-save-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.form-leave-warning {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: var(--radius);
    color: #1e3a5f;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-leave-actions {
    display: flex;
    gap: 0.625rem;
    flex-shrink: 0;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 2rem;
}

/* ── Cards ───────────────────────────────────────────── */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.125rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

/* ── Status Badges ───────────────────────────────────── */

.badge {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-healthy {
    background: #dcfce7;
    color: #166534;
}

.badge-degraded {
    background: #fef3c7;
    color: #92400e;
}

.badge-down {
    background: #fee2e2;
    color: #991b1b;
}

.badge-unknown {
    background: #f1f5f9;
    color: #475569;
}

/* ── Form Inputs ─────────────────────────────────────── */

input, select, textarea {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
    outline: none;
}

/* ── Home Page ───────────────────────────────────────── */

.home-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.hero {
    padding: 48px;
    border-radius: 24px;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-raised) 100%);
    border: 1px solid var(--color-border);
    margin-bottom: 32px;
}

.eyebrow {
    font-family: var(--font-subtitle);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.hero h1 {
    font-family: var(--font-title);
    font-size: 3rem;
    line-height: 1.05;
    margin: 0 0 16px;
    color: var(--color-text-primary);
}

.hero-text {
    font-size: 1.1rem;
    max-width: 760px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.primary-action,
.secondary-action {
    padding: 12px 20px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.primary-action {
    background: var(--color-brand);
    color: white;
}

.primary-action:hover {
    background: #05376a;
}

.secondary-action {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.secondary-action:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.summary-card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.summary-card h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: var(--color-text-primary);
}

.summary-card p {
    margin: 0;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 32px 24px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Settings pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Settings sections ────────────────────────────────────────────────────── */

.settings-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 1rem;
}

.settings-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-section-title--inline {
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
}

.settings-section-edit {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-field {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-field:last-child,
.settings-field:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.settings-field--full {
    grid-column: 1 / -1;
}

.settings-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 0.3rem;
}

.settings-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ── AWS restart banner ──────────────────────────────────────────────────── */

.settings-aws-restart-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: #78350f;
    margin-bottom: 0.25rem;
}

.settings-aws-restart-banner .form-save-success-dismiss {
    color: #78350f;
}

/* ── AWS badges ──────────────────────────────────────────────────────────── */

.settings-aws-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-body);
}

.settings-aws-badge--active {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.settings-aws-badge--inactive {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.settings-aws-badge--auto {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.settings-aws-badge--profile {
    background: #fefce8;
    color: #713f12;
    border: 1px solid #fde68a;
}

.settings-aws-region-note {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.settings-aws-note {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
}

.settings-aws-note code {
    font-size: 0.75rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* ── MCP card actions on the read-only Settings view ─────────────────────── */

.settings-mcp-actions {
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.settings-mcp-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.settings-mcp-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-right: 0.25rem;
}

.settings-mcp-user {
    font-weight: 500;
    color: var(--color-text-primary);
}

.settings-mcp-expiry {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.settings-mcp-hint {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.settings-mcp-toggle {
    background: none;
    border: none;
    color: var(--color-brand-teal);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    text-decoration: underline;
}

.settings-mcp-tools {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.settings-mcp-tools th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-mcp-tools td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.settings-mcp-tools tr:nth-child(even) td {
    background: var(--color-surface-raised);
}

.settings-mcp-tools code {
    font-size: 0.78rem;
}

/* ── AI settings view cards ──────────────────────────────────────────────── */

.ai-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 1rem;
}

.ai-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.ai-card-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
}

.ai-card-subtitle {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.ai-card-body { padding: 1rem 1.25rem; }

.ai-card-footer {
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.ai-kv-grid             { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ai-kv-grid--3col       { grid-template-columns: 1fr 1fr 1fr; }
.ai-kv-grid--4col       { grid-template-columns: 1fr 1fr 1fr 1fr; }

.ai-kv {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border);
}

.ai-kv:nth-last-child(-n+2)           { border-bottom: none; }
.ai-kv-grid--3col .ai-kv:nth-last-child(-n+3) { border-bottom: none; }
.ai-kv-grid--4col .ai-kv:nth-last-child(-n+4) { border-bottom: none; }

.ai-kv-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.ai-kv-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.ai-kv-value--mono { font-variant-numeric: tabular-nums; }

.ai-model-id {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.ai-model-id--economy { color: var(--color-text-secondary); }

.ai-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ai-badge--blue  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.ai-badge--amber { background: #fefce8; color: #713f12; border: 1px solid #fde68a; }
.ai-badge--muted { background: var(--color-surface-raised); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

.ai-prompt-box {
    white-space: pre-wrap;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.ai-prompt-toggle {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-brand-teal);
    cursor: pointer;
    padding: 0;
}

.ai-prompt-toggle:hover { text-decoration: underline; }

/* ── Form-section note banners (edit pages) ──────────────────────────────── */

.aws-section-note {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.aws-section-note code {
    font-size: 0.75rem;
    background: var(--color-surface);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.aws-section-note--warn {
    background: #fffbeb;
    color: #78350f;
    border-color: #fde68a;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.aws-note-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #b45309;
}

.form-input--custom-model {
    margin-top: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.ai-prompt-textarea {
    min-height: 10rem;
    resize: vertical;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ── Storage toggle (AWS edit) ───────────────────────────────────────────── */

.aws-storage-toggle  { border: none; padding: 0; margin: 0; }
.aws-storage-options { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.aws-storage-option {
    flex: 1 1 16rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    background: var(--color-surface);
}

.aws-storage-option:hover { border-color: var(--color-brand-teal); background: var(--color-surface-raised); }
.aws-storage-option--selected { border-color: var(--color-brand); background: #f0f6ff; }
.aws-storage-radio { position: absolute; opacity: 0; pointer-events: none; }
.aws-storage-option-icon { color: var(--color-text-secondary); flex-shrink: 0; margin-top: 0.15rem; }
.aws-storage-option--selected .aws-storage-option-icon { color: var(--color-brand); }
.aws-storage-option-body { display: flex; flex-direction: column; gap: 0.25rem; }
.aws-storage-option-title { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); }
.aws-storage-option--selected .aws-storage-option-title { color: var(--color-brand); }
.aws-storage-option-desc { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.45; }
.aws-storage-option-desc code { font-size: 0.75rem; background: var(--color-surface-raised); padding: 0.05rem 0.25rem; border-radius: 0.2rem; border: 1px solid var(--color-border); }

/* ── Connection test controls ────────────────────────────────────────────── */

.aws-test-row { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5rem; flex-wrap: wrap; }
.aws-test-btn { white-space: nowrap; flex-shrink: 0; }
.aws-test-email-input { flex: 1 1 14rem; min-width: 0; }

.aws-test-result {
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius);
    flex: 1 1 auto;
}

.aws-test-result--ok   { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.aws-test-result--fail { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.aws-ses-test-area { padding: 0 1.25rem 1rem; border-top: 1px solid var(--color-border); margin-top: 0.25rem; padding-top: 1rem; }
.aws-ses-test-field { max-width: 36rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   AI Usage page
   ═══════════════════════════════════════════════════════════════════════════ */

.usage-summary-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.usage-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 10rem;
    flex: 1;
}

.usage-card--cost { border-left: 3px solid var(--color-brand-teal); }

.usage-card-value {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.usage-card-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.usage-range {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

/* ── View tabs ───────────────────────────────────────────────────────────── */

.usage-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1rem;
}

.usage-tab {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.usage-tab:hover { color: var(--color-text-primary); }
.usage-tab--active { color: var(--color-brand); border-bottom-color: var(--color-brand); }

/* ── Period sub-tabs ─────────────────────────────────────────────────────── */

.usage-period-tabs { display: flex; gap: 0.375rem; margin-bottom: 0.75rem; }

.usage-period-tab {
    padding: 0.3rem 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.usage-period-tab:hover { border-color: var(--color-brand-teal); color: var(--color-text-primary); }
.usage-period-tab--active { background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent); border-color: var(--color-brand-teal); color: var(--color-brand); }

/* ── Data table ──────────────────────────────────────────────────────────── */

.usage-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-x: auto;
    box-shadow: var(--shadow-card);
}

.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.usage-th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding: 0.625rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-surface-raised);
    position: sticky;
    top: 0;
}

.usage-th--num { text-align: right; }

.usage-tr { border-bottom: 1px solid var(--color-border); }
.usage-tr:last-child { border-bottom: none; }
.usage-tr:hover { background: color-mix(in srgb, var(--color-brand) 3%, transparent); }
.usage-tr--total { background: var(--color-surface-raised); border-top: 2px solid var(--color-border); }
.usage-tr--total:hover { background: var(--color-surface-raised); }

.usage-td { padding: 0.625rem 1rem; color: var(--color-text-primary); vertical-align: middle; }
.usage-td--num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-td--period { font-weight: 600; white-space: nowrap; }
.usage-td--total { font-weight: 600; }
.usage-td--cost { color: var(--color-brand-teal); font-weight: 600; }
.usage-td--time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-size: 0.8125rem; }
.usage-td--session { font-size: 0.8125rem; color: var(--color-text-secondary); letter-spacing: 0.03em; }
.usage-td--model { font-size: 0.8125rem; color: var(--color-text-secondary); }
.usage-td--desc { color: var(--color-text-secondary); }

/* ── Pager ────────────────────────────────────────────────────────────────── */

.usage-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem 0; margin-top: 0.5rem; }

.usage-pager-btn {
    padding: 0.35rem 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 0.15s;
}

.usage-pager-btn:hover:not(:disabled) { border-color: var(--color-brand-teal); }
.usage-pager-btn:disabled { opacity: 0.4; cursor: default; }

.usage-pager-info { font-size: 0.8125rem; color: var(--color-text-secondary); }
.usage-empty { color: var(--color-text-secondary); font-size: 0.875rem; padding: 2rem 0; }
.usage-loading, .settings-loading, .ai-loading { color: var(--color-text-secondary); font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Workflow List
   ═══════════════════════════════════════════════════════════════════════════ */

.wf-list-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── Toolbar ─────────────────────────────────────────── */

.wf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.wf-filters {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    flex: 1;
}

.wf-search-input {
    max-width: 22rem;
    min-width: 14rem;
}

.wf-filter-select {
    min-width: 10rem;
    max-width: 12rem;
}

.wf-result-count {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

/* ── View toggle ─────────────────────────────────────── */

.wf-view-toggle {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.wf-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--color-surface);
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wf-view-btn:hover {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.wf-view-btn--active {
    background: var(--color-brand);
    color: #fff;
}

.wf-view-btn--active:hover {
    background: var(--color-brand);
    color: #fff;
}

.wf-view-btn + .wf-view-btn {
    border-left: 1px solid var(--color-border);
}

.wf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.875rem;
}

.wf-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.125rem;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: var(--font-body);
}

.wf-card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.wf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.wf-card-name {
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.wf-card-desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wf-card-meta {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 0.75rem;
}

.wf-card-id {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.wf-empty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.wf-empty code {
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}

/* ── Data table ──────────────────────────────────────── */

.wf-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.wf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-family: var(--font-body);
}

.wf-th {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.wf-th:hover {
    color: var(--color-text-primary);
}

.wf-th--sorted {
    color: var(--color-brand);
}

.wf-th--sorted:hover {
    color: var(--color-brand);
}

.wf-sort-icon {
    display: inline-block;
    margin-left: 0.375rem;
    font-size: 0.5rem;
    vertical-align: middle;
}

.wf-th--id     { width: 5rem; }
.wf-th--status { width: 7rem; }

.wf-row {
    cursor: pointer;
    transition: background 0.1s;
}

.wf-row:hover {
    background: var(--color-surface-raised);
}

.wf-row:not(:last-child) .wf-td {
    border-bottom: 1px solid var(--color-border);
}

.wf-td {
    padding: 0.625rem 1rem;
    color: var(--color-text-primary);
    vertical-align: middle;
}

.wf-td--id {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.wf-td--name {
    font-weight: 500;
}

.wf-td--desc {
    color: var(--color-text-secondary);
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The Actions column carries no sort — it must not look or behave like the
   sortable headers around it. */
.wf-th--actions {
    cursor: default;
    width: 1%;
    white-space: nowrap;
}

.wf-th--actions:hover {
    color: var(--color-text-secondary);
}

.wf-td--actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.wf-row-action {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
}

/* A plain wrapper (not itself a button) so the primary "open" button and the
   secondary "Duplicate" button are siblings rather than nested — a button
   inside a button is invalid HTML and browsers close the outer one early. */
.wf-card-wrap {
    position: relative;
}

.wf-card-wrap .wf-card {
    width: 100%;
}

.wf-card-duplicate {
    /* Bottom-right, level with the meta row: the header's top-right corner
       already holds the status badge. */
    position: absolute;
    bottom: 0.75rem;
    right: 1.125rem;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.wf-card-duplicate:hover {
    color: var(--color-brand-teal);
    border-color: var(--color-brand-teal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Workflow Designer — Shell
   ═══════════════════════════════════════════════════════════════════════════ */

.wfd-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
    /* Break out of the app-main padding so the canvas can fill its column */
    width: calc(100% + 4rem);
    margin: -1.5rem -2rem;
    padding: 0;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.wfd-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    flex-shrink: 0;
    z-index: 10;
}

.wfd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.wfd-toolbar-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.wfd-name {
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfd-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfd-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.wfd-meta-id {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── "Created" banner (?created=1 after a duplicate) ─────────────────────── */

.wfd-created-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    background: var(--status-success-bg);
    border-bottom: 1px solid var(--status-success-border);
    color: var(--status-success-fg);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.wfd-created-banner-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem;
}

/* ── Loading / Error ──────────────────────────────────────────────────────── */

.wfd-loading, .wfd-error {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
}

/* ── Diagnostic empty-state (loaded but nothing to draw) ─────────────────── */

.wfd-diag {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: auto;
}

.wfd-diag-card {
    max-width: 640px;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    box-shadow: 0 4px 18px rgba(7, 70, 132, 0.05);
}

.wfd-diag-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wfd-diag-card p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.wfd-diag-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.875rem;
}

.wfd-diag-facts dt {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.wfd-diag-facts dd {
    margin: 0;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.wfd-diag-hint {
    margin: 0 0 0.75rem !important;
    font-size: 0.85rem !important;
}

.wfd-diag-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wfd-diag-actions code {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85em;
}

/* ── Body (canvas + panel) ────────────────────────────────────────────────── */

.wfd-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ── Canvas ───────────────────────────────────────────────────────────────── */

.wfd-canvas-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    background-color: var(--color-surface-raised);
    cursor: grab;
}

.wfd-canvas-wrap.wfd-panning {
    cursor: grabbing;
}

.wfd-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── SVG text styles ──────────────────────────────────────────────────────── */

.wfd-lane-label {
    font-family: var(--font-subtitle);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    fill: var(--color-text-secondary);
}

.wfd-node-id {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: 500;
    fill: #64748b;
}

.wfd-node-name {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    fill: var(--color-text-primary);
}

.wfd-action-header-label {
    font-family: var(--font-subtitle, var(--font-body));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wfd-node-meta {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    fill: #94a3b8;
    letter-spacing: 0.01em;
}

/* ── Action / result items inside nodes ────────────────────────────────────── */

.wfd-action-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    fill: #475569;
}

/* ── Output port dots ──────────────────────────────────────────────────────── */

.wfd-port-dot {
    transition: r 0.15s ease, stroke 0.15s ease;
}

.wfd-node:hover .wfd-port-dot {
    r: 4.5;
    stroke: var(--color-brand-teal);
}

.wfd-edge-label {
    font-family: var(--font-body);
    font-size: 9.5px;
    fill: var(--color-text-secondary);
}

.wfd-end-label {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 500;
    fill: #94a3b8;
}

/* ── Node styles ──────────────────────────────────────────────────────────── */

/* Cards are positioned by a CSS transform rather than by absolute child
   coordinates, so a structural edit TWEENS them to their new places instead of
   snapping. `transform` is the CSS property here, not the SVG attribute — an
   attribute cannot be transitioned. */
.wfd-node {
    transition: opacity 0.25s ease, transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.wfd-node .wfd-node-card {
    transition: filter 0.2s ease, stroke 0.2s ease;
}

.wfd-node:hover .wfd-node-card {
    filter: url(#node-shadow-hover) !important;
}

.wfd-node--dimmed {
    opacity: 0.3;
}

.wfd-node--selected .wfd-node-card {
    filter: url(#node-shadow-hover) !important;
}

/* ── Entry point badge ────────────────────────────────────────────────────── */

/* ── Start node pulse ─────────────────────────────────────────────────────── */

.wfd-start-pulse {
    animation: wfd-start-breathe 2.5s ease-in-out infinite;
}

@keyframes wfd-start-breathe {
    0%   { r: 28; opacity: 0.15; }
    50%  { r: 34; opacity: 0.08; }
    100% { r: 28; opacity: 0.15; }
}

/* ── Aging critical pulse ─────────────────────────────────────────────────── */

.wfd-aging-critical {
    animation: wfd-aging-blink 1.5s ease-in-out infinite;
}

@keyframes wfd-aging-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ── Edge styles ──────────────────────────────────────────────────────────── */

.wfd-edge {
    stroke-linecap: round;
    transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
}

.wfd-edge--selected {
    stroke-width: 2.5;
}

.wfd-edge--dimmed {
    opacity: 0.15;
}

.wfd-edge-hit {
    cursor: pointer;
}

.wfd-edge-flow {
    animation: wfd-flow 0.8s linear infinite;
}

@keyframes wfd-flow {
    from { stroke-dashoffset: 18; }
    to   { stroke-dashoffset: 0; }
}

/* ── Outcome click targets ───────────────────────────────────────────────── */

.wfd-outcome-row {
    cursor: pointer;
}

.wfd-outcome-row:hover .wfd-action-label {
    fill: var(--color-brand-teal);
}

/* ── Power-surge animation elements ──────────────────────────────────────── */

.wfd-surge-core {
    pointer-events: none;
}

.wfd-surge-glow {
    pointer-events: none;
    animation: wfd-surge-pulse 0.3s ease-in-out infinite alternate;
}

.wfd-surge-trail {
    pointer-events: none;
}

.wfd-surge-highlight {
    pointer-events: none;
}

@keyframes wfd-surge-pulse {
    from { opacity: 0.2; }
    to   { opacity: 0.5; }
}

/* ── Zoom controls ────────────────────────────────────────────────────────── */

.wfd-zoom-controls {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 0.25rem;
    user-select: none;
}

.wfd-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.wfd-zoom-btn:hover {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.wfd-zoom-btn:active {
    background: var(--color-border);
}

.wfd-zoom-pct {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    min-width: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.wfd-zoom-sep {
    width: 1px;
    height: 18px;
    background: var(--color-border);
    margin: 0 0.125rem;
}

/* "Hide unreachable" — a view filter beside the zoom buttons. Pressed state reads
   from the brand colour so it is obvious the canvas is not showing everything. */
.wfd-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 32px;
    padding: 0 0.625rem;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.wfd-view-toggle:hover:not(:disabled) {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.wfd-view-toggle:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.wfd-view-toggle:disabled {
    cursor: default;
    opacity: 0.5;
}

.wfd-view-toggle.wfd-view-toggle--on {
    color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.wfd-view-toggle-count {
    font-weight: 500;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Workflow Designer — Detail Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.wfd-panel {
    width: 480px;
    flex-shrink: 0;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -2px 0 12px rgba(0,0,0,0.06);
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease-out;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 6;
}

.wfd-panel--open {
    transform: translateX(0);
    opacity: 1;
}

.wfd-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    flex-shrink: 0;
}

.wfd-panel-title {
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfd-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0.25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.wfd-panel-close:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.wfd-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ── Panel sections ───────────────────────────────────────────────────────── */

.wfd-panel-section {
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 1.25rem;
}

.wfd-panel-section:last-child {
    border-bottom: none;
}

.wfd-panel-section-title {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem;
}

.wfd-panel-subsection {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 1rem 0 0.5rem;
}

.wfd-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.wfd-panel-field {
    padding: 0.375rem 0;
}

.wfd-panel-field--full {
    grid-column: 1 / -1;
}

.wfd-panel-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.15rem;
}

.wfd-panel-value {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* ── Panel table ──────────────────────────────────────────────────────────── */

.wfd-panel-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    overflow: hidden;
}

.wfd-panel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.wfd-panel-table th {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding: 0.5rem 0.625rem;
    text-align: left;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.wfd-panel-table td {
    padding: 0.4rem 0.625rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
}

.wfd-panel-table tr:last-child td {
    border-bottom: none;
}

.wfd-panel-table td.wfd-panel-muted {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.75rem;
}

.wfd-panel-table td code {
    background: var(--color-surface-raised, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    font-family: var(--font-mono, monospace);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.wfd-panel-and-row td {
    background: var(--color-surface-raised, #f8fafc);
    font-style: italic;
    border-bottom: none !important;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.75rem;
}

/* ── User action cards in panel ───────────────────────────────────────────── */

.wfd-panel-ua {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.5rem;
}

.wfd-panel-ua:last-child {
    margin-bottom: 0;
}

.wfd-panel-ua-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.wfd-panel-ua-title {
    font-family: var(--font-title);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wfd-panel-ua-badges {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.wfd-panel-ua-desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.wfd-panel-ua-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.125rem 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

.wfd-panel-ua-meta-item {
    padding: 0.25rem 0;
}

.wfd-panel-indicator {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #94a3b8);
}

.wfd-panel-indicator--on {
    color: var(--color-text-primary);
    font-weight: 500;
}

.wfd-panel-ua-tags {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.wfd-panel-ua-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.wfd-panel-ua-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-surface, #f8fafc);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
}

.wfd-panel-ua-tag-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.wfd-panel-ua-tag-arrow {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.6875rem;
}

.wfd-panel-ua-tag-val {
    color: var(--color-text-secondary);
}

.wfd-badge-ends {
    background: #fef2f2;
    color: #991b1b;
}

/* ── Task properties list ────────────────────────────────────────────────── */

.wfd-panel-props {
    display: flex;
    flex-direction: column;
}

.wfd-panel-prop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}

.wfd-panel-prop-row:last-child {
    border-bottom: none;
}

.wfd-panel-prop-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.wfd-panel-prop-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.wfd-panel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wfd-panel-dot--on {
    background: #22c55e;
}

.wfd-panel-dot--off {
    background: #cbd5e1;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */

.wfd-badge-auto {
    background: #ede9fe;
    color: #5b21b6;
}

.wfd-badge-human {
    background: #ecfeff;
    color: #0e7490;
}

.wfd-badge-entry {
    background: #eff6ff;
    color: var(--color-brand);
    border: 1px solid #bfdbfe;
}

/* ── Aging rows ───────────────────────────────────────────────────────────── */

.wfd-aging-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.625rem;
    border-radius: calc(var(--radius) * 0.75);
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
}

.wfd-aging-row:last-child { margin-bottom: 0; }

.wfd-aging--warning  { background: #fef3c7; color: #92400e; }
.wfd-aging--overdue  { background: #ffedd5; color: #9a3412; }
.wfd-aging--critical { background: #fee2e2; color: #991b1b; }

.wfd-aging-state {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 4.5rem;
}

.wfd-aging-rule {
    color: inherit;
    opacity: 0.85;
}

/* ── Workflow Assignments Report ────────────────────────────────────────── */

.wf-rpt-main {
    background: #f1f5f9;
    min-height: 100vh;
}

.wf-rpt-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 32px 64px;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    page: workflowReport;
}

.wf-rpt-controls {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* Right-hand group: the Excel download beside Print / Save as PDF. */
.wf-rpt-controls-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* "Reachable from start only" — the selector's and the view's filter checkbox. */
.wf-rpt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

.wf-rpt-export-error {
    color: #991b1b;
    font-size: 12px;
    max-width: 420px;
}

/* .btn-secondary has no global disabled look; give the report's Excel button the
   same treatment .btn-primary:disabled gets so the two outputs read alike. */
.wf-rpt-controls .btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wf-rpt-controls .btn-secondary:disabled:hover {
    border-color: var(--color-border);
    background: white;
}

.wf-rpt-status {
    padding: 64px 16px;
    text-align: center;
    color: #475569;
}

.wf-rpt-doc-head {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
}

.wf-rpt-doc-head h1 {
    margin: 0 0 4px 0;
    font-size: 20px;
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wf-rpt-doc-meta {
    color: #64748b;
    font-size: 12px;
}

.wf-rpt-dot {
    margin: 0 6px;
    color: #cbd5e1;
}

.wf-rpt-doc-foot {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid #cbd5e1;
    color: #94a3b8;
    font-size: 11px;
    text-align: center;
}

/* Per-workflow card */
.wf-rpt-workflow {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px 18px;
    margin-bottom: 16px;
}

.wf-rpt-workflow-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.wf-rpt-workflow-title {
    margin: 0;
    font-size: 16px;
    color: #0f172a;
    font-weight: 600;
}

.wf-rpt-workflow-id {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    margin-left: auto;
}

.wf-rpt-workflow-desc {
    margin: 0 0 12px 0;
    color: #475569;
    font-size: 12px;
    font-style: italic;
}

.wf-rpt-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Lane block */
.wf-rpt-lane {
    margin-top: 12px;
}

.wf-rpt-lane:first-of-type {
    margin-top: 0;
}

.wf-rpt-lane-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 6px 0;
}

.wf-rpt-empty-row {
    margin: 0;
    padding: 8px 0;
    color: #94a3b8;
    font-style: italic;
    font-size: 12px;
}

/* Compact data table */
.wf-rpt-tbl {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.wf-rpt-col-task     { width: 18%; }
.wf-rpt-col-type     { width: 88px; }
.wf-rpt-col-action   { width: 12%; }
.wf-rpt-col-people   { width: 14%; }
.wf-rpt-col-outcomes { width: auto; }

.wf-rpt-tbl thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #cbd5e1;
    border-top: 1px solid #e2e8f0;
}

.wf-rpt-tbl tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.wf-rpt-tbl tbody tr:last-child td {
    border-bottom: none;
}

.wf-rpt-task-name {
    font-weight: 600;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.3;
}

.wf-rpt-task-id {
    color: #94a3b8;
    font-size: 10px;
    margin-top: 1px;
}

.wf-rpt-c-type {
    text-align: left;
}

.wf-rpt-distribution {
    color: #64748b;
    font-size: 10px;
    margin-top: 3px;
    line-height: 1.3;
}

.wf-rpt-start {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.6;
    vertical-align: 1px;
}

.wf-rpt-start-line {
    font-size: 11px;
    color: #475569;
    margin: 0 0 8px;
}

/* The reachable filter's one-line explanation under "Starts at:". */
.wf-rpt-reach-note {
    font-size: 11px;
    font-style: italic;
    color: #64748b;
    margin: -4px 0 8px;
}

/* "Explain each task": the plain-English notes under a task row, and the workflow's footnotes. */
.wf-rpt-notes-row td {
    padding: 0 10px 10px 22px;
    border-top: none;
    background: #f8fafc;
}

.wf-rpt-notes {
    list-style: none;
    margin: 0;
    padding: 6px 0 0;
    display: grid;
    gap: 3px;
    font-size: 11px;
    color: #334155;
    line-height: 1.45;
}

.wf-rpt-note {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
}

.wf-rpt-note-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding-top: 1px;
}

.wf-rpt-note--check .wf-rpt-note-text {
    color: #92400e;
    font-weight: 500;
}

.wf-rpt-note--check .wf-rpt-note-label {
    color: #b45309;
}

.wf-rpt-footnotes {
    margin: 10px 0 4px;
    padding-left: 22px;
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.5;
}

.wf-rpt-start-name {
    font-weight: 600;
    color: #0f172a;
}

.wf-rpt-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
}

.wf-rpt-pill--human {
    background: #dbeafe;
    color: #1e40af;
}

.wf-rpt-pill--auto {
    background: #fef3c7;
    color: #92400e;
}

.wf-rpt-pill--parallel {
    background: #ede9fe;
    color: #5b21b6;
}

.wf-rpt-action-type {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    background: #e0f2fe;
    color: #075985;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

.wf-rpt-action-name {
    color: #475569;
    font-size: 11px;
    margin-top: 2px;
}

.wf-rpt-cell-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf-rpt-cell-list li {
    padding: 1px 0;
    line-height: 1.35;
}

.wf-rpt-empty {
    color: #cbd5e1;
}

.wf-rpt-outcome-title {
    font-weight: 600;
    color: #0f172a;
}

.wf-rpt-arrow {
    color: #94a3b8;
}

.wf-rpt-outcome-target {
    color: #475569;
}

.wf-rpt-outcome-target--unset {
    color: #b45309;
    font-style: italic;
}

/* ── Report selectors (Workflow + Document Type) ───────────────────────── */

.wfsel-shell {
    padding-bottom: 96px;
}

.wfsel-count-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wfsel-warn {
    color: #b45309;
    font-size: 12px;
    font-weight: 500;
}

.wfsel-th--check,
.wfsel-td--check {
    width: 36px;
    padding-left: 12px;
    padding-right: 4px;
    text-align: center;
}

.wfsel-td--check input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.wfsel-row {
    cursor: pointer;
}

.wfsel-actionbar {
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    padding: 12px 0;
    background: linear-gradient(to top, #ffffff 70%, rgba(255, 255, 255, 0));
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Document Type sections */
.wf-rpt-doctype-group {
    font-size: 11px;
    color: #475569;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.wf-rpt-link {
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
    margin-top: 10px;
}

.wf-rpt-link:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.wf-rpt-link-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.wf-rpt-link-wf {
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}

.wf-rpt-link-wf-id {
    color: #94a3b8;
    font-size: 11px;
}

.wf-rpt-link-bindings {
    font-size: 11px;
    color: #475569;
    margin-bottom: 8px;
}

.wf-rpt-binding {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    margin: 0 4px;
    font-weight: 500;
}

.wf-rpt-binding--entity {
    background: #dcfce7;
    color: #166534;
}

.wf-rpt-binding--entitygroup {
    background: #ede9fe;
    color: #5b21b6;
}

.wf-rpt-binding--unknown {
    background: #f1f5f9;
    color: #64748b;
}

.wf-rpt-binding--all {
    background: #fef3c7;
    color: #854d0e;
}

.wf-rpt-binding-sep {
    color: #cbd5e1;
    margin: 0 2px;
}

/* Entity Coverage report */

.ecov-mode {
    display: inline-flex;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f8fafc;
}

.ecov-mode-btn {
    background: transparent;
    border: none;
    padding: 8px 18px;
    font: inherit;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.ecov-mode-btn + .ecov-mode-btn {
    border-left: 1px solid #e2e8f0;
}

.ecov-mode-btn:hover {
    background: #f1f5f9;
}

.ecov-mode-btn--active {
    background: #0f172a;
    color: #ffffff;
}

.ecov-mode-btn--active:hover {
    background: #0f172a;
}

.ecov-scope {
    margin: 4px 0 18px 0;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.ecov-scope-legend {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 0 6px;
}

.ecov-scope-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
}

.ecov-scope-opt + .ecov-scope-opt {
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
}

.ecov-scope-opt input[type="radio"] {
    margin-top: 3px;
    cursor: pointer;
}

.ecov-scope-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #0f172a;
}

.ecov-scope-hint {
    font-size: 11px;
    color: #64748b;
    font-weight: normal;
}

.wf-rpt-membership {
    font-size: 12px;
    color: #475569;
    margin-top: 8px;
}

.wf-rpt-cascade-note {
    font-size: 11px;
    color: #64748b;
    margin: 10px 0 0 0;
    font-style: italic;
}

.wf-rpt-applies {
    margin: 4px 0 12px 0;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.wf-rpt-applies-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 4px;
}

.wf-rpt-applies-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf-rpt-applies-list li {
    padding: 2px 0;
    font-size: 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.wf-rpt-applies-types {
    color: #475569;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .wf-rpt-controls,
    #blazor-error-ui {
        display: none !important;
    }
    .wf-rpt-main {
        background: #ffffff !important;
        min-height: 0 !important;
    }
    .wf-rpt-page {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 10pt;
    }
    .wf-rpt-workflow {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 10px;
    }
    .wf-rpt-doc-head {
        background: #ffffff !important;
        page-break-after: avoid;
    }
    .wf-rpt-tbl {
        page-break-inside: auto;
    }
    .wf-rpt-tbl thead {
        display: table-header-group;
    }
    .wf-rpt-tbl tbody tr {
        page-break-inside: avoid;
    }

    /* Keep a task's notes on the same page as its row. */
    .wf-rpt-notes-row {
        break-before: avoid;
        page-break-before: avoid;
    }
    a {
        color: inherit;
        text-decoration: none;
    }
}

@page workflowReport {
    size: A4 landscape;
    margin: 12mm 10mm;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Home dashboard ("DocMX overview")
   ═══════════════════════════════════════════════════════════════════════════ */

.dashboard-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.dashboard-eyebrow {
    margin: 0 0 0.25rem;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-header-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.dashboard-loaded {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.dashboard-error {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

/* ── KPI strip ──────────────────────────────────────────────────────────── */

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1279px) {
    .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
    .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .kpi-strip { grid-template-columns: 1fr; }
}

.kpi-tile {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-align: left;
    font-family: var(--font-body);
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

button.kpi-tile {
    cursor: pointer;
}

button.kpi-tile:hover,
button.kpi-tile:focus-visible {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.10);
    outline: none;
}

.kpi-tile-label {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.kpi-tile-value {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.kpi-tile-sub {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Two-column rows ────────────────────────────────────────────────────── */

.dashboard-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

@media (max-width: 1023px) {
    .dashboard-row { grid-template-columns: 1fr; }
}

/* Layout-driven widget grid (docs/dashboard-config-design.md): each widget is one slot; the KPI
   strip and Jump-to span the full width, the cards flow two-up — the default order reproduces the
   original fixed rows exactly. */
.dashboard-widgets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 1.5rem;
}
.dashboard-slot { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dashboard-slot > .dashboard-card { flex: 1; }
.dashboard-slot--kpi-strip, .dashboard-slot--jump-to, .dashboard-slot--automation-health,
.dashboard-slot--monitor-status { grid-column: 1 / -1; }

@media (max-width: 1023px) {
    .dashboard-widgets { grid-template-columns: 1fr; }
    .dashboard-slot--kpi-strip, .dashboard-slot--jump-to, .dashboard-slot--automation-health,
    .dashboard-slot--monitor-status { grid-column: auto; }
}

/*  Automation health widget (epic A8.2). The tiles are AutomationKpiTile, which
    brings its own scoped styles; only the layout belongs here. */
.automation-card-body { display: flex; flex-direction: column; gap: 0.75rem; }
.automation-card-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.6rem;
}
.automation-card-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* Edit mode (Customise): per-widget chip, hidden-widget restore row, footer bar. */
.dashboard-edit-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.3rem 0.6rem; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px;
}
.dashboard-edit-name { font-size: 0.78rem; font-weight: 600; color: #3730a3; }
.dashboard-edit-actions { display: flex; gap: 0.3rem; }
.dashboard-edit-btn {
    padding: 0.15rem 0.5rem; border: 1px solid #c7d2fe; border-radius: 6px;
    background: #fff; color: #3730a3; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.dashboard-edit-btn:disabled { opacity: 0.4; cursor: default; }
.dashboard-edit-btn:not(:disabled):hover { background: #e0e7ff; }
.dashboard-edit-hidden {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    padding: 0.6rem 0.8rem; border: 1px dashed #cbd5e1; border-radius: 8px;
}
.dashboard-edit-hidden-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #64748b; }
.dashboard-edit-restore {
    padding: 0.25rem 0.7rem; border: 1px solid #cbd5e1; border-radius: 999px;
    background: #fff; color: #334155; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.dashboard-edit-restore:hover { background: #f1f5f9; }
.dashboard-edit-footer {
    position: sticky; bottom: 0.75rem; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.8rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.dashboard-edit-error { font-size: 0.8rem; color: #b91c1c; }

/* Screen-reader-only announcements (aria-live). */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    min-height: 14rem;
    overflow: hidden;
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.dashboard-card-title {
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.dashboard-card-count {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.dashboard-card-body {
    padding: 0.875rem 1.125rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dashboard-card-footer {
    padding: 0.625rem 1.125rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.dashboard-card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

.dashboard-card-link:hover { color: var(--color-brand-teal); }

/* ── Alerts list ────────────────────────────────────────────────────────── */

.alerts-card-body {
    gap: 0.5rem;
}

.alert-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.alert-row--success { background: #f0fdf4; border-color: #86efac; }
.alert-row--warning { background: #fffbeb; border-color: #fde68a; }
.alert-row--error   { background: #fef2f2; border-color: #fca5a5; }
.alert-row--info    { background: #eff6ff; border-color: #bfdbfe; }
.alert-row--neutral { background: #f1f5f9; border-color: var(--color-border); }
.alert-row--empty   { justify-content: center; color: var(--color-text-secondary); }

.alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
    border-radius: 999px;
    flex-shrink: 0;
    font-weight: 700;
}

.alert-badge--success { color: #166534; background: rgba(34, 197, 94, 0.15); }
.alert-badge--warning { color: #78350f; background: rgba(245, 158, 11, 0.18); }
.alert-badge--error   { color: #991b1b; background: rgba(239, 68, 68, 0.18); }
.alert-badge--info    { color: #1e40af; background: rgba(59, 130, 246, 0.15); }
.alert-badge--neutral { color: #475569; background: #e2e8f0; }

.alert-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.alert-detail {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.alert-link {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: calc(var(--radius) * 0.5);
    display: inline-flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.alert-link:hover,
.alert-link:focus-visible {
    color: var(--color-brand);
    background: rgba(14, 165, 198, 0.12);
    outline: none;
}

.alert-empty {
    font-size: 0.875rem;
}

/* ── Insight card ───────────────────────────────────────────────────────── */

.insight-card .insight-card-body {
    flex: 1;
    padding: 0.875rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.insight-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.insight-error {
    margin: 0;
    font-size: 0.8125rem;
    color: #991b1b;
}

.insight-source-pill {
    align-self: flex-start;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(14, 165, 198, 0.12);
    color: var(--color-brand);
}

.insight-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.insight-spinner {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand-teal);
    animation: insight-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .insight-spinner { animation: none; }
}

.insight-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.insight-card-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* ── Horizontal bars chart ──────────────────────────────────────────────── */

.bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bars-row {
    display: grid;
    grid-template-columns: 6rem 1fr 3rem;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.bars-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.bars-track {
    height: 0.5rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.bars-fill {
    height: 100%;
    background: var(--color-brand-teal);
    border-radius: 999px;
    transition: width 0.25s ease-out;
}

.bars-value {
    text-align: right;
    color: var(--color-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chart-empty {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* ── Sparkline ──────────────────────────────────────────────────────────── */

.usage-chart-body {
    gap: 1rem;
}

.sparkline {
    width: 100%;
    height: 4rem;
    display: block;
}

.sparkline-line {
    fill: none;
    stroke: var(--color-brand-teal);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline-area {
    fill: rgba(14, 165, 198, 0.12);
    stroke: none;
}

.sparkline-baseline {
    stroke: var(--color-border);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.usage-stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.usage-stats div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.usage-stats dt {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.usage-stats dd {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Jump-to pill row ───────────────────────────────────────────────────── */

.dashboard-jump {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.dashboard-jump-title {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0;
}

.jump-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jump-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.jump-pill:hover,
.jump-pill:focus-visible {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    color: var(--color-brand);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Workflow Designer — Design / Simulate mode toggle
   ═══════════════════════════════════════════════════════════════════════════ */

.wfd-mode-toggle {
    display: inline-flex;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.wfd-mode-btn {
    background: transparent;
    border: none;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wfd-mode-btn:hover {
    color: var(--color-text-primary);
}

.wfd-mode-btn--active {
    background: var(--color-surface);
    color: var(--color-brand);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ── Simulate: walked node accent ────────────────────────────────────────── */

.wfd-node--walked .wfd-node-card {
    stroke: var(--color-brand-teal);
    stroke-width: 1.5;
}

.wfd-node--walked.wfd-node--selected .wfd-node-card {
    stroke: var(--color-brand);
    stroke-width: 2.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Workflow Designer — Edit mode (WE5b)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar: view-only pill, undo/redo, unsaved, Save ──────────────────── */

.wfd-viewonly {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--status-neutral-fg);
    background: var(--status-neutral-bg);
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

.wfd-history {
    display: inline-flex;
    gap: 2px;
}

.wfd-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wfd-history-btn:hover:not(:disabled) {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.wfd-history-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wfd-dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--status-warning-fg);
    white-space: nowrap;
}

.wfd-dirty-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-degraded);
}

.wfd-save-btn {
    padding: 0.3125rem 0.875rem;
    font-size: 0.75rem;
}

/* ── Status badge as a menu (WE8b) ───────────────────────────────────────── */

.wfd-status-menu {
    position: relative;
}

.wfd-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    cursor: pointer;
}

.wfd-status-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.wfd-status-btn:hover:not(:disabled) {
    filter: brightness(0.96);
}

.wfd-status-caret {
    font-size: 0.625rem;
}

.wfd-status-list {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 20;
    min-width: 11rem;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.wfd-status-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
}

.wfd-status-item:hover,
.wfd-status-item:focus-visible {
    background: var(--color-surface-raised);
}

/* ── Edit reserves the rail's width ─────────────────────────────────────── */

/* .wfd-panel is absolutely positioned and 480px wide. In View and Simulate it
   overlays the canvas, which is fine because it opens on demand and closes
   again. In Edit it never closes, so the canvas would be sized — and fitted —
   against a width 480px of which it can never show. Reserving the width here
   rather than making the panel a flex sibling keeps the open/close transition
   for the other two modes exactly as it was. */
.wfd-body--railed > .wfd-canvas-wrap,
.wfd-body--railed > .wfd-empty {
    margin-right: 480px;
}

/* ── Empty workflow (no tasks yet) ──────────────────────────────────────── */

.wfd-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--color-surface-raised);
    overflow: auto;
}

.wfd-empty-card {
    max-width: 30rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.wfd-empty-card h2 {
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.wfd-empty-card p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── The designer's one live region ─────────────────────────────────────── */

.wfd-live {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Canvas: focusable cards, new rows, Edit ghosts ─────────────────────── */

/* The card's own hit target is this group — the background, the header and its
   padding — NOT the whole node group, whose outcome rows are separately
   clickable. See the comment at the top of WorkflowCanvas.razor. */
.wfd-node-hit:focus {
    outline: none;
}

.wfd-node-hit:focus-visible .wfd-node-card {
    stroke: var(--color-brand-teal);
    stroke-width: 2.5;
}

/* A row the administration bus has never seen: dashed until a save gives it
   a real id. Overrides the solid card stroke, so it comes after it. */
.wfd-node--new .wfd-node-card {
    stroke-dasharray: 5 4;
    stroke: var(--color-brand-teal);
}

.wfd-ghost {
    cursor: pointer;
}

.wfd-ghost-box {
    fill: var(--color-surface);
    fill-opacity: 0.6;
    stroke: var(--color-unknown);
    stroke-width: 1.25;
    stroke-dasharray: 5 4;
    transition: fill-opacity 0.15s, stroke 0.15s;
}

.wfd-ghost:hover .wfd-ghost-box,
.wfd-ghost:focus-visible .wfd-ghost-box {
    fill-opacity: 1;
    stroke: var(--color-brand-teal);
}

.wfd-ghost:focus {
    outline: none;
}

.wfd-ghost-label {
    font-family: var(--font-subtitle);
    font-size: 12px;
    font-weight: 600;
    fill: var(--color-text-secondary);
    pointer-events: none;
}

.wfd-ghost:hover .wfd-ghost-label {
    fill: var(--color-brand);
}

/* ── Canvas: facet pills ────────────────────────────────────────────────── */

/* What is set on a task, in words — the Forms canvas's rule, and the reason a
   workflow can be scanned without hovering every card. */
.wfd-facet-text {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    pointer-events: none;
}

.wfd-facet rect {
    transition: stroke 0.15s ease;
}

/* ── Canvas: relayout cross-fade ────────────────────────────────────────── */

/* Cards tween to their new places under .wfd-node's transform transition, but an
   edge's `d` cannot be tweened between two orthogonal routes — so for one
   transition's length the edges fade out, and fade back in on their own
   transition once workflowCanvas.js drops the class. A CSS rule beats the
   presentation attribute the edge carries, which is what makes this work without
   Blazor re-rendering anything. */
.wfd-canvas.wfd-relayout .wfd-edge,
.wfd-canvas.wfd-relayout .wfd-edge-label,
.wfd-canvas.wfd-relayout .wfd-end-label {
    opacity: 0;
    transition: opacity 120ms ease-out;
}

/* ── Canvas: the Edit gestures ──────────────────────────────────────────── */

/* The grip is a sign, not a target: the press area is the card's hit group. */
.wfd-grip {
    pointer-events: none;
}

.wfd-grip circle {
    fill: #cbd5e1;
}

.wfd-node:hover .wfd-grip circle {
    fill: #94a3b8;
}

/* A card's own cursor is inline (it varies by mode), so the grabbing cursor goes
   on the wrap — which is the element the cursor comes from once the <svg> has
   pointer capture, and so the one that can show it without !important. */
.wfd-canvas-wrap.wfd-dragging {
    cursor: grabbing;
}

/* A port's visible dot is 3.5px across; its target is 9, because a 3.5px target
   is not one. */
.wfd-port-hit {
    cursor: crosshair;
    outline: none;
}

.wfd-port-hit:focus-visible {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Every card carries an end pill; only an edge drag reveals them. */
.wfd-end-pill {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.wfd-end-pill rect {
    fill: #fff1f2;
    stroke: #fda4af;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.wfd-end-pill text {
    font-family: var(--font-subtitle);
    font-size: 10px;
    font-weight: 600;
    fill: #be123c;
}

.wfd-canvas.wfd-edge-dragging .wfd-end-pill {
    opacity: 1;
}

/* While an edge is in flight the cards are drop targets, so they stop competing
   for the pointer with their own rows. */
.wfd-canvas.wfd-edge-dragging .wfd-outcome-row,
.wfd-canvas.wfd-edge-dragging .wfd-ghost {
    pointer-events: none;
}

.wfd-canvas.wfd-edge-dragging .wfd-node-card {
    stroke-dasharray: 6 4;
}

/* ── Canvas: the transient elements JS owns while a drag is in flight ───── */

.wfd-drag-ghost {
    pointer-events: none;
    opacity: 0.85;
    transition: none;
}

.wfd-slot-bar {
    fill: var(--color-brand-teal);
    opacity: 0.85;
    pointer-events: none;
}

.wfd-lane-drop {
    fill: var(--color-brand-teal);
    fill-opacity: 0.06;
    stroke: var(--color-brand-teal);
    stroke-width: 1;
    stroke-dasharray: 6 5;
    pointer-events: none;
}

.wfd-draft-edge {
    stroke: var(--color-brand-teal);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    stroke-linecap: round;
    pointer-events: none;
}

.wfd-drop-target {
    fill: none;
    stroke: var(--color-brand-teal);
    stroke-width: 2;
    pointer-events: none;
}

/* ── Canvas: reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .wfd-node {
        transition: opacity 0.25s ease;
    }

    .wfd-canvas.wfd-relayout .wfd-edge,
    .wfd-canvas.wfd-relayout .wfd-edge-label,
    .wfd-canvas.wfd-relayout .wfd-end-label {
        opacity: 1;
        transition: none;
    }

    .wfd-start-pulse,
    .wfd-aging-critical {
        animation: none;
    }
}

/* ── Rail: crumbs and the Inspect | Checks strip ────────────────────────── */

.wfd-panel-heading {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.wfd-crumbs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.wfd-crumb {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s, color 0.15s;
}

.wfd-crumb:hover {
    color: var(--color-brand);
    text-decoration-color: currentColor;
}

.wfd-crumb-sep {
    color: var(--color-unknown);
}

.wfd-panel > .ts {
    flex-shrink: 0;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.wfd-insp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.wfd-danger-btn {
    color: var(--status-error-fg);
    border-color: var(--status-error-border);
}

.wfd-danger-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Checks tab ─────────────────────────────────────────────────────────── */

.wfd-ck {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wfd-ck-clear {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
    color: var(--status-success-fg);
    font-size: 0.8125rem;
}

.wfd-ck-summary {
    display: flex;
    gap: 0.375rem;
}

.wfd-ck-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wfd-ck-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wfd-ck-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.wfd-ck-item--error {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
}

.wfd-ck-item--warn {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
}

.wfd-ck-mark {
    flex: none;
    line-height: 0;
    padding-top: 0.125rem;
}

.wfd-ck-item--error .wfd-ck-mark { color: var(--status-error-fg); }
.wfd-ck-item--warn .wfd-ck-mark { color: var(--status-warning-fg); }

.wfd-ck-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wfd-ck-message {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.wfd-ck-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wfd-ck-code {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.wfd-ck-goto {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
}

.wfd-ck-goto:hover {
    text-decoration: underline;
}

/* ── Remove-task dialog ─────────────────────────────────────────────────── */

.wfd-dlg-note {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.wfd-dlg-routes {
    margin: 0.25rem 0 0.75rem 1.25rem;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.wfd-dlg-choice {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin: 0;
}

.wfd-dlg-choice legend {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0 0.25rem;
}

.wfd-dlg-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.1875rem 0;
    cursor: pointer;
}

.wfd-dlg-select {
    margin: 0.25rem 0 0.5rem 1.5rem;
    width: calc(100% - 1.5rem);
}

.wfd-dlg-warn {
    margin: 0.25rem 0 0 1.5rem;
    font-size: 0.75rem;
    color: var(--status-warning-fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Workflow Simulation Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.sim-panel {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 1.25rem;
    gap: 1rem;
}

.sim-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sim-section + .sim-section {
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.sim-section-title {
    font-family: var(--font-subtitle, var(--font-body));
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin: 0 0 0.25rem 0;
}

.sim-section-title--sub {
    margin-top: 0.75rem;
}

.sim-entity-select {
    width: 100%;
}

.sim-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.sim-placeholder {
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-raised);
    text-align: center;
}

.sim-placeholder p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.sim-placeholder-sub {
    margin-top: 0.25rem !important;
    font-size: 0.75rem !important;
    color: var(--color-text-secondary) !important;
}

/* ── Task head ───────────────────────────────────────────────────────────── */

.sim-task-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.sim-task-name {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sim-task-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
}

.sim-task-id {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Slots ───────────────────────────────────────────────────────────────── */

.sim-slot {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sim-slot-title {
    margin: 0.25rem 0 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sim-empty {
    padding: 0.75rem;
    background: var(--color-surface-raised);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-align: center;
}

/* ── Chip (one assignment row) ───────────────────────────────────────────── */

.sim-chip {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sim-chip--role {
    border-color: rgba(13,148,136,0.35);
    background: rgba(13,148,136,0.04);
}

.sim-chip--placeholder {
    background: var(--color-surface-raised);
}

.sim-chip--ambig {
    border-color: rgba(217,119,6,0.45);
    background: rgba(217,119,6,0.06);
}

.sim-chip-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.sim-chip-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.sim-chip-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sim-chip-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-brand);
    background: rgba(13,148,136,0.12);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.sim-chip-pill {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sim-chip-pill--warn {
    color: #92400e;
    background: #fef3c7;
}

.sim-chip-empty {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.sim-chip-note {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.sim-user-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.sim-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.625rem 0.25rem 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    max-width: 100%;
}

.sim-user-btn:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    transform: translateY(-1px);
}

.sim-user-btn--off {
    opacity: 0.6;
}

.sim-user-btn--off .sim-user-avatar {
    background: #cbd5e1;
}

.sim-user-btn--more {
    padding: 0.25rem 0.75rem;
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 600;
    border-style: dashed;
}

.sim-user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-teal) 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.sim-user-name {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

/* ── Outcomes ────────────────────────────────────────────────────────────── */

.sim-outcomes {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sim-outcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    text-align: left;
    font: inherit;
    color: inherit;
}

.sim-outcome:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    transform: translateX(2px);
}

.sim-outcome--end {
    border-style: dashed;
}

.sim-outcome--end:hover {
    border-color: #ef4444;
}

.sim-outcome-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sim-outcome-arrow {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand);
}

.sim-outcome--end .sim-outcome-arrow {
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.sim-breadcrumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sim-breadcrumb {
    display: flex;
}

.sim-breadcrumb-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font: inherit;
}

.sim-breadcrumb-btn:hover {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

.sim-breadcrumb-task {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sim-breadcrumb-outcome {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

/* ── Done state ──────────────────────────────────────────────────────────── */

.sim-section--done .sim-done {
    text-align: center;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-raised);
}

.sim-done h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
}

.sim-done p {
    margin: 0 0 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.sim-section--actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* ── Skeleton (loading placeholder) ──────────────────────────────────────── */

.sim-skeleton {
    background: linear-gradient(90deg,
        var(--color-surface-raised) 25%,
        rgba(0,0,0,0.04) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: sim-skeleton-shimmer 1.4s ease infinite;
    border-radius: 6px;
}

.sim-skeleton--head { height: 18px; width: 60%; }
.sim-skeleton--row  { height: 28px; width: 100%; }

@keyframes sim-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ============================================================================
   Policy canvas (pcv-*) — the control-plane policy designer's flow surface.
   Global (not scoped): js/policyCanvas.js creates surge/pulse elements at
   runtime, and SVG text styling must reach the generic PolicyCanvas markup.
   Sibling of the wfd-* workflow canvas; same tokens, same calm language.
   ============================================================================ */

.pcv-canvas-wrap {
    position: relative;
    width: 100%;
    height: 640px;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.pcv-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.pcv-panning .pcv-canvas { cursor: grabbing; }

/* Nodes */
.pcv-node { cursor: pointer; }
.pcv-node-card {
    fill: var(--color-surface);
    stroke: var(--color-border);
    stroke-width: 1;
    transition: stroke 0.15s ease;
}
.pcv-node:hover .pcv-node-card { stroke: var(--color-brand-teal); }
.pcv-node--selected .pcv-node-card { stroke: var(--color-brand-teal); stroke-width: 2; }

.pcv-node--entry .pcv-node-card { fill: #eef6ff; stroke: var(--color-brand); }
.pcv-node--entry { cursor: default; }
.pcv-node--outcome { cursor: default; }
.pcv-node--outcome .pcv-node-card { fill: #fbfdff; }
.pcv-node--config .pcv-node-card { fill: #f8fafc; stroke-dasharray: 4 3; }
.pcv-node--group .pcv-node-card { fill: #f5f3ff; stroke: #c4b5fd; stroke-dasharray: 4 3; }
.pcv-node--detector .pcv-node-card { fill: #f0f9ff; }
.pcv-node--score .pcv-node-card { fill: #eef2ff; stroke: #a5b4fc; }

.pcv-node-title {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    fill: var(--color-text-primary);
    pointer-events: none;
}
.pcv-node-subtitle {
    font-family: var(--font-body);
    font-size: 10.5px;
    fill: var(--color-text-secondary);
    pointer-events: none;
}

/* Badges */
.pcv-badge rect { fill: #f1f5f9; }
.pcv-badge text {
    font-family: var(--font-subtitle);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    fill: #475569;
    pointer-events: none;
}
.pcv-badge--pass rect { fill: #dcfce7; }
.pcv-badge--pass text { fill: #166534; }
.pcv-badge--escalate rect { fill: #fef3c7; }
.pcv-badge--escalate text { fill: #92400e; }
.pcv-badge--exception rect { fill: #fee2e2; }
.pcv-badge--exception text { fill: #991b1b; }
.pcv-badge--notapplicable rect { fill: #f1f5f9; }
.pcv-badge--notapplicable text { fill: #475569; }
.pcv-badge--muted rect { fill: #f1f5f9; }
.pcv-badge--muted text { fill: #64748b; }

/* Edges */
.pcv-edge-label {
    font-family: var(--font-subtitle);
    font-size: 10px;
    font-weight: 600;
    fill: #94a3b8;
    pointer-events: none;
}

/* Reorder chevrons */
.pcv-chevron { cursor: pointer; }
.pcv-chevron rect { fill: var(--color-surface); stroke: var(--color-border); }
.pcv-chevron path { fill: none; stroke: var(--color-text-secondary); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pcv-chevron:hover rect { stroke: var(--color-brand-teal); }
.pcv-chevron--off { opacity: 0.35; pointer-events: none; }

/* Trace playback */
.pcv-playing .pcv-node { opacity: 0.45; transition: opacity 0.25s ease; }
.pcv-playing .pcv-node--consulted,
.pcv-playing .pcv-node--fired { opacity: 1; }
.pcv-node--consulted .pcv-node-card { stroke: #94a3b8; stroke-width: 1.5; }
.pcv-node--fired .pcv-node-card {
    stroke: var(--color-brand-teal);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px rgba(14, 165, 198, 0.45));
}

/* Zoom overlay */
.pcv-zoom-overlay {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pcv-zoom-overlay button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-card);
}
.pcv-zoom-overlay button:hover { border-color: var(--color-brand-teal); }

/* Inspector fragments (rendered by child components inside the designer's rail — global on
   purpose: Blazor CSS isolation does not cascade into child components). */
.pcv-form { display: flex; flex-direction: column; gap: 0.65rem; }
.pcv-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: #374151; }
.pcv-form input, .pcv-form select, .pcv-form textarea {
    padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 0.85rem; background: #fff;
}
.pcv-form .pcv-check { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; }
.pcv-fieldset { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.45rem; }
.pcv-fieldset legend { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; padding: 0 0.3rem; }
.pcv-field--focus { background: #f0f9ff; border-radius: 8px; padding: 0.35rem; margin: -0.35rem; }
.pcv-inspector-hint { font-size: 0.8rem; color: #64748b; margin: 0.25rem 0; }
.pcv-muted { color: #6b7280; font-weight: 400; }
.pcv-link { background: none; border: none; padding: 0; color: #2563eb; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-align: left; }
.pcv-link:hover { text-decoration: underline; }
.pcv-link.pcv-danger { color: #b91c1c; }

/* Weighted-scoring inspector: section headings, value-selector editor, lookup criteria. */
.pcv-h5 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: #475569; margin: 0.6rem 0 0.15rem; }
.pcv-x { background: none; border: none; color: #94a3b8; font-size: 0.85rem; cursor: pointer; padding: 0 0.2rem; line-height: 1; }
.pcv-x:hover { color: #b91c1c; }

.pcv-selector { display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.4rem 0.5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.pcv-selector-head { display: flex; align-items: center; gap: 0.4rem; }
.pcv-selector-label { font-size: 0.72rem; font-weight: 600; color: #475569; flex: 1; }
.pcv-selector-form { flex: 0 0 auto; }
.pcv-selector-lookup { display: flex; gap: 0.35rem; }
.pcv-selector-lookup select { flex: 0 0 40%; }
.pcv-selector-lookup input, .pcv-selector-val { flex: 1; }

.pcv-firstof { display: flex; flex-direction: column; gap: 0.3rem; }
.pcv-firstof-row { display: flex; align-items: center; gap: 0.35rem; }
.pcv-firstof-row select { flex: 0 0 auto; }
.pcv-firstof-row input { flex: 1; }

/* Expression builder (the computed `expr` selector source) — nests inside .pcv-selector. */
.pcv-expr { display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.4rem 0.5rem; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #c7d2fe; border-radius: 6px; }
.pcv-expr-head { display: flex; align-items: center; gap: 0.4rem; }
.pcv-expr-op { flex: 0 0 auto; }
.pcv-expr-args { display: flex; flex-direction: column; gap: 0.3rem; }
.pcv-expr-arg { display: flex; align-items: flex-start; gap: 0.35rem; }
.pcv-expr-arg > .pcv-selector { flex: 1; }
.pcv-expr-field { display: flex; align-items: center; gap: 0.4rem; }
.pcv-expr-field input, .pcv-expr-field select { flex: 1; min-width: 0; }
.pcv-expr-note, .pcv-expr-deep { font-size: 0.75rem; color: #64748b; font-style: italic; }

/* Boolean-expression editor (if/switch conditions) — nests inside .pcv-expr / .pcv-form. */
.pcv-bool { display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.4rem 0.5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #bae6fd; border-radius: 6px; }
.pcv-bool-head { display: flex; align-items: center; gap: 0.4rem; }
.pcv-bool-kind { flex: 0 0 auto; }
.pcv-bool-children { display: flex; flex-direction: column; gap: 0.35rem; }
.pcv-bool-child { display: flex; align-items: flex-start; gap: 0.35rem; }
.pcv-bool-child > .pcv-bool { flex: 1; }
.pcv-expr-case { display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.4rem 0.5rem; border: 1px dashed #cbd5e1; border-radius: 6px; }
.pcv-expr-case-head { display: flex; align-items: center; justify-content: space-between; }

.pcv-criterion { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.4rem;
    padding: 0.4rem 0.5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.pcv-criterion-head { display: flex; align-items: center; gap: 0.35rem; }
.pcv-criterion-path { flex: 1; }

/* ─────────────────────────────────────────────────────────────────────────
   Workflow designer — the WE7 inspectors (assignees, buttons, tag updates,
   timing, advanced, managers) and the automated-action editor.

   These live here rather than in a scoped stylesheet because the panels they
   style are rendered THROUGH InspectorShell's ::deep content slot: a scoped
   rule on one of them would be scoped to that component's own elements and
   would not reach the markup once it is inside the shell.
   ───────────────────────────────────────────────────────────────────────── */

/* A quiet inline chip. The form designer defines its own scoped version of
   this name; scoped rules out-specify this base by construction, so both
   coexist. */
.fd-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.05rem 0.4rem; border-radius: 999px;
    background: var(--color-surface-raised, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
    font-size: 0.72rem; line-height: 1.5; color: var(--color-text-secondary, #475569);
    white-space: nowrap;
}
.fd-chip--quiet { background: transparent; color: var(--color-text-muted, #64748b); }

/* Rows shared by the tag-update list, the aging and certification rules and
   the outcome editor: a card with a head that names it and a remove control. */
.wfd-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.wfd-row { margin-bottom: 0.5rem; }
.wfd-row--default { border-left: 3px solid var(--color-accent, #2563eb); }

.wfd-row-remove {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 4px;
    border: 1px solid transparent; background: transparent; cursor: pointer;
    color: var(--color-text-muted, #64748b);
}
.wfd-row-remove:hover:not(:disabled) { background: var(--status-error-bg, #fee2e2); color: var(--status-error-fg, #991b1b); }
.wfd-row-remove:disabled { opacity: 0.4; cursor: not-allowed; }

.wfd-add-btn { margin-top: 0.5rem; align-self: flex-start; }

/* Assignee chips */
.wfd-chips { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wfd-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.2rem 0.5rem; border-radius: 999px;
    background: var(--color-surface-raised, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
    font-size: 0.8rem;
}
.wfd-chip-kind {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted, #64748b);
}
.wfd-chip-name { font-weight: 500; }
.wfd-chip-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem; padding: 0; border: none; border-radius: 999px;
    background: transparent; cursor: pointer; color: var(--color-text-muted, #64748b);
}
.wfd-chip-remove:hover:not(:disabled) { background: var(--status-error-bg, #fee2e2); color: var(--status-error-fg, #991b1b); }
.wfd-chip-remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* The buttons list on a task */
.wfd-btnlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.wfd-btnrow {
    width: 100%; display: flex; flex-direction: column; gap: 0.2rem; text-align: left;
    padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0);
}
.wfd-btnrow:hover { border-color: var(--color-accent, #2563eb); }
.wfd-btnrow-main { display: flex; align-items: center; gap: 0.4rem; }
.wfd-btnrow-name { font-weight: 600; }
.wfd-btnrow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: var(--color-text-secondary, #475569); }
.wfd-btnrow-target { font-variant-numeric: tabular-nums; }

/* Timing: days / hours / minutes side by side */
.wfd-duration { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }

/* Checkbox groups (permission overrides) and the manager grants table */
.wfd-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; border: 0; margin: 0; padding: 0; }
.wfd-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.wfd-grants td.wfd-grant-cell { text-align: center; }
.wfd-grants td.wfd-grant-role { min-width: 12rem; }
.wfd-grant-rolecell { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wfd-grant-rolename { font-weight: 500; }
.wfd-grant-rolebtn { padding: 0.2rem 0.6rem; font-size: 0.8125rem; }

/* The assignee drawer */
.wfd-pick { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.6rem; }
.wfd-pick-search, .wfd-pick-manual { display: flex; flex-direction: column; gap: 0.3rem; }
/* The Roles tab searches (RolePicker); typing a decoded id is the folded escape hatch. */
.wfd-pick-manual-fold { margin-top: 0.75rem; font-size: 0.8125rem; }
.wfd-pick-manual-fold > summary { cursor: pointer; color: var(--color-text-secondary, #475569); }
.wfd-pick-manual-fold > .wfd-pick-manual { margin-top: 0.5rem; }
.wfd-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem;
    max-height: 22rem; overflow-y: auto; }
.wfd-pick-row {
    width: 100%; display: flex; flex-direction: column; gap: 0.1rem; text-align: left;
    padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer;
    background: transparent; border: 1px solid transparent;
}
.wfd-pick-row:hover { background: var(--color-surface-raised, #f1f5f9); border-color: var(--color-border, #e2e8f0); }
.wfd-pick-name { font-weight: 500; }
.wfd-pick-detail { font-size: 0.75rem; color: var(--color-text-muted, #64748b); }

/* The action type picker */
.wfd-typepick { display: flex; flex-direction: column; gap: 0.6rem; }
.wfd-typepick-search { display: flex; flex-direction: column; gap: 0.3rem; }
.wfd-typepick-current {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.6rem; border-radius: 6px;
    background: var(--color-surface-raised, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
}
.wfd-typepick-group { display: flex; flex-direction: column; gap: 0.25rem; }
.wfd-typepick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.wfd-typepick-row {
    width: 100%; display: flex; flex-direction: column; gap: 0.15rem; text-align: left;
    padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer;
    background: transparent; border: 1px solid transparent;
}
.wfd-typepick-row:hover:not(:disabled) { background: var(--color-surface-raised, #f1f5f9); border-color: var(--color-border, #e2e8f0); }
.wfd-typepick-row--on { border-color: var(--color-accent, #2563eb); background: var(--color-surface-raised, #f1f5f9); }
.wfd-typepick-rowhead { display: flex; align-items: center; gap: 0.4rem; }
.wfd-typepick-name { font-weight: 600; }
.wfd-typepick-summary { font-size: 0.78rem; color: var(--color-text-secondary, #475569); }

/* Action parameters: the repeatable rows and the query-source composite */
.wfd-multi { display: flex; flex-direction: column; gap: 0.4rem; }
.wfd-multi-row { display: flex; align-items: flex-start; gap: 0.35rem; }
.wfd-multi-row > .wfd-param { flex: 1; min-width: 0; }
.wfd-querysource-row { display: flex; flex-direction: column; gap: 0.35rem; }

/* AND conditions nested under the rule they add to */
.wfd-and {
    display: flex; align-items: center; gap: 0.4rem; margin: 0 0.6rem 0.5rem;
    padding: 0.3rem 0.5rem; border-left: 3px solid var(--color-border, #e2e8f0);
    font-size: 0.78rem; color: var(--color-text-secondary, #475569);
}
.wfd-and-text { font-variant-numeric: tabular-nums; }

/* The raw row tables */
.wfd-raw td, .wfd-raw th { vertical-align: top; }
.wfd-raw-input { min-width: 6rem; font-size: 0.78rem; padding: 0.2rem 0.35rem; }
.wfd-raw tr[data-managed="false"] th { border-left: 3px solid var(--status-warning-fg, #b45309); }

/* Where else a task is used */
.wfd-usage { margin-top: 0.5rem; }

/* ── Recent activity tile (dashboard, issue #24) ─────────────────────────── */
/* A calm, scannable sign-in feed: a status dot, who, what, when. Deliberately
   quieter than .alert-row — activity is history, not something to act on. */

.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.activity-row {
    display: grid;
    /* dot · who · what (flexes and truncates) · when */
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.activity-row:last-child { border-bottom: none; }

.activity-outcome {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
    align-self: center;
    background: #94a3b8;
}

.activity-outcome--success { background: #22c55e; }
.activity-outcome--denied  { background: #f59e0b; }
.activity-outcome--failure { background: #ef4444; }

.activity-user {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The detail is the row's flexible column, so a long failure reason truncates
   rather than pushing the timestamp out of the card. */
.activity-detail {
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-time {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The system a sign-in was against — nests inside .activity-detail, so it
   truncates with the rest of the line rather than fighting it for space. */
.activity-profile {
    color: var(--color-text-muted, #64748b);
    margin-left: 0.25rem;
}

/* ── UA8 (#833): Profiles and Licences catalogue pages (Components/Pages/Access) ───────────────
   Global rather than scoped because four pages share it; every class is acp-/acl- prefixed. */
.acp { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1.5rem; }
.acp .acp-back { align-self: flex-start; font-size: 0.875rem; color: var(--color-brand); text-decoration: none; }
.acp .acp-back:hover { text-decoration: underline; }
.acp .acp-status { margin: 0; color: var(--color-text-secondary); }
.acp .acp-section { display: flex; flex-direction: column; gap: 0.5rem; }
.acp .acp-h2 { margin: 0.5rem 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--color-text-primary); }
.acp .acp-h3 { margin: 1rem 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.acp .acp-hint, .acp .acp-footnote { margin: 0; font-size: 0.875rem; color: var(--color-text-secondary); }
.acp .acp-muted { color: var(--color-text-secondary); }
.acp .acp-name-cell { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.acp .acp-name { font-weight: 600; color: var(--color-text-primary); text-decoration: none; }
.acp .acp-name:hover { color: var(--color-brand); text-decoration: underline; }
.acp .acp-desc { font-size: 0.8125rem; color: var(--color-text-secondary); }
.acp .acp-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.acp .acp-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.acp .acp-kind { font-weight: 600; color: var(--color-text-primary); }
.acp .acp-fact { font-size: 0.875rem; color: var(--color-text-secondary); }
.acp .acp-desc-lg { margin: 0; color: var(--color-text-secondary); }
.acp .acp-panel { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.5rem; }
.acp .acp-unavailable { padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-raised); color: var(--color-text-secondary); }
.acp .acp-warning { padding: 0.75rem 1rem; border: 1px solid #fecaca; border-left: 4px solid var(--color-down); border-radius: 8px; background: #fef2f2; color: #7f1d1d; }
.acp .acp-warning-inline { margin: 0; color: #92400e; font-size: 0.875rem; }
.acp .acp-add { max-width: 36rem; }
.acp .acp-pending { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-raised); }
.acp .acp-pending p { margin: 0; }
.acp .acp-actions { display: flex; gap: 0.5rem; }
.acp .acp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.acp .acp-search { max-width: 22rem; }
.acp .acp-size { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); }
.acp .acp-size select { width: auto; }
.acp .acp-term { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.8125rem; }
.acp .acp-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.25rem 1.5rem; margin: 0; }
.acp .acp-setting { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; }
.acp .acp-setting dt { color: var(--color-text-primary); }
.acp .acp-setting dd { margin: 0; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.acp .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8125rem; }

/* PaneSplitter (Components/Shared): while a pane divider is dragged, nothing on the page gets
   text-selected and the cursor stays a resize cursor even off the handle. */
body.psp-body--dragging {
    user-select: none;
    cursor: col-resize;
}

/* ── Access evidence pack (GOV5, #960) ───────────────────────────────────────
   Global rather than scoped: the page's sections are rendered partly by child components
   (EvidencePeopleBlock), and the print rules have to reach the app shell around the page. */
.ev-pack {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.ev-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ev-actions a.btn-secondary {
    text-decoration: none;
}

.ev-quarter-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ev-quarter {
    width: auto;
    min-width: 15rem;
}

.ev-status,
.ev-more {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ev-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.125rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ev-eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ev-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.ev-meta {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ev-meta span {
    margin-left: 0.25rem;
}

.ev-head-side {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ev-notes {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ev-summary,
.ev-figures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.ev-summary > div,
.ev-figures > div {
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ev-summary dt,
.ev-figures dt {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ev-summary dd,
.ev-figures dd {
    margin: 0.25rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.ev-figures dd span {
    margin-left: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.ev-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.ev-section-head h2 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ev-section-sub {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ev-section .epb-count,
.ev-block-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ev-block {
    margin-bottom: 1rem;
}

.ev-block-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ev-block:first-of-type .ev-block-title {
    margin-top: 0;
}

.ev-block-sub {
    margin: 0 0 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ev-names {
    margin: 0 0 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.ev-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.ev-chips li {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-surface);
    font-size: 0.75rem;
}

.ev-chip-count {
    font-weight: 700;
}

.ev-signed {
    padding: 0.875rem 1rem;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    background: #f0fdf4;
    font-size: 0.875rem;
}

.ev-signed p {
    margin: 0;
}

.ev-signed-note {
    margin-top: 0.35rem !important;
    font-style: italic;
}

.ev-signed-meta {
    margin-top: 0.35rem !important;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ev-form {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ev-form .ev-block-title {
    margin-top: 0;
}

.ev-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.875rem 1.25rem;
}

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

.ev-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.875rem;
}

.ev-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ev-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ev-table th {
    padding: 0.5rem 0.875rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.ev-table td {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.ev-table tbody tr:last-child td {
    border-bottom: none;
}

.ev-row-current td {
    background: #f0fdf4;
}

@media print {
    /* Only the pack prints: the shell's top bar, side nav and every control are dropped. */
    .app-shell:has(.ev-pack) {
        display: block !important;
        height: auto !important;
        background: #ffffff !important;
    }

    .app-shell:has(.ev-pack) > :not(.app-main) {
        display: none !important;
    }

    .app-shell:has(.ev-pack) .app-main {
        overflow: visible !important;
        padding: 0 !important;
    }

    .ev-no-print,
    #blazor-error-ui {
        display: none !important;
    }

    .ev-pack {
        gap: 1rem;
        font-size: 10pt;
    }

    .ev-head,
    .ev-summary > div,
    .ev-figures > div,
    .ev-signed,
    .ev-table-wrap {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        box-shadow: none !important;
    }

    .ev-section-head,
    .ev-block-title {
        break-after: avoid;
    }

    .ev-summary,
    .ev-figures,
    .ev-signed,
    .ev-table tr {
        break-inside: avoid;
    }
}