/*
 * Atlas On — Governance Design System
 * Ported from Lovable / Tailwind tokens.
 */

:root {
    --background: hsl(210, 20%, 98%);
    --foreground: hsl(220, 30%, 15%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(220, 30%, 15%);
    --popover: hsl(0, 0%, 100%);
    --popover-foreground: hsl(220, 30%, 15%);
    --primary: hsl(220, 35%, 18%);
    --primary-foreground: hsl(210, 40%, 98%);
    --secondary: hsl(215, 20%, 95%);
    --secondary-foreground: hsl(220, 25%, 30%);
    --muted: hsl(215, 20%, 95%);
    --muted-foreground: hsl(215, 15%, 50%);
    --accent: hsl(38, 92%, 50%);
    --accent-foreground: hsl(220, 30%, 15%);
    --destructive: hsl(0, 72%, 51%);
    --destructive-foreground: hsl(210, 40%, 98%);
    --border: hsl(215, 25%, 88%);
    --input: hsl(215, 25%, 88%);
    --ring: hsl(220, 35%, 18%);
    --radius: 0.5rem;

    --status-success: hsl(160, 84%, 39%);
    --status-warning: hsl(32, 95%, 44%);
    --status-caution: hsl(25, 95%, 53%);
    --status-danger: hsl(0, 72%, 51%);
    --status-info: hsl(217, 91%, 60%);

    /* Derived status tints — badge/chip/alert backgrounds, borders, and text all mix from the base
       status tokens so they follow the Brand Kit Status colors. */
    --status-success-bg: color-mix(in srgb, var(--status-success) 14%, var(--card));
    --status-success-border: color-mix(in srgb, var(--status-success) 38%, var(--card));
    --status-success-fg: color-mix(in srgb, var(--status-success) 78%, #000);
    --status-warning-bg: color-mix(in srgb, var(--status-warning) 16%, var(--card));
    --status-warning-border: color-mix(in srgb, var(--status-warning) 40%, var(--card));
    --status-warning-fg: color-mix(in srgb, var(--status-warning) 80%, #000);
    --status-danger-bg: color-mix(in srgb, var(--status-danger) 13%, var(--card));
    --status-danger-border: color-mix(in srgb, var(--status-danger) 36%, var(--card));
    --status-danger-fg: color-mix(in srgb, var(--status-danger) 78%, #000);
    --status-info-bg: color-mix(in srgb, var(--status-info) 13%, var(--card));
    --status-info-border: color-mix(in srgb, var(--status-info) 36%, var(--card));
    --status-info-fg: color-mix(in srgb, var(--status-info) 80%, #000);

    --sidebar-background: hsl(220, 35%, 18%);
    --sidebar-foreground: hsl(210, 40%, 90%);
    --sidebar-primary: hsl(38, 92%, 50%);
    --sidebar-accent: hsl(220, 30%, 25%);
    --sidebar-border: hsl(220, 25%, 28%);

    /* Partner Portal amber/gold family — editable per tenant in Settings → Brand Kit. */
    --partner-accent: #f59e0b;
    --partner-accent-strong: #d97706;
    --partner-accent-deep: #b45309;
    --partner-gold: #eab308;
    --partner-gold-bright: #facc15;
    --partner-gold-deep: #ca8a04;
    --partner-soft: #fef3c7;
    --partner-soft-hover: #fffbeb;
    --partner-outline: #fcd34d;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
    --background: hsl(220, 30%, 8%);
    --foreground: hsl(210, 40%, 95%);
    --card: hsl(220, 30%, 12%);
    --card-foreground: hsl(210, 40%, 95%);
    --primary: hsl(210, 40%, 95%);
    --primary-foreground: hsl(220, 35%, 18%);
    --secondary: hsl(220, 25%, 18%);
    --muted: hsl(220, 25%, 18%);
    --muted-foreground: hsl(215, 15%, 60%);
    --border: hsl(220, 25%, 22%);
    --input: hsl(220, 25%, 22%);

    /* Partner soft fills darken so amber chips/hovers don't glare on dark cards. */
    --partner-soft: hsl(38, 55%, 18%);
    --partner-soft-hover: hsl(38, 40%, 14%);
    --partner-outline: hsl(38, 70%, 32%);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--background);
    color: var(--foreground);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font-family: inherit; }
h1, h2, h3, h4 { color: var(--foreground); letter-spacing: -0.01em; margin: 0 0 0.4em; }
h1 { font-size: 1.875rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.125rem; font-weight: 600; }

.text-display { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
.text-metric { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.text-label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-foreground); }

/* Breadcrumb for pages reached from a hub (Components/Shared/PageCrumbs). */
.page-crumbs { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; font-size: 0.82rem; color: var(--muted-foreground); }
.page-crumbs-parent { color: var(--primary); font-weight: 600; text-decoration: none; }
.page-crumbs-parent:hover { text-decoration: underline; }
.page-crumbs-sep { opacity: 0.6; }
.page-crumbs-current { color: var(--foreground); }

.loading-note { display: inline-flex; align-items: center; gap: 0.45rem; }
.loading-spinner {
    flex: none; width: 0.85em; height: 0.85em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; opacity: 0.75;
    animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } }

.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.app-shell.collapsed { grid-template-columns: 64px 1fr; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-content { flex: 1; padding: 1.5rem; overflow-x: clip; }
.app-shell-backdrop { display: none; }

.app-sidebar {
    background: var(--sidebar-background);
    color: var(--sidebar-foreground);
    display: flex; flex-direction: column;
    border-right: 1px solid var(--sidebar-border);
    overflow-y: auto;
}
.app-sidebar .brand { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.625rem; border-bottom: 1px solid var(--sidebar-border); }
.app-sidebar .brand .mark { width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); display: grid; place-items: center;
    color: var(--accent-foreground); font-weight: 800; }
.app-sidebar .brand .brand-logo { flex: none; width: 32px; height: 32px; border-radius: 8px;
    object-fit: contain; background: #fff; padding: 2px; }
.app-sidebar.is-collapsed .brand .brand-logo { width: 32px; height: 32px; }
.app-sidebar .brand .title { font-weight: 700; font-size: 1rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-sidebar .nav-section { padding: 0.75rem 0; }
.app-sidebar .nav-section-title { padding: 0.25rem 1.25rem; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(226, 232, 240, 0.55); }
.app-sidebar a.nav-item { display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 1.25rem; color: rgba(226, 232, 240, 0.85); font-size: 0.875rem; }
.app-sidebar a.nav-item:hover { background: var(--sidebar-accent); color: #fff; }
.app-sidebar a.nav-item.active { background: var(--sidebar-accent); color: #fff;
    border-left: 3px solid var(--sidebar-primary); padding-left: calc(1.25rem - 3px); }
/* Sub-item (e.g. CEO Search under Partner Services): extra left inset, collapsed reverts to normal. */
.app-sidebar a.nav-item--indent { padding-left: 2.5rem; }
.app-sidebar a.nav-item--indent.active { padding-left: calc(2.5rem - 3px); }
.app-sidebar.is-collapsed a.nav-item--indent { padding-left: 1.25rem; }
.app-sidebar.is-collapsed a.nav-item--indent.active { padding-left: calc(1.25rem - 3px); }
.app-sidebar .nav-icon { display: inline-grid; place-items: center;
    width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; font-size: 0.85rem; }

.app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.5rem; background: var(--card); border-bottom: 1px solid var(--border);
}
.app-header .page-title { font-size: 1.125rem; font-weight: 600; }
.app-header .actions { display: flex; align-items: center; gap: 0.75rem; }

.card { background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.card-title { font-size: 1rem; font-weight: 600; }
.card-description { font-size: 0.85rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.card-body { padding: 1.25rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem; padding: 0.5rem 0.9rem;
    border-radius: var(--radius); border: 1px solid transparent;
    background: var(--primary); color: var(--primary-foreground);
    font-size: 0.875rem; font-weight: 500; cursor: pointer;
    transition: background 120ms ease, opacity 120ms ease;
}
.btn:hover { opacity: 0.92; }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
.btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-accent { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #000)); color: var(--accent-foreground); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.8rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

a.btn:hover {
    color: var(--primary-foreground);
}

a.btn.btn-outline:hover {
    color: var(--foreground);
}
.form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.form-row label { font-size: 0.85rem; font-weight: 500; color: var(--foreground); }
.input, select, textarea {
    width: 100%; padding: 0.55rem 0.7rem;
    border: 1px solid var(--input); border-radius: var(--radius);
    background: var(--card); color: var(--foreground);
    font-size: 0.875rem; font-family: inherit;
}
.input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem;
    border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
    background: var(--secondary); color: var(--secondary-foreground); }
.badge.success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge.warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge.danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.badge.info { background: var(--status-info-bg); color: var(--status-info-fg); }

.auth-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--background), hsl(215, 20%, 92%));
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.auth-card { max-width: 460px; width: 100%; }
.auth-card .brand-row { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin-bottom: 1.25rem; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; }
.text-sm { font-size: 0.85rem; } .text-xs { font-size: 0.75rem; }
.text-center { text-align: center; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.alert { padding: 0.6rem 0.85rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 0.9rem; }
/* .alert-error is an alias for .alert-danger so older markup and newer
   "alert-error" usages both light up red. Same palette to keep things consistent. */
.alert-danger,
.alert-error { background: var(--status-danger-bg); color: var(--status-danger-fg); border: 1px solid var(--status-danger-bg); }
.alert-success { background: var(--status-success-bg); color: var(--status-success-fg); border: 1px solid var(--status-success-bg); }
.alert-info { background: var(--status-info-bg); color: var(--status-info-fg); border: 1px solid var(--status-info-bg); }
.alert-warn { background: rgba(245, 158, 11, 0.1); color: var(--status-warning-fg); border: 1px solid rgba(245, 158, 11, 0.25); }

.divider { border-top: 1px solid var(--border); margin: 1rem 0; }
.divider-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; color: var(--muted-foreground); margin: 1rem 0; }
.divider-or::before, .divider-or::after { content: ""; height: 1px; background: var(--border); }

#blazor-error-ui {
    background: #fde68a; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed;
    width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.app-sidebar { padding-bottom: 0.75rem; }
.app-sidebar .brand { position: relative; }
.app-sidebar .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.app-sidebar .brand-tagline {
    font-size: 0.7rem; color: rgba(226, 232, 240, 0.65); font-weight: 500;
    margin-top: 0.15rem; letter-spacing: 0.01em;
}
.app-sidebar .brand-collapse-btn {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--sidebar-border);
    background: rgba(255,255,255,0.04); color: rgba(226, 232, 240, 0.85);
    display: grid; place-items: center; cursor: pointer; font-size: 0.85rem;
    transition: background 120ms ease;
}
.app-sidebar .brand-collapse-btn:hover { background: rgba(255,255,255,0.12); }

.app-sidebar.is-collapsed .nav-section-title { display: none; }
.app-sidebar.is-collapsed a.nav-item,
.app-sidebar.is-collapsed .nav-group-header { padding: 0.5rem; justify-content: center; }
.app-sidebar.is-collapsed a.nav-item.active { padding-left: calc(0.5rem - 3px); }

.app-sidebar .nav-item-text {
    display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1;
}
.app-sidebar .nav-item-label { font-weight: 600; font-size: 0.875rem; }
.app-sidebar .nav-item-subtitle {
    font-size: 0.7rem; color: rgba(226, 232, 240, 0.55); font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-sidebar .nav-item-lock {
    margin-left: auto; font-size: 0.75rem; opacity: 0.7;
}

.app-sidebar a.nav-item.locked { opacity: 0.55; }
.app-sidebar a.nav-item.locked .nav-item-label { color: rgba(226, 232, 240, 0.65); }

.app-sidebar .nav-group { display: flex; flex-direction: column; }
.app-sidebar .nav-group-header {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1.25rem;
    background: transparent; border: 0; color: rgba(226, 232, 240, 0.85);
    font-family: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
    width: 100%;
}
.app-sidebar .nav-group-header:hover { background: var(--sidebar-accent); color: #fff; }
.app-sidebar .nav-group-header.locked { opacity: 0.85; }
.app-sidebar .nav-group-chevron {
    margin-left: 0.25rem; font-size: 0.7rem; opacity: 0.7;
}
.app-sidebar .nav-group-children {
    display: flex; flex-direction: column; padding-left: 1.25rem;
    border-left: 1px solid var(--sidebar-border); margin-left: 1.5rem;
}
.app-sidebar .nav-group-children a.nav-item { padding-left: 0.75rem; }
.app-sidebar .nav-group-children a.nav-item.active {
    border-left-color: var(--sidebar-primary); padding-left: calc(0.75rem - 3px);
}

.app-sidebar .nav-section-spacer { flex: 1; }
.app-sidebar .nav-section-bottom {
    border-top: 1px solid var(--sidebar-border); padding-top: 0.75rem;
}

.app-header { gap: 1rem; }
.app-header .app-header-left {
    display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0;
}
.app-header .header-sidebar-toggle { flex-shrink: 0; display: none; }
.app-header .header-logo {
    flex: none; height: 32px; max-width: 150px; object-fit: contain;
    background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px;
}
.app-header .header-search {
    position: relative; flex: 1; max-width: 460px;
}
.app-header .header-search-icon {
    position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); font-size: 0.9rem; pointer-events: none;
}
.app-header .header-search-input { padding-left: 2rem; background: var(--secondary); border-color: transparent; }
.app-header .header-search-input:focus { background: var(--card); }

/* Below 768px the shell is one column and the sidebar is a drawer opened from the header's menu
   button (site.js AtlasOn.setNav toggles .nav-open on #app-shell). The mini-collapse control is
   hidden there, the header wraps onto two rows, and decorative header items step aside so nothing
   pushes the page wider than the phone. */
@media (max-width: 768px) {
    .app-shell, .app-shell.collapsed { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); z-index: 120;
        transform: translateX(-100%); transition: transform 180ms ease;
    }
    .app-shell.nav-open .app-sidebar { transform: translateX(0); box-shadow: 0 12px 32px rgba(9, 30, 40, 0.35); }
    .app-sidebar .brand-collapse-btn { display: none; }
    .app-shell.nav-open .app-shell-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(9, 30, 40, 0.45); z-index: 110;
    }
    .app-header { flex-wrap: wrap; padding: 0.6rem 1rem; gap: 0.5rem 0.75rem; }
    .app-header .app-header-left { flex: 1 1 100%; gap: 0.5rem; }
    .app-header .header-sidebar-toggle { display: inline-grid; }
    .app-header .header-logo { max-width: 110px; }
    .app-header .header-search { min-width: 0; }
    .app-header .header-search-input { width: 100%; min-width: 0; }
    .app-header .actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
    .app-header .actions > .badge { display: none; }
    .app-content { padding: 1rem; }
}

.icon-btn {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card);
    color: var(--foreground); cursor: pointer; font-family: inherit;
    font-size: 0.9rem; position: relative; flex-shrink: 0;
    text-decoration: none;
}
.icon-btn:hover { background: var(--secondary); color: var(--foreground); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn.icon-btn-danger { color: var(--destructive); }
.icon-btn.icon-btn-danger:hover { background: var(--status-danger-bg); }

.notification-btn { position: relative; }
.notification-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--destructive); color: var(--destructive-foreground);
    font-size: 0.625rem; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9999px; display: grid; place-items: center;
    border: 2px solid var(--card);
}

/* --- Notification bell + dropdown --- */
.notif { position: relative; display: inline-flex; }
.notif-backdrop { position: fixed; inset: 0; z-index: 49; background: transparent; }
.notif-panel {
    position: absolute; top: calc(100% + 0.5rem); right: 0;
    width: 360px; max-width: min(360px, calc(100vw - 2rem));
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    z-index: 50; overflow: hidden;
}
.notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border);
}
.notif-title { font-size: 0.9rem; font-weight: 600; }
.notif-markall {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    color: var(--primary); font-size: 0.75rem; font-weight: 600; padding: 0;
}
.notif-markall:hover { text-decoration: underline; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item {
    display: flex; align-items: flex-start; gap: 0.6rem; width: 100%;
    padding: 0.7rem 0.85rem; border: 0; border-bottom: 1px solid var(--border);
    background: transparent; text-align: left; cursor: pointer; font-family: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--secondary); }
.notif-item.is-unread { background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.notif-item.is-unread:hover { background: color-mix(in srgb, var(--primary) 11%, var(--card)); }
.notif-dot {
    flex: 0 0 auto; width: 8px; height: 8px; border-radius: 9999px; margin-top: 0.4rem;
    background: var(--muted-foreground);
}
.notif-dot--danger { background: var(--status-danger-fg); }
.notif-dot--warning { background: var(--status-warning-fg); }
.notif-dot--info { background: var(--status-info-fg); }
.notif-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notif-item-title {
    font-size: 0.82rem; font-weight: 600; color: var(--foreground); line-height: 1.25;
}
.notif-item-msg { font-size: 0.76rem; color: var(--muted-foreground); line-height: 1.3; }
.notif-item-time { font-size: 0.68rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.notif-empty {
    padding: 1.6rem 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.82rem;
}
.notif-empty-icon {
    width: 34px; height: 34px; margin: 0 auto 0.5rem; border-radius: 9999px;
    display: grid; place-items: center; font-weight: 700;
    background: var(--status-success-bg); color: var(--status-success-fg);
}

.period-select {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.6rem; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card);
    font-size: 0.8rem; font-weight: 500; cursor: pointer;
}
.period-select-icon { color: var(--muted-foreground); font-size: 0.85rem; }
.period-select select {
    background: transparent; border: 0; padding: 0; width: auto;
    font-size: 0.8rem; font-family: inherit; font-weight: 500;
    color: var(--foreground); cursor: pointer; outline: none;
}
.period-select select:focus { box-shadow: none; }

.dashboard-hero { display: flex; flex-direction: column; gap: 1rem; }
.dashboard-hero .text-metric { line-height: 1; letter-spacing: -0.03em; }

.banner {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 1.25rem;
    padding: 1.25rem 1.5rem; border-radius: 0.75rem;
    border: 1px solid transparent;
}
.banner-success {
    background: linear-gradient(90deg, hsl(155, 60%, 92%), hsl(155, 50%, 96%));
    border-color: hsl(155, 40%, 80%);
    color: var(--status-success-fg);
}
.banner-icon {
    width: 56px; height: 56px; border-radius: 9999px;
    background: rgba(255,255,255,0.7); display: grid; place-items: center;
    color: var(--status-success-fg); font-size: 1.5rem;
    border: 1px solid hsl(155, 40%, 80%);
}
.banner-label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--status-success-fg);
}
.banner-label-check { color: var(--status-success); font-size: 0.85rem; }
.banner-heading {
    font-size: 1.875rem; font-weight: 700; line-height: 1.1;
    color: var(--status-success-fg); margin-top: 0.1rem; letter-spacing: -0.02em;
}
.banner-summary { font-size: 0.85rem; color: var(--status-success-fg); margin-top: 0.25rem; }
.banner-stats {
    display: flex; align-items: center; gap: 1rem;
}
.banner-stat {
    background: rgba(255,255,255,0.7); padding: 0.75rem 1.25rem;
    border-radius: 0.625rem; border: 1px solid hsl(155, 35%, 82%);
    text-align: center; min-width: 130px;
}
.banner-stat .text-label { color: var(--status-success-fg); }
.banner-stat .text-metric { color: var(--foreground); }
.banner-stat-date {
    font-size: 1.25rem; font-weight: 700;
    color: var(--foreground); line-height: 1; margin-top: 0.25rem;
}
/* Small action under a banner-stat value: "View details" on the scheduled exam, or the
   schedule CTA when no exam exists (shown only to users who can manage the calendar). */
.banner-stat-action {
    display: inline-block; margin-top: 0.35rem;
    border: none; background: transparent; cursor: pointer;
    font-size: 0.75rem; font-weight: 600; color: var(--status-success-fg);
    text-decoration: underline; text-underline-offset: 2px; padding: 0;
}
.banner-stat-action:hover { color: var(--foreground); }
.banner-stat-action--cta {
    text-decoration: none; border: 1px solid hsl(155, 35%, 72%);
    border-radius: 0.45rem; padding: 0.3rem 0.6rem; margin-top: 0.3rem;
    background: rgba(255,255,255,0.85);
}
.banner-stat-action--cta:hover { background: #fff; color: var(--status-success-fg); }
.banner-stat-meta {
    align-self: flex-end; margin-left: 0.25rem; white-space: nowrap;
}

.stat-strip {
    background: var(--primary); color: var(--primary-foreground);
    border-radius: 0.75rem; padding: 1.25rem 1.5rem;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.stat-strip-item {
    display: flex; align-items: center; gap: 0.85rem;
}
.stat-strip-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,0.08); display: grid; place-items: center;
    color: var(--accent); font-size: 1rem; flex-shrink: 0;
}
.stat-strip-label {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(226, 232, 240, 0.65);
}
.stat-strip-value {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 0.15rem;
}

@media (max-width: 1024px) {
    .banner { grid-template-columns: 1fr; }
    .banner-stats { flex-wrap: wrap; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .stat-strip { grid-template-columns: 1fr; }
}

.tab-list {
    display: inline-flex; padding: 0.25rem;
    background: var(--secondary); border-radius: 0.6rem; gap: 0.25rem;
}
.tab-trigger {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.95rem; border-radius: 0.45rem;
    border: 0; background: transparent;
    font-family: inherit; font-size: 0.85rem; font-weight: 500;
    color: var(--muted-foreground); cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.tab-trigger:hover { color: var(--foreground); }
.tab-trigger.active {
    background: var(--card); color: var(--foreground);
    box-shadow: var(--shadow-sm);
}
.tab-trigger-icon { font-size: 0.9rem; opacity: 0.7; flex: none; }
.tab-trigger.active .tab-trigger-icon { opacity: 1; color: var(--accent); }

.pill-toggle-group {
    display: inline-flex; padding: 0.25rem;
    background: var(--secondary); border-radius: 0.6rem; gap: 0.25rem;
}
.pill-toggle {
    padding: 0.4rem 1rem; border-radius: 0.45rem;
    border: 0; background: transparent;
    font-family: inherit; font-size: 0.8rem; font-weight: 500;
    color: var(--muted-foreground); cursor: pointer;
}
.pill-toggle:hover { color: var(--foreground); }
.pill-toggle.active {
    background: var(--card); color: var(--foreground);
    box-shadow: var(--shadow-sm);
}

.kpi-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.kpi-card-icon {
    width: 44px; height: 44px; border-radius: 0.6rem;
    display: grid; place-items: center; font-size: 1.1rem; font-weight: 700;
    flex-shrink: 0;
}
.kpi-icon-neutral { background: hsl(215, 20%, 92%); color: hsl(220, 30%, 35%); }
.kpi-icon-success { background: hsl(155, 60%, 92%); color: var(--status-success-fg); }
.kpi-icon-warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.kpi-icon-info { background: var(--status-info-bg); color: var(--status-info); }
.kpi-card-value { font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-card-label { font-size: 0.85rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* Stat widgets that act as filters over the goal list (dashboard Strategic Goals). */
button.kpi-card--btn {
    font: inherit; color: inherit; text-align: left; width: 100%;
    cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
button.kpi-card--btn:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.kpi-card--btn.is-active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.goal-list { display: flex; flex-direction: column; gap: 1rem; }
.goal-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}
.goal-card-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.goal-card-title-row {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.goal-card-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.goal-card-actions { display: flex; gap: 0.35rem; }
.goal-card-description { font-size: 0.85rem; margin: 0.35rem 0 1rem; }
.goal-card-bars {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.goal-card-bar-col { display: flex; flex-direction: column; gap: 0.4rem; }
.goal-card-bar-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; font-weight: 500;
}
.goal-card-bar-values { font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-card-bar-footer {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.75rem; color: var(--muted-foreground);
}
.goal-card-overdue {
    color: var(--destructive); font-weight: 600; font-size: 0.8rem;
}
.goal-card-metric-link { font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem; }
/* Clickable variants: open the metric detail slide-over (education + trend) from a goal card. */
button.goal-card-metric-link--btn {
    border: none; background: transparent; padding: 0; font: inherit; font-size: 0.75rem;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
button.goal-card-metric-link--btn:hover { color: var(--accent); }
.goal-card-chip--btn { cursor: pointer; text-decoration: none; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; }
.goal-card-chip--btn:hover {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--secondary));
}
/* Footer date/metric cells carry a small inline SVG + text. */
.goal-card-bar-footer > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.goal-card-bar-footer svg { flex: none; }
.goal-card-linked {
    margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.goal-card-chip {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    background: var(--secondary); color: var(--secondary-foreground);
    font-size: 0.7rem; font-weight: 500;
    border: 1px solid var(--border);
}

@media (max-width: 768px) {
    .goal-card-bars { grid-template-columns: 1fr; }
}

.progress-bar, .timeline-bar {
    width: 100%; height: 8px;
    background: var(--secondary); border-radius: 9999px; overflow: hidden;
}
.progress-bar-fill {
    height: 100%; background: var(--muted-foreground);
    transition: width 200ms ease;
}
.progress-bar-fill-success { background: var(--status-success); }
.progress-bar-fill-warn { background: var(--status-warning); }
.progress-bar-fill-danger { background: var(--status-danger); }
.progress-bar-fill-neutral { background: var(--muted-foreground); }
/* Threshold / range goals: the band to hold, and a marker for where the current value sits. */
.goal-gauge { position: relative; width: 100%; height: 8px; background: var(--secondary); border-radius: 9999px; }
.goal-gauge-zone { position: absolute; top: 0; height: 100%; border-radius: 9999px; background: var(--status-success); opacity: 0.35; }
.goal-gauge--not_met .goal-gauge-zone { background: var(--status-warning); }
.goal-gauge-marker { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--foreground); }
.goal-gauge--met .goal-gauge-marker { background: var(--status-success); }
.goal-gauge--not_met .goal-gauge-marker { background: var(--status-danger); }
.goal-gauge-summary--met { color: var(--status-success-fg); font-weight: 600; }
.goal-gauge-summary--not_met { color: var(--status-danger-fg); font-weight: 600; }
.goal-gauge-bounds { margin-top: 0.15rem; }
/* Status-based goals have no number to plot — a tinted dot carries the indicator instead. */
.goal-status-readout { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.goal-status-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--muted-foreground); flex: none; }
.goal-status-readout--met { color: var(--status-success-fg); }
.goal-status-readout--met .goal-status-dot { background: var(--status-success); }
.goal-status-readout--not_met { color: var(--status-danger-fg); }
.goal-status-readout--not_met .goal-status-dot { background: var(--status-danger); }
.goal-status-readout--open .goal-status-dot { background: var(--status-warning); }
.timeline-bar-fill {
    height: 100%; background: var(--muted-foreground); opacity: 0.5;
}

/* ----- Status pill ----- */
.status-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600;
    border: 1px solid transparent;
}
.status-pill-icon { font-size: 0.75rem; line-height: 1; display: inline-flex; align-items: center; }
.status-pill-icon svg { display: block; }
.status-pill-success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.status-pill-warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.status-pill-danger {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}
.status-pill-info {
    background: var(--status-info-bg); color: var(--status-info-fg);
    border-color: var(--status-info-border);
}
.status-pill-neutral {
    background: var(--secondary); color: var(--secondary-foreground);
    border-color: var(--border);
}

.dashboard-section { display: flex; flex-direction: column; }
.dashboard-metrics-main { min-width: 0; }
/* Key Metrics are the page: the cards take every column the width allows. */
.dash-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .dash-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .dash-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dash-metric-grid { grid-template-columns: 1fr; } }

/* ----- Key Metrics tab: tab row + Critical Ratios header ----- */
.dash-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dash-tabbar .tab-list { margin-top: 0; }
.dash-metrics-toolbar { display: flex; align-items: center; gap: 0.5rem; }
.dash-metrics-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dash-metrics-title { display: flex; align-items: center; gap: 0.6rem; }
.dash-metrics-title h2 { margin: 0; }
.dash-viewall-link { color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dash-viewall-link:hover { text-decoration: underline; }


.metric-card-thresholds {
    border-top: 1px solid var(--border); padding-top: 0.6rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.metric-card-threshold-row {
    display: flex; justify-content: space-between; align-items: center;
}
.metric-card-linked-goals {
    display: flex; align-items: center; gap: 0.35rem;
    margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--border);
}
.metric-card-linked-icon { flex: none; color: var(--muted-foreground); }

/* MetricCard restyle: left accent bar, (?) help, colored trend, goal chips, footer. */
/* overflow must stay visible so the metric-help popover can escape the card;
   the accent bar carries its own left radius instead of relying on clipping. */
.metric-card { position: relative; overflow: visible; }
.metric-card .card-body { padding-left: 1.5rem; }

.metric-card-accent {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--status-info);
    border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius);
}
.metric-card.success .metric-card-accent { background: var(--status-success); }
.metric-card.warn .metric-card-accent { background: var(--status-warning); }
.metric-card.danger .metric-card-accent { background: var(--status-danger); }
.metric-card.info .metric-card-accent { background: var(--status-info); }

/* Name-first header (matches the governance DomainKpiTile layout). */
.metric-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.metric-card-name {
    font-weight: 600; font-size: 0.95rem;
    display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0;
}
.metric-card-badges { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; }
.gov-kpi-badges { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; }
/* The AI verdict chip uses the help popover for its narrative but must not be dimmed like a help icon. */
.metric-help.metric-help--chip { opacity: 1; color: inherit; }
.metric-help--chip .ai-tone-chip { cursor: help; }
.am-ai-flag { margin-left: 0.35rem; }
.metric-card-help {
    display: inline-flex; align-items: center; flex: none;
    color: var(--muted-foreground); opacity: 0.6; cursor: help;
    transition: opacity 0.15s ease;
}
.metric-card-help:hover { opacity: 1; }

/* ---------- Metric education popover (question-mark icons on metric/KPI tiles) ---------- */
.metric-help {
    position: relative; display: inline-flex; align-items: center; flex: none;
    color: var(--muted-foreground); opacity: 0.6; cursor: help;
    transition: opacity 0.15s ease;
}
.metric-help:hover, .metric-help:focus-visible, .metric-help:focus-within { opacity: 1; }
/* position: fixed escapes the .app-content scroll container (and the sidebar edge)
   entirely; site.js places and clamps the panel to the viewport on hover/focus. */
.metric-help-pop {
    position: fixed;
    width: 320px; max-width: min(320px, 82vw);
    display: none; flex-direction: column; gap: 0.45rem;
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(9, 30, 40, 0.22);
    padding: 0.8rem 0.9rem; z-index: 80;
    font-weight: 400; font-size: 0.8rem; line-height: 1.45; text-align: left;
    white-space: normal; cursor: default;
}
.metric-help:hover .metric-help-pop, .metric-help:focus-within .metric-help-pop { display: flex; }
.metric-help-title { font-weight: 700; font-size: 0.85rem; }
.metric-help-longname { color: var(--muted-foreground); font-size: 0.78rem; margin-top: -0.2rem; }
.metric-help-formula code {
    display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.35rem;
    background: var(--muted); border: 1px solid var(--border); font-size: 0.75rem;
}
.metric-help-why { color: var(--card-foreground); }
.metric-help-analogy, .metric-help-example { color: var(--muted-foreground); }

/* ---------- Metric detail: AI analysis card ---------- */
.ai-insight-card {
    border: 1px solid var(--border); border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    /* Soft warm→cool wash that follows the card token, so it adapts to dark mode. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--status-caution) 6%, var(--card)),
        color-mix(in srgb, var(--status-info) 6%, var(--card)));
    box-shadow: var(--shadow-sm);
}
.ai-insight-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ai-insight-title { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; font-weight: 700; margin: 0; }
.ai-insight-head-actions { display: inline-flex; align-items: center; gap: 0.35rem; }
.ai-insight-icon-btn {
    border: none; background: transparent; color: var(--muted-foreground);
    cursor: pointer; padding: 0.25rem; border-radius: 0.4rem; display: inline-grid; place-items: center;
    font-size: 0.9rem; line-height: 1;
}
.ai-insight-icon-btn:hover:not(:disabled) { color: var(--foreground); background: rgba(0,0,0,0.05); }
.ai-insight-icon-btn:disabled { opacity: 0.5; cursor: default; }

.ai-insight-sec { margin-top: 0.9rem; }
.ai-insight-sec-head {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.88rem; font-weight: 700;
}
.ai-insight-sec-head svg { flex: none; color: var(--muted-foreground); }
.ai-insight-narrative { font-size: 0.86rem; line-height: 1.6; margin: 0.4rem 0 0; }
.ai-insight-points { margin: 0.45rem 0 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ai-insight-points li { font-size: 0.84rem; line-height: 1.5; }

.ai-tone-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 9999px;
    border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
}
.ai-tone-positive { color: var(--status-success-fg); border-color: var(--status-success-border); background: var(--status-success-bg); }
.ai-tone-caution {
    color: color-mix(in srgb, var(--status-caution) 80%, #000);
    border-color: color-mix(in srgb, var(--status-caution) 38%, var(--card));
    background: color-mix(in srgb, var(--status-caution) 12%, var(--card));
}
.ai-tone-negative { color: var(--status-danger-fg); border-color: var(--status-danger-border); background: var(--status-danger-bg); }

.ai-watch-list { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.55rem; }
.ai-watch { border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; background: var(--card); }
.ai-watch-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ai-watch-title { font-size: 0.84rem; font-weight: 700; }
.ai-watch-sev {
    font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 9999px;
    border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); flex: none;
}
.ai-watch-detail { font-size: 0.8rem; line-height: 1.5; margin-top: 0.25rem; }
.ai-watch--high {
    background: color-mix(in srgb, var(--status-danger) 9%, var(--card));
    border-color: color-mix(in srgb, var(--status-danger) 30%, var(--card));
}
.ai-watch--high .ai-watch-title, .ai-watch--high .ai-watch-detail { color: var(--status-danger-fg); }
.ai-watch--medium {
    background: color-mix(in srgb, var(--status-caution) 10%, var(--card));
    border-color: color-mix(in srgb, var(--status-caution) 32%, var(--card));
}
.ai-watch--medium .ai-watch-title, .ai-watch--medium .ai-watch-detail { color: color-mix(in srgb, var(--status-caution) 80%, #000); }

.ai-rec-list { margin: 0.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.ai-rec-list li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.84rem; line-height: 1.5; }
.ai-rec-list li svg { flex: none; margin-top: 0.2rem; color: var(--muted-foreground); }

.metric-detail-ai-alert { margin: 0.5rem 0; }
.ai-insight-foot { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }

/* ---------- All Metrics page ---------- */
.am-toolbar { display: flex; flex-direction: column; gap: 0.75rem; }
.am-toolbar-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.am-search { flex: 1; min-width: 220px; max-width: 420px; }
.am-toolbar-row .am-chip-row { margin-left: auto; }
.am-toolbar-row:last-child .am-chip-row { margin-left: 0; }
.am-source-label { font-size: 0.85rem; color: var(--muted-foreground); }
.am-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.am-chip {
    border: 1px solid transparent; background: transparent; color: var(--foreground);
    font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: 0.5rem;
    cursor: pointer; transition: background 120ms ease;
}
.am-chip:hover { background: var(--muted); }
.am-chip.active { background: var(--muted); border-color: var(--border); }
.am-metric-filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.4rem 0.25rem 0.7rem;
    border-radius: 9999px; border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.am-metric-filter-clear {
    border: none; background: transparent; cursor: pointer; color: var(--muted-foreground);
    font-size: 0.75rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 9999px;
}
.am-metric-filter-clear:hover { color: var(--foreground); background: var(--muted); }

.am-table th.am-num, .am-table td.am-num { text-align: right; white-space: nowrap; }
.am-table th.am-center, .am-table td.am-center { text-align: center; }
.am-metric-link { font-weight: 600; color: var(--foreground); text-decoration: none; }
.am-metric-link:hover { text-decoration: underline; }
.am-category-chip {
    display: inline-block; font-size: 0.78rem; font-weight: 500;
    border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.2rem 0.6rem;
    white-space: nowrap;
}
.am-goal-chips { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.am-value { font-weight: 700; }
.metric-source-badge {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.4rem;
    font-size: 0.68rem; font-weight: 600; color: var(--muted-foreground);
    border: 1px solid var(--border); background: var(--muted);
    border-radius: 0.4rem; padding: 0.12rem 0.4rem; vertical-align: middle;
}
.am-trend-up { color: var(--status-success); font-weight: 600; }
.am-trend-down { color: var(--status-danger); font-weight: 600; }
.am-gear {
    border: none; background: transparent; color: var(--muted-foreground);
    cursor: pointer; padding: 0.25rem; border-radius: 0.4rem; display: inline-grid; place-items: center;
}
.am-gear:hover { color: var(--foreground); background: var(--muted); }

.metric-card-trend {
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.metric-card-trend-icon { flex: none; }
.metric-card-trend.up { color: var(--status-success); }
.metric-card-trend.down { color: var(--status-danger); }
.metric-card-trend .metric-card-trend-base { color: var(--muted-foreground); font-weight: 500; }

/* Chips left + gear right on one row. */
.metric-card-goal-row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem;
}
.metric-card-goal-row .metric-card-foot-gear { flex: none; color: var(--muted-foreground); align-self: flex-end; }
.metric-card-goal-chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0;
}
/* Soft-filled toned pills, matching the governance tile's linked-goal chips. */
.metric-card-goal-chip {
    display: inline-flex; align-items: center;
    max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0.28rem 0.55rem; font-size: 0.72rem; font-weight: 500;
    border-radius: 9999px;
    background: var(--secondary); color: var(--secondary-foreground);
    text-decoration: none;
}
/* Chips that link to their goal; the plain-span variants below are unaffected. */
a.metric-card-goal-chip:hover { text-decoration: underline; }
.metric-card-goal-chip-success { background: rgba(16, 185, 129, 0.12); color: hsl(160, 84%, 25%); }
.metric-card-goal-chip-warning { background: rgba(234, 179, 8, 0.15); color: hsl(32, 95%, 30%); }
.metric-card-goal-chip-danger  { background: rgba(239, 68, 68, 0.12); color: hsl(0, 72%, 38%); }
.metric-card-goal-chip-neutral { background: var(--secondary); color: var(--secondary-foreground); }
.metric-card-goal-more { background: transparent; color: var(--muted-foreground); }

.metric-card-foot {
    margin-top: 0.75rem;
    display: flex; justify-content: flex-end; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--muted-foreground);
}
.metric-card-foot-gear, .metric-card-foot-chevron { color: var(--muted-foreground); }

.app-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.5rem; gap: 1rem;
    background: var(--card); border-top: 1px solid var(--border);
    font-size: 0.8rem; color: var(--muted-foreground);
}
.app-footer-right { display: flex; align-items: center; gap: 0.6rem; }
.app-footer-right a { color: var(--muted-foreground); }
.app-footer-right a:hover { color: var(--accent); }
.app-footer-sep { color: var(--border); }

@media (max-width: 640px) {
    .app-footer { flex-direction: column; align-items: flex-start; }
}

.board-calendar-page { display: flex; flex-direction: column; gap: 1.25rem; }

.cal-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.cal-page-icon {
    color: var(--foreground);
    flex-shrink: 0;
    vertical-align: -0.2em;
    margin-right: 0.5rem;
}
.cal-page-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cal-page-title h1 {
    margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.cal-page-subtitle { color: var(--muted-foreground); font-size: 0.9rem; margin: 0; }

.cal-toolbar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

.cal-toolbar-search {
    position: relative; flex: 1 1 220px; min-width: 200px; max-width: 320px;
}
.cal-toolbar-search-icon {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); font-size: 0.95rem; pointer-events: none;
}
.cal-search-input {
    width: 100%; padding-left: 2rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); height: 2.25rem; font-size: 0.875rem;
    color: var(--foreground);
}
.cal-search-input:disabled { background: var(--secondary); color: var(--muted-foreground); cursor: not-allowed; }

.cal-type-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem; height: 2.25rem;
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.cal-type-chip:hover { background: var(--secondary); }
.cal-type-chip.active {
    background: var(--primary); color: var(--primary-foreground);
    border-color: var(--primary);
}
.cal-type-chip.active:hover { background: var(--primary); opacity: 0.92; }

.cal-filters-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem; height: 2.25rem;
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
.cal-filters-btn:hover { background: var(--secondary); }
.cal-filters-btn[aria-expanded="true"] { background: var(--secondary); }

.cal-view-switcher {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; margin-left: auto;
}
.cal-view-btn {
    background: var(--card); color: var(--muted-foreground);
    border: 0; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.95rem;
    height: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
}
.cal-view-btn + .cal-view-btn { border-left: 1px solid var(--border); }
.cal-view-btn.active { background: var(--secondary); color: var(--foreground); }
.cal-view-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }

.cal-filters-expander {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.cal-month-nav {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
}
.cal-month-nav-btn {
    background: transparent; border: 1px solid var(--border); border-radius: 0.4rem;
    width: 2rem; height: 2rem; cursor: pointer; color: var(--foreground);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.cal-month-nav-btn:hover { background: var(--secondary); }
.cal-month-label {
    font-size: 1.125rem; font-weight: 600; color: var(--foreground);
    min-width: 7.5em; text-align: center;
}
.cal-today-link {
    margin-left: auto;
    background: transparent; border: 0; padding: 0.4rem 0.75rem;
    color: var(--foreground); font-size: 0.875rem; font-weight: 500;
    cursor: pointer; border-radius: 0.4rem;
}
.cal-today-link:hover { background: var(--secondary); }

.cal-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cal-grid-header {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.cal-grid-header > div {
    padding: 0.6rem 0.75rem; font-size: 0.8rem; font-weight: 500;
    color: var(--muted-foreground);
    text-align: left;
}

.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 6rem;
}
.cal-day {
    padding: 0.45rem 0.5rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--card);
    min-width: 0;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day-other { background: hsl(215, 20%, 97%); }
.cal-day-other .cal-day-num { color: var(--muted-foreground); }
.cal-day-num {
    font-size: 0.85rem; font-weight: 500; color: var(--foreground);
    line-height: 1;
}
.cal-day-today .cal-day-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--primary); color: var(--primary-foreground);
    font-weight: 600;
}

.cal-event-chip {
    display: block;
    padding: 0.15rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.7rem; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 1px solid transparent;
}
.cal-event-meetings { background: hsl(217, 91%, 94%); color: hsl(217, 70%, 30%); border-color: hsl(217, 91%, 86%); }
.cal-event-regulatory { background: hsl(0, 80%, 95%); color: hsl(0, 60%, 35%); border-color: hsl(0, 80%, 88%); }
.cal-event-education { background: hsl(265, 80%, 95%); color: hsl(265, 50%, 38%); border-color: hsl(265, 80%, 88%); }
.cal-event-deadlines { background: hsl(45, 95%, 90%); color: hsl(32, 75%, 32%); border-color: hsl(45, 95%, 80%); }
.cal-event-elections { background: hsl(170, 70%, 90%); color: hsl(170, 55%, 28%); border-color: hsl(170, 70%, 80%); }
.cal-event-policy-reviews { background: hsl(28, 95%, 90%); color: hsl(22, 70%, 35%); border-color: hsl(28, 95%, 80%); }
/* Cancelled meetings stay on the grid so a date never reads as empty; type colour dropped. */
.cal-event-chip--cancelled {
    background: hsl(220, 15%, 95%); color: hsl(220, 10%, 50%); border-color: hsl(220, 15%, 88%);
    text-decoration: line-through;
}
.cal-event-other { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }

.cal-day-more {
    font-size: 0.7rem; color: var(--muted-foreground);
}

.cal-kpi-row {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
@media (max-width: 1280px) {
    .cal-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .cal-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.cal-kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex; align-items: center; gap: 0.85rem;
}
.cal-kpi-icon {
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex: 0 0 auto;
}
.cal-kpi-icon-meetings { background: hsl(217, 91%, 94%); color: hsl(217, 70%, 30%); }
.cal-kpi-icon-deadlines { background: hsl(0, 80%, 95%); color: hsl(0, 60%, 38%); }
.cal-kpi-icon-education { background: hsl(265, 80%, 95%); color: hsl(265, 50%, 38%); }
.cal-kpi-icon-policy { background: hsl(28, 95%, 92%); color: hsl(22, 70%, 38%); }
.cal-kpi-icon-priority { background: hsl(45, 95%, 90%); color: hsl(32, 75%, 32%); }
.cal-kpi-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cal-kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--foreground); }
.cal-kpi-label { font-size: 0.8rem; color: var(--muted-foreground); }

.cal-overdue-alert {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
    display: flex; align-items: flex-start; gap: 0.85rem;
}
.cal-overdue-icon {
    width: 1.75rem; height: 1.75rem;
    color: var(--muted-foreground);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex: 0 0 auto;
}
.cal-overdue-title { font-weight: 600; color: var(--foreground); }
.cal-overdue-subtitle { color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.15rem; }
.cal-overdue-footer { margin-top: 0.4rem; }

/* Toolbar icon alignment (icons are now inline SVGs, not emoji). */
.cal-toolbar-search-icon { display: inline-flex; align-items: center; }
.cal-type-chip svg, .cal-filters-btn svg, .cal-view-btn svg { flex: none; }
.cal-kpi-icon svg, .cal-overdue-icon svg { flex: none; }

/* ----- Filters panel ----- */
.cal-filters-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem 2rem;
}
@media (max-width: 900px) { .cal-filters-panel { grid-template-columns: 1fr; } }
.cal-filter-group { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.cal-filter-label { font-size: 0.9rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.1rem; }
.cal-filter-check {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.875rem; color: var(--foreground); cursor: pointer;
}
.cal-filter-check input { width: 1rem; height: 1rem; accent-color: var(--primary); cursor: pointer; }
.cal-filter-select { height: 2.5rem; max-width: 100%; }
.cal-legend-item {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.875rem; color: var(--foreground);
}
.cal-legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 9999px; flex: none; }
.cal-legend-dot--meetings { background: hsl(217, 80%, 55%); }
.cal-legend-dot--regulatory { background: hsl(145, 60%, 40%); }
.cal-legend-dot--education { background: hsl(265, 60%, 58%); }
.cal-legend-dot--deadlines { background: var(--accent); }
.cal-legend-dot--elections { background: hsl(170, 65%, 38%); }
.cal-legend-dot--policy-reviews { background: hsl(25, 90%, 53%); }

/* ----- List view (Upcoming Events) ----- */
.cal-list-card { padding: 0; }
.cal-list-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap; padding: 1.1rem 1.25rem 0.75rem;
}
.cal-list-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--foreground); }
.cal-list-monthnav { display: flex; align-items: center; gap: 0.5rem; }
.cal-list-month-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    text-align: center;
    min-width: 7.5em;
}
.cal-list-monthnav .cal-today-link { margin-left: 0.25rem; }
.cal-list-row { cursor: pointer; }
.cal-list-scroll { overflow-x: auto; }
.cal-list-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cal-list-table thead th {
    text-align: left; padding: 0.6rem 1.25rem;
    font-size: 0.78rem; font-weight: 500; color: var(--muted-foreground);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.cal-list-table tbody td {
    padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border);
    color: var(--foreground); vertical-align: middle;
}
.cal-list-table tbody tr:last-child td { border-bottom: 0; }
.cal-list-table tbody tr:hover { background: var(--secondary); }
.cal-list-event-name { font-weight: 600; color: var(--foreground); }
.cal-list-event-loc {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.2rem; font-size: 0.8rem; color: var(--muted-foreground);
}
.cal-list-date { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.cal-list-date-icon { color: var(--muted-foreground); }
.cal-list-date-end { margin-top: 0.15rem; font-size: 0.8rem; color: var(--muted-foreground); }
.cal-list-muted { color: var(--muted-foreground); }
.cal-list-attendees { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted-foreground); }
.cal-list-open { width: 1px; text-align: right; }
.cal-list-open-icon { color: var(--muted-foreground); display: inline-flex; cursor: pointer; }
.cal-list-open-icon:hover { color: var(--primary); }
.cal-list-empty { text-align: center; color: var(--muted-foreground); padding: 1.5rem; }
.cal-list-footer {
    padding: 0.75rem 1.25rem; font-size: 0.85rem; color: var(--muted-foreground);
    border-top: 1px solid var(--border);
}

/* Type badge (list "Type" column) */
.cal-type-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 500; white-space: nowrap;
    border: 1px solid transparent;
}
.cal-type-badge--meeting { background: hsl(217, 91%, 95%); color: hsl(217, 70%, 38%); border-color: hsl(217, 80%, 86%); }
.cal-type-badge--regulatory { background: hsl(145, 60%, 94%); color: hsl(145, 55%, 30%); border-color: hsl(145, 50%, 82%); }
.cal-type-badge--education { background: hsl(265, 80%, 96%); color: hsl(265, 50%, 45%); border-color: hsl(265, 70%, 88%); }
.cal-type-badge--deadline { background: hsl(45, 95%, 92%); color: hsl(32, 80%, 38%); border-color: hsl(45, 90%, 80%); }
.cal-type-badge--election { background: hsl(170, 65%, 93%); color: hsl(170, 60%, 28%); border-color: hsl(170, 55%, 80%); }
.cal-type-badge--policy-review { background: hsl(28, 95%, 93%); color: hsl(22, 80%, 42%); border-color: hsl(28, 90%, 82%); }
.cal-type-badge--other { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }

/* Priority badge */
.cal-priority-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 500; white-space: nowrap;
}
.cal-priority-badge--high { background: hsl(0, 80%, 96%); color: hsl(0, 65%, 45%); }
.cal-priority-badge--medium { background: hsl(38, 92%, 92%); color: hsl(32, 80%, 38%); }
.cal-priority-badge--low { background: var(--secondary); color: var(--muted-foreground); }

/* ----- Overdue Policy Reviews card ----- */
.cal-overdue-card {
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
}
.cal-overdue-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.cal-overdue-card .cal-overdue-icon { color: hsl(0, 70%, 50%); width: auto; height: auto; flex: none; margin-top: 0.1rem; }
.cal-overdue-card .cal-overdue-title { color: hsl(0, 65%, 42%); font-weight: 600; }
.cal-overdue-card .cal-overdue-subtitle { color: hsl(0, 40%, 45%); }
.cal-overdue-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.9rem; }
.cal-overdue-item {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--card);
    border: 1px solid var(--status-danger-bg);
    border-radius: 0.55rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem; color: var(--foreground); text-decoration: none;
    width: fit-content; max-width: 100%;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cal-overdue-item:hover { border-color: hsl(0, 70%, 80%); box-shadow: var(--shadow-sm); }
.cal-overdue-item:hover .cal-overdue-item-link { color: var(--primary); }
.cal-overdue-item-icon { color: hsl(0, 70%, 50%); display: inline-flex; flex: none; }
.cal-overdue-item-name { font-weight: 600; }
.cal-overdue-item-version {
    display: inline-flex; align-items: center;
    padding: 0.05rem 0.45rem; border-radius: 0.3rem;
    font-size: 0.72rem; font-weight: 600;
    background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border);
}
.cal-overdue-item-meta { color: var(--muted-foreground); font-size: 0.8rem; }
.cal-overdue-item-link { color: var(--muted-foreground); display: inline-flex; cursor: pointer; margin-left: 0.15rem; }
.cal-overdue-item-link:hover { color: var(--primary); }

/* Calendar grid chips are buttons (open the details dialog). */
button.cal-event-chip { width: 100%; text-align: left; cursor: pointer; font-family: inherit; line-height: 1.3; }
button.cal-event-chip:hover { filter: brightness(0.96); }

/* ----- Event details dialog ----- */
.cal-details-badges { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-details-exam {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 600;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.cal-details-status {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 500; white-space: nowrap;
    border: 1px solid transparent;
}
.cal-details-status--complete { background: rgba(16, 185, 129, 0.15); color: hsl(160, 84%, 25%); border-color: rgba(16, 185, 129, 0.3); }
.cal-details-status--pending { background: rgba(234, 179, 8, 0.18); color: hsl(32, 95%, 30%); border-color: rgba(234, 179, 8, 0.35); }
.cal-details-status--cancelled { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.cal-details-list { margin: 0; }
.cal-details-row {
    display: grid; grid-template-columns: 130px 1fr; gap: 0.75rem;
    padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.cal-details-row:last-child { border-bottom: 0; }
.cal-details-row dt { color: var(--muted-foreground); font-size: 0.85rem; }
.cal-details-row dd { margin: 0; color: var(--foreground); font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.cal-details-icon { color: var(--muted-foreground); flex: none; }
.cal-details-desc { margin-top: 1rem; }
.cal-details-desc-label { font-size: 0.85rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
.cal-details-desc p { margin: 0; font-size: 0.9rem; color: var(--foreground); line-height: 1.5; }

/* ----- Create / edit event page ----- */
.cal-editor-page { display: flex; flex-direction: column; gap: 1.25rem; max-width: 820px; }
.cal-editor-back {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--muted-foreground); font-size: 0.85rem; text-decoration: none; margin-bottom: 0.5rem;
}
.cal-editor-back:hover { color: var(--foreground); }
.cal-editor-header h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.cal-editor-subtitle { color: var(--muted-foreground); font-size: 0.9rem; margin: 0.15rem 0 0; }
.cal-req { color: var(--destructive); }
.cal-editor-hint-error { font-size: 0.78rem; color: var(--destructive); margin-top: 0.15rem; }
.cal-editor-check {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.875rem; color: var(--foreground); cursor: pointer; margin: 0.25rem 0 0.5rem;
}
.cal-editor-check input { width: 1rem; height: 1rem; accent-color: var(--primary); cursor: pointer; }
.cal-editor-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.cal-editor-delete { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 40%, var(--border)); }
.cal-editor-delete:hover { background: color-mix(in srgb, var(--destructive) 8%, transparent); }

/* ===== Governance domain pages =====
   Shared CSS for /governance/{capital-solvency,asset-quality,earnings,liquidity,...}
   Prefix map (grep .gov-{prefix}-* in Components/Governance/ for usage):
     .gov-domain-*          — page chrome (GovernanceDomainLayout: title, subtitle, status pill, configure button)
     .gov-kpi-*             — KPI tile (DomainKpiTile: name, value, trend, target, linked-goal chips, edit gear)
     .gov-chart-*           — TrendLineChart inline SVG (line, area fill, axes, gridlines, thresholds, tooltip, cursor)
     .gov-classification-*  — Capital's PCA ladder (ClassificationCard)
     .gov-aging-*           — bucketed-breakdown card with progress bars (AgingBreakdownCard — Asset Quality, Liquidity)
     .gov-concentration-*   — Asset Quality concentration table (inline on AssetQuality.razor)
     .gov-growth-*          — Capital's Growth Impact 4-scenario strip (inline on CapitalSolvency.razor)
     .gov-donut-*           — DonutChart (Earnings' Expense Breakdown)
     .gov-content-2col[-equal] — 2-column row layout for chart + right-side card                                          */

.gov-domain-layout {
    display: flex; flex-direction: column; gap: 1.25rem;
}

.gov-domain-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.gov-domain-title h1 { margin: 0 0 0.15rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.gov-domain-title p { margin: 0; font-size: 0.9rem; }
.gov-domain-h1 { display: inline-flex; align-items: center; gap: 0.55rem; }
.gov-domain-title-icon { display: inline-flex; color: var(--foreground); flex: none; }
.gov-domain-header-actions {
    display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
}
.gov-domain-configure-btn { gap: 0.35rem; }

.gov-domain-status-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.85rem; border-radius: 9999px;
    font-size: 0.8rem; font-weight: 600;
    border: 1px solid transparent;
}
.gov-domain-status-pill .gov-domain-status-icon { flex: none; }
.gov-domain-status-pill.success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.gov-domain-status-pill.success .gov-domain-status-icon { color: var(--status-success); }
.gov-domain-status-pill.warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.gov-domain-status-pill.warn .gov-domain-status-icon { color: var(--status-warning); }
.gov-domain-status-pill.danger {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}
.gov-domain-status-pill.danger .gov-domain-status-icon { color: var(--status-danger); }

.gov-kpi-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 1280px) { .gov-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gov-kpi-row { grid-template-columns: 1fr; } }

.gov-kpi-tile {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem 2rem;  /* extra bottom padding so the edit gear has clearance */
    display: flex; flex-direction: column; gap: 0.55rem;
    position: relative;  /* positioning context for .gov-kpi-edit-btn */
}
.gov-kpi-tile-compact { padding: 1rem 1.1rem; }
.gov-kpi-tile-success { border-left: 4px solid var(--status-success); }
.gov-kpi-tile-warn    { border-left: 4px solid var(--status-warning); }
.gov-kpi-tile-caution { border-left: 4px solid var(--status-caution); }
.gov-kpi-tile-danger  { border-left: 4px solid var(--status-danger); }

.gov-kpi-tile-header {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.gov-kpi-name {
    font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground);
    display: inline-flex; align-items: center; gap: 0.35rem;
}
/* Help icon next to metric name. Inherits muted-foreground colour at low
   opacity; hover brings it to full opacity. Browser-native title tooltip
   shows the HelpText explainer. */
.gov-kpi-help {
    display: inline-flex; align-items: center;
    color: var(--muted-foreground); opacity: 0.6;
    cursor: help;
    transition: opacity 0.15s ease;
}
.gov-kpi-help:hover { opacity: 1; }
.gov-kpi-pill {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    border: 1px solid transparent;
}
.gov-kpi-pill-success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.gov-kpi-pill-warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.gov-kpi-pill-caution {
    background: rgba(249, 115, 22, 0.18); color: hsl(25, 95%, 35%);
    border-color: rgba(249, 115, 22, 0.35);
}
.gov-kpi-pill-danger {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}

.gov-kpi-value-row {
    display: flex; align-items: baseline; gap: 0.35rem;
}
.gov-kpi-value {
    font-size: 2rem; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1;
}
.gov-kpi-unit { font-size: 0.95rem; color: var(--muted-foreground); }

.gov-kpi-trend {
    font-size: 0.78rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.gov-kpi-trend.up   { color: var(--status-success); }
.gov-kpi-trend.down { color: var(--status-danger); }
.gov-kpi-trend-icon { flex: none; }
.gov-kpi-trend .muted { color: var(--muted-foreground); font-weight: 500; }

.gov-kpi-meta-row {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding-top: 0.4rem; border-top: 1px dashed var(--border);
}
.gov-kpi-meta-line { display: flex; justify-content: space-between; gap: 0.4rem; }

.gov-kpi-linked-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    background: var(--secondary); color: var(--secondary-foreground);
    border: 1px solid var(--border); border-radius: 9999px;
    font-size: 0.72rem; font-weight: 500;
    width: fit-content;
}
.gov-kpi-linked-btn:hover { background: var(--card); color: var(--foreground); }

.gov-kpi-linked-goals {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding-top: 0.4rem; border-top: 1px dashed var(--border);
}
.gov-kpi-linked-goals-title {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 600;
    color: var(--muted-foreground);
    text-transform: none; letter-spacing: 0;
}
.gov-kpi-linked-goals-chips {
    display: flex; flex-direction: column; gap: 0.3rem;
}
.gov-kpi-linked-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem; font-weight: 500;
    width: fit-content; max-width: 100%;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.gov-kpi-linked-chip-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 14rem;
}
.gov-kpi-linked-chip-icon {
    flex: none; opacity: 0; transition: opacity 0.15s ease;
}
.gov-kpi-linked-chip:hover .gov-kpi-linked-chip-icon { opacity: 0.8; }

.gov-kpi-linked-chip-success {
    background: var(--status-success-bg); color: var(--status-success-fg);
}
.gov-kpi-linked-chip-warning {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
}
.gov-kpi-linked-chip-danger {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
}
.gov-kpi-linked-chip-neutral {
    background: var(--secondary); color: var(--secondary-foreground);
}

.gov-kpi-edit-btn {
    position: absolute; right: 0.6rem; bottom: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted-foreground); opacity: 0.4;
    cursor: not-allowed;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.gov-kpi-edit-btn:not(:disabled) { cursor: pointer; }
.gov-kpi-edit-btn:not(:disabled):hover {
    opacity: 1; color: var(--foreground); background: var(--secondary);
}

.gov-content-2col {
    display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;
}
/* Modifier — equal-width columns. Used when the right-side card has its own
   wide content (e.g. Asset Quality's Delinquency Aging with progress bars). */
.gov-content-2col.gov-content-2col-equal {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 1280px) { .gov-content-2col { grid-template-columns: 1fr; } }

.gov-trend-chart { /* card styles inherited */ }
.gov-chart-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin-bottom: 0.5rem;
}
.gov-chart-title-icon { color: var(--status-info); }
.gov-chart-svg { width: 100%; height: auto; display: block; }
.gov-chart-line {
    stroke: var(--status-info); fill: none; stroke-width: 2;
    stroke-linejoin: round; stroke-linecap: round;
}
.gov-chart-point {
    /* Hollow ring by default (white fill + tone stroke), solid on hover. Matches
       recharts' default dot styling. Series-2 variants below override stroke. */
    fill: var(--card, #fff); stroke: var(--status-info);
    transform-box: fill-box;
    transform-origin: center;
}

.gov-chart-axis {
    stroke: #666; stroke-width: 1; fill: none;
}

.gov-chart-gridline-h,
.gov-chart-gridline-v {
    stroke: #ccc; stroke-dasharray: 3 3; stroke-width: 1; fill: none;
}

.gov-chart-threshold {
    stroke-dasharray: 5 5; stroke-width: 1.5; fill: none;
}
.gov-chart-threshold-danger  { stroke: var(--status-danger); }
.gov-chart-threshold-warning { stroke: var(--status-warning, #f59e0b); }
.gov-chart-threshold-info    { stroke: var(--status-info); }
.gov-chart-threshold-success { stroke: var(--status-success); }
.gov-chart-threshold-label {
    font-size: 9px; fill: var(--muted-foreground); font-weight: 500;
}
.gov-chart-axis-label {
    font-size: 11px; fill: var(--muted-foreground);
}

.gov-chart-wrap { position: relative; }

.gov-chart-cursor {
    stroke: #999; stroke-width: 1; opacity: 0;
    pointer-events: none; transition: opacity 0.1s ease;
}
.gov-chart-cursor.visible { opacity: 1; }

.gov-chart-svg .gov-chart-point {
    transition: transform 0.1s ease, stroke-width 0.1s ease;
    pointer-events: all;
    stroke-width: 1;
}

/* Active (hovered) dot — solid fill with white halo stroke matching recharts. */
.gov-chart-svg .gov-chart-point.active {
    transform: scale(1.5);
    fill: var(--status-info);
    stroke: var(--card, #fff);
    stroke-width: 1.5;
}
.gov-chart-svg .gov-chart-point-success.active { fill: var(--status-success); }
.gov-chart-svg .gov-chart-point-info.active    { fill: var(--status-info); }
.gov-chart-svg .gov-chart-point-warn.active    { fill: var(--status-warning); }
.gov-chart-svg .gov-chart-point-danger.active  { fill: var(--status-danger); }

.gov-chart-tooltip {
    position: absolute; left: 0; top: 0; pointer-events: none;
    background: var(--background, #fff); color: var(--foreground, #111);
    border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-size: 0.8125rem; line-height: 1.4;
    min-width: 120px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.1s ease;
    z-index: 10;
}
.gov-chart-tooltip.visible { opacity: 1; visibility: visible; }
.gov-chart-tooltip-label {
    font-weight: 600; color: var(--foreground, #111); margin-bottom: 0.15rem;
}
/* Tooltip rows — one per series at the hovered x-tick. Each row's text colour
   matches the series line so the hovered metric is unambiguous. */
.gov-chart-tooltip-rows { display: flex; flex-direction: column; gap: 0.1rem; }
.gov-chart-tooltip-row {
    display: flex; align-items: baseline; gap: 0.1rem;
    color: var(--status-info); font-weight: 500;
}
.gov-chart-tooltip-row .gov-chart-tooltip-series,
.gov-chart-tooltip-row .gov-chart-tooltip-sep,
.gov-chart-tooltip-row .gov-chart-tooltip-number { color: inherit; }
.gov-chart-tooltip-row-primary { color: var(--primary); }
.gov-chart-tooltip-row-info    { color: var(--status-info); }
.gov-chart-tooltip-row-success { color: var(--status-success); }
.gov-chart-tooltip-row-warn    { color: var(--status-warning); }
.gov-chart-tooltip-row-danger  { color: var(--status-danger); }

.gov-classification { /* card styles inherited */ }
.gov-classification-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin-bottom: 0.5rem;
}
.gov-classification-title-icon { color: var(--muted-foreground); }
.gov-classification-list {
    display: flex; flex-direction: column; gap: 0.45rem;
}
.gov-classification-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card);
}
.gov-classification-row-text { display: flex; flex-direction: column; gap: 0.15rem; }
.gov-classification-label { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.gov-classification-range { font-size: 0.75rem; color: var(--muted-foreground); }
.gov-classification-current {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
}
.gov-classification-current .gov-classification-label { color: var(--status-success-fg); }
.gov-classification-current-pill {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    background: var(--status-success); color: #fff;
    font-size: 0.7rem; font-weight: 600;
}

.gov-growth { /* card styles inherited */ }
.gov-growth-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin-bottom: 0.25rem;
}
.gov-growth-title-icon { color: var(--status-warning); }
.gov-growth-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 1024px) { .gov-growth-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gov-growth-row { grid-template-columns: 1fr; } }
.gov-growth-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    text-align: center;
}
.gov-growth-label {
    font-size: 0.78rem; font-weight: 500; color: var(--muted-foreground);
}
.gov-growth-value {
    font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; color: var(--foreground);
}
.gov-growth-status {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    border: 1px solid transparent;
}
.gov-growth-status-success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.gov-growth-status-warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.gov-growth-status-danger {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}
.gov-growth-status-neutral {
    background: var(--secondary); color: var(--secondary-foreground);
    border-color: var(--border);
}

.gov-aging-card { /* card styles inherited */ }
.gov-aging-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 0.75rem;
}
.gov-aging-card-header {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
}
.gov-aging-card-icon { color: var(--status-warning); display: inline-flex; }
.gov-aging-card-title { font-size: 1.05rem; font-weight: 600; }
.gov-aging-list { display: flex; flex-direction: column; gap: 0.85rem; }
.gov-aging-row { display: flex; flex-direction: column; gap: 0.35rem; }
.gov-aging-row-line1 {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.5rem;
}
.gov-aging-row-label { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.gov-aging-row-amount {
    font-size: 0.85rem; color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}
.gov-aging-row-percent { color: var(--muted-foreground); margin-left: 0.25rem; }
.gov-aging-progress-track {
    background: var(--secondary); height: 8px; border-radius: 4px; overflow: hidden;
}
.gov-aging-progress-fill {
    height: 100%; transition: width 0.2s ease;
    background: var(--primary);
}
.gov-aging-progress-fill-primary { background: var(--primary); }
.gov-aging-progress-fill-info    { background: var(--status-info); }
.gov-aging-progress-fill-success { background: var(--status-success); }
.gov-aging-progress-fill-warn    { background: var(--status-warning); }
.gov-aging-progress-fill-danger  { background: var(--status-danger); }
.gov-aging-total {
    border-top: 1px dashed var(--border);
    padding-top: 0.85rem; margin-top: 0.25rem;
}
.gov-aging-total .gov-aging-row-label { font-weight: 700; color: var(--foreground); }
.gov-aging-total .gov-aging-row-amount { color: var(--foreground); font-weight: 600; }
.gov-aging-total .gov-aging-row-percent { color: var(--foreground); }

.gov-concentration { /* card styles inherited */ }
.gov-concentration-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin-bottom: 0.75rem;
}
.gov-concentration-title-icon { color: var(--status-info); }
.gov-concentration-table { width: 100%; border-collapse: collapse; }
.gov-concentration-table thead th {
    text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--muted-foreground); font-weight: 600;
    padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--border);
}
.gov-concentration-table tbody th,
.gov-concentration-table td {
    padding: 0.65rem 0.5rem 0.65rem 0; border-bottom: 1px solid var(--border);
    font-size: 0.85rem; color: var(--foreground); text-align: left; font-weight: 400;
}
.gov-concentration-table tbody tr:last-child th,
.gov-concentration-table tbody tr:last-child td { border-bottom: none; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.gov-concentration-table td.tabular-nums { font-variant-numeric: tabular-nums; }
.gov-concentration-utilization {
    display: flex; align-items: center; gap: 0.5rem;
}
.gov-concentration-utilization .gov-aging-progress-track {
    flex: 1; max-width: 100px;
}
.gov-concentration-utilization-pct {
    font-size: 0.75rem; color: var(--muted-foreground);
    min-width: 2.5rem; text-align: right;
}

.gov-chart-line-success { stroke: var(--status-success); }
.gov-chart-line-info    { stroke: var(--status-info); }
.gov-chart-line-warn    { stroke: var(--status-warning); }
.gov-chart-line-danger  { stroke: var(--status-danger); }

.gov-chart-point-success { fill: var(--card, #fff); stroke: var(--status-success); }
.gov-chart-point-info    { fill: var(--card, #fff); stroke: var(--status-info); }
.gov-chart-point-warn    { fill: var(--card, #fff); stroke: var(--status-warning); }
.gov-chart-point-danger  { fill: var(--card, #fff); stroke: var(--status-danger); }

.gov-donut-card { /* card styles inherited */ }
.gov-donut-card-header {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin-bottom: 0.75rem;
}
.gov-donut-card-icon { color: var(--status-info); display: inline-flex; }
.gov-donut-card-title { font-size: 1.05rem; font-weight: 600; }

.gov-donut-body {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.gov-donut-svg {
    width: 100%; max-width: 180px; height: auto; flex-shrink: 0;
}
.gov-donut-slice {
    transition: opacity 0.15s ease;
}
.gov-donut-slice-info    { fill: var(--status-info); }
.gov-donut-slice-success { fill: var(--status-success); }
.gov-donut-slice-warn    { fill: var(--status-warning); }
.gov-donut-slice-danger  { fill: var(--status-danger); }
.gov-donut-slice-neutral { fill: var(--muted-foreground); }

.gov-donut-legend {
    list-style: none; padding: 0; margin: 0; flex: 1; min-width: 140px;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.gov-donut-legend-row {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.85rem; color: var(--foreground);
}
.gov-donut-legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--muted-foreground); flex-shrink: 0;
}
.gov-donut-legend-dot.gov-donut-slice-info    { background: var(--status-info); }
.gov-donut-legend-dot.gov-donut-slice-success { background: var(--status-success); }
.gov-donut-legend-dot.gov-donut-slice-warn    { background: var(--status-warning); }
.gov-donut-legend-dot.gov-donut-slice-danger  { background: var(--status-danger); }
.gov-donut-legend-dot.gov-donut-slice-neutral { background: var(--muted-foreground); }
.gov-donut-legend-label { flex: 1; }
.gov-donut-legend-percent {
    color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}

.gov-chart-line-fill { stroke: none; }
.gov-chart-line-fill-info    { fill: var(--status-info);    opacity: 0.10; }
.gov-chart-line-fill-success { fill: var(--status-success); opacity: 0.10; }
.gov-chart-line-fill-warn    { fill: var(--status-warning); opacity: 0.10; }
.gov-chart-line-fill-danger  { fill: var(--status-danger);  opacity: 0.10; }

.gov-kpi-trend-unit { margin-left: 0.15rem; }

/* ----- User menu (top-right) ----- */
.user-menu { position: relative; }
.user-menu-trigger {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.6rem; border-radius: 9999px;
    border: 1px solid var(--border); background: var(--card);
    color: var(--foreground); cursor: pointer; font-family: inherit;
}
.user-menu-trigger:hover { background: var(--secondary); }
.user-menu-avatar {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 9999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
    color: var(--accent-foreground); font-weight: 700; font-size: 0.72rem; flex-shrink: 0;
}
.user-menu-avatar-lg { width: 40px; height: 40px; font-size: 0.95rem; }
.user-menu-trigger-text {
    display: none; flex-direction: column; line-height: 1.15;
    text-align: left; max-width: 160px;
}
@media (min-width: 900px) { .user-menu-trigger-text { display: inline-flex; } }
.user-menu-name { font-size: 0.85rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-email { font-size: 0.7rem; color: var(--muted-foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-chevron { color: var(--muted-foreground); font-size: 0.7rem; }
.user-menu-panel {
    position: absolute; top: calc(100% + 0.5rem); right: 0;
    min-width: 280px; max-width: 320px;
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: 0.5rem; z-index: 50;
}
.user-menu-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.5rem;
}
.user-menu-divider {
    height: 1px; background: var(--border); margin: 0.35rem 0;
}
.user-menu-item {
    display: flex; align-items: flex-start; gap: 0.65rem;
    padding: 0.5rem 0.5rem; border-radius: 0.45rem;
    color: var(--foreground); text-decoration: none;
    border: 0; background: transparent; width: 100%;
    text-align: left; cursor: pointer; font-family: inherit;
    font-size: 0.85rem;
}
.user-menu-item:hover { background: var(--secondary); }
.user-menu-item-label { font-weight: 500; }
.user-menu-item-sub { font-size: 0.72rem; color: var(--muted-foreground); }
.user-menu-item-danger { color: var(--destructive); }
.user-menu-item-danger:hover { background: var(--status-danger-bg); }
.user-menu-icon {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--secondary); color: var(--foreground);
    flex-shrink: 0; font-size: 0.85rem;
}
.user-menu-form { margin: 0; padding: 0; }

/* ----- Global header search ----- */
.global-search { position: relative; flex: 1; max-width: 460px; z-index: 50; }
.global-search-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.global-search-panel { position: absolute; top: calc(100% + 0.4rem); left: 0; width: 100%; min-width: 320px; max-width: 480px; max-height: 60vh; overflow-y: auto; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 0.6rem; box-shadow: 0 10px 30px rgba(15,23,42,0.18); padding: 0.4rem; z-index: 50; }
.global-search-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); padding: 0.5rem 0.5rem 0.25rem; }
.global-search-item .user-menu-item-label, .global-search-item .user-menu-item-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.global-search-item.is-active { background: var(--secondary); }
.global-search-empty { padding: 0.85rem 0.6rem; font-size: 0.85rem; color: var(--muted-foreground); }

/* ----- Admin matrix tables ----- */
.matrix-wrap { overflow-x: auto; }
.tenant-retired > summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 600; }
.tenant-retired > summary .muted { font-weight: 400; }
.tenant-retired[open] > summary { border-bottom: 1px solid var(--border); }

/* Opt-in scroll region for the big role/feature matrices. A sticky cell anchors to its
   nearest scrollport, so the header only pins if the WRAPPER scrolls rather than the page
   — which needs a height cap here. Plain .matrix-wrap is left alone: a dozen small tables
   share it and a forced height would strand them in empty space. */
.matrix-wrap--sticky {
    overflow: auto;
    max-height: calc(100vh - 15rem);
    min-height: 20rem;
}
/* Sticky cells lose their borders under border-collapse: collapse — the table owns the
   border there, so it scrolls away from the pinned cell. Separate borders inside only. */
.matrix-wrap--sticky .matrix { border-collapse: separate; border-spacing: 0; }

.matrix {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
    /* Height of the first header row. The second header row sticks directly beneath it,
       so the two must agree — keep them tied to this one value. */
    --matrix-head-h: 2.9rem;
    --matrix-band: color-mix(in srgb, var(--foreground) 4%, transparent);
    --matrix-hover: color-mix(in srgb, var(--foreground) 6%, transparent);
    --matrix-hover-band: color-mix(in srgb, var(--foreground) 10%, transparent);
}
.matrix th, .matrix td {
    border-bottom: 1px solid var(--border);
    padding: 0.55rem 0.7rem; text-align: left;
}
.matrix th {
    background: var(--secondary);
    font-weight: 600; font-size: 0.78rem;
    color: var(--muted-foreground);
    text-transform: uppercase; letter-spacing: 0.05em;
    position: sticky; top: 0; z-index: 3;
}

/* Paired matrices carry a second header row (R / RW) that pins under the first. */
.matrix-paired thead tr:first-child th { height: var(--matrix-head-h); }
.matrix-paired thead tr:nth-child(2) th { top: var(--matrix-head-h); }
.matrix-role-head { height: 100%; line-height: 1.1; }
.matrix-role-del {
    width: 18px; height: 18px; min-width: 18px;
    padding: 0; line-height: 1; font-size: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Frozen first column. Must be opaque, or scrolled cells show through it. */
.matrix-wrap--sticky .matrix th:first-child,
.matrix-wrap--sticky .matrix tbody td:first-child:not(.matrix-section) {
    position: sticky; left: 0; z-index: 2;
    border-right: 1px solid var(--border);
}
.matrix-wrap--sticky .matrix tbody td:first-child:not(.matrix-section) { background: var(--card); }
.matrix-wrap--sticky .matrix thead th:first-child { z-index: 4; }
/* A category row is one full-width cell, so its label would scroll off to the left.
   Pin the label itself rather than the cell. */
.matrix-wrap--sticky .matrix .matrix-section > span { position: sticky; left: 0.7rem; }

/* Alternate a tint per role/tier so a pair of R/RW columns reads as one group and the
   eye can follow a column down. Applied as a class, not nth-child: standalone rows span
   two columns with a single cell, which would throw the arithmetic off. */
.matrix th.matrix-band { background: color-mix(in srgb, var(--foreground) 5%, var(--secondary)); }
.matrix td.matrix-band { background: var(--matrix-band); }
.matrix th.matrix-rotate {
    writing-mode: vertical-rl; transform: rotate(180deg);
    height: 140px; vertical-align: bottom; text-align: left;
    padding: 0.5rem 0.25rem; min-width: 32px; max-width: 32px;
    text-transform: none; letter-spacing: 0;
}
/* Hover paints the cells, not the row: banded cells and the frozen first column carry
   their own background and would otherwise sit on top of a row-level highlight. */
.matrix tbody tr:hover > td { background: var(--matrix-hover); }
.matrix tbody tr:hover > td.matrix-band { background: var(--matrix-hover-band); }
.matrix-wrap--sticky .matrix tbody tr:hover > td:first-child:not(.matrix-section) {
    background: color-mix(in srgb, var(--foreground) 6%, var(--card));
}
.matrix .matrix-row-label {
    font-weight: 600; min-width: 220px;
}
.matrix .matrix-row-sub {
    display: block; font-weight: 400; font-size: 0.75rem;
    color: var(--muted-foreground); margin-top: 0.15rem;
}
.matrix .matrix-subhead {
    text-align: center; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.04em; color: var(--muted-foreground); padding-top: 0; padding-bottom: 0.35rem;
}
.matrix .matrix-cell { text-align: center; }
.matrix .matrix-cell input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; }
.matrix .matrix-cell input[type="checkbox"] { transform: scale(1.1); cursor: pointer; }
.matrix .matrix-section {
    background: var(--background);
    font-weight: 700; font-size: 0.75rem;
    color: var(--muted-foreground);
    text-transform: uppercase; letter-spacing: 0.06em;
}

.admin-tile-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.admin-tile {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1.1rem; border-radius: 0.6rem;
    background: var(--card); border: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.admin-tile:hover {
    transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.admin-tile-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: grid; place-items: center; font-size: 1rem;
    background: var(--secondary); color: var(--foreground);
}
.admin-tile-title { font-weight: 600; font-size: 1rem; }
.admin-tile-desc { font-size: 0.83rem; color: var(--muted-foreground); }

.help-faq summary {
    list-style: none; cursor: pointer; padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::before {
    content: "▸"; display: inline-block; margin-right: 0.5rem;
    color: var(--muted-foreground); transition: transform 120ms;
}
.help-faq details[open] summary::before { transform: rotate(90deg); }
.help-faq details > div { padding: 0.5rem 1rem 1rem 2rem; color: var(--muted-foreground); font-size: 0.88rem; }

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
    display: grid; place-items: center; padding: 1rem; z-index: 100;
}
.modal-backdrop > .card { max-height: 90vh; overflow-y: auto; }

.toggle-row { display: flex; align-items: center; gap: 0.6rem; }
.toggle-row input[type="checkbox"] { transform: scale(1.1); cursor: pointer; }
.toggle-row label { cursor: pointer; }

/* ============================================================
   Board Management page — design ported from Lovable prototype.
   All classes prefixed `.bm-` to avoid clashing with global utils.
   ============================================================ */

.bm-hero {
    background: linear-gradient(135deg, var(--status-info-bg), hsl(232, 90%, 96%));
    border: 2px solid var(--status-info-bg);
    border-radius: 1rem;
    padding: 2rem;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.5rem; flex-wrap: wrap;
}
.bm-hero-title { font-size: 2.25rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.25rem; letter-spacing: -0.02em; }
.bm-hero-subtitle { font-size: 1.125rem; color: hsl(220, 15%, 40%); margin: 0 0 1.25rem; }

.bm-stepper { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bm-step { display: flex; align-items: center; gap: 0.5rem; }
.bm-step-num {
    width: 2rem; height: 2rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: hsl(220, 15%, 80%); color: #fff;
    font-weight: 700; font-size: 0.8rem;
}
.bm-step--current .bm-step-num { background: var(--status-info); }
.bm-step--done    .bm-step-num { background: var(--status-success); }
.bm-step-label { font-size: 1rem; color: hsl(220, 15%, 50%); }
.bm-step--current .bm-step-label { color: var(--foreground); font-weight: 500; }
.bm-step-arrow { color: hsl(220, 15%, 65%); display: inline-flex; align-items: center; }

.bm-btn-success {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600;
    background: var(--status-success); color: #fff;
    border: none; border-radius: 0.75rem; cursor: pointer;
    box-shadow: 0 4px 10px var(--status-success-border);
    transition: background 120ms ease;
}
.bm-btn-success:hover { background: var(--status-success-fg); }
.bm-btn-success:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Tab bar ---------- */
.bm-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 0.25rem; padding: 0.5rem;
    background: hsl(220, 15%, 95%); border-radius: 0.75rem;
}
.bm-tab-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.65rem 1rem;
    background: transparent; color: hsl(220, 15%, 40%);
    border: none; border-radius: 0.5rem; cursor: pointer;
    font-size: 1rem; font-weight: 600;
    transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
}
.bm-tab-btn:hover { color: var(--foreground); }
.bm-tab-btn--active {
    background: var(--card); color: var(--foreground);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.bm-tab-icon { display: inline-flex; }

/* ---------- Section card + toolbar ---------- */
.bm-section-card {
    background: var(--card); color: var(--card-foreground);
    border: 2px solid var(--border); border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.bm-section-header {
    background: hsl(220, 15%, 97%);
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.bm-section-title { font-size: 1.4rem; font-weight: 700; color: var(--foreground); margin: 0; }
.bm-section-body { padding: 1.5rem; }

.bm-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.bm-toolbar select{
    width: revert;
}

.bm-search {
    position: relative;
}
.bm-search-icon {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: hsl(220, 15%, 55%); pointer-events: none; display: inline-flex;
}
.bm-search input {
    padding: 0.65rem 0.75rem 0.65rem 2.5rem;
    height: 2.75rem; width: 18rem;
    border: 2px solid var(--border); border-radius: 0.75rem;
    background: var(--card); color: var(--foreground);
    font-size: 0.95rem;
}
.bm-search input:focus { outline: none; border-color: var(--status-info); }

.bm-filter-select {
    height: 2.75rem; padding: 0 0.85rem;
    border: 2px solid var(--border); border-radius: 0.5rem;
    background: var(--card); color: var(--foreground);
    font-size: 0.95rem; min-width: 11rem;
}

.bm-view-toggle {
    display: inline-flex; border: 2px solid var(--border); border-radius: 0.5rem;
    overflow: hidden;
}
.bm-view-toggle-btn {
    width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card); color: hsl(220, 15%, 45%);
    border: none; cursor: pointer;
}
.bm-view-toggle-btn:hover { background: hsl(220, 15%, 95%); color: var(--foreground); }
.bm-view-toggle-btn--active { background: var(--primary); color: #fff; }
.bm-view-toggle-btn--active:hover { background: hsl(220, 35%, 22%); color: #fff; }
.bm-view-toggle-btn--labeled {
    width: auto; height: 2.25rem; gap: 0.4rem; padding: 0 0.8rem;
    font-size: 0.82rem; font-weight: 600;
}

/* ---------- Member card grid ---------- */
.bm-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .bm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bm-grid { grid-template-columns: repeat(3, 1fr); } }

.bm-member-card {
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: 0.6rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 120ms ease, transform 120ms ease;
    display: flex; flex-direction: column;
}
.bm-member-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.bm-member-card-header { padding: 1.25rem 1.25rem 0.5rem; }
.bm-member-card-body { padding: 0 1.25rem 1.25rem; }

.bm-avatar {
    width: 3rem; height: 3rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bm-avatar--blue   { background: var(--status-info-bg); color: var(--status-info-fg); }
.bm-avatar--purple { background: hsl(262, 90%, 92%); color: hsl(262, 70%, 40%); }
.bm-avatar--amber  { background: var(--status-warning-bg);  color: hsl(28, 80%, 35%); }
.bm-avatar--rose   { background: hsl(348, 90%, 92%); color: hsl(348, 70%, 40%); }
.bm-avatar--green  { background: var(--status-success-bg); color: var(--status-success-fg); }
.bm-avatar--slate  { background: hsl(215, 20%, 90%); color: hsl(215, 25%, 35%); }

.bm-member-name { font-size: 1.05rem; font-weight: 600; color: var(--foreground); margin: 0; }
.bm-member-role { font-size: 0.85rem; color: var(--muted-foreground); margin: 0.15rem 0 0; }

.bm-meta-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: var(--muted-foreground);
    margin-top: 0.4rem;
}
.bm-meta-row svg { flex-shrink: 0; }
.bm-meta-row .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bm-chips-label { font-size: 0.8rem; font-weight: 600; color: var(--foreground); margin: 0.75rem 0 0.4rem; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Badge variants (extending the design — distinct from existing .badge) */
.bm-badge {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600; border: 1px solid transparent;
    background: hsl(220, 15%, 92%); color: hsl(220, 15%, 30%);
}
.bm-badge--outlined { background: transparent; border-color: currentColor; }
.bm-badge--board { color: var(--status-info-fg); }
.bm-badge--chair { color: var(--status-warning-fg); }
.bm-badge--external { color: hsl(262, 70%, 40%); }
.bm-badge--inactive { background: hsl(220, 15%, 94%); color: hsl(220, 15%, 45%); border-color: var(--border); }
.bm-badge--muted { opacity: 0.55; }

.bm-link { color: hsl(217, 91%, 55%); text-decoration: underline; }
.bm-link:hover { color: hsl(217, 91%, 42%); }

.bm-badge--open { background: hsl(45, 95%, 90%); color: hsl(38, 80%, 32%); }
.bm-badge--collabrole-editor   { background: hsl(217, 90%, 92%); color: hsl(217, 80%, 40%); }
.bm-badge--collabrole-reviewer { background: hsl(45, 95%, 88%); color: hsl(38, 80%, 32%); }
.bm-badge--collabrole-viewer   { background: hsl(220, 15%, 92%); color: hsl(220, 15%, 30%); }

.bm-doc-comments { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.bm-doc-comment { border-left: 4px solid transparent; border-radius: 0.4rem; padding: 0.75rem 1rem; }
.bm-doc-comment--open { border-left-color: hsl(217, 91%, 60%); background: hsl(217, 90%, 97%); }
.bm-doc-comment--resolved { border-left-color: hsl(150, 60%, 45%); background: hsl(150, 55%, 96%); }
.bm-doc-comment-head { display: flex; align-items: center; gap: 0.5rem; }
.bm-doc-comment-date { margin-left: auto; font-size: 0.8rem; color: var(--muted-foreground); }
.bm-doc-comment-note { margin: 0.4rem 0 0.6rem; }
.bm-doc-comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }

.bm-empty-state {
    padding: 3rem 1.5rem; text-align: center; color: var(--muted-foreground);
}
.bm-empty-state h3 { font-size: 1.1rem; font-weight: 600; color: hsl(220, 25%, 35%); margin: 0 0 0.5rem; }
.bm-empty-state p { margin: 0; }

/* Inline form panel — used by Add Member / Edit Committee in this page */
.bm-inline-form {
    margin-top: 1rem;
    background: hsl(220, 15%, 97%); border: 1px dashed var(--border);
    border-radius: 0.6rem; padding: 1.25rem;
}

/* ---------- Directory tree view (org-chart) ---------- */
.bm-tree { display: flex; flex-direction: column; gap: 1.25rem; }

.bm-tree-section { display: flex; flex-direction: column; gap: 0.25rem; }
.bm-tree-section-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}
.bm-tree-section-title {
    font-size: 1.05rem; font-weight: 700; color: var(--foreground); margin: 0;
}
.bm-tree-section-meta { color: var(--muted-foreground); font-size: 0.85rem; }

/* The "branch" wrapper draws the connecting line + indent for child rows. */
.bm-tree-branch {
    margin-left: 1.25rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--border);
    display: flex; flex-direction: column; gap: 0.5rem;
}

.bm-tree-node {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 0.5rem;
    transition: box-shadow 120ms ease, transform 120ms ease;
}
.bm-tree-node:hover { box-shadow: var(--shadow-sm); }

.bm-tree-node-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bm-tree-node-name { font-size: 0.95rem; font-weight: 600; color: var(--foreground); }
.bm-tree-node-meta { font-size: 0.8rem; color: var(--muted-foreground); }

.bm-tree-node-contact {
    display: none; gap: 1rem; color: var(--muted-foreground); font-size: 0.8rem;
}
.bm-tree-node-contact-row { display: inline-flex; align-items: center; gap: 0.3rem; }
@media (min-width: 768px) { .bm-tree-node-contact { display: inline-flex; } }

.bm-tree-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; flex-shrink: 0;
    color: var(--muted-foreground); background: transparent; border: none;
    cursor: pointer; border-radius: 0.25rem;
    transition: transform 150ms ease, color 100ms ease;
}
.bm-tree-chevron:hover { color: var(--foreground); background: hsl(220, 15%, 95%); }
.bm-tree-chevron--collapsed { transform: rotate(-90deg); }
.bm-tree-chevron--leaf { visibility: hidden; cursor: default; }

.bm-tree-empty {
    margin-left: 1.25rem; padding-left: 1.5rem;
    border-left: 2px solid var(--border);
    color: var(--muted-foreground); font-size: 0.9rem; padding-top: 0.25rem;
}

/* ---------- Committees tab: sub-tabs ---------- */
.bm-subtabs {
    gap: 0.25rem;
    padding: 0.3rem;
    background: hsl(220, 15%, 95%);
    border-radius: 0.6rem;
    margin-bottom: 1.25rem;
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
.bm-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    color: hsl(220, 15%, 40%);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
    justify-content: center;
}
.bm-subtab:hover { color: var(--foreground); }
.bm-subtab--active {
    background: var(--card); color: var(--foreground);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

/* ---------- Committees tab: overview header + card grid ---------- */
.bm-committees-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.bm-committees-head h2 {
    font-size: 1.5rem; font-weight: 700; color: var(--foreground); margin: 0;
}

.bm-committee-grid {
    display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .bm-committee-grid { grid-template-columns: repeat(2, 1fr); } }

.bm-committee-card {
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: 0.75rem;
    box-shadow: var(--shadow-sm); padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
    transition: box-shadow 120ms ease;
}
.bm-committee-card:hover { box-shadow: var(--shadow-md); }

.bm-committee-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.bm-committee-card-title { font-size: 1.15rem; font-weight: 600; color: var(--foreground); margin: 0; }

.bm-committee-desc {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.9rem; color: var(--muted-foreground); margin: 0;
}
.bm-committee-desc svg { flex-shrink: 0; margin-top: 0.15rem; color: hsl(220, 15%, 60%); }

.bm-committee-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bm-committee-stat-label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: var(--secondary-foreground);
}
.bm-committee-stat-label svg { color: hsl(220, 15%, 60%); }
.bm-committee-stat-value { font-size: 0.9rem; color: var(--muted-foreground); margin: 0.2rem 0 0 1.4rem; }

.bm-committee-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 0.85rem; border-top: 1px solid var(--border); font-size: 0.9rem;
}
.bm-committee-foot .label { color: var(--muted-foreground); }
.bm-committee-foot .value { font-weight: 600; color: var(--foreground); }
.bm-committee-foot .value--warn { color: hsl(25, 90%, 45%); }

.bm-badge--active { background: hsl(150, 60%, 90%); color: hsl(150, 70%, 26%); }

/* ---------- Modal (dialog) ---------- */
/* When any modal is open, freeze the underlying page; the modal scrolls on its own. */
body.modal-open { overflow: hidden; }
.bm-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; animation: bm-fade-in 120ms ease;
}
@keyframes bm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bm-modal {
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: 0.75rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    width: 100%; max-width: 32rem; position: relative;
    max-height: calc(100vh - 2rem); overflow-y: auto;
    animation: bm-zoom-in 120ms ease;
}
@keyframes bm-zoom-in { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bm-modal-wide { max-width: 48rem; }
.bm-modal-head { padding: 1.5rem 1.5rem 0.5rem; }
.bm-modal-title { font-size: 1.15rem; font-weight: 700; color: var(--foreground); margin: 0; }
.bm-modal-desc { font-size: 0.9rem; color: var(--muted-foreground); margin: 0.35rem 0 0; }
.bm-modal-body { padding: 1rem 1.5rem 1.5rem; }
.bm-modal-foot {
    display: flex; justify-content: flex-end; gap: 0.6rem;
    margin-top: 1.25rem;
}
.bm-modal-close {
    position: absolute; right: 1rem; top: 1rem;
    width: 2rem; height: 2rem; border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--muted-foreground);
    cursor: pointer; transition: background 100ms ease, color 100ms ease;
}
.bm-modal-close:hover { background: hsl(220, 15%, 93%); color: var(--foreground); }

/* ---------- Configure Thresholds dialog (governance) ---------- */
/* Hide BoardModal's default head so our icon-beside-title header can render in the body. */
.bm-modal:has(.ct-dialog) .bm-modal-head { display: none; }

.bm-modal textarea {
    resize: vertical;
}

.ct-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.ct-head-icon { color: var(--foreground); display: inline-flex; flex: none; margin-top: 0.15rem; }
.ct-head-title { font-size: 1.15rem; font-weight: 700; color: var(--foreground); margin: 0; }
.ct-head-sub { font-size: 0.9rem; color: var(--muted-foreground); margin: 0.25rem 0 0; }

.ct-metric-row {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}
.ct-metric-row:last-of-type { border-bottom: none; }

.ct-metric-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.6rem;
}
.ct-metric-name { font-weight: 600; color: var(--foreground); }
.ct-metric-current { font-size: 0.85rem; color: var(--muted-foreground); }

.ct-field-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
}
.ct-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ct-field-label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: hsl(220, 25%, 25%);
}
.ct-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex: none; }
.ct-dot-danger { background: var(--status-danger); }
.ct-dot-warning { background: var(--status-warning); }
.ct-dot-success { background: var(--status-success); }

.ct-direction-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-top: 0.75rem;
}
/* The direction switch is interactive (editable, persisted) — show a pointer. */
.ct-direction-row .ea-switch { cursor: pointer; }
.ct-direction-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: var(--status-success);
}
.ct-row-error { color: var(--destructive); font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; }

.ct-input-with-suffix { position: relative; display: flex; align-items: center; }
.ct-input-with-suffix .input { flex: 1; padding-right: 2.5rem; }
.ct-input-suffix {
    position: absolute; right: 0.75rem;
    color: var(--muted-foreground); font-size: 0.85rem; pointer-events: none;
}

/* ---------- Organize Critical Ratios dialog (personal layout) ---------- */
/* Hide BoardModal's default head so our icon-beside-title header renders in the body. */
.bm-modal:has(.organize-dialog) .bm-modal-head { display: none; }

.organize-head { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; }
.organize-head-icon { color: hsl(220, 30%, 15%); display: inline-flex; flex: none; margin-top: 0.15rem; }
.organize-head-title { font-size: 1.15rem; font-weight: 700; color: hsl(220, 30%, 15%); margin: 0; }
.organize-head-sub { font-size: 0.9rem; color: var(--muted-foreground); margin: 0.25rem 0 0; }

.organize-empty { padding: 1.5rem 0; text-align: center; }
.organize-search { width: 100%; margin-bottom: 0.85rem; }

.organize-controls {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.85rem;
}
.organize-control { display: flex; flex-direction: column; gap: 0.35rem; }
.organize-control-label { font-size: 0.85rem; font-weight: 600; color: hsl(220, 25%, 25%); }

.organize-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.5rem;
}
.organize-actions-links { display: inline-flex; align-items: center; gap: 0.5rem; }
.organize-actions-sep { color: var(--muted-foreground); }
.organize-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--primary);
}
.organize-link:hover { text-decoration: underline; }
.organize-count { font-size: 0.85rem; }

.organize-list { display: flex; flex-direction: column; gap: 0.4rem; }
.organize-row {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 0.55rem;
    background: var(--card); cursor: grab;
}
.organize-row.dragging { opacity: 0.5; }
.organize-row.drag-over { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.organize-row--hidden { opacity: 0.6; }
/* Outside Custom Order, rows aren't draggable — drop the grab affordance. */
.organize-row--nodrag { cursor: default; }
/* Row-level cursor-grab must not leak onto the interactive switch. */
.organize-row .ea-switch { cursor: pointer; }

.organize-grip { display: inline-flex; flex: none; color: var(--muted-foreground); }
.organize-grip--disabled { opacity: 0.4; }
.organize-row-name { flex: 1; font-weight: 600; color: hsl(220, 30%, 15%); min-width: 0; }

.organize-cat-pill {
    display: inline-flex; align-items: center; gap: 0.3rem; flex: none;
    border: none; font-size: 0.78rem; padding: 0.15rem 0.5rem;
}
/* Per-category tint (Tailwind {color}-100 / {color}-800 pairs). */
.organize-cat-pill--capital       { background: rgb(219, 234, 254); color: rgb(30, 64, 175); }
.organize-cat-pill--asset-quality { background: rgb(243, 232, 255); color: rgb(107, 33, 168); }
.organize-cat-pill--earnings      { background: rgb(220, 252, 231); color: rgb(22, 101, 52); }
.organize-cat-pill--liquidity     { background: rgb(207, 250, 254); color: rgb(21, 94, 117); }
.organize-cat-pill--irr           { background: rgb(255, 237, 213); color: rgb(154, 52, 18); }

.organize-arrows { display: inline-flex; flex-direction: column; gap: 0.15rem; flex: none; }
.organize-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1rem; padding: 0; border-radius: 0.3rem;
    border: 1px solid var(--border); background: var(--card);
    color: var(--muted-foreground); cursor: pointer;
}
.organize-arrow:hover:not(:disabled) { background: hsl(220, 15%, 95%); color: hsl(220, 30%, 15%); }
.organize-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.organize-foot { align-items: center; }
.organize-foot-spacer { flex: 1; }

/* Dashboard grouped metric sections (Group by category/status). */
.dash-metric-group { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-metric-group + .dash-metric-group { margin-top: 1rem; }
.dash-metric-group-title {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--muted-foreground);
}

@media (max-width: 640px) {
    .organize-controls { grid-template-columns: 1fr; }
    .organize-actions { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* ---------- Committee detail page ---------- */
.bm-detail-back {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--muted-foreground); font-size: 0.9rem; font-weight: 600;
    text-decoration: none; margin-bottom: 1rem; background: none; border: none; cursor: pointer;
}
.bm-detail-back:hover { color: var(--foreground); }

.bm-detail-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.bm-detail-head h1 { font-size: 1.75rem; font-weight: 700; color: var(--foreground); margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.bm-detail-head p { margin: 0.4rem 0 0; color: var(--muted-foreground); max-width: 48rem; }

/* ---------- In-card tables (CEO Search / Documents / Admin etc.) ----------
   All the data tables across the app share the same wrapper shape:
       <div class="card"><div class="card-body" style="padding:0"><table>…
   These rules:
     (1) Give every <th> a border-bottom so the header rule extends across
         the whole table — including the empty action-column header.
     (2) Vertically center each cell's content so action buttons line up
         horizontally with neighbouring text columns (the default <td>
         vertical-align is baseline, which leaves button rows slightly
         offset from text rows).
*/
.card-body > table { width: 100%; border-collapse: collapse; }
.card-body > table thead th { border-bottom: 1px solid var(--border); }
.card-body > table th,
.card-body > table td { vertical-align: middle; }

/* Buttons inside a table cell need to align to the cell's middle, not their
   own baseline. The baseline of an inline-flex .btn is computed from the
   first inline child — for a button that's "<BoardIcon /> Edit" that baseline
   is offset by the SVG's height/margin, so an icon-bearing button sits a
   couple of pixels above/below a plain-text button next to it. Forcing
   vertical-align: middle on every in-cell button puts them on the same line
   regardless of contents. */
.card-body > table td .btn,
.card-body > table td a.btn { vertical-align: middle; }

/* ---------- Form validation ---------- */
.validation-message, .bm-field-error {
    display: block; color: var(--status-danger-fg); font-size: 0.82rem; margin-top: 0.3rem;
}
.input.invalid, .input.modified.invalid { border-color: var(--status-danger-border); }
.bm-form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.bm-form-row > label { font-size: 0.85rem; font-weight: 600; color: hsl(220, 25%, 25%); }
.bm-form-hint { font-size: 0.8rem; color: var(--muted-foreground); margin: 0.1rem 0 0; }

/* ---------- Committees → Term Rotations sub-tab ---------- */
.bm-tr-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.bm-tr-toolbar h2 { font-size: 1.35rem; font-weight: 700; color: var(--foreground); margin: 0; }
.bm-tr-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
    .bm-tr-controls select {
        width: revert; 
    }
.bm-tr-filter { min-width: 13rem; }

/* stat filter cards */
.bm-tr-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
    margin-bottom: 1.25rem;
}
.bm-tr-stat {
    display: flex; flex-direction: column; gap: 0.4rem;
    text-align: left; font: inherit; cursor: pointer;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 1.1rem 1.15rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bm-tr-stat:hover { border-color: hsl(220, 18%, 72%); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); }
.bm-tr-stat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bm-tr-stat-head { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: hsl(220, 18%, 42%); }
.bm-tr-stat-head svg { flex-shrink: 0; color: hsl(220, 15%, 55%); }
.bm-tr-stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.05; color: var(--foreground); }
.bm-tr-stat-hint { font-size: 0.78rem; color: var(--muted-foreground); }

/* active outline + per-accent coloring (leftmost "all" stays neutral) */
.bm-tr-stat--all.bm-tr-stat--active { border-color: hsl(220, 22%, 48%); box-shadow: 0 0 0 1px hsl(220, 22%, 48%); }
.bm-tr-stat--upcoming .bm-tr-stat-head svg { color: var(--status-warning-fg); }
.bm-tr-stat--upcoming .bm-tr-stat-value { color: var(--status-warning-fg); }
.bm-tr-stat--upcoming.bm-tr-stat--active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bm-tr-stat--limited .bm-tr-stat-head svg { color: var(--status-danger); }
.bm-tr-stat--limited .bm-tr-stat-value { color: var(--status-danger-fg); }
.bm-tr-stat--limited.bm-tr-stat--active { border-color: var(--destructive); box-shadow: 0 0 0 1px var(--destructive); }
.bm-tr-stat--committees .bm-tr-stat-head svg { color: var(--status-info-fg); }
.bm-tr-stat--committees.bm-tr-stat--active { border-color: var(--status-info-fg); box-shadow: 0 0 0 1px var(--status-info-fg); }

/* filter note bar */
.bm-tr-filter-note {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: hsl(220, 16%, 96%); border: 1px solid var(--border); border-radius: 0.6rem;
    padding: 0.65rem 1rem; margin-bottom: 1.25rem;
    font-size: 0.9rem; color: hsl(220, 22%, 32%);
}
.bm-tr-filter-note strong { color: var(--foreground); font-weight: 700; }
.bm-tr-filter-note-count { color: var(--muted-foreground); margin-left: 0.4rem; font-weight: 500; }
.bm-tr-filter-clear {
    background: none; border: none; cursor: pointer; font: inherit; font-weight: 600;
    color: var(--primary); padding: 0.15rem 0.25rem; border-radius: 0.3rem;
}
.bm-tr-filter-clear:hover { text-decoration: underline; }

/* view toggle (Table / Timeline) */
.bm-tr-toggle { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: hsl(220, 15%, 95%); border-radius: 0.5rem; }
.bm-tr-toggle-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem; border: none; border-radius: 0.4rem;
    background: transparent; color: hsl(220, 15%, 40%);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
}
.bm-tr-toggle-btn:hover { color: var(--foreground); }
.bm-tr-toggle-btn--active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1); }

/* committee group */
.bm-tr-group { margin-bottom: 2rem; }
.bm-tr-group:last-child { margin-bottom: 0; }
.bm-tr-group-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.bm-tr-group-title {
    font-size: 1.15rem; font-weight: 700; color: var(--foreground);
    margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.bm-tr-meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted-foreground); }
.bm-tr-meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.bm-tr-meta-item svg { color: hsl(220, 15%, 60%); flex-shrink: 0; }
.bm-tr-meta-item strong { color: var(--secondary-foreground); font-weight: 600; }
.bm-tr-group-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

/* member timeline cards */
.bm-tr-members { display: flex; flex-direction: column; gap: 1rem; }
.bm-tr-member {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.bm-tr-member-main { flex: 1 1 20rem; min-width: 0; }
.bm-tr-member-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.bm-tr-member-name { font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0; }

/* vertical term timeline */
.bm-tr-timeline { position: relative; padding-left: 1.5rem; }
.bm-tr-timeline::before {
    content: ""; position: absolute; left: 0.32rem; top: 0.4rem; bottom: 0.4rem;
    width: 2px; background: hsl(220, 15%, 88%);
}
.bm-tr-term { position: relative; padding-bottom: 0.85rem; }
.bm-tr-term:last-child { padding-bottom: 0; }
.bm-tr-term::before {
    content: ""; position: absolute; left: -1.5rem; top: 0.15rem;
    width: 0.7rem; height: 0.7rem; border-radius: 50%;
    background: hsl(220, 12%, 65%); border: 2px solid var(--card);
    box-shadow: 0 0 0 1px hsl(220, 15%, 80%);
}
.bm-tr-term--current::before { background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.bm-tr-term-label { font-size: 0.85rem; font-weight: 600; color: var(--secondary-foreground); }
.bm-tr-term--current .bm-tr-term-label { color: var(--primary); }
.bm-tr-term-dates { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.1rem; }

/* right column: next rotation + eligibility */
.bm-tr-member-side {
    flex: 0 0 auto; display: flex; flex-direction: column;
    gap: 0.5rem; align-items: flex-end; text-align: right;
}
.bm-tr-next-label { font-size: 0.72rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }
.bm-tr-next-value { font-size: 0.9rem; font-weight: 600; color: var(--foreground); }

/* badges */
.bm-tr-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.bm-tr-badge--upcoming { color: var(--status-warning-fg); border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.bm-tr-badge--limited { color: var(--status-danger-fg); border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.bm-tr-badge--eligible { color: hsl(150, 65%, 30%); border-color: hsl(150, 50%, 70%); background: hsl(150, 60%, 96%); }
.bm-tr-badge--role { color: var(--secondary-foreground); border-color: var(--border); background: hsl(220, 15%, 96%); }
.bm-tr-badge--inactive { color: hsl(220, 15%, 45%); border-color: var(--border); background: hsl(220, 15%, 94%); }
.bm-tr-badge--mismatch { color: var(--status-warning-fg); border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.edu-ghost-btn--active { color: var(--primary); font-weight: 700; }

/* table view */
.bm-tr-table-wrap { overflow-x: auto; }
.bm-tr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bm-tr-table th {
    text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted-foreground); font-weight: 600; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.bm-tr-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); color: hsl(220, 25%, 25%); vertical-align: middle; }
.bm-tr-table tr:last-child td { border-bottom: none; }
.bm-tr-table-name { font-weight: 600; color: var(--foreground); }
.bm-tr-table-sub { font-size: 0.78rem; color: var(--muted-foreground); }

@media (max-width: 900px) { .bm-tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) {
    .bm-tr-member { flex-direction: column; }
    .bm-tr-member-side { text-align: left; align-items: flex-start; }
}

@media (max-width: 460px) { .bm-tr-stats { grid-template-columns: 1fr; } }

/* ---------- Elections & Terms tab ---------- */
.bm-el-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bm-el-head h2 { font-size: 1.5rem; font-weight: 700; color: var(--foreground); margin: 0; }
.bm-el-head p { color: var(--muted-foreground); margin: 0.25rem 0 0; font-size: 0.95rem; }

/* Elections sub-tab — 3-column stat row, similar style to .bm-tr-stat but read-only */
.bm-el-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
    margin-bottom: 1.25rem;
}
.bm-el-stat {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.bm-el-stat-head { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: hsl(220, 18%, 42%); }
.bm-el-stat-head svg { flex-shrink: 0; color: hsl(220, 15%, 55%); }
.bm-el-stat-value { font-size: 1.85rem; font-weight: 700; line-height: 1.05; color: var(--foreground); }
.bm-el-stat-hint { font-size: 0.78rem; color: var(--muted-foreground); }

@media (max-width: 760px) { .bm-el-stats { grid-template-columns: 1fr; } }

/* Election history list */
.bm-el-history-head { font-size: 1.1rem; font-weight: 700; color: var(--foreground); margin: 0 0 1rem; }
.bm-el-list { display: flex; flex-direction: column; gap: 1rem; }
.bm-el-card {border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 1.1rem 1.25rem;
}
.bm-el-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.bm-el-card-title { font-size: 1.05rem; font-weight: 700; color: var(--foreground); margin: 0; }
.bm-el-card-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.85rem; color: var(--muted-foreground); }
.bm-el-card-meta svg { color: hsl(220, 15%, 55%); }

.bm-el-status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.bm-el-status--upcoming  { color: var(--status-info-fg); border-color: var(--status-info-border); background: var(--status-info-bg); }
.bm-el-status--scheduled { color: var(--status-info-fg); border-color: var(--status-info-border); background: var(--status-info-bg); }
.bm-el-status--active    { color: var(--status-warning-fg); border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.bm-el-status--pending   { color: var(--status-danger-fg); border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.bm-el-status--completed { color: hsl(150, 65%, 30%); border-color: hsl(150, 50%, 70%); background: hsl(150, 60%, 96%); }
.bm-el-status--cancelled { color: hsl(220, 15%, 45%); border-color: var(--border); background: hsl(220, 15%, 94%); }

.bm-el-position {
    background: hsl(220, 18%, 98%);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    margin-top: 0.65rem;
}
.bm-el-position-form {
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    margin-top: 0.65rem;
}
.bm-el-position-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.bm-el-position-name { font-size: 0.95rem; font-weight: 600; color: var(--foreground); margin: 0; }
.bm-el-position-term { font-size: 0.78rem; color: var(--muted-foreground); white-space: nowrap; }
.bm-el-candidates { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bm-el-candidate {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.65rem; border-radius: 999px;
    background: var(--status-info-bg); color: var(--status-info-fg);
    font-size: 0.82rem; font-weight: 500;
}
.bm-el-candidate-votes { color: var(--muted-foreground); font-size: 0.78rem; }
.bm-el-turnout { margin-top: 0.85rem; font-size: 0.82rem; color: var(--muted-foreground); }

/* Candidate management rows (Manage Election modal) */
.bm-el-candidate-row {
    display: flex; align-items: center; gap: 0.65rem;
    background: hsl(220, 18%, 96%); border-radius: 0.55rem;
    padding: 0.55rem 0.85rem; margin-top: 0.5rem;
}
.bm-el-candidate-row:first-of-type { margin-top: 0.6rem; }
.bm-el-candidate-status {
    display: inline-flex; align-items: center;
    padding: 0.18rem 0.6rem; border-radius: 999px;
    background: var(--status-info-bg); color: var(--status-info-fg);
    font-size: 0.72rem; font-weight: 600; flex-shrink: 0;
}
.bm-el-candidate-row-name { font-size: 0.92rem; font-weight: 600; color: var(--foreground); flex: 1 1 auto; min-width: 0; }
.bm-el-candidate-row-votes { color: var(--muted-foreground); font-size: 0.8rem; flex-shrink: 0; }
.bm-el-candidate-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem; padding: 0;
    background: transparent; border: none; border-radius: 0.4rem;
    color: hsl(220, 18%, 45%); cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.bm-el-candidate-remove:hover { background: var(--status-danger-bg); color: var(--destructive); }

/* "+ Add Candidate" button row */
.bm-el-candidate-add-btn { margin-top: 0.65rem; }

/* Active "Candidate name [____]  Add  Cancel" input row */
.bm-el-candidate-add-row {
    display: flex; align-items: center; gap: 0.6rem;
    margin-top: 0.6rem; padding: 0.4rem;
    background: hsl(220, 18%, 96%); border-radius: 0.55rem;
}
.bm-el-candidate-add-input {
    flex: 1 1 auto; min-width: 0;
    background: var(--card); /* override the row background */
}
.bm-el-candidate-cancel {
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: 0.92rem; font-weight: 500; color: hsl(220, 22%, 35%);
    padding: 0.4rem 0.6rem;
}
.bm-el-candidate-cancel:hover { color: var(--foreground); text-decoration: underline; }

/* Schedule New Election modal — layout */
.bm-el-modal-row-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.bm-el-modal-row-2 .bm-form-row { margin-bottom: 1rem; }
.bm-el-modal-divider { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0 1rem; }

.bm-el-modal-positions-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.75rem;
}
.bm-el-modal-positions-head h4 {
    font-size: 1rem; font-weight: 700; color: var(--foreground); margin: 0;
}
.bm-el-modal-positions-empty {
    text-align: center; color: var(--muted-foreground); font-size: 0.92rem;
    padding: 1.5rem 1rem; margin: 0;
}

.bm-el-modal-positions { display: flex; flex-direction: column; gap: 0.75rem; }
.bm-el-modal-position {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.6rem;
    padding: 1rem 1.1rem;
}
.bm-el-modal-position-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.6rem;
}
.bm-el-modal-position-label { font-size: 0.85rem; font-weight: 600; color: var(--status-info-fg); }
.bm-el-modal-position-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0;
    background: transparent; border: none; border-radius: 0.4rem;
    color: var(--destructive); cursor: pointer;
    transition: background 100ms ease;
}
.bm-el-modal-position-remove:hover { background: var(--status-danger-bg); }

.bm-el-modal-position-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.85rem;
    margin-top: 0.75rem;
}
.bm-el-modal-position-grid .bm-form-row { margin-bottom: 0; }
.bm-el-modal-position-grid label {
    font-size: 0.78rem; font-weight: 600; color: var(--secondary-foreground);
    margin-bottom: 0.3rem; display: block;
}

@media (max-width: 560px) {
    .bm-el-modal-row-2 { grid-template-columns: 1fr; }
    .bm-el-modal-position-grid { grid-template-columns: 1fr; }
}

/* Manage Election modal — two-pane layout (details | positions & candidates) */
.bm-el-manage-modal { max-width: 60rem; }
.bm-el-manage-panes {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.5rem; align-items: start;
}
.bm-el-manage-pane { min-width: 0; }
.bm-el-manage-pane + .bm-el-manage-pane {
    border-left: 1px solid var(--border); padding-left: 1.5rem;
}
.bm-el-manage-pane-title {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted-foreground); margin: 0 0 1rem;
}
@media (max-width: 720px) {
    .bm-el-manage-panes { grid-template-columns: 1fr; }
    .bm-el-manage-pane + .bm-el-manage-pane {
        border-left: none; padding-left: 0;
        border-top: 1px solid var(--border); padding-top: 1.25rem;
    }
}

/* Convert-to-appointment action shares the icon-button sizing but reads as a
   neutral/positive action rather than the destructive remove button. */
.bm-el-candidate-convert:hover { background: var(--status-info-bg); color: var(--status-info-fg); }

/* Read-only derived inputs (e.g. Term (yrs), computed from the term dates). */
.bm-input-readonly {
    background: hsl(220, 18%, 96%); color: var(--muted-foreground);
    cursor: not-allowed;
}

/* Appointments sub-tab — table */
.bm-appt-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bm-appt-section-head h2 { font-size: 1.15rem; font-weight: 700; color: var(--foreground); margin: 0; }
.bm-appt-table-wrap { overflow-x: auto; }
.bm-appt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bm-appt-table th {
    text-align: left; font-size: 0.78rem; font-weight: 600;
    color: var(--status-info-fg); padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.bm-appt-table td { padding: 0.85rem; border-bottom: 1px solid var(--border); color: hsl(220, 25%, 25%); vertical-align: middle; }
.bm-appt-table tr:last-child td { border-bottom: none; }
.bm-appt-status {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; border: 1px solid transparent;
}
.bm-appt-status--active   { color: hsl(150, 65%, 30%); border-color: hsl(150, 50%, 70%); background: hsl(150, 60%, 96%); }
.bm-appt-status--inactive { color: hsl(220, 15%, 45%); border-color: var(--border); background: hsl(220, 15%, 94%); }
.bm-appt-status--expired  { color: var(--status-danger-fg); border-color: var(--status-danger-border); background: var(--status-danger-bg); }

/* Term Schedule sub-tab — cycle cards */
.bm-cycle-list { display: flex; flex-direction: column; gap: 0.85rem; }
.bm-cycle-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 1.1rem 1.25rem;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.bm-cycle-info { flex: 1 1 20rem; min-width: 0; }
.bm-cycle-title { font-size: 1.05rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.5rem; }
.bm-cycle-sublabel { font-size: 0.82rem; color: var(--muted-foreground); margin: 0 0 0.45rem; }
.bm-cycle-seats { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.bm-cycle-seat {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.7rem; border-radius: 999px;
    background: hsl(220, 15%, 95%); color: var(--secondary-foreground);
    font-size: 0.78rem; font-weight: 500;
}
.bm-cycle-seat-term { color: var(--muted-foreground); font-weight: 400; }
.bm-cycle-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card);
    color: var(--secondary-foreground); font-size: 0.78rem; font-weight: 600;
    flex-shrink: 0;
}

/* Board Config sub-tab — form layout */
.bm-config-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; max-width: 56rem; }
.bm-config-form .bm-form-row { margin-bottom: 0; }
.bm-config-form .bm-config-checkrow { align-self: end; padding-bottom: 0.5rem; }
.bm-config-foot { display: flex; gap: 0.6rem; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--border); }
.bm-config-hint { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.35rem; }
.bm-config-hint--warn { color: var(--status-warning-fg); }
.bm-config-confirm { margin: 1.25rem 0 0; max-width: 56rem; }
.bm-config-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: hsl(220, 25%, 25%); }
.bm-config-check input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--primary); }

@media (max-width: 760px) {
    .bm-config-form { grid-template-columns: 1fr; }
    .bm-cycle-card { flex-direction: column; }
}

/* Notice shown when current user can't run write actions in Elections & Terms */
.bm-el-readonly-note {
    margin-bottom: 1rem; padding: 0.6rem 0.9rem;
    background: var(--status-warning-bg); border: 1px solid var(--status-warning-border);
    border-radius: 0.5rem; font-size: 0.85rem; color: var(--status-warning-fg);
}

/* ---------- Tasks tab ---------- */
.bm-tasks-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.bm-tasks-head h2 { font-size: 1.4rem; font-weight: 700; color: var(--foreground); margin: 0; }
.bm-tasks-head-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Orange "Assign New Task" CTA — picks up the accent color used in the design. */
.bm-btn-accent {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1rem; border-radius: 0.5rem; border: 1px solid var(--accent);
    background: var(--accent); color: var(--accent-foreground);
    font-size: 0.92rem; font-weight: 600; cursor: pointer;
    transition: background 100ms ease, filter 100ms ease;
}
.bm-btn-accent:hover { filter: brightness(0.96); }
.bm-btn-accent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bm-tasks-list { display: flex; flex-direction: column; gap: 0.85rem; }

.bm-task-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.65rem;
    padding: 1.1rem 1.25rem;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
}
.bm-task-main { flex: 1 1 24rem; min-width: 0; }
.bm-task-title { font-size: 1.02rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.3rem; }
.bm-task-desc { font-size: 0.88rem; color: var(--muted-foreground); margin: 0 0 0.65rem; line-height: 1.4; }
.bm-task-meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted-foreground); }
.bm-task-meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.bm-task-meta-item svg { color: hsl(220, 15%, 55%); flex-shrink: 0; }

.bm-task-aside {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 0.6rem; flex-shrink: 0;
}
.bm-task-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

.bm-task-priority, .bm-task-status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.65rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}

.bm-task-priority--high   { color: var(--status-danger-fg); border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.bm-task-priority--medium { color: var(--status-warning-fg); border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.bm-task-priority--low    { color: hsl(150, 60%, 32%); border-color: hsl(150, 50%, 75%); background: hsl(150, 60%, 96%); }

.bm-task-status--pending     { color: var(--status-info-fg); border-color: var(--status-info-border); background: var(--status-info-bg); }
.bm-task-status--in-progress { color: var(--status-info-fg); border-color: var(--status-info-border); background: var(--status-info-bg); }
.bm-task-status--completed   { color: hsl(150, 65%, 30%); border-color: hsl(150, 50%, 70%); background: hsl(150, 60%, 96%); }
.bm-task-status--cancelled   { color: hsl(220, 15%, 45%); border-color: var(--border); background: hsl(220, 15%, 94%); }

@media (max-width: 640px) {
    .bm-task-card { flex-direction: column; }
    .bm-task-aside { align-items: flex-start; width: 100%; }
    .bm-task-badges { justify-content: flex-start; }
}

/* ---------- Task calendar (committee tasks Calendar View) ---------- */
.bm-taskcal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.bm-taskcal-main { border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; background: var(--card); }
.bm-taskcal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.bm-taskcal-title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; margin: 0; }
.bm-taskcal-nav { display: inline-flex; align-items: center; gap: 0.25rem; }
.bm-taskcal-month { font-weight: 600; min-width: 8.5rem; text-align: center; }
.bm-taskcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.bm-taskcal-weekdays { margin-bottom: 2px; }
.bm-taskcal-weekday { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); padding: 0.25rem 0; }
.bm-taskcal-day {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    min-height: 4.6rem; padding: 0.3rem; border: 1px solid var(--border); border-radius: 0.4rem;
    background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.bm-taskcal-day:hover { background: hsl(220, 15%, 96%); }
.bm-taskcal-day--out { opacity: 0.4; }
.bm-taskcal-day--today .bm-taskcal-daynum { background: var(--primary); color: #fff; }
.bm-taskcal-day--selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.bm-taskcal-daynum {
    width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}
.bm-taskcal-chip {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.65rem; font-weight: 600; padding: 0.05rem 0.35rem;
    border-radius: 0.3rem; border: 1px solid transparent;
}
.bm-taskcal-more { font-size: 0.62rem; color: var(--muted-foreground); padding-left: 0.2rem; }
.bm-taskcal-side { display: flex; flex-direction: column; gap: 1rem; }
.bm-taskcal-panel { border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; background: var(--card); }
.bm-taskcal-panel h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.bm-taskcal-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.bm-taskcal-panel-head h3 { margin: 0; }
.bm-taskcal-empty { font-size: 0.85rem; text-align: center; padding: 0.75rem 0; }
.bm-taskcal-item {
    display: flex; flex-direction: column; gap: 0.3rem; width: 100%; text-align: left;
    padding: 0.55rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem;
    background: transparent; cursor: pointer; font: inherit; color: inherit; margin-bottom: 0.5rem;
}
.bm-taskcal-item:hover { background: hsl(220, 15%, 96%); }
.bm-taskcal-item-title { font-weight: 600; font-size: 0.85rem; }
.bm-taskcal-item-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bm-taskcal-item-assignee { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--muted-foreground); }
.bm-taskcal-sum-row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.85rem; }
.bm-taskcal-sum--high { color: var(--status-danger-fg); }
.bm-taskcal-sum--progress { color: var(--status-info-fg); }
.bm-taskcal-sum--done { color: hsl(150, 65%, 30%); }
@media (max-width: 900px) { .bm-taskcal { grid-template-columns: 1fr; } }

/* ---------- Meetings-list calendar view (MeetingCalendar, on top of bm-taskcal-*) ---------- */
.bm-meetcal-chip { background: hsl(217, 91%, 94%); color: hsl(217, 70%, 30%); border-color: hsl(217, 91%, 86%); }
.bm-meetcal-chip--cancelled {
    background: hsl(220, 15%, 95%); color: hsl(220, 10%, 50%); border-color: hsl(220, 15%, 88%);
    text-decoration: line-through;
}
.bm-meetcal-item {
    display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
    padding: 0.55rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}
.bm-meetcal-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; }

.gov-diverging-card-header {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin-bottom: 0.75rem;
}
.gov-diverging-card-icon { color: var(--muted-foreground); display: inline-flex; flex: none; }
.gov-diverging-card-title { font-size: 1.05rem; font-weight: 600; }
.gov-diverging-svg { width: 100%; height: 430px; display: block; }
.gov-diverging-axis { stroke: #666; stroke-width: 1; fill: none; }
.gov-diverging-gridline { stroke: #ccc; stroke-dasharray: 3 3; stroke-width: 1; fill: none; }
.gov-diverging-zero-line { stroke: #666; stroke-width: 1; fill: none; }
.gov-diverging-axis-label { font-size: 11px; fill: var(--muted-foreground); }
.gov-diverging-row-label { font-size: 12px; fill: var(--foreground); font-weight: 500; }
.gov-diverging-bar { fill: var(--status-info); }
.gov-diverging-bar-info    { fill: var(--status-info); }
.gov-diverging-bar-success { fill: var(--status-success); }
.gov-diverging-bar-warn    { fill: var(--status-warning); }
.gov-diverging-bar-danger  { fill: var(--status-danger); }

.gov-diverging-row-band { fill: rgba(0, 0, 0, 0.08); opacity: 0; transition: opacity 120ms ease; }
.gov-diverging-row-hit { fill: transparent; cursor: default; }
.gov-diverging-tooltip-host { opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.gov-diverging-row:hover .gov-diverging-row-band { opacity: 1; }
.gov-diverging-row:hover .gov-diverging-tooltip-host { opacity: 1; }

.gov-diverging-tooltip {
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.35;
    width: 100%;
    box-sizing: border-box;
}
.gov-diverging-tooltip-title { font-weight: 600; margin-bottom: 0.2rem; }
.gov-diverging-tooltip-body { color: var(--muted-foreground); }

.gov-policy-alert {
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--status-info-bg);
    border-color: var(--status-info-bg);
}
.gov-policy-alert-icon {
    color: var(--status-info); flex: none;
    display: inline-flex; align-items: center;
}
.gov-policy-alert-body {
    font-size: 0.875rem; color: var(--foreground); line-height: 1.5;
}
.gov-policy-alert-body strong { font-weight: 600; }
.gov-findings-card .card-body { display: flex; flex-direction: column; gap: 1rem; }
.gov-findings-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
}
.gov-findings-title {
    font-size: 1.05rem; font-weight: 600; color: var(--foreground); margin: 0;
}
.gov-finding-warn-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.78rem; font-weight: 500;
    border: 1px solid var(--status-warning-border);
}

.gov-findings-list { display: flex; flex-direction: column; gap: 0.75rem; }
.gov-finding-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border); border-radius: 0.55rem;
    background: var(--card);
}
.gov-finding-row-main {
    display: flex; align-items: flex-start; gap: 0.7rem; flex: 1; min-width: 0;
}
.gov-finding-badge {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600;
    flex: none;
    border: 1px solid transparent;
}
.gov-finding-badge-danger {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    border-color: var(--status-danger-bg);
}
.ra-badge--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-bg); }
.ra-badge--warn { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.ra-badge--info { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }
.gov-finding-badge-warn {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.gov-finding-badge-info {
    background: var(--secondary);
    color: var(--muted-foreground);
    border-color: var(--border);
}
.gov-finding-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.gov-finding-title {
    font-size: 0.92rem; font-weight: 600; color: var(--foreground);
}
.gov-finding-description {
    font-size: 0.82rem; color: var(--muted-foreground); line-height: 1.4;
}
.gov-finding-due {
    font-size: 0.78rem; color: var(--muted-foreground); flex: none;
    white-space: nowrap;
}

.gov-calendar-card .card-body { display: flex; flex-direction: column; gap: 1rem; }
.gov-calendar-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
}
.gov-calendar-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground); margin: 0;
}
.gov-calendar-title-icon { color: var(--status-info); }
.gov-calendar-view-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; font-weight: 500; color: var(--foreground);
    text-decoration: none;
}
.gov-calendar-view-link:hover { color: var(--primary, var(--foreground)); text-decoration: underline; }

.gov-calendar-list { display: flex; flex-direction: column; gap: 0.6rem; }
.gov-calendar-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border); border-radius: 0.55rem;
    background: var(--card);
    color: var(--foreground); text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}
.gov-calendar-row:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--border);
    cursor: pointer;
}
button.gov-calendar-row { width: 100%; font: inherit; cursor: pointer; }
.gov-calendar-row-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9999px; flex: none;
}
.gov-calendar-row-icon.complete {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}
.gov-calendar-row-icon.pending {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}
.gov-calendar-row-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.gov-calendar-row-title {
    font-size: 0.92rem; font-weight: 600; color: var(--foreground);
    min-width: 0;
}
.gov-calendar-row-date {
    font-size: 0.82rem; color: var(--muted-foreground); white-space: nowrap;
}
.gov-calendar-status-pill {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}
.gov-calendar-status-pill.complete {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.gov-calendar-status-pill.pending {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}

/* Compliance examination events stand apart from the routine regulatory deadlines:
   a primary-toned accent bar, tinted background, shield icon, and "Exam" tag. Tints are
   derived from --primary so the treatment tracks both the light and dark themes. */
.gov-calendar-row--exam {
    border-color: color-mix(in srgb, var(--primary) 28%, transparent);
    border-left: 3px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.gov-calendar-row--exam:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.gov-calendar-row-icon.exam {
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    color: var(--primary);
}
.gov-calendar-row-title {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.gov-calendar-exam-tag {
    display: inline-flex; align-items: center;
    padding: 0.05rem 0.45rem; border-radius: 9999px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--primary); color: var(--primary-foreground);
}
.gov-calendar-status-pill.exam {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.gov-policy-review-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin: 0 0 0.85rem;
}
.gov-policy-review-title svg { color: var(--muted-foreground); flex: none; }
.gov-policy-review-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.88rem;
}
.gov-policy-review-table thead th {
    text-align: left;
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-foreground);
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.gov-policy-review-table tbody td,
.gov-policy-review-table tbody th {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
}
.gov-policy-review-table tbody tr:last-child td,
.gov-policy-review-table tbody tr:last-child th {
    border-bottom: none;
}
.gov-policy-review-status-pill {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 500;
    border: 1px solid transparent;
}
.gov-policy-review-status-pill.current {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.gov-policy-review-status-pill.overdue {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}

.gov-radar-card .card-body { display: flex; flex-direction: column; gap: 1rem; }
.gov-radar-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
}
.gov-radar-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground); margin: 0;
}
.gov-radar-title-icon { color: var(--muted-foreground); display: inline-flex; flex: none; }
.gov-radar-configure-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: transparent; border: none; padding: 0;
    font-family: inherit; font-size: 0.85rem; font-weight: 500; color: var(--muted-foreground);
    cursor: pointer; transition: color 120ms ease;
}
.gov-radar-configure-link:hover { color: var(--accent); }

.gov-radar-svg { width: 100%; height: 320px; display: block; }
.gov-radar-axis-line { stroke: var(--border); stroke-width: 1; fill: none; }
.gov-radar-ring { stroke: var(--border); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.gov-radar-ring-label { font-size: 10px; fill: var(--muted-foreground); }
.gov-radar-axis-label { font-size: 11px; font-weight: 500; fill: var(--foreground); }

.gov-radar-polygon-current {
    fill: var(--status-info-bg);
    stroke: var(--status-info);
    stroke-width: 2;
    stroke-linejoin: round;
}
.gov-radar-polygon-warning {
    fill: none;
    stroke: var(--status-warning);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
}
.gov-radar-polygon-limit {
    fill: none;
    stroke: var(--status-danger);
    stroke-width: 2;
    stroke-dasharray: 2 3;
    stroke-linejoin: round;
}

.gov-radar-legend {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
}
.gov-radar-legend-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border); border-radius: 0.55rem;
    background: var(--card);
    font-size: 0.9rem; color: var(--foreground);
    min-width: 0;
}
.gov-radar-legend-label { flex: 1; min-width: 0; font-weight: 500; }
.gov-radar-legend-value {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.15rem 0.7rem; border-radius: 9999px;
    font-size: 0.78rem; font-weight: 600;
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border: 1px solid var(--status-success-border);
    white-space: nowrap;
}

.gov-radar-poly-legend {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.75rem;
}
.gov-radar-poly-legend-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; color: var(--muted-foreground);
}
.gov-radar-poly-legend-swatch {
    display: inline-block; width: 14px; height: 6px; border-radius: 2px; flex: none;
}
.gov-radar-poly-legend-current .gov-radar-poly-legend-swatch {
    background: var(--status-info-border);
    border: 1px solid var(--status-info);
}
.gov-radar-poly-legend-warning .gov-radar-poly-legend-swatch {
    background: transparent;
    border: 1.5px dashed var(--status-warning);
}
.gov-radar-poly-legend-limit .gov-radar-poly-legend-swatch {
    background: transparent;
    border: 1.5px dashed var(--status-danger);
}

.gov-goals-card .card-body { display: flex; flex-direction: column; gap: 1rem; }
.gov-goals-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
}
.gov-goals-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground); margin: 0;
}
.gov-goals-title-icon { color: var(--muted-foreground); flex: none; }
.gov-goals-view-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; font-weight: 500; color: var(--foreground);
    text-decoration: none;
}
.gov-goals-view-link:hover { color: var(--primary, var(--foreground)); text-decoration: underline; }

.gov-goals-list { display: flex; flex-direction: column; gap: 0.85rem; }
.gov-goal-row {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border); border-radius: 0.55rem;
    background: var(--card);
}
.gov-goal-row-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem;
}
.gov-goal-row-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gov-goal-row-title { font-size: 0.92rem; font-weight: 600; color: var(--foreground); }
.gov-goal-row-category { font-size: 0.8rem; color: var(--muted-foreground); }

.gov-goal-status-pill {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
    flex: none;
}
.gov-goal-status-pill.ontrack {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.gov-goal-status-pill.atrisk {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}

.gov-goal-row-progress { width: 100%; }
.gov-goal-row-progress-track {
    width: 100%; height: 6px; border-radius: 9999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.gov-goal-row-progress-bar {
    height: 100%; border-radius: 9999px;
    background: var(--status-info);
    transition: width 180ms ease;
}
.gov-goal-row-progress-bar.ontrack { background: var(--status-success); }
.gov-goal-row-progress-bar.atrisk  { background: var(--status-warning); }
.gov-goal-status-pill.neutral { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }
.gov-goal-row-progress-bar.neutral { background: var(--muted-foreground); }

.gov-goal-row-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.gov-goal-row-num { font-weight: 600; color: var(--foreground); }

.ceo-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.ceo-page-header-text { display: flex; flex-direction: column; gap: 0.25rem; }
.ceo-page-header-actions {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.ceo-page-header-actions .btn svg { margin-right: 0.35rem; }

.ceo-top-kpis { /* uses .gov-kpi-row grid */ }
.ceo-top-kpi {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.2rem;
    border-left-width: 4px;
}
.ceo-top-kpi--success { border-left-color: var(--status-success); background: var(--status-success-bg); }
.ceo-top-kpi--info    { border-left-color: var(--status-info); background: var(--status-info-bg); }
.ceo-top-kpi--accent  { border-left-color: hsl(265, 75%, 55%); background: rgba(168, 85, 247, 0.08); }
.ceo-top-kpi--warn    { border-left-color: var(--status-warning); background: var(--status-warning-bg); }
.ceo-top-kpi--danger  { border-left-color: var(--status-danger); background: var(--status-danger-bg); }
.ceo-top-kpi-value {
    font-size: 2rem; font-weight: 700; line-height: 1.1;
    color: var(--foreground);
}
.ceo-top-kpi-unit {
    font-size: 1.25rem; font-weight: 600; margin-left: 0.15rem;
    color: var(--muted-foreground);
}
.ceo-top-kpi-name {
    font-size: 0.95rem; font-weight: 600; color: var(--foreground);
}
.ceo-top-kpi-sub { font-size: 0.8rem; }

.ceo-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 0.25rem; padding: 0.4rem;
    background: hsl(220, 15%, 95%); border-radius: 0.75rem;
}
.ceo-tab {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.6rem 1rem;
    background: transparent; color: hsl(220, 15%, 40%);
    border: none; border-radius: 0.5rem; cursor: pointer;
    font-size: 0.95rem; font-weight: 600;
    transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
}
.ceo-tab:hover { color: var(--foreground); }
.ceo-tab--active {
    background: var(--card); color: var(--foreground);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.ceo-subtabs {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem; background: hsl(220, 15%, 96%);
    border-radius: 0.6rem;
}
.ceo-subtab {
    padding: 0.45rem 0.9rem; font-size: 0.9rem; font-weight: 600;
    color: hsl(220, 15%, 40%); background: transparent;
    border: none; border-radius: 0.4rem; cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.ceo-subtab:hover { color: var(--foreground); }
.ceo-subtab--active {
    background: var(--card); color: var(--foreground);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.ceo-section-title {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
    margin: 0 0 0.85rem;
}
.ceo-section-title svg { color: var(--status-info); }

.ceo-progress-track {
    width: 100%; height: 8px; border-radius: 9999px;
    background: rgba(0, 0, 0, 0.08); overflow: hidden;
}
.ceo-progress-bar {
    height: 100%; border-radius: 9999px;
    background: var(--status-info);
    transition: width 180ms ease;
}

.ceo-scorecard-goals {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 1024px) { .ceo-scorecard-goals { grid-template-columns: 1fr; } }
.ceo-scorecard-goal {
    border: 1px solid var(--border); border-radius: 0.65rem;
    padding: 0.85rem 0.95rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.ceo-scorecard-goal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.ceo-scorecard-goal-title { font-weight: 600; color: var(--foreground); }
.ceo-scorecard-goal-weight {
    font-size: 0.75rem; font-weight: 600;
    color: var(--muted-foreground);
    background: hsl(220, 15%, 94%);
    padding: 0.15rem 0.55rem; border-radius: 9999px;
}
.ceo-scorecard-goal-stats { font-size: 0.85rem; }

.ceo-quadrant-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 1024px) { .ceo-quadrant-grid { grid-template-columns: 1fr; } }
.ceo-quadrant-card .card-body { display: flex; flex-direction: column; gap: 0.9rem; }
.ceo-quadrant-card { border-top: 3px solid var(--border); }
.ceo-quadrant-card--financial { border-top-color: var(--status-info); }
.ceo-quadrant-card--customer  { border-top-color: hsl(265, 75%, 55%); }
.ceo-quadrant-card--internal  { border-top-color: var(--status-warning); }
.ceo-quadrant-card--learning  { border-top-color: var(--status-success); }
.ceo-quadrant-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.ceo-quadrant-titlewrap { display: flex; align-items: flex-start; gap: 0.65rem; min-width: 0; }
.ceo-quadrant-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; flex: none;
}
.ceo-quadrant-icon--financial { background: var(--status-info-bg); color: var(--status-info); }
.ceo-quadrant-icon--customer  { background: rgba(168, 85, 247, 0.12); color: hsl(265, 75%, 55%); }
.ceo-quadrant-icon--internal  { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ceo-quadrant-icon--learning  { background: var(--status-success-bg); color: var(--status-success-fg); }
.ceo-quadrant-title {
    font-size: 1.05rem; font-weight: 600; color: var(--foreground);
}
.ceo-quadrant-question {
    font-size: 0.85rem; font-style: italic;
    color: var(--muted-foreground); margin-top: 0.15rem;
}
.ceo-quadrant-score {
    display: flex; flex-direction: column; align-items: flex-end;
    text-align: right;
}
.ceo-quadrant-score-value {
    font-size: 1.5rem; font-weight: 700;
    color: var(--status-info); line-height: 1.1;
}
.ceo-quadrant-score-label { font-size: 0.75rem; }
.ceo-quadrant-kpi {
    background: hsl(220, 15%, 97%);
    border-radius: 0.65rem; padding: 0.85rem 0.95rem;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.ceo-quadrant-kpi-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.ceo-quadrant-kpi-name { font-weight: 600; color: var(--foreground); }
.ceo-quadrant-kpi-weight {
    font-size: 0.72rem; font-weight: 600;
    color: var(--muted-foreground);
    background: var(--card);
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    border: 1px solid var(--border);
}
.ceo-quadrant-kpi-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.ceo-quadrant-kpi-stat {
    display: flex; flex-direction: column; gap: 0.15rem;
    font-size: 0.85rem;
}
.ceo-quadrant-kpi-stat .muted { font-size: 0.72rem; }
.ceo-quadrant-kpi-achievement {
    font-weight: 700; color: var(--status-success);
}

.ceo-summary-card {
    background: var(--status-info-bg);
    border-color: var(--status-info-bg);
}
.ceo-summary-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 900px) { .ceo-summary-grid { grid-template-columns: repeat(2, 1fr); } }
.ceo-summary-col {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    padding: 0.5rem;
}
.ceo-summary-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9999px;
    background: var(--card); color: hsl(220, 30%, 35%);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.ceo-summary-value { color: var(--status-info) !important; }
.ceo-summary-value {
    font-size: 1.75rem; font-weight: 700; color: var(--foreground);
}
.ceo-summary-label { font-size: 0.85rem; text-align: center; }

.ceo-mini-kpi {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start;
    border-left-width: 4px;
}
.ceo-mini-kpi--success { border-left-color: var(--status-success); background: var(--status-success-bg); }
.ceo-mini-kpi--info    { border-left-color: var(--status-info); background: var(--status-info-bg); }
.ceo-mini-kpi--accent  { border-left-color: hsl(265, 75%, 55%); background: rgba(168, 85, 247, 0.08); }
.ceo-mini-kpi-value {
    font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    color: var(--foreground);
}
.ceo-mini-kpi-unit {
    font-size: 1.1rem; font-weight: 600; margin-left: 0.1rem;
    color: var(--muted-foreground);
}
.ceo-mini-kpi-name { font-weight: 600; color: var(--foreground); }
.ceo-mini-kpi-sub { font-size: 0.8rem; }

.ceo-eval-period-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.ceo-eval-period-row .ceo-section-title { margin-bottom: 0; }
.ceo-eval-period-select { width: auto; min-width: 12rem; }

.ceo-eval-list {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.ceo-eval-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border); border-radius: 0.6rem;
    background: var(--card);
}
.ceo-eval-row-info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.ceo-eval-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 9999px; flex: none;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
}
.ceo-eval-avatar--blue   { background: var(--status-info-bg); color: var(--status-info-fg); }
.ceo-eval-avatar--green  { background: var(--status-success-bg); color: var(--status-success-fg); }
.ceo-eval-avatar--purple { background: rgba(168, 85, 247, 0.18); color: hsl(265, 75%, 45%); }
.ceo-eval-avatar--amber  { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ceo-eval-avatar--rose   { background: rgba(244, 63, 94, 0.18); color: hsl(349, 78%, 42%); }
.ceo-eval-row-name { font-weight: 600; color: var(--foreground); }
.ceo-eval-row-role { font-size: 0.82rem; }
.ceo-eval-row-actions {
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.ceo-eval-row-actions .btn svg { margin-right: 0.3rem; }

.bm-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.bm-page-header-text { display: flex; flex-direction: column; gap: 0.25rem; }
.bm-page-header-actions {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.bm-page-header-actions .btn svg { margin-right: 0.35rem; }
.btn.bm-schedule-btn,
.btn.bm-schedule-btn:disabled {
    background: var(--status-info);
    color: #fff;
    border-color: var(--status-info);
    opacity: 1;
}
.btn.bm-schedule-btn:disabled { cursor: not-allowed; }
.btn.bm-schedule-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--status-info) 85%, #000); }

.bm-kpi-row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .bm-kpi-row { grid-template-columns: 1fr; } }

.bm-kpi-tile {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.bm-kpi-tile-name {
    font-size: 0.9rem; font-weight: 600; color: var(--foreground);
}
.bm-kpi-tile-value {
    font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    color: var(--foreground);
}
.bm-kpi-tile-unit {
    font-size: 1.2rem; font-weight: 600; margin-left: 0.1rem;
    color: var(--foreground);
}
.bm-kpi-tile-sub { font-size: 0.8rem; }
.bm-kpi-tile-name--help { display: flex; align-items: center; gap: 0.35rem; }
.bm-kpi-tile-link {
    align-self: flex-start; background: none; border: 0; padding: 0;
    font-size: 0.8rem; color: hsl(217, 91%, 55%); text-decoration: underline; cursor: pointer;
}
.bm-kpi-tile-link:hover { color: hsl(217, 91%, 42%); }
.bm-attendance-note { margin: 0.25rem 0 0.75rem; }
.cal-export-note { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

.bm-meetings-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}

.bm-filter-cluster {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.bm-filter-select-wrap {
    position: relative; display: inline-flex; align-items: center;
}
.bm-filter-icon {
    position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); pointer-events: none;
}
.bm-filter-select-wrap .bm-filter-select {
    padding-left: 2rem; min-width: 12rem;
}

.bm-view-switcher {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden;
}
.bm-view-switcher-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    background: var(--card); color: var(--muted-foreground);
    border: none; cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.bm-view-switcher-btn + .bm-view-switcher-btn { border-left: 1px solid var(--border); }
.bm-view-switcher-btn:hover:not(:disabled) { background: hsl(220, 15%, 96%); color: var(--foreground); }
.bm-view-switcher-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Tab strip reuses .ceo-tabs / .ceo-tab / .ceo-tab--active (see PR 10) */

.bm-meeting-list {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.bm-meeting-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 0.65rem; padding: 0.95rem 1.1rem;
}
.bm-meeting-row-main {
    display: flex; flex-direction: column; gap: 0.5rem;
    flex: 1; min-width: 0;
}
.bm-meeting-row-head {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.bm-meeting-row-title {
    font-weight: 600; font-size: 1rem; color: var(--foreground);
}
.bm-meeting-row-actions {
    display: inline-flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
}
.bm-meeting-row-actions .btn svg { margin-right: 0.3rem; }

/* Meta row (date / time / attendees / materials / tasks) — scoped to the meeting-row
   so we don't collide with BoardMemberCard's existing .bm-meta-row at app.css ~L1500. */
.bm-meeting-row .bm-meta-row {
    display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
    color: var(--muted-foreground); font-size: 0.85rem;
    margin-top: 0;
}
.bm-meeting-row .bm-meta-item {
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.bm-meta-item svg { flex: none; }

.bm-meeting-pill {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600;
    border: 1px solid transparent;
}
.bm-meeting-pill.blue   { background: var(--status-info-bg); color: var(--status-info-fg); border-color: var(--status-info-border); }
.bm-meeting-pill.purple { background: rgba(168, 85, 247, 0.12); color: hsl(265, 75%, 42%); border-color: rgba(168, 85, 247, 0.25); }
.bm-meeting-pill.red    { background: var(--status-danger-bg);  color: var(--status-danger-fg);    border-color: var(--status-danger-border); }
.bm-meeting-pill.amber  { background: var(--status-warning-bg);  color: var(--status-warning-fg);   border-color: var(--status-warning-border); }
.bm-meeting-pill.green  { background: var(--status-success-bg); color: var(--status-success-fg);  border-color: var(--status-success-border); }

/* Readiness chip ("All Ready" / "In Progress" / "Overdue Tasks") */
.bm-readiness-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600;
    border: 1px solid transparent;
}
.bm-readiness-pill.success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.bm-readiness-pill.warn    { background: var(--status-warning-bg);  color: var(--status-warning-fg);  border-color: var(--status-warning-border); }
.bm-readiness-pill.danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg);   border-color: var(--status-danger-border); }

/* Minutes-state chip on Past rows and the meeting details header */
.bm-minutes-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600;
    border: 1px solid transparent;
}
.bm-minutes-pill.success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.bm-minutes-pill.warn    { background: var(--status-warning-bg);  color: var(--status-warning-fg);  border-color: var(--status-warning-border); }
.bm-minutes-pill.danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg);   border-color: var(--status-danger-border); }

.bm-status-pill {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.65rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.bm-status-pill.scheduled { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.bm-status-pill.live      { background: var(--status-danger-bg);  color: var(--status-danger-fg);   border-color: var(--status-danger-border); }
.bm-status-pill.draft     { background: hsl(220, 15%, 92%);       color: hsl(220, 15%, 35%); border-color: hsl(220, 15%, 85%); }
.bm-status-pill.completed { background: var(--status-info-bg); color: var(--status-info-fg); border-color: var(--status-info-border); }

.bm-join-live-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem; border-radius: 0.5rem;
    background: rgb(220, 38, 38); color: #fff;
    border: 1px solid rgb(185, 28, 28);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    transition: background 100ms ease;
}
.bm-join-live-btn:hover:not(:disabled) { background: rgb(185, 28, 28); }
.bm-join-live-btn:disabled { opacity: 0.85; cursor: not-allowed; }

.bm-summary-quote {
    margin: 0.15rem 0 0;
    font-style: italic; color: var(--muted-foreground);
    font-size: 0.9rem;
}

/* ----- Meetings missing minutes attention card (amber clone of docs-review-card) ----- */
.bm-minutes-card {
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
}
.bm-minutes-card-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.bm-minutes-card-icon {
    color: var(--status-warning);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; margin-top: 0.1rem;
}
.bm-minutes-card-icon svg { flex: none; }
.bm-minutes-card-title { color: var(--status-warning-fg); font-weight: 600; }
.bm-minutes-card-subtitle { color: var(--status-warning-fg); font-size: 0.875rem; margin-top: 0.15rem; opacity: 0.85; }
.bm-minutes-card-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.9rem; }
.bm-minutes-card-item {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--card);
    border: 1px solid var(--status-warning-bg);
    border-radius: 0.55rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem; color: var(--foreground); text-decoration: none;
    width: fit-content; max-width: 100%;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bm-minutes-card-item:hover { border-color: var(--status-warning-border); box-shadow: var(--shadow-sm); }
.bm-minutes-card-item:hover .bm-minutes-card-item-link { color: var(--primary); }
.bm-minutes-card-item-icon { color: var(--status-warning); display: inline-flex; flex: none; }
.bm-minutes-card-item-name { font-weight: 600; }
.bm-minutes-card-item-meta { color: var(--muted-foreground); font-size: 0.8rem; }
.bm-minutes-card-item-link { color: var(--muted-foreground); display: inline-flex; cursor: pointer; margin-left: 0.15rem; }
.bm-minutes-card-item-link:hover { color: var(--primary); }
.bm-minutes-card-more { font-size: 0.85rem; }

.ceo-eval-progress { margin-top: 1rem; }
.ceo-eval-progress-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem;
    color: var(--foreground);
}

.ceo-eval-pane {
    display: flex; flex-direction: column; gap: 1rem;
}
.ceo-eval-pane-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.ceo-eval-pane-title {
    font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0;
}
.ceo-eval-pane-weight {
    font-size: 0.75rem; font-weight: 600;
    color: var(--muted-foreground);
    background: hsl(220, 15%, 94%);
    padding: 0.2rem 0.6rem; border-radius: 9999px;
}

.ceo-rating-list {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.ceo-rating-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border); border-radius: 0.6rem;
    background: var(--card);
}
.ceo-rating-row-text { display: flex; flex-direction: column; gap: 0.15rem; }
.ceo-rating-row-question { font-weight: 500; color: var(--foreground); }
.ceo-rating-row-avg { font-size: 0.8rem; }
.ceo-rating-stars {
    display: inline-flex; align-items: center; gap: 0.2rem;
}
.ceo-star-outline {
    color: var(--status-warning-border);
}

.ceo-eval-comments {
    display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem;
}
.ceo-eval-comments-label {
    font-size: 0.85rem; font-weight: 600; color: var(--foreground);
}
.ceo-eval-comments textarea { resize: vertical; }

.ceo-eval-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 0.5rem; margin-top: 0.5rem;
}

.ceo-report-config {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem;
    align-items: flex-end;
}
@media (max-width: 900px) { .ceo-report-config { grid-template-columns: 1fr; } }
.ceo-report-config-action {
    display: flex; align-items: flex-end; justify-content: flex-end;
}
/* The grid bottom-aligns its cells; rows carry no bottom margin here and the button matches the input box. */
.ceo-report-config .form-row { margin-bottom: 0; }
.ceo-report-config-action .btn { padding-top: 0.55rem; padding-bottom: 0.55rem; white-space: nowrap; }
.ceo-report-config-note { margin: 0 0 0.9rem; }
.ceo-report-config-action .btn svg { margin-right: 0.35rem; }

.ceo-report-kpi {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start;
    border-left-width: 4px;
}
.ceo-report-kpi--success { border-left-color: var(--status-success); background: var(--status-success-bg); }
.ceo-report-kpi--info    { border-left-color: var(--status-info); background: var(--status-info-bg); }
.ceo-report-kpi--accent  { border-left-color: hsl(265, 75%, 55%); background: rgba(168, 85, 247, 0.08); }
.ceo-report-kpi--warn    { border-left-color: var(--status-warning); background: var(--status-warning-bg); }
.ceo-report-kpi-value {
    font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    color: var(--foreground);
}
.ceo-report-kpi-value--text { font-size: 1.35rem; }
.ceo-report-kpi-unit {
    font-size: 1.1rem; font-weight: 600; margin-left: 0.1rem;
    color: var(--muted-foreground);
}
.ceo-report-kpi-name { font-size: 0.85rem; }

.ceo-report-section { margin-top: 1.25rem; }
.ceo-report-section:first-child { margin-top: 0; }
.ceo-report-section-title {
    font-size: 0.95rem; font-weight: 600; color: var(--foreground);
    margin: 0 0 0.5rem;
}
.ceo-report-summary {
    font-size: 0.9rem; color: var(--foreground); line-height: 1.55; margin: 0;
}
.ceo-report-summary strong { font-weight: 600; }

.ceo-report-goals {
    display: flex; flex-direction: column; gap: 0.85rem;
}
.ceo-report-goal { display: flex; flex-direction: column; gap: 0.35rem; }
.ceo-report-goal-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.85rem; font-weight: 600; color: var(--foreground);
}

.ceo-report-kpi-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
@media (max-width: 900px) { .ceo-report-kpi-grid { grid-template-columns: 1fr; } }
.ceo-report-kpi-card {
    border: 1px solid var(--border); border-radius: 0.6rem;
    padding: 0.7rem 0.85rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    background: hsl(220, 15%, 97%);
}
.ceo-report-kpi-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.ceo-report-kpi-card-name { font-weight: 600; color: var(--foreground); }
.ceo-report-kpi-card-achievement {
    font-weight: 700; color: var(--status-success);
}
.ceo-report-kpi-card-stats {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.78rem;
}

.ceo-report-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 0.5rem; flex-wrap: wrap;
}
.ceo-report-actions .btn svg { margin-right: 0.35rem; }

.ceo-comp-config {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 900px) { .ceo-comp-config { grid-template-columns: 1fr; } }

.ceo-comp-kpi {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start;
    border-left-width: 4px;
}
.ceo-comp-kpi--success { border-left-color: var(--status-success); background: var(--status-success-bg); }
.ceo-comp-kpi--info    { border-left-color: var(--status-info); background: var(--status-info-bg); }
.ceo-comp-kpi--danger  { border-left-color: var(--status-danger); background: var(--status-danger-bg); }
.ceo-comp-kpi--accent  { border-left-color: hsl(265, 75%, 55%); background: rgba(168, 85, 247, 0.08); }
.ceo-comp-kpi-value {
    font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    color: var(--foreground);
}
.ceo-comp-kpi-value--danger { color: var(--status-danger); }
.ceo-comp-kpi-unit {
    font-size: 1.1rem; font-weight: 600; margin-left: 0.1rem;
    color: var(--muted-foreground);
}
.ceo-comp-kpi-name { font-size: 0.85rem; }
.ceo-comp-kpi-sub { font-size: 0.75rem; }

.ceo-comp-list {
    display: flex; flex-direction: column;
}
.ceo-comp-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.ceo-comp-row:last-child { border-bottom: none; }
.ceo-comp-row-label { font-weight: 500; color: var(--foreground); }
.ceo-comp-row-meta {
    display: flex; flex-direction: column; align-items: flex-end;
}
.ceo-comp-row-amount { font-weight: 600; color: var(--foreground); }
.ceo-comp-row-sub {
    font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.1rem;
}
.ceo-comp-row-sub--warn { color: var(--status-danger); font-weight: 600; }
.ceo-comp-row--total {
    margin-top: 0.5rem; padding-top: 0.85rem;
    border-top: 2px solid var(--border);
    border-bottom: none;
}
.ceo-comp-row--total .ceo-comp-row-label,
.ceo-comp-row--total .ceo-comp-row-amount {
    font-size: 1.05rem; font-weight: 700;
}

.ceo-comp-factors {
    display: flex; flex-direction: column; gap: 0.85rem;
}
.ceo-comp-factor { display: flex; flex-direction: column; gap: 0.35rem; }
.ceo-comp-factor-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.85rem; font-weight: 600; color: var(--foreground);
}

.ceo-comp-board-actions {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.65rem; flex-wrap: wrap;
}

.gov-policy-alert--warn {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
}
.gov-policy-alert--warn .gov-policy-alert-icon { color: var(--status-warning); }

.ceo-comp-partner {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border); border-radius: 0.65rem;
    padding: 0.9rem 1rem;
    margin-top: 0.85rem;
}
.ceo-comp-partner-info {
    display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
}
.ceo-comp-partner-head {
    display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
.ceo-comp-partner-name { font-weight: 600; color: var(--foreground); }
.ceo-comp-partner-desc { font-size: 0.85rem; margin: 0; }
.ceo-comp-partner-rating {
    display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem;
}
.ceo-comp-partner-rating svg { color: var(--status-warning-fg); }

/* --- CEO & Board Alignment: click-to-edit affordances --- */
.ceo-editable {
    cursor: pointer;
    position: relative;
    transition: box-shadow 120ms ease;
}
.ceo-editable:hover { box-shadow: 0 0 0 2px var(--accent); }
.ceo-edit-hint {
    position: absolute; top: 0.5rem; right: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted-foreground);
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
}
.ceo-editable:hover > .ceo-edit-hint,
.ceo-editable:hover > .card-body > .ceo-edit-hint { opacity: 0.85; }

.ceo-section-title-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.85rem;
}
.ceo-section-title-row .ceo-section-title { margin-bottom: 0; }
.ceo-section-title-row .btn svg { margin-right: 0.3rem; }

.ceo-add-card {
    border: 1px dashed var(--border); border-radius: var(--radius);
    background: transparent; color: var(--muted-foreground);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 1.25rem; min-height: 6rem;
    cursor: pointer; font: inherit;
    transition: border-color 120ms ease, color 120ms ease;
}
.ceo-add-card:hover { border-color: var(--accent); color: var(--foreground); }

.ceo-star-filled { color: var(--status-warning-fg); }

.btn.ceo-btn-danger {
    margin-left: auto;
    color: var(--status-danger);
    border-color: var(--status-danger);
}

/* Icon-only edit buttons on rows (evaluation questions, compensation lines) */
.btn.ceo-icon-btn { padding: 0.3rem 0.45rem; line-height: 1; }

/* Ghost danger button for removing an evaluator from the roster */
.btn.ceo-btn-danger-ghost { color: var(--status-danger); }
.btn.ceo-btn-danger-ghost:hover { border-color: var(--status-danger); }

/* Clickable rating stars (the current evaluator's own rating) */
.ceo-star-btn {
    background: none; border: 0; padding: 0.1rem; margin: 0;
    display: inline-flex; align-items: center; cursor: pointer;
    border-radius: 4px;
}
.ceo-star-btn:hover { transform: scale(1.12); }
.ceo-star-btn:focus-visible { outline: 2px solid var(--accent); }
.ceo-star-btn:disabled { cursor: default; }

.ceo-rating-row-side { display: inline-flex; align-items: center; gap: 0.6rem; }

.ceo-eval-period-controls { display: inline-flex; align-items: center; gap: 0.5rem; }
.ceo-eval-pane-meta { display: inline-flex; align-items: center; gap: 0.5rem; }

.ceo-eval-submitted-note {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; margin: 0 0 0.25rem;
}

/* Board-member picker modal */
.ceo-picker-list {
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: 320px; overflow-y: auto;
}
.ceo-picker-row {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.5rem 0.6rem; border-radius: 0.5rem; cursor: pointer;
}
.ceo-picker-row:hover { background: var(--muted); }
.ceo-picker-row-info { display: flex; flex-direction: column; }

/* View-evaluation modal */
.ceo-view-body { max-height: 60vh; overflow-y: auto; }
.ceo-view-area { margin-top: 1rem; }
.ceo-view-area:first-child { margin-top: 0; }
.ceo-view-rating-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}
.ceo-view-rating-row:last-of-type { border-bottom: none; }
.ceo-view-rating-question { font-size: 0.9rem; color: var(--foreground); }
.ceo-view-comment { font-size: 0.85rem; font-style: italic; margin: 0.5rem 0 0; }

.docs-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.docs-page-header-actions { flex-shrink: 0; }
.docs-page-header-actions .btn svg { margin-right: 0.35rem; }

.btn.docs-new-doc-btn,
.btn.docs-new-doc-btn:disabled {
    background: var(--status-info);
    color: #fff;
    border-color: var(--status-info);
    opacity: 1;
}
.btn.docs-new-doc-btn:disabled { cursor: not-allowed; }
.btn.docs-new-doc-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--status-info) 85%, #000); }

.btn.docs-security-btn,
.btn.docs-security-btn:disabled {
    background: var(--status-danger);
    color: #fff;
    border-color: var(--status-danger);
    opacity: 1;
}
.btn.docs-security-btn:disabled { cursor: not-allowed; }
.btn.docs-security-btn:hover:not(:disabled) { background: var(--status-danger-fg); }

.btn.docs-new-doc-btn--purple,
.btn.docs-new-doc-btn--purple:disabled {
    background: hsl(265, 75%, 55%);
    border-color: hsl(265, 75%, 55%);
}
.btn.docs-new-doc-btn--purple:hover:not(:disabled) { background: hsl(265, 75%, 48%); }

.docs-top-kpis { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1280px) { .docs-top-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .docs-top-kpis { grid-template-columns: 1fr; } }

.docs-top-kpi {
    border-radius: var(--radius); padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: 0.35rem;
    border: 1px solid transparent;
}
.docs-top-kpi-value {
    font-size: 1.75rem; font-weight: 700; line-height: 1.1;
    color: var(--foreground);
}
.docs-top-kpi-name {
    font-size: 0.9rem; font-weight: 600; color: var(--foreground);
}
.docs-top-kpi--info {
    background: var(--status-info-bg); border-color: var(--status-info-bg);
}
.docs-top-kpi--info .docs-top-kpi-value { color: var(--status-info-fg); }
.docs-top-kpi--success {
    background: hsl(150, 60%, 94%); border-color: hsl(150, 60%, 80%);
}
.docs-top-kpi--success .docs-top-kpi-value { color: var(--status-success-fg); }
.docs-top-kpi--warn {
    background: var(--status-warning-bg); border-color: var(--status-warning-border);
}
.docs-top-kpi--warn .docs-top-kpi-value { color: var(--status-warning-fg); }
.docs-top-kpi--neutral {
    background: hsl(220, 20%, 96%); border-color: hsl(220, 18%, 88%);
}
.docs-top-kpi--neutral .docs-top-kpi-value { color: hsl(220, 25%, 25%); }
.docs-top-kpi--muted {
    background: hsl(220, 14%, 97%); border-color: hsl(220, 14%, 90%);
}
.docs-top-kpi--muted .docs-top-kpi-value { color: hsl(220, 12%, 50%); }
.docs-top-kpi--purple {
    background: hsl(265, 75%, 95%); border-color: hsl(265, 60%, 86%);
}
.docs-top-kpi--purple .docs-top-kpi-value { color: hsl(265, 75%, 45%); }

.docs-tabs { grid-auto-columns: 1fr; }

.docs-tab-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.docs-tab-header-title {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 1.35rem; font-weight: 700; color: var(--foreground);
    margin: 0;
}
.docs-tab-header-icon { color: var(--status-info); flex: none; }
.docs-tab-header-icon--danger { color: var(--status-danger); }

.docs-subtabs { display: inline-flex; }

.docs-filter-select {
    min-width: 11rem; height: 2.4rem;
    background: var(--card);
}

.docs-overview-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.docs-overview-toolbar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1rem 0;
}
.docs-overview-search { position: relative; flex: 1 1 auto; min-width: 0; }
.docs-overview-search-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); pointer-events: none;
}
.docs-overview-search-input {
    width: 100%; padding-left: 2.25rem;
}
.docs-overview-toolbar .docs-filter-select {
    flex: 0 0 14rem; width: 14rem;
}

/* Stub link button — replaces href="#" pattern. Looks like a link but is
   semantically a disabled button. */
.docs-link-btn {
    background: none; border: none; padding: 0;
    color: var(--status-info); cursor: pointer;
    font: inherit; font-size: 0.85rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.docs-link-btn:hover { text-decoration: underline; }
.docs-link-btn:disabled { cursor: not-allowed; opacity: 0.75; text-decoration: none; }
.docs-link-btn svg { color: var(--status-info); }

.docs-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    background: transparent; color: var(--muted-foreground);
    border: 1px solid transparent; border-radius: 0.4rem;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.docs-icon-btn:disabled { cursor: not-allowed; }
.docs-icon-btn:hover:not(:disabled) {
    background: hsl(220, 15%, 96%); color: var(--foreground);
    border-color: var(--border);
}

.docs-doc-list { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem; }

.docs-doc-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border); border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    background: var(--card);
}
.docs-doc-row-main {
    display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; flex: 1;
}
.docs-doc-row-head {
    display: flex; align-items: flex-start; gap: 0.75rem;
}
.docs-doc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; flex: none;
    background: var(--status-info-bg); color: var(--status-info);
}
.docs-doc-titlewrap { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.docs-doc-title {
    font-weight: 600; color: var(--foreground); font-size: 0.98rem;
}
.docs-doc-meta {
    display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--muted-foreground);
}
.docs-doc-meta-item { font-size: 0.8rem; }

.docs-doc-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600; text-transform: lowercase;
    border: 1px solid transparent;
}
.docs-doc-pill--approved {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.docs-doc-pill--review {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.docs-doc-pill--draft {
    background: hsl(220, 18%, 93%); color: hsl(220, 18%, 35%);
    border-color: hsl(220, 18%, 85%);
}
.docs-doc-pill--archived {
    background: hsl(220, 12%, 97%); color: hsl(220, 10%, 52%);
    border-color: hsl(220, 12%, 88%);
}
/* Labels amendment documents in lists so they don't read as standalone peers of
   the document they amend. */
.docs-amends-pill {
    display: inline-flex; align-items: center; padding: 0.1rem 0.55rem;
    border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
    background: var(--status-info-bg); color: var(--status-info-fg);
    border: 1px solid var(--status-info-bg);
}

.docs-doc-pill--review-overdue {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}
.docs-doc-pill--review-due {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}

/* ----- Document Expirations attention card (mirrors cal-overdue-card) ----- */
.docs-review-card {
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
}
.docs-review-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.docs-review-icon {
    color: hsl(0, 70%, 50%);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; margin-top: 0.1rem;
}
.docs-review-icon svg { flex: none; }
.docs-review-title { color: hsl(0, 65%, 42%); font-weight: 600; }
.docs-review-subtitle { color: hsl(0, 40%, 45%); font-size: 0.875rem; margin-top: 0.15rem; }
.docs-review-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.9rem; }
.docs-review-item {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--card);
    border: 1px solid var(--status-danger-bg);
    border-radius: 0.55rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem; color: var(--foreground); text-decoration: none;
    width: fit-content; max-width: 100%;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.docs-review-item:hover { border-color: hsl(0, 70%, 80%); box-shadow: var(--shadow-sm); }
.docs-review-item:hover .docs-review-item-link { color: var(--primary); }
.docs-review-item-icon { color: hsl(0, 70%, 50%); display: inline-flex; flex: none; }
.docs-review-item-name { font-weight: 600; }
.docs-review-item-meta { color: var(--muted-foreground); font-size: 0.8rem; }
.docs-review-item-link { color: var(--muted-foreground); display: inline-flex; cursor: pointer; margin-left: 0.15rem; }
.docs-review-item-link:hover { color: var(--primary); }
.docs-review-more { font-size: 0.85rem; }

.docs-version-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    background: var(--card); color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.docs-committee-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    background: hsl(265, 75%, 95%); color: hsl(265, 75%, 38%);
    border: 1px solid hsl(265, 60%, 86%);
}

.docs-tag-pill {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.5rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 500;
    background: hsl(220, 15%, 96%); color: hsl(220, 18%, 35%);
    border: 1px solid hsl(220, 18%, 90%);
}

.docs-doc-tags {
    display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}

.docs-doc-relwrap { margin-top: 0.2rem; }

.docs-doc-actions {
    display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
}

.docs-bylaws-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 1024px) { .docs-bylaws-grid { grid-template-columns: 1fr; } }

.docs-bylaws-list { display: flex; flex-direction: column; gap: 0.85rem; }

.docs-bylaws-card { cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.docs-bylaws-card:hover { border-color: var(--ring); }
.docs-bylaws-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.docs-bylaws-card--selected { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.docs-bylaws-card .card-body { display: flex; flex-direction: column; gap: 0.55rem; }
.docs-bylaws-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem;
}
.docs-bylaws-article { font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.docs-bylaws-title { font-size: 0.85rem; color: var(--muted-foreground); margin-top: 0.1rem; }

.docs-bylaws-pill {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.6rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600; text-transform: lowercase;
    border: 1px solid transparent; flex-shrink: 0;
}
.docs-bylaws-pill--success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.docs-bylaws-pill--warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.docs-bylaws-pill--info {
    background: var(--status-info-bg); color: var(--status-info-fg);
    border-color: var(--status-info-border);
}

.docs-bylaws-preview {
    color: var(--muted-foreground); font-size: 0.85rem; margin: 0;
}
.docs-bylaws-dates {
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.78rem; color: var(--muted-foreground);
}
.docs-bylaws-dates strong { color: var(--foreground); font-weight: 600; }

.docs-bylaws-warn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border: 1px solid var(--status-warning-border);
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem; font-weight: 600;
}

.docs-bylaws-foot { margin-top: 0.25rem; }

/* Sticky so selecting a group far down the card list keeps its details on screen. */
.docs-bylaws-detail { align-self: start; position: sticky; top: 1rem; }
.docs-bylaws-detail .card-body { display: flex; flex-direction: column; gap: 0.55rem; }

.docs-bylaws-empty .card-body {
    min-height: 240px;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 0.6rem;
    text-align: center;
}
.docs-empty-icon { color: var(--muted-foreground); opacity: 0.5; }
.docs-empty-text { color: var(--muted-foreground); font-size: 0.9rem; }

/* Pending Amendments cards (amber — mirrors docs-bylaws-warn tokens) */
.docs-amendment-list { display: flex; flex-direction: column; gap: 0.85rem; }
.docs-amendment-card {
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
.docs-amendment-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem;
}
.docs-amendment-name { font-weight: 600; color: var(--foreground); }
.docs-amendment-meta { color: var(--muted-foreground); font-size: 0.8rem; margin-top: 0.15rem; }
.docs-amendment-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }

/* Approved — awaiting application (amendment-card look, success-tinted left border) */
.docs-awaiting-title { font-weight: 600; color: var(--foreground); font-size: 0.9rem; margin-top: 0.5rem; }
.docs-awaiting-card {
    background: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
    border-left: 3px solid var(--status-success-fg);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
.docs-awaiting-meta { color: var(--muted-foreground); font-size: 0.8rem; margin-top: 0.15rem; }
/* Group-header counterpart of docs-bylaws-warn, success tokens */
.docs-awaiting-note {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--status-success-bg); color: var(--status-success-fg);
    border: 1px solid var(--status-success-border);
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem; font-weight: 600;
}

/* Amendment vote tally + inline ballot — docs-namespaced variant of the meeting
   md-vote vocabulary, same status tokens. */
.docs-vote-tally {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-top: 0.6rem; font-size: 0.82rem;
}
.docs-vote-tally-label { font-weight: 600; color: var(--foreground); }
.docs-vote-count { font-weight: 600; }
.docs-vote-count--for { color: var(--status-success-fg); }
.docs-vote-count--against { color: var(--status-danger-fg); }
.docs-vote-count--abstain { color: var(--muted-foreground); }
.docs-vote-meta { color: var(--muted-foreground); }
.docs-vote-progress { margin-top: 0.5rem; }
.docs-vote-ballot { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.docs-vote-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; font-weight: 600;
    border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
    border-radius: 9999px; padding: 0.25rem 0.7rem; cursor: pointer;
}
.docs-vote-btn:disabled { cursor: default; opacity: 0.7; }
.docs-vote-btn--for.is-on { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.docs-vote-btn--against.is-on { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.docs-vote-btn--abstain.is-on { background: var(--secondary); color: var(--foreground); border-color: var(--border); }
.docs-vote-hint { color: var(--muted-foreground); font-size: 0.78rem; font-style: italic; }
.docs-threshold-wrap { display: flex; align-items: center; gap: 0.4rem; }

/* AI section sets: slim group header row + per-section cards beneath it */
.docs-bylaws-grouphead { cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.docs-bylaws-grouphead:hover { border-color: var(--ring); }
.docs-bylaws-grouphead:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.docs-bylaws-grouphead .card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; }
.docs-bylaws-grouphead-main { min-width: 0; }
.docs-bylaws-grouphead-meta {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    font-size: 0.78rem; color: var(--muted-foreground);
}
.docs-bylaws-grouphead-meta strong { color: var(--foreground); font-weight: 600; }

.docs-bylaws-stale {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border: 1px solid var(--status-warning-border);
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem; font-weight: 600;
}

.docs-section-card { margin-left: 1rem; }
.docs-section-card .card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 1rem; }
.docs-section-article { font-size: 0.95rem; font-weight: 700; color: var(--foreground); }
.docs-section-title { font-size: 0.82rem; color: var(--muted-foreground); }
.docs-section-preview { color: var(--muted-foreground); font-size: 0.82rem; margin: 0; }
.docs-section-foot { margin-top: 0.15rem; }

/* Extraction busy flow (detail pane) */
.docs-extract-progress { display: flex; flex-direction: column; gap: 0.35rem; }
.docs-extract-bar { height: 0.5rem; border-radius: 9999px; background: var(--muted); overflow: hidden; }
.docs-extract-bar-fill { height: 100%; border-radius: 9999px; background: var(--primary); transition: width 400ms ease; }
.docs-extract-status { font-size: 0.8rem; color: var(--muted-foreground); }

/* Section reader — replaces the card grid in place */
.docs-reader { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.docs-reader-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.docs-reader-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--card); color: var(--foreground); cursor: pointer;
}
.docs-reader-back:hover { border-color: var(--ring); }
.docs-reader-headtext { flex: 1; min-width: 0; }
.docs-reader-title { font-size: 1.15rem; font-weight: 700; color: var(--foreground); }
.docs-reader-meta { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.docs-reader-actions { flex-shrink: 0; }

.docs-reader-stale {
    display: flex; align-items: center; gap: 0.4rem;
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border: 1px solid var(--status-warning-border);
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem; font-weight: 600;
}

.docs-reader-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1024px) { .docs-reader-grid { grid-template-columns: 1fr; } }

.docs-reader-rail {
    display: flex; flex-direction: column; gap: 0.4rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); padding: 0.75rem;
    position: sticky; top: 1rem;
    max-height: calc(100vh - 2rem); overflow-y: auto;
}
.docs-reader-search { margin-bottom: 0.25rem; }
.docs-reader-rail-group {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted-foreground); margin-top: 0.35rem;
}
.docs-reader-rail-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
    width: 100%; text-align: left;
    border: 1px solid transparent; border-radius: 0.45rem;
    background: transparent; color: var(--foreground);
    padding: 0.4rem 0.55rem; cursor: pointer;
    font-size: 0.82rem;
}
.docs-reader-rail-item:hover { background: var(--secondary); }
.docs-reader-rail-item--relevant {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.docs-reader-rail-label { font-weight: 600; }
.docs-reader-rail-name { color: var(--muted-foreground); font-size: 0.78rem; }
.docs-reader-rail-empty { font-size: 0.8rem; }
.docs-reader-chip {
    display: inline-flex; align-items: center;
    padding: 0.05rem 0.45rem; border-radius: 9999px;
    font-size: 0.68rem; font-weight: 600;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
    border: 1px solid var(--primary);
    margin-top: 0.15rem;
}

.docs-reader-content { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.docs-reader-content-title { font-size: 1rem; font-weight: 700; color: var(--foreground); margin: 0; }
.docs-reader-section {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); padding: 1rem 1.1rem;
}
.docs-reader-section--relevant {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
}
.docs-reader-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.docs-reader-section-head h3 { font-size: 0.95rem; font-weight: 700; color: var(--foreground); margin: 0; }
.docs-reader-section-head h4 { font-size: 0.85rem; font-weight: 600; color: var(--muted-foreground); margin: 0.1rem 0 0; }
.docs-reader-badge {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: 0.15rem 0.6rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
    border: 1px solid var(--primary);
}
.docs-reader-body { white-space: pre-wrap; font-size: 0.88rem; color: var(--foreground); margin-top: 0.55rem; }
.docs-threshold-wrap .input { max-width: 8rem; }

/* Amendment Workflow static explainer — per-step pastel circles match the reference
   (1 info-blue, 2 purple, 3 amber, 4 green), same tone families as the docs KPI tiles. */
.docs-amend-workflow { display: flex; flex-direction: column; gap: 1.1rem; }
.docs-amend-workflow-title { font-size: 1.15rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.2rem; }
.docs-amend-step { display: flex; align-items: flex-start; gap: 0.9rem; }
.docs-amend-step-num {
    width: 2rem; height: 2rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; flex: none;
}
.docs-amend-step--info .docs-amend-step-num { background: var(--status-info-bg); color: var(--status-info-fg); }
.docs-amend-step--purple .docs-amend-step-num { background: hsl(265, 75%, 95%); color: hsl(265, 75%, 45%); }
.docs-amend-step--warn .docs-amend-step-num { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.docs-amend-step--success .docs-amend-step-num { background: hsl(150, 60%, 94%); color: var(--status-success-fg); }
.docs-amend-step-title { font-weight: 600; color: var(--foreground); }
.docs-amend-step-desc { color: var(--muted-foreground); font-size: 0.85rem; margin-top: 0.1rem; }

/* Related-documents groups (workspace section + skim modal) */
.docs-rel-group + .docs-rel-group { margin-top: 0.9rem; }
.docs-rel-group-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--muted-foreground);
    margin-bottom: 0.35rem;
}
.docs-rel-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
}
.docs-rel-row:last-child { border-bottom: none; }
.docs-rel-row-main {
    display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    min-width: 0;
}
.docs-rel-row-name { font-weight: 600; color: var(--foreground); }

.docs-coming-soon .card-body {
    min-height: 120px; display: flex; align-items: center; justify-content: center;
}

.docs-policy-filters {
    display: flex; align-items: center; gap: 0.75rem;
}
.docs-policy-filters .docs-overview-search { flex: 1 1 auto; min-width: 0; }
.docs-policy-filters .docs-filter-select { flex: 0 0 12rem; width: 12rem; }

.docs-policy-list { display: flex; flex-direction: column; gap: 0.85rem; }

/* Access Control tab */
.docs-access-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start;
}
@media (max-width: 1100px) { .docs-access-grid { grid-template-columns: 1fr; } }
.docs-access-roles { display: flex; flex-direction: column; gap: 0.85rem; }
.docs-access-role-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.docs-access-role-desc { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }
.docs-access-usercount {
    flex: none; font-size: 0.78rem; font-weight: 600; color: var(--status-success-fg);
    background: var(--status-success-bg); border: 1px solid var(--status-success-border);
    border-radius: 9999px; padding: 0.15rem 0.6rem; white-space: nowrap;
}
.docs-access-perms { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.docs-access-perm {
    font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 9999px;
    text-transform: capitalize; border: 1px solid transparent;
}
.docs-access-perm--on {
    background: var(--status-info-bg); color: var(--status-info-fg); border-color: var(--status-info-border);
}
.docs-access-perm--off {
    background: var(--muted, rgba(0,0,0,0.04)); color: var(--muted-foreground);
    opacity: 0.55; text-decoration: line-through;
}
.docs-access-detail-title {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0 0 0.75rem;
}
.docs-access-detail-role { font-weight: 700; font-size: 1.05rem; color: var(--foreground); }
.docs-access-detail-active { font-size: 0.85rem; color: var(--muted-foreground); margin: 0.6rem 0; }
.docs-access-detail-perms-label {
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    color: var(--muted-foreground); letter-spacing: 0.03em; margin-bottom: 0.4rem;
}
.docs-access-detail-perm-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0; border-bottom: 1px solid var(--border);
}
.docs-access-detail-perm-name { font-size: 0.9rem; color: var(--foreground); }
.docs-access-toggle {
    width: 34px; height: 18px; border-radius: 9999px; background: var(--border);
    position: relative; flex: none;
}
.docs-access-toggle::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 9999px; background: #fff;
    transition: left 120ms ease;
}
.docs-access-toggle--on { background: var(--status-info); }
.docs-access-toggle--on::after { left: 18px; }
.docs-access-detail-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

.docs-policy-card .card-body { display: flex; flex-direction: column; gap: 0.75rem; }
.docs-policy-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.docs-policy-titlewrap {
    display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; flex: 1;
}
.docs-policy-pills {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    margin-top: 0.3rem;
}
/* Policy card: title + pills inline; description on its own line below */
.docs-policy-card .docs-doc-title {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.docs-policy-description {
    margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted-foreground);
    line-height: 1.4;
}
.docs-policy-state-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600; text-transform: lowercase;
    border: 1px solid transparent;
}
.docs-policy-state-pill--success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.docs-policy-state-pill--warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}

.docs-policy-meta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
}
@media (max-width: 640px) { .docs-policy-meta { grid-template-columns: 1fr; } }
.docs-policy-meta-col { display: flex; flex-direction: column; gap: 0.1rem; }
.docs-policy-meta-label { font-size: 0.72rem; color: var(--muted-foreground); font-weight: 600; }
.docs-policy-meta-value { font-size: 0.88rem; color: var(--foreground); font-weight: 500; }

.docs-policy-progresswrap { display: flex; flex-direction: column; gap: 0.35rem; }
.docs-policy-progress-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.78rem; color: var(--muted-foreground); font-weight: 600;
}
.docs-policy-progress-value { color: var(--foreground); }
.docs-policy-bar--success { background: var(--status-success); }
.docs-policy-bar--info    { background: var(--status-info); }
.docs-policy-bar--warn    { background: var(--status-warning); }

.docs-policy-actionwrap { margin-top: 0.1rem; }

.docs-template-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.docs-template-card .card-body {
    display: flex; flex-direction: column; gap: 0.6rem; height: 100%;
}
.docs-template-name { font-size: 0.98rem; font-weight: 600; color: var(--foreground); }
.docs-template-meta {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-size: 0.8rem;
}
.docs-template-desc { margin: 0; font-size: 0.85rem; line-height: 1.4; flex: 1; }
.docs-template-use { align-self: flex-start; margin-top: auto; }

.docs-gov-kpis { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1280px) { .docs-gov-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .docs-gov-kpis { grid-template-columns: 1fr; } }

.docs-gov-summary {
    color: var(--muted-foreground); font-size: 0.88rem; margin: 0;
}

.docs-type-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    background: hsl(265, 75%, 95%); color: hsl(265, 75%, 40%);
    border: 1px solid hsl(265, 60%, 86%);
}
.docs-type-pill--info {
    background: var(--status-info-bg); color: var(--status-info-fg);
    border-color: var(--status-info-bg);
}
.docs-type-pill--success {
    background: hsl(150, 60%, 94%); color: var(--status-success-fg);
    border-color: hsl(150, 50%, 82%);
}
.docs-type-pill--purple {
    background: hsl(265, 75%, 95%); color: hsl(265, 75%, 40%);
    border-color: hsl(265, 60%, 86%);
}

.docs-gov-actions {
    display: flex; flex-direction: column; gap: 0.45rem;
    border-top: 1px solid var(--border); padding-top: 0.65rem; margin-top: 0.25rem;
}
.docs-gov-actions-head {
    font-size: 0.78rem; font-weight: 600; color: var(--foreground);
}
.docs-gov-action-row {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.85rem;
}
.docs-gov-action-text { color: var(--foreground); }

.docs-action-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    border: 1px solid transparent; flex-shrink: 0;
}
.docs-action-pill--success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.docs-action-pill--warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.docs-action-pill--info {
    background: var(--status-info-bg); color: var(--status-info-fg);
    border-color: var(--status-info-border);
}
.docs-action-pill--danger {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}

/* Policy compliance rollup (Policies → Compliance Status) + Track Compliance dialog */
.docs-compliance-rate-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.35rem; }
.docs-compliance-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; text-align: center; }
.docs-compliance-stat { padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border); }
.docs-compliance-stat--success { background: var(--status-success-bg); }
.docs-compliance-stat--warn { background: var(--status-warning-bg); }
.docs-compliance-stat--danger { background: var(--status-danger-bg); }
.docs-compliance-stat-value { font-size: 1.5rem; font-weight: 800; }
.docs-compliance-stat--success .docs-compliance-stat-value { color: var(--status-success-fg); }
.docs-compliance-stat--warn .docs-compliance-stat-value { color: var(--status-warning-fg); }
.docs-compliance-stat--danger .docs-compliance-stat-value { color: var(--status-danger-fg); }
.docs-compliance-stat-label { font-size: 0.8rem; color: var(--muted-foreground); }
.docs-compliance-cat-list { display: flex; flex-direction: column; gap: 0.9rem; }
.docs-compliance-cat-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.3rem; }
.docs-compliance-current { border: 2px solid var(--border); }
.docs-compliance-current-badge { font-size: 0.95rem; padding: 0.3rem 1rem; margin-top: 0.5rem; text-transform: none; }
.docs-compliance-h4 { margin: 0 0 0.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.docs-compliance-history { display: flex; flex-direction: column; gap: 0.5rem; }
.docs-compliance-history-item { padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; }
.docs-compliance-history-head { display: flex; align-items: center; justify-content: space-between; }
.docs-compliance-history-notes { margin: 0.25rem 0 0; }
.docs-compliance-history-by { margin: 0.25rem 0 0; }

.docs-search-inputwrap {
    position: relative; display: flex; align-items: center;
}
.docs-search-icon {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); pointer-events: none;
}
.docs-search-input {
    width: 100%; padding-left: 2.4rem; height: 2.6rem;
    background: var(--card);
}

.docs-search-results-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.docs-search-results-count { font-size: 0.85rem; }

.docs-search-result {
    display: flex; flex-direction: column; gap: 0.55rem;
    border: 1px solid var(--border); border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    background: var(--card);
}
.docs-search-result-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.docs-search-titlewrap {
    display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0;
}
.docs-search-pills {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    margin-top: 0.3rem;
}
.docs-match-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    background: var(--status-success-bg); color: var(--status-success-fg);
    border: 1px solid var(--status-success-border);
}

.docs-search-preview {
    color: var(--muted-foreground); font-size: 0.88rem; margin: 0;
}
.docs-search-highlights {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    font-size: 0.8rem;
}
.docs-search-highlights-label { color: var(--muted-foreground); font-weight: 600; }
.docs-highlight-pill {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.5rem; border-radius: 0.3rem;
    font-size: 0.75rem; font-weight: 500;
    background: var(--status-warning-bg); color: var(--status-warning-fg);
}
.docs-search-meta {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--muted-foreground);
}
.docs-search-tags {
    display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.docs-search-relwrap { margin-top: 0.2rem; }

.edu-page-title {
    display: inline-flex; align-items: center; gap: 0.6rem;
}
.edu-page-title-icon { color: var(--status-info); flex: none; }

.edu-toolbar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.1rem;
}
.edu-filter-wrap { position: relative; flex: 0 0 14rem; }
.edu-filter-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); pointer-events: none;
}
.edu-filter-select {
    width: 100%; height: 2.4rem; padding-left: 2.25rem;
    background: var(--card);
}

.edu-partners-title {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 1.15rem; font-weight: 700; color: var(--foreground);
    margin: 0;
}
.edu-partners-title svg { color: var(--status-info); flex: none; }
.edu-partners-sub { font-size: 0.88rem; margin: 0.2rem 0 0; }

.edu-partner-list {
    display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1rem;
}
.edu-partner-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border); border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    background: var(--card);
}
.edu-partner-row--platinum { border-color: hsl(215, 16%, 65%); }
.edu-partner-row--gold     { border-color: hsl(48, 96%, 53%); }
.edu-partner-main {
    display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
}
.edu-partner-name {
    display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
    font-size: 1.02rem; font-weight: 700; color: var(--foreground);
}
.edu-partner-desc { font-size: 0.88rem; color: var(--muted-foreground); margin: 0; }

.edu-tier-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600;
    border: 1px solid transparent;
}
.edu-tier-pill--platinum {
    background: hsl(215, 25%, 94%); color: hsl(215, 25%, 30%);
    border-color: hsl(215, 16%, 78%);
}
.edu-tier-pill--gold {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}

.edu-rating {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem;
}
.edu-rating svg { color: var(--status-warning-fg); flex: none; }
.edu-rating-value { font-weight: 700; color: var(--foreground); }
.edu-rating-count { color: var(--muted-foreground); }

.edu-course-card { border-left: 3px solid var(--status-info); }
.edu-course-card .card-body { display: flex; flex-direction: column; gap: 0.7rem; }
.edu-course-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.edu-course-titlewrap { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.edu-course-title { font-size: 1.08rem; font-weight: 700; color: var(--foreground); }
.edu-course-pills {
    display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
.edu-price {
    font-size: 1.35rem; font-weight: 700; flex-shrink: 0;
    color: var(--status-info-fg);
}
.edu-course-desc { font-size: 0.9rem; color: var(--muted-foreground); margin: 0; }

.edu-pill {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600; text-transform: lowercase;
    white-space: nowrap;
    border: 1px solid transparent;
}
.edu-pill--success {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.edu-pill--success-outline {
    background: transparent; color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.edu-pill--warn {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}
.edu-pill--info {
    background: var(--status-info-bg); color: var(--status-info-fg);
    border-color: var(--status-info-bg);
}
.edu-pill--type {
    background: var(--card); color: var(--muted-foreground);
    border-color: var(--border);
}
.edu-pill--registered {
    background: hsl(265, 75%, 95%); color: hsl(265, 75%, 38%);
    border-color: hsl(265, 60%, 86%);
}

.edu-meta-row {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    font-size: 0.85rem; color: var(--muted-foreground);
}
.edu-meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.edu-meta-item svg { flex: none; }

.edu-attendees { display: flex; flex-direction: column; gap: 0.45rem; }
.edu-attendees-label { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.edu-attendee-chips {
    display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
.edu-attendee-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.25rem 0.6rem; border-radius: 0.45rem;
    font-size: 0.8rem; font-weight: 600; color: var(--foreground);
    background: hsl(220, 15%, 96%); border: 1px solid hsl(220, 18%, 90%);
}
.edu-attendee-committee {
    display: inline-flex; align-items: center;
    padding: 0.06rem 0.45rem; border-radius: 9999px;
    font-size: 0.68rem; font-weight: 600;
    background: var(--card); color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.edu-course-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.edu-provider { font-size: 0.8rem; color: var(--muted-foreground); }
.edu-course-actions {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.edu-course-actions .btn svg { margin-right: 0.35rem; }

.edu-attendance-title {
    font-size: 1.25rem; font-weight: 700; color: var(--foreground);
    margin: 0 0 1rem;
}
.edu-attendance-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.edu-attendance-table th[scope="col"] {
    text-align: left; padding: 0.6rem 0.75rem;
    font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground);
    border-bottom: 1px solid var(--border);
}
.edu-attendance-table td,
.edu-attendance-table th[scope="row"] {
    text-align: left; padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--foreground); vertical-align: middle;
}
.edu-attendance-table th[scope="row"] { font-weight: 600; }
.edu-attendance-table tbody tr:last-child td,
.edu-attendance-table tbody tr:last-child th[scope="row"] { border-bottom: none; }
.edu-attendance-table .btn svg { margin-right: 0.35rem; }
.edu-not-available { color: var(--muted-foreground); font-size: 0.85rem; }

.edu-ghost-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: transparent; color: var(--foreground);
    border: none; border-radius: 0.4rem;
    font-size: 0.85rem; font-weight: 600;
    cursor: not-allowed; opacity: 0.85;
}
.edu-ghost-btn svg { flex: none; }

.edu-report-card { border-left: 3px solid var(--status-success); }
.edu-report-card .card-body { display: flex; flex-direction: column; gap: 0.85rem; }
.edu-report-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.edu-report-titlewrap { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.edu-report-title { font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.edu-report-by { font-size: 0.85rem; color: var(--status-info); }
.edu-report-dates { font-size: 0.8rem; color: var(--muted-foreground); }
.edu-report-rating { text-align: right; flex-shrink: 0; }
.edu-report-rating-value {
    font-size: 1.35rem; font-weight: 700; line-height: 1.1;
    color: var(--status-success-fg);
}
.edu-report-rating-label { font-size: 0.78rem; color: var(--muted-foreground); }

.edu-report-section { display: flex; flex-direction: column; gap: 0.25rem; }
.edu-report-section-label { font-size: 0.88rem; font-weight: 700; color: var(--foreground); }
.edu-report-section-text { font-size: 0.88rem; color: var(--muted-foreground); margin: 0; }

.edu-shared-chips {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.edu-shared-chip {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600;
    background: var(--card); color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.edu-report-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    border-top: 1px solid var(--border); padding-top: 0.85rem;
}
.edu-report-foot-actions {
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.edu-report-foot-actions .btn svg { margin-right: 0.35rem; }

.edu-recommends-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.12rem 0.6rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
    background: var(--status-success-bg); color: var(--status-success-fg);
    border: 1px solid var(--status-success-border);
}

.edu-review-card { border-left: 3px solid var(--status-warning-fg); }
.edu-review-card .card-body { display: flex; flex-direction: column; gap: 0.55rem; }
.edu-review-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.edu-review-headline { font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.edu-stars { display: inline-flex; align-items: center; gap: 0.2rem; }
.edu-stars .edu-rating-value { margin-left: 0.3rem; }
.edu-star--filled { color: var(--status-warning-fg); }
.edu-star--empty { color: hsl(220, 15%, 78%); }
.edu-review-course {
    font-size: 0.85rem; font-weight: 600; color: var(--status-info);
}
.edu-review-by { font-size: 0.8rem; color: var(--muted-foreground); }
.edu-review-body { font-size: 0.9rem; color: var(--foreground); margin: 0.25rem 0 0; }

.edu-review-section { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.35rem; }
.edu-review-section-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 700;
}
.edu-review-section-label svg { flex: none; }
.edu-review-section-label--good { color: var(--status-success-fg); }
.edu-review-section-label--bad { color: var(--status-danger); }
.edu-review-chips {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.edu-review-chip {
    display: inline-flex; align-items: center;
    padding: 0.12rem 0.55rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600;
    border: 1px solid transparent;
}
.edu-review-chip--good {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border-color: var(--status-success-border);
}
.edu-review-chip--bad {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border-color: var(--status-danger-border);
}

.edu-review-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.5rem;
}
.edu-helpful-counts { font-size: 0.8rem; color: var(--muted-foreground); }
.edu-review-foot-actions {
    display: inline-flex; align-items: center; gap: 0.5rem;
}

.pm-page-title { display: flex; align-items: center; gap: 0.6rem; }
.pm-page-title-icon { color: var(--status-info); flex: none; }

.pm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1024px) { .pm-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pm-kpis { grid-template-columns: 1fr; } }
.pm-kpi {
    border-radius: var(--radius); border: 2px solid transparent;
    padding: 1rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
.pm-kpi-value {
    font-size: 1.5rem; font-weight: 700; line-height: 1.2;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.pm-kpi-label { font-size: 0.85rem; color: #6b7280; }
.pm-kpi--blue  { background: #eff6ff; border-color: #bfdbfe; }
.pm-kpi--blue .pm-kpi-value  { color: var(--status-info-fg); }
.pm-kpi--slate { background: var(--primary-foreground); border-color: #cbd5e1; }
.pm-kpi--slate .pm-kpi-value { color: #334155; }
.pm-kpi--gold  { background: #fefce8; border-color: #fde047; }
.pm-kpi--gold .pm-kpi-value  { color: var(--status-warning-fg); }
.pm-kpi--green { background: #f0fdf4; border-color: #bbf7d0; }
.pm-kpi--green .pm-kpi-value { color: #15803d; }
.pm-kpi-star { color: #15803d; fill: #15803d; flex: none; }

.pm-featured-banner {
    border: 2px solid #fde68a; border-radius: var(--radius);
    background: linear-gradient(135deg, #fffbeb, #fefce8);
    padding: 1.25rem;
}
.pm-featured-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
.pm-featured-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.pm-featured-award { color: #d97706; flex: none; }
.pm-featured-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pm-featured-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    background: #fff; border: 1px solid #fde68a; border-radius: var(--radius);
    font-size: 0.875rem; font-weight: 600; color: var(--foreground);
    cursor: pointer; transition: background 100ms ease;
}
.pm-featured-chip:hover { background: #fffbeb; }
.pm-featured-chip svg { flex: none; }

.pm-toolbar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem; flex-wrap: wrap;
}
.pm-toolbar-filters { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.pm-filter-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: var(--card); border: 1px solid var(--input); border-radius: var(--radius);
    font-size: 0.875rem; color: var(--foreground); cursor: not-allowed;
}
.pm-filter-btn > span { flex: 1; text-align: left; }
.pm-filter-caret { color: var(--muted-foreground); flex: none; }

.pm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 1024px) { .pm-grid { grid-template-columns: 1fr; } }
.pm-card {
    background: var(--card); border: 2px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
    transition: box-shadow 120ms ease;
}
.pm-card:hover { box-shadow: var(--shadow-md); }
.pm-card--platinum { border-color: #94a3b8; }
.pm-card--gold     { border-color: #facc15; }
.pm-card--silver   { border-color: #d1d5db; }
.pm-card--bronze   { border-color: #fdba74; }

.pm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.pm-card-head-main { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.pm-logo-box {
    width: 64px; height: 64px; flex: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    display: flex; align-items: center; justify-content: center;
    color: #2563eb;
}
.pm-card-id { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.pm-card-titlerow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pm-card-name { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--foreground); }
.pm-featured-pill {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.6rem; border-radius: 9999px;
    background: #fef3c7; color: var(--status-warning-fg);
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.pm-tier-pill {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.6rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap;
}
.pm-tier-pill--platinum { background: #f1f5f9; color: #334155; border-color: #94a3b8; }
.pm-tier-pill--gold     { background: #fefce8; color: var(--status-warning-fg); border-color: #facc15; }
.pm-tier-pill--silver   { background: var(--background); color: #4b5563; border-color: #d1d5db; }
.pm-tier-pill--bronze   { background: #fff7ed; color: #c2410c; border-color: #fdba74; }

.pm-rating-row { display: inline-flex; align-items: center; gap: 0.15rem; }
.pm-rating-text { margin-left: 0.35rem; font-size: 0.85rem; color: var(--foreground); }
.pm-star { flex: none; }
.pm-star--full  { color: #facc15; fill: #facc15; }
.pm-star--half  { color: #facc15; fill: #fef08a; }
.pm-star--empty { color: #d1d5db; fill: none; }
.pm-star--amber { color: #f59e0b; fill: #f59e0b; }

.pm-card-site {
    color: var(--muted-foreground); flex: none;
    display: inline-flex; padding: 0.2rem; border-radius: 0.35rem;
    transition: color 100ms ease;
}
.pm-card-site:hover { color: #2563eb; }

.pm-card-desc { margin: 0; font-size: 0.9rem; color: #4b5563; line-height: 1.5; }

.pm-cat-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pm-cat-chip {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.65rem; border-radius: 9999px;
    background: #f3f4f6; color: #334155;
    font-size: 0.75rem; font-weight: 600;
}

.pm-stat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 0.85rem 0; text-align: center;
}
.pm-stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.pm-stat-value {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 1.05rem; font-weight: 700;
}
.pm-stat-value svg { flex: none; }
.pm-stat-value--blue   { color: #2563eb; }
.pm-stat-value--green  { color: #16a34a; }
.pm-stat-value--purple { color: #9333ea; }
.pm-stat-value--orange { color: #ea580c; }
.pm-stat-label { font-size: 0.75rem; color: #6b7280; }

.pm-section-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--foreground); }
.pm-spec-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pm-spec-chip {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.65rem; border-radius: 9999px;
    background: var(--background); color: var(--foreground);
    border: 1px solid var(--border);
    font-size: 0.75rem; font-weight: 600;
}

.pm-pricing-row {
    background: var(--background); border-radius: var(--radius);
    padding: 0.75rem 1rem; font-size: 0.875rem; color: #4b5563;
}
.pm-pricing-row strong { color: var(--foreground); margin-right: 0.3rem; }

.pm-card-actions { display: flex; gap: 0.6rem; margin-top: auto; }
/* Declared after .btn in this file, so equal-specificity overrides win by source order. */
.pm-cta-primary { flex: 1; }
.pm-cta-primary:disabled { opacity: 1; cursor: not-allowed; }
.pm-card-secondary { flex: none; }

.pm-dialog-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; animation: bm-fade-in 120ms ease;
}
.pm-dialog {
    position: relative; width: 100%; max-width: 56rem;
    max-height: 90vh; overflow-y: auto;
    background: var(--card); border-radius: 0.75rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1.15rem;
    animation: bm-zoom-in 120ms ease;
}
.pm-dialog-close {
    position: absolute; right: 1rem; top: 1rem;
    width: 2rem; height: 2rem; border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--muted-foreground);
    cursor: pointer; transition: background 100ms ease, color 100ms ease;
}
.pm-dialog-close:hover { background: hsl(220, 15%, 93%); color: var(--foreground); }

.pm-dialog-head { display: flex; align-items: flex-start; gap: 1rem; padding-right: 2.5rem; }
.pm-dialog-id { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; }
.pm-dialog-titlerow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pm-dialog-name { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--foreground); }

.pm-dialog-body { display: flex; flex-direction: column; gap: 1.15rem; }

.pm-ov-about { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.6; }
.pm-ov-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
    background: var(--background); border-radius: var(--radius);
    padding: 1rem; text-align: center;
}
@media (max-width: 640px) { .pm-ov-stats { grid-template-columns: repeat(2, 1fr); } }

.pm-cert-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pm-cert-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.65rem; border-radius: 9999px;
    background: #dcfce7; color: #15803d;
    font-size: 0.78rem; font-weight: 600;
}
.pm-cert-chip svg { flex: none; }

.pm-pricing-model {
    background: #eff6ff; border-radius: var(--radius);
    padding: 1rem 1.15rem;
}
.pm-pricing-model-title { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: var(--foreground); }
.pm-pricing-model-text { margin: 0; font-size: 0.9rem; color: var(--status-info-fg); }

.pm-contact-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.15rem;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.pm-contact-card .pm-section-title { margin-bottom: 0.1rem; }
.pm-contact-name { margin: 0; font-size: 0.9rem; color: var(--foreground); }
.pm-contact-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.pm-contact-row svg { color: var(--muted-foreground); flex: none; }
.pm-contact-row a { color: #2563eb; }
.pm-contact-row a:hover { text-decoration: underline; }

.pm-service-item {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.15rem;
}
.pm-service-name { margin: 0 0 0.45rem; font-size: 1rem; font-weight: 700; color: var(--foreground); }
.pm-service-cat {
    display: inline-flex; align-items: center;
    padding: 0.18rem 0.6rem; border-radius: 9999px;
    background: var(--card); border: 1px solid var(--border);
    font-size: 0.75rem; font-weight: 600; color: var(--foreground);
}
.pm-service-desc { margin: 0.6rem 0 0; font-size: 0.9rem; color: #4b5563; line-height: 1.5; }

.pm-testimonial {
    background: var(--background); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.15rem;
}
.pm-quote-icon { color: #93c5fd; flex: none; }
.pm-testimonial-text {
    margin: 0.5rem 0 1rem; font-size: 0.95rem; font-style: italic;
    color: var(--foreground); line-height: 1.6;
}
.pm-testimonial-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.pm-testimonial-author { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--foreground); }
.pm-testimonial-org { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }
.pm-testimonial-stars { display: inline-flex; align-items: center; gap: 0.1rem; }

.pm-case-study {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.pm-case-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--foreground); }
.pm-case-size {
    display: flex; align-items: center; width: 100%;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border); border-radius: 9999px;
    font-size: 0.78rem; font-weight: 600; color: var(--foreground);
}
.pm-case-desc { margin: 0; font-size: 0.92rem; color: #4b5563; line-height: 1.55; }
.pm-case-results-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--foreground); }
.pm-case-results {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.pm-case-results li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--foreground); }
.pm-case-check { color: #22c55e; flex: none; }

.pm-dialog-foot {
    display: flex; align-items: center; gap: 0.75rem;
    border-top: 1px solid var(--border); padding-top: 1rem;
}

.ea-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ea-header-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.ea-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .ea-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ea-kpis { grid-template-columns: 1fr; } }
.ea-kpi {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.15rem; cursor: pointer; text-align: left;
    font: inherit; color: inherit; text-decoration: none;
    transition: box-shadow 120ms ease;
}
.ea-kpi:hover { box-shadow: 0 0 0 2px hsla(220, 35%, 18%, 0.15); }
.ea-kpi--destructive { background: hsla(0, 72%, 51%, 0.05); border-color: hsla(0, 72%, 51%, 0.2); }
.ea-kpi--destructive:hover { box-shadow: 0 0 0 2px hsla(0, 72%, 51%, 0.3); }
.ea-kpi--orange { background: rgba(249, 115, 22, 0.05); border-color: rgba(249, 115, 22, 0.2); }
.ea-kpi--orange:hover { box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3); }
.ea-kpi-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ea-kpi-label {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--muted-foreground);
}
.ea-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--foreground); line-height: 1.2; }
.ea-kpi-value--destructive { color: var(--destructive); }
.ea-kpi-value--orange { color: #ea580c; }
.ea-kpi-sub { font-size: 0.78rem; color: var(--muted-foreground); }
.ea-kpi-icon {
    flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: hsla(220, 35%, 18%, 0.08); color: var(--primary);
}
.ea-kpi-icon--destructive { background: hsla(0, 72%, 51%, 0.1); color: var(--destructive); }
.ea-kpi-icon--orange { background: rgba(249, 115, 22, 0.1); color: #f97316; }

.ea-main-grid {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem; align-items: start;
}
@media (max-width: 1200px) { .ea-main-grid { grid-template-columns: 1fr; } }
.ea-side-col { display: flex; flex-direction: column; gap: 1.5rem; }
.ea-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 1.25rem 1.25rem 0.75rem; flex-wrap: wrap;
}
.ea-card-body { padding: 0 1.25rem 1.25rem; }
.ea-card-title {
    display: flex; align-items: center; gap: 0.5rem; margin: 0;
    font-size: 1.05rem; font-weight: 700; color: var(--foreground);
}
.ea-card-title-icon { display: inline-flex; flex: none; }
.ea-card-sub { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }
.ea-tone-primary { color: var(--primary); display: inline-flex; }
.ea-tone-destructive { color: var(--destructive); display: inline-flex; }
.ea-tone-muted { color: var(--muted-foreground); display: inline-flex; }

.ea-card-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ea-view-switch {
    display: inline-flex; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.ea-view-switch .ea-iconbtn { border-radius: 0; }
.ea-view-switch .ea-iconbtn + .ea-iconbtn { border-left: 1px solid var(--border); }
.ea-select { width: auto; font-size: 0.85rem; padding: 0.4rem 0.6rem; }
.ea-filter-icon { display: inline-flex; color: var(--muted-foreground); flex: none; }
.ea-clear-filter {
    display: inline-flex; align-items: center; gap: 0.25rem;
    height: 2rem; padding: 0 0.75rem; border: none; border-radius: 0.4rem;
    background: transparent; color: var(--foreground);
    font-size: 0.75rem; cursor: pointer; white-space: nowrap;
    transition: background 100ms ease;
}
.ea-clear-filter:hover { background: hsl(220, 15%, 93%); }
.ea-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border: none; background: transparent;
    color: var(--muted-foreground); border-radius: 0.4rem; cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.ea-iconbtn:hover:not(:disabled) { background: hsl(220, 15%, 93%); color: var(--foreground); }
.ea-iconbtn:disabled { cursor: not-allowed; }
.ea-iconbtn--active { background: hsl(220, 15%, 93%); color: var(--foreground); }
.ea-empty { padding: 0.75rem 0.25rem; font-size: 0.875rem; }

.ea-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 700;
    background: var(--secondary); color: var(--secondary-foreground);
}
.ea-tab-count--danger { background: var(--destructive); color: #fff; }

.ea-task-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.ea-task-row {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem;
    border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card);
    cursor: pointer; transition: background 120ms ease;
}
.ea-task-row:hover { background: hsla(215, 20%, 95%, 0.3); }
.ea-task-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ea-task-row--overdue { border-color: hsla(0, 72%, 51%, 0.2); background: hsla(0, 72%, 51%, 0.05); }
.ea-task-row--overdue:hover { background: hsla(0, 72%, 51%, 0.1); }
.ea-task-row--duetoday { border-color: rgba(249, 115, 22, 0.2); background: rgba(249, 115, 22, 0.05); }
.ea-task-row--duetoday:hover { background: rgba(249, 115, 22, 0.1); }
.ea-task-icon {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--secondary); color: var(--foreground);
}
.ea-task-main { flex: 1; min-width: 0; }
.ea-task-titlerow { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ea-task-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--foreground); }
.ea-task-desc { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }
.ea-task-meta {
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    margin-top: 0.35rem; font-size: 0.78rem; color: var(--muted-foreground);
}
.ea-meta-sep { color: var(--muted-foreground); }
.ea-meta-due--overdue { color: var(--destructive); font-weight: 600; }
.ea-meta-due--today { color: #ea580c; font-weight: 600; }
.ea-meeting-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-weight: 600; color: var(--foreground);
}
.ea-task-actions { display: flex; align-items: center; gap: 0.15rem; flex: none; margin-left: auto; }
.ea-chevron { display: inline-flex; color: var(--muted-foreground); flex: none; }

.ea-pill {
    display: inline-flex; align-items: center; padding: 0.1rem 0.45rem;
    border-radius: 9999px; font-size: 0.65rem; font-weight: 600; line-height: 1.4;
    white-space: nowrap;
}
.ea-pill--destructive { background: var(--destructive); color: #fff; }
.ea-pill--orange { background: #f97316; color: #fff; }
.ea-pill--navy { background: var(--primary); color: var(--primary-foreground); }
.ea-pill--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ea-pill--green { background: #16a34a; color: #fff; }
.ea-pill-outline {
    display: inline-flex; align-items: center; padding: 0.1rem 0.45rem;
    border-radius: 9999px; border: 1px solid var(--border); background: transparent;
    font-size: 0.65rem; font-weight: 600; line-height: 1.4; color: var(--foreground);
    white-space: nowrap;
}
.ea-pill-outline--required { border-color: hsla(0, 72%, 51%, 0.3); color: var(--destructive); }

.ea-alert-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.5rem; }
.ea-alert-row {
    display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; text-align: left;
    padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 0.6rem;
    background: hsla(215, 20%, 95%, 0.3); cursor: pointer; font: inherit; color: inherit;
    transition: background 120ms ease;
}
.ea-alert-row--critical { border-color: hsla(0, 72%, 51%, 0.3); background: hsla(0, 72%, 51%, 0.05); }
.ea-alert-row--critical:hover { background: hsla(0, 72%, 51%, 0.1); }
.ea-alert-row--warning { border-color: rgba(249, 115, 22, 0.2); background: rgba(249, 115, 22, 0.05); }
.ea-alert-row--warning:hover { background: rgba(249, 115, 22, 0.1); }
.ea-alert-row--info:hover { background: hsla(215, 20%, 95%, 0.7); }
.ea-alert-icon { flex: none; display: inline-flex; margin-top: 0.1rem; }
.ea-alert-icon--critical { color: var(--destructive); }
.ea-alert-icon--warning { color: #f97316; }
.ea-alert-icon--info { color: var(--primary); }
.ea-alert-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.ea-alert-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ea-alert-title { font-size: 0.88rem; font-weight: 600; color: var(--foreground); }
.ea-alert-desc { font-size: 0.8rem; color: var(--muted-foreground); line-height: 1.45; }
.ea-alert-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--muted-foreground); }

.ea-member-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.ea-member-row {
    display: flex; align-items: flex-start; gap: 0.65rem; width: 100%; text-align: left;
    padding: 0.55rem 0.5rem; border: none; background: transparent; border-radius: 0.6rem;
    cursor: pointer; font: inherit; color: inherit; transition: background 120ms ease;
}
.ea-member-row:hover { background: hsla(215, 20%, 95%, 0.5); }
.ea-avatar {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: hsla(220, 35%, 18%, 0.1); color: var(--primary);
    font-size: 0.72rem; font-weight: 600;
}
.ea-avatar--lg { width: 2.75rem; height: 2.75rem; font-size: 0.9rem; }
.ea-member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ea-member-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ea-member-name { font-size: 0.88rem; font-weight: 600; color: var(--foreground); }
.ea-member-titleright { display: inline-flex; align-items: center; gap: 0.35rem; }
.ea-pending-pill {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem;
    border-radius: 9999px; border: 1px solid rgba(249, 115, 22, 0.3);
    color: #ea580c; font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
.ea-member-role { font-size: 0.78rem; color: var(--muted-foreground); }
.ea-member-progress-row { display: flex; align-items: center; gap: 0.5rem; }
.ea-member-hours { font-size: 0.72rem; color: var(--muted-foreground); flex: none; }

.ea-progress { display: block; flex: 1; background: var(--secondary); border-radius: 9999px; overflow: hidden; }
.ea-progress--sm { height: 6px; }
.ea-progress--md { height: 8px; }
.ea-progress-fill { display: block; height: 100%; background: var(--primary); border-radius: 9999px; }

.ea-collapse-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; padding: 1.1rem 1.25rem; background: transparent; border: none;
    cursor: pointer; text-align: left; font: inherit; color: inherit; flex-wrap: wrap;
    border-radius: var(--radius);
}
.ea-collapse-head:hover { background: hsla(215, 20%, 95%, 0.4); }
.ea-collapse-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ea-collapse-head-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.ea-head-icon-circle {
    flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--secondary);
}
.ea-head-title {
    display: flex; align-items: center; gap: 0.6rem; margin: 0;
    font-size: 1.1rem; font-weight: 700; color: var(--foreground); flex-wrap: wrap;
}
.ea-collapse-head-right { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.ea-collapse-body { padding: 0 1.25rem 1.25rem; }
.ea-head-progress { display: inline-flex; align-items: center; gap: 0.5rem; }
.ea-head-progress .ea-progress { width: 6rem; flex: none; }
.ea-head-pct { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }

.ea-filter-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ea-filter-btn {
    padding: 0.35rem 0.8rem; border-radius: 0.5rem; border: 1px solid var(--border);
    background: var(--card); color: var(--foreground); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: background 100ms ease, color 100ms ease;
}
.ea-filter-btn:hover { background: hsl(220, 15%, 95%); }
.ea-filter-btn--active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.ea-filter-btn--active:hover { background: var(--primary); }

.ea-template-list { display: flex; flex-direction: column; gap: 0.65rem; }
.ea-template-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card);
}
.ea-template-row--disabled { opacity: 0.6; background: hsla(215, 20%, 95%, 0.2); }
.ea-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.ea-dot--orange { background: #f97316; }
.ea-dot--red { background: var(--destructive); }
.ea-dot--navy { background: var(--primary); }
.ea-template-main { flex: 1; min-width: 0; }
.ea-template-titlerow { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ea-template-title { font-size: 0.9rem; font-weight: 600; color: var(--foreground); }
.ea-link-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.72rem; color: var(--muted-foreground);
}
.ea-template-meta {
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    margin-top: 0.25rem; font-size: 0.78rem; color: var(--muted-foreground);
}

.ea-switch {
    position: relative; flex: none; width: 2.25rem; height: 1.25rem;
    border-radius: 9999px; border: none; padding: 0;
    background: var(--secondary); cursor: not-allowed;
}
.ea-switch--on { background: var(--primary); }
.ea-switch-knob {
    position: absolute; top: 50%; left: 2px; transform: translateY(-50%);
    width: 0.95rem; height: 0.95rem; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    transition: left 120ms ease;
}
.ea-switch--on .ea-switch-knob { left: calc(100% - 0.95rem - 2px); }

.ea-check-list { display: flex; flex-direction: column; gap: 0.65rem; }
.ea-check-row {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 0.6rem;
    background: var(--card); text-align: left; font: inherit; color: inherit;
}
.ea-check-row:disabled { cursor: not-allowed; }
.ea-check-row--done { border-color: rgba(34, 197, 94, 0.15); background: rgba(34, 197, 94, 0.05); }
.ea-check-state { flex: none; display: inline-flex; color: var(--muted-foreground); }
.ea-check-state--done { color: #16a34a; }
.ea-check-caticon {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: hsla(215, 20%, 95%, 0.8);
}
.ea-check-caticon--primary { color: var(--primary); }
.ea-check-caticon--orange { color: #f97316; }
.ea-check-caticon--destructive { color: var(--destructive); }
.ea-check-caticon--green { color: #16a34a; }
.ea-check-caticon--muted { color: var(--muted-foreground); }
.ea-check-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ea-check-titlerow { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ea-check-title { font-size: 0.9rem; font-weight: 600; color: var(--foreground); }
.ea-check-title--done { text-decoration: line-through; color: var(--muted-foreground); }
.ea-check-desc { font-size: 0.8rem; color: var(--muted-foreground); }
.ea-due-chip {
    flex: none; display: inline-flex; align-items: center; padding: 0.2rem 0.6rem;
    border: 1px solid var(--border); border-radius: 9999px; background: var(--card);
    font-size: 0.72rem; font-weight: 600; color: var(--foreground);
    text-transform: capitalize; white-space: nowrap;
}

.ea-setup-card { border-color: hsla(220, 35%, 18%, 0.2); }
.ea-setup-completion { display: inline-flex; align-items: center; gap: 0.6rem; }
.ea-setup-completion-text { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; }
.ea-setup-completion-label { font-size: 0.72rem; color: var(--muted-foreground); }
.ea-setup-completion-count { font-size: 0.85rem; font-weight: 700; color: var(--foreground); }
.ea-setup-completion .ea-progress { width: 7rem; flex: none; }
.ea-setup-group { margin-top: 1.15rem; }
.ea-setup-group:first-child { margin-top: 0; }
.ea-setup-group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.ea-setup-group-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--foreground); }
.ea-setup-group-desc { font-size: 0.8rem; color: var(--muted-foreground); }
.ea-setup-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.ea-setup-row {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
    padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.6rem;
    background: var(--card); cursor: pointer; font: inherit; color: inherit;
    transition: background 120ms ease;
}
.ea-setup-row--incomplete { background: hsla(0, 72%, 51%, 0.05); }
.ea-setup-row--incomplete:hover { background: hsla(0, 72%, 51%, 0.1); }
.ea-setup-row--optimization { background: hsla(220, 35%, 18%, 0.05); }
.ea-setup-row--optimization:hover { background: hsla(220, 35%, 18%, 0.08); }
.ea-setup-row--recommended { background: hsla(215, 20%, 95%, 0.3); }
.ea-setup-row--recommended:hover { background: hsla(215, 20%, 95%, 0.6); }
.ea-setup-icon {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card);
}
.ea-setup-icon--incomplete { color: var(--destructive); }
.ea-setup-icon--optimization { color: var(--primary); }
.ea-setup-icon--recommended { color: var(--muted-foreground); }
.ea-setup-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ea-setup-titlerow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ea-setup-title { font-size: 0.88rem; font-weight: 600; color: var(--foreground); }
.ea-setup-area { font-size: 0.78rem; color: var(--muted-foreground); }
.ea-impact-pill {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem;
    border-radius: 9999px; font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
.ea-impact-pill--critical { background: var(--destructive); color: #fff; }
.ea-impact-pill--high { background: #f97316; color: #fff; }
.ea-impact-pill--medium { background: var(--secondary); color: var(--secondary-foreground); }

/* Dialog internals only — the overlay/panel shell reuses .pm-dialog-* as-is. */
.ea-dialog { max-width: 42rem; }
.ea-dialog-head { display: flex; align-items: flex-start; gap: 0.85rem; padding-right: 2.5rem; }
.ea-dialog-head--alert { align-items: flex-start; }
.ea-dialog-icon-circle {
    flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--secondary); color: var(--foreground);
}
.ea-dialog-head-text { min-width: 0; }
.ea-dialog-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--foreground); }
.ea-dialog-sub { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--muted-foreground); }
.ea-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.ea-detail-label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.3rem;
}
.ea-detail-value { font-size: 0.92rem; font-weight: 600; color: var(--foreground); }
.ea-detail-subnote { margin-top: 0.15rem; font-size: 0.8rem; color: var(--muted-foreground); }
.ea-detail-subnote--destructive { color: var(--destructive); font-weight: 600; }
.ea-detail-subnote--orange { color: #ea580c; font-weight: 600; }
.ea-sep { border-top: 1px solid var(--border); }
.ea-section-head {
    display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.65rem;
    font-size: 0.92rem; font-weight: 700; color: var(--foreground);
}
.ea-section-head svg { color: var(--muted-foreground); flex: none; }
.ea-link-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.ea-link-row {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
    padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 0.55rem;
    background: var(--card); color: var(--foreground);
    font-size: 0.88rem; font-weight: 500; font-family: inherit;
}
.ea-link-row:disabled { cursor: not-allowed; }
.ea-link-row .ea-chevron { margin-left: auto; }
.ea-link-row svg:first-child { color: var(--muted-foreground); flex: none; }
.ea-doc-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ea-doc-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem;
    border: 1px solid var(--border); border-radius: 9999px; background: var(--card);
    color: var(--foreground); font-size: 0.8rem; font-weight: 500; font-family: inherit;
}
.ea-doc-chip:disabled { cursor: not-allowed; }
.ea-note-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ea-note {
    padding: 0.6rem 0.85rem; border-radius: 0.55rem;
    background: hsla(215, 20%, 95%, 0.6); font-size: 0.85rem; color: var(--foreground);
}
.ea-addnote-row { display: flex; gap: 0.6rem; }
.ea-addnote-input { flex: 1; }
.ea-activity-list { display: flex; flex-direction: column; gap: 0.7rem; }
.ea-activity-item { display: flex; align-items: flex-start; gap: 0.6rem; }
.ea-activity-dot {
    flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: var(--primary); margin-top: 0.4rem;
}
.ea-activity-text { font-size: 0.85rem; font-weight: 500; color: var(--foreground); }
.ea-activity-meta { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.ea-dialog-foot { justify-content: flex-end; flex-wrap: wrap; }

.ea-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
@media (max-width: 640px) { .ea-contact-grid { grid-template-columns: 1fr; } }
.ea-contact-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--foreground); }
.ea-contact-row svg { color: var(--muted-foreground); flex: none; }
.ea-contact-row a { color: var(--primary); }
.ea-contact-row a:hover { text-decoration: underline; }
.ea-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ea-chip {
    display: inline-flex; align-items: center; padding: 0.25rem 0.7rem;
    border-radius: 9999px; background: var(--secondary); color: var(--secondary-foreground);
    font-size: 0.78rem; font-weight: 600;
}
.ea-edu-progress-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.ea-edu-hours { flex: none; font-size: 0.85rem; font-weight: 700; color: var(--foreground); }
.ea-course-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ea-course-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 0.85rem; border-radius: 0.55rem; background: hsla(215, 20%, 95%, 0.6);
}
.ea-course-main { min-width: 0; }
.ea-course-title { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.ea-course-meta { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.ea-hours-chip {
    flex: none; display: inline-flex; align-items: center; padding: 0.15rem 0.55rem;
    border: 1px solid var(--border); border-radius: 9999px; background: var(--card);
    font-size: 0.72rem; font-weight: 600; color: var(--foreground);
}
.ea-ptask-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ea-ptask-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 0.55rem;
}
.ea-ptask-main { min-width: 0; }
.ea-ptask-title { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.ea-ptask-date { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }

.ea-dialog-paragraph { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted-foreground); }
.ea-ref-box { background: hsla(215, 20%, 95%, 0.6); border-radius: 0.55rem; padding: 0.85rem 1rem; }
.ea-ref-box .ea-detail-label { margin-bottom: 0.2rem; }
.ea-ref-text { font-size: 0.9rem; font-weight: 700; color: var(--foreground); }
.ea-ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ea-ai-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--foreground); }
.ea-ai-num {
    flex: none; width: 1.35rem; height: 1.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 0.35rem;
    font-size: 0.72rem; font-weight: 700; color: var(--foreground);
}
.ea-timeline { display: flex; flex-direction: column; gap: 0.7rem; }
.ea-timeline-item { display: flex; align-items: flex-start; gap: 0.6rem; }
.ea-timeline-dot {
    flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: var(--muted-foreground); margin-top: 0.4rem;
}
.ea-timeline-text { font-size: 0.85rem; font-weight: 500; color: var(--foreground); }
.ea-timeline-date { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }

.cm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.cm-toolbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem; flex-wrap: wrap;
}
.cm-select-wrap { position: relative; flex: 0 0 16rem; }
@media (max-width: 700px) { .cm-select-wrap { flex: 1 1 100%; } }
/* appearance:none hides the native select arrow so the lucide chevron matches Lovable. */
.cm-select { appearance: none; padding-right: 2.25rem; cursor: pointer; }
.cm-select-caret {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; color: var(--muted-foreground); pointer-events: none;
}

.cm-section { padding: 1.25rem 1.5rem; }
.cm-card-title {
    display: flex; align-items: center; gap: 0.55rem;
    margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--foreground);
}
.cm-card-title svg { flex: none; }

.cm-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.1rem; }
@media (max-width: 1100px) { .cm-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cm-tile-grid { grid-template-columns: 1fr; } }
.cm-tile { padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; }
.cm-tile-name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.cm-tile-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.cm-tile-none { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.5rem; }

.cm-pill {
    display: inline-flex; align-items: center; padding: 0.15rem 0.6rem;
    border-radius: 9999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.cm-pill--purple { background: #f3e8ff; color: #6b21a8; }
.cm-pill--blue { background: #dbeafe; color: var(--status-info-fg); }
.cm-pill--green { background: #dcfce7; color: #166534; }
.cm-pill--primary { background: var(--primary); color: var(--primary-foreground); }
.cm-pill--secondary { background: var(--secondary); color: var(--secondary-foreground); }

.cm-count { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }

.cm-row-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.1rem; }
.cm-row {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.55rem;
}
.cm-avatar {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: hsla(220, 35%, 18%, 0.1); color: var(--primary);
    font-size: 0.78rem; font-weight: 600;
}
.cm-row-main { flex: 1; min-width: 0; }
.cm-row-name { font-size: 0.9rem; font-weight: 600; color: var(--foreground); }
.cm-row-email { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.cm-row-side { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.cm-row-date { font-size: 0.78rem; color: var(--muted-foreground); white-space: nowrap; }
.cm-row-remove {
    flex: none; width: 2rem; height: 2rem; border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--muted-foreground);
}
.cm-row-remove { cursor: pointer; transition: background 100ms ease, color 100ms ease; }
.cm-row-remove:hover:not(:disabled) { background: var(--status-danger-bg); color: var(--destructive); }
.cm-row-remove:disabled { opacity: 0.6; cursor: not-allowed; }

.cm-btn-danger { background: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); }
.cm-btn-danger:hover:not(:disabled) { filter: brightness(0.94); }

.cm-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 2rem 0; color: var(--muted-foreground);
}
.cm-empty svg { margin-bottom: 0.75rem; }
.cm-empty-title { margin: 0; font-size: 0.95rem; color: var(--muted-foreground); }
.cm-empty-sub { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }

.cm-dialog { max-width: 32rem; }
.cm-dialog-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--foreground); padding-right: 2rem; }
.cm-dialog-desc { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.5; }
.cm-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

.st-page-head { margin-bottom: 1.25rem; }
.st-page-title { display: flex; align-items: center; gap: 0.6rem; }

.st-tabs { margin-bottom: 1.5rem; }

.st-section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.st-section-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--foreground); }
.st-section-title--icon { display: flex; align-items: center; gap: 0.5rem; }
.st-section-sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }
.st-head-actions { display: flex; align-items: center; gap: 0.6rem; }

/* .card ships without padding — settings cards pad themselves. */
.st-card { padding: 1.5rem; }
.st-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.st-card-title--icon { display: flex; align-items: center; gap: 0.5rem; }
.st-card-sub { margin: 0.3rem 0 1.1rem; font-size: 0.85rem; color: var(--muted-foreground); }

/* Lovable colors the crown primary and the palette accent — wrappers keep the Icon helper tone-free. */
.st-icon-primary { display: inline-flex; color: var(--primary); }
.st-icon-accent { display: inline-flex; color: var(--accent); }

.st-field { display: flex; flex-direction: column; gap: 0.45rem; }
.st-field--full { margin-top: 1rem; margin-bottom: 1rem; }
.st-field-label {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.875rem; font-weight: 600; color: var(--foreground);
}
.st-field-label svg { color: var(--muted-foreground); flex: none; }
.st-field-hint { margin: 0; font-size: 0.78rem; line-height: 1.35; color: var(--muted-foreground); }
.st-field-hint--warn { color: var(--status-warning-fg); }
.st-field-hint-btn {
    background: none; border: 0; padding: 0; margin-left: 0.35rem; font: inherit; font-weight: 600;
    color: var(--primary); cursor: pointer; text-decoration: underline;
}
.st-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
@media (max-width: 900px) { .st-form-grid { grid-template-columns: 1fr; } }
.st-textarea { resize: vertical; min-height: 4.5rem; }

/* Native selects with a custom caret so the chevron matches the rest of the icon set. */
.st-select-wrap { position: relative; }
.st-select { appearance: none; padding-right: 2.25rem; width: 100%; cursor: pointer; }
.st-select-caret {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--muted-foreground); display: inline-flex;
}
.st-select:disabled { opacity: 0.7; cursor: not-allowed; }

.st-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; flex-wrap: wrap; }
.st-toolbar .st-select-wrap { flex: none; min-width: 10rem; }

.st-subtab { display: inline-flex; align-items: center; gap: 0.45rem; }

.st-table-card { padding: 1.25rem 1.5rem; }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th {
    text-align: left; font-size: 0.8rem; font-weight: 600;
    color: var(--muted-foreground); padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.st-table td {
    padding: 0.85rem 0.75rem; border-bottom: 1px solid var(--border);
    vertical-align: middle; font-size: 0.875rem; color: var(--foreground);
}
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table-actions-col { text-align: right; }
.st-table-empty { text-align: center; color: var(--muted-foreground); padding: 2rem 0.75rem; }
.st-table-login { color: var(--muted-foreground); white-space: nowrap; }
.st-user-name { font-weight: 600; color: var(--foreground); }
.st-user-email { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.1rem; }

.st-pill-group { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.st-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: 9999px;
    font-size: 0.72rem; font-weight: 600; color: var(--foreground); white-space: nowrap;
}
.st-pill--admin { border-color: #d8b4fe; color: #7e22ce; background: #faf5ff; }
.st-pill--norole { border-color: #fcd34d; color: #92400e; background: #fffbeb; }
.st-role-hint { font-size: 0.72rem; color: var(--muted-foreground); margin-top: 0.3rem; max-width: 22rem; }
.st-chip {
    display: inline-flex; align-items: center; padding: 0.15rem 0.6rem;
    border: 1px solid var(--border); border-radius: 9999px;
    font-size: 0.72rem; font-weight: 500; color: var(--foreground); white-space: nowrap;
}
.st-none { font-size: 0.8rem; color: var(--muted-foreground); }

/* Status pills — Inactive ships unused until a real dormancy signal exists (see PR 17 plan). */
.st-status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.65rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.st-status--active { background: #dcfce7; color: #166534; }
.st-status--invited { background: #dbeafe; color: var(--status-info-fg); }
.st-status--disabled { background: var(--status-danger-bg); color: var(--status-danger-fg); }

/* Manage-user dialog */
.mu-user-head { margin-bottom: 1rem; }
.mu-user-name { font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.mu-user-email { font-size: 0.85rem; color: var(--muted-foreground); }
.mu-section { padding: 0.9rem 0; border-top: 1px solid var(--border); }
.mu-section:first-of-type { border-top: 0; padding-top: 0; }
.mu-section-title { font-size: 0.9rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.6rem; }
.mu-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; }
@media (max-width: 640px) { .mu-checks { grid-template-columns: 1fr; } }
.mu-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--foreground); cursor: pointer; }
.mu-check input { width: 1rem; height: 1rem; accent-color: var(--primary); cursor: pointer; flex: none; }
.st-status--inactive { background: var(--secondary); color: var(--muted-foreground); }

.st-iconbtn {
    width: 2rem; height: 2rem; border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--muted-foreground);
    cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.st-iconbtn:hover { background: var(--secondary); color: var(--foreground); }
.st-iconbtn:disabled { opacity: 0.6; cursor: not-allowed; }
.st-iconbtn:disabled:hover { background: transparent; color: var(--muted-foreground); }

.st-admin-required {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 2.5rem 1.5rem; color: var(--muted-foreground);
}
.st-admin-required svg { margin-bottom: 0.75rem; }
.st-admin-required-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--foreground); }
.st-admin-required-sub { margin: 0.35rem 0 0; font-size: 0.85rem; }

.st-notif-list { display: flex; flex-direction: column; }
.st-notif-row {
    display: flex; align-items: flex-start; gap: 0.9rem;
    padding: 1.1rem 0; border-bottom: 1px solid var(--border);
}
.st-notif-row:last-child { border-bottom: none; padding-bottom: 0.25rem; }
.st-notif-icon {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--secondary); color: var(--muted-foreground);
}
.st-notif-main { flex: 1; min-width: 0; }
.st-notif-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.st-notif-title { font-size: 0.9rem; font-weight: 600; color: var(--foreground); }
.st-notif-desc { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--muted-foreground); }
.st-notif-controls { display: flex; align-items: flex-end; gap: 2.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.st-notif-field { display: flex; flex-direction: column; gap: 0.4rem; }
.st-notif-field-label { font-size: 0.78rem; font-weight: 500; color: var(--muted-foreground); }
.st-notif-field .st-select-wrap { min-width: 11rem; }
.st-role-chips { display: flex; gap: 0.4rem; }
.st-role-chip {
    display: inline-flex; align-items: center; padding: 0.25rem 0.75rem;
    border-radius: 9999px; background: var(--primary); color: var(--primary-foreground);
    font-size: 0.75rem; font-weight: 600;
}

/* Switch — clone of the exec-hub switch so Settings never depends on .ea-* classes. */
.st-switch {
    position: relative; flex: none; width: 2.25rem; height: 1.25rem;
    border-radius: 9999px; border: none; padding: 0;
    background: var(--secondary); cursor: pointer;
}
.st-switch:disabled { cursor: not-allowed; opacity: 0.6; }
.st-switch--on { background: var(--primary); }
.st-switch-knob {
    position: absolute; top: 50%; left: 2px; transform: translateY(-50%);
    width: 0.95rem; height: 0.95rem; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    transition: left 120ms ease;
}
.st-switch--on .st-switch-knob { left: calc(100% - 0.95rem - 2px); }

.st-sub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.st-tier-pill {
    display: inline-flex; align-items: center; padding: 0.25rem 0.8rem;
    border: 1px solid var(--accent); color: var(--accent); border-radius: 9999px;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.st-tier-controls {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    margin-top: 1.1rem; padding: 1rem 1.25rem;
    background: var(--secondary); border-radius: 0.6rem;
}
.st-tier-controls .st-select-wrap { flex: none; width: 16rem; max-width: 100%; }
.st-tier-controls .st-select { background: var(--card); }

.st-matrix { width: 100%; border-collapse: collapse; }
.st-matrix th, .st-matrix td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.st-matrix thead th { text-align: left; color: var(--muted-foreground); font-weight: 600; font-size: 0.8rem; }
.st-matrix thead th:not(:first-child), .st-matrix tbody td { text-align: center; }
.st-matrix tbody th { text-align: left; font-weight: 600; color: var(--foreground); }
.st-matrix tbody tr:last-child th, .st-matrix tbody tr:last-child td { border-bottom: none; }
.st-matrix-tier { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; line-height: 1.2; }
.st-matrix-check { color: var(--primary); display: inline-flex; }
.st-matrix-x { color: var(--muted-foreground); opacity: 0.45; display: inline-flex; }
.st-matrix-col--current { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.st-matrix-current {
    margin-top: 0.25rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--accent-foreground); background: var(--accent);
    padding: 0.05rem 0.4rem; border-radius: 9999px;
}

.st-brand-block { margin-bottom: 1.5rem; }
.st-brand-label {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.9rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem;
}
.st-brand-label svg { color: var(--muted-foreground); }
.st-logo-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
/* Mock logo tile — hardcoded to the default gold preset like Lovable's preview. */
.st-logo-box {
    flex: none; width: 4.75rem; height: 4.75rem; border-radius: 0.75rem;
    border: 2px dashed rgba(245, 159, 10, 0.55);
    background: linear-gradient(135deg, var(--accent), #dd8a04);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.st-logo-cub { font-size: 1rem; font-weight: 800; color: #fff; line-height: 1.15; }
.st-logo-atlas { font-size: 0.8rem; font-weight: 600; color: #fff; line-height: 1.15; }
.st-logo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.st-logo-help { margin: 0; font-size: 0.78rem; color: var(--muted-foreground); }

.st-preset-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.st-preset {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem; background: var(--card);
    border: 1px solid var(--border); border-radius: 0.55rem;
    font-size: 0.85rem; font-weight: 600; color: var(--foreground); cursor: pointer;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}
.st-preset:hover { border-color: var(--muted-foreground); }
.st-preset--selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.st-preset-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; }
.st-preset-dot + .st-preset-dot { margin-left: -0.2rem; }

/* Live preview — colors hardcoded to the default preset (mock; presets only highlight). */
.st-preview { display: grid; grid-template-columns: 12rem 1fr; border: 1px solid var(--border); border-radius: 0.6rem; overflow: hidden; }
@media (max-width: 800px) { .st-preview { grid-template-columns: 1fr; } }
/* Preview reads scoped --prev-* vars set inline from the editor (falls back to brand defaults). */
.st-preview-sidebar { background: var(--prev-sidebar-bg, var(--primary)); padding: 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; }
.st-preview-brand { color: var(--prev-accent, var(--accent)); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }
.st-preview-nav { color: var(--prev-sidebar-fg, #dbe6f0); font-size: 0.8rem; padding: 0.35rem 0.55rem; border-radius: 0.35rem; }
.st-preview-nav--active { background: var(--prev-sidebar-active, #2d3953); }
.st-preview-main { padding: 1.1rem 1.25rem; background: var(--prev-card, #ffffff); }
.st-preview-title { font-size: 0.95rem; font-weight: 700; color: var(--prev-card-fg, var(--foreground)); margin-bottom: 0.75rem; }
.st-preview-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.st-preview-btn { display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; border-radius: 0.45rem; font-size: 0.82rem; font-weight: 600; }
.st-preview-btn--primary { background: var(--prev-primary, var(--primary)); color: var(--prev-primary-fg, var(--primary-foreground)); }
.st-preview-btn--accent { background: var(--prev-accent, var(--accent)); color: var(--prev-accent-fg, var(--foreground)); }
.st-preview-btn--secondary { background: var(--prev-secondary, var(--secondary)); color: var(--prev-secondary-fg, #394660); }
.st-preview-card { border: 1px solid var(--prev-border, var(--border)); border-radius: 0.5rem; padding: 0.9rem 1rem; }
.st-preview-card-title { font-size: 0.875rem; font-weight: 600; color: var(--prev-card-fg, var(--foreground)); }
.st-preview-card-desc { margin: 0.25rem 0 0.7rem; font-size: 0.8rem; color: var(--prev-muted-fg, var(--muted-foreground)); }
.st-preview-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.st-preview-chip { display: inline-flex; padding: 0.18rem 0.6rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; color: #fff; }
.st-preview-chip--good { background: var(--prev-success, #10b77f); }
.st-preview-chip--caution { background: var(--prev-warning, #db7706); }
.st-preview-chip--alert { background: var(--prev-danger, #dc2828); }
.st-preview-chip--info { background: var(--prev-info, #3c83f6); }

.st-swatch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
@media (max-width: 900px) { .st-swatch-grid { grid-template-columns: 1fr; } }
.st-swatch-list { display: flex; flex-direction: column; gap: 0.75rem; }
.st-swatch { display: flex; align-items: center; gap: 0.8rem; }
.st-swatch-box { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid var(--border); }
.st-swatch-name { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.st-swatch-value { font-size: 0.75rem; color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Color-picker swatch: the swatch box itself is a native <input type=color>. */
.st-swatch-input { appearance: none; -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; }
.st-swatch-input::-webkit-color-swatch-wrapper { padding: 0; }
.st-swatch-input::-webkit-color-swatch { border: none; border-radius: 0.45rem; }
.st-swatch-input::-moz-color-swatch { border: none; border-radius: 0.45rem; }
.st-swatch-input:disabled { cursor: not-allowed; opacity: 0.7; }

/* Logo upload */
.st-logo-img { max-height: 56px; max-width: 200px; background: #fff; padding: 6px; border: 1px solid var(--border); border-radius: 8px; }
.st-upload-btn { position: relative; overflow: hidden; }
.st-upload-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* "More settings" links card — our addition; keeps the functional sub-pages reachable. */
.st-more-card { padding: 1.25rem 1.5rem; }
.st-more-links { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Invite dialog internals — the overlay/panel shell reuses .pm-dialog-* as-is. */
.st-invite-dialog { max-width: 28rem; }
.st-dialog-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--foreground); padding-right: 2rem; }
.st-dialog-desc { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.5; }
.st-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
/* === Onboarding wizard ================================================ */
.ob-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, hsl(217, 90%, 97%) 0%, #fff 50%, hsl(40, 90%, 95%) 100%);
}
.ob-topbar {
    background: var(--card); border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ob-topbar-inner { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center; }
.ob-brand { display: flex; align-items: center; gap: 0.75rem; }
.ob-brand-glyph {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
    color: var(--accent-foreground); font-weight: 800; display: grid; place-items: center;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
}
.ob-brand-title { font-size: 1.1rem; font-weight: 700; color: var(--foreground); }
.ob-brand-subtitle { font-size: 0.78rem; color: var(--muted-foreground); }
.ob-main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }

.ob-progress-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.ob-progress-title { font-size: 1.4rem; font-weight: 700; color: var(--foreground); }
.ob-progress-sub { color: var(--muted-foreground); font-size: 0.92rem; }
.ob-progress-pct { font-size: 1.85rem; font-weight: 700; color: var(--status-info-fg); }
.ob-progress-pct-label { font-size: 0.75rem; color: var(--muted-foreground); }
.ob-progress-bar { background: hsl(220, 14%, 91%); height: 8px; border-radius: 4px; overflow: hidden; }
.ob-progress-fill { background: linear-gradient(90deg, var(--status-info-fg), var(--status-info-border));
    height: 100%; transition: width 0.4s ease; }

.ob-steps-scroll { overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
.ob-steps { display: flex; gap: 0.35rem; min-width: max-content; }
.ob-step-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.75rem; border-radius: 8px; border: 0;
    font-size: 0.8rem; font-weight: 500;
    background: hsl(220, 14%, 95%); color: hsl(220, 10%, 50%);
    cursor: not-allowed; white-space: nowrap; transition: background 0.15s;
}
.ob-step-pill.is-active   { background: var(--status-info-fg); color: white; box-shadow: 0 4px 10px hsl(217, 75%, 50%, 0.3); cursor: default; }
.ob-step-pill.is-done     { background: hsl(150, 60%, 92%); color: hsl(150, 65%, 25%); cursor: pointer; }
.ob-step-pill.is-done:hover { background: hsl(150, 60%, 86%); }
.ob-step-pill.is-past     { background: hsl(220, 14%, 88%); color: hsl(220, 10%, 35%); cursor: pointer; }
.ob-step-pill.is-past:hover { background: hsl(220, 14%, 82%); }
.ob-step-pill .ob-opt { font-size: 0.65rem; opacity: 0.7; }

.ob-card {
    background: var(--card); border: 2px solid var(--border);
    border-radius: 12px; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.ob-card-header {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(90deg, hsl(220, 14%, 97%), var(--status-info-bg));
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 1rem;
}
.ob-card-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--status-info-border), var(--status-info-fg));
    color: white; display: grid; place-items: center; font-size: 1.4rem;
    box-shadow: 0 4px 10px hsl(217, 75%, 50%, 0.3);
}
.ob-card-icon.is-final { background: linear-gradient(135deg, hsl(150, 65%, 50%), hsl(150, 65%, 40%)); }
.ob-card-title { font-size: 1.25rem; font-weight: 700; color: var(--foreground); }
.ob-card-sub { font-size: 0.85rem; color: var(--muted-foreground); }
.ob-card-body { padding: 2rem; }

.ob-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.ob-nav-actions { display: flex; gap: 0.75rem; align-items: center; }
.ob-help {
    margin-top: 2rem; padding: 1.25rem;
    background: hsl(40, 90%, 96%); border: 1px solid hsl(40, 80%, 85%);
    border-radius: 12px;
}
.ob-help-title { font-weight: 600; color: hsl(35, 75%, 25%); margin-bottom: 0.25rem; }
.ob-help-text { font-size: 0.85rem; color: hsl(35, 60%, 30%); }

/* Step content shared bits */
.ob-step-h3 { font-size: 1.15rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.5rem; text-align: center; }
.ob-step-lede { color: var(--muted-foreground); text-align: center; margin-bottom: 1.75rem; }
.ob-info-banner {
    padding: 0.9rem 1rem; background: var(--status-info-bg); border: 1px solid var(--status-info-bg);
    border-radius: 8px; color: var(--status-info-fg); font-size: 0.85rem;
}
.ob-info-banner h5 { font-weight: 600; margin-bottom: 0.25rem; color: var(--status-info-fg); }
.ob-tip {
    padding: 0.9rem 1rem; background: hsl(40, 90%, 96%); border: 1px solid hsl(40, 80%, 85%);
    border-radius: 8px; color: hsl(35, 60%, 30%); font-size: 0.85rem;
}

.ob-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ob-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 768px) {
    .ob-grid-2, .ob-grid-3 { grid-template-columns: 1fr; }
    .ob-card-body { padding: 1.25rem; }
}
.ob-span2 { grid-column: span 2; }
@media (max-width: 768px) { .ob-span2 { grid-column: span 1; } }

.ob-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.35rem; }
.ob-label-hint { display: block; font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.ob-input { width: 100%; padding: 0.55rem 0.75rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--background); color: var(--foreground); font-size: 0.9rem; }
.ob-input.is-tall { height: 3rem; font-size: 1rem; }
.ob-textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--background); color: var(--foreground); font-size: 0.9rem; min-height: 5rem; }

/* Counter chip (e.g. "2 / 3 minimum") */
.ob-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500;
}
.ob-chip.is-ok { background: hsl(150, 60%, 92%); color: hsl(150, 65%, 25%); }
.ob-chip.is-warn { background: hsl(40, 90%, 92%); color: hsl(35, 75%, 30%); }

/* Add card (dashed) */
.ob-add-card {
    border: 2px dashed hsl(220, 14%, 80%); border-radius: 10px;
    min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.6rem; cursor: pointer; background: transparent; color: var(--muted-foreground);
    transition: border-color 0.15s, background 0.15s;
}
.ob-add-card:hover { border-color: var(--status-info-border); background: var(--status-info-bg); }
.ob-add-card .ob-add-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--status-info-bg); color: var(--status-info-fg); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; }

/* Member / committee / risk cards */
.ob-item-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 1rem; position: relative;
    transition: box-shadow 0.15s;
}
.ob-item-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); }
.ob-item-card.is-complete { border-color: hsl(150, 60%, 70%); background: hsl(150, 60%, 98%); }
.ob-item-card.is-warn { border-color: hsl(40, 80%, 75%); background: hsl(40, 90%, 99%); }
.ob-item-card-actions { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 0.25rem; }
.ob-icon-btn {
    width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px;
    color: var(--muted-foreground); cursor: pointer; display: grid; place-items: center;
}
.ob-icon-btn:hover { background: hsl(220, 14%, 92%); color: var(--foreground); }
.ob-icon-btn.is-danger { color: var(--status-danger-fg); }
.ob-icon-btn.is-danger:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }

.ob-avatar {
    width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
    flex-shrink: 0; font-size: 1.1rem; font-weight: 700;
}
.ob-avatar.is-chair { background: hsl(40, 90%, 92%); color: hsl(35, 75%, 35%); }
.ob-avatar.is-member { background: var(--status-info-bg); color: var(--status-info-fg); }

/* Quick-add chip row */
.ob-quickadd { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ob-quickadd .btn { font-size: 0.8rem; }

/* Modal */
.ob-modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
    display: grid; place-items: center; z-index: 60; padding: 1rem; }
.ob-modal {
    background: var(--card); border-radius: 12px; padding: 1.5rem;
    max-width: 32rem; width: 100%; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.ob-modal-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.ob-modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; }

/* Risk + policy level pills */
.ob-level-low      { background: hsl(150, 60%, 92%); color: hsl(150, 65%, 25%); border-left: 4px solid hsl(150, 65%, 45%); }
.ob-level-moderate { background: hsl(40, 90%, 95%);  color: hsl(35, 75%, 30%); border-left: 4px solid hsl(40, 90%, 50%); }
.ob-level-high     { background: var(--status-danger-bg);   color: var(--status-danger-fg);  border-left: 4px solid var(--status-danger-fg); }

.ob-policy-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.ob-policy-card.is-uploaded { border-color: hsl(150, 60%, 70%); background: hsl(150, 60%, 98%); }
.ob-policy-card.is-dated { border-color: var(--status-info-border); background: var(--status-info-bg); }

.ob-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
@media (max-width: 768px) { .ob-summary-grid { grid-template-columns: 1fr; } }
.ob-summary-card { padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border); display: flex; gap: 0.65rem; align-items: center; }
.ob-summary-card.is-ok   { border-color: hsl(150, 60%, 70%); background: hsl(150, 60%, 98%); }
.ob-summary-card.is-partial { border-color: hsl(40, 80%, 75%); background: hsl(40, 90%, 98%); }
.ob-summary-card.is-bad  { border-color: var(--status-danger-border);   background: var(--status-danger-bg); }
.ob-summary-card.is-skip { border-color: var(--border);      background: hsl(220, 14%, 98%); }
.ob-summary-icon {
    width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
    font-size: 0.95rem;
}
.ob-summary-icon.is-ok   { background: hsl(150, 60%, 90%); color: hsl(150, 65%, 30%); }
.ob-summary-icon.is-partial { background: hsl(40, 90%, 90%); color: hsl(35, 75%, 30%); }
.ob-summary-icon.is-bad  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.ob-summary-icon.is-skip { background: hsl(220, 14%, 92%); color: hsl(220, 10%, 40%); }

.ob-admin-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; flex-wrap: wrap; }
.ob-admin-tab {
    padding: 0.55rem 0.9rem;
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    font-size: 0.85rem; font-weight: 500; color: var(--muted-foreground);
    cursor: pointer; border-radius: 4px 4px 0 0;
}
.ob-admin-tab:hover { color: var(--foreground); background: hsl(220, 14%, 97%); }
.ob-admin-tab.is-active { color: var(--status-info-fg); border-bottom-color: var(--status-info-fg); background: var(--status-info-bg); }

.ob-saving { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--muted-foreground); }
.ob-saving::before {
    content: ""; width: 12px; height: 12px; border-radius: 999px;
    border: 2px solid var(--status-info-border); border-top-color: transparent;
    animation: ob-spin 0.8s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }


/* ============================================================
   CEO Search → Review page (csr- prefix)
   Frontend mock-up only — pure visual styling. Persistence is
   intentionally absent; state is in-memory per component.
   ============================================================ */

/* Top deadline / status cards */
.csr-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.csr-stat-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 1.15rem 1.25rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    min-height: 7.5rem; justify-content: center;
}
.csr-stat-icon { color: hsl(220, 15%, 55%); }
.csr-stat-value { font-size: 1.45rem; font-weight: 700; color: var(--foreground); line-height: 1.1; }
.csr-stat-label { font-size: 0.92rem; color: hsl(220, 22%, 35%); }
.csr-stat-sub { font-size: 0.78rem; color: var(--muted-foreground); }

/* Current Phase pill — outline, uppercase */
.csr-phase-pill {
    display: inline-flex; align-items: center;
    padding: 0.35rem 1.1rem; border-radius: 999px;
    border: 1px solid hsl(220, 22%, 40%); color: var(--foreground);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
}

/* Round-1 = accent (orange) icon + value tint; Round-2 = purple */
.csr-stat-card--round1 .csr-stat-icon  { color: var(--accent); }
.csr-stat-card--round1 .csr-stat-value { color: var(--accent); }
.csr-stat-card--round2 .csr-stat-icon  { color: hsl(265, 70%, 55%); }
.csr-stat-card--round2 .csr-stat-value { color: hsl(265, 70%, 55%); }

@media (max-width: 760px) { .csr-stat-grid { grid-template-columns: 1fr; } }

/* Sub-tabs (Candidates & Ranking / Final Vote) — full width with equally-sized buttons */
.csr-subtabs {
    display: flex; width: 100%; gap: 0.25rem; padding: 0.25rem;
    background: hsl(220, 15%, 95%); border-radius: 0.55rem;
}
.csr-subtab {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.6rem 0.95rem; border: none; background: transparent; border-radius: 0.4rem;
    font: inherit; font-size: 0.92rem; font-weight: 600; color: hsl(220, 18%, 42%);
    cursor: pointer; transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
}
.csr-subtab:hover { color: var(--foreground); }
.csr-subtab--active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1); }

/* Section header on each tab */
.csr-section-title { font-size: 1.25rem; font-weight: 700; color: var(--foreground); margin: 1.25rem 0 0.25rem; }
.csr-section-sub   { color: var(--muted-foreground); margin: 0 0 1rem; font-size: 0.92rem; }
.csr-empty { padding: 2rem 1rem; text-align: center; color: var(--muted-foreground);
    background: var(--card); border: 1px solid var(--border); border-radius: 0.65rem; }

.csr-candidate-list { display: flex; flex-direction: column; gap: 1rem; }

/* Candidate review card */
.csr-cand-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 1.15rem 1.35rem;
}
.csr-cand-head { display: flex; align-items: flex-start; gap: 0.85rem; }
.csr-avatar {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: hsl(220, 15%, 92%); color: hsl(220, 15%, 55%);
    display: inline-flex; align-items: center; justify-content: center;
}
.csr-cand-id { flex: 1 1 auto; min-width: 0; }
.csr-cand-name { font-size: 1rem; font-weight: 700; color: var(--foreground); }
.csr-cand-title { font-size: 0.85rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.csr-status-pill {
    display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--secondary-foreground);
    font-size: 0.72rem; font-weight: 500; white-space: nowrap;
    text-transform: lowercase;
}

.csr-section-label { font-size: 0.78rem; font-weight: 700; color: hsl(220, 25%, 25%); margin: 1rem 0 0.5rem; }

/* Document buttons (file-text + name + download icon) */
.csr-doc-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.csr-doc-btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.55rem;
    color: hsl(220, 25%, 25%); font-size: 0.88rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: border-color 100ms ease, background 100ms ease;
}
.csr-doc-btn:hover { border-color: hsl(220, 18%, 70%); background: hsl(220, 18%, 98%); color: var(--foreground); }
.csr-doc-label { line-height: 1.1; }
.csr-doc-btn--video { color: var(--foreground); }
.csr-doc-btn--video svg:first-child { color: var(--secondary-foreground); }

.csr-divider { border-top: 1px solid var(--border); margin: 1rem 0; }

/* Private notes toggle + textarea */
.csr-notes-toggle {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0; background: transparent; border: none; cursor: pointer;
    font: inherit; font-size: 0.92rem; font-weight: 600; color: hsl(220, 18%, 42%);
}
.csr-notes-toggle:hover { color: var(--foreground); }
.csr-notes-toggle-chev { margin-left: auto; display: inline-flex; }
.csr-notes-input {
    width: 100%; resize: vertical; min-height: 4.5rem;
    margin-top: 0.5rem; padding: 0.6rem 0.75rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.45rem;
    font: inherit; font-size: 0.9rem; color: hsl(220, 25%, 25%);
}
.csr-notes-input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.csr-notes-input:disabled { background: hsl(220, 15%, 97%); color: var(--muted-foreground); }

/* Ranking slider */
.csr-rank { padding-top: 0.25rem; }
.csr-rank-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.csr-rank-label { font-size: 0.95rem; font-weight: 700; color: var(--foreground); }
.csr-rank-value { font-size: 1.45rem; font-weight: 800; color: var(--foreground); line-height: 1; }
.csr-rank-slider {
    width: 100%;
    accent-color: var(--foreground); /* dark fill on the left of the thumb, matches the screenshot */
    height: 0.5rem;
}
.csr-rank-axis { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted-foreground); }

/* Submit Rankings + Cast Vote (full-width primary action) */
.csr-submit-btn {
    display: block; width: 100%; margin-top: 1rem;
    padding: 0.9rem 1.25rem; border-radius: 0.55rem; border: none;
    background: var(--foreground); color: #fff;
    font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
    transition: filter 100ms ease;
}
.csr-submit-btn:hover:not(:disabled) { filter: brightness(1.15); }
.csr-submit-btn:disabled { background: hsl(220, 12%, 60%); cursor: not-allowed; }

/* Rankings Submitted confirmation card */
.csr-submitted {
    background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 2rem 1.5rem; margin-top: 1rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.csr-submitted-icon { color: hsl(150, 65%, 38%); }
.csr-submitted-title { font-size: 1.2rem; font-weight: 700; color: var(--foreground); margin: 0; }
.csr-submitted-sub { color: var(--muted-foreground); font-size: 0.9rem; margin: 0; }

/* Confirmation modal */
.csr-modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
}
.csr-modal {
    background: var(--card); border-radius: 0.65rem;
    padding: 1.5rem 1.5rem 1.25rem;
    width: min(28rem, calc(100vw - 2rem));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.csr-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.5rem; }
.csr-modal-body  { color: var(--muted-foreground); font-size: 0.92rem; margin: 0 0 1.25rem; }
.csr-modal-foot  { display: flex; justify-content: flex-end; gap: 0.5rem; }
.csr-modal-foot .btn { padding: 0.55rem 1rem; }

/* Toast (bottom-right, auto-dismiss) */
.csr-toast {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1000;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.55rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 0.85rem 1.1rem; min-width: 16rem; max-width: 22rem;
    display: flex; flex-direction: column; gap: 0.15rem;
    animation: csr-toast-slide-in 200ms ease-out;
}
.csr-toast strong { color: var(--foreground); font-size: 0.92rem; }
.csr-toast span   { color: var(--muted-foreground); font-size: 0.85rem; }
@keyframes csr-toast-slide-in {
    from { transform: translateY(0.5rem); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Final Vote tab */
.csr-final-head { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0.25rem; color: var(--foreground); }
.csr-final-title { font-size: 1.2rem; font-weight: 700; margin: 0; }
.csr-vote-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 1rem 0; }
.csr-vote-card {
    display: flex; align-items: center; gap: 0.85rem;
    width: 100%; text-align: left;
    background: var(--card); border: 2px solid var(--border); border-radius: 0.65rem;
    padding: 1rem 1.15rem;
    font: inherit; cursor: pointer;
    transition: border-color 100ms ease, background 100ms ease;
}
.csr-vote-card:hover { border-color: hsl(220, 18%, 70%); }
.csr-vote-card--picked { border-color: var(--foreground); background: hsl(220, 18%, 98%); }

/* Picked vote — avatar flips to dark filled circle with a white check icon */
.csr-avatar--picked { background: var(--foreground); color: #fff; }

/* Inline video embed (shown when "Watch Video Interview" is expanded) */
.csr-video-embed {
    margin-top: 0.6rem;
    position: relative;
    aspect-ratio: 16 / 9;
    background: hsl(220, 18%, 10%);
    border-radius: 0.55rem;
    overflow: hidden;
}
.csr-video-embed iframe,
.csr-video-embed video {
    width: 100%; height: 100%; border: 0; display: block;
}
.csr-video-fallback {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.65rem; padding: 1rem;
    color: #f2f2f2; text-align: center;
}
.csr-video-fallback p { margin: 0; font-size: 0.92rem; }

/* Public committee voter page — outer shell + PIN entry */
.csr-public-shell {
    max-width: 56rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem;
}
.csr-public-shell--review { max-width: 64rem; }

/* Deliverable shell: grayed platform rail + the live voter content (see CEOSearchCommittee). */
.csr-deliverable-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.csr-deliverable-main { min-width: 0; }
/* Rail is context only — fully inert + desaturated so external voters read it as "not yours". */
.csr-deliverable-nav { opacity: 0.55; filter: grayscale(1); pointer-events: none; user-select: none; }
/* Items are <span> here (not <a>), so the a.nav-item layout rules don't reach them — restate them. */
.csr-deliverable-nav .nav-item {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 1.25rem; font-size: 0.875rem;
    color: rgba(226, 232, 240, 0.7); cursor: default;
}
.csr-deliverable-nav .nav-item--indent { padding-left: 2.5rem; }
.csr-deliverable-nav .csr-deliverable-item { opacity: 0.75; }
/* The visitor's one live surface — highlighted, but still non-navigable. */
.csr-deliverable-nav .csr-deliverable-active {
    background: var(--sidebar-accent); color: #fff;
    border-left: 3px solid var(--sidebar-primary); padding-left: calc(2.5rem - 3px);
}
.csr-deliverable-nav .csr-deliverable-active .nav-item-subtitle { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 860px) {
    .csr-deliverable-shell { grid-template-columns: 1fr; }
    .csr-deliverable-nav { display: none; }
}
.csr-public-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.csr-public-title { font-size: 1.6rem; font-weight: 800; color: var(--foreground); margin: 0; }
.csr-public-sub   { color: var(--muted-foreground); margin: 0.25rem 0 0; font-size: 0.92rem; }

.csr-login-card {
    max-width: 28rem; margin: 4rem auto 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
    padding: 1.75rem 1.6rem;
}
.csr-login-title { font-size: 1.4rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.3rem; }
.csr-login-sub   { color: var(--muted-foreground); margin: 0 0 1rem; font-size: 0.92rem; }

.csr-login-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.csr-login-form label { font-size: 0.82rem; font-weight: 600; color: hsl(220, 25%, 25%); margin-top: 0.6rem; }
.csr-login-pin { letter-spacing: 0.25em; text-align: center; font-weight: 600; font-size: 1.05rem; }
.csr-login-form .csr-submit-btn { margin-top: 1.25rem; }

/* Engagement edit modal — voting-rounds list */
.csr-round-list { display: flex; flex-direction: column; gap: 0.6rem; }
.csr-round-row {
    display: grid; grid-template-columns: 7rem 1fr 2.25rem; gap: 0.65rem; align-items: center;
    background: hsl(220, 18%, 97%); border: 1px solid var(--border); border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
}
.csr-round-label { font-size: 0.9rem; font-weight: 600; color: hsl(220, 25%, 25%); }
.csr-round-date { width: 100%; }
.csr-round-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0;
    background: transparent; border: none; border-radius: 0.4rem;
    color: var(--destructive); cursor: pointer; transition: background 100ms ease;
}
.csr-round-remove:hover { background: var(--status-danger-bg); }
@media (max-width: 540px) {
    .csr-round-row { grid-template-columns: 1fr 2.25rem; }
    .csr-round-label { grid-column: 1 / -1; }
}

/* Status-edit modal rows */
.csr-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
.csr-status-row {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.7rem 0.85rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.55rem;
    cursor: pointer; transition: border-color 100ms ease, background 100ms ease;
}
.csr-status-row:hover { border-color: hsl(220, 18%, 70%); }
.csr-status-row--picked { border-color: var(--foreground); background: hsl(220, 18%, 98%); }
.csr-status-row input[type="radio"] { margin-top: 0.2rem; flex-shrink: 0; }
.csr-status-row-name { font-weight: 600; color: var(--foreground); }
.csr-status-row-desc { font-size: 0.82rem; color: var(--muted-foreground); margin-top: 0.15rem; }

/* Round-history navigator (tab strip + prev/next arrows) */
.csr-round-nav {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    background: hsl(220, 15%, 96%); border: 1px solid var(--border);
    border-radius: 0.55rem; padding: 0.3rem;
}
.csr-round-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0;
    background: transparent; border: none; border-radius: 0.35rem;
    color: hsl(220, 22%, 35%); cursor: pointer; transition: background 100ms ease, color 100ms ease;
}
.csr-round-nav-btn:hover:not(:disabled) { background: var(--card); color: var(--foreground); }
.csr-round-nav-btn:disabled { color: hsl(220, 12%, 70%); cursor: not-allowed; }
.csr-round-nav-flip { transform: scaleX(-1); }

.csr-round-nav-tabs { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; flex: 1 1 auto; }
.csr-round-nav-tab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem; border: none; border-radius: 0.4rem;
    background: transparent; color: hsl(220, 18%, 42%);
    font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
}
.csr-round-nav-tab:hover { color: var(--foreground); }
.csr-round-nav-tab--active {
    background: var(--card); color: var(--foreground);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}
.csr-round-nav-tab--all { margin-left: auto; }
.csr-round-nav-current {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: var(--status-info-bg); color: var(--status-info-fg);
}


/* ---------- Partner directory ---------- */
.partner-avatar {
    width: 44px; height: 44px; border-radius: 0.6rem; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--status-info-bg); color: var(--status-info);
}
.partner-featured-tag {
    font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px;
    background: var(--status-warning-bg); color: var(--status-warning-fg);
}
.partner-tier-pill {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    padding: 0.12rem 0.6rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--muted-foreground);
}
.partner-tier-pill--platinum { background: hsl(252, 60%, 95%); border-color: hsl(252, 50%, 84%); color: hsl(252, 55%, 50%); }
.partner-tier-pill--gold { background: var(--status-warning-bg); border-color: hsl(43, 80%, 76%); color: var(--status-warning-fg); }
.partner-tier-pill--silver { background: hsl(220, 14%, 92%); border-color: hsl(220, 12%, 80%); color: hsl(220, 12%, 38%); }
.partner-tier-pill--bronze { background: hsl(26, 60%, 92%); border-color: hsl(26, 55%, 78%); color: hsl(24, 60%, 38%); }
.partner-card { height: 100%; }
.partner-card-about {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.5;
}
.partner-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.partner-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; font-weight: 500;
    padding: 0.18rem 0.6rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--secondary); color: var(--foreground);
}
.partner-chip-cert { background: hsl(155, 60%, 95%); border-color: hsl(155, 50%, 80%); color: var(--status-success-fg); }
.partner-chip--white { background: var(--card); }

/* Detail dialog */
.partner-dialog { max-width: 46rem; }
.partner-dialog-head { display: flex; gap: 1rem; padding: 1.5rem 1.5rem 0.75rem; }
.partner-dialog-head-main { min-width: 0; }
.partner-dialog-title { font-size: 1.25rem; font-weight: 700; color: var(--foreground); margin: 0; }
.partner-dialog-tabs { margin: 0 1.5rem; display: flex; width: calc(100% - 3rem); }
.partner-dialog-tabs .tab-trigger { flex: 1; justify-content: center; }
.partner-dialog-body { padding: 1.25rem 1.5rem; }
.partner-dialog-foot {
    display: flex; justify-content: flex-end; gap: 0.6rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--border);
    position: sticky; bottom: 0; background: var(--card);
}
.partner-section { margin-bottom: 1.25rem; }
.partner-section-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--foreground); }
.partner-stat-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 640px) { .partner-stat-strip { grid-template-columns: repeat(2, 1fr); } }
.partner-stat { text-align: center; }
.partner-stat-icon { color: var(--accent); display: flex; justify-content: center; margin-bottom: 0.25rem; }
.partner-stat-icon--blue { color: var(--status-info-fg); }
.partner-stat-icon--green { color: var(--status-success-fg); }
.partner-stat-icon--purple { color: hsl(258, 85%, 62%); }
.partner-stat-icon--orange { color: hsl(25, 95%, 53%); }
.partner-stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.partner-stat-label { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.2rem; }
.partner-pricing { background: var(--status-info-bg); border: 1px solid var(--status-info-bg); border-radius: 0.6rem; padding: 1rem; }
.partner-contact { border: 1px solid var(--border); border-radius: 0.6rem; padding: 1rem; }
.partner-contact-row { display: flex; align-items: center; gap: 0.5rem; color: var(--foreground); margin-top: 0.35rem; }
.partner-contact-row a { color: var(--status-info-fg); text-decoration: none; }
.partner-contact-row a:hover { text-decoration: underline; }
.partner-subcard { box-shadow: none; }
.partner-subcard + .partner-subcard { margin-top: 0.75rem; }
.partner-results { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.partner-results li { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.35rem; }
.partner-result-check { color: var(--status-success-fg); flex-shrink: 0; display: flex; }
.partner-check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (max-width: 640px) { .partner-check-grid { grid-template-columns: 1fr; } }
.partner-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; }

/* ---------- Partner directory revamp ---------- */
.partner-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .partner-summary { grid-template-columns: repeat(2, 1fr); } }
.partner-summary-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; text-align: center;
}
.partner-summary-card--blue { background: var(--status-info-bg); border-color: var(--status-info-bg); }
.partner-summary-card--gold { background: var(--status-warning-bg); border-color: var(--status-warning-bg); }
.partner-summary-card--green { background: hsl(155, 60%, 95%); border-color: hsl(155, 50%, 82%); }
.partner-summary-value {
    font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
}
.partner-summary-card--green .partner-summary-value { color: var(--status-success-fg); }
.partner-summary-card--blue .partner-summary-value { color: var(--status-info); }
.partner-summary-label { font-size: 0.82rem; color: var(--muted-foreground); margin-top: 0.35rem; }

.partner-featured-banner {
    background: var(--status-warning-bg); border: 1px solid var(--status-warning-bg);
    border-radius: var(--radius); padding: 1rem 1.25rem;
}
.partner-featured-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--status-warning-fg); }
.partner-featured-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.45rem 0.8rem; font-family: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--foreground); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.partner-featured-chip:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

.partner-search {
    display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 240px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0 0.75rem; color: var(--muted-foreground);
}
.partner-search input {
    border: 0; outline: 0; background: transparent; flex: 1;
    font-family: inherit; font-size: 0.9rem; color: var(--foreground); padding: 0.55rem 0;
}
.partner-select-wrap { display: flex; align-items: center; gap: 0.4rem; color: var(--muted-foreground); }
.partner-select-wrap .input { max-width: 220px; }
.partner-cat-tabs { display: flex; flex-wrap: wrap; width: 100%; }

.partner-card-link {
    color: var(--muted-foreground); flex-shrink: 0; height: fit-content;
    transition: color 120ms ease;
}
.partner-card-link:hover { color: var(--accent); }
.partner-stat-strip--card {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    margin-bottom: 0;
    border-top: 1px solid var(--secondary);
    border-bottom: 1px solid var(--secondary);
}
.partner-card-subtitle { font-size: 0.8rem; font-weight: 700; color: var(--foreground); }
.partner-card-pricing {
    background: var(--secondary); border-radius: 0.5rem; padding: 0.6rem 0.8rem;
    font-size: 0.85rem; color: var(--muted-foreground);
}

/* ---------- Partner edit page ---------- */
.pe-form .form-row { margin-bottom: 0.55rem; }
.pe-form .form-row label { font-size: 0.8rem; }
.pe-section {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); margin-top: 1rem; overflow: hidden;
}
.pe-section-head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1rem; border-bottom: 1px solid var(--border);
    background: hsl(210, 25%, 98.5%);
}
.pe-section-icon {
    width: 30px; height: 30px; border-radius: 0.5rem; flex-shrink: 0;
    display: grid; place-items: center;
}

.pe-section textarea {
    resize: vertical;
}
.pe-ic-blue { background: var(--status-info-bg); color: var(--status-info); }
.pe-ic-green { background: hsl(155, 60%, 93%); color: var(--status-success-fg); }
.pe-ic-purple { background: hsl(258, 80%, 95%); color: hsl(258, 75%, 58%); }
.pe-ic-orange { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.pe-section-title { font-size: 0.95rem; font-weight: 700; margin: 0; flex: 1; }
.pe-section-body { padding: 0.9rem 1rem; }
.pe-edit-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
    border-radius: 0.45rem; padding: 0.3rem 0.55rem; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: border-color 120ms ease, color 120ms ease;
}
.pe-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
.pe-subcard { border: 1px solid var(--border); border-radius: 0.55rem; padding: 0.75rem; margin-top: 0.6rem; background: hsl(210, 25%, 99%); }
.pe-options-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 320px; overflow-y: auto; }
.pe-option-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 0.45rem; background: var(--card);
}
.pe-option-del { background: none; border: none; color: var(--muted-foreground); cursor: pointer; display: inline-flex; padding: 0.2rem; border-radius: 0.3rem; }
.pe-option-del:hover { color: var(--status-danger-border); background: var(--status-danger-bg); }
.pe-add-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* Destructive button: red on hover */
.btn-delete:hover { background: var(--status-danger-border); border-color: var(--status-danger-border); color: #fff; }
.btn-danger { background: var(--status-danger-border); border-color: var(--status-danger-border); color: #fff; }
.btn-danger:hover { background: var(--status-danger-fg); border-color: var(--status-danger-fg); }

/* ---------- Review star picker ---------- */
.review-stars { display: flex; gap: 0.3rem; }
.review-star {
    background: none; border: none; padding: 0; cursor: pointer;
    color: hsl(220, 13%, 80%); display: flex; transition: color 100ms ease;
}
.review-star:hover { color: #f5b301; }
.review-star.on { color: #f5b301; }
.review-star.on svg { fill: currentColor; }

/* ---------- Metric modals (governance) ---------- */
.bm-modal--wide { max-width: 44rem; }
.gov-domain-tag {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    padding: 0.2rem 0.65rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--muted-foreground); background: var(--secondary);
}
.gov-section-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--status-info-border);
}
.gov-req { color: var(--status-danger-border); }
.gov-cal-icon { display: inline-flex; vertical-align: -2px; color: var(--muted-foreground); margin-right: 0.15rem; }

.gov-thr-block { padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.1rem; }
.gov-thr-block:last-of-type { border-bottom: none; margin-bottom: 0; }
.gov-thr-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.gov-thr-title { font-size: 1rem; font-weight: 700; margin: 0; }
.gov-thr-current { font-size: 0.85rem; color: var(--muted-foreground); white-space: nowrap; }
.gov-thr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
@media (max-width: 640px) { .gov-thr-grid { grid-template-columns: 1fr; } }
.gov-thr-grid label { display: flex; align-items: center; gap: 0.4rem; }
.gov-thr-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.gov-thr-dot--reg { background: var(--status-danger-border); }
.gov-thr-dot--warn { background: var(--status-warning-fg); }
.gov-thr-dot--target { background: var(--status-success-fg); }
.gov-thr-direction {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--secondary); border-radius: 0.55rem; padding: 0.55rem 0.85rem; margin-top: 0.7rem;
}
.gov-thr-dir { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; }
.gov-thr-dir.up { color: var(--status-success-fg); }
.gov-thr-dir.down { color: var(--status-danger-fg); }

/* Toggle switch */
.gov-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.gov-switch input { opacity: 0; width: 0; height: 0; }
.gov-switch-slider {
    position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
    background: hsl(220, 13%, 80%); transition: background 0.15s ease;
}
.gov-switch-slider::before {
    content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.gov-switch input:checked + .gov-switch-slider { background: hsl(220, 45%, 22%); }
.gov-switch input:checked + .gov-switch-slider::before { transform: translateX(18px); }

/* ---------- Configure Risk Appetite modal ---------- */
.ra-block { border: 1px solid var(--border); border-radius: 0.6rem; padding: 1rem; margin-bottom: 1rem; }
.ra-block-head { display: flex; align-items: center; gap: 0.6rem; }
.ra-name-input { flex: 1; min-width: 0; font-weight: 600; }
.ra-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
    background: hsl(155, 60%, 95%); color: var(--status-success-fg); border: 1px solid hsl(155, 50%, 82%);
}
.ra-delete { background: none; border: none; cursor: pointer; color: var(--muted-foreground); display: inline-flex; padding: 0.25rem; border-radius: 0.35rem; flex: none; }
.ra-delete:hover { color: var(--status-danger-border); background: var(--status-danger-bg); }
.ra-sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 0.9rem; }
@media (max-width: 640px) { .ra-sliders { grid-template-columns: 1fr; } }
.ra-slider-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.3rem; }
.ra-slider-val { font-weight: 700; color: var(--foreground); }
.ra-range { width: 100%; accent-color: hsl(220, 45%, 22%); cursor: pointer; }
.ra-add {
    border: 1px solid var(--border); border-radius: 0.6rem; padding: 1rem;
    background: hsl(210, 25%, 98.5%); margin-top: 0.25rem;
}
.ra-add > label { font-size: 0.85rem; font-weight: 600; }

/* ---------- Read-only (no-permission) metric/risk fields ---------- */
.gov-readonly-value {
    padding: 0.5rem 0.1rem; font-size: 0.92rem; color: var(--foreground);
    border-bottom: 1px solid var(--border); min-height: 1.2rem;
}
.gov-readonly-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.ra-title { font-size: 1rem; font-weight: 600; margin: 0; flex: 1; min-width: 0; }
.ra-desc-static { margin-top: 0.75rem; }
.ra-desc-static > div { font-size: 0.9rem; color: var(--foreground); margin-top: 0.15rem; }

/* ---------- Stripe billing (settings page + admin ledger) ---------- */
.billing-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
}
.billing-tier-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.billing-tier-card {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 1rem; border: 1px solid var(--border); border-radius: 0.6rem;
    background: var(--card);
}
.billing-tier-card--current { border-color: var(--accent); background: var(--secondary); }
.billing-tier-name { font-weight: 600; }
.billing-tier-level { font-size: 0.78rem; }
.billing-tier-card .btn { margin-top: auto; }
.billing-confirm {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0;
}
.billing-danger-zone { border-color: rgba(239, 68, 68, 0.35); }
.billing-danger-btn { color: #b91c1c; border-color: rgba(239, 68, 68, 0.4); }
.billing-danger-btn:hover { background: rgba(239, 68, 68, 0.08); }

.ledger-row { cursor: default; transition: background 120ms ease; }
.ledger-row-expandable { cursor: pointer; }
.ledger-row-expandable:hover { background: color-mix(in srgb, var(--secondary) 55%, transparent); }
.ledger-row-open { background: color-mix(in srgb, var(--secondary) 75%, transparent); }

/* Left-edge accent bar identifies the row type at a glance. */
.ledger-row-manual > td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, hsl(217, 91%, 60%) 55%, transparent); }
.ledger-row-stripe > td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, hsl(262, 83%, 58%) 55%, transparent); }

.ledger-chevron {
    color: var(--muted-foreground); font-size: 0.75rem; width: 24px; text-align: center;
    transition: color 120ms ease, transform 120ms ease;
}
.ledger-row-expandable:hover .ledger-chevron { color: var(--foreground); }
.ledger-row-open .ledger-chevron { color: var(--foreground); }

/* Type badges: pill with a leading colored dot. Colors match the row-edge accent. */
.badge-manual, .badge-stripe {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-weight: 600; letter-spacing: 0.02em; font-size: 0.72rem;
    padding: 0.2rem 0.55rem; border-radius: 999px;
}
.badge-manual::before, .badge-stripe::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.badge-manual {
    background: color-mix(in srgb, hsl(217, 91%, 60%) 12%, transparent);
    color: hsl(217, 91%, 38%);
}
.badge-manual::before { background: hsl(217, 91%, 55%); }
.badge-stripe {
    background: color-mix(in srgb, hsl(262, 83%, 58%) 12%, transparent);
    color: hsl(262, 83%, 42%);
}
.badge-stripe::before { background: hsl(262, 83%, 58%); }

/* Detail rows carry a soft type-tinted background + matching left-edge accent. */
.ledger-detail > td { background: var(--background); }
.ledger-detail-manual > td {
    background: color-mix(in srgb, hsl(217, 91%, 60%) 3%, var(--background));
    box-shadow: inset 2px 0 0 color-mix(in srgb, hsl(217, 91%, 60%) 55%, transparent);
}
.ledger-detail-stripe > td {
    background: color-mix(in srgb, hsl(262, 83%, 58%) 3%, var(--background));
    box-shadow: inset 2px 0 0 color-mix(in srgb, hsl(262, 83%, 58%) 55%, transparent);
}
.ledger-detail-body { padding: 1rem 1.25rem 1.1rem; }
.ledger-detail-grid {
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 0.35rem;
}
.ledger-kv {
    display: flex; gap: 0.75rem; font-size: 0.85rem; align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.ledger-kv:last-child { border-bottom: none; }
.ledger-kv-label {
    color: var(--muted-foreground); font-weight: 500;
    font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
    min-width: 140px; flex: none;
}
.ledger-kv code { word-break: break-all; }
.ledger-detail-label {
    font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem;
}
.ledger-pre {
    background: var(--secondary); border: 1px solid var(--border); border-radius: 0.45rem;
    padding: 0.65rem 0.8rem; font-size: 0.75rem; line-height: 1.5;
    overflow-x: auto; max-height: 320px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word; margin: 0;
}

/* ---------- Create New Goal slide-over (GoalEditModal) ---------- */
.goal-slideover-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1000;
}
.goal-slideover {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(480px, 100vw);
    background: var(--card); color: var(--card-foreground);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 30px rgba(15, 23, 42, 0.18);
    z-index: 1001; display: flex; flex-direction: column;
    animation: goal-slide-in 160ms ease;
}
@keyframes goal-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.goal-slideover-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.goal-slideover-title { margin: 0; font-size: 1.2rem; font-weight: 700; }
.goal-slideover-sub { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }
.goal-slideover-close {
    width: 2rem; height: 2rem; border-radius: 0.4rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--muted-foreground);
    cursor: pointer; transition: background 100ms ease, color 100ms ease;
}
.goal-slideover-close:hover { background: hsl(220, 15%, 93%); color: hsl(220, 30%, 15%); }

.goal-slideover-body {
    flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
}
/* Direct children stack at their natural height — without this the flex column
   shrinks the <details> preset library (overflow:hidden) to a clipped sliver. */
.goal-slideover-body > * { flex: none; }
.goal-slideover-foot {
    display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--border);
}
.goal-delete-btn { margin-right: auto; color: var(--destructive); }

/* "Applied preset: …" confirmation toast — bottom-center of the slide-over, auto-dismisses. */
.goal-preset-toast {
    position: absolute; left: 50%; bottom: 4.5rem; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.5rem;
    max-width: calc(100% - 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0.6rem 0.9rem; border-radius: 0.6rem;
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    font-size: 0.85rem; font-weight: 500; z-index: 5;
    animation: goal-preset-toast-in 160ms ease;
}
.goal-preset-toast svg { flex: none; color: var(--status-success); }
@keyframes goal-preset-toast-in {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Preset library card */
.goal-preset-library { padding: 0; overflow: hidden; }
.goal-preset-library > summary { list-style: none; cursor: pointer; }
.goal-preset-library > summary::-webkit-details-marker { display: none; }
.goal-preset-library-head {
    display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.25rem;
}
.goal-preset-library-icon {
    width: 2rem; height: 2rem; border-radius: 0.5rem; flex: none;
    display: grid; place-items: center; background: var(--secondary); font-size: 1rem;
}
.goal-preset-library-title { display: block; font-weight: 700; font-size: 0.95rem; }
.goal-preset-library-sub { display: block; font-size: 0.8rem; color: var(--muted-foreground); }
.goal-preset-library-body {
    padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.goal-preset-cats { display: flex; flex-direction: column; gap: 0.4rem; max-height: 22rem; overflow-y: auto; }

.goal-preset-cat { border: 1px solid var(--border); border-radius: 0.5rem; }
.goal-preset-cat > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 0.85rem; font-weight: 600; font-size: 0.9rem;
}
.goal-preset-cat > summary::-webkit-details-marker { display: none; }
.goal-preset-cat > summary::before {
    content: "▸"; display: inline-block; margin-right: 0.1rem;
    color: var(--muted-foreground); transition: transform 120ms; flex: none;
}
.goal-preset-cat[open] > summary::before { transform: rotate(90deg); }
.goal-preset-cat-name { flex: 1; }
.goal-preset-count { margin-left: auto; }
.goal-preset-rows { padding: 0.5rem 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }

.goal-preset-row {
    width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 0.6rem;
    padding: 0.75rem; background: var(--card); cursor: pointer;
    display: flex; flex-direction: column; gap: 0.4rem; font: inherit; color: inherit;
    transition: border-color 120ms ease, background 120ms ease;
}
.goal-preset-row:hover { border-color: var(--primary); background: hsla(215, 20%, 95%, 0.4); }
.goal-preset-row--selected,
.goal-preset-row--selected:hover { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 1px; background: hsla(215, 20%, 95%, 0.6); }
.goal-card--focus { outline: 2px solid var(--primary); outline-offset: 3px; }
.goal-preset-row-title { font-weight: 600; font-size: 0.9rem; }
.goal-preset-row-desc {
    font-size: 0.8rem; color: var(--muted-foreground); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.goal-preset-row-pills { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.goal-preset-row-target { font-size: 0.78rem; color: var(--muted-foreground); margin-left: auto; }

/* OR CREATE CUSTOM divider */
.goal-or-divider {
    display: flex; align-items: center; gap: 0.75rem; text-align: center;
    color: var(--muted-foreground); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
}
.goal-or-divider::before, .goal-or-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Form sections */
.goal-form-section { display: flex; flex-direction: column; gap: 0.75rem; }
.goal-form-heading {
    margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    color: var(--muted-foreground); text-transform: uppercase;
}
.goal-form-subnote { margin: -0.25rem 0 0; font-size: 0.82rem; color: var(--muted-foreground); }
/* The editor's "record a reading" row for a goal that reads its value from a metric. */
.goal-source-reading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem; align-items: end; margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--secondary); }
.goal-source-reading-latest { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.5rem; }
.goal-source-reading-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.goal-source-reading-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .goal-source-reading { grid-template-columns: 1fr; } }
.goal-req { color: var(--destructive); }

/* Goal-type picker: the worked example under the dropdown. */
.goal-type-example { margin: -0.25rem 0 0; font-size: 0.8rem; font-style: italic; color: var(--muted-foreground); }

/* Live "where this stands" readout under the measurement fields. */
.goal-standing-preview {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border-radius: 8px;
    border: 1px solid var(--border); background: var(--secondary);
    font-size: 0.85rem;
}
.goal-standing-preview-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted-foreground);
}
.goal-standing-preview--met { border-color: var(--status-success); }
.goal-standing-preview--not_met { border-color: var(--status-danger); }

/* Milestone steps and ad-hoc readings: one grid row per entry, collapsing on narrow screens. */
.goal-steps, .goal-readings { display: flex; flex-direction: column; gap: 0.4rem; }
.goal-step-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 10rem auto;
    align-items: center; gap: 0.5rem;
}
.goal-reading-row {
    display: grid; grid-template-columns: 10rem 8rem minmax(0, 1fr) auto;
    align-items: center; gap: 0.5rem;
}
.goal-step-due { font-size: 0.8rem; }
.goal-window-count { max-width: 5.5rem; }

@media (max-width: 640px) {
    .goal-step-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .goal-step-row .goal-step-due { grid-column: 2 / 4; }
    .goal-reading-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .goal-reading-row input[type="text"] { grid-column: 1 / 4; }
}

/* Link-to-metrics pill toggles */
.goal-metric-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.goal-metric-pill, .metric-picker-pill {
    border: 1px solid var(--border); border-radius: 9999px; padding: 0.2rem 0.6rem;
    font-size: 0.78rem; cursor: pointer; background: transparent; color: var(--foreground);
    font: inherit; line-height: 1.4; transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.goal-metric-pill--on, .metric-picker-pill--on {
    background: var(--primary); color: var(--primary-foreground); border-color: var(--primary);
}

/* Metric picker: search + selection summary over category groups (Components/Governance/MetricPicker). */
.metric-picker { display: flex; flex-direction: column; gap: 0.6rem; }
.metric-picker-bar { display: flex; align-items: center; gap: 0.6rem; }
.metric-picker-search { position: relative; flex: 1 1 auto; min-width: 0; }
.metric-picker-search-icon {
    position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); pointer-events: none;
}
.metric-picker-input { padding-left: 1.9rem; }
.metric-picker-count { white-space: nowrap; }
.metric-picker-clear {
    border: 0; background: none; padding: 0; font: inherit; font-size: 0.78rem;
    font-weight: 600; color: var(--primary); cursor: pointer;
}
.metric-picker-clear:hover { text-decoration: underline; }
.metric-picker-selected { padding-bottom: 0.6rem; border-bottom: 1px dashed var(--border); }
.metric-picker-group-title {
    display: flex; gap: 0.4rem; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground);
}
.metric-picker-group-title .muted { font-weight: 500; }
.metric-picker-empty { margin: 0; }

@media (max-width: 520px) {
    .goal-slideover { width: 100vw; }
}

/* ---------- Clickable metric card (dashboard opt-in only) ---------- */
.metric-card--clickable {
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
/* Shadow-only lift — deliberately NO transform. A transformed card becomes the
   containing block AND a stacking context for the fixed .metric-help-pop, which put
   the (?) tooltip in the wrong place and painted it behind later cards/tables. */
.metric-card--clickable:hover {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}
.metric-card--clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Metric Detail slide-over (MetricDetailPanel) ---------- */
.metric-detail-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1000;
}
.metric-detail {
    position: fixed; top: 0; right: 0; height: 100vh; width: clamp(560px, 50vw, 840px);
    background: var(--card); color: var(--card-foreground);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 30px rgba(15, 23, 42, 0.18);
    z-index: 1001; display: flex; flex-direction: column;
    animation: metric-detail-slide-in 160ms ease;
}
@keyframes metric-detail-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.metric-detail-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.metric-detail-head-main { display: flex; align-items: flex-start; gap: 0.7rem; }
.metric-detail-head-icon {
    width: 2rem; height: 2rem; border-radius: 0.5rem; flex: none;
    display: grid; place-items: center; background: var(--secondary);
    color: var(--muted-foreground); font-size: 1rem;
}
.metric-detail-title { margin: 0; font-size: 1.2rem; font-weight: 700; }
.metric-detail-sub { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); }
.metric-detail-close {
    width: 2rem; height: 2rem; border-radius: 0.4rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--muted-foreground);
    cursor: pointer; transition: background 100ms ease, color 100ms ease;
}
.metric-detail-close:hover { background: hsl(220, 15%, 93%); color: hsl(220, 30%, 15%); }

.metric-detail-body {
    flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
}
/* Direct children stack at their natural height (mirrors the goal slide-over fix) — without
   this the flex column collapses chart/table cards. */
.metric-detail-body > * { flex: none; }

.metric-detail-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.metric-detail-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.metric-detail-toolbar-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; position: relative; }
.metric-detail-toolbar-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.metric-detail-viewtoggle {
    display: inline-flex; gap: 0.15rem; padding: 0.15rem;
    border: 1px solid var(--border); border-radius: 0.5rem; background: var(--secondary);
}
.metric-detail-toolicon { display: inline-flex; color: var(--muted-foreground); flex: none; }
.metric-detail-rangeselect { display: inline-flex; align-items: center; gap: 0.4rem; }
.input.metric-detail-range-input { width: auto; min-width: 9.5rem; padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.85rem; }
.metric-detail-rangedates { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--primary); }
.metric-detail-rangedates-text { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.metric-detail-rangedates--btn { cursor: pointer; background: transparent; border: none; padding: 0.15rem 0.2rem; border-radius: 0.4rem; }
.metric-detail-rangedates--btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Custom date-range calendar popover (anchored under the readout button). */
.daterange-backdrop { position: fixed; inset: 0; z-index: 60; }
.daterange-popover {
    position: absolute; z-index: 61; top: calc(100% + 0.4rem); left: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 0.6rem;
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.18)); padding: 0.85rem;
}
.daterange-months { display: flex; gap: 1.25rem; }
.daterange-month { min-width: 15rem; }
.daterange-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem;
}
.daterange-monthlabel { flex: 1; text-align: center; }
.daterange-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border: none; background: transparent;
    color: var(--muted-foreground); border-radius: 0.35rem; cursor: pointer;
    font-size: 1.05rem; line-height: 1;
}
.daterange-nav:hover { background: var(--secondary); color: var(--foreground); }
.daterange-nav--placeholder { visibility: hidden; cursor: default; }
.daterange-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; }
.daterange-weekday { text-align: center; font-size: 0.7rem; color: var(--muted-foreground); padding: 0.2rem 0; }
.daterange-day {
    border: none; background: transparent; border-radius: 0.35rem;
    padding: 0.35rem 0; font-size: 0.82rem; cursor: pointer; text-align: center; color: var(--foreground);
}
.daterange-day:hover:not(:disabled) { background: var(--secondary); }
.daterange-day:disabled { opacity: 0.35; cursor: default; }
.daterange-day--in-range { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.daterange-day--start, .daterange-day--end {
    background: var(--primary); color: var(--primary-foreground, #fff); font-weight: 600;
}
.daterange-day--today:not(.daterange-day--start):not(.daterange-day--end) { outline: 1px solid var(--border); }
@media (max-width: 560px) {
    .daterange-months { flex-direction: column; }
    .daterange-popover { left: 0; right: 0; }
}
.metric-detail-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.65rem; border: none; border-radius: 0.4rem;
    background: transparent; color: var(--muted-foreground); cursor: pointer;
}
.metric-detail-iconbtn.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.metric-detail-iconbtn:hover:not(.active) { color: var(--foreground); }

.metric-detail-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem;
}
@media (max-width: 640px) { .metric-detail-stats { grid-template-columns: repeat(2, 1fr); } }
.metric-detail-stat {
    border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.7rem 0.85rem;
    background: var(--card); display: flex; flex-direction: column; gap: 0.25rem;
}
.metric-detail-stat-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted-foreground);
}
.metric-detail-stat-value { font-size: 1.05rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.3rem; }
.metric-detail-stat-arrow { flex: none; }
.metric-detail-stat--good { color: var(--status-success); }
.metric-detail-stat--bad { color: var(--status-danger); }

.metric-detail-table-card { overflow: hidden; }
.metric-detail-table { width: 100%; border-collapse: collapse; }
.metric-detail-table th, .metric-detail-table td {
    text-align: left; padding: 0.55rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.metric-detail-table th { font-weight: 600; color: var(--muted-foreground); }
.metric-detail-table tr:last-child td { border-bottom: none; }
.metric-detail-table .metric-detail-td-period { font-weight: 600; }
.metric-detail-table .metric-detail-td-num { text-align: right; white-space: nowrap; }
.metric-detail-table td.metric-detail-stat--good { color: var(--status-success); font-weight: 600; }
.metric-detail-table td.metric-detail-stat--bad { color: var(--status-danger); font-weight: 600; }

/* Outer frame wrapping the "Historical Data Points" heading + table. */
.metric-detail-frame .card-body { display: flex; flex-direction: column; gap: 0.6rem; }
.metric-detail-frame-head { margin: 0; }

/* Inline row-edit controls. */
.metric-detail-td-edit { width: 1%; white-space: nowrap; text-align: right; }
.metric-detail-edit-input { width: 100%; min-width: 5rem; padding: 0.25rem 0.4rem; font-size: 0.85rem; }
.metric-detail-rowbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border: none; border-radius: 0.35rem;
    background: transparent; color: var(--muted-foreground); cursor: pointer;
}
.metric-detail-rowbtn:hover:not(:disabled) { background: var(--secondary); color: var(--foreground); }
.metric-detail-rowbtn:disabled { opacity: 0.5; cursor: default; }
.metric-detail-rowbtn--save { color: var(--status-success); }
.metric-detail-rowbtn--cancel { color: var(--status-danger); }

.metric-detail-section { display: flex; flex-direction: column; gap: 0.6rem; }
.metric-detail-section-head {
    margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    color: var(--muted-foreground); text-transform: uppercase;
    display: flex; align-items: center; gap: 0.4rem;
}
.metric-detail-section-icon { font-size: 0.9rem; color: var(--muted-foreground); flex: none; text-transform: none; }
.metric-detail-soon { margin-left: auto; text-transform: none; letter-spacing: 0; }
.metric-detail-context {
    display: flex; flex-direction: column; gap: 0.4rem;
    border: 1px solid var(--border); border-radius: 0.55rem; padding: 0.65rem 0.8rem;
    background: color-mix(in srgb, var(--status-info) 4%, var(--card));
}
.metric-detail-context-row { margin: 0; font-size: 0.85rem; line-height: 1.45; }
.metric-detail-context-formula code { font-size: 0.82rem; }
.metric-detail-sources-label {
    display: flex; align-items: center; gap: 0.35rem; color: var(--muted-foreground);
    font-weight: 600; font-size: 0.85rem;
}
.metric-detail-sources { display: flex; flex-direction: column; gap: 0.45rem; }
.metric-detail-source-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    border: 1px solid var(--border); border-radius: 0.55rem; padding: 0.55rem 0.75rem;
}
.metric-detail-source-name { font-size: 0.9rem; font-weight: 600; }
.metric-detail-ai-note { margin: 0; }
.metric-detail-goal-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Report Source & Context — framed header + collapse. */
.metric-detail-report .card-body { display: flex; flex-direction: column; gap: 0.75rem; }
.metric-detail-report-head { display: flex; align-items: center; justify-content: space-between; }
.metric-detail-report-icon { color: var(--status-warning); }
.metric-detail-report-collapse {
    display: inline-flex; border: none; background: transparent; cursor: pointer;
    color: var(--muted-foreground); padding: 0.15rem;
}
.metric-detail-report-collapse:hover { color: var(--foreground); }

/* Data source cards (name + badge + "where to find"). */
.metric-detail-source-cards { display: flex; flex-direction: column; gap: 0.6rem; }
.metric-detail-source-card {
    border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem 0.85rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.metric-detail-source-card-head { display: flex; align-items: center; gap: 0.5rem; }
.metric-detail-source-find {
    display: flex; align-items: center; gap: 0.3rem;
    color: var(--muted-foreground); font-size: 0.78rem; font-weight: 600;
}
.metric-detail-source-loc {
    border-radius: 0.45rem; padding: 0.5rem 0.7rem; font-size: 0.82rem; font-weight: 600;
    background: color-mix(in srgb, var(--status-warning) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--status-warning) 25%, transparent);
    color: color-mix(in srgb, var(--status-warning) 75%, #000);
}

/* "What This Measures" summary block. */
.metric-detail-summary-head {
    display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem;
    color: var(--muted-foreground); font-weight: 600; font-size: 0.85rem;
}
.metric-detail-summary-head svg { color: var(--status-warning); }
.metric-detail-summary-text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--muted-foreground); }

/* Threshold Reference — 3-column dotted legend. */
.metric-detail-thref { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 560px) { .metric-detail-thref { grid-template-columns: 1fr; } }
.metric-detail-thref-label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--muted-foreground);
}
.metric-detail-thref-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.metric-detail-thref-dot--reg { background: var(--status-danger); }
.metric-detail-thref-dot--warn { background: var(--status-warning); }
.metric-detail-thref-dot--target { background: var(--status-success); }
.metric-detail-thref-value { margin-top: 0.25rem; font-weight: 700; font-size: 0.95rem; }

@media (max-width: 520px) {
    .metric-detail { width: 100vw; }
}

/* ===================== Board Meetings ============================== */
/* Extra meeting-type pill tones + cancelled status (base tones live above). */
.bm-meeting-pill.teal   { background: color-mix(in srgb, var(--status-info-fg) 12%, transparent); color: hsl(190, 80%, 30%); border-color: color-mix(in srgb, var(--status-info-fg) 25%, transparent); }
.bm-meeting-pill.indigo { background: rgba(99, 102, 241, 0.12); color: hsl(243, 70%, 48%); border-color: rgba(99, 102, 241, 0.25); }
.bm-meeting-pill.gray   { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }
.bm-status-pill.cancelled { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }

/* Generic small icon button used in lists/sidebars. */
.bm-iconbtn {
    width: 2rem; height: 2rem; border-radius: 0.45rem; display: inline-grid; place-items: center;
    background: transparent; border: 1px solid var(--border); color: var(--muted-foreground);
    cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.bm-iconbtn:hover { background: var(--secondary); color: var(--foreground); }
.bm-iconbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.bm-iconbtn-danger {
    width: 2rem; height: 2rem; border-radius: 0.45rem; display: inline-grid; place-items: center; flex: none;
    background: transparent; border: 0; color: var(--muted-foreground); cursor: pointer;
}
.bm-iconbtn-danger:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }

/* ---- Schedule Meeting wizard ---- */
.bm-wizard { width: min(860px, calc(100vw - 2rem)); max-width: 860px; }
.bm-req { color: var(--status-danger-fg); }
.bm-wizard-tabs { display: flex; gap: 0.25rem; padding: 0 1.5rem; border-bottom: 1px solid var(--border); }
.bm-wizard-tab {
    flex: 1; padding: 0.7rem 0.5rem; border: 0; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted-foreground);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bm-wizard-tab.is-done { color: var(--foreground); }
.bm-wizard-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.bm-wizard-tab.needs-attention { color: var(--status-danger-fg); }
.bm-wizard-tab.needs-attention.is-active { border-bottom-color: var(--status-danger-fg); }
.bm-wizard-tab-flag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem; margin-left: 0.35rem; border-radius: 999px;
    background: var(--status-danger-bg); color: var(--status-danger-fg); font-size: 0.72rem; font-weight: 700;
}
.bm-wizard-issues { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.bm-wizard-issues li { margin: 0.15rem 0; }
.bm-wizard-issue-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.bm-wizard-body { max-height: min(64vh, 620px); overflow-y: auto; }
.bm-wizard-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem; border-top: 1px solid var(--border); gap: 0.75rem;
}
.bm-wizard-foot-right { display: flex; gap: 0.6rem; }
.bm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .bm-form-grid { grid-template-columns: 1fr; } }
.bm-wizard-card { border: 1px solid var(--border); border-radius: 0.6rem; padding: 1rem 1.1rem; background: var(--card); }
.bm-wizard-card-title { font-size: 0.92rem; font-weight: 600; color: var(--foreground); display: flex; align-items: center; gap: 0.4rem; }
.bm-wizard-card-sub { font-size: 0.8rem; color: var(--muted-foreground); }
.bm-wizard-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.bm-wizard-empty {
    border: 1px dashed var(--border); border-radius: 0.6rem; padding: 1.75rem 1rem;
    text-align: center; color: var(--muted-foreground); font-size: 0.875rem;
}
.bm-template-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }

/* Toggle switch (recurring, required-before-meeting). */
.bm-switch { display: inline-flex; cursor: pointer; }
.bm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bm-switch-track {
    position: relative; width: 2.6rem; height: 1.4rem; border-radius: 9999px;
    background: var(--secondary); border: 1px solid var(--border); transition: background 120ms ease;
}
.bm-switch-knob {
    position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
    width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,0.3); transition: left 120ms ease;
}
.bm-switch input:checked + .bm-switch-track { background: var(--primary); border-color: var(--primary); }
.bm-switch input:checked + .bm-switch-track .bm-switch-knob { left: calc(100% - 1.05rem - 3px); }
.bm-scope-hint {
    display: flex; align-items: flex-start; gap: 0.3rem; margin: 0;
    font-size: 0.75rem; line-height: 1.35; color: var(--status-warning-fg);
}
.bm-recurring-card { margin-top: 1rem; }
.bm-recurring-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bm-recurring-label { display: flex; align-items: center; gap: 0.7rem; color: var(--foreground); }
/* Divider mirrors the mock: the toggle header sits above the schedule fields in one card. */
.bm-recurring-fields { border-top: 1px solid var(--border); margin-top: 0.9rem; padding-top: 0.9rem; }
/* Schedule fields share one row like the mock; count varies (2-4) by frequency and surface. */
.bm-series-fields { display: flex; gap: 1.25rem; }
.bm-series-fields > .bm-form-row { flex: 1; min-width: 0; }
@media (max-width: 640px) { .bm-series-fields { flex-direction: column; gap: 0; } }
.bm-recurring-preview {
    background: var(--secondary); border-radius: 0.45rem; padding: 0.55rem 0.75rem; font-size: 0.82rem;
}

.bm-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--foreground); cursor: pointer; }
.bm-check input { width: 1rem; height: 1rem; accent-color: var(--primary); cursor: pointer; }
.bm-check span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Built agenda / task rows inside the wizard. */
.bm-agenda-build-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bm-agenda-build-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card); }
.bm-agenda-build-num { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--secondary); font-size: 0.78rem; font-weight: 700; color: var(--foreground); }
.bm-agenda-build-main { flex: 1; min-width: 0; }
.bm-agenda-build-title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.bm-agenda-build-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--muted-foreground); margin-top: 0.1rem; align-items: center; }
/* Only remaining use: the wizard task list's "Required" tag — vote chips use .md-agenda-chip--vote. */
.bm-agenda-vote-chip { background: var(--status-warning-bg); color: var(--status-warning-fg); border-radius: 9999px; padding: 0.05rem 0.5rem; font-weight: 600; }
.bm-task-prio { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.bm-task-prio--high { background: var(--status-danger-fg); }
.bm-task-prio--medium { background: var(--status-warning-fg); }
.bm-task-prio--low { background: var(--status-info-fg); }

/* Attendees step. */
.bm-quickadd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bm-quickadd-chip { border: 1px solid var(--border); background: var(--card); border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.8rem; font-weight: 500; color: var(--foreground); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.bm-quickadd-chip:hover { border-color: var(--primary); }
.bm-quickadd-chip.is-added { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.bm-attendee-grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr auto; gap: 0 1rem; align-items: end; }
@media (max-width: 720px) { .bm-attendee-grid { grid-template-columns: 1fr 1fr; } }
.bm-attendee-req { justify-content: flex-end; }
.bm-attendee-list { display: flex; flex-direction: column; }
.bm-attendee-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.bm-attendee-row:last-child { border-bottom: 0; }
.bm-attendee-name { font-weight: 600; font-size: 0.875rem; color: var(--foreground); }
.bm-attendee-role { margin-left: 0.5rem; font-size: 0.76rem; color: var(--muted-foreground); }
.bm-attendee-optional { margin-left: 0.5rem; font-size: 0.7rem; color: var(--muted-foreground); font-style: italic; }

/* ---- Meeting details page ---- */
.md-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.md-topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.md-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .md-grid { grid-template-columns: 1fr; } }
.md-title { font-size: 1.4rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.6rem; }
.md-info-row { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--foreground); }
.md-info-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.md-info-item svg { color: var(--muted-foreground); }
.md-location { margin-top: 0.6rem; font-size: 0.875rem; color: var(--foreground); }
.md-link-row { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.md-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--primary); font-size: 0.85rem; text-decoration: none; word-break: break-all; }
.md-link:hover { text-decoration: underline; }
.md-link-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.md-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.md-agenda-head-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.md-workflow { display: inline-flex; border: 1px solid var(--border); border-radius: 9999px; overflow: hidden; background: var(--secondary); }
.md-workflow-step { border: 0; background: transparent; padding: 0.3rem 0.85rem; font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground); cursor: pointer; }
.md-workflow-step:disabled { cursor: default; }
.md-workflow-step.is-active { background: var(--foreground); color: var(--background); }

.md-agenda-list { display: flex; flex-direction: column; }
.md-agenda-item { border-bottom: 1px solid var(--border); }
.md-agenda-item:last-child { border-bottom: 0; }
.md-agenda-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; }
.md-agenda-num { flex: none; width: 1.5rem; text-align: center; font-weight: 700; color: var(--muted-foreground); font-size: 0.85rem; }
.md-agenda-titlewrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.md-agenda-title { font-size: 0.9rem; font-weight: 500; color: var(--foreground); }
.md-agenda-doc { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--muted-foreground); background: var(--secondary); border-radius: 9999px; padding: 0.1rem 0.5rem; }
.md-agenda-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.md-agenda-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; border-radius: 9999px; padding: 0.15rem 0.6rem; white-space: nowrap; }
.md-agenda-chip--consent { background: var(--status-info-bg); color: var(--status-info-fg); }
.md-agenda-chip--vote { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-foreground); }
.md-agenda-chip--invited { background: var(--status-success-bg); color: var(--status-success-fg); }
.md-agenda-chip--norecord { background: var(--muted); color: var(--muted-foreground); }
.md-agenda-assign { flex: none; }
.md-assign-select { width: 9.5rem; padding: 0.35rem 0.5rem; font-size: 0.8rem; cursor: pointer; }
.md-agenda-expand { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; border-radius: 0.4rem; }
.md-agenda-expand:hover { background: var(--secondary); color: var(--foreground); }
.md-agenda-expand--danger:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.md-agenda-detail { padding: 0 0 0.85rem 2.25rem; }
.md-agenda-detail-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted-foreground); }
.md-agenda-detail-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.md-agenda-desc { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--foreground); }
.md-notes { font-size: 0.9rem; color: var(--foreground); white-space: pre-wrap; line-height: 1.5; }
.md-minutes-pre { margin: 0; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.55; color: var(--foreground); white-space: pre-wrap; overflow-wrap: anywhere; }

.md-side-title { display: flex; align-items: center; gap: 0.45rem; }
.md-attendee-list { display: flex; flex-direction: column; gap: 0.65rem; }
.md-attendee { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.md-attendee-name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.md-attendee-role { font-size: 0.75rem; color: var(--muted-foreground); }
.md-side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.md-rsvp-summary { margin: 0.35rem 0 0; }
.md-minutes-target { display: flex; align-items: center; gap: 0.3rem; margin: 0.5rem 0 0; justify-content: flex-end; text-align: right; }
/* Same hint, left-aligned: it opens an agenda item's detail rather than trailing a button row. */
.md-item-source { display: flex; align-items: center; gap: 0.3rem; margin: 0 0 0.6rem; }
.md-inline-link {
    border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--accent-foreground); text-decoration: underline;
}
.lr-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lr-ai-title { display: inline-flex; align-items: center; gap: 0.4rem; }
.lr-ai-badge {
    font-size: 0.68rem; font-weight: 600; border-radius: 9999px; padding: 0.1rem 0.55rem;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-foreground);
    white-space: nowrap;
}
.md-agenda-add { display: flex; gap: 0.5rem; }
.md-agenda-add .input { flex: 1; min-width: 0; }
.md-agenda-add .btn { flex: none; white-space: nowrap; }
.md-attendee-edit { display: flex; align-items: center; gap: 0.35rem; }
.md-rsvp-select { width: auto; padding: 0.2rem 1.6rem 0.2rem 0.5rem; font-size: 0.78rem; }
.md-attendee-add { border-top: 1px solid var(--border); margin-top: 0.75rem; padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; }
.md-attendee-add-row { display: flex; gap: 0.4rem; }
.md-attendee-add-row .input { flex: 1; min-width: 0; }
.md-attendee-add-row .btn { flex: none; white-space: nowrap; }
.md-rsvp { font-size: 0.7rem; font-weight: 600; border-radius: 9999px; padding: 0.1rem 0.55rem; border: 1px solid transparent; white-space: nowrap; }
.md-rsvp--confirmed { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.md-rsvp--tentative { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.md-rsvp--declined  { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.md-rsvp--invited   { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }
.md-task-count { margin-left: auto; font-size: 0.74rem; font-weight: 600; }
.md-task-list { display: flex; flex-direction: column; gap: 0.55rem; }
.md-task {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
    padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 0.5rem;
    text-decoration: none; color: inherit;
}
.md-task:hover { background: var(--secondary); }
.md-task-main { min-width: 0; }
.md-task-title { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.md-task-meta { font-size: 0.74rem; color: var(--muted-foreground); margin-top: 0.05rem; }
.md-task-required {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.2rem;
    font-size: 0.7rem; font-weight: 600; color: var(--status-warning-fg);
}
.md-task-status { flex: none; font-size: 0.7rem; font-weight: 600; border-radius: 9999px; padding: 0.1rem 0.55rem; border: 1px solid transparent; white-space: nowrap; }
.md-task-status--completed   { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.md-task-status--in_progress { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.md-task-status--pending     { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }
.md-task-status--cancelled   { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }

.md-material-list { display: flex; flex-direction: column; gap: 0.65rem; }
.md-material { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.md-material-name { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.md-material-meta { font-size: 0.74rem; color: var(--muted-foreground); margin-top: 0.05rem; }
.bm-task-meeting-link { color: var(--primary); text-decoration: none; }
.bm-task-meeting-link:hover { text-decoration: underline; }

/* ===================== Meetings — agenda detail features ============= */
/* Wizard: agenda template tools + editable item cards */
.bm-agenda-head-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bm-template-select-wrap { position: relative; display: inline-flex; align-items: center; }
.bm-template-select-wrap > svg { position: absolute; left: 0.6rem; color: var(--muted-foreground); pointer-events: none; }
.bm-template-select { padding-left: 2rem; min-width: 12rem; cursor: pointer; }

.bm-agenda-card { border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); margin-bottom: 0.6rem; overflow: hidden; }
.bm-agenda-card.is-editing .bm-agenda-card-head { background: var(--secondary); }
.bm-agenda-card.is-dragover { border-color: var(--muted-foreground); box-shadow: 0 -2px 0 var(--primary) inset; }
.bm-agenda-card-head { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 0.9rem; }
.bm-drag-handle { display: inline-flex; align-items: center; color: var(--muted-foreground); cursor: grab; flex: none; padding-top: 0.1rem; }
.bm-drag-handle:active { cursor: grabbing; }
.bm-agenda-card-titlewrap { flex: 1; min-width: 0; }
.bm-agenda-card-title { font-size: 0.9rem; font-weight: 600; color: var(--foreground); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bm-agenda-dur-badge { font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); background: var(--secondary); border-radius: 9999px; padding: 0.1rem 0.5rem; }
.bm-agenda-card-sub2 { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.15rem; }
.bm-agenda-card-body { padding: 0.5rem 0.9rem 1rem; border-top: 1px solid var(--border); }
.bm-iconbtn-ghost { flex: none; width: 2rem; height: 2rem; border-radius: 0.45rem; display: grid; place-items: center; background: transparent; border: 0; color: var(--muted-foreground); cursor: pointer; }
.bm-iconbtn-ghost:hover { background: var(--secondary); color: var(--foreground); }

.bm-field-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.bm-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center;
    border: 1px dashed var(--border); border-radius: 0.55rem; padding: 1.1rem 1rem; margin-top: 0.35rem;
    color: var(--muted-foreground); font-size: 0.8rem;
}
/* Amber like the board-vote chip: approval is the item state the chip advertises. */
.bm-approval-card {
    background: var(--status-warning-bg);
    border-color: color-mix(in srgb, var(--status-warning-fg) 35%, transparent);
}
.bm-approval-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.bm-approval-switch { display: flex; align-items: center; gap: 0.6rem; }
.bm-approval-fields { border-top: 1px solid color-mix(in srgb, var(--status-warning-fg) 25%, transparent); margin-top: 0.8rem; padding-top: 0.8rem; }
.bm-switch-caption { font-size: 0.82rem; font-weight: 600; color: var(--muted-foreground); }
.bm-collab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bm-collab-perms { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.4rem; }
.bm-check--sm { font-size: 0.78rem; }

.bm-tag { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 9999px; padding: 0.1rem 0.5rem; }
.bm-tag--required { background: var(--status-info-bg); color: var(--status-info-fg); }
.bm-tag--optional { background: var(--secondary); color: var(--muted-foreground); }
.bm-attendee-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bm-attendee-actions { display: flex; align-items: center; gap: 0.75rem; }

.bm-modal--narrow { width: min(440px, calc(100vw - 2rem)); max-width: 440px; }
/* Footer is a direct child of .bm-modal here (not inside the padded body), so it needs its own padding. */
.bm-modal--narrow .bm-modal-foot { padding: 0 1.5rem 1.5rem; margin-top: 0.75rem; }
.bm-overlay-top { z-index: 1200; }

/* Details: agenda drag handle + edit form */
.md-drag-handle { display: inline-flex; align-items: center; color: var(--muted-foreground); cursor: grab; flex: none; }
.md-drag-handle:active { cursor: grabbing; }
.md-agenda-item.is-dragover { box-shadow: 0 -2px 0 var(--primary) inset; }
.md-edit-form { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 0.9rem 1rem; background: var(--card); margin-bottom: 0.85rem; }
.md-edit-toggles { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.6rem; }

/* Manage Templates dialog */
.mt-list { display: flex; flex-direction: column; gap: 0.6rem; }
.mt-row { border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); overflow: hidden; }
.mt-row-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; }
.mt-row-toggle { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; border-radius: 0.4rem; }
.mt-row-toggle:hover { background: var(--secondary); color: var(--foreground); }
.mt-row-main { flex: 1; min-width: 0; }
.mt-row-name { font-size: 0.9rem; font-weight: 600; color: var(--foreground); }
.mt-row-meta { font-size: 0.76rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.mt-row-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.mt-item-preview { margin: 0; padding: 0 1rem 0.8rem 2.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.mt-item-preview li { font-size: 0.82rem; color: var(--foreground); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mt-item-title { font-weight: 500; }
.mt-item-dur { font-size: 0.72rem; color: var(--muted-foreground); background: var(--secondary); border-radius: 9999px; padding: 0.05rem 0.45rem; }
.mt-edit-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; }
.mt-edit-row.is-dragover { box-shadow: 0 -2px 0 var(--primary) inset; }
.mt-edit-fields { flex: 1; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mt-edit-fields .input { flex: 1; min-width: 8rem; }
.mt-edit-dur { flex: 0 0 5rem; min-width: 4rem; }

/* Details: attached documents on an agenda item */
.md-agenda-item.is-open { background: color-mix(in srgb, var(--secondary) 45%, transparent); border-radius: 0.5rem; }
.md-section-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted-foreground); text-transform: uppercase; margin: 0.25rem 0 0.5rem; }
.md-doc-section { padding: 0.25rem 0 0.75rem; }
.md-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card); margin-bottom: 0.4rem; }
.md-doc-info { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.md-doc-info > svg { color: var(--status-danger-fg); flex: none; }
.md-doc-name { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.md-doc-size { font-size: 0.74rem; color: var(--muted-foreground); }
.md-doc-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.md-doc-upload { display: inline-flex; align-items: center; gap: 0.4rem; position: relative; overflow: hidden; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--primary); border: 1px dashed var(--border); border-radius: 0.5rem; padding: 0.5rem 0.8rem; }
.md-doc-upload:hover { border-color: var(--primary); }
.md-doc-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Details: record vote */
.md-vote-section { border-top: 1px solid var(--border); padding-top: 0.85rem; margin-top: 0.5rem; }
.md-vote-label { color: var(--status-danger-fg); }
.md-motion-box { border: 1px solid var(--status-warning-border); background: var(--status-warning-bg); border-radius: 0.5rem; padding: 0.8rem 0.9rem; }
.md-motion-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--status-warning-fg); text-transform: uppercase; }
.md-motion-text { font-style: italic; color: var(--foreground); margin: 0.5rem 0; }
.md-motion-input { margin-top: 0.5rem; background: var(--card); font-style: italic; }
.md-motion-hint { font-size: 0.75rem; color: var(--status-warning-fg); margin: 0.4rem 0 0; }
.md-votes-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; }
.md-votes-bulk { display: flex; gap: 0.4rem; }
.md-vote-bulk { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; border: 1px solid var(--border); background: var(--card); border-radius: 0.4rem; padding: 0.25rem 0.6rem; cursor: pointer; color: var(--foreground); }
.md-vote-bulk--yes { color: var(--status-success-fg); border-color: var(--status-success-border); }
.md-vote-bulk--no { color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.md-vote-bulk--absent { color: var(--muted-foreground); }
.md-vote-bulk:hover { background: var(--secondary); }
.md-vote-bulk:disabled { opacity: 0.45; cursor: default; }
.md-vote-bulk:disabled:hover { background: var(--card); }
.md-vote-list { display: flex; flex-direction: column; margin-top: 0.5rem; }
.md-vote-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem; margin-bottom: 0.4rem; background: var(--card); }
.md-vote-member { min-width: 0; }
.md-vote-name { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.md-vote-role { font-size: 0.76rem; color: var(--muted-foreground); margin-left: 0.3rem; }
.md-vote-btns { display: flex; gap: 0.35rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.md-vote-btn { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); border-radius: 9999px; padding: 0.25rem 0.7rem; cursor: pointer; }
.md-vote-btn:disabled { cursor: default; opacity: 0.7; }
.md-vote-btn--yes.is-on { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.md-vote-btn--no.is-on { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.md-vote-btn--abstain.is-on { background: var(--secondary); color: var(--foreground); border-color: var(--border); }
.md-vote-btn--absent.is-on { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); font-style: italic; }
.md-vote-tally { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.md-vote-result { font-size: 0.82rem; font-weight: 700; margin-left: auto; }
.md-vote-result.is-passed { color: var(--status-success-fg); }
.md-vote-result.is-failed { color: var(--status-danger-fg); }
.md-itemnotes { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.5rem; }
/* Step 3 of the vote flow — the step header is its heading, so it carries neither rule nor label. */
.md-itemnotes--step { border-top: 0; padding-top: 0; margin-top: 0.35rem; }

/* Details: vote flow steps (1 Motion / 2 Second / 3 Discussion / 4 Vote) */
.md-vote-step { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.95rem; margin-bottom: 0.35rem; color: var(--muted-foreground); }
.md-vote-step-num {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.25rem; height: 1.25rem; border-radius: 9999px;
    background: var(--foreground); color: var(--background);
    font-size: 0.68rem; font-weight: 700;
}
.md-vote-step-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foreground); }
.md-vote-step-rule { flex: 1; height: 1px; background: var(--border); }
.md-notes-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ===================== Meetings — live view modes ==================== */
/* View-mode bar (rendered only while the meeting is live) */
.mv-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: 0.6rem; background: var(--secondary); padding: 0.6rem 0.9rem;
}
.mv-bar-label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.mv-bar-toggles { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.mv-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid var(--border); background: var(--card); color: var(--foreground);
    border-radius: 0.5rem; padding: 0.35rem 0.8rem;
    font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.mv-toggle:hover { background: var(--secondary); }
.mv-toggle.is-active { background: var(--foreground); color: var(--background); border-color: var(--foreground); }

/* Now Presenting banner (above the agenda list) */
.mv-presenting {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    border: 1px solid var(--border); border-radius: 0.5rem; background: var(--secondary); padding: 0.5rem 0.8rem;
}
.mv-presenting-text { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--foreground); }
.mv-presenting-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.mv-presenting-clear {
    display: inline-flex; align-items: center; gap: 0.25rem; border: 0; background: transparent;
    color: var(--muted-foreground); font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; border-radius: 0.4rem; padding: 0.2rem 0.5rem;
}
.mv-presenting-clear:hover { background: var(--card); color: var(--foreground); }

/* Agenda-card notices: finalized-and-ready + post-adjournment */
.md-agenda-notice { display: flex; align-items: center; gap: 0.45rem; }
.md-adjourned-note { border: 1px solid var(--border); border-radius: 0.5rem; background: var(--secondary); padding: 0.85rem 1rem; }
.md-adjourned-title { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; margin-bottom: 0.25rem; }
.md-adjourned-note p { margin: 0; font-size: 0.85rem; }

/* Ballot controls locked card (electronic voting is Tier 2; reads stay visible) */
.mv-vote-locked {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    border: 1px dashed var(--border); border-radius: 0.5rem; background: var(--secondary); padding: 0.7rem 0.9rem; margin: 0.5rem 0;
}
.mv-vote-locked-icon { flex: none; font-size: 1rem; }
.mv-vote-locked-text { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: 0.1rem; }
.mv-vote-locked-text strong { font-size: 0.82rem; color: var(--foreground); }
.mv-vote-locked-text span { font-size: 0.76rem; color: var(--muted-foreground); }

/* Live meeting header shared by Board View */
.mv-live-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); padding: 0.75rem 1rem; }
.mv-live-title-wrap { display: flex; align-items: center; gap: 0.6rem; }
.mv-live-title { font-size: 1.15rem; font-weight: 700; color: var(--foreground); margin: 0; }
.mv-live-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted-foreground); }

/* Board View */
.mv-board-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .mv-board-grid { grid-template-columns: 1fr; } }
.mv-rail { display: flex; flex-direction: column; gap: 0.25rem; }
.mv-rail-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
    border: 0; background: transparent; color: var(--foreground);
    border-radius: 0.5rem; padding: 0.5rem 0.6rem;
    font-family: inherit; font-size: 0.85rem; cursor: pointer;
}
.mv-rail-item:hover { background: var(--secondary); }
.mv-rail-item.is-current { background: var(--foreground); color: var(--background); }
.mv-rail-num {
    flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--secondary); color: var(--foreground); font-size: 0.72rem; font-weight: 700;
}
.mv-rail-item.is-current .mv-rail-num { background: var(--background); color: var(--foreground); }
.mv-rail-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-rail-voted { display: inline-flex; flex: none; color: var(--status-success-fg); }
.mv-rail-item.is-current .mv-rail-voted { color: var(--background); }
/* Ballots recorded but no yes/no cast — captured, yet nothing was decided. */
.mv-rail-voted--none { color: var(--muted-foreground); }

.mv-board-itemhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mv-board-itemtitle { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.mv-board-itemtitle h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--foreground); }
.mv-item-num {
    flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--foreground); color: var(--background); font-size: 0.8rem; font-weight: 700;
}
.mv-board-itemnav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mv-board-empty { text-align: center; padding: 2.5rem 1rem; }
.mv-board-empty p { margin: 0 0 0.25rem; font-size: 0.9rem; color: var(--foreground); }
.mv-board-empty p.muted { font-size: 0.8rem; }
.mv-yourvote { border: 1px solid var(--border); border-radius: 0.6rem; background: var(--secondary); padding: 0.85rem 1rem; }
.mv-yourvote-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mv-yourvote-label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 700; color: var(--foreground); }
.mv-yourvote-value { font-size: 0.85rem; font-weight: 600; color: var(--status-success-fg); }
.mv-yourvote-value.muted { color: var(--muted-foreground); font-weight: 500; }
.mv-yourvote-result { margin-left: auto; }
.mv-tally { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted-foreground); margin-top: 0.5rem; }
.mv-tally strong { color: var(--foreground); }

/* Presenter View */
.mv-presentas-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mv-presentas-label { font-size: 0.85rem; font-weight: 600; color: var(--foreground); }
.mv-presentas-select { width: auto; min-width: 14rem; cursor: pointer; }
.mv-pcard.is-mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mv-pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mv-pcard-title { display: flex; align-items: flex-start; gap: 0.7rem; min-width: 0; }
.mv-pcard-name { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.95rem; font-weight: 700; color: var(--foreground); }
.mv-mine-chip {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-foreground);
    border-radius: 9999px; padding: 0.1rem 0.55rem;
}
.mv-pcard-presenter { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.15rem; }
.mv-boardvote-chip {
    flex: none; display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 700;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-foreground);
    border-radius: 9999px; padding: 0.2rem 0.65rem; white-space: nowrap;
}
.mv-summary-box { border: 1px solid var(--border); border-radius: 0.5rem; background: var(--secondary); padding: 0.6rem 0.8rem; }
.mv-summary-box p { margin: 0; font-size: 0.85rem; color: var(--foreground); }
.mv-speaker-notes { border-style: dashed; }

/* Presenter window (chrome-less, dark for screen sharing) */
.mv-pw-shell {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    background: hsl(222, 47%, 7%); color: hsl(210, 40%, 96%);
}
.mv-pw-header {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 1.1rem; background: hsl(222, 44%, 11%); border-bottom: 1px solid hsl(222, 30%, 18%);
}
.mv-pw-doc { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.mv-pw-doc-icon { color: var(--status-danger); flex: none; }
.mv-pw-doc-name { font-size: 0.95rem; font-weight: 700; }
.mv-pw-doc-meeting { font-size: 0.78rem; color: hsl(215, 20%, 65%); }
.mv-pw-close {
    display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent;
    color: hsl(210, 40%, 96%); font-family: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; border-radius: 0.4rem; padding: 0.35rem 0.7rem;
}
.mv-pw-close:hover { background: hsl(222, 30%, 18%); }
.mv-pw-frame { flex: 1; width: 100%; border: 0; background: hsl(222, 47%, 7%); }
.mv-pw-note, .mv-pw-fallback { margin: auto; text-align: center; padding: 2rem; }
.mv-pw-note h3, .mv-pw-fallback p { color: hsl(210, 40%, 96%); }
.mv-pw-note p { color: hsl(215, 20%, 65%); }
.mv-pw-fallback { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.mv-pw-fallback-icon { color: hsl(215, 20%, 65%); }

/* ===================== Meetings — live meeting room ================== */
.lr-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lr-topbar-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-width: 0; }
.lr-title { font-size: 1.3rem; font-weight: 700; color: var(--foreground); margin: 0; }
.lr-subline { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted-foreground); margin-top: 0.15rem; }
.lr-topbar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lr-live-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--status-danger-fg); color: #fff;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    border-radius: 9999px; padding: 0.25rem 0.7rem;
}
.lr-live-badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #fff; animation: lr-pulse 1.4s ease-in-out infinite; }
@keyframes lr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.lr-notlive-actions { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }

.lr-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .lr-grid { grid-template-columns: 1fr; } }
.lr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lr-card-actions { display: flex; align-items: center; gap: 0.5rem; }
.lr-notes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.55; }

.lr-motion-card { border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); padding: 0.8rem 0.95rem; }
.lr-motion-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.lr-motion-title { font-size: 0.9rem; font-weight: 700; color: var(--foreground); }
.lr-motion-text { font-style: italic; font-size: 0.85rem; color: var(--foreground); margin: 0.45rem 0 0; }
.lr-motion-movers { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.4rem; }
.lr-motion-setup { border-top: 1px solid var(--border); margin-top: 0.6rem; padding-top: 0.6rem; }
.lr-motion-input { margin: 0.35rem 0 0.5rem; font-style: italic; }
.lr-motion-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
.lr-motion-foot .mv-tally { margin-top: 0.25rem; }

.lr-attendee-list { display: flex; flex-direction: column; gap: 0.65rem; }
.lr-attendee { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.lr-checkin-state { display: flex; align-items: center; gap: 0.45rem; }
.lr-checkin-time { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.76rem; font-weight: 600; color: var(--status-success-fg); white-space: nowrap; }
.lr-undo-btn {
    border: 0; background: transparent; color: var(--muted-foreground);
    font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
    border-radius: 0.35rem; padding: 0.15rem 0.4rem;
}
.lr-undo-btn:hover { background: var(--secondary); color: var(--foreground); }

.lr-controls { display: flex; flex-direction: column; gap: 0.5rem; }
.lr-controls .btn { width: 100%; justify-content: center; }
.lr-adjourn-btn { background: var(--status-danger-fg); color: #fff; border-color: var(--status-danger-fg); }
.lr-adjourn-btn:hover { background: color-mix(in srgb, var(--status-danger-fg) 88%, black); }

.lr-stats { display: flex; flex-direction: column; gap: 0.55rem; }
.lr-stat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.lr-stat-label { color: var(--muted-foreground); }
.lr-stat-value { font-weight: 700; color: var(--foreground); }


/* ---- Board Structure completion: contact cards, positions, task activity ---- */
.bm-member-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.bm-member-card-actions { display: flex; gap: 0.15rem; flex: none; }

.bm-badge--cat-executive-leadership { color: hsl(262, 70%, 40%); }
.bm-badge--cat-ameritus { color: hsl(28, 80%, 35%); }
.bm-badge--cat-committee-volunteer { color: hsl(150, 70%, 26%); }
.bm-badge--cat-significant-other { color: hsl(348, 70%, 40%); }
.bm-badge--cat-other { color: hsl(215, 25%, 35%); }

.bm-badge--vacant { background: hsl(348, 90%, 95%); color: hsl(348, 70%, 40%); }
.bm-badge--required { background: hsl(0, 75%, 50%); color: #fff; }


/* ---------- Contact → user merge (contact edit modal) ---------- */
.bm-merge-summary {
    margin-top: 0.75rem; padding: 0.75rem 0.9rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--secondary); font-size: 0.88rem;
}
.bm-merge-summary p { margin: 0; }
.bm-merge-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }

.bm-el-candidate-votes-input { max-width: 6.5rem; flex: none; }

.bm-task-activity { border-top: 1px solid var(--border); margin-top: 0.9rem; padding-top: 0.75rem; }
.bm-task-activity-head { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--foreground); }
.bm-task-activity-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 12rem; overflow-y: auto; }
.bm-task-activity-item { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem 0.65rem; background: var(--secondary); }
.bm-task-activity-note { margin: 0; font-size: 0.85rem; color: var(--foreground); }
.bm-task-activity-meta { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--muted-foreground); }
.bm-task-activity-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.bm-task-activity-add .input { flex: 1; }

/* ---------- Success toasts (board management) ---------- */
/* Stack must paint above every modal layer (.bm-modal-overlay z=1000, .bm-overlay-top z=1200). */
.bm-toast-stack {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1400;
    display: flex; flex-direction: column; gap: 0.5rem;
    pointer-events: none;
}
.bm-toast {
    display: flex; align-items: flex-start; gap: 0.6rem;
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: 0.7rem 1rem; min-width: 13rem; max-width: 24rem;
    animation: bm-toast-in 160ms ease;
    pointer-events: auto;
}
.bm-toast-icon {
    flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: hsl(220, 30%, 15%); color: #fff;
}
.bm-toast-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bm-toast-title { font-size: 0.9rem; font-weight: 600; }
.bm-toast-desc { font-size: 0.8rem; line-height: 1.35; color: var(--muted-foreground); }
@keyframes bm-toast-in {
    from { transform: translateY(0.5rem); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ---------- Document workspace (committee documents v2) ---------- */
.bm-doc-meta-sep { margin: 0 0.35rem; color: var(--muted-foreground); }

.bm-doc-row { cursor: pointer; }
.bm-doc-row:hover td { background: var(--secondary); }

.bm-doc-version--current td { background: hsl(150, 60%, 96%); }

.bm-doc-file-card {
    display: flex; align-items: center; gap: 1rem;
    border: 1px solid var(--border); border-radius: 0.6rem;
    padding: 1rem 1.25rem; background: var(--secondary);
}
.bm-doc-file-icon {
    flex: none; width: 3rem; height: 3rem; border-radius: 0.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--status-info-bg); color: var(--status-info-fg);
}
.bm-doc-file-meta { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.bm-doc-file-meta .muted { font-size: 0.85rem; }

.bm-doc-collab-add { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.bm-doc-collab-add .form-row { flex: 1; min-width: 12rem; margin: 0; }

/* ---------- Rendered authored-document content ---------- */
.bm-md-content { color: var(--foreground); font-size: 0.92rem; line-height: 1.65; overflow-wrap: anywhere; }
.bm-md-content h1 { font-size: 1.45rem; font-weight: 700; margin: 1.1rem 0 0.5rem; }
.bm-md-content h2 { font-size: 1.2rem; font-weight: 700; margin: 1rem 0 0.45rem; }
.bm-md-content h3 { font-size: 1.05rem; font-weight: 700; margin: 0.9rem 0 0.4rem; }
.bm-md-content h4, .bm-md-content h5, .bm-md-content h6 { font-size: 0.95rem; font-weight: 700; margin: 0.8rem 0 0.35rem; }
.bm-md-content h1:first-child, .bm-md-content h2:first-child, .bm-md-content h3:first-child, .bm-md-content p:first-child { margin-top: 0; }
.bm-md-content p { margin: 0 0 0.7rem; }
.bm-md-content ul, .bm-md-content ol { margin: 0 0 0.7rem; padding-left: 1.4rem; }
.bm-md-content li { margin: 0.2rem 0; }
.bm-md-content blockquote {
    margin: 0 0 0.7rem; padding: 0.4rem 0.9rem;
    border-left: 3px solid var(--border); color: var(--muted-foreground);
}
.bm-md-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em; background: var(--secondary);
    border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.05rem 0.3rem;
}
.bm-md-content pre { background: var(--secondary); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.7rem 0.9rem; overflow-x: auto; margin: 0 0 0.7rem; }
.bm-md-content pre code { background: transparent; border: none; padding: 0; }
.bm-md-content a { color: var(--accent); text-decoration: underline; }
.bm-md-content img { max-width: 100%; border-radius: 0.4rem; }
.bm-md-content table { border-collapse: collapse; margin: 0 0 0.7rem; }
.bm-md-content th, .bm-md-content td { border: 1px solid var(--border); padding: 0.35rem 0.6rem; }

/* ---------- Member profile page ---------- */
.bm-member-card--clickable { cursor: pointer; }
/* Former members read as the record they are, not as roster. */
.bm-member-card--inactive { opacity: 0.75; border-style: dashed; background: var(--muted); }
.bm-member-card--inactive .bm-avatar { filter: grayscale(1); }
.bm-member-card--inactive .bm-member-name { color: var(--muted-foreground); }
.bm-former-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.bm-former-toggle {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--foreground);
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
}
.bm-former-toggle:hover span:first-of-type { text-decoration: underline; }
.bm-former-note { margin: 0.35rem 0 0; }
.bm-grid--former { margin-top: 0.75rem; }
.bm-member-card--clickable:hover { border-color: var(--accent); }
.bm-member-card--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bm-profile-head { display: flex; align-items: center; gap: 1rem; }
.bm-profile-avatar { width: 3.5rem; height: 3.5rem; }
.bm-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-profile-bio { margin: 0; white-space: pre-wrap; line-height: 1.65; }
@media (max-width: 900px) {
    .bm-profile-grid { grid-template-columns: 1fr; }
}

/* ---------- Task detail page ---------- */
.bm-task-note { font-size: 0.82rem; color: var(--status-info-fg); }

.bm-task-facts { display: flex; flex-direction: column; gap: 0.55rem; }
.bm-task-fact { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.bm-task-fact-label { font-weight: 600; color: var(--foreground); }
.bm-task-fact-value { color: var(--foreground); text-align: right; }
.bm-task-fact-value a { color: var(--primary); }
.bm-task-fact-value a:hover { text-decoration: underline; }

/* Workflow tab: static status timeline (modeled on .ea-timeline). */
.bm-wf-timeline { display: flex; flex-direction: column; gap: 0.9rem; }
.bm-wf-step { display: flex; align-items: center; gap: 0.6rem; }
.bm-wf-dot { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--border); }
.bm-wf-dot--done { background: var(--status-success); }
.bm-wf-dot--current { background: var(--status-info); }
.bm-wf-dot--cancelled { background: var(--status-danger); }
.bm-wf-label { font-size: 0.9rem; font-weight: 600; color: var(--foreground); }
.bm-wf-step--upcoming .bm-wf-label { color: var(--muted-foreground); }
.bm-wf-step--current .bm-wf-label { color: var(--status-info-fg); }
.bm-wf-step--cancelled .bm-wf-label { color: var(--status-danger-fg); }
.bm-wf-meta { font-size: 0.78rem; color: var(--muted-foreground); }

/* ─── NCUA 5300 Call Report import (Exec Assistant Hub) ─────────────── */

/* Start Import CTA card */
.i5300-cta {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: var(--radius);
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 5%, var(--card)), var(--card) 55%);
    cursor: pointer;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}
.i5300-cta:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.i5300-cta-icon {
    height: 3rem; width: 3rem; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}
.i5300-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.i5300-cta-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.i5300-cta-title { font-weight: 600; color: var(--foreground); }
.i5300-cta-sub { font-size: 0.875rem; color: var(--muted-foreground); }
.i5300-badge-ai {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 10px; font-weight: 600; padding: 0.1rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    border-radius: 9999px; color: var(--primary);
}

/* Wizard modal */
.i5300-modal { max-width: 64rem; display: flex; flex-direction: column; max-height: 90vh; }
.i5300-modal .bm-modal-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.i5300-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.25rem; }
.i5300-stack { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0; }

/* Stepper */
.i5300-stepper { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
.i5300-step {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.5rem; border-radius: 0.375rem;
    background: var(--muted); color: var(--muted-foreground);
}
.i5300-step.is-active { background: var(--primary); color: var(--primary-foreground); }
.i5300-step.is-done { background: var(--status-success-bg); color: var(--status-success-fg); }
.i5300-step-num { font-weight: 700; }
.i5300-step-line { flex: 1; height: 1px; background: var(--border); }

/* Upload step */
.i5300-dropzone {
    display: block; position: relative; text-align: center; cursor: pointer;
    border: 2px dashed var(--border); border-radius: 0.5rem; padding: 2.5rem 1rem;
    transition: background 120ms ease;
}
.i5300-dropzone:hover { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.i5300-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.i5300-dropzone-icon { color: var(--muted-foreground); display: inline-block; margin-bottom: 0.75rem; }
.i5300-dropzone-title { font-weight: 500; margin: 0 0 0.25rem; }
.i5300-filechip {
    position: relative; z-index: 1;
    margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;
    background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--foreground);
}
.i5300-filechip-x { border: 0; background: none; cursor: pointer; color: var(--muted-foreground); display: inline-flex; padding: 0; }
.i5300-filechip-x:hover { color: var(--foreground); }
.i5300-info-card {
    background: color-mix(in srgb, var(--muted) 30%, transparent);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem;
}
.i5300-info-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; margin: 0 0 0.25rem; color: var(--foreground); }
.i5300-info-title svg { color: var(--primary); }
.i5300-field-list { margin-top: 0.5rem; font-size: 0.8rem; }
.i5300-field-list summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.i5300-field-list div { margin-top: 0.3rem; color: var(--muted-foreground); }
.i5300-conf-none { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }

/* Extract step */
.i5300-extract { display: flex; flex-direction: column; gap: 1.5rem; padding: 2.5rem 0; }
.i5300-extract-status { text-align: center; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.i5300-extract-icon { color: var(--primary); }
.i5300-extract-title { font-weight: 600; margin: 0; }
.i5300-spin { display: inline-flex; animation: i5300-spin 1s linear infinite; }
@keyframes i5300-spin { to { transform: rotate(360deg); } }
.i5300-progress { height: 0.5rem; border-radius: 9999px; background: var(--muted); overflow: hidden; }
.i5300-progress-fill { height: 100%; border-radius: 9999px; background: var(--primary); transition: width 400ms ease; }
.i5300-domain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .i5300-domain-grid { grid-template-columns: repeat(3, 1fr); } }
.i5300-domain-chip {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem;
    padding: 0.5rem; border-radius: 0.375rem;
    background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.i5300-tone-success { color: var(--status-success); display: inline-flex; }
.i5300-tone-danger { color: var(--status-danger); }
.i5300-tone-warn { color: var(--status-warning-fg); }

/* Review step */
.i5300-review-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.i5300-domain-table { border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; }
.i5300-domain-table-head {
    padding: 0.5rem 0.75rem; font-weight: 500; font-size: 0.875rem;
    background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.i5300-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.i5300-table th {
    text-align: left; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500;
    color: var(--muted-foreground); border-bottom: 1px solid var(--border);
}
.i5300-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.i5300-table tr:last-child td { border-bottom: 0; }
.i5300-row-skipped { opacity: 0.6; }
.i5300-metric-name { font-weight: 500; color: var(--foreground); }
.i5300-value-input { height: 1.75rem; font-size: 0.875rem; padding: 0 0.5rem; }
.i5300-unit { width: 1.5rem; }
.i5300-conf {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; border: 1px solid;
}
.i5300-conf-green { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.i5300-conf-amber { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.i5300-conf-red { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.i5300-source-cell { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.i5300-link {
    border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
    display: inline-flex; align-items: center; gap: 0.25rem;
    color: var(--primary); font-size: inherit;
}
.i5300-link:hover { text-decoration: underline; }
.i5300-link-teach { color: var(--status-warning-fg); font-size: 11px; }

/* Done step */
.i5300-done { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; padding: 2.5rem 0; }
.i5300-done-icon {
    height: 4rem; width: 4rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--status-success-bg); color: var(--status-success);
}
.i5300-done-title { font-size: 1.125rem; font-weight: 600; margin: 0; }

/* Source viewer modal */
.i5300-viewer-modal { max-width: 72rem; width: 95vw; height: 90vh; display: flex; flex-direction: column; }
.i5300-viewer-modal .bm-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0.75rem; }
.i5300-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.i5300-viewer-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem;
}
.i5300-find { display: flex; align-items: center; gap: 0.375rem; flex: 1; max-width: 28rem; position: relative; }
.i5300-find-icon { position: absolute; left: 0.5rem; color: var(--muted-foreground); display: inline-flex; pointer-events: none; }
.i5300-find-input { height: 1.75rem; font-size: 0.75rem; padding-left: 1.75rem; }
.i5300-badge-teach {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: var(--status-warning-bg); color: var(--status-warning-fg); border: 1px solid var(--status-warning-border);
}
.i5300-teach-banner {
    padding: 0.5rem 1rem; font-size: 0.75rem;
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border-bottom: 1px solid var(--status-warning-border);
}
.i5300-viewer-frame {
    flex: 1; min-height: 0; overflow: auto; padding: 1rem;
    background: color-mix(in srgb, var(--muted) 20%, transparent);
}
.i5300-canvas { position: relative; margin: 0 auto; background: var(--card); box-shadow: var(--shadow-md); }
.i5300-highlight {
    pointer-events: none; position: absolute; border-radius: 0.25rem;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    box-shadow: var(--shadow-sm);
}
.i5300-teachbox {
    pointer-events: none; position: absolute; border-radius: 0.25rem;
    border: 2px solid var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 20%, transparent);
}
.i5300-teach-capture {
    border-top: 2px solid var(--status-warning-border);
    background: color-mix(in srgb, var(--status-warning-bg) 60%, transparent);
    padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;
    box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, 0.15);
}
.i5300-teach-capture-title { font-size: 0.75rem; font-weight: 500; color: var(--status-warning-fg); }
.i5300-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- AI meeting minutes panel --- */
.mm-progress { height: 6px; background: var(--muted); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.mm-progress-bar { height: 100%; width: 40%; border-radius: 999px; background: var(--primary); animation: mm-indeterminate 1.2s ease-in-out infinite; }
@keyframes mm-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.mm-minutes-preview { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; background: var(--card); color: var(--foreground); max-height: 32rem; overflow-y: auto; }
.mm-minutes-preview h1 { font-size: 1.25rem; margin: 0 0 .5rem; }
.mm-minutes-preview h2 { font-size: 1.05rem; margin: 1rem 0 .35rem; }
.mm-minutes-preview h3 { font-size: .95rem; margin: .75rem 0 .25rem; }
.mm-minutes-preview p, .mm-minutes-preview li { font-size: .9rem; line-height: 1.5; }
.mm-minutes-preview ul { margin: .25rem 0 .5rem 1.25rem; }
.mm-minutes-preview hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* Presenter collaboration workspace — public /collaborate page (EmptyLayout) */
.pc-shell { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.pc-brand {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--muted-foreground);
}
.pc-title { font-size: 1.55rem; font-weight: 800; color: var(--foreground); margin: 0.5rem 0 0.35rem; }
.pc-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted-foreground); font-size: 0.9rem; }
.pc-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.pc-as { margin: 0.5rem 0 0; }
.pc-invalid { max-width: 30rem; margin: 4rem auto 0; text-align: center; }
.pc-invalid-title { font-size: 1.2rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.4rem; }

/* --- Live meeting: break banner + quick-action modals --- */
.lr-break-banner {
    display: flex; align-items: center; gap: 0.75rem;
    border: 1px solid var(--border); border-left: 4px solid var(--primary);
    background: var(--card); border-radius: 8px; padding: 0.75rem 1rem;
}
.lr-break-icon { font-size: 1.4rem; }
.lr-break-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.lr-break-text span { color: var(--muted-foreground); font-size: 0.85rem; }
.lr-break-durations { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lr-task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.mv-presentas-spacer { flex: 1; }
.mv-pcard-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* --- Presentation stage (shared-screen window) --- */
.stage-shell { display: flex; flex-direction: column; height: 100vh; background: var(--background); color: var(--foreground); }
.stage-idle {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.75rem; text-align: center; padding: 2rem;
}
.stage-idle h1 { font-size: 2.4rem; margin: 0; }
.stage-brand { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); }
.stage-waiting { color: var(--muted-foreground); font-size: 1.1rem; margin: 0; }
.stage-hint { color: var(--muted-foreground); font-size: 0.85rem; margin: 0; }
.stage-doc-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); background: var(--card);
}
.stage-doc-title { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.05rem; }
.stage-doc-frame { flex: 1; border: none; width: 100%; }
.stage-meeting-tag { color: var(--muted-foreground); font-size: 0.85rem; white-space: nowrap; }
.stage-item-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.8rem; height: 1.8rem; border-radius: 999px;
    background: var(--primary); color: var(--primary-foreground, #fff); font-weight: 700;
}
.stage-item-num--big { width: 3.4rem; height: 3.4rem; font-size: 1.5rem; margin: 0 auto; }
.stage-slide { flex: 1; display: flex; flex-direction: column; padding: 1.25rem 2rem 2rem; }
.stage-slide-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stage-vote-chip {
    border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.75rem;
    font-size: 0.85rem; font-weight: 600; background: var(--card);
}
.stage-slide-body {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem; text-align: center; max-width: 60rem; margin: 0 auto;
}
.stage-item-title { font-size: 3rem; line-height: 1.15; margin: 0; }
.stage-presenter { color: var(--muted-foreground); font-size: 1.15rem; margin: 0; }
.stage-desc { font-size: 1.3rem; line-height: 1.5; color: var(--foreground); margin: 0; }
.stage-motion {
    border: 1px solid var(--border); border-left: 4px solid var(--primary);
    background: var(--card); border-radius: 8px; padding: 1rem 1.5rem; max-width: 50rem;
}
.stage-motion-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.35rem; }
.stage-motion p { font-size: 1.25rem; font-style: italic; margin: 0; }
.stage-fs-btn {
    position: fixed; top: 0.75rem; right: 0.75rem; z-index: 10;
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--foreground);
    padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    opacity: 0.85;
}
.stage-fs-btn:hover { opacity: 1; }
:root:fullscreen .stage-fs-btn, :root:-webkit-full-screen .stage-fs-btn { display: none; }
.stage-votes { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; width: 100%; max-width: 46rem; }
.stage-vote-totals { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.stage-vote-total {
    display: flex; align-items: baseline; gap: 0.5rem;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card);
    padding: 0.6rem 1.4rem; font-size: 1.1rem; font-weight: 600;
}
.stage-vote-count { font-size: 2rem; font-weight: 800; }
.stage-vote-total--yes .stage-vote-count { color: var(--status-success-fg); }
.stage-vote-total--no .stage-vote-count { color: var(--status-danger-fg); }
.stage-vote-total--abstain .stage-vote-count { color: var(--muted-foreground); }
.stage-vote-total--absent .stage-vote-count { color: var(--muted-foreground); opacity: 0.75; }
.stage-vote-people {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.4rem 1.25rem; width: 100%;
}
.stage-vote-person {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    border-bottom: 1px solid var(--border); padding: 0.3rem 0.1rem; font-size: 1rem;
}
.stage-vote-person-vote { font-weight: 700; white-space: nowrap; }
.stage-vote-person-vote.is-yes { color: var(--status-success-fg); }
.stage-vote-person-vote.is-no { color: var(--status-danger-fg); }
.stage-vote-person-vote.is-abstain { color: var(--muted-foreground); }
.stage-vote-person-vote.is-absent { color: var(--muted-foreground); font-style: italic; }
.stage-vote-person-vote.is-pending { color: var(--muted-foreground); opacity: 0.5; }

/* Record Meeting button (agenda header) — red like other destructive/live controls. */
.md-record-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--status-danger-fg); color: #fff;
    border: 1px solid var(--status-danger-fg); border-radius: 8px;
    padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.md-record-btn:hover { background: color-mix(in srgb, var(--status-danger-fg) 88%, black); }
.md-record-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   Partner Portal (ported from the Lovable PartnerPortal design)
   ============================================================ */
.pp-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--background), var(--secondary));
}

.pp-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.pp-header-inner {
    max-width: 80rem; margin: 0 auto;
    padding: 0 1.5rem;
    height: 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pp-header-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.pp-brand { display: flex; align-items: center; gap: 0.5rem; }
.pp-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.35rem;
    background: linear-gradient(135deg, var(--partner-gold-bright), var(--partner-accent));
    border-radius: 0.5rem;
    color: #fff;
}
.pp-brand-name {
    font-size: 1.05rem; font-weight: 700;
    background: linear-gradient(90deg, var(--partner-gold-deep), var(--partner-accent-strong));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    white-space: nowrap;
}
.pp-tier-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    border: 1px solid var(--border); border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.75rem; font-weight: 600; color: var(--foreground);
    white-space: nowrap;
}
.pp-tier-chip-star { color: var(--partner-accent); }
.pp-demo-chip {
    display: inline-flex; align-items: center;
    border-radius: 999px; padding: 0.15rem 0.65rem;
    font-size: 0.75rem; font-weight: 600;
    background: var(--partner-soft); color: var(--partner-accent-deep);
    white-space: nowrap;
}
.pp-header-right { display: flex; align-items: center; gap: 0.75rem; }
.pp-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    background: none; border: 0; border-radius: 0.5rem;
    color: var(--foreground); cursor: pointer;
    transition: background 120ms ease;
}
.pp-icon-btn:hover { background: var(--muted); }
.pp-icon-btn:disabled { cursor: default; opacity: 0.55; }
.pp-user { display: flex; align-items: center; gap: 0.75rem; }
.pp-user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 999px;
    background: var(--partner-soft); color: var(--partner-accent-deep);
    font-size: 0.75rem; font-weight: 600;
}
.pp-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.pp-user-name { font-size: 0.85rem; font-weight: 600; }
.pp-user-org { font-size: 0.75rem; }
@media (max-width: 760px) {
    .pp-user-meta, .pp-tier-chip { display: none; }
}

.pp-main {
    max-width: 80rem; margin: 0 auto;
    padding: 2rem 1.5rem;
}

.pp-tabs {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    background: var(--muted); color: var(--muted-foreground);
    border-radius: 0.5rem; padding: 0.25rem;
    margin-bottom: 1.5rem;
    max-width: 100%;
}
.pp-tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 0; background: none; border-radius: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem; font-weight: 500; color: inherit;
    cursor: pointer; white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}
.pp-tab--active {
    background: var(--card); color: var(--foreground);
    box-shadow: var(--shadow-sm);
}

.pp-stack { display: flex; flex-direction: column; gap: 1.5rem; }

.pp-hero {
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--partner-accent), var(--partner-gold));
    color: #fff;
    padding: 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.pp-hero-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: #fff; }
.pp-hero-sub { margin: 0.25rem 0 0; color: color-mix(in srgb, #fff 82%, var(--partner-accent)); }
.pp-hero-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #fff; color: var(--partner-accent-strong);
    border: 0; border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 120ms ease;
}
.pp-hero-btn:hover { background: var(--partner-soft-hover); }
/* Stubbed action stays visually solid on the amber hero (the tooltip conveys "coming soon"). */
.pp-hero-btn:disabled { cursor: default; }

.pp-stats {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
}
@media (max-width: 1024px) { .pp-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pp-stats { grid-template-columns: repeat(2, 1fr); } }
.pp-stat {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1rem 1.5rem 1.5rem;
    cursor: pointer;
    transition: box-shadow 120ms ease, border-color 120ms ease;
    /* Rendered as <button>s that jump to the relevant portal tab. */
    font: inherit; text-align: left; color: inherit; width: 100%;
}
.pp-stat:hover { box-shadow: var(--shadow-md); border-color: var(--partner-outline); }
.pp-stat-row { display: flex; align-items: center; gap: 0.5rem; }
.pp-stat-icon { color: var(--muted-foreground); flex-shrink: 0; }
.pp-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--foreground); }
.pp-stat-label { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); }
.pp-stat--lead {
    background: linear-gradient(135deg, var(--status-success-bg), color-mix(in srgb, var(--status-success) 8%, var(--card)));
    border-color: var(--status-success-border);
}
.pp-stat--lead:hover { border-color: var(--status-success); }
.pp-stat--lead .pp-stat-icon { color: var(--status-success); }
.pp-stat--lead .pp-stat-value { color: var(--status-success-fg); }
.pp-stat--lead .pp-stat-label { color: var(--status-success-fg); }

.pp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .pp-2col { grid-template-columns: 1fr; } }

.pp-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
/* Notifications admin area. */
.ntf-head { margin-bottom: 1rem; }
.ntf-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.ntf-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem;
    background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted-foreground);
    font: inherit; font-size: 0.9rem; cursor: pointer; }
.ntf-tab--active { color: var(--foreground); border-bottom-color: var(--accent); font-weight: 600; }
.ntf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.ntf-filters { justify-content: flex-start; }
.ntf-filter-select { width: auto; min-width: 10rem; }
.ntf-filter-search { flex: 1; min-width: 12rem; max-width: 26rem; }
.ntf-table-wrap { overflow-x: auto; }
.ntf-table { width: 100%; }
.ntf-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted-foreground); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.ntf-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ntf-name { font-weight: 600; }
.ntf-ellipsis { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-actions { display: flex; gap: 0.3rem; white-space: nowrap; }
.ntf-empty { text-align: center; padding: 2.5rem 1rem; }
.ntf-empty-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 999px;
    background: var(--secondary); color: var(--muted-foreground); margin-bottom: 0.5rem; }
.badge-success { background: var(--status-success-bg, #dcfce7); color: var(--status-success, #166534); }
.badge-danger { background: var(--status-danger-bg, #fee2e2); color: var(--status-danger, #991b1b); }

/* Notification template editor. */
.ntf-tokens { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; align-items: center; }
.ntf-token { font-family: ui-monospace, monospace; font-size: 0.72rem; padding: 0.1rem 0.4rem;
    border: 1px solid var(--border); border-radius: 5px; background: var(--secondary); color: var(--foreground); cursor: pointer; }
.ntf-token:hover { background: var(--sidebar-accent, var(--accent)); color: #fff; }
.ntf-audience { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ntf-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; cursor: pointer; }
.ntf-rules { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.ntf-rules-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ntf-rule { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; background: var(--card); }
.ntf-rule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ntf-inline { width: auto; min-width: 6rem; }
.ntf-num { width: 4.5rem; }
.ntf-rule-del { margin-left: auto; }
.ntf-conds { margin-top: 0.5rem; padding-left: 0.75rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.ntf-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.ntf-cond-hint { flex-basis: 100%; padding-left: 0.1rem; }
.ntf-rule-custom { margin-top: 0.4rem; }

/* Alert-type picker + per-type editor affordances. */
.ntf-type-group { margin-bottom: 1rem; }
.ntf-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; margin-top: 0.4rem; }
.ntf-type-card { display: flex; gap: 0.6rem; align-items: flex-start; text-align: left; padding: 0.7rem 0.8rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); cursor: pointer; }
.ntf-type-card:hover { border-color: var(--accent); background: var(--secondary); }
.ntf-type-card-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 8px; background: var(--secondary); color: var(--accent); }
.ntf-type-card-body { display: flex; flex-direction: column; gap: 0.15rem; }
.ntf-type-card-title { font-weight: 600; font-size: 0.875rem; }
.ntf-type-card-desc { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.35; }
.ntf-type-chip { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.ntf-guide { display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 0.4rem; padding: 0.5rem 0.6rem;
    border-radius: var(--radius); background: var(--secondary); color: var(--muted-foreground); font-size: 0.78rem; line-height: 1.4; }
.ntf-token--type { border-style: dashed; }

/* Tag explainer under the message body. */
.ntf-tagbox { margin-top: 0.5rem; padding: 0.65rem 0.75rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--secondary); font-size: 0.78rem; line-height: 1.45; }
.ntf-tagbox-lede { display: flex; gap: 0.45rem; align-items: flex-start; color: var(--muted-foreground); }
.ntf-tagbox-lede strong { color: var(--foreground); }
.ntf-tag-example { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.3rem 0.6rem;
    margin: 0.55rem 0 0.1rem; padding: 0.5rem 0.6rem; border-radius: var(--radius); background: var(--card); }
.ntf-tag-example-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted-foreground); white-space: nowrap; }
.ntf-tag-example code { font-family: ui-monospace, monospace; font-size: 0.74rem; color: var(--muted-foreground); }
.ntf-tag-example code.ntf-tag-example-out { color: var(--foreground); font-weight: 600; }
.ntf-tag-rules { margin: 0.6rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem;
    color: var(--muted-foreground); }
.ntf-tag-rules code { font-family: ui-monospace, monospace; font-size: 0.74rem; }
.ntf-tag-ref { margin-top: 0.55rem; }
.ntf-tag-ref > summary { cursor: pointer; color: var(--accent); font-size: 0.75rem; width: fit-content; }
.ntf-tag-ref dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; margin: 0.5rem 0 0;
    max-height: 15rem; overflow-y: auto; padding-right: 0.3rem; }
.ntf-tag-ref dt { font-family: ui-monospace, monospace; font-size: 0.72rem; white-space: nowrap; }
.ntf-tag-ref dd { margin: 0; font-size: 0.74rem; color: var(--muted-foreground); }
.ntf-audience { flex-direction: column; gap: 0.4rem; }
.ntf-aud-item { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.875rem; cursor: pointer; }
.ntf-aud-item input { margin-top: 0.2rem; }
.ntf-aud-item > span { display: flex; flex-direction: column; gap: 0.1rem; }
.ntf-aud-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.ntf-aud-tag { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.3rem;
    border-radius: 999px; background: var(--secondary); color: var(--muted-foreground); }
.ntf-aud-desc { font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.35; }
.ntf-foot-toggles { flex-wrap: wrap; gap: 0.75rem; }

/* AI roster import dialog. */
.ri-or { text-align: center; color: var(--muted-foreground); font-size: 0.8rem; margin: 0.75rem 0; }
.ri-preview-head { font-size: 0.9rem; color: var(--foreground); }
.ri-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.4rem; }
.ri-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.ri-name { font-weight: 600; font-size: 0.9rem; }
.ri-sub { font-size: 0.8rem; }
.ri-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end; }

/* Tier / reseller capabilities panel (dashboard). */
.pp-plan-list { list-style: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.4rem 1.25rem; }
.pp-plan-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--foreground); }
.pp-plan-item.is-off { color: var(--muted-foreground); }
.pp-plan-item.is-on > :global(svg) { color: var(--status-success-fg, #16a34a); }
.pp-plan-badge { margin-left: auto; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #92400e; background: #fde68a; border-radius: 999px; padding: 0.05rem 0.45rem; }
.pp-plan-upgrade { margin-top: 1rem; }
.pp-card-head { padding: 1.5rem 1.5rem 0.5rem; }
.pp-card-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.3rem; font-weight: 600; margin: 0;
}
.pp-card-sub { margin: 0.35rem 0 0; font-size: 0.85rem; }
.pp-card-body { padding: 1rem 1.5rem 1.5rem; }

.pp-activity-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pp-activity-row {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.5rem; margin: 0 -0.5rem;
    border-radius: 0.4rem; cursor: pointer;
    transition: background 120ms ease;
}
.pp-activity-row:hover { background: var(--partner-soft-hover); }
.pp-activity-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.35rem; border-radius: 999px; flex-shrink: 0;
}
.pp-activity-icon--view { background: var(--status-info-bg); color: var(--status-info); }
.pp-activity-icon--upload { background: var(--status-success-bg); color: var(--status-success); }
.pp-activity-icon--lead { background: var(--partner-soft); color: var(--partner-accent-strong); }
.pp-activity-text { min-width: 0; }
.pp-activity-org {
    margin: 0; font-size: 0.85rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-activity-desc, .pp-activity-when { margin: 0; font-size: 0.75rem; }

.pp-revisit-list { display: flex; flex-direction: column; gap: 1rem; }
.pp-revisit-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem; border-radius: var(--radius);
    background: var(--secondary);
    cursor: pointer;
    transition: background 120ms ease;
}
.pp-revisit-row:hover { background: var(--partner-soft-hover); }
.pp-revisit-org { margin: 0; font-size: 0.85rem; font-weight: 600; }
.pp-revisit-type { margin: 0; font-size: 0.75rem; }
.pp-revisit-when { text-align: right; }
.pp-revisit-days {
    display: inline-flex; align-items: center;
    border-radius: 999px; padding: 0.15rem 0.65rem;
    font-size: 0.75rem; font-weight: 600;
    background: var(--muted); color: var(--secondary-foreground);
}
.pp-revisit-date { margin: 0.25rem 0 0; font-size: 0.75rem; }

.pp-convert {
    border-radius: var(--radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--sidebar-background) 78%, #000), var(--sidebar-background));
    color: #fff;
    padding: 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.pp-convert-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff; }
.pp-convert-sub {
    margin: 0.5rem 0 0; font-size: 0.85rem; max-width: 36rem;
    color: color-mix(in srgb, #fff 72%, var(--sidebar-background));
}
.pp-convert-stats { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; }
.pp-convert-stat { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.pp-convert-stat-icon--success { color: var(--status-success); }
.pp-convert-stat-icon--info { color: var(--status-info); }
.pp-convert-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--secondary); color: var(--secondary-foreground);
    border: 0; border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
    transition: background 120ms ease;
}
.pp-convert-btn:hover { background: color-mix(in srgb, var(--secondary) 80%, #fff); }
.pp-convert-btn:disabled { cursor: default; opacity: 0.8; }

.pp-placeholder {
    padding: 3rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    text-align: center;
}
.pp-placeholder-icon { color: var(--muted-foreground); }
.pp-placeholder-title { margin: 0; }

/* ---------- Partner Portal → Clients tab ---------- */
.pp-clients-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.pp-tab-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.15rem; }
.pp-btn-dark {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--primary); color: var(--primary-foreground);
    border: 0; border-radius: 0.5rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: background 120ms ease;
}
.pp-btn-dark:hover { background: color-mix(in srgb, var(--primary) 88%, #fff); }
/* Stubbed actions keep the design's solid look; the tooltip conveys "coming soon". */
.pp-btn-dark:disabled { cursor: not-allowed; opacity: 0.55; }
.pp-btn-dark:disabled:hover { background: var(--primary); }
.pp-outline-btn:disabled { cursor: not-allowed; opacity: 0.55; }

.pp-search {
    display: flex; align-items: center; gap: 0.65rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 0.5rem; padding: 0.65rem 1rem;
    margin-bottom: 1.5rem;
}
.pp-search-icon { color: var(--muted-foreground); flex-shrink: 0; }
.pp-search-input {
    border: 0; outline: none; background: none;
    font: inherit; color: var(--foreground);
    width: 100%;
}
.pp-search-input::placeholder { color: var(--muted-foreground); }

.pp-client-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1100px) { .pp-client-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .pp-client-grid { grid-template-columns: 1fr; } }

.pp-client-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}
.pp-client-card-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.pp-client-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 0.6rem;
    background: var(--secondary); color: var(--secondary-foreground);
    flex-shrink: 0;
}
.pp-client-title { flex: 1; min-width: 0; }
.pp-client-name { margin: 0; font-size: 1.05rem; font-weight: 700; }
.pp-client-state { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; }
.pp-client-check { flex-shrink: 0; margin-top: 0.15rem; }
.pp-client-check--success { color: var(--status-success); }
.pp-client-check--info { color: var(--status-info); }
.pp-client-check--warn { color: var(--status-warning); }
.pp-client-check--danger { color: var(--status-danger); }

.pp-client-facts { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pp-client-fact { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pp-client-asset { font-size: 1.05rem; font-weight: 700; }

.pp-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border-radius: 999px; padding: 0.15rem 0.7rem;
    font-size: 0.75rem; font-weight: 600;
}
.pp-pill--none { background: var(--muted); color: var(--secondary-foreground); }
.pp-pill--basic { background: var(--status-info-bg); color: var(--status-info); }
.pp-pill--premium { background: var(--status-success-bg); color: var(--status-success-fg); }
.pp-pill--outline { border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.pp-pill--dark { background: var(--primary); color: var(--primary-foreground); }
.pp-pill--muted { background: var(--muted); color: var(--secondary-foreground); }

.pp-client-sec { border-top: 1px solid var(--border); margin-top: 1.15rem; padding-top: 1rem; }
.pp-client-sec-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.pp-client-sec-title {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.9rem; font-weight: 600;
}
.pp-client-sec-chevron { color: var(--muted-foreground); }
.pp-manage-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: 0; border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem; font-weight: 500; color: var(--foreground);
    cursor: pointer;
    transition: background 120ms ease;
}
.pp-manage-btn:hover { background: var(--muted); }
.pp-manage-btn:disabled { cursor: default; opacity: 0.6; }

.pp-untapped {
    border: 1px solid var(--partner-outline);
    background: var(--partner-soft-hover);
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.85rem;
}
.pp-untapped-head {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; font-weight: 600; color: var(--partner-accent-deep);
}
.pp-untapped-chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    margin-top: 0.45rem;
}
.pp-untapped-chip {
    border: 1px solid var(--partner-outline); border-radius: 999px;
    background: var(--card);
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem; font-weight: 600; color: var(--partner-accent-deep);
}
.pp-untapped-more { font-size: 0.72rem; align-self: flex-start; }

.pp-service-row {
    padding: 0.5rem 0.5rem 0.6rem; margin: 0 -0.5rem;
    border-radius: 0.4rem; cursor: pointer;
    transition: background 120ms ease;
}
.pp-service-row:hover { background: var(--partner-soft-hover); }
.pp-service-row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pp-service-name {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.9rem; font-weight: 600; min-width: 0;
}
.pp-service-repeat { color: var(--status-success); flex-shrink: 0; }
.pp-service-tag { color: var(--partner-accent); flex-shrink: 0; }
.pp-service-when {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; margin-top: 0.3rem; padding-left: 1.35rem;
}

.pp-doc-link {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}
.pp-doc-link-icon { color: var(--partner-accent); flex-shrink: 0; }
.pp-doc-link-title { color: var(--partner-accent-strong); font-weight: 500; }
.pp-doc-star { color: var(--partner-accent); flex-shrink: 0; }

/* ---------- Clients tab dialogs ---------- */
.pp-dialog { max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; }
.pp-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pp-dialog-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.pp-dialog-sub { margin: 0.35rem 0 0; font-size: 0.85rem; max-width: 32rem; }
.pp-dialog-close { flex-shrink: 0; }
.pp-dialog-section-label { margin: 1.25rem 0 0.75rem; font-size: 0.9rem; font-weight: 600; }

.pp-manage-service {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; margin-bottom: 0.85rem;
}
.pp-manage-service-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.pp-icon-btn--danger { color: var(--status-danger); }
.pp-icon-btn--armed { background: var(--status-danger-bg); box-shadow: 0 0 0 1px var(--status-danger-border); }
.pp-remove-warning { margin: 0.15rem 0 0.4rem; font-size: 0.78rem; color: var(--status-danger-fg); }
.pp-manage-service-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 0.85rem;
}
.pp-cadence-select { width: auto; min-width: 11rem; }
.pp-manage-service-date { display: flex; flex-direction: column; gap: 0.35rem; }
.pp-field-label {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; font-weight: 600;
}

/* CSS-only toggle matching the design's dark switch. */
.pp-switch {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.pp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-switch-track {
    width: 2.6rem; height: 1.4rem; border-radius: 999px;
    background: var(--border);
    position: relative; flex-shrink: 0;
    transition: background 140ms ease;
}
.pp-switch-track::after {
    content: "";
    position: absolute; top: 0.15rem; left: 0.15rem;
    width: 1.1rem; height: 1.1rem; border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 140ms ease;
}
.pp-switch input:checked + .pp-switch-track { background: var(--primary); }
.pp-switch input:checked + .pp-switch-track::after { transform: translateX(1.2rem); }
.pp-switch input:focus-visible + .pp-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

.pp-add-service {
    border: 1px solid var(--partner-outline);
    background: var(--partner-soft-hover);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.pp-add-service-title {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0; font-size: 0.95rem; font-weight: 700;
}
.pp-add-service-plus { color: var(--partner-accent-strong); }
.pp-add-service .pp-manage-service-row, .pp-add-service .pp-manage-service-date { margin-bottom: 0; }
.pp-add-service-btn { justify-content: center; }
.pp-add-service-btn:disabled { background: color-mix(in srgb, var(--primary) 45%, var(--muted)); }
.pp-add-service-btn:disabled:hover { background: color-mix(in srgb, var(--primary) 45%, var(--muted)); }

.pp-detail-title { display: flex; align-items: flex-start; gap: 0.75rem; }
.pp-detail-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 0.6rem;
    border: 1px solid var(--partner-outline);
    background: var(--partner-soft);
    color: var(--partner-accent-strong);
    flex-shrink: 0;
}
.pp-detail-org { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.pp-detail-head-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.pp-detail-facts {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.pp-detail-fact { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pp-detail-fact-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.pp-detail-fact-strong { font-weight: 700; }

.pp-detail-docs-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.pp-detail-docs-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.pp-detail-doc {
    display: flex; align-items: flex-start; gap: 0.75rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.pp-detail-doc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
    background: var(--secondary); color: var(--secondary-foreground);
    flex-shrink: 0;
}
.pp-detail-doc-body { flex: 1; min-width: 0; }
.pp-detail-doc-title {
    display: flex; align-items: center; gap: 0.35rem;
    margin: 0; font-size: 0.95rem; font-weight: 700;
}
.pp-detail-doc-desc { margin: 0.25rem 0 0; font-size: 0.82rem; }
.pp-detail-doc-meta { margin: 0.35rem 0 0; font-size: 0.75rem; }
.pp-detail-doc-actions { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

/* ---------- Partner Portal → Engagements tab ---------- */
.pp-eng-title { display: flex; align-items: center; gap: 0.5rem; }
.pp-eng-title-icon { color: var(--partner-accent-strong); }
.pp-outline-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
    transition: background 120ms ease;
}
.pp-outline-btn:hover { background: var(--muted); }

.pp-eng-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
@media (max-width: 1100px) { .pp-eng-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pp-eng-stats { grid-template-columns: repeat(2, 1fr); } }
.pp-eng-stat {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
}
.pp-eng-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; }
.pp-eng-stat-value { margin: 0.35rem 0 0; font-size: 1.5rem; font-weight: 700; }
.pp-eng-stat-sub { margin: 0.1rem 0 0; font-size: 0.7rem; }
.pp-eng-stat-value--plain, .pp-eng-stat-icon--plain { color: var(--foreground); }
.pp-eng-stat-value--info, .pp-eng-stat-icon--info { color: var(--status-info); }
.pp-eng-stat-value--success, .pp-eng-stat-icon--success { color: var(--status-success-fg); }
.pp-eng-stat-value--warn, .pp-eng-stat-icon--warn { color: var(--status-warning-fg); }
.pp-eng-stat-value--danger, .pp-eng-stat-icon--danger { color: var(--status-danger-fg); }

.pp-eng-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.pp-filter-pill {
    border: 1px solid var(--border); border-radius: 0.4rem;
    background: var(--card); color: var(--foreground);
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem; font-weight: 500; cursor: pointer;
    transition: background 120ms ease;
}
.pp-filter-pill:not(.pp-filter-pill--active):hover { background: var(--muted); }
.pp-filter-pill--active {
    background: var(--primary); color: var(--primary-foreground);
    border-color: var(--primary); font-weight: 600;
}
.pp-filter-pill--active:hover { background: color-mix(in srgb, var(--primary) 88%, #fff); }

.pp-eng-group { margin-bottom: 1.25rem; }
.pp-eng-group-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 1.25rem 1.5rem 0.75rem;
}
.pp-eng-group-title { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.pp-eng-group-icon { color: var(--muted-foreground); flex-shrink: 0; }
.pp-eng-group-name { font-size: 0.95rem; font-weight: 600; }
.pp-eng-group-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
    padding: 0 1.5rem 1.5rem;
}
@media (max-width: 900px) { .pp-eng-group-grid { grid-template-columns: 1fr; } }
.pp-eng-card {
    border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: box-shadow 120ms ease;
}
.pp-eng-card:hover { box-shadow: var(--shadow-sm); }
.pp-eng-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.pp-eng-card-name { margin: 0; font-size: 0.88rem; font-weight: 600; }
.pp-pill--pastdue {
    background: var(--status-danger-bg); color: var(--status-danger-fg);
    border: 1px solid var(--status-danger-border);
    font-size: 0.68rem;
}
.pp-pill--duesoon {
    background: var(--status-warning-bg); color: var(--status-warning-fg);
    border: 1px solid var(--status-warning-border);
    font-size: 0.68rem;
}
.pp-pill--ontrack {
    background: var(--status-success-bg); color: var(--status-success-fg);
    border: 1px solid var(--status-success-border);
    font-size: 0.68rem;
}
.pp-pill--nodate {
    background: var(--secondary); color: var(--muted-foreground);
    border: 1px solid var(--border);
    font-size: 0.68rem;
}
/* Live engagement cards open the service detail. */
.pp-eng-card--link { cursor: pointer; }
.pp-eng-card--link:hover { border-color: var(--partner-outline); }
.pp-eng-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font-size: 0.75rem; }
.pp-eng-card-meta-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.pp-eng-late { color: var(--status-danger); }
.pp-eng-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-top: 0.5rem; font-size: 0.75rem;
}
.pp-eng-shared { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; }
.pp-eng-shared--yes { color: var(--status-success-fg); }
.pp-eng-shared--no { color: var(--status-warning-fg); }

/* ---------- Partner Portal → Deliverables tab ---------- */
.pp-gradient-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: linear-gradient(90deg, var(--partner-gold), var(--partner-accent-strong));
    color: #fff;
    border: 0; border-radius: 0.5rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: filter 120ms ease;
}
.pp-gradient-btn:hover { filter: brightness(0.95); }
.pp-gradient-btn:disabled { cursor: default; }

.pp-del-list { display: flex; flex-direction: column; gap: 0.75rem; }
.pp-del-row {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1rem 1.5rem;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    cursor: pointer;
    transition: box-shadow 120ms ease;
}
.pp-del-row:hover { box-shadow: var(--shadow-md); }
.pp-del-row-main { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.pp-del-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem; border-radius: 0.5rem;
    background: var(--secondary); color: var(--secondary-foreground);
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}
.pp-del-row:hover .pp-del-icon { background: var(--partner-soft); color: var(--partner-accent-strong); }
.pp-del-body { min-width: 0; }
.pp-del-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pp-del-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
.pp-del-row:hover .pp-del-title { color: var(--partner-accent-deep); }
.pp-del-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
    margin-top: 0.25rem; font-size: 0.75rem;
}
.pp-del-desc {
    margin: 0.35rem 0 0; font-size: 0.85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 42rem;
}
.pp-del-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.pp-tag-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    border: 1px solid var(--border); border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem; font-weight: 600; color: var(--foreground);
}
.pp-tag-chip--service { border-color: var(--partner-outline); color: var(--partner-accent-deep); }
.pp-del-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pp-del-views { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; }
@media (max-width: 900px) {
    .pp-del-row { flex-direction: column; }
    .pp-del-actions { align-self: flex-end; }
}

/* ---------- Deliverables: client scope banner ---------- */
.pp-scope-banner {
    border: 1px solid var(--partner-outline);
    background: var(--partner-soft-hover);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.pp-scope-back {
    display: inline-flex; align-items: center; gap: 0.2rem;
    background: none; border: 0; padding: 0;
    font-size: 0.85rem; font-weight: 500; color: var(--foreground);
    cursor: pointer;
}
.pp-scope-back:hover { color: var(--partner-accent-deep); }
.pp-scope-row { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.5rem; }
.pp-scope-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--partner-gold-bright), var(--partner-accent));
    color: #fff; flex-shrink: 0;
}
.pp-scope-text { flex: 1; min-width: 0; }
.pp-scope-text .pp-tab-title { margin: 0; }
.pp-scope-sub { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--partner-accent-deep); }
.pp-scope-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

/* ---------- Deliverables: dialogs ---------- */
.pp-dialog--wide { max-width: 720px; }
.pp-dialog-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 1.25rem; padding-top: 1rem;
}
.pp-form-field { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pp-form-label { font-size: 0.85rem; font-weight: 600; }
.pp-form-label--icon { display: inline-flex; align-items: center; gap: 0.4rem; }
.pp-form-label-icon--amber { color: var(--partner-accent-strong); }
.pp-form-label-icon--info { color: var(--status-info); }
.pp-form-hint { margin: 0; font-size: 0.78rem; }
.pp-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .pp-form-2col { grid-template-columns: 1fr; } }

.pp-choice-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-choice-chip {
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--foreground);
    padding: 0.15rem 0.7rem;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.pp-choice-chip:hover { border-color: var(--partner-outline); }
.pp-choice-chip--on {
    background: var(--partner-soft); border-color: var(--partner-outline);
    color: var(--partner-accent-deep);
}
.pp-custom-offering { display: flex; gap: 0.5rem; }
.pp-custom-offering .input { flex: 1; }

.pp-dropzone {
    display: block;
    border: 2px dashed var(--border); border-radius: var(--radius);
    padding: 1.25rem; text-align: center; cursor: pointer;
    transition: border-color 120ms ease;
}
.pp-dropzone:hover { border-color: var(--partner-outline); }
.pp-dropzone-icon { color: var(--muted-foreground); }
.pp-dropzone-text { margin: 0.5rem 0 0.15rem; font-size: 0.85rem; }

.pp-recurring-box {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 1px solid var(--partner-outline);
    background: var(--partner-soft-hover);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
}

.pp-pill--featured { background: var(--partner-soft); color: var(--partner-accent-deep); }
.pp-detail-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
@media (max-width: 640px) { .pp-detail-2col { grid-template-columns: 1fr; } }
.pp-detail-2col .pp-detail-facts { margin: 0; }
.pp-detail-card-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; }
.pp-detail-file {
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.85rem;
}
.pp-detail-desc-card { margin: 1rem 0 0; }
.pp-detail-desc-text { margin: 0; font-size: 0.9rem; }

.pp-ai-box {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 1px solid var(--partner-outline);
    background: linear-gradient(90deg, var(--partner-soft-hover), var(--partner-soft));
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
}
.pp-ai-box-title {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.95rem; font-weight: 600; color: var(--partner-accent-deep);
}

.pp-client-sec-head--link {
    width: 100%; background: none; border: 0; padding: 0;
    font: inherit; color: inherit; cursor: pointer;
    border-radius: 0.35rem;
}
.pp-client-sec-head--link:hover .pp-client-sec-title { color: var(--partner-accent-deep); }
.pp-client-sec-head--link:hover .pp-client-sec-chevron { color: var(--partner-accent-strong); }

/* ---------- Partner Portal → Service Calendar tab ---------- */
.pp-view-toggle { display: inline-flex; gap: 0.5rem; }
.pp-view-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--card); color: var(--foreground);
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
    transition: background 120ms ease;
}
.pp-view-btn:not(.pp-view-btn--active):hover { background: var(--muted); }
.pp-view-btn--active {
    background: var(--primary); color: var(--primary-foreground);
    border-color: var(--primary); font-weight: 600;
}

.pp-cal-filters {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}
.pp-cal-filters-icon { color: var(--muted-foreground); }
.pp-cal-filters-label { font-size: 0.85rem; font-weight: 600; }
.pp-cal-filter { display: inline-flex; align-items: center; gap: 0.4rem; }
.pp-cal-filter label { font-size: 0.75rem; }
.pp-cal-filter .input { width: auto; min-width: 11rem; padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.pp-cal-count { margin-left: auto; }

/* Partner event chip colors on the shared cal-grid */
.cal-event-chip.cal-event-pp-revisit {
    background: var(--partner-soft); color: var(--partner-accent-deep);
    border: 1px solid var(--partner-outline);
    display: inline-flex; align-items: center; gap: 0.2rem;
}
.cal-event-chip.cal-event-pp-deliverable {
    background: var(--status-info-bg); color: var(--status-info);
    border: 1px solid var(--status-info-border);
}

.pp-cal-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
    padding: 0.75rem 1rem 1rem; font-size: 0.8rem;
}
.pp-cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.pp-cal-swatch {
    width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; display: inline-block;
}
.pp-cal-swatch--revisit { background: var(--partner-soft); border: 1px solid var(--partner-outline); }
.pp-cal-swatch--deliverable { background: var(--status-info-bg); border: 1px solid var(--status-info-border); }

.pp-cal-list { padding: 1.5rem; }
.pp-cal-list-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; }
.pp-cal-event {
    display: flex; align-items: center; gap: 0.75rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: background 120ms ease;
}
.pp-cal-event:hover { background: var(--muted); }
.pp-cal-event-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem; border-radius: 0.5rem; flex-shrink: 0;
}
.pp-cal-event-icon--deliverable { background: var(--status-info-bg); color: var(--status-info); }
.pp-cal-event-icon--revisit { background: var(--partner-soft); color: var(--partner-accent-strong); }
.pp-cal-event-body { flex: 1; min-width: 0; }
.pp-cal-event-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pp-cal-event-title { margin: 0; font-size: 0.9rem; font-weight: 600; }
.pp-recurring-pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    border: 1px solid var(--partner-outline); border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.7rem; font-weight: 600; color: var(--partner-accent-deep);
}
.pp-cal-event-client {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin: 0.15rem 0 0; font-size: 0.78rem;
}
.pp-cal-event-when { text-align: right; flex-shrink: 0; }
.pp-cal-event-date { margin: 0; font-size: 0.88rem; font-weight: 600; }
.pp-cal-event-type { margin: 0.1rem 0 0; font-size: 0.75rem; }

/* ---------- Partner Portal → Sales Ladder & Opportunities tab ---------- */
.pp-opp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .pp-opp-stats { grid-template-columns: repeat(2, 1fr); } }
.pp-opp-stat-label { margin: 0; font-size: 0.8rem; }

.pp-opp-section { padding: 1.5rem; margin-bottom: 1.5rem; }
.pp-opp-section-title {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0; font-size: 1.05rem; font-weight: 700;
}
.pp-opp-lost-icon { color: var(--status-danger); }
.pp-opp-section-sub { margin: 0.25rem 0 1rem; font-size: 0.9rem; }

/* Offering tones: bg tint + solid icon tile + colored text + bar */
.pp-opp-offering {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; margin-bottom: 0.85rem;
}
.pp-opp-offering--info    { background: var(--status-info-bg); }
.pp-opp-offering--success { background: var(--status-success-bg); }
.pp-opp-offering--purple  { background: rgba(168, 85, 247, 0.08); }
.pp-opp-offering--amber   { background: var(--partner-soft-hover); }
.pp-opp-offering--rose    { background: var(--status-danger-bg); }
.pp-opp-offering-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.pp-opp-offering-icon, .pp-opp-step-icon {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.5rem; color: #fff; flex-shrink: 0;
    background: var(--muted-foreground);
}
.pp-opp-offering-icon { width: 2.4rem; height: 2.4rem; }
.pp-opp-tile--info    { background: var(--status-info); }
.pp-opp-tile--success { background: var(--status-success); }
.pp-opp-tile--purple  { background: hsl(265, 75%, 55%); }
.pp-opp-tile--amber   { background: var(--partner-accent); }
.pp-opp-tile--rose    { background: hsl(347, 77%, 50%); }
.pp-opp-text--info    { color: var(--status-info); }
.pp-opp-text--success { color: var(--status-success-fg); }
.pp-opp-text--purple  { color: hsl(265, 60%, 45%); }
.pp-opp-text--amber   { color: var(--partner-accent-deep); }
.pp-opp-text--rose    { color: hsl(347, 77%, 42%); }
.pp-opp-offering-text { flex: 1; min-width: 0; }
.pp-opp-offering-name { margin: 0; font-size: 0.98rem; font-weight: 700; }
.pp-opp-offering-desc { margin: 0.1rem 0 0; font-size: 0.83rem; }
.pp-opp-offering-stat { text-align: right; flex-shrink: 0; }
.pp-opp-offering-count { margin: 0; font-size: 0.95rem; font-weight: 700; }
.pp-opp-offering-pipeline { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--status-success-fg); font-weight: 600; }
.pp-opp-track {
    height: 0.45rem; border-radius: 999px; background: var(--muted);
    margin-top: 0.7rem; overflow: hidden;
}
.pp-opp-bar { height: 100%; border-radius: 999px; }
.pp-opp-bar--info    { background: var(--status-info); }
.pp-opp-bar--success { background: var(--status-success); }
.pp-opp-bar--purple  { background: hsl(265, 75%, 55%); }
.pp-opp-bar--amber   { background: var(--partner-accent); }
.pp-opp-bar--rose    { background: hsl(347, 77%, 50%); }
.pp-opp-offering-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.pp-opp-client-chip {
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card);
    padding: 0.15rem 0.7rem;
    font-size: 0.75rem; font-weight: 600;
}

.pp-opp-ladder-head { align-items: flex-end; margin-bottom: 1rem; }
.pp-opp-client-filters { margin-bottom: 0; }
.pp-opp-ladder-card { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-opp-ladder-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pp-opp-upside {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--partner-soft); color: var(--partner-accent-deep);
    border-radius: 999px; padding: 0.25rem 0.75rem;
    font-size: 0.78rem; font-weight: 700;
}
.pp-opp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 900px) { .pp-opp-steps { grid-template-columns: repeat(2, 1fr); } }
.pp-opp-step {
    border: 1px dashed var(--border); border-radius: 0.5rem;
    padding: 0.65rem;
}
.pp-opp-step--on { border-style: solid; }
.pp-opp-step-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.4rem; }
.pp-opp-step-icon { width: 1.75rem; height: 1.75rem; background: var(--muted); color: var(--muted-foreground); }
.pp-opp-step-check { color: var(--status-success); }
.pp-opp-step-empty { color: var(--border); }
.pp-opp-step-name { margin: 0.45rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--muted-foreground); }
.pp-opp-step-num { margin: 0.05rem 0 0; font-size: 0.7rem; }
.pp-opp-next {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    margin-top: 0.85rem;
}
.pp-opp-next-label { font-size: 0.78rem; }
.pp-opp-next-chips { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

.pp-opp-lost-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
@media (max-width: 760px) { .pp-opp-lost-tiles { grid-template-columns: 1fr; } }
.pp-opp-lost-tile {
    border-radius: var(--radius); padding: 0.85rem 1rem;
    /* Rendered as a <button>: tiles toggle the status filter on the list below. */
    border: 2px solid transparent; font: inherit; text-align: left; cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pp-opp-lost-tile:hover { box-shadow: var(--shadow-sm); }
.pp-opp-lost-tile--active { border-color: currentColor; box-shadow: var(--shadow-sm); }
.pp-opp-lost-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pp-opp-lost-headrow .pp-opp-section-title { margin-bottom: 0.25rem; }
.pp-opp-lost-headrow .pp-opp-section-sub { margin-bottom: 0; }
.pp-opp-filter-note { margin: 0 0 0.75rem; font-size: 0.82rem; }
.pp-opp-filter-clear {
    border: 0; background: none; padding: 0; font: inherit;
    color: var(--partner-accent-deep); font-weight: 600; cursor: pointer; text-decoration: underline;
}
.pp-opp-lost-right { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.pp-opp-lost-tile--lost { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.pp-opp-lost-tile--stalled { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.pp-opp-lost-tile--never { background: var(--muted); color: var(--secondary-foreground); }
.pp-opp-lost-tile-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    font-size: 0.82rem; font-weight: 500;
}
.pp-opp-lost-tile-value { margin: 0.2rem 0 0; font-size: 1.4rem; font-weight: 700; }
.pp-opp-lost-tile-sub { margin: 0.1rem 0 0; font-size: 0.75rem; }

.pp-opp-lost-item {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-bottom: 0.75rem;
}
.pp-opp-lost-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pp-opp-lost-amount { font-size: 0.95rem; font-weight: 700; flex-shrink: 0; }
.pp-opp-status--lost { background: var(--status-danger-bg); color: var(--status-danger-fg); border: 1px solid var(--status-danger-border); }
.pp-opp-status--stalled { background: var(--status-warning-bg); color: var(--status-warning-fg); border: 1px solid var(--status-warning-border); }
.pp-opp-status--never { background: var(--muted); color: var(--secondary-foreground); }
.pp-opp-lost-service { margin: 0.5rem 0 0; font-size: 0.92rem; font-weight: 600; }
.pp-opp-lost-why { margin: 0.25rem 0 0; font-size: 0.83rem; }
.pp-opp-lost-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
    margin: 0.5rem 0 0; font-size: 0.78rem;
}
.pp-opp-reengage {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--partner-accent-deep); font-weight: 600;
}

/* ---------- Partner Portal → Recruitment tab ---------- */
.pp-rec-filters { align-items: center; }
.pp-rec-filter-label { font-size: 0.78rem; }
.pp-rec-card { padding: 1.25rem 1.5rem; margin-bottom: 1rem; cursor: pointer; transition: box-shadow 120ms ease; }
.pp-rec-card:hover { box-shadow: var(--shadow-md); }
.pp-rec-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pp-rec-card-title { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.pp-rec-card-name { margin: 0; font-size: 1.05rem; font-weight: 700; }
.pp-rec-status--draft { background: var(--muted); color: var(--muted-foreground); }
.pp-rec-status--active { background: var(--status-info-bg); color: var(--status-info); }
.pp-rec-status--round1 { background: var(--partner-soft); color: var(--partner-accent-deep); }
.pp-rec-status--round2 { border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.pp-rec-status--completed { background: var(--status-success-bg); color: var(--status-success-fg); }
.pp-rec-status--archived { background: var(--muted); color: var(--muted-foreground); }
.pp-rec-member-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.pp-rec-pin {
    padding: 0.2rem 0.5rem; border: 1px solid var(--partner-outline); border-radius: 0.4rem;
    background: var(--partner-soft-hover); font-weight: 700; letter-spacing: 0.08em;
}
.pp-rec-link {
    display: block; padding: 0.55rem 0.8rem; margin-top: 0.75rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--secondary); font-size: 0.82rem; word-break: break-all;
}
.pp-rec-status-select { width: auto; min-width: 8rem; }
.pp-rec-card-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem;
    margin-top: 0.75rem; font-size: 0.85rem;
}
.pp-rec-card-cu { font-weight: 600; color: var(--foreground); }

.pp-rec-detail-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.pp-rec-detail-head .pp-tab-title { margin: 0; }
.pp-rec-detail-sub { margin: 0.15rem 0 0; font-size: 0.88rem; }

.pp-rec-subtabs {
    display: inline-flex; gap: 0.25rem;
    background: var(--muted); border-radius: 0.5rem; padding: 0.25rem;
    margin-bottom: 1.25rem;
}
.pp-rec-subtab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 0; border-radius: 0.4rem; background: none;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem; font-weight: 500; color: var(--muted-foreground);
    cursor: pointer;
}
.pp-rec-subtab--active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); font-weight: 600; }

.pp-rec-dash-head { align-items: center; margin-bottom: 1rem; }
.pp-rec-participation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .pp-rec-participation { grid-template-columns: 1fr; } }
.pp-rec-part-card { padding: 1.25rem 1.5rem; }
.pp-rec-part-label { margin: 0; font-size: 0.85rem; }
.pp-rec-part-value { margin: 0.35rem 0 0.6rem; font-size: 1.35rem; }
.pp-rec-part-value strong { font-size: 1.6rem; }
.pp-rec-part-bar { background: var(--primary); }
.pp-rec-part-list { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pp-rec-part-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; }
.pp-rec-pill-submitted {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: var(--status-success-bg); color: var(--status-success-fg);
}
.pp-rec-part-note { margin: 0.85rem 0 0; font-size: 0.85rem; }

.pp-rec-agg { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-rec-agg .pp-form-3col { margin-bottom: 0.9rem; }
.pp-rec-agg-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pp-rec-agg-row {
    display: flex; align-items: center; gap: 0.85rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.pp-rec-agg-rank { font-weight: 700; color: var(--partner-accent-strong); flex-shrink: 0; }
.pp-rec-agg-name { flex: 1; font-weight: 600; min-width: 0; }
.pp-rec-agg-score { text-align: right; display: flex; flex-direction: column; }
.pp-rec-agg-score .muted { font-size: 0.75rem; }
.pp-rec-agg-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }

.pp-rec-candidate {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.5rem; margin-bottom: 0.75rem;
}
.pp-rec-grip { color: var(--muted-foreground); flex-shrink: 0; cursor: grab; }
.pp-rec-candidate-body { flex: 1; min-width: 0; }
.pp-rec-candidate-name { margin: 0; font-size: 0.95rem; font-weight: 700; }
.pp-rec-candidate-line { margin: 0.15rem 0 0; font-size: 0.85rem; }
.pp-rec-candidate-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.pp-rec-committee-title { margin-bottom: 1rem; }
.pp-rec-member {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.5rem; margin-bottom: 0.65rem;
}

.pp-rec-reminders-row { flex-direction: row; align-items: center; justify-content: space-between; }
.pp-rec-doc-row { display: flex; gap: 0.5rem; }
.pp-rec-doc-type { width: auto; min-width: 10rem; }
.pp-rec-upload-btn { flex: 1; justify-content: center; }
.pp-rec-view-label { margin: 1rem 0 0.35rem; }
.pp-rec-video {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    background: #0f172a; color: #e2e8f0;
    border-radius: var(--radius);
    padding: 2.5rem 1rem;
}
.pp-rec-video-url { font-size: 0.75rem; word-break: break-all; opacity: 0.75; }
.pp-rec-view-doc {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0; font-size: 0.9rem;
}
.pp-rec-view-doc-name { color: var(--partner-accent-deep); font-weight: 500; }
.pp-rec-close-copy { margin: 0.75rem 0 0; font-size: 0.9rem; max-width: 30rem; }
.pp-rec-round-row { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.pp-rec-round-label { font-size: 0.8rem; }
.pp-setup-addons { margin-top: 1.25rem; }
.pp-setup-addons-title { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.pp-setup-addon-card { width: 100%; }
.pp-setup-addon-card .pp-setup-service-title { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------- Partner Portal → SERP tab ---------- */
.pp-serp-list-title { display: flex; align-items: center; gap: 0.5rem; }
.pp-serp-card-sub { margin: 0.35rem 0 0; font-size: 0.9rem; }
.pp-serp-pill-exec { background: var(--foreground); color: var(--background); }

.pp-serp-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.pp-serp-title { margin-bottom: 1rem; }
.pp-serp-title .pp-tab-title { margin: 0; }
.pp-serp-title-sub { margin: 0.15rem 0 0; font-size: 0.88rem; }
.pp-serp-open-actions { color: var(--status-warning-fg); font-weight: 600; }

.pp-serp-stages { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.pp-serp-stage {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid transparent; border-radius: 0.5rem;
    padding: 0.45rem 0.85rem; font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
}
.pp-serp-stage:disabled { cursor: default; }
.pp-serp-stage--done { background: var(--muted); color: var(--secondary-foreground); }
.pp-serp-stage--current { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.pp-serp-stage--todo { background: var(--card); color: var(--foreground); border-color: var(--border); }
.pp-serp-stage--done:not(:disabled):hover,
.pp-serp-stage--todo:not(:disabled):hover { border-color: var(--partner-outline); }

.pp-serp-tab-count { margin-left: 0.35rem; padding: 0.05rem 0.5rem; font-size: 0.72rem; }
.pp-serp-sec-head { align-items: center; margin-bottom: 1rem; }

/* Timeline */
.pp-serp-tl { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--border); }
.pp-serp-tl-item { position: relative; margin-bottom: 1rem; }
.pp-serp-tl-num {
    position: absolute; left: -2.45rem; top: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card);
    font-size: 0.72rem; font-weight: 700;
}
.pp-serp-round { padding: 1rem 1.25rem; margin-bottom: 0; }
.pp-serp-round-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pp-serp-round-date { font-size: 0.8rem; }
.pp-serp-round-by { margin: 0.4rem 0 0; font-size: 0.8rem; }
.pp-serp-round-sum { margin: 0.4rem 0 0; font-size: 0.92rem; }
.pp-serp-snap {
    margin-top: 0.6rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--secondary);
    display: flex; flex-direction: column; gap: 0.3rem;
}
.pp-serp-snap-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; }
.pp-serp-snap-name { font-weight: 600; }
.pp-serp-round-doc {
    display: flex; align-items: center; gap: 0.35rem;
    margin-top: 0.6rem; font-size: 0.8rem; font-weight: 500;
    color: var(--partner-accent-deep);
}
.pp-serp-round-gavel {
    display: flex; align-items: center; gap: 0.35rem;
    margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted-foreground);
}
.pp-serp-rt--consultant-proposal,
.pp-serp-rt--consultant-response { background: var(--partner-soft); color: var(--partner-accent-deep); border: 1px solid var(--partner-outline); }
.pp-serp-rt--committee-position { background: var(--muted); color: var(--secondary-foreground); }
.pp-serp-rt--ceo-counter { background: var(--status-warning-bg); color: var(--status-warning-fg); border: 1px solid var(--status-warning-border); }
.pp-serp-rt--legal-review { background: var(--status-info-bg); color: var(--status-info); }
.pp-serp-rt--board-meeting { border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.pp-serp-rt--final-agreement { background: var(--status-success-bg); color: var(--status-success-fg); }

/* Reasonableness band */
.pp-serp-bandcard { padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.pp-serp-band-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pp-serp-band-note { font-size: 0.78rem; }
.pp-serp-band {
    position: relative; height: 0.75rem; margin-top: 2.4rem; border-radius: 999px;
    background: linear-gradient(90deg, var(--status-warning-bg), var(--status-success-bg) 50%, var(--status-danger-bg));
}
.pp-serp-band-range {
    position: absolute; inset: 0 auto 0 33.3%; width: 33.4%;
    border-left: 2px solid var(--status-success-fg); border-right: 2px solid var(--status-success-fg);
    background: color-mix(in srgb, var(--status-success) 22%, transparent);
    border-radius: 2px;
}
.pp-serp-band-mark { position: absolute; top: -2.1rem; transform: translateX(-50%); text-align: center; }
.pp-serp-band-chip {
    display: inline-block; white-space: nowrap;
    padding: 0.15rem 0.45rem; border-radius: 0.35rem;
    background: var(--foreground); color: var(--background);
    font-size: 0.65rem; font-weight: 600;
}
.pp-serp-band-tick { display: block; width: 1px; height: 0.8rem; margin: 0 auto; background: var(--foreground); }
.pp-serp-band-labels { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.75rem; }

/* Scenario view toggle */
.pp-serp-view-row { align-items: center; gap: 0.5rem; }
.pp-serp-viewtoggle { display: inline-flex; align-items: center; gap: 0.15rem; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.15rem; background: var(--card); }
.pp-serp-viewbtn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: 0; border-radius: 0.4rem; background: none;
    padding: 0.3rem 0.6rem; font-size: 0.78rem; font-weight: 500;
    color: var(--muted-foreground); cursor: pointer;
}
.pp-serp-viewbtn--on { background: var(--muted); color: var(--foreground); font-weight: 600; }

/* Side-by-side comparison */
.pp-serp-cmpwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 1.25rem; }
.pp-serp-cmp { border-collapse: collapse; width: max-content; min-width: 100%; }
.pp-serp-cmp th, .pp-serp-cmp td {
    padding: 0.7rem 1rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.pp-serp-cmp tbody th { font-weight: 500; color: var(--muted-foreground); white-space: nowrap; min-width: 9rem; }
.pp-serp-cmp tbody tr:last-child th, .pp-serp-cmp tbody tr:last-child td { border-bottom: 0; }
.pp-serp-cmp-corner { min-width: 9rem; }
/* thead height:1px lets the .pp-serp-col height:100% stretch every header box to the
   tallest column's height (standard table equal-height trick). */
.pp-serp-cmp thead th { height: 1px; }
.pp-serp-cmp-colhead { padding: 0.75rem 0.6rem; min-width: 15rem; max-width: 18rem; }
.pp-serp-col {
    border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.85rem 1rem; background: var(--card);
    height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start;
}
.pp-serp-col-top { width: 100%; }
.pp-serp-col--below { background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.pp-serp-col--within { background: var(--status-success-bg); border-color: color-mix(in srgb, var(--status-success) 40%, var(--card)); }
.pp-serp-col--above { background: var(--status-danger-bg); border-color: var(--status-danger-border); }
.pp-serp-col-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.pp-serp-col-name { margin: 0; font-weight: 700; font-size: 0.95rem; }
.pp-serp-col-plan { margin: 0.1rem 0 0; font-size: 0.78rem; }
.pp-serp-col-acts { display: inline-flex; gap: 0.25rem; flex-shrink: 0; }
.pp-serp-mkt { display: flex; align-items: center; gap: 0.3rem; margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 600; }
.pp-serp-mkt--below { color: var(--status-warning-fg); }
.pp-serp-mkt--within { color: var(--status-success-fg); }
.pp-serp-mkt--above { color: var(--status-danger-fg); }
.pp-serp-col-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.pp-serp-cmp-meaning { max-width: 18rem; }
.pp-serp-cmp-meaning p { margin: 0 0 0.45rem; font-size: 0.82rem; }
.pp-serp-cmp-meaning p:last-child { margin-bottom: 0; }

/* Cards view */
.pp-serp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .pp-serp-cards { grid-template-columns: 1fr; } }
.pp-serp-scard { padding: 1.25rem 1.5rem; margin-bottom: 0; }
.pp-serp-scard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin-top: 0.85rem; }
.pp-serp-scard-label { margin: 0; font-size: 0.78rem; }
.pp-serp-scard-val { margin: 0.1rem 0 0; font-weight: 600; }
.pp-serp-scard-trigger { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--partner-accent-deep); }
.pp-serp-meaning {
    margin-top: 0.7rem; padding: 0.6rem 0.8rem;
    border-radius: 0.5rem; background: var(--secondary);
    font-size: 0.85rem;
}
.pp-serp-mktbox { margin-top: 0.7rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 0.5rem; }
.pp-serp-mktbox p { margin: 0; font-size: 0.78rem; }
.pp-serp-mktbox-head { display: flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.82rem; margin-bottom: 0.25rem !important; }
.pp-serp-mktbox--below { background: var(--status-warning-bg); border-color: var(--status-warning-border); color: var(--status-warning-fg); }
.pp-serp-mktbox--within { background: var(--status-success-bg); border-color: color-mix(in srgb, var(--status-success) 40%, var(--card)); color: var(--status-success-fg); }
.pp-serp-mktbox--above { background: var(--status-danger-bg); border-color: var(--status-danger-border); color: var(--status-danger-fg); }

/* Guardrails */
.pp-serp-guard { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-serp-guard-intro {
    margin-top: 1rem; padding: 0.75rem 1rem;
    border: 1px solid var(--border); border-radius: 0.5rem; background: var(--secondary);
}
.pp-serp-guard-title { margin: 0; font-weight: 600; font-size: 0.88rem; }
.pp-serp-guard-intro p.muted, .pp-serp-guard-box p.muted { margin: 0.25rem 0 0; font-size: 0.85rem; }
.pp-serp-guard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
@media (max-width: 800px) { .pp-serp-guard-grid { grid-template-columns: 1fr; } }
.pp-serp-guard-box { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 1rem; }

/* Minutes */
.pp-serp-meeting { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-serp-meeting-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pp-serp-meeting-title { margin: 0; font-size: 1rem; font-weight: 700; }
.pp-serp-meeting-att { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.pp-serp-meeting-people { margin: 0.3rem 0 0; font-size: 0.82rem; }
.pp-serp-meeting-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.pp-serp-meeting-sum { margin: 0.7rem 0 0; font-size: 0.9rem; }
.pp-serp-sec-label {
    display: flex; align-items: center; gap: 0.35rem;
    margin: 1rem 0 0.5rem; font-size: 0.82rem; font-weight: 700;
}
.pp-serp-decision { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; }
.pp-serp-decision-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pp-serp-votes { font-size: 0.78rem; }
.pp-serp-decision-text { margin: 0.45rem 0 0; font-size: 0.88rem; }
.pp-serp-decision-rel { margin: 0.25rem 0 0; font-size: 0.78rem; }
.pp-serp-outcome--approved { background: var(--status-success-bg); color: var(--status-success-fg); }
.pp-serp-outcome--rejected { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.pp-serp-outcome--deferred { background: var(--muted); color: var(--secondary-foreground); }
.pp-serp-action {
    display: flex; align-items: flex-start; gap: 0.6rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.6rem 0.9rem; margin-bottom: 0.5rem; cursor: pointer;
}
.pp-serp-action input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--primary); }
.pp-serp-action input[type="checkbox"]:disabled { cursor: default; }
.pp-serp-action-body { display: flex; flex-direction: column; gap: 0.1rem; }
.pp-serp-action-text { font-size: 0.88rem; }
.pp-serp-action-text--done { text-decoration: line-through; color: var(--muted-foreground); }
.pp-serp-action-meta { font-size: 0.78rem; }

/* Agreement */
.pp-serp-agr { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-serp-agr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.pp-serp-sig--unsigned { background: var(--muted); color: var(--secondary-foreground); }
.pp-serp-sig--pending { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.pp-serp-sig--executed { background: var(--foreground); color: var(--background); }
.pp-serp-agr-read { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; margin-bottom: 0.85rem; }
@media (max-width: 700px) { .pp-serp-agr-read { grid-template-columns: 1fr; } }
.pp-serp-agr-read p { margin: 0.1rem 0 0; font-size: 0.9rem; }
.pp-serp-agr-terms { margin: 0.25rem 0 0; font-size: 0.9rem; }
.pp-serp-agr-save { display: flex; margin-top: 0.5rem; }

/* Dialog extensions */
.pp-dialog--wide { max-width: 760px; }
.pp-serp-dlg-listhead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.pp-serp-dlg-add { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.pp-serp-dlg-row { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; }
.pp-serp-dlg-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
.pp-serp-dlg-votes { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }
.pp-serp-dlg-actrow { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0.5rem; align-items: center; }
@media (max-width: 700px) {
    .pp-serp-dlg-selects { grid-template-columns: 1fr; }
    .pp-serp-dlg-actrow { grid-template-columns: 1fr 1fr; }
}

/* Board "Record your position" form */
.pp-serp-pos { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-serp-pos .pp-opp-section-title { margin-bottom: 0.85rem; }
.pp-serp-pos .pp-btn-dark { margin-top: 1rem; }

/* Board view page */
.pp-serp-board-page { min-height: 100vh; background: var(--background); }
.pp-serp-board-head { background: var(--card); border-bottom: 1px solid var(--border); }
.pp-serp-board-head-inner {
    max-width: 72rem; margin: 0 auto; padding: 1.1rem 1.5rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.pp-serp-board-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.pp-serp-board-sub { margin: 0.15rem 0 0; font-size: 0.85rem; }
.pp-serp-board-main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }

/* ---------- Partner Portal → Investments tab ---------- */
.pp-inv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .pp-inv-list { grid-template-columns: 1fr; } }
.pp-inv-listcard { padding: 1.25rem 1.5rem; margin-bottom: 0; cursor: pointer; transition: box-shadow 120ms ease; }
.pp-inv-listcard:hover { box-shadow: var(--shadow-md); }
.pp-inv-listcard-sub { margin: 0.15rem 0 0; font-size: 0.85rem; }
.pp-inv-listcard-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.pp-inv-listcard-val { margin: 0.15rem 0 0; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
.pp-inv-return--up { color: var(--status-success-fg); }
.pp-inv-return--warn { color: var(--status-warning-fg); }
.pp-inv-listcard-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.pp-inv-pill-danger { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--status-danger); color: #fff; }
.pp-inv-open-btn {
    display: inline-block; margin-top: 0.9rem; padding: 0;
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--partner-accent-deep);
}
.pp-inv-open-btn:hover { text-decoration: underline; }

.pp-inv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 1rem; }
.pp-inv-tiles--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pp-inv-tiles, .pp-inv-tiles--3 { grid-template-columns: 1fr 1fr; } }
.pp-inv-tile { padding: 1rem 1.25rem; margin-bottom: 0; }
/* Fixed label-row height so tiles with and without the pencil align identically. */
.pp-inv-tile-label { margin: 0; font-size: 0.78rem; display: flex; align-items: center; gap: 0.35rem; min-height: 1.1rem; }
.pp-inv-tile-edit { display: inline-flex; align-items: center; color: var(--muted-foreground); }
.pp-inv-tile--edit { cursor: pointer; transition: box-shadow 120ms ease; }
.pp-inv-tile--edit:hover { box-shadow: var(--shadow-md); }
.pp-inv-tile--edit:hover .pp-inv-tile-edit { color: var(--foreground); }
.pp-inv-tile-value { margin: 0.3rem 0 0; font-size: 1.3rem; font-weight: 700; }
.pp-inv-tile-sub { margin: 0.2rem 0 0; font-size: 0.78rem; }

.pp-inv-accrual { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-inv-accrual-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.pp-inv-accrual-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
@media (max-width: 800px) { .pp-inv-accrual-grid { grid-template-columns: 1fr 1fr; } }
.pp-inv-accrual-val { margin: 0.25rem 0 0; font-size: 1.15rem; font-weight: 700; }
.pp-inv-accrual-cad { font-size: 0.8rem; font-weight: 500; }

.pp-inv-status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .pp-inv-status-row { grid-template-columns: 1fr; } }
.pp-inv-plan { border-radius: var(--radius); padding: 1.1rem 1.35rem; border: 1px solid transparent; }
.pp-inv-plan--ahead { background: var(--status-success-bg); border-color: color-mix(in srgb, var(--status-success) 40%, var(--card)); color: var(--status-success-fg); }
.pp-inv-plan--onplan { background: var(--status-warning-bg); border-color: var(--status-warning-border); color: var(--status-warning-fg); }
.pp-inv-plan--behind { background: var(--status-danger-bg); border-color: var(--status-danger-border); color: var(--status-danger-fg); }
.pp-inv-plan-title { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.pp-inv-plan-copy { margin: 0.5rem 0 0; font-size: 0.88rem; }
.pp-inv-funding { padding: 1.1rem 1.35rem; margin-bottom: 0; }
.pp-inv-funding-track { margin-top: 0.85rem; }
.pp-inv-funding-bar { background: var(--foreground); }
.pp-inv-funding-copy { margin: 0.7rem 0 0; font-size: 0.88rem; }

.pp-inv-chartcard { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-inv-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.pp-inv-chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pp-inv-range-row { margin-bottom: 0; }
.pp-inv-chart { width: 100%; height: auto; display: block; }
.pp-inv-chart-grid line { stroke: var(--border); stroke-width: 1; }
.pp-inv-chart-ylabel { fill: var(--muted-foreground); font-size: 10px; }
.pp-inv-chart-xlabel { fill: var(--muted-foreground); font-size: 10px; }
.pp-inv-chart-area { fill: color-mix(in srgb, var(--foreground) 9%, transparent); }
.pp-inv-chart-balance { stroke: var(--foreground); stroke-width: 2; }
.pp-inv-chart-return { stroke: var(--foreground); stroke-width: 1.5; opacity: 0.85; }
.pp-inv-chart-dot { fill: var(--foreground); }
.pp-inv-chart-target { stroke: var(--muted-foreground); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pp-inv-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; font-size: 0.78rem; justify-content: center; }
.pp-inv-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.pp-inv-legend-line { width: 16px; height: 2px; background: var(--foreground); }
.pp-inv-legend-area { width: 12px; height: 10px; background: color-mix(in srgb, var(--foreground) 14%, transparent); border: 1px solid var(--border); }
.pp-inv-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--foreground); }
.pp-inv-legend-dash { width: 16px; height: 0; border-top: 2px dashed var(--muted-foreground); }
.pp-inv-rangestats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
@media (max-width: 800px) { .pp-inv-rangestats { grid-template-columns: 1fr 1fr; } }
.pp-inv-rangestat-val { margin: 0.2rem 0 0; font-size: 1.1rem; font-weight: 700; }

.pp-inv-tablecard { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-inv-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.pp-inv-tablewrap { overflow-x: auto; }
.pp-inv-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 0.86rem; }
.pp-inv-table th, .pp-inv-table td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pp-inv-table thead th { color: var(--muted-foreground); font-weight: 500; font-size: 0.8rem; }
.pp-inv-table tbody tr:last-child td { border-bottom: 0; }
.pp-inv-td-strong { font-weight: 600; }
.pp-inv-td-actions { white-space: nowrap; text-align: right; }
.pp-inv-th-right, .pp-inv-td-right { text-align: right; }
.pp-inv-source { display: inline-flex; align-items: center; gap: 0.25rem; }
.pp-inv-received { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--status-success-fg); color: #fff; }
.pp-inv-doc-name { margin: 0; font-weight: 600; }
.pp-inv-doc-type { margin: 0.1rem 0 0; font-size: 0.78rem; }
.pp-inv-doc-actions { display: inline-flex; align-items: center; gap: 0.35rem; }
.pp-inv-sharebtn { border: 0; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 600; }
.pp-inv-sharebtn-outline { padding: 0.3rem 0.7rem; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0.3rem; }

.pp-inv-planhead { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-inv-planhead .pp-opp-section-sub { margin-bottom: 0; }
.pp-inv-align-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.pp-inv-align-row .pp-opp-track { flex: 1; margin-top: 0; }
.pp-inv-align-pct { font-size: 0.85rem; font-weight: 600; }
.pp-inv-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .pp-inv-goals { grid-template-columns: 1fr; } }
.pp-inv-goal { padding: 1.25rem 1.5rem; margin-bottom: 0; }
.pp-inv-goal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.pp-inv-goal-name { margin: 0; font-size: 0.98rem; font-weight: 700; }
.pp-inv-goalstatus--met { border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.pp-inv-goalstatus--slight { background: var(--status-warning-bg); color: var(--status-warning-fg); border: 1px solid var(--status-warning-border); }
.pp-inv-goalstatus--behind { background: var(--status-danger-bg); color: var(--status-danger-fg); border: 1px solid var(--status-danger-border); }
.pp-inv-goal-meta { margin: 0.25rem 0 0; font-size: 0.8rem; }
.pp-inv-goal-values { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.85rem; }
.pp-inv-goal-target { text-align: right; }
.pp-inv-goal-val { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 700; }
.pp-inv-goal-note { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--partner-accent-deep); }
.pp-inv-goal-why { margin: 0.6rem 0 0; font-size: 0.85rem; }
.pp-inv-goal-approved { margin: 0.6rem 0 0; font-size: 0.78rem; }
.pp-inv-goal-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }

.pp-inv-history { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.pp-inv-change { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.85rem 1rem; margin-top: 0.75rem; }
.pp-inv-change-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; }
.pp-inv-change-title { display: inline-flex; align-items: center; gap: 0.5rem; }
.pp-inv-change-vals { margin: 0.45rem 0 0; font-size: 0.9rem; }
.pp-inv-change-why { margin: 0.35rem 0 0; font-size: 0.85rem; }
.pp-inv-change-people { margin: 0.45rem 0 0; font-size: 0.78rem; display: flex; align-items: center; gap: 0.35rem; }
.pp-inv-change-minutes { margin: 0.2rem 0 0; font-size: 0.78rem; }

.pp-inv-taskcols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .pp-inv-taskcols { grid-template-columns: 1fr; } }
.pp-inv-taskcol { padding: 1.25rem 1.5rem; margin-bottom: 0; }
.pp-inv-rec { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.85rem 1rem; margin-top: 0.75rem; }
.pp-inv-rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pp-inv-rec-title { margin: 0; font-weight: 600; }
.pp-inv-prio--low { background: var(--muted); color: var(--secondary-foreground); }
.pp-inv-prio--medium { background: var(--muted); color: var(--secondary-foreground); }
.pp-inv-prio--high { background: var(--status-danger); color: #fff; }
.pp-inv-rec-meta { margin: 0.3rem 0 0; font-size: 0.78rem; }
.pp-inv-rec-summary { margin: 0.55rem 0 0; font-size: 0.88rem; }
.pp-inv-rec-plain { margin: 0.55rem 0 0; padding: 0.55rem 0.75rem; border-radius: 0.45rem; background: var(--secondary); font-size: 0.85rem; }
.pp-inv-rec-board { margin: 0.55rem 0 0; font-size: 0.78rem; }
.pp-inv-rec-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.pp-inv-task {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.65rem 0.9rem; margin-top: 0.6rem;
}
.pp-inv-task-main { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; flex: 1; }
.pp-inv-task-main input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--primary); }
.pp-inv-task-body { display: flex; flex-direction: column; gap: 0.1rem; }
.pp-inv-task-text { font-size: 0.88rem; }
.pp-inv-task-meta { font-size: 0.78rem; }

.pp-inv-ai-title { display: flex; align-items: center; gap: 0.45rem; }
.pp-inv-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
    border: 2px dashed var(--border); border-radius: 0.6rem;
    padding: 2.5rem 1rem; margin-top: 1rem; text-align: center; cursor: pointer;
    transition: background 120ms ease;
}
.pp-inv-dropzone:hover { background: var(--secondary); }
.pp-inv-dropzone-icon { color: var(--muted-foreground); }
.pp-inv-dropzone-main { font-size: 0.9rem; font-weight: 600; }
.pp-inv-dropzone-sub { font-size: 0.78rem; }
.pp-inv-dropzone-input { display: none; }
.pp-inv-members { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; }
.pp-inv-members-other { margin-top: 0.6rem; }

/* ---------- Partner Services (client-facing) + partner invites ---------- */
.ps-page { --ps-accent: #f59e0b; }
.ps-back { margin-bottom: 1rem; }
.ps-hero { position: relative; overflow: hidden; margin-bottom: 1.25rem; }
.ps-hero-bar { height: 6px; background: var(--ps-accent); }
.ps-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ps-hero-name { margin: 0; }
.ps-hero-tagline { margin: 0.25rem 0 0; }
.ps-hero-client { margin: 0.35rem 0 0; font-size: 0.85rem; }
.ps-partner-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.75rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600;
    background: color-mix(in srgb, var(--ps-accent) 14%, var(--card));
    color: color-mix(in srgb, var(--ps-accent) 70%, var(--foreground));
    border: 1px solid color-mix(in srgb, var(--ps-accent) 35%, var(--card));
}
.ps-partner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ps-accent); }
.ps-hero-desc { margin: 0.9rem 0 0; max-width: 60rem; }
.ps-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .ps-columns { grid-template-columns: 1fr; } }
.ps-section { margin-bottom: 1.25rem; }
.ps-section-title { margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 700; }
.ps-service-row {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.6rem;
}
.ps-service-name { margin: 0; font-weight: 600; }
.ps-service-meta { margin: 0.15rem 0 0; font-size: 0.8rem; }
.ps-badge {
    background: color-mix(in srgb, var(--ps-accent) 15%, var(--card));
    color: color-mix(in srgb, var(--ps-accent) 70%, var(--foreground));
}
.ps-doc-row {
    display: flex; align-items: center; gap: 0.85rem;
    border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.7rem 1rem; margin-bottom: 0.6rem;
}
.ps-doc-icon {
    width: 2.2rem; height: 2.2rem; border-radius: 0.5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ps-accent) 12%, var(--card));
    color: color-mix(in srgb, var(--ps-accent) 70%, var(--foreground));
}
.ps-doc-body { flex: 1; min-width: 0; }
.ps-doc-title { margin: 0; font-weight: 600; }
.ps-doc-meta { margin: 0.15rem 0 0; font-size: 0.78rem; }
.ps-contact-name { margin: 0; font-weight: 700; }
.ps-contact-title { margin: 0.1rem 0 0; font-size: 0.85rem; }
.ps-contact-line { margin: 0.4rem 0 0; font-size: 0.85rem; }
.ps-contact-btn { display: inline-block; margin-top: 0.9rem; }
.ps-contact-note { margin: 0.9rem 0 0; font-size: 0.82rem; }
.ps-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .ps-list { grid-template-columns: 1fr; } }
.ps-list-card { cursor: pointer; overflow: hidden; transition: box-shadow 120ms ease; }
.ps-list-card:hover { box-shadow: var(--shadow-md); }
.ps-list-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ps-list-name { margin: 0; font-size: 1.1rem; font-weight: 700; }
.ps-list-tagline { margin: 0.2rem 0 0; font-size: 0.85rem; }
.ps-list-open { color: color-mix(in srgb, var(--ps-accent) 70%, var(--foreground)); font-weight: 600; font-size: 0.9rem; }

/* Guest teaser: everything except Partner Services renders greyed and inert. */
.sidebar-teaser .nav-item:not([href^="partner-services"]) { opacity: 0.45; pointer-events: none; }

/* Clients tab: CU search + invite widgets */
.pp-invite-notice { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.pp-invite-url {
    display: block; padding: 0.45rem 0.7rem; border-radius: 0.4rem;
    background: var(--secondary); border: 1px solid var(--border);
    font-size: 0.78rem; word-break: break-all;
}
.pp-cu-results {
    display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem;
    border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.3rem;
    max-height: 12rem; overflow-y: auto;
}
.pp-cu-result {
    display: flex; align-items: center; gap: 0.5rem;
    border: 0; background: none; text-align: left;
    padding: 0.5rem 0.6rem; border-radius: 0.4rem;
    font: inherit; font-size: 0.88rem; cursor: pointer;
}
.pp-cu-result:hover { background: var(--secondary); }
.pp-cu-picked {
    display: flex; align-items: center; gap: 0.5rem;
    border: 1px solid var(--partner-outline); background: var(--partner-soft);
    border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.9rem; font-weight: 600;
}
.pp-cu-picked .pp-icon-btn { margin-left: auto; }
.pp-client-invite-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; margin-top: 0.6rem; }
.pp-invite-resend {
    border: 0; background: none; padding: 0; font: inherit; font-size: 0.78rem;
    font-weight: 600; color: var(--partner-accent-deep); cursor: pointer; text-decoration: underline;
}
.pp-invite-hint { margin-bottom: 0.75rem; }

/* CU-side Executive Search (read-only, partner-fed) */
.ces-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.9rem; font-size: 0.85rem; }
.ces-candidate { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.85rem 1rem; margin-bottom: 0.6rem; }
.ces-candidate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ces-candidate-name { margin: 0; font-weight: 700; }
.ces-candidate-meta { margin: 0.15rem 0 0; font-size: 0.82rem; }
.ces-candidate-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.ces-candidate-none { font-size: 0.8rem; }
.ces-round {
    display: flex; align-items: center; gap: 0.6rem;
    border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.55rem 0.85rem; margin-bottom: 0.5rem; font-size: 0.88rem;
}
.ces-round--current { border-color: var(--ps-accent); background: color-mix(in srgb, var(--ps-accent) 8%, var(--card)); }
.ces-round-num { font-weight: 600; }
.ces-round-chip { margin-left: auto; padding: 0.15rem 0.55rem; font-size: 0.72rem; }
.ces-vote-copy { margin: 0 0 0.6rem; font-size: 0.85rem; }
.ces-managed-note { margin: 0; font-size: 0.85rem; }
.pp-rec-cu-freetext { margin-top: 0.4rem; }

/* Invite confirm page */
.pp-auth-shell .brand-logo { width: 44px; height: 44px; }
.pp-invite-accent { height: 6px; border-radius: var(--radius) var(--radius) 0 0; }
.pp-invite-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.6rem; }
.pp-invite-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
.pp-invite-submit { margin-top: 0.5rem; }

/* === Partner sign-in (/partner/login) === */

.pp-auth-shell { background: linear-gradient(135deg, var(--background), var(--partner-soft-hover)); }
.pp-auth-shell .brand-row { margin-bottom: 0.35rem; }
.pp-auth-wordmark {
    font-size: 1.5rem; font-weight: 700;
    background: linear-gradient(90deg, var(--partner-gold-deep), var(--partner-accent-strong));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.pp-auth-platform { text-align: center; font-size: 0.8rem; margin: 0 0 1.25rem; }
.pp-auth-submit { background: var(--partner-accent); color: #fff; }
.pp-auth-submit:hover { background: var(--partner-accent-strong); opacity: 1; }

/* Logout form wraps an icon button inside the flex header — keep it layout-transparent. */
.pp-logout-form { display: contents; }

/* === Partner Setup wizard (/partner-portal/setup) === */

.pp-setup-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--background), var(--secondary));
    display: flex; flex-direction: column;
}
.pp-setup-loading { display: flex; align-items: center; justify-content: center; padding: 6rem 1.5rem; }

.pp-setup-topbar { position: sticky; top: 0; z-index: 30; background: var(--card); }
.pp-setup-topbar-inner {
    max-width: 80rem; margin: 0 auto; height: 4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 1.5rem;
}
.pp-setup-brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.pp-setup-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.pp-setup-title { font-weight: 700; font-size: 0.95rem; }
.pp-setup-subtitle { font-size: 0.75rem; }
.pp-setup-topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.pp-setup-saving { font-size: 0.78rem; }
.pp-setup-progress { height: 6px; background: var(--muted); }
.pp-setup-progress-fill { height: 100%; background: var(--primary); transition: width 300ms ease; }

.pp-setup-main {
    width: 100%; max-width: 64rem; margin: 0 auto;
    padding: 2.5rem 1.5rem 3.5rem;
    display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.75rem;
    align-items: start;
}

/* Left stepper */
.pp-setup-steps { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 5.5rem; }
.pp-setup-step {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.8rem; border: none; border-radius: 0.5rem;
    background: transparent; color: var(--foreground);
    font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
    transition: background 120ms ease;
}
.pp-setup-step:hover { background: var(--muted); }
.pp-setup-step.is-current { background: var(--partner-soft); font-weight: 600; }
.pp-setup-step-badge {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--muted); color: var(--muted-foreground);
    font-size: 0.72rem; font-weight: 600;
}
.pp-setup-step.is-current .pp-setup-step-badge { background: var(--partner-accent); color: #fff; }
.pp-setup-step.is-done .pp-setup-step-badge { background: var(--status-success); color: #fff; }

/* Card */
.pp-setup-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 0.75rem; box-shadow: var(--shadow-sm);
}
.pp-setup-card-head { padding: 1.5rem 1.75rem 0; }
.pp-setup-card-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.pp-setup-card-sub { margin: 0.25rem 0 0; font-size: 0.875rem; }
.pp-setup-card-body { padding: 1.25rem 1.75rem 1.75rem; }
.pp-setup-req { color: var(--destructive); }
.pp-setup-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* Footer nav */
.pp-setup-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.pp-setup-nav-right { display: flex; align-items: center; gap: 1rem; }
.pp-setup-ghost-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem; border: none; border-radius: var(--radius);
    background: transparent; color: var(--muted-foreground);
    font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.pp-setup-ghost-btn:hover:not(:disabled) { color: var(--foreground); }
.pp-setup-ghost-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pp-setup-continue {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.1rem; border: none; border-radius: var(--radius);
    background: var(--partner-accent); color: #fff;
    font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 120ms ease, opacity 120ms ease;
}
.pp-setup-continue:hover:not(:disabled) { background: var(--partner-accent-strong); }
.pp-setup-continue:disabled { opacity: 0.5; cursor: not-allowed; }

/* Toggle cards (team notify, revisit reminders) */
.pp-setup-toggle-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.85rem 1rem; border: 1px solid var(--partner-outline);
    background: var(--partner-soft-hover); border-radius: 0.6rem;
}
.pp-setup-toggle-card--plain { background: var(--card); border-color: var(--border); margin-top: 1rem; }
.pp-setup-toggle-text { display: flex; align-items: flex-start; gap: 0.6rem; }
.pp-setup-toggle-icon { color: var(--partner-accent-strong); margin-top: 2px; }
.pp-setup-toggle-title { font-weight: 600; font-size: 0.9rem; }
.pp-setup-toggle-sub { font-size: 0.8rem; }
.pp-setup-toggle-card .ea-switch { cursor: pointer; }

/* Member / client rows + inline add form */
.pp-setup-member-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pp-setup-member-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 0.6rem;
}
.pp-setup-member-avatar {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--partner-soft); color: var(--partner-accent-deep);
    font-size: 0.75rem; font-weight: 700;
}
.pp-setup-member-avatar--org { border-radius: 0.5rem; }
.pp-setup-member-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-setup-member-name { font-weight: 600; font-size: 0.875rem; }
.pp-setup-member-sub { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-setup-row-remove {
    flex: none; display: inline-grid; place-items: center;
    width: 26px; height: 26px; border: none; border-radius: 0.4rem;
    background: transparent; color: var(--muted-foreground); cursor: pointer;
}
.pp-setup-row-remove:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.pp-setup-add-form {
    border: 1px dashed var(--border); border-radius: 0.6rem;
    padding: 1rem; background: var(--background);
}

/* Service line cards */
.pp-setup-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.pp-setup-service-card {
    position: relative; display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 0.6rem;
    background: var(--card); color: var(--foreground);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.pp-setup-service-card:hover { border-color: var(--partner-outline); }
.pp-setup-service-card.is-selected {
    border-color: var(--partner-accent); background: var(--partner-soft-hover);
    box-shadow: 0 0 0 1px var(--partner-accent);
}
.pp-setup-service-check { position: absolute; top: 0.7rem; right: 0.7rem; color: var(--partner-accent-strong); }
.pp-setup-service-title { font-weight: 600; font-size: 0.9rem; padding-right: 1.5rem; }
.pp-setup-service-desc { font-size: 0.8rem; }

/* Tier cards */
.pp-setup-tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pp-setup-tier-card {
    display: flex; flex-direction: column; gap: 0.8rem;
    padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: 0.75rem;
    background: var(--card); color: var(--foreground);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.pp-setup-tier-card:hover { border-color: var(--partner-outline); }
.pp-setup-tier-card.is-selected {
    border-color: var(--partner-accent); background: var(--partner-soft-hover);
    box-shadow: 0 0 0 1px var(--partner-accent);
}
.pp-setup-tier-head { display: flex; align-items: center; gap: 0.5rem; }
.pp-setup-tier-star { color: var(--muted-foreground); }
.pp-setup-tier-star--on { color: var(--partner-accent); }
.pp-setup-tier-title { font-weight: 700; font-size: 0.95rem; flex: 1; }
.pp-setup-tier-badge {
    padding: 0.15rem 0.6rem; border-radius: 9999px;
    background: var(--partner-accent); color: #fff;
    font-size: 0.7rem; font-weight: 600;
}
.pp-setup-tier-features { display: flex; flex-direction: column; gap: 0.4rem; }
.pp-setup-tier-feature { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.83rem; }
.pp-setup-tier-feature-check { color: var(--status-success); flex: none; margin-top: 1px; }

/* Branding step */
.pp-setup-color-row { display: flex; align-items: center; gap: 0.5rem; }
/* The swatch is the color: strip the native inner-rectangle chrome so the whole
   rounded box fills with the picked value. */
.pp-setup-color-swatch {
    appearance: none; -webkit-appearance: none;
    flex: none; width: 46px; height: 36px; padding: 0;
    border: 1px solid var(--input); border-radius: 0.5rem;
    background: none; cursor: pointer; overflow: hidden;
}
.pp-setup-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.pp-setup-color-swatch::-webkit-color-swatch { border: none; border-radius: 0.45rem; }
.pp-setup-color-swatch::-moz-color-swatch { border: none; border-radius: 0.45rem; }
.pp-setup-file-row { display: flex; align-items: center; gap: 0.65rem; min-height: 36px; }
.pp-setup-file-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--foreground);
    font-size: 0.875rem; font-weight: 500; cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.pp-setup-file-btn:hover { background: var(--partner-soft-hover); border-color: var(--partner-outline); }
.pp-setup-file-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); border: 0;
}
.pp-setup-file-btn:has(.pp-setup-file-input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.pp-setup-file-name { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-setup-logo-preview {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem;
}
.pp-setup-logo-preview img {
    max-height: 44px; max-width: 160px;
    background: #fff; padding: 5px; border: 1px solid var(--border); border-radius: 6px;
}

/* Review step */
.pp-setup-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.pp-setup-review-tile {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 0.6rem;
}
.pp-setup-review-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pp-setup-review-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; }
.pp-setup-review-value { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-setup-review-edit {
    flex: none; border: none; background: transparent; color: var(--foreground);
    font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
.pp-setup-review-edit:hover { color: var(--partner-accent-strong); }
.pp-setup-consents { display: flex; flex-direction: column; gap: 0.35rem; }
.pp-setup-checkline {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: 0.875rem; cursor: pointer;
}
.pp-setup-checkline input { margin-top: 3px; cursor: pointer; }

@media (max-width: 860px) {
    .pp-setup-main { grid-template-columns: 1fr; }
    .pp-setup-steps { position: static; flex-direction: row; flex-wrap: wrap; }
    .pp-setup-grid-2, .pp-setup-service-grid, .pp-setup-tier-grid, .pp-setup-review-grid { grid-template-columns: 1fr; }
}

/* === Partner Portal setup gate (locked state + reminder banner) === */

.pp-gate-banner {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
    padding: 1.1rem 1.35rem;
    background: var(--card); border: 1px solid var(--partner-outline);
    border-radius: 0.75rem; box-shadow: var(--shadow-sm);
}
.pp-gate-banner-left { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; flex: 1; }
.pp-gate-banner-icon {
    flex: none; width: 38px; height: 38px; border-radius: 0.6rem;
    display: inline-grid; place-items: center; font-size: 1.15rem;
    background: var(--partner-soft); color: var(--partner-accent-deep);
}
.pp-gate-banner-body { min-width: 0; flex: 1; }
.pp-gate-banner-title { margin: 0; font-size: 1rem; font-weight: 700; }
.pp-gate-banner-sub { margin: 0.2rem 0 0; font-size: 0.85rem; }
.pp-gate-banner-bar { height: 6px; border-radius: 9999px; background: var(--muted); margin-top: 0.7rem; overflow: hidden; }
.pp-gate-banner-fill { height: 100%; background: var(--primary); transition: width 300ms ease; }
.pp-gate-banner-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.pp-gate-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.65rem; border-radius: 9999px;
    border: 1px solid var(--border); background: var(--card);
    font-size: 0.75rem; color: var(--muted-foreground);
}
.pp-gate-chip.is-done {
    border-color: var(--status-success-border); background: var(--status-success-bg);
    color: var(--status-success-fg);
}
.pp-gate-banner-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.pp-gate-resume {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.05rem; border: none; border-radius: var(--radius);
    background: var(--partner-accent); color: #fff;
    font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; box-shadow: var(--shadow-sm);
}
.pp-gate-resume:hover { background: var(--partner-accent-strong); }
.pp-gate-dismiss {
    display: inline-grid; place-items: center; width: 30px; height: 30px;
    border: none; border-radius: 0.4rem; background: transparent;
    color: var(--muted-foreground); cursor: pointer;
}
.pp-gate-dismiss:hover { background: var(--muted); color: var(--foreground); }

.pp-gate-locked-note {
    margin-top: 1rem; padding: 1rem 1.25rem;
    border: 1px dashed var(--border); border-radius: 0.75rem;
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--muted-foreground); font-size: 0.875rem;
}

/* === Deliverable detail: inline edit card, AI analysis, document preview === */

.pp-edit-card {
    border: 1px solid var(--partner-outline); border-radius: var(--radius);
    padding: 1rem 1.1rem; margin-bottom: 1.25rem;
    display: flex; flex-direction: column; gap: 0.9rem;
}
.pp-edit-card-title {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.9rem; font-weight: 600; margin: 0;
}
.pp-edit-card .pp-form-field { margin-bottom: 0; }
.pp-featured-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem;
}
.pp-featured-row .ea-switch, .pp-recurring-box .ea-switch { cursor: pointer; }
.pp-attach-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem;
    margin-bottom: 0.45rem;
}
.pp-attach-row--staged { border-style: dashed; border-color: var(--partner-outline); background: var(--partner-soft-hover); }
.pp-attach-add { align-self: flex-start; cursor: pointer; }

.pp-ai-card {
    border: 1px solid var(--partner-outline); border-radius: var(--radius);
    background: linear-gradient(135deg, var(--partner-soft-hover), color-mix(in srgb, var(--partner-soft) 45%, var(--card)));
    padding: 1rem 1.1rem; margin: 1.25rem 0;
}
.pp-ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; }
.pp-ai-regen { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
.pp-ai-sep { border-top: 1px solid var(--border); margin: 0.8rem 0; }
.pp-ai-h { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; margin: 0 0 0.4rem; }
.pp-ai-p { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.85rem; color: var(--muted-foreground); margin: 0; }
.pp-ai-li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--muted-foreground); margin: 0.15rem 0; }
.pp-ai-li-marker { flex: none; font-weight: 600; }
.pp-ai-ic-green { color: var(--status-success); }
.pp-ai-ic-amber { color: var(--partner-accent-strong); }
.pp-ai-ic-orange { color: var(--status-caution); }
.pp-ai-rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.pp-ai-rel { padding: 0.7rem 0.8rem; border-radius: 0.5rem; }
.pp-ai-rel p { margin: 0.25rem 0 0; font-size: 0.78rem; }
.pp-ai-rel-title { display: flex; align-items: center; gap: 0.3rem; margin: 0; font-size: 0.75rem; font-weight: 600; }
.pp-ai-rel--short { background: var(--status-info-bg); color: var(--status-info-fg); }
.pp-ai-rel--long {
    background: color-mix(in srgb, #8b5cf6 12%, var(--card));
    color: color-mix(in srgb, #8b5cf6 72%, #000);
}
@media (max-width: 720px) {
    .pp-ai-rel-grid { grid-template-columns: 1fr; }
}

.pp-spin { animation: pp-spin 1s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

.pp-form-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .pp-form-3col { grid-template-columns: 1fr; } }

/* Calendar events open a detail popup — rows and chips are clickable. */
.pp-cal-event { cursor: pointer; }
.pp-cal-event:hover { background: var(--partner-soft-hover); }

.pp-preview-backdrop { z-index: 120; }
.pp-preview-dialog {
    width: min(920px, 94vw); height: 88vh;
    display: flex; flex-direction: column; overflow: hidden; padding: 0;
}
.pp-preview-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border);
}
.pp-preview-frame { flex: 1; width: 100%; border: 0; background: var(--secondary); }

@media (max-width: 760px) {
    .pp-gate-banner { flex-direction: column; }
    .pp-gate-banner-actions { align-self: flex-end; }
}
/* ---------- Document viewer (TOC rail + body) ---------- */
.doc-viewer {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.25rem; align-items: start;
}
.doc-viewer--full { grid-template-columns: minmax(0, 1fr); }

.doc-viewer-rail {
    position: sticky; top: 1rem;
    max-height: calc(100vh - 8rem); overflow-y: auto;
    border-right: 1px solid var(--border); padding-right: 0.9rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.doc-viewer-rail-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted-foreground);
    margin: 0 0 0.25rem;
}
.doc-viewer-toc { display: flex; flex-direction: column; gap: 0.1rem; }
.doc-viewer-toc-btn {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    padding: 0.3rem 0.45rem; border-radius: 0.4rem;
    font-size: 0.85rem; color: var(--muted-foreground);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-viewer-toc-btn:hover { background: var(--secondary); color: var(--foreground); }
.doc-viewer-toc-btn--l2 { padding-left: 1.2rem; }
.doc-viewer-toc-btn--l3 { padding-left: 1.95rem; }
.doc-viewer-rail-empty { font-size: 0.85rem; color: var(--muted-foreground); }
.doc-viewer-rail-note { font-size: 0.75rem; color: var(--muted-foreground); margin: 0.25rem 0 0; }

.doc-viewer-body { min-width: 0; }
.doc-viewer-frame {
    width: 100%; height: 72vh; display: block;
    border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--card);
}

@media (max-width: 900px) {
    .doc-viewer { grid-template-columns: 1fr; }
    .doc-viewer-rail {
        position: static; max-height: 14rem;
        border-right: none; border-bottom: 1px solid var(--border);
        padding-right: 0; padding-bottom: 0.75rem;
    }
}

/* Access Control: clickable role card + Access Rules list */
button.docs-access-role-card { width: 100%; text-align: left; cursor: pointer; font: inherit; background: var(--card); }
.docs-access-role-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.docs-access-rules { display: flex; flex-direction: column; gap: 0.75rem; }
.docs-access-rule { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 0.9rem; }
.docs-access-rule-head { display: flex; align-items: center; justify-content: space-between; }
.docs-access-rule-name { font-weight: 700; }
.docs-access-rule-desc { margin: 0.15rem 0 0.4rem; }

/* Risk Appetite: number textbox alongside each slider */
.ra-slider-row { display: flex; align-items: center; gap: 0.6rem; }
.ra-slider-row .ra-range { flex: 1; min-width: 0; }
.ra-num { width: 4.75rem; flex: none; text-align: right; padding: 0.3rem 0.4rem; }


/* CEO Search (board side): the voting page is reached by button — the raw URL is never printed. */
.ces-vote-btn { display: inline-flex; justify-content: center; width: 100%; margin-top: 0.5rem; }

/* Plan changes are reviewed before they apply: list price on each tier card, facts in the confirm panel. */
.billing-tier-price { font-weight: 600; font-size: 0.95rem; margin: 0.15rem 0 0.6rem; }
.st-tier-confirm { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.st-tier-confirm-facts { margin: 0.45rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.45; }
.st-tier-confirm-facts li + li { margin-top: 0.2rem; }

/* CEO scorecard import preview: the page's overlay card, sized for a review table. */
.ceo-import-dialog { max-width: 960px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.ceo-import-body { overflow-y: auto; }
.ceo-import-summary { font-weight: 600; margin: 0 0 0.5rem; }
.ceo-import-heading { margin: 1rem 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.ceo-import-scroll { overflow-x: auto; }
.ceo-import-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ceo-import-table th { text-align: left; font-weight: 600; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--muted-foreground); white-space: nowrap; }
.ceo-import-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.ceo-import-row--skip td { opacity: 0.6; }
.ceo-import-ok { color: var(--status-success-fg); font-weight: 600; }
.ceo-import-skip { color: var(--status-danger-fg); font-weight: 600; }

/* CEO evaluation: the signed-in evaluator's standing, per-area progress, and roster self-enrollment. */
.ceo-eval-me { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--secondary); }
.ceo-eval-me--outside { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ceo-eval-me-track { max-width: 24rem; }
.ceo-subtab-count { margin-left: 0.4rem; font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--secondary); color: var(--muted-foreground); }
.ceo-subtab-count--done { background: var(--status-success-bg); color: var(--status-success-fg); }
.ceo-you-pill { margin-left: 0.4rem; font-size: 0.7rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--status-info-bg); color: var(--status-info-fg); vertical-align: middle; }
.ceo-eval-saved { margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* CEO evaluation report: readiness checklist and the generate dialog. */
.ceo-report-dialog { max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; }
.ceo-readiness-ok { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: var(--status-success-bg); color: var(--status-success-fg); font-size: 0.9rem; }
.ceo-readiness-list { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.5; }
.ceo-report-contents { margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted-foreground); }

/* In-dialog PDF preview rendered by js/pdfPreview.js. */
.ceo-report-dialog--preview { max-width: 980px; }
.ceo-report-type-row { max-width: 26rem; }
.ceo-report-preview-head { margin: 1rem 0 0.4rem; }
.ceo-report-preview {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    max-height: 60vh; overflow-y: auto; padding: 12px;
    background: var(--secondary); border: 1px solid var(--border); border-radius: 0.5rem;
}
.ceo-report-preview canvas { display: block; background: #fff; box-shadow: var(--shadow-sm); }

/* Vote step while a meeting is not Live: the reason ballots are closed and the action that opens them. */
.md-ballots-closed {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
    margin-top: 0.4rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem;
    background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3);
}
.md-ballots-closed-text { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem; line-height: 1.4; color: var(--status-warning-fg); }
.md-ballots-closed-text svg { flex: none; margin-top: 0.1rem; }
.md-ballots-closed .btn { white-space: nowrap; }

/* Platform Administration > Users: the vendor-only role is granted deliberately, apart from tenant roles. */
.admin-platform-role { gap: 0.45rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--secondary); }
.admin-platform-role--on { border-color: var(--status-warning-border); }
.admin-platform-role-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.admin-platform-role-note { margin: 0; line-height: 1.4; }
.admin-platform-role-confirm { margin: 0.25rem 0 0; display: block; }
.admin-platform-role-confirm p { margin: 0 0 0.5rem; font-size: 0.85rem; }
.admin-platform-role-ack { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.admin-platform-role-ack input { margin-top: 0.2rem; flex: none; }

/* Settings > Users & Roles > Invite New User: pre-send delivery note and the in-place outcome. */
.st-invite-note { margin-bottom: 0.75rem; font-size: 0.85rem; }
.st-invite-result { padding: 0.9rem 1rem; border-radius: 0.6rem; border: 1px solid var(--border); background: var(--secondary); }
.st-invite-result--success { background: var(--status-success-bg); border-color: var(--status-success-border); color: var(--status-success-fg); }
.st-invite-result--warn { background: var(--status-warning-bg); border-color: var(--status-warning-border); color: var(--status-warning-fg); }
.st-invite-result--danger { background: var(--status-danger-bg); border-color: var(--status-danger-border); color: var(--status-danger-fg); }
.st-invite-result p { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.5; }
.st-invite-link { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.st-invite-link code { flex: 1; font-size: 0.75rem; word-break: break-all; background: var(--card); color: var(--foreground); padding: 0.4rem 0.5rem; border-radius: 0.4rem; border: 1px solid var(--border); }
.st-invite-manage { margin-right: auto; font-size: 0.85rem; }

/* Board Structure: directory types, role review flags and the Add/Edit Person dialog. */
.bm-badge--cat-board-director { color: var(--status-info-fg); }
.bm-badge--cat-credit-union-staff { color: hsl(262, 70%, 40%); }
.bm-badge--warn { background: rgba(245, 158, 11, 0.12); color: hsl(28, 80%, 32%); border-color: rgba(245, 158, 11, 0.4); display: inline-flex; align-items: center; gap: 0.25rem; }
.bm-badge--retired { background: hsl(220, 15%, 92%); color: hsl(220, 15%, 40%); }
.bm-chip-role { opacity: 0.75; font-weight: 500; }
.bm-directory-problems { margin: 0 0 1rem; }
.bm-person-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.bm-person-types--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .bm-person-types { grid-template-columns: 1fr; } }
.bm-person-type { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 0.6rem; cursor: pointer; background: var(--card); }
.bm-person-type--on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.bm-person-type input { position: absolute; opacity: 0; pointer-events: none; }
.bm-person-type-label { font-weight: 600; font-size: 0.9rem; color: var(--foreground); }
.bm-person-type-hint { font-size: 0.78rem; line-height: 1.35; color: var(--muted-foreground); }
.bm-person-rows { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0 0.6rem; }
.bm-person-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.bm-person-row--problem select[aria-label="Committee role"] { border-color: rgba(245, 158, 11, 0.7); }
.bm-person-row-problem { grid-column: 1 / -1; margin: -0.15rem 0 0; font-size: 0.78rem; color: hsl(28, 80%, 32%); display: flex; align-items: center; gap: 0.3rem; }
.bm-modal-foot--split { justify-content: space-between; }
.bm-committee-card-tools { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.bm-committee-card-tools .btn { margin-left: 0.35rem; }
.bm-iconbtn-ghost:disabled { opacity: 0.35; cursor: default; }
.bm-committees-hint { margin: -0.5rem 0 1rem; font-size: 0.85rem; line-height: 1.45; }

/* Board Calendar filters: committee names that survive only on stored events, and the structure hint. */
.cal-filter-sublabel { margin-top: 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-foreground); }
.cal-filter-check--legacy span { color: var(--muted-foreground); }
.cal-filter-hint { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.35; }
.cal-editor-hint { font-size: 0.78rem; color: var(--muted-foreground); }

/* Onboarding wizard: the step's requirement, stated where the user is working, not only at the Continue button. */
.ob-requirement { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; font-size: 0.88rem; line-height: 1.4; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); color: hsl(28, 80%, 30%); }
.ob-requirement.is-met { background: hsl(150, 60%, 94%); border-color: hsl(150, 50%, 75%); color: hsl(150, 70%, 24%); }
.ob-requirement-note { font-size: 0.8rem; opacity: 0.9; }
.ob-label-hint.is-warn { color: hsl(28, 80%, 32%); }

/* Onboarding Step 1: format errors sit under the field they belong to. */
.ob-label-hint.is-error { color: hsl(0, 65%, 42%); }
.ob-input.is-invalid, .ob-input.is-invalid:focus { border-color: hsl(0, 70%, 60%); box-shadow: 0 0 0 2px hsla(0, 70%, 60%, 0.18); }
.ob-inline-fix { background: none; border: 0; padding: 0; margin-left: 0.3rem; color: var(--primary); font: inherit; text-decoration: underline; cursor: pointer; }

/* Onboarding Step 4: the target a credit union sets and the ratio it actually reports, side by side. */
.ob-asof { display: flex; flex-direction: column; gap: 0.3rem; }
.ob-metric-block { padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); }
.ob-metric-block + .ob-metric-block { margin-top: 0.6rem; }
.ob-metric-block--current { background: hsl(220, 14%, 98%); }
.ob-metric-block-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.ob-metric-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--foreground); }
.ob-metric-kicker-hint { font-size: 0.75rem; color: var(--muted-foreground); }
.ob-metric-compare--ok { color: hsl(150, 70%, 26%); }
.ob-metric-compare--gap { color: hsl(28, 80%, 32%); }

/* ---- Custom dashboard tabs (executive_dashboard.custom_tabs) ---- */
/* Drag affordances mirror the Organize dialog's rows so reordering feels the same everywhere. */
.tab-trigger.dragging { opacity: 0.5; }
.tab-trigger.drag-over { box-shadow: 0 0 0 1px var(--primary) inset; }
.tab-trigger--add { padding: 0.45rem 0.6rem; color: var(--muted-foreground); }
.tab-trigger--add:hover { background: var(--card); color: var(--foreground); }

/* Positioning context for the per-card remove button on a metrics tab. */
.tab-card-slot { position: relative; }
.tab-card-slot.dragging { opacity: 0.5; }
.tab-card-slot.drag-over { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 0.6rem; }
.tab-card-slot[draggable="true"] { cursor: grab; }
/* The MetricCard header ends with its status badge ("Compliance", "Breach", …), so the header
   reserves the button's footprint rather than letting it sit on top of the badge. */
.tab-card-remove {
    position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
    width: 26px; height: 26px; border-radius: 9999px;
    background: var(--card);
}
.tab-card-slot .metric-card .metric-card-header { padding-right: 1.6rem; }

.tab-picker-list {
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: 22rem; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 0.55rem; padding: 0.4rem;
}
.tab-picker-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.55rem; border-radius: 0.4rem; cursor: pointer;
}
.tab-picker-row:hover { background: var(--secondary); }
.tab-picker-row--on { opacity: 0.65; cursor: default; }
.tab-picker-row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.tab-picker-row-name { font-size: 0.88rem; font-weight: 500; }
.tab-picker-row-detail { font-size: 0.75rem; }