/* ═══════════════════════════════════════════════════════════════
   executive.css — IO Passport Executive View
   Dark command-centre theme. All classes prefixed .ex-
   Three-tab layout: Attention Sorting | Pick Next | This Week
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --ex-bg:           #0b0b0d;
    --ex-surface:      #111116;
    --ex-card:         #18181e;
    --ex-card-hov:     #1f1f27;
    --ex-border:       #232329;
    --ex-border-hi:    #35353f;
    --ex-text:         #f2f2f5;
    --ex-sub:          #8b8b99;
    --ex-line-item:    #ffffff;
    --ex-dim:          #7a7a8c;
    --ex-accent:       #f0b429;
    --ex-accent-dim:   rgba(240,180,41,.13);
    --ex-accent-dark:  #c48f1a;
    --ex-danger:       #ef4444;
    --ex-danger-dim:   rgba(239,68,68,.12);
    --ex-success:      #22c55e;
    --ex-blue:         #3b82f6;
    --ex-purple:       #8b5cf6;
    --ex-radius:       7px;
    --ex-radius-sm:    4px;
    --ex-topbar-h:     54px;
    --ex-sidebar-w:    320px;
    --ex-font:         -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

    /* ── Flightboard card state colours ────────────────────────
       Three-layer pattern: -dark / -light raw values; active pointer
       set to dark by default, flipped to light in body.light-mode.   */
    --fbrd-done-title-dark:    #86efac;        /* pastel green — readable on dark */
    --fbrd-done-title-light:   #15803d;        /* deep green   — readable on white */
    --fbrd-done-title:         var(--fbrd-done-title-dark);

    --fbrd-done-bg-dark:       rgba(34, 197, 94, 0.07);
    --fbrd-done-bg-light:      rgba(34, 197, 94, 0.10);
    --fbrd-done-bg:            var(--fbrd-done-bg-dark);

    --fbrd-done-border-dark:   rgba(34, 197, 94, 0.25);
    --fbrd-done-border-light:  rgba(34, 197, 94, 0.40);
    --fbrd-done-border:        var(--fbrd-done-border-dark);

    --fbrd-blocked-title-dark:  #fca5a5;       /* pastel red  — readable on dark */
    --fbrd-blocked-title-light: #b91c1c;       /* deep red    — readable on white */
    --fbrd-blocked-title:       var(--fbrd-blocked-title-dark);

    --fbrd-blocked-bg-dark:     rgba(239, 68, 68, 0.07);
    --fbrd-blocked-bg-light:    rgba(239, 68, 68, 0.10);
    --fbrd-blocked-bg:          var(--fbrd-blocked-bg-dark);

    --fbrd-blocked-border-dark:  rgba(239, 68, 68, 0.25);
    --fbrd-blocked-border-light: rgba(239, 68, 68, 0.40);
    --fbrd-blocked-border:       var(--fbrd-blocked-border-dark);
}

/* ── Reset ──────────────────────────────────────────────────── */
.ex-shell *, .ex-shell *::before, .ex-shell *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Base canvas — match theme so mobile overscroll gaps are dark/light ── */
html                      { background: #0b0b0d; }   /* dark default */
html:has(body.light-mode) { background: #f7f6f4; }   /* light mode */
body                      { background: var(--ex-bg); }

/* ── Shell ──────────────────────────────────────────────────── */
.ex-shell {
    min-height: 100vh;
    background: var(--ex-bg);
    color: var(--ex-text);
    font-family: var(--ex-font);
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.ex-topbar {
    height: var(--ex-topbar-h);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--ex-border);
    background: var(--ex-surface);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.ex-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ex-logo-mark {
    width: 28px;
    height: 28px;
    background: var(--ex-accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    color: #000;
    letter-spacing: -.5px;
}
.ex-logo-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ex-text);
}

/* ── Tab navigation ─────────────────────────────────────────── */
.ex-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.ex-tab {
    padding: 6px 14px;
    border-radius: var(--ex-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-sub);
    cursor: pointer;
    border: none;
    background: none;
    transition: color .15s, background .15s;
    white-space: nowrap;
}
.ex-tab:hover { color: var(--ex-text); background: rgba(255,255,255,.04); }
.ex-tab.active {
    color: var(--ex-accent);
    background: var(--ex-accent-dim);
    font-weight: 600;
}

/* ── Topbar meta (right side) ───────────────────────────────── */
.ex-topbar-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    margin-left: auto;
}
.ex-attention-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-text);
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}
.ex-attention-pill #exLoadCount {
    font-weight: 700;
    color: var(--ex-accent);
}
.ex-status-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    border: 1px solid var(--ex-border);
    padding: 3px 8px;
    border-radius: var(--ex-radius-sm);
}
.ex-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ex-accent-dim);
    border: 1px solid var(--ex-accent);
    color: var(--ex-accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Body layout ────────────────────────────────────────────── */
.ex-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.ex-main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-border) transparent;
}
.ex-sidebar {
    width: var(--ex-sidebar-w);
    min-width: var(--ex-sidebar-w);
    border-left: 1px solid var(--ex-border);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-border) transparent;
    background: var(--ex-surface);
}

/* ══════════════════════════════════════════════════════════════
   Executive Layout (exl-*) — reusable dark-theme app shell
   Used by all new pages via layout/executive/template.php
   Variables: same --ex-* tokens as above
   ══════════════════════════════════════════════════════════════ */

/* ── Layout variables ─────────────────────────────────────── */
:root {
    --exl-sidebar-w:   220px;
    --exl-topbar-h:    52px;
}

/* ── Shell override for exl layout ───────────────────────── */
.ex-shell.exl-shell {
    display: grid;
    grid-template-rows: var(--exl-topbar-h) 1fr;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/* ── Topbar ─────────────────────────────────────────────── */
/* Reuses .ex-topbar — already defined above. Extra exl pieces: */
.exl-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.exl-menu-toggle {
    background: none;
    border: none;
    color: var(--ex-sub);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--ex-radius-sm);
    display: flex;
    align-items: center;
    transition: color .12s, background .12s;
    flex-shrink: 0;
}
.exl-menu-toggle:hover { color: var(--ex-text); background: rgba(255,255,255,.06); }
.exl-topbar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Product name — hidden on desktop (sidebar shows active page), shown on mobile */
.exl-product-name {
    display: none;   /* desktop: hidden */
    font-size: 14px;
    font-weight: 700;
    color: var(--ex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.2px;
}
.exl-topbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.exl-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.exl-topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    padding: 6px 12px;
    cursor: pointer;
    color: var(--ex-dim);
    font-size: 13px;
    font-family: var(--ex-font);
    transition: border-color .12s, background .12s;
}
.exl-topbar-search:hover { border-color: var(--ex-border-hi); background: rgba(255,255,255,.07); }
.exl-search-kbd {
    margin-left: 6px;
    font-size: 10px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--ex-dim);
}
.exl-capture-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ex-accent);
    color: #000;
    border: none;
    border-radius: var(--ex-radius-sm);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--ex-font);
    padding: 7px 14px;
    cursor: pointer;
    transition: background .12s;
    white-space: nowrap;
}
.exl-capture-btn:hover { background: var(--ex-accent-dark); }
.exl-avatar { cursor: pointer; }

/* ── Body ────────────────────────────────────────────────── */
.exl-body {
    display: flex;
    overflow: hidden;
    height: calc(100vh - var(--exl-topbar-h));
}

/* ── Sidebar ─────────────────────────────────────────────── */
.exl-sidebar {
    width: var(--exl-sidebar-w);
    min-width: var(--exl-sidebar-w);
    background: var(--ex-surface);
    border-right: 1px solid var(--ex-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-border) transparent;
    transition: width .2s, min-width .2s, opacity .2s;
    flex-shrink: 0;
}
.exl-shell.exl-sidebar-collapsed .exl-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
}
/* On desktop, exl-sidebar-collapsed must NEVER collapse the sidebar —
   the class is present in HTML by default to prevent the mobile overlay flash.
   JS removes it on desktop after scripts load; this rule ensures no flash. */
@media (min-width: 769px) {
    .exl-shell.exl-sidebar-collapsed .exl-sidebar {
        width: var(--exl-sidebar-w);
        min-width: var(--exl-sidebar-w);
        overflow-y: auto;
        opacity: 1;
    }
}
/* Desktop collapse — toggled by hamburger on desktop only.
   Uses a separate class so the anti-flash override above doesn't block it. */
@media (min-width: 769px) {
    .exl-shell.exl-sidebar-hidden .exl-sidebar {
        width: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
    }
}

.exl-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--ex-border);
    cursor: pointer;
    flex-shrink: 0;
}
.exl-logo-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ex-text);
    white-space: nowrap;
}

.exl-nav {
    flex: 1;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.exl-nav-section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    padding: 8px 8px 4px;
    margin-top: 4px;
}
.exl-nav-divider {
    height: 1px;
    background: var(--ex-border);
    margin: 6px 4px;
}
.exl-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--ex-radius-sm);
    color: var(--ex-sub);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s, color .12s;
    position: relative;
    white-space: nowrap;
}
.exl-nav-item:hover { background: rgba(255,255,255,.05); color: var(--ex-text); }
.exl-nav-item.active {
    background: var(--ex-accent-dim);
    color: var(--ex-accent);
    font-weight: 600;
}
.exl-nav-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.exl-nav-label { flex: 1; }
.exl-nav-badge {
    background: var(--ex-accent);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

/* ── Sidebar user block ──────────────────────────────────── */
.exl-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--ex-border);
    flex-shrink: 0;
}
.exl-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ex-accent-dim);
    color: var(--ex-accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.exl-user-info  { flex: 1; min-width: 0; }
.exl-user-name  { font-size: 12px; font-weight: 600; color: var(--ex-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exl-user-role  { font-size: 10px; color: var(--ex-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exl-logout-btn {
    background: none;
    border: none;
    color: var(--ex-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--ex-radius-sm);
    transition: color .12s;
    flex-shrink: 0;
}
.exl-logout-btn:hover { color: var(--ex-danger); }

/* ── Main content area ───────────────────────────────────── */
.exl-main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-border) transparent;
    display: flex;
    flex-direction: column;
}
.exl-subbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
    border-bottom: 1px solid var(--ex-border);
    background: var(--ex-surface);
    flex-shrink: 0;
}
.exl-page-content {
    padding: 28px;
    flex: 1;
}

/* ── User init helper (called from page JS) ──────────────── */
/* IOP.initExlUser(payload) sets name/avatar in the exl sidebar */

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .exl-sidebar { position: fixed; top: var(--exl-topbar-h); left: 0; bottom: 0; z-index: 200; }
    .exl-shell:not(.exl-sidebar-collapsed) .exl-sidebar { box-shadow: 4px 0 24px rgba(0,0,0,.4); }
    .exl-shell:not(.exl-sidebar-collapsed)::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 199;
    }
    .exl-capture-btn span:last-child { display: none; }
    .exl-topbar-search span:not(.exl-search-kbd) { display: none; }
}

/* ── Shared label / heading utilities ───────────────────────── */
.ex-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
}
.ex-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ex-text);
    line-height: 1.2;
}
.ex-section-sub {
    font-size: 13px;
    color: var(--ex-sub);
    margin-top: 4px;
}
.ex-divider {
    height: 1px;
    background: var(--ex-border);
}

/* ── Empty / loading states ─────────────────────────────────── */
.ex-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--ex-dim);
    font-size: 13px;
}
.ex-empty-icon { font-size: 32px; margin-bottom: 12px; }
.ex-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ex-border);
    border-top-color: var(--ex-accent);
    border-radius: 50%;
    animation: ex-spin .7s linear infinite;
}
@keyframes ex-spin { to { transform: rotate(360deg); } }

/* ── Buttons ────────────────────────────────────────────────── */
.ex-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--ex-radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .12s, color .12s, opacity .12s;
    white-space: nowrap;
    font-family: var(--ex-font);
}
.ex-btn:disabled { opacity: .45; cursor: default; }
.ex-btn-primary {
    background: var(--ex-accent);
    color: #000;
}
.ex-btn-primary:hover:not(:disabled) { background: var(--ex-accent-dark); }
.ex-btn-ghost {
    background: rgba(255,255,255,.06);
    color: var(--ex-text);
    border: 1px solid var(--ex-border-hi);
}
.ex-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.ex-btn-danger {
    background: var(--ex-danger-dim);
    color: var(--ex-danger);
    border: 1px solid transparent;
}
.ex-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.2); }
.ex-btn-sm { padding: 4px 10px; font-size: 11px; }
.ex-btn-lg { padding: 11px 22px; font-size: 14px; font-weight: 700; }

/* Keyboard shortcut hint inside a button */
.ex-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: rgba(255,255,255,.12);
    font-size: 10px;
    font-weight: 700;
    color: inherit;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FLIGHTBOARD — fbrd-* classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Shell: flex column filling exl-main ── */
.fbrd-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ── Hero ── */
.fbrd-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 28px 24px;
    flex-shrink: 0;
}
.fbrd-hero-left { flex: 1; min-width: 0; }
.fbrd-hero-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 8px;
}
.fbrd-breadcrumb {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 10px;
}
.fbrd-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ex-text);
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: 8px;
}
.fbrd-title-accent { color: var(--ex-accent); }
.fbrd-subtitle {
    font-size: 13px;
    color: var(--ex-sub);
    line-height: 1.6;
    max-width: 540px;
}
.fbrd-filter-group {
    display: flex;
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    overflow: hidden;
}
.fbrd-filter-btn {
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    border: none;
    border-right: 1px solid var(--ex-border-hi);
    background: var(--ex-surface);
    color: var(--ex-sub);
    font-family: var(--ex-font);
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.fbrd-filter-btn:last-child { border-right: none; }
.fbrd-filter-btn:hover { color: var(--ex-text); background: var(--ex-card); }
.fbrd-filter-btn.active {
    background: var(--ex-accent);
    color: #000;
}
.fbrd-stat-pill {
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ex-sub);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    background: var(--ex-surface);
    white-space: nowrap;
}
.fbrd-stat-pill .blocked { color: var(--ex-danger); }

/* ── Column visibility picker ── */
.fbrd-col-picker-wrap {
    position: relative;
}
.fbrd-col-picker-btn {
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    background: var(--ex-surface);
    color: var(--ex-sub);
    font-family: var(--ex-font);
    transition: background .12s, color .12s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fbrd-col-picker-btn:hover { color: var(--ex-text); background: var(--ex-card); }
.fbrd-col-picker-btn.open  { color: var(--ex-text); background: var(--ex-card); border-color: var(--ex-accent); }
.fbrd-col-picker-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius);
    padding: 6px;
    min-width: 200px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.fbrd-col-picker-dropdown.open { display: block; }
.fbrd-col-picker-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    padding: 4px 8px 8px;
}
.fbrd-col-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}
.fbrd-col-toggle:hover { background: rgba(255,255,255,.06); }
.fbrd-col-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fbrd-col-toggle-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-text);
}
.fbrd-col-toggle-check {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--ex-border-hi);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    color: #000;
    background: transparent;
    transition: background .1s, border-color .1s;
}
.fbrd-col-toggle.checked .fbrd-col-toggle-check {
    background: var(--ex-accent);
    border-color: var(--ex-accent);
}
.fbrd-col-toggle.checked .fbrd-col-toggle-check::after { content: '✓'; font-weight: 700; }

/* ── Board columns container ── */
.fbrd-board {
    flex: 1;
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 28px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-border) transparent;
    min-height: 480px;
}
.fbrd-loading {
    color: var(--ex-dim);
    font-size: 13px;
    padding: 40px;
    align-self: flex-start;
}

/* ── Single column ── */
.fbrd-col {
    flex: 1;
    min-width: 260px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    overflow: hidden;
    margin-right: 12px;
    background: var(--ex-surface);
}
.fbrd-col:last-child { margin-right: 0; }
.fbrd-col-top-border {
    height: 3px;
    flex-shrink: 0;
}
.fbrd-col-header {
    padding: 14px 16px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ex-border);
}
.fbrd-col-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.fbrd-col-num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ex-dim);
}
.fbrd-col-count {
    font-size: 14px;
    font-weight: 800;
    color: var(--ex-sub);
}
.fbrd-col-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--ex-text);
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 3px;
}
.fbrd-col-desc {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-dim);
}
.fbrd-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-border) transparent;
}
.fbrd-col-body.drag-over { background: var(--ex-accent-dim); }
.fbrd-col-empty {
    padding: 24px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--ex-dim);
}
.fbrd-col-add {
    flex-shrink: 0;
    border-top: 1px dashed var(--ex-border);
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-dim);
    cursor: pointer;
    text-align: center;
    letter-spacing: .04em;
    transition: color .12s, background .12s;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    font-family: var(--ex-font);
}
.fbrd-col-add:hover { color: var(--ex-text); background: rgba(255,255,255,.03); }

/* ── Card ── */
.fbrd-card {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    padding: 12px 12px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
}
.fbrd-card:hover { border-color: var(--ex-border-hi); background: var(--ex-card-hov); }
.fbrd-card.dragging { opacity: .4; }
.fbrd-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}
.fbrd-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-dim);
    overflow: hidden;
    min-width: 0;
}
.fbrd-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.fbrd-priority.p0 { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.35); }
.fbrd-priority.p1 { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.35); }
.fbrd-priority.p2 { background: rgba(59,130,246,.15); color: #3b82f6; border-color: rgba(59,130,246,.35); }
.fbrd-priority.p3 { background: rgba(82,82,96,.15);   color: var(--ex-dim); border-color: var(--ex-border); }
.fbrd-card-menu {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: none;
    border: none;
    color: var(--ex-dim);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--ex-font);
    letter-spacing: .05em;
    transition: color .12s, background .12s;
    padding: 0;
    opacity: 0;
}
.fbrd-card:hover .fbrd-card-menu { opacity: 1; }
.fbrd-card-menu:hover { color: var(--ex-text); background: var(--ex-border); }
.fbrd-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ex-text);
    line-height: 1.45;
    margin-bottom: 10px;
}
/* Done cards — green tint, no strikethrough */
.fbrd-card.done { background: var(--fbrd-done-bg); border-color: var(--fbrd-done-border); }
.fbrd-card.done .fbrd-card-title { color: var(--fbrd-done-title); }

/* Cancelled cards — muted + strikethrough */
.fbrd-card.cancelled .fbrd-card-title { color: var(--ex-dim); text-decoration: line-through; }

/* Blocked/Holding Pattern cards — red tint */
.fbrd-card.blocked { background: var(--fbrd-blocked-bg); border-color: var(--fbrd-blocked-border); }
.fbrd-card.blocked .fbrd-card-title { color: var(--fbrd-blocked-title); }

.fbrd-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ex-dim);
}
.fbrd-assignee {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-right: 2px;
}
.fbrd-assignee-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ex-border-hi);
    color: var(--ex-sub);
    font-size: 8px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    flex-shrink: 0;
}
.fbrd-due { margin-left: auto; white-space: nowrap; }
.fbrd-due.overdue { color: var(--ex-danger); }
.fbrd-due.due-today { color: var(--ex-accent); }
.fbrd-time-ago { white-space: nowrap; color: var(--ex-dim); }
.fbrd-dot { color: var(--ex-border-hi); }

/* ── Slide-in item panel (executive theme) ── */
.fbrd-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 300;
}
.fbrd-panel-backdrop.open { display: block; }
.fbrd-panel {
    position: fixed;
    top: 0;
    right: -560px;
    width: 540px;
    height: 100vh;
    background: var(--ex-card);
    border-left: 1px solid var(--ex-border-hi);
    z-index: 301;
    display: flex;
    flex-direction: column;
    transition: right .22s ease;
    overflow: hidden;
}
.fbrd-panel.open { right: 0; }
.fbrd-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ex-border);
    flex-shrink: 0;
    gap: 12px;
}
.fbrd-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ex-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fbrd-panel-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fbrd-panel-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--ex-dim); font-size: 16px;
    cursor: pointer; border-radius: 4px; font-family: var(--ex-font);
    transition: color .12s, background .12s;
}
.fbrd-panel-close:hover { color: var(--ex-text); background: var(--ex-border); }
.fbrd-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-border) transparent;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL — shared overlay + ex-modal shell
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.ex-modal {
    font-family: var(--ex-font);
    font-size: 14px;
    color: var(--ex-text);
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius);
    width: 420px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
}
.ex-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}
.ex-modal-title { font-size: 15px; font-weight: 700; color: var(--ex-text); }
.ex-modal-close {
    background: none;
    border: none;
    color: var(--ex-dim);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    font-family: var(--ex-font);
}
.ex-modal-close:hover { color: var(--ex-text); }
.ex-modal-subtitle {
    padding: 6px 24px 0;
    font-size: 12px;
    color: var(--ex-sub);
    line-height: 1.5;
}
.ex-modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ex-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--ex-border);
}
.ex-modal-error {
    font-size: 12px;
    color: var(--ex-danger);
    padding: 8px 12px;
    background: var(--ex-danger-dim);
    border-radius: var(--ex-radius-sm);
    line-height: 1.5;
}
.ex-modal-error.hidden { display: none; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
}
.field-opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-style: italic; margin-left: 4px; }
.form-input {
    background: var(--ex-bg);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ex-text);
    font-family: inherit;
    outline: none;
    width: 100%;
    transition: border-color .12s;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.form-input:focus { border-color: var(--ex-accent); }
.form-input::placeholder { color: var(--ex-dim); }
textarea.form-input { resize: vertical; min-height: 80px; }

/* ═══════════════════════════════════════════════════════════════
   CREW MANIFEST — crw-* classes
   ═══════════════════════════════════════════════════════════════ */

.crw-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
}
.crw-hero-left { flex: 1; min-width: 0; }
.crw-hero-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding-top: 6px;
}
.crw-breadcrumb {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 8px;
}
.crw-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--ex-text);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 10px;
}
.crw-subtitle {
    font-size: 13px;
    color: var(--ex-sub);
    line-height: 1.65;
    max-width: 540px;
}
.crw-total-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    padding: 8px 16px;
    min-width: 76px;
}
.crw-total-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-dim);
    line-height: 1;
    margin-bottom: 2px;
}
.crw-total-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--ex-text);
    line-height: 1.1;
}
.crw-divider {
    border: none;
    border-top: 1px solid var(--ex-border);
    margin-bottom: 22px;
}

/* ── Filter pills + search bar ── */
.crw-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.crw-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.crw-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-sub);
    background: none;
    border: 1px solid var(--ex-border);
    cursor: pointer;
    transition: all .12s;
    font-family: var(--ex-font);
    white-space: nowrap;
}
.crw-pill span { font-size: 11px; font-weight: 700; }
.crw-pill:hover { color: var(--ex-text); border-color: var(--ex-border-hi); }
.crw-pill.active {
    color: var(--ex-accent);
    border-color: var(--ex-accent);
    background: var(--ex-accent-dim);
}
.crw-search {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--ex-text);
    font-family: var(--ex-font);
    outline: none;
    width: 280px;
    transition: border-color .12s;
}
.crw-search:focus { border-color: var(--ex-accent); }
.crw-search::placeholder { color: var(--ex-dim); }

/* ── Table ── */
.crw-table-wrap {
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    overflow: hidden;
}
.crw-table { width: 100%; border-collapse: collapse; }
.crw-th {
    padding: 10px 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    text-align: left;
    background: var(--ex-surface);
    border-bottom: 1px solid var(--ex-border);
    white-space: nowrap;
}
.crw-th-num { width: 70px; text-align: center; }
.crw-th-via { min-width: 160px; }
.crw-th-actions { width: 1px; }
.crw-td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--ex-border);
    vertical-align: middle;
    color: var(--ex-text);
    font-size: 13px;
}
.crw-table tbody tr:last-child .crw-td { border-bottom: none; }
.crw-table tbody tr:hover .crw-td { background: var(--ex-card-hov); }

/* ── Row cells ── */
.crw-member-cell { display: flex; align-items: center; gap: 12px; }
.crw-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border-hi);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ex-sub);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.crw-name { font-size: 14px; font-weight: 600; color: var(--ex-text); line-height: 1.2; }
.crw-name-none { font-size: 13px; color: var(--ex-dim); font-style: italic; }
.crw-email { font-family: 'SF Mono','Fira Code',monospace; font-size: 12px; color: var(--ex-sub); }
.crw-email-add {
    font-size: 12px;
    color: var(--ex-accent);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--ex-font);
}
.crw-email-add:hover { text-decoration: underline; }

.crw-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
.crw-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.crw-status.s-active {
    background: rgba(34,197,94,.12);
    color: var(--ex-success);
    border: 1px solid rgba(34,197,94,.25);
}
.crw-status.s-active .crw-status-dot { background: var(--ex-success); }
.crw-status.s-invited {
    background: var(--ex-accent-dim);
    color: var(--ex-accent);
    border: 1px solid rgba(240,180,41,.3);
}
.crw-status.s-invited .crw-status-dot { background: var(--ex-accent); }
.crw-status.s-uninvited {
    background: transparent;
    color: var(--ex-dim);
    border: 1px solid var(--ex-border);
}
.crw-status.s-uninvited .crw-status-dot { background: var(--ex-dim); }

.crw-tasks-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--ex-text);
    text-align: center;
    display: block;
}
.crw-via { font-size: 12px; color: var(--ex-dim); font-style: italic; }
.crw-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}
.crw-remove-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--ex-dim);
    font-size: 16px;
    cursor: pointer;
    border-radius: var(--ex-radius-sm);
    transition: color .12s, background .12s;
    font-family: var(--ex-font);
    line-height: 1;
}
.crw-remove-btn:hover { color: var(--ex-danger); background: var(--ex-danger-dim); }
.crw-empty {
    text-align: center;
    padding: 52px 16px;
    color: var(--ex-dim);
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   TAB 1 — ATTENTION SORTING
   ═══════════════════════════════════════════════════════════════ */

/* Header strip */
.ex-att-header {
    padding: 28px 28px 20px;
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.ex-att-header-left { flex: 1; }
.ex-att-timer-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ex-att-timer-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-dim); }
.ex-att-timer {
    font-size: 15px;
    font-weight: 700;
    color: var(--ex-accent);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
}
.ex-att-timer-bar {
    width: 80px;
    height: 3px;
    background: var(--ex-border);
    border-radius: 2px;
    overflow: hidden;
}
.ex-att-timer-bar-fill {
    height: 100%;
    background: var(--ex-accent);
    border-radius: 2px;
    transition: width 1s linear;
}
.ex-att-clear-btn {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-dim);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .12s;
}
.ex-att-clear-btn:hover { color: var(--ex-text); }

/* Signal cards */
.ex-card-list { padding: 0 28px 28px; display: flex; flex-direction: column; gap: 12px; }

.ex-card {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    padding: 18px 20px 16px;
    transition: border-color .15s;
}
.ex-card:hover { border-color: var(--ex-border-hi); }
.ex-card.ex-card-selected { border-color: var(--ex-accent); }

.ex-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ex-card-source-wrap { display: flex; align-items: center; gap: 8px; }
.ex-source-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--ex-radius-sm);
    flex-shrink: 0;
}
/* Source badge colours */
.ex-src-direct    { background: rgba(255,255,255,.07); color: var(--ex-sub); }
.ex-src-capture   { background: rgba(240,180,41,.15);  color: var(--ex-accent); }
.ex-src-slack     { background: rgba(75,0,130,.35);    color: #c084fc; }
.ex-src-gmail     { background: rgba(234,67,53,.2);    color: #f87171; }
.ex-src-github    { background: rgba(255,255,255,.08); color: var(--ex-text); }
.ex-src-jira      { background: rgba(0,82,204,.25);    color: #60a5fa; }
.ex-src-default   { background: rgba(255,255,255,.06); color: var(--ex-sub); }

.ex-card-time { font-size: 11px; color: var(--ex-dim); flex-shrink: 0; }

.ex-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ex-text);
    line-height: 1.35;
    margin-bottom: 6px;
}
.ex-card-body {
    font-size: 13px;
    color: var(--ex-sub);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
}

/* Inline action row */
.ex-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ex-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--ex-radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--ex-border-hi);
    background: rgba(255,255,255,.04);
    color: var(--ex-sub);
    transition: all .12s;
    font-family: var(--ex-font);
    white-space: nowrap;
}
.ex-action-btn:hover { background: rgba(255,255,255,.09); color: var(--ex-text); border-color: var(--ex-border-hi); }
.ex-action-btn.primary { background: var(--ex-accent); color: #000; border-color: transparent; }
.ex-action-btn.primary:hover { background: var(--ex-accent-dark); }
.ex-action-btn.danger { color: var(--ex-danger); border-color: transparent; background: none; }
.ex-action-btn.danger:hover { background: var(--ex-danger-dim); }

/* ── Rich schedule expansion panel ─────────────────────────── */
.ex-card-subform-rich {
    margin-top: 14px;
    padding: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius);
}

.ex-sched-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ex-sched-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ex-accent);
    font-family: var(--ex-font);
    margin-bottom: 4px;
}
.ex-sched-sub {
    font-size: 12px;
    color: var(--ex-sub);
}
.ex-sched-cancel {
    background: none;
    border: none;
    color: var(--ex-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    cursor: pointer;
    font-family: var(--ex-font);
    padding: 0;
    flex-shrink: 0;
}
.ex-sched-cancel:hover { color: var(--ex-sub); }

.ex-sched-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.ex-sched-opt {
    padding: 12px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ex-sched-opt:hover {
    background: rgba(255,255,255,.08);
    border-color: var(--ex-border-hi);
}
.ex-sched-opt-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ex-text);
    margin-bottom: 4px;
}
.ex-sched-opt-sub {
    font-size: 11px;
    color: var(--ex-sub);
}

/* ── Bucket picker panel ────────────────────────────────────── */
.ex-bkt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ex-bkt-refresh {
    background: none;
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    color: var(--ex-sub);
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.ex-bkt-refresh:hover:not(:disabled) {
    color: var(--ex-text);
    border-color: var(--ex-border-hi);
}
.ex-bkt-refresh:disabled {
    opacity: .5;
    cursor: default;
}
.ex-bkt-opt {
    padding: 14px 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ex-bkt-opt:hover {
    background: rgba(255,255,255,.08);
    border-color: var(--ex-border-hi);
}
.ex-bkt-opt-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ex-text);
    margin-bottom: 5px;
}
.ex-bkt-opt-sub {
    font-size: 12px;
    color: var(--ex-sub);
    line-height: 1.4;
}

/* 5th option — spans full width */
.ex-sched-opt-wide {
    grid-column: 1 / -1;
    border-style: dashed;
}
.ex-sched-opt-wide:hover { border-style: solid; }

/* Inline sub-form (delegate / waiting people search) */
.ex-card-subform {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ex-card-subform input[type="date"],
.ex-card-subform input[type="text"] {
    flex: 1;
    min-width: 140px;
    padding: 6px 10px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text);
    font-size: 12px;
    font-family: var(--ex-font);
    outline: none;
}
.ex-card-subform input:focus { border-color: var(--ex-accent); }
.ex-subform-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    margin-top: 4px;
    z-index: 50;
    max-height: 180px;
    overflow-y: auto;
}
.ex-subform-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ex-sub);
    transition: background .1s;
}
.ex-subform-dropdown-item:hover { background: rgba(255,255,255,.06); color: var(--ex-text); }

/* ── Awaiting panel ─────────────────────────────────────────── */
.ex-await-what {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius);
    color: var(--ex-text);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .12s;
    font-family: var(--ex-font);
    margin-bottom: 10px;
}
.ex-await-what:focus { border-color: var(--ex-accent); }
.ex-await-what::placeholder { color: var(--ex-dim); }

.ex-await-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}
/* who section: stacks vertically — search, nomatch hint, add form */
.ex-await-who-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ex-await-who-wrap {
    width: 100%;
    position: relative;
}
/* No-match inline hint — in document flow, never covers buttons */
.ex-await-nomatch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 12px;
    color: var(--ex-dim);
    padding: 6px 0 4px;
}
.ex-await-nomatch-msg { }
.ex-await-nomatch-btn {
    background: none;
    border: none;
    color: var(--ex-accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ex-await-nomatch-btn:hover { color: var(--ex-accent-dark); }
.ex-await-nomatch-or { color: var(--ex-dim); }
/* Inline add form within the await panel */
.ex-await-add-form {
    border-top: 1px solid var(--ex-border);
    padding-top: 10px;
    margin-top: 4px;
}
.ex-await-date {
    flex-shrink: 0;
    width: 148px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius);
    color: var(--ex-text);
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
    transition: border-color .12s;
    font-family: var(--ex-font);
    color-scheme: dark;
}
.ex-await-date:focus { border-color: var(--ex-accent); }

.ex-await-picked {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ex-accent-dim);
    border: 1px solid var(--ex-accent);
    border-radius: var(--ex-radius);
    padding: 7px 10px;
    font-size: 13px;
    color: var(--ex-accent);
}
.ex-await-picked-name { flex: 1; font-weight: 500; }
.ex-await-picked-clear {
    background: none;
    border: none;
    color: var(--ex-dim);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
}
.ex-await-picked-clear:hover { color: var(--ex-danger); }

.ex-await-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* light mode */
body.light-mode .ex-await-what,
body.light-mode .ex-await-date {
    background: #fff;
    border-color: #d4d0cb;
    color: #1c1810;
    color-scheme: light;
}
body.light-mode .ex-await-what::placeholder { color: #9e9080; }
body.light-mode .ex-await-what:focus,
body.light-mode .ex-await-date:focus { border-color: var(--ex-accent); }
body.light-mode .ex-await-nomatch { color: #8c7a65; }
body.light-mode .ex-await-nomatch-or { color: #8c7a65; }

/* ── Delegate panel ─────────────────────────────────────────── */
.ex-dlg-search-wrap { padding: 10px 0 8px; }
.ex-dlg-search {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ex-border);
    border-radius: 7px;
    color: var(--ex-text);
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    box-sizing: border-box;
    font-family: var(--ex-font);
    transition: border-color .12s;
}
.ex-dlg-search:focus { border-color: var(--ex-accent); }

/* 3-column card grid, collapses gracefully on narrow panels */
.ex-dlg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
@media (max-width: 700px) {
    .ex-dlg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .ex-dlg-grid { grid-template-columns: 1fr; }
}
.ex-dlg-card {
    padding: 12px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.ex-dlg-card:hover {
    background: rgba(255,255,255,.08);
    border-color: var(--ex-border-hi);
}
.ex-dlg-card-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ex-accent-dim);
    color: var(--ex-accent);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ex-dlg-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ex-text);
    line-height: 1.3;
}
.ex-dlg-card-sub {
    font-size: 11px;
    color: var(--ex-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ex-dlg-empty { font-size: 12px; color: var(--ex-dim); padding: 10px 2px; grid-column: 1/-1; }
.ex-dlg-hint {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
}
.ex-dlg-hint-msg { font-size: 12px; color: var(--ex-sub); }
.ex-dlg-hint-btn {
    background: none;
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    color: var(--ex-accent);
    font-size: 12px;
    font-family: var(--ex-font);
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.ex-dlg-hint-btn:hover { background: rgba(255,255,255,.06); border-color: var(--ex-accent); }

.ex-dlg-add-wrap { padding: 4px 0 2px; }
.ex-dlg-add-toggle {
    background: none;
    border: none;
    color: var(--ex-accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    font-family: var(--ex-font);
}
.ex-dlg-add-toggle:hover { text-decoration: underline; }
.ex-dlg-add-form { border-top: 1px solid var(--ex-border); padding-top: 12px; margin-top: 6px; }
.ex-dlg-add-row { display: flex; gap: 8px; margin-bottom: 8px; }
.ex-dlg-add-input {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    color: var(--ex-text);
    font-size: 12px;
    padding: 7px 10px;
    outline: none;
    font-family: var(--ex-font);
    transition: border-color .12s;
}
.ex-dlg-add-input:focus { border-color: var(--ex-accent); }
.ex-dlg-add-actions { display: flex; align-items: center; gap: 10px; }
.ex-dlg-add-btn {
    background: var(--ex-accent);
    color: #000;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    cursor: pointer;
    font-family: var(--ex-font);
    transition: opacity .12s;
}
.ex-dlg-add-btn:disabled { opacity: .5; cursor: default; }
.ex-dlg-add-cancel {
    background: none;
    border: none;
    color: var(--ex-sub);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--ex-font);
}
.ex-dlg-add-cancel:hover { color: var(--ex-text); }
.ex-dlg-add-err { font-size: 11px; color: #ef4444; margin-top: 6px; }

/* ── Attention sidebar ──────────────────────────────────────── */
.ex-sidebar-section {
    padding: 20px;
    border-bottom: 1px solid var(--ex-border);
}
.ex-sidebar-section:last-child { border-bottom: none; }
.ex-sidebar-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 14px;
}

/* ── Signal overview stats ──────────────────────────────────── */
.ex-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ex-stat-card {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    padding: 10px 12px;
    text-align: center;
}
.ex-stat-val {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--ex-dim);
}
.ex-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-dim);
}
.ex-stat-red   .ex-stat-val  { color: #ef4444; }
.ex-stat-red   .ex-stat-label { color: rgba(239,68,68,.7); }
.ex-stat-red   { border-color: rgba(239,68,68,.2); }
.ex-stat-amber .ex-stat-val  { color: #f0b429; }
.ex-stat-amber .ex-stat-label { color: rgba(240,180,41,.7); }
.ex-stat-amber { border-color: rgba(240,180,41,.2); }
.ex-stat-blue  .ex-stat-val  { color: #60a5fa; }
.ex-stat-blue  .ex-stat-label { color: rgba(96,165,250,.7); }
.ex-stat-blue  { border-color: rgba(96,165,250,.18); }
.ex-stat-muted .ex-stat-val  { color: var(--ex-sub); }
.ex-stat-muted .ex-stat-label { color: var(--ex-dim); }

/* ── Rundown items ──────────────────────────────────────────── */
.ex-rd-section { margin-bottom: 14px; }
.ex-rd-section:last-child { margin-bottom: 0; }
.ex-rd-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ex-rd-count {
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ex-sub);
}
.ex-rd-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background .1s;
}
.ex-rd-item:hover { background: rgba(255,255,255,.04); }
.ex-rd-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.ex-rd-title {
    font-size: 12px;
    color: var(--ex-sub);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ex-rd-item:hover .ex-rd-title { color: var(--ex-text); }
.ex-rd-more {
    font-size: 11px;
    color: var(--ex-dim);
    padding: 4px 0 0 15px;
}
.ex-rd-empty {
    font-size: 12px;
    color: var(--ex-dim);
    text-align: center;
    padding: 12px 0;
}
.ex-rd-loading {
    font-size: 12px;
    color: var(--ex-dim);
    padding: 4px 0;
}

/* Bucket grid (2-col) */
.ex-bucket-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ex-bucket-card {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.ex-bucket-card:hover { border-color: var(--ex-accent); background: var(--ex-accent-dim); }
.ex-bucket-card.active { border-color: var(--ex-accent); background: var(--ex-accent-dim); }
.ex-bucket-card-name { font-size: 12px; font-weight: 600; color: var(--ex-text); line-height: 1.3; margin-bottom: 2px; }
.ex-bucket-card-count { font-size: 11px; color: var(--ex-dim); }

/* Keyboard shortcuts */
.ex-kbd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.ex-kbd-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--ex-sub);
}
.ex-kbd-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    font-size: 10px;
    font-weight: 700;
    color: var(--ex-text);
    flex-shrink: 0;
}

/* Sorted today log */
.ex-sorted-log { display: flex; flex-direction: column; gap: 6px; }
.ex-sorted-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}
.ex-sorted-title { color: var(--ex-sub); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-sorted-action { color: var(--ex-dim); flex-shrink: 0; font-weight: 500; }
.ex-sorted-count { font-size: 11px; font-weight: 700; color: var(--ex-accent); float: right; }

/* ═══════════════════════════════════════════════════════════════
   TAB 2 — PICK NEXT
   ═══════════════════════════════════════════════════════════════ */

.ex-focus-wrap { padding: 28px; }
.ex-focus-label { margin-bottom: 16px; }

/* The big recommendation card */
.ex-focus-card {
    background: var(--ex-card);
    border: 1px solid var(--ex-accent);
    border-left: 4px solid var(--ex-accent);
    border-radius: var(--ex-radius);
    padding: 28px 32px 24px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}
.ex-focus-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, var(--ex-accent-dim) 0%, transparent 65%);
    pointer-events: none;
}
.ex-focus-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--ex-text);
    line-height: 1.25;
    margin-bottom: 20px;
    max-width: 600px;
    position: relative;
}
.ex-focus-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px 24px;
    margin-bottom: 24px;
    position: relative;
}
.ex-focus-meta-item {}
.ex-focus-meta-key { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-dim); margin-bottom: 4px; }
.ex-focus-meta-val { font-size: 13px; font-weight: 500; color: var(--ex-sub); }
.ex-focus-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}

/* Alternates list */
.ex-alternates-label { margin-bottom: 12px; }
.ex-alt-list { display: flex; flex-direction: column; gap: 8px; }
.ex-alt-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.ex-alt-item:hover { border-color: var(--ex-border-hi); background: var(--ex-card-hov); }
.ex-alt-item-body { flex: 1; min-width: 0; }
.ex-alt-item-title { font-size: 13px; font-weight: 600; color: var(--ex-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-alt-item-sub { font-size: 11px; color: var(--ex-sub); margin-top: 2px; }
.ex-alt-item-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ex-alt-meta-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 110px;
}
.ex-alt-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ex-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ex-alt-list {
    font-size: 10px;
    color: var(--ex-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ex-alt-pick-btn { font-size: 11px; font-weight: 600; color: var(--ex-accent); background: none; border: none; cursor: pointer; white-space: nowrap; }
.ex-alt-pick-btn:hover { text-decoration: underline; }

/* Pick Next sidebar */
.ex-why-list { display: flex; flex-direction: column; gap: 10px; }
.ex-why-row {}
.ex-why-label { font-size: 11px; color: var(--ex-sub); margin-bottom: 4px; display: flex; justify-content: space-between; }
.ex-why-score { font-weight: 700; color: var(--ex-text); }
.ex-why-bar-wrap { height: 3px; background: var(--ex-border); border-radius: 2px; overflow: hidden; }
.ex-why-bar { height: 100%; background: var(--ex-accent); border-radius: 2px; transition: width .5s; }

.ex-leave-alone-list { display: flex; flex-direction: column; gap: 6px; }
.ex-leave-item { font-size: 12px; color: var(--ex-dim); display: flex; gap: 6px; }
.ex-leave-item::before { content: '—'; flex-shrink: 0; }

.ex-rest-note {
    font-size: 13px;
    color: var(--ex-sub);
    line-height: 1.6;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   TAB 3 — THIS WEEK
   ═══════════════════════════════════════════════════════════════ */

.ex-week-wrap { padding: 32px; }

/* Header — title block left, stats right */
.ex-week-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.ex-week-title-block {}
.ex-week-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ex-text);
    line-height: 1.1;
}
.ex-week-sub {
    font-size: 13px;
    color: var(--ex-sub);
    margin-top: 6px;
    line-height: 1.5;
}
.ex-week-stats {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-shrink: 0;
    padding-top: 4px;
}
.ex-week-stat { text-align: right; }
.ex-week-stat-num { font-size: 24px; font-weight: 700; line-height: 1; }
.ex-week-stat-num.green  { color: var(--ex-success); }
.ex-week-stat-num.orange { color: var(--ex-accent); }
.ex-week-stat-num.red    { color: var(--ex-danger); }
.ex-week-stat-num.dim    { color: var(--ex-sub); }
.ex-week-stat-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ex-dim); margin-top: 4px; }

/* 4-column grid */
.ex-week-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.ex-week-col {
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    border-radius: 10px;
    overflow: hidden;
}
.ex-week-col-head {
    padding: 12px 16px 11px;
    border-bottom: 1px solid var(--ex-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ex-week-col-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ex-week-col-dot.yellow { background: var(--ex-accent); }
.ex-week-col-dot.blue   { background: var(--ex-blue); }
.ex-week-col-dot.purple { background: var(--ex-purple); }
.ex-week-col-dot.green  { background: var(--ex-success); }

.ex-week-col-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-sub);
    flex: 1;
    font-family: var(--ex-font);
}
.ex-week-col-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--ex-dim);
}
.ex-week-col-body { padding: 4px 0; }

.ex-week-item {
    padding: 13px 16px;
    border-bottom: 1px solid var(--ex-border);
    cursor: pointer;
    transition: background .12s;
}
.ex-week-item:last-child { border-bottom: none; }
.ex-week-item:hover { background: var(--ex-card-hov); }
.ex-week-item-title { font-size: 14px; font-weight: 500; color: var(--ex-text); line-height: 1.35; }
.ex-week-item-meta { font-size: 11px; color: var(--ex-dim); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ex-week-item-arrow { color: var(--ex-dim); }
.ex-week-item-person { color: var(--ex-sub); font-weight: 500; }

/* Who is waiting on whom */
.ex-dep-section {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    overflow: hidden;
}
.ex-dep-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--ex-border);
}
.ex-dep-title { font-size: 15px; font-weight: 700; color: var(--ex-text); }
.ex-dep-sub { font-size: 12px; color: var(--ex-dim); margin-top: 3px; }

.ex-dep-table { width: 100%; border-collapse: collapse; }
.ex-dep-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ex-dim);
    padding: 10px 20px 8px;
    border-bottom: 1px solid var(--ex-border);
}
.ex-dep-table td {
    padding: 12px 20px;
    font-size: 13px;
    border-bottom: 1px solid var(--ex-border);
    color: var(--ex-sub);
    vertical-align: middle;
}
.ex-dep-table tr:last-child td { border-bottom: none; }
.ex-dep-table tr:hover td { background: var(--ex-card-hov); }
.ex-dep-person { font-weight: 600; color: var(--ex-text); }
.ex-dep-arrow { color: var(--ex-dim); font-size: 12px; }
.ex-dep-topic { color: var(--ex-sub); }
.ex-dep-wait { font-weight: 600; color: var(--ex-accent); }
.ex-dep-updated { font-size: 10px; color: var(--ex-dim); }

/* ── Priority chips ─────────────────────────────────────────── */
.ex-priority {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.ex-priority.CRITICAL { background: rgba(239,68,68,.18);   color: #ef4444; }
.ex-priority.HIGH     { background: rgba(249,115,22,.18);  color: #f97316; }
.ex-priority.MEDIUM   { background: rgba(234,179,8,.15);   color: #eab308; }
.ex-priority.LOW      { background: rgba(148,163,184,.12); color: #94a3b8; }

/* ── Due date chip ──────────────────────────────────────────── */
.ex-due {
    font-size: 11px;
    font-weight: 500;
    color: var(--ex-dim);
}
.ex-due.overdue { color: var(--ex-danger); }
.ex-due.today   { color: var(--ex-accent); }
.ex-due.soon    { color: var(--ex-success); }

/* ── Stacking toast system ───────────────────────────────────── */
#exToastStack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column-reverse;  /* newest at bottom, old push up */
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
    align-items: flex-end;
}
.ex-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 12px 16px;
    background: #16161e;
    border: 1px solid rgba(240,180,41,.3);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-text);
    box-shadow: 0 8px 32px rgba(0,0,0,.65);
    min-width: 260px;
    max-width: 420px;
    white-space: nowrap;
    animation: ex-toast-in .22s cubic-bezier(.22,.6,.36,1);
    transition: opacity .28s, transform .28s;
}
.ex-toast.ex-toast-error { border-color: rgba(239,68,68,.4); }
.ex-toast.ex-toast-out { opacity: 0; transform: translateY(6px); }

.ex-toast-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f0b429;
    flex-shrink: 0;
}
.ex-toast-error .ex-toast-dot { background: var(--ex-danger); }

.ex-toast-msg {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ex-toast-undo {
    background: none;
    border: none;
    color: #f0b429;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    cursor: pointer;
    font-family: var(--ex-font);
    padding: 0 4px;
    flex-shrink: 0;
    transition: opacity .12s;
}
.ex-toast-undo:hover { opacity: .7; }
.ex-toast-close {
    background: none;
    border: none;
    color: var(--ex-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 4px;
    flex-shrink: 0;
    font-family: var(--ex-font);
    transition: color .12s;
}
.ex-toast-close:hover { color: var(--ex-sub); }

@keyframes ex-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    :root { --ex-sidebar-w: 260px; }
    .ex-week-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
    .ex-sidebar { display: none; }
    .ex-week-cols { grid-template-columns: 1fr 1fr; }
    .ex-topbar-meta { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   ITEM PANEL — Self-contained dark styles
   Scoped to .detail-panel (injected into body by ItemPanel.init)
   Covers every class produced by item-detail.js + people-picker.js
   No dependency on iop-style.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel chrome ───────────────────────────────────────────── */
.detail-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 199;
}
.detail-panel-backdrop.open { display: block; }

.detail-panel {
    position: fixed;
    top: 0; right: 0;
    width: 480px;
    height: 100vh;
    background: #111116;
    border-left: 1px solid #232329;
    overflow-y: auto;
    z-index: 200;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.22,.6,.36,1);
    box-shadow: -12px 0 48px rgba(0,0,0,.7);
    scrollbar-width: thin;
    scrollbar-color: #232329 transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #f2f2f5;
    line-height: 1.5;
}
.detail-panel.open { transform: translateX(0); }

/* Full-page variant — resets slide-in panel to a static content block */
.detail-panel.detail-panel-page {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    box-shadow: none;
    border-left: none;
    overflow-y: visible;
    z-index: auto;
    background: transparent;
    scrollbar-width: auto;
}

.detail-panel-header {
    position: sticky;
    top: 0;
    background: #18181e;
    border-bottom: 1px solid var(--ex-border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    flex-shrink: 0;
}
.ip-full-detail-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--ex-sub);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid var(--ex-border);
    transition: border-color .12s, color .12s;
}
.ip-full-detail-link:hover {
    border-color: var(--ex-border-hi);
    color: var(--ex-text);
}
.detail-panel-close {
    background: transparent;
    border: none;
    color: var(--ex-sub);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: background .12s, color .12s;
}
.detail-panel-close:hover { background: rgba(255,255,255,.07); color: var(--ex-text); }

.detail-panel-body { padding: 24px 22px 40px; }

/* ── Loading / error / hidden ───────────────────────────────── */
.detail-panel .hidden { display: none !important; }

.detail-panel .page-loading {
    font-size: 13px;
    color: #525260;
    padding: 8px 0 16px;
}

.detail-panel .alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
}
.detail-panel .alert-error {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.3);
    color: #ef4444;
}

/* ── Title (inline-edit) ────────────────────────────────────── */
.detail-panel .inline-edit-wrap { position: relative; }

.detail-panel .title-display {
    font-size: 20px;
    font-weight: 700;
    color: #f2f2f5;
    line-height: 1.3;
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
    word-break: break-word;
}
.detail-panel .title-display:hover { border-bottom-color: #35353f; }

.detail-panel .title-input {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: #f2f2f5;
    background: #18181e;
    border: 1px solid #f0b429;
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
    font-family: inherit;
    line-height: 1.3;
}

/* ── Description (Quill RTE display) ────────────────────────── */
.detail-panel .desc-display {
    font-size: 13px;
    color: #8b8b99;
    cursor: pointer;
    min-height: 28px;
    padding: 4px 0;
    line-height: 1.6;
}
.detail-panel .desc-display:hover { color: #f2f2f5; }
.detail-panel .rte-display p { margin: 0 0 6px; }

.detail-panel .ip-desc-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* ── Fields grid card ───────────────────────────────────────── */
.detail-panel #idSectionFields,
.detail-panel #idMoveBucketSection,
.detail-panel #idSectionPeople,
.detail-panel #idSectionComments {
    background: #18181e !important;
    border: 1px solid #232329 !important;
    border-radius: 8px !important;
}

.detail-panel .field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #525260;
    margin-bottom: 2px;
}

.detail-panel .detail-value {
    font-size: 13px;
    font-weight: 500;
    color: #f2f2f5;
}

/* ── Status chips ───────────────────────────────────────────── */
.detail-panel .status-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #35353f;
    background: transparent;
    color: #8b8b99;
    transition: all .12s;
    font-family: inherit;
}
.detail-panel .status-chip:hover {
    border-color: #f0b429;
    color: #f0b429;
}
.detail-panel .status-chip.active {
    background: #f0b429;
    border-color: #f0b429;
    color: #000;
}

/* ── Form input / select ────────────────────────────────────── */
.detail-panel .form-input,
.detail-panel select,
.detail-panel input[type="text"],
.detail-panel input[type="date"] {
    background: #0b0b0d;
    border: 1px solid #35353f;
    border-radius: 5px;
    color: #f2f2f5;
    font-size: 13px;
    font-family: inherit;
    padding: 7px 10px;
    outline: none;
    transition: border-color .12s;
    width: 100%;
}
.detail-panel .form-input:focus,
.detail-panel select:focus,
.detail-panel input[type="text"]:focus,
.detail-panel input[type="date"]:focus {
    border-color: #f0b429;
}
.detail-panel select option { background: #18181e; color: #f2f2f5; }

/* ── Source pill ────────────────────────────────────────────── */
.detail-panel .source-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255,255,255,.07);
    color: #8b8b99;
    cursor: pointer;
}
.detail-panel .source-pill-edit {
    background: rgba(240,180,41,.15);
    color: #f0b429;
}

/* ── Buttons ────────────────────────────────────────────────── */
.detail-panel .btn,
.detail-panel button.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.detail-panel .btn-sm,
.detail-panel button.btn-sm { padding: 6px 12px; font-size: 12px; }

.detail-panel .btn-primary,
.detail-panel button.btn-primary {
    background: #f0b429;
    color: #000;
    border: none;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}
.detail-panel .btn-primary:hover,
.detail-panel button.btn-primary:hover { background: #c48f1a; }

.detail-panel .btn-secondary,
.detail-panel button.btn-secondary {
    background: rgba(255,255,255,.06);
    color: #f2f2f5;
    border: 1px solid #35353f;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}
.detail-panel .btn-secondary:hover,
.detail-panel button.btn-secondary:hover { background: rgba(255,255,255,.1); }

.detail-panel .btn-danger,
.detail-panel button.btn-danger {
    background: rgba(239,68,68,.12);
    color: #ef4444;
    border: 1px solid transparent;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}
.detail-panel .btn-danger:hover,
.detail-panel button.btn-danger:hover { background: rgba(239,68,68,.22); }

/* ── Assignee chips ─────────────────────────────────────────── */
.detail-panel .assignee-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #0b0b0d;
    border: 1px solid #232329;
    border-radius: 7px;
    margin-bottom: 6px;
}
.detail-panel .assignee-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(240,180,41,.15);
    border: 1px solid rgba(240,180,41,.3);
    color: #f0b429;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.detail-panel .assignee-info { flex: 1; min-width: 0; }
.detail-panel .assignee-name { font-size: 13px; font-weight: 600; color: #f2f2f5; }
.detail-panel .assignee-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.detail-panel .assignee-role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #525260;
}
.detail-panel .assignee-status {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}
.detail-panel .status-active   { background: rgba(34,197,94,.12);  color: #22c55e; }
.detail-panel .status-invited  { background: rgba(240,180,41,.12); color: #f0b429; }
.detail-panel .status-uninvited{ background: rgba(255,255,255,.06); color: #525260; }

.detail-panel .assignee-seen-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(34,197,94,.12);
    color: #22c55e;
}
.detail-panel .assignee-seen-tag.assignee-unseen {
    background: rgba(255,255,255,.06);
    color: #525260;
}
.detail-panel .assignee-remove {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: none;
    border: none;
    color: #525260;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.detail-panel .assignee-remove:hover { background: rgba(239,68,68,.15); color: #ef4444; }

/* ── Share-link icon on assignee chip ───────────────────────── */
.detail-panel .assignee-share {
    width: 28px;
    height: 28px;
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    background: var(--ex-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    margin-left: 4px;
    flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.detail-panel .assignee-share:hover {
    background: rgba(96,165,250,.15);
    border-color: #60a5fa;
}

/* ── Share-link popup ───────────────────────────────────────── */
.share-link-popup {
    position: absolute;
    z-index: 9999;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    padding: 14px 16px;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-link-popup-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ex-dim);
}
.share-link-popup-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.share-link-popup-input {
    flex: 1;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--ex-text);
    font-family: var(--ex-font-mono, monospace);
    outline: none;
    min-width: 0;
    cursor: text;
}
.share-link-popup-copy {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ex-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity .15s;
}
.share-link-popup-copy:hover { opacity: .85; }
.share-link-popup-copy.copied { background: #22c55e; }
.share-link-popup-spinner {
    text-align: center;
    padding: 6px 0;
    color: var(--ex-dim);
    font-size: 12px;
}
.share-link-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ex-dim);
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
}
.share-link-popup-close:hover { color: var(--ex-text); }

/* ── People picker dropdown ─────────────────────────────────── */
.detail-panel .people-search-box { position: relative; }
.detail-panel .people-dropdown,
.detail-panel .pp-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #18181e;
    border: 1px solid #35353f;
    border-radius: 6px;
    margin-top: 4px;
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.detail-panel .pd-item {
    padding: 9px 12px;
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid #232329;
}
.detail-panel .pd-item:last-child { border-bottom: none; }
.detail-panel .pd-item:hover { background: rgba(255,255,255,.05); }
.detail-panel .pd-name { font-size: 13px; font-weight: 600; color: #f2f2f5; }
.detail-panel .pd-email { font-size: 11px; color: #525260; margin-top: 1px; }
.detail-panel .pd-add-new { color: #f0b429; font-size: 12px; font-weight: 600; }
.detail-panel .pd-loading,
.detail-panel .pd-empty { padding: 10px 12px; font-size: 12px; color: #525260; }
.detail-panel .pd-self { opacity: .5; }

/* People add form */
.detail-panel .people-add-form,
.detail-panel .pp-add-form {
    margin-top: 10px;
    padding: 14px;
    background: #0b0b0d;
    border: 1px solid #35353f;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.detail-panel .people-add-form-title { font-size: 12px; font-weight: 700; color: #8b8b99; letter-spacing: .04em; }
.detail-panel .people-add-form-actions { display: flex; gap: 8px; }

/* ── Comments / Quill editor ────────────────────────────────── */
.detail-panel .ql-comment {
    border: 1px solid #35353f;
    border-radius: 7px;
    overflow: hidden;
    background: #0b0b0d;
}
.detail-panel .ql-comment .ql-toolbar {
    background: #18181e;
    border: none;
    border-bottom: 1px solid #232329;
    padding: 6px 8px;
}
.detail-panel .ql-comment .ql-toolbar button,
.detail-panel .ql-comment .ql-toolbar .ql-picker-label { color: #8b8b99; }
.detail-panel .ql-comment .ql-toolbar button:hover,
.detail-panel .ql-comment .ql-toolbar button.ql-active { color: #f0b429; }
.detail-panel .ql-comment .ql-toolbar .ql-stroke { stroke: #8b8b99; }
.detail-panel .ql-comment .ql-toolbar button:hover .ql-stroke,
.detail-panel .ql-comment .ql-toolbar button.ql-active .ql-stroke { stroke: #f0b429; }
.detail-panel .ql-comment .ql-container {
    background: #0b0b0d;
    border: none;
    font-family: inherit;
    font-size: 13px;
}
.detail-panel .ql-comment .ql-editor {
    color: #f2f2f5;
    min-height: 80px;
    padding: 10px 12px;
}
.detail-panel .ql-comment .ql-editor.ql-blank::before {
    color: #525260;
    font-style: normal;
    font-size: 13px;
}

/* Inline comment editor (edit mode) */
.detail-panel [id^="idCeEditor_"] .ql-toolbar { background: #18181e; border-bottom: 1px solid #232329; }
.detail-panel [id^="idCeEditor_"] .ql-container { background: #0b0b0d; }
.detail-panel [id^="idCeEditor_"] .ql-editor { color: #f2f2f5; min-height: 60px; padding: 8px 10px; }
.detail-panel [id^="idCeEditor_"] .ql-toolbar .ql-stroke { stroke: #8b8b99; }

/* Description Quill */
.detail-panel #idDescEditor .ql-toolbar { background: #18181e; border-bottom: 1px solid #232329; border-radius: 7px 7px 0 0; }
.detail-panel #idDescEditor .ql-container { background: #0b0b0d; border-radius: 0 0 7px 7px; }
.detail-panel #idDescEditor .ql-editor { color: #f2f2f5; min-height: 100px; padding: 10px 12px; }
.detail-panel #idDescEditor .ql-toolbar .ql-stroke { stroke: #8b8b99; }
.detail-panel #idDescEditor .ql-toolbar button:hover .ql-stroke { stroke: #f0b429; }
.detail-panel #idDescEditor .ql-editor.ql-blank::before { color: #525260; font-style: italic; }

/* Comment type selector */
.detail-panel .ip-comment-type-sel {
    background: #0b0b0d;
    border: 1px solid #35353f;
    border-radius: 5px;
    color: #8b8b99;
    font-size: 11px;
    font-family: inherit;
    padding: 5px 8px;
    cursor: pointer;
    outline: none;
}

/* Audit toggle */
.detail-panel .audit-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #525260;
    cursor: pointer;
}
.detail-panel .audit-toggle-row input[type="checkbox"] { accent-color: #f0b429; }

/* ── Comment list ────────────────────────────────────────────── */
.detail-panel .comment-item {
    position: relative;
    padding: 16px 0 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.detail-panel .comment-item:last-child { border-bottom: none; }

/* Type dot — left rail */
.detail-panel .comment-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35353f;
}
.detail-panel .comment-item.ct-comment::before  { background: #3b82f6; }
.detail-panel .comment-item.ct-progress::before { background: #22c55e; }
.detail-panel .comment-item.ct-work::before     { background: #f0b429; }
.detail-panel .comment-item.ct-audit::before    { background: #2a2a35; }

/* Row 1: badge + date + action buttons */
.detail-panel .comment-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

/* Badge */
.detail-panel .ip-activity-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 3px;
}

/* Date — readable, right-aligned */
.detail-panel .comment-date {
    font-size: 11px;
    color: #8b8b99;
    margin-left: auto;
    white-space: nowrap;
}

/* Row 2: author */
.detail-panel .comment-author {
    font-size: 11px;
    font-weight: 600;
    color: #8b8b99;
    margin-bottom: 7px;
    letter-spacing: .02em;
}

/* Row 4: body */
.detail-panel .comment-body {
    font-size: 13px;
    color: #e0e0e8;
    line-height: 1.65;
}
.detail-panel .comment-body.rte-display p { margin: 0 0 4px; }
.detail-panel .comment-body.rte-display p:last-child { margin-bottom: 0; }

/* Action buttons — tucked next to date, visible but not loud */
.detail-panel .activity-actions {
    display: flex;
    gap: 4px;
    margin-left: 4px;
}
.detail-panel .activity-edit-btn,
.detail-panel .activity-delete-btn {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.08);
    background: none;
    color: #8b8b99;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}
.detail-panel .activity-edit-btn:hover   { color: #f2f2f5; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.detail-panel .activity-delete-btn:hover { color: #ef4444; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }

/* Audit rows — subtle */
.detail-panel .comment-item.ct-audit {
    opacity: .55;
}
.detail-panel .comment-item.ct-audit:hover { opacity: .8; transition: opacity .15s; }

/* ── Delete section ─────────────────────────────────────────── */
.detail-panel #idSectionDelete {
    border-color: rgba(239,68,68,.25) !important;
    background: rgba(239,68,68,.04);
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CAPTURE MODAL — wm-* dark styles
   Injected by capture.js into document.body.
   CRITICAL: .wm-overlay must be display:none by default.
   ═══════════════════════════════════════════════════════════════ */

.wm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 20px 20px;
}
.wm-overlay.active { display: flex; }

.wm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(8px);
    z-index: -1;
}

.wm-modal {
    background: #18181e;
    border: 1px solid #35353f;
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 32px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
    animation: wmSlide .18s cubic-bezier(.22,.6,.36,1);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    color: #f2f2f5;
}

/* amber accent bar */
.wm-modal::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #f0b429 0%, #e8833a 100%);
}

@keyframes wmSlide {
    from { transform: translateY(-16px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.wm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid #232329;
}
.wm-header-title { font-size: 13px; font-weight: 700; color: #f2f2f5; letter-spacing: -.2px; }

.wm-close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #525260;
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
    transition: background .12s, color .12s;
}
.wm-close:hover { background: #232329; color: #f2f2f5; }

.wm-notepad { display: flex; flex-direction: column; }

.wm-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #232329;
}
.wm-row:last-child { border-bottom: none; }
.wm-row-what { align-items: flex-start; }

.wm-field-wrap { flex: 1; display: flex; flex-direction: column; }

.wm-inline-hint {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 0 18px 6px;
    color: #34d399;
    line-height: 1;
}

.wm-label {
    width: 52px;
    min-width: 52px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: lowercase;
    color: #525260;
    padding: 0 0 0 20px;
    border-right: 1px solid #232329;
    user-select: none;
    line-height: 46px;
    height: 46px;
}
.wm-label-top { line-height: 1; height: auto; padding-top: 14px; }

.wm-input {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 18px;
    font-size: 14px;
    font-family: inherit;
    color: #f2f2f5;
    height: 46px;
    line-height: 46px;
    letter-spacing: -.1px;
    box-sizing: border-box;
}
.wm-field-wrap .wm-input { height: 44px; line-height: 44px; }
.wm-input:focus { background: rgba(240,180,41,.04); }
.wm-input::placeholder { color: #525260; font-weight: 400; }

.wm-what {
    height: auto;
    line-height: 1.55;
    padding: 12px 18px;
    resize: none;
    min-height: 110px;
}

.wm-status {
    padding: 8px 20px;
    font-size: 12px;
    border-top: 1px solid #232329;
    background: #111116;
}

.wm-footer {
    padding: 12px 20px;
    border-top: 1px solid #232329;
    background: #111116;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wm-hint { font-size: 11px; color: #525260; white-space: nowrap; }
.wm-hint kbd {
    background: #232329;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: inherit;
    font-size: 10px;
    color: #8b8b99;
}
.wm-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Extra fields (Full Details mode) */
.wm-extra {
    border-top: 1px solid #232329;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #111116;
}
.wm-extra-row { display: flex; align-items: center; gap: 12px; }
.wm-extra-label { width: 68px; min-width: 68px; margin-bottom: 0; }
.wm-extra-input,
.wm-extra-select {
    flex: 1;
    background: #0b0b0d;
    border: 1px solid #35353f;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #f2f2f5;
    outline: none;
    transition: border-color .12s;
}
.wm-extra-input:focus,
.wm-extra-select:focus { border-color: #f0b429; }
.wm-extra-select option { background: #18181e; color: #f2f2f5; }

.wm-pills { display: flex; gap: 6px; flex: 1; }
.wm-priority-pill {
    flex: 1;
    padding: 5px 4px;
    border-radius: 5px;
    border: 1px solid #35353f;
    background: #18181e;
    font-size: 11px;
    font-weight: 600;
    color: #8b8b99;
    text-align: center;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
    font-family: inherit;
}
.wm-priority-pill:hover { border-color: #525260; color: #f2f2f5; }
.wm-priority-pill.active[data-priority="CRITICAL"] { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.4); color: #f87171; }
.wm-priority-pill.active[data-priority="HIGH"]     { background: rgba(251,191,36,.15);  border-color: rgba(251,191,36,.4);  color: #fbbf24; }
.wm-priority-pill.active[data-priority="MEDIUM"]   { background: rgba(240,180,41,.13);  border-color: rgba(240,180,41,.4);  color: #f0b429; }
.wm-priority-pill.active[data-priority="LOW"]      { background: rgba(255,255,255,.05); border-color: #35353f; color: #525260; }

.wm-pick-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    margin: 0 4px 4px 0;
    border: 1px solid #35353f;
    border-radius: 10px;
    background: #18181e;
    color: #f2f2f5;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s, color .12s;
}
.wm-pick-btn:hover { border-color: #f0b429; color: #f0b429; }

@keyframes wm-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}
.wm-shake { animation: wm-shake .35s ease; }

/* ═══════════════════════════════════════════════════════════════
   PICK NEXT — Hero Card v2  (.ex-pn-*)
   Pixel-matched to reference design.
   Existing .ex-focus-* classes left untouched.
   ═══════════════════════════════════════════════════════════════ */

/* Top eyebrow label — amber coloured */
.ex-label-accent { color: var(--ex-accent); letter-spacing: .14em; }

/* Hero card shell */
.ex-pn-card {
    background: #191908;
    border: 1px solid rgba(240,180,41,.22);
    border-radius: 12px;
    padding: 40px 44px 36px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

/* Decorative rings — SVG, positioned top-right */
.ex-pn-rings {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 380px;
    height: 320px;
    pointer-events: none;
    overflow: visible;
}

/* Title */
.ex-pn-title {
    font-size: 44px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 28px;
    position: relative;
    max-width: 70%;
    letter-spacing: -1px;
}

/* 2×2 meta grid */
.ex-pn-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 48px;
    margin-bottom: 32px;
    position: relative;
}
.ex-pn-meta-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #68674a;
    margin-bottom: 5px;
}
.ex-pn-meta-val {
    font-size: 17px;
    font-weight: 500;
    color: #f2f2f5;
    line-height: 1.3;
}

/* Actions row */
.ex-pn-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

/* START FOCUS BLOCK — amber pill */
.ex-pn-btn-primary {
    background: #f0b429;
    color: #000;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-family: var(--ex-font);
    transition: background .12s;
    white-space: nowrap;
}
.ex-pn-btn-primary:hover { background: #c48f1a; }

/* SHOW ME ANOTHER — ghost text only */
.ex-pn-btn-ghost {
    background: none;
    color: #68674a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 14px;
    border: none;
    cursor: pointer;
    font-family: var(--ex-font);
    transition: color .15s;
}
.ex-pn-btn-ghost:hover { color: #f2f2f5; }

/* ═══════════════════════════════════════════════════════════════
   DATE PICKER — dark theme override
   IOP.DatePicker appends .iop-date-picker to document.body.
   iop-style.css is not loaded in executive view, so styles go here.
   ═══════════════════════════════════════════════════════════════ */

.iop-date-picker {
    position: absolute;
    z-index: 3000;
    width: 264px;
    background: #18181e;
    border: 1px solid #35353f;
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,.7);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #f2f2f5;
}

.iop-dp-header {
    display: flex;
    gap: 8px;
    padding: 12px 12px 8px;
    border-bottom: 1px solid #232329;
}

.iop-dp-select {
    flex: 1;
    background: #0b0b0d;
    border: 1px solid #35353f;
    border-radius: 5px;
    color: #f2f2f5;
    font-size: 12px;
    font-family: inherit;
    padding: 5px 8px;
    outline: none;
    cursor: pointer;
}
.iop-dp-select:focus { border-color: #f0b429; }
.iop-dp-select option { background: #18181e; }

.iop-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 8px 10px;
}

.iop-dp-weekday {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #525260;
    padding: 4px 0;
}

.iop-dp-day {
    text-align: center;
    padding: 6px 2px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #f2f2f5;
    transition: background .1s;
}
.iop-dp-day.empty { cursor: default; pointer-events: none; }
.iop-dp-day:not(.empty):hover { background: rgba(240,180,41,.12); }
.iop-dp-day.today { font-weight: 700; color: #f0b429; }
.iop-dp-day.selected { background: #f0b429; color: #000; font-weight: 700; }
.iop-dp-day.selected:hover { background: #c48f1a; }

/* Time row */
.iop-dp-time {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #232329;
    background: #111116;
}
.iop-dp-time-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #525260;
    flex-shrink: 0;
}
.iop-dp-time-sep { color: #525260; font-weight: 700; }
.iop-dp-time-hint {
    font-size: 10px;
    color: #35353f;
    margin-left: auto;
    white-space: nowrap;
}

.iop-dp-footer {
    padding: 8px 12px;
    border-top: 1px solid #232329;
    background: #111116;
    display: flex;
    justify-content: flex-start;
}

/* DatePicker button — scoped so it doesn't affect anything else */
.iop-date-picker .btn {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: none;
    transition: background .12s;
}
.iop-date-picker .btn-secondary {
    background: rgba(255,255,255,.06);
    color: #8b8b99;
    border: 1px solid #35353f;
    padding: 5px 12px;
}
.iop-date-picker .btn-secondary:hover { background: rgba(255,255,255,.1); color: #f2f2f5; }
.iop-date-picker .btn-sm { padding: 5px 10px; font-size: 11px; }

.iop-date-picker .btn-primary {
    background: #f0b429;
    color: #000;
    font-weight: 700;
    padding: 5px 14px;
    border: none;
}
.iop-date-picker .btn-primary:hover { background: #c48f1a; }

/* ═══════════════════════════════════════════════════════════════
   FOCUS BLOCK OVERLAY  (.ex-fb-*)
   Full-screen dark mode — appears when START FOCUS BLOCK clicked
   ═══════════════════════════════════════════════════════════════ */

.ex-fb-overlay {
    position: fixed;
    inset: 0;
    background: #070709;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    font-family: var(--ex-font);
    color: var(--ex-text);
}

/* ── Topbar ──────────────────────────────────────────────────── */
.ex-fb-topbar {
    display: flex;
    align-items: center;
    padding: 0 32px;
    height: 44px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex-shrink: 0;
}
.ex-fb-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.ex-fb-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
    animation: ex-fb-pulse 2.2s ease-in-out infinite;
}
@keyframes ex-fb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.ex-fb-status-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ex-sub);
}
.ex-fb-badges {
    display: flex;
    gap: 8px;
}
.ex-fb-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    border: 1px solid var(--ex-border);
    padding: 3px 9px;
    border-radius: 3px;
}

/* ── Body ────────────────────────────────────────────────────── */
.ex-fb-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 48px;
}

.ex-fb-commit-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ex-accent);
    margin-bottom: 18px;
}

.ex-fb-title {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    max-width: 680px;
    line-height: 1.25;
    margin-bottom: 44px;
}

/* ── Timer ───────────────────────────────────────────────────── */
.ex-fb-timer {
    font-size: 108px;
    font-weight: 200;
    letter-spacing: -2px;
    color: #ffffff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 22px;
    transition: color .3s;
}
.ex-fb-timer.paused { color: var(--ex-dim); }

.ex-fb-progress-wrap {
    width: 360px;
    height: 3px;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
}
.ex-fb-progress-bar {
    height: 100%;
    background: var(--ex-accent);
    border-radius: 2px;
    transition: width 1s linear;
}

.ex-fb-block-info {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 48px;
}

/* ── Info cards ──────────────────────────────────────────────── */
.ex-fb-cards {
    display: flex;
    gap: 14px;
    margin-bottom: 48px;
}
.ex-fb-card {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    padding: 20px 26px 18px;
    min-width: 176px;
}
.ex-fb-card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 10px;
}
.ex-fb-card-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--ex-text);
    line-height: 1;
    margin-bottom: 8px;
}
.ex-fb-card-sub {
    font-size: 11px;
    color: var(--ex-sub);
    line-height: 1.4;
}

/* ── Action buttons ──────────────────────────────────────────── */
.ex-fb-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}
.ex-fb-btn-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--ex-border-hi);
    color: var(--ex-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 26px;
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    font-family: var(--ex-font);
    transition: background .12s;
}
.ex-fb-btn-ghost:hover { background: rgba(255,255,255,.11); }
.ex-fb-btn-ghost.active {
    background: var(--ex-accent-dim);
    border-color: var(--ex-accent);
    color: var(--ex-accent);
}
.ex-fb-btn-end {
    background: var(--ex-accent);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 26px;
    border-radius: var(--ex-radius-sm);
    border: none;
    cursor: pointer;
    font-family: var(--ex-font);
    transition: background .12s;
}
.ex-fb-btn-end:hover { background: var(--ex-accent-dark); }

/* ═══════════════════════════════════════════════════════════════
   FOCUS BLOCK — LOG SESSION MODAL
   ═══════════════════════════════════════════════════════════════ */
.ex-fb-log-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ex-fb-log-card {
    background: #18181e;
    border: 1px solid var(--ex-border-hi);
    border-radius: 12px;
    padding: 36px 40px 32px;
    width: 440px;
    max-width: 95vw;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    color: var(--ex-text);
}
.ex-fb-log-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ex-text);
    margin-bottom: 4px;
}
.ex-fb-log-sub {
    font-size: 13px;
    color: var(--ex-sub);
    margin-bottom: 28px;
}
.ex-fb-log-field { margin-bottom: 20px; }
.ex-fb-log-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 8px;
}
.ex-fb-log-input {
    width: 100%;
    background: #111116;
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text);
    font-size: 15px;
    padding: 10px 12px;
    font-family: var(--ex-font);
    outline: none;
    box-sizing: border-box;
}
.ex-fb-log-input:focus { border-color: var(--ex-accent); }
.ex-fb-log-textarea {
    width: 100%;
    background: #111116;
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text);
    font-size: 14px;
    padding: 10px 12px;
    font-family: var(--ex-font);
    outline: none;
    resize: vertical;
    min-height: 68px;
    box-sizing: border-box;
}
.ex-fb-log-textarea:focus { border-color: var(--ex-accent); }
.ex-fb-log-pct-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ex-fb-log-slider {
    flex: 1;
    accent-color: var(--ex-accent);
    cursor: pointer;
}
.ex-fb-log-pct-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--ex-accent);
    min-width: 42px;
    text-align: right;
}
.ex-fb-log-actions {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}
.ex-fb-log-save {
    flex: 1;
    background: var(--ex-accent);
    color: #000;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 13px;
    border: none;
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    font-family: var(--ex-font);
    transition: background .12s;
}
.ex-fb-log-save:hover:not(:disabled) { background: var(--ex-accent-dark); }
.ex-fb-log-save:disabled { opacity: .5; cursor: default; }
.ex-fb-log-skip {
    background: none;
    border: 1px solid var(--ex-border-hi);
    color: var(--ex-sub);
    font-size: 13px;
    font-weight: 600;
    padding: 13px 20px;
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    font-family: var(--ex-font);
    transition: color .12s, border-color .12s;
}
.ex-fb-log-skip:hover { color: var(--ex-text); border-color: var(--ex-sub); }

/* Done checkbox row */
.ex-fb-log-done-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ex-sub);
    user-select: none;
}
.ex-fb-log-done-row:hover { color: var(--ex-text); }

/* ── Work Progress comment (item-detail.js inside executive panel) ── */
.ip-activity-type.work-progress {
    background: rgba(240,180,41,.15);
    color: #f0b429;
}
.detail-panel .ct-work .comment-body { font-style: italic; }
.comment-work-meta {
    display: flex;
    gap: 12px;
    margin: 4px 0 6px;
    font-size: 12px;
}
.cwm-hours { font-weight: 700; color: #f0b429; }
.cwm-range { color: var(--ex-dim); }

/* ── Work Log inline fields (comment form) ───────────────────── */
.detail-panel .ip-wl-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #525260;
    margin-bottom: 5px;
}
.detail-panel .ip-wl-input {
    background: #111116;
    border: 1px solid #35353f;
    border-radius: 4px;
    color: #f2f2f5;
    font-size: 13px;
    padding: 5px 8px;
    outline: none;
}
.detail-panel .ip-wl-input:focus { border-color: #f0b429; }

/* ── Item progress bar (reused from iop-style in executive dark context) ── */
.item-progress-wrap { margin-top: 8px; margin-bottom: 4px; }
.item-progress-bar {
    height: 3px;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    overflow: hidden;
}
.item-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: #f0b429;
    transition: width .4s;
}
.item-progress-fill.done { background: #22c55e; }
.item-progress-label { font-size: 11px; color: var(--ex-sub); margin-top: 4px; letter-spacing: .02em; }
.item-progress-label .pct { color: #f0b429; font-weight: 600; }
.item-progress-label .pct.done { color: #22c55e; }

/* Extra breathing room before action buttons on Attention Sorting cards */
.ex-card .item-progress-wrap { margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════
   Lists page — lc-* namespace
   Standalone page (no template.php). Only executive.css loaded.
   ══════════════════════════════════════════════════════════════ */

/* ── Page body ───────────────────────────────────────────────── */
.lists-page-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px 60px;
    width: 100%;
}

/* ── Loading ─────────────────────────────────────────────────── */
.lc-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    color: var(--ex-sub);
    font-size: 14px;
}

/* ── Modal ───────────────────────────────────────────────────── */
.lc-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.lc-modal-overlay.open { display: flex; }
.lc-modal {
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    border-radius: var(--ex-radius);
    width: 100%;
    max-width: 440px;
    padding: 24px;
    font-family: var(--ex-font);
    color: var(--ex-text);
}
.lc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.lc-modal-title { font-size: 15px; font-weight: 700; color: var(--ex-text); }
.lc-modal-close {
    background: none;
    border: none;
    color: var(--ex-sub);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
}
.lc-modal-close:hover { color: var(--ex-text); }
.lc-modal-body   { display: flex; flex-direction: column; }
.lc-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.lc-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-sub);
    margin-bottom: 6px;
    display: block;
}
.lc-required { color: var(--ex-danger); }
.lc-optional  { color: var(--ex-dim); font-weight: 400; text-transform: none; font-size: 11px; }
.lc-input {
    width: 100%;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text);
    font-size: 14px;
    padding: 9px 12px;
    outline: none;
    font-family: var(--ex-font);
    transition: border-color .15s;
    resize: none;
}
.lc-input:focus   { border-color: var(--ex-accent); }
.lc-input::placeholder { color: var(--ex-dim); }
.lc-textarea { min-height: 80px; }

/* ── Toast ───────────────────────────────────────────────────── */
.lc-toast {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border-hi);
    color: var(--ex-text);
    font-family: var(--ex-font);
    font-size: 13px;
    padding: 12px 18px;
    border-radius: var(--ex-radius);
    z-index: 2000;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.lc-toast.error { border-color: var(--ex-danger); color: #f87171; }

/* ── Hero header ─────────────────────────────────────────────── */
.lc-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--ex-border);
    margin-bottom: 20px;
}
.lc-hero-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 10px;
}
.lc-hero-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--ex-text);
    line-height: 1.1;
    margin-bottom: 10px;
    letter-spacing: -.02em;
}
.lc-hero-sub {
    font-size: 14px;
    color: var(--ex-sub);
    line-height: 1.6;
    max-width: 560px;
}
.lc-hero-stats {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    padding-top: 4px;
}
.lc-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 28px;
    border-right: 1px solid var(--ex-border);
}
.lc-hero-stat:first-child { padding-left: 0; }
.lc-hero-stat:last-child  { border-right: none; }
.lc-hero-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 4px;
}
.lc-hero-stat-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--ex-text);
    line-height: 1;
}
.lc-hero-stat-num.accent { color: var(--ex-accent); }

/* ── Toolbar ─────────────────────────────────────────────────── */
.lc-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.lc-search-wrap { position: relative; flex: 1; max-width: 480px; }
.lc-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ex-dim);
    pointer-events: none;
}
.lc-search {
    width: 100%;
    box-sizing: border-box;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 8px;
    color: var(--ex-text);
    font-size: 13px;
    padding: 9px 12px 9px 36px;
    outline: none;
    font-family: var(--ex-font);
    transition: border-color .15s;
}
.lc-search:focus { border-color: var(--ex-accent); }
.lc-search::placeholder { color: var(--ex-dim); }

/* ── Section labels ──────────────────────────────────────────── */
.lc-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-bottom: 12px;
    margin-top: 4px;
}

/* ── Grids ───────────────────────────────────────────────────── */
.lc-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 32px; }
.lc-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 32px; }
@media (max-width: 900px) {
    .lc-grid   { grid-template-columns: repeat(2,1fr); }
    .lc-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .lc-grid, .lc-grid-2 { grid-template-columns: 1fr; }
}

/* ── Card ────────────────────────────────────────────────────── */
.lc-card {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    padding: 18px 20px 16px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: var(--ex-font);
    color: var(--ex-text);
}
.lc-card:hover {
    border-color: var(--ex-border-hi);
    box-shadow: 0 4px 20px rgba(0,0,0,.28);
    background: rgba(255,255,255,.03);
}
.lc-card-unassigned {
    border-style: dashed;
    opacity: .75;
}
.lc-card-unassigned:hover { opacity: 1; }
.lc-card-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.lc-badge-group { display: flex; align-items: center; gap: 6px; }
.lc-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-accent);
    display: flex;
    align-items: center;
    gap: 4px;
}
.lc-badge-sep   { color: var(--ex-border-hi); font-weight: 300; }
.lc-badge-role  { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-sub); }
.lc-badge-pin   {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(240,180,41,.12); color: #f0b429; border-radius: 4px; padding: 2px 6px;
}
.lc-timestamp { font-size: 11px; color: var(--ex-dim); }

.lc-card-title  { font-size: 22px; font-weight: 800; color: var(--ex-text); line-height: 1.15; margin-bottom: 6px; letter-spacing: -.01em; }
.lc-card-desc   {
    font-size: 12px; color: var(--ex-sub); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 12px;
}

/* ── Stats row ───────────────────────────────────────────────── */
.lc-stats-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ex-border);
}
.lc-stat-open        { font-size: 11px; color: var(--ex-sub); margin-right: 2px; }
.lc-stat-open strong { color: var(--ex-text); font-weight: 700; }
.lc-stat-pill {
    font-size: 11px; font-weight: 600; color: var(--ex-sub);
    display: flex; align-items: center; gap: 3px;
    font-variant-numeric: tabular-nums;
}
.lc-stat-pill::before { content: '·'; color: var(--ex-border-hi); margin-right: 1px; }
.lc-pill-dot          { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lc-pill-dot.critical { background: var(--ex-accent); }
.lc-pill-dot.high     { background: var(--ex-blue); }
.lc-pill-dot.inflight { background: var(--ex-success); }
/* Color the entire pill text by priority */
.lc-stat-pill.p0      { color: var(--ex-accent); }
.lc-stat-pill.p1      { color: var(--ex-blue); }
.lc-stat-pill.inflight-lbl { color: var(--ex-success); }

/* ── Items preview ───────────────────────────────────────────── */
.lc-items-list  { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lc-item-row    { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ex-line-item); line-height: 1.4; }
.lc-item-dot    { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.lc-item-dot.CRITICAL { background: var(--ex-accent); }
.lc-item-dot.HIGH     { background: var(--ex-blue); }
.lc-item-dot.MEDIUM   { background: var(--ex-purple); }
.lc-item-dot.LOW      { background: var(--ex-dim); }
.lc-item-dot.NONE     { background: #333340; }
.lc-item-title  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lc-more-link   { font-size: 11px; color: var(--ex-dim); margin-top: 2px; }

/* ── Card footer ─────────────────────────────────────────────── */
.lc-card-footer { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ex-border); margin-top: auto; }
.lc-footer-spacer { flex: 1; }
.lc-footer-btn {
    background: none;
    border: 1px solid var(--ex-border);
    border-radius: 5px;
    color: var(--ex-sub);
    font-size: 11px;
    font-family: var(--ex-font);
    padding: 4px 9px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.lc-footer-btn:hover          { background: rgba(255,255,255,.06); color: var(--ex-text); border-color: var(--ex-border-hi); }
.lc-footer-btn.danger:hover   { color: #f87171; border-color: #f87171; background: rgba(248,113,113,.06); }

/* ── Lock button ────────────────────────────────────────────── */
.exl-lock-btn {
    background: none;
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    color: var(--ex-sub);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    flex-shrink: 0;
}
.exl-lock-btn:hover { background: var(--ex-card); border-color: var(--ex-border-hi); color: var(--ex-accent); }

/* ── Theme toggle button ────────────────────────────────────── */
.exl-theme-toggle {
    background: none;
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    color: var(--ex-sub);
    font-size: 15px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    flex-shrink: 0;
    line-height: 1;
}
.exl-theme-toggle:hover { background: var(--ex-card); border-color: var(--ex-border-hi); color: var(--ex-text); }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — body.light-mode overrides
   Warm cream / linen palette inspired by mockup designs.
   Rule: edit --ex-*-dark / --ex-*-light tokens, never --ex-* directly.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS variable overrides ──────────────────────────────── */
body.light-mode {
    --ex-bg:           #f7f6f4;
    --ex-surface:      #f0efed;
    --ex-card:         #ffffff;
    --ex-card-hov:     #f7f6f4;
    --ex-border:       #e6e3df;
    --ex-border-hi:    #d2cfca;
    --ex-text:         #1c1810;
    --ex-sub:          #6b5e52;
    --ex-line-item:    #1c1810;
    --ex-dim:          #9e9080;
    --ex-accent:       #b45309;
    --ex-accent-dim:   rgba(180,83,9,.12);
    --ex-accent-dark:  #92400e;
    --ex-danger:       #dc2626;
    --ex-danger-dim:   rgba(220,38,38,.08);
    --ex-success:      #16a34a;
    --ex-blue:         #2563eb;
    --ex-purple:       #7c3aed;

    /* Flightboard card state — flip active pointers to light values */
    --fbrd-done-title:    var(--fbrd-done-title-light);
    --fbrd-done-bg:       var(--fbrd-done-bg-light);
    --fbrd-done-border:   var(--fbrd-done-border-light);
    --fbrd-blocked-title: var(--fbrd-blocked-title-light);
    --fbrd-blocked-bg:    var(--fbrd-blocked-bg-light);
    --fbrd-blocked-border:var(--fbrd-blocked-border-light);
}

/* ── 2. Shell / topbar / sidebar rgba-white-tint → rgba-dark-tint */

/* Tab strip */
body.light-mode .ex-tab:hover  { background: rgba(0,0,0,.05); }

/* Sidebar */
body.light-mode .exl-sidebar            { border-right-color: var(--ex-border); }
body.light-mode .exl-sidebar-logo       { border-bottom-color: var(--ex-border); }
body.light-mode .exl-nav-divider        { background: var(--ex-border); }
body.light-mode .exl-menu-toggle:hover  { background: rgba(0,0,0,.06); }
body.light-mode .exl-nav-item:hover     { background: rgba(0,0,0,.06); }
body.light-mode .exl-nav-item.active    { background: rgba(180,83,9,.12); color: var(--ex-accent); }

/* Topbar search */
body.light-mode .exl-topbar-search             { background: rgba(0,0,0,.05); }
body.light-mode .exl-topbar-search:hover       { background: rgba(0,0,0,.07); }
body.light-mode .exl-topbar-search:focus-within { background: #fff; border-color: var(--ex-accent); }
body.light-mode .exl-search-kbd                { background: rgba(0,0,0,.08); color: var(--ex-sub); }

/* Ghost buttons */
body.light-mode .ex-btn-ghost              { background: rgba(0,0,0,.06); }
body.light-mode .ex-btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,.1); }

/* Source pills */
body.light-mode .ex-src-direct  { background: rgba(0,0,0,.06); }
body.light-mode .ex-src-github  { background: rgba(0,0,0,.07); }
body.light-mode .ex-src-default { background: rgba(0,0,0,.06); }

/* Action buttons */
body.light-mode .ex-action-btn       { background: rgba(0,0,0,.04); }
body.light-mode .ex-action-btn:hover { background: rgba(0,0,0,.08); }

/* ── 3. Flightboard column rgba-tints ───────────────────────── */
body.light-mode .fbrd-col-add:hover { background: rgba(0,0,0,.04); }

/* ── 4. detail-panel — full hardcoded-hex override ──────────── */

/* Panel shell */
body.light-mode .detail-panel {
    background: #ffffff;
    border-left-color: #e6e3df;
    color: #1c1810;
    box-shadow: -12px 0 48px rgba(0,0,0,.12);
    scrollbar-color: #e6e3df transparent;
}
body.light-mode .detail-panel-backdrop { background: rgba(0,0,0,.3); }

/* Header */
body.light-mode .detail-panel-header      { background: #f7f6f4; border-bottom-color: #e6e3df; }
body.light-mode .detail-panel-close:hover { background: rgba(0,0,0,.06); }

/* Loading / error states */
body.light-mode .detail-panel .page-loading { color: #9e9080; }

/* Title */
body.light-mode .detail-panel .title-display             { color: #1c1810; }
body.light-mode .detail-panel .title-display:hover       { border-bottom-color: #d2cfca; }
body.light-mode .detail-panel .title-input               { color: #1c1810; background: #fff; border-color: #b45309; }

/* Description */
body.light-mode .detail-panel .desc-display              { color: #6b5e52; }
body.light-mode .detail-panel .desc-display:hover        { color: #1c1810; }

/* Section cards */
body.light-mode .detail-panel #idSectionFields,
body.light-mode .detail-panel #idMoveBucketSection,
body.light-mode .detail-panel #idSectionPeople,
body.light-mode .detail-panel #idSectionComments         { background: #ffffff !important; border-color: #e6e3df !important; }

body.light-mode .detail-panel .field-label               { color: #9e9080; }
body.light-mode .detail-panel .detail-value              { color: #1c1810; }

/* Status chips */
body.light-mode .detail-panel .status-chip               { border-color: #d2cfca; color: #6b5e52; }
body.light-mode .detail-panel .status-chip:hover         { border-color: #b45309; color: #b45309; }
body.light-mode .detail-panel .status-chip.active        { background: #b45309; border-color: #b45309; color: #fff; }

/* Form inputs / selects */
body.light-mode .detail-panel .form-input,
body.light-mode .detail-panel select,
body.light-mode .detail-panel input[type="text"],
body.light-mode .detail-panel input[type="date"]         { background: #fff; border-color: #e6e3df; color: #1c1810; }
body.light-mode .detail-panel .form-input:focus,
body.light-mode .detail-panel select:focus,
body.light-mode .detail-panel input[type="text"]:focus,
body.light-mode .detail-panel input[type="date"]:focus   { border-color: #b45309; }
body.light-mode .detail-panel select option              { background: #ffffff; color: #1c1810; }

/* Source pill */
body.light-mode .detail-panel .source-pill               { background: rgba(0,0,0,.06); color: #6b5e52; }
body.light-mode .detail-panel .source-pill-edit          { background: rgba(180,83,9,.12); color: #b45309; }

/* Buttons */
body.light-mode .detail-panel .btn-primary,
body.light-mode .detail-panel button.btn-primary         { background: #b45309; color: #fff; }
body.light-mode .detail-panel .btn-primary:hover,
body.light-mode .detail-panel button.btn-primary:hover   { background: #92400e; }

body.light-mode .detail-panel .btn-secondary,
body.light-mode .detail-panel button.btn-secondary       { background: rgba(0,0,0,.06); color: #1c1810; border-color: #d2cfca; }
body.light-mode .detail-panel .btn-secondary:hover,
body.light-mode .detail-panel button.btn-secondary:hover { background: rgba(0,0,0,.1); }

/* Assignee chips */
body.light-mode .detail-panel .assignee-chip             { background: #f7f6f4; border-color: #e6e3df; }
body.light-mode .detail-panel .assignee-name             { color: #1c1810; }
body.light-mode .detail-panel .assignee-role             { color: #9e9080; }
body.light-mode .detail-panel .status-uninvited          { background: rgba(0,0,0,.06); color: #9e9080; }
body.light-mode .detail-panel .assignee-seen-tag.assignee-unseen { background: rgba(0,0,0,.06); color: #9e9080; }
body.light-mode .detail-panel .assignee-remove           { color: #9e9080; }

/* People picker dropdown */
body.light-mode .detail-panel .people-dropdown,
body.light-mode .detail-panel .pp-dropdown              { background: #ffffff; border-color: #d2cfca; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
body.light-mode .detail-panel .pd-item                  { border-bottom-color: #f0efed; }
body.light-mode .detail-panel .pd-item:hover            { background: rgba(0,0,0,.04); }
body.light-mode .detail-panel .pd-name                  { color: #1c1810; }
body.light-mode .detail-panel .pd-email                 { color: #9e9080; }
body.light-mode .detail-panel .pd-add-new               { color: #b45309; }
body.light-mode .detail-panel .pd-loading,
body.light-mode .detail-panel .pd-empty                 { color: #9e9080; }

/* People add form */
body.light-mode .detail-panel .people-add-form,
body.light-mode .detail-panel .pp-add-form              { background: #f7f6f4; border-color: #d2cfca; }
body.light-mode .detail-panel .people-add-form-title    { color: #6b5e52; }

/* Quill comment editor */
body.light-mode .detail-panel .ql-comment              { border-color: #e6e3df; background: #fff; }
body.light-mode .detail-panel .ql-comment .ql-toolbar  { background: #f7f6f4; border-bottom-color: #e6e3df; }
body.light-mode .detail-panel .ql-comment .ql-toolbar button,
body.light-mode .detail-panel .ql-comment .ql-toolbar .ql-picker-label { color: #6b5e52; }
body.light-mode .detail-panel .ql-comment .ql-toolbar button:hover,
body.light-mode .detail-panel .ql-comment .ql-toolbar button.ql-active { color: #b45309; }
body.light-mode .detail-panel .ql-comment .ql-toolbar .ql-stroke { stroke: #6b5e52; }
body.light-mode .detail-panel .ql-comment .ql-toolbar button:hover .ql-stroke,
body.light-mode .detail-panel .ql-comment .ql-toolbar button.ql-active .ql-stroke { stroke: #b45309; }
body.light-mode .detail-panel .ql-comment .ql-container { background: #fff; }
body.light-mode .detail-panel .ql-comment .ql-editor   { color: #1c1810; }
body.light-mode .detail-panel .ql-comment .ql-editor.ql-blank::before { color: #9e9080; }

/* Quill inline comment edit */
body.light-mode .detail-panel [id^="idCeEditor_"] .ql-toolbar   { background: #f7f6f4; border-bottom-color: #e6e3df; }
body.light-mode .detail-panel [id^="idCeEditor_"] .ql-container { background: #fff; }
body.light-mode .detail-panel [id^="idCeEditor_"] .ql-editor    { color: #1c1810; }
body.light-mode .detail-panel [id^="idCeEditor_"] .ql-toolbar .ql-stroke { stroke: #6b5e52; }

/* Quill description editor */
body.light-mode .detail-panel #idDescEditor .ql-toolbar          { background: #f7f6f4; border-bottom-color: #e6e3df; }
body.light-mode .detail-panel #idDescEditor .ql-container        { background: #fff; }
body.light-mode .detail-panel #idDescEditor .ql-editor           { color: #1c1810; }
body.light-mode .detail-panel #idDescEditor .ql-toolbar .ql-stroke { stroke: #6b5e52; }
body.light-mode .detail-panel #idDescEditor .ql-toolbar button:hover .ql-stroke { stroke: #b45309; }
body.light-mode .detail-panel #idDescEditor .ql-editor.ql-blank::before { color: #9e9080; }

/* Comment type selector */
body.light-mode .detail-panel .ip-comment-type-sel       { background: #fff; border-color: #e6e3df; color: #6b5e52; }

/* Audit toggle */
body.light-mode .detail-panel .audit-toggle-row          { color: #9e9080; }
body.light-mode .detail-panel .audit-toggle-row input[type="checkbox"] { accent-color: #b45309; }

/* Comment list */
body.light-mode .detail-panel .comment-item              { border-bottom-color: rgba(0,0,0,.06); }
body.light-mode .detail-panel .comment-item::before      { background: #d2cfca; }
body.light-mode .detail-panel .comment-item.ct-audit::before { background: #e0d8cc; }
body.light-mode .detail-panel .comment-date              { color: #6b5e52; }
body.light-mode .detail-panel .comment-author            { color: #6b5e52; }
body.light-mode .detail-panel .comment-body              { color: #2a2218; }

/* Activity action buttons */
body.light-mode .detail-panel .activity-edit-btn,
body.light-mode .detail-panel .activity-delete-btn       { border-color: rgba(0,0,0,.1); color: #6b5e52; background: none; }
body.light-mode .detail-panel .activity-edit-btn:hover   { color: #1c1810; border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.05); }

/* Delete section */
body.light-mode .detail-panel #idSectionDelete           { background: rgba(220,38,38,.04); border-color: rgba(220,38,38,.2) !important; }

/* ── 5. Capture modal (wm-*) ─────────────────────────────────── */
body.light-mode .wm-backdrop    { background: rgba(0,0,0,.35); }
body.light-mode .wm-modal       { background: #ffffff; border-color: #d2cfca; color: #1c1810;
                                   box-shadow: 0 32px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); }
body.light-mode .wm-header      { border-bottom-color: #e6e3df; }
body.light-mode .wm-header-title { color: #1c1810; }
body.light-mode .wm-close       { color: #9e9080; }
body.light-mode .wm-close:hover { background: #f0efed; color: #1c1810; }
body.light-mode .wm-row         { border-bottom-color: #e6e3df; }
body.light-mode .wm-label       { color: #9e9080; border-right-color: #e6e3df; }
body.light-mode .wm-input       { color: #1c1810; }
body.light-mode .wm-input::placeholder { color: #9e9080; }
body.light-mode .wm-input:focus { background: rgba(180,83,9,.04); }
body.light-mode .wm-status,
body.light-mode .wm-footer,
body.light-mode .wm-extra       { background: #f7f6f4; border-color: #e6e3df; }
body.light-mode .wm-hint        { color: #9e9080; }
body.light-mode .wm-hint kbd    { background: #e6e3df; color: #6b5e52; }

body.light-mode .wm-extra-input,
body.light-mode .wm-extra-select            { background: #fff; border-color: #e6e3df; color: #1c1810; }
body.light-mode .wm-extra-input:focus,
body.light-mode .wm-extra-select:focus      { border-color: #b45309; }
body.light-mode .wm-extra-select option     { background: #ffffff; color: #1c1810; }

body.light-mode .wm-priority-pill           { border-color: #e6e3df; background: #f7f6f4; color: #6b5e52; }
body.light-mode .wm-priority-pill:hover     { border-color: #9e9080; color: #1c1810; }
body.light-mode .wm-priority-pill.active[data-priority="LOW"] { background: rgba(0,0,0,.05); border-color: #d2cfca; color: #9e9080; }

body.light-mode .wm-pick-btn                { border-color: #e6e3df; background: #f7f6f4; color: #1c1810; }
body.light-mode .wm-pick-btn:hover          { border-color: #b45309; color: #b45309; }

/* ── 6. Pick-next hero card ──────────────────────────────────── */
body.light-mode .ex-pn-card      { background: #fffbf4; border-color: rgba(180,83,9,.25); }
body.light-mode .ex-pn-title     { color: #1c1810; }
body.light-mode .ex-pn-meta-key  { color: #b4a892; }
body.light-mode .ex-pn-meta-val  { color: #1c1810; }

/* ── 7. Date picker ──────────────────────────────────────────── */
body.light-mode .iop-date-picker {
    background: #ffffff;
    border-color: #d2cfca;
    color: #1c1810;
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
}
body.light-mode .iop-dp-header      { border-bottom-color: #e6e3df; }
body.light-mode .iop-dp-select      { background: #fff; border-color: #e6e3df; color: #1c1810; }
body.light-mode .iop-dp-select:focus { border-color: #b45309; }
body.light-mode .iop-dp-select option { background: #ffffff; }
body.light-mode .iop-dp-weekday      { color: #9e9080; }
body.light-mode .iop-dp-day          { color: #1c1810; }
body.light-mode .iop-dp-day:not(.empty):hover { background: rgba(180,83,9,.1); }
body.light-mode .iop-dp-day.today    { color: #b45309; }
body.light-mode .iop-dp-day.selected { background: #b45309; color: #fff; }
body.light-mode .iop-dp-day.selected:hover { background: #92400e; }
body.light-mode .iop-date-picker .btn-secondary       { background: rgba(0,0,0,.06); color: #1c1810; border-color: #d2cfca; }
body.light-mode .iop-date-picker .btn-secondary:hover { background: rgba(0,0,0,.1); color: #1c1810; }
body.light-mode .iop-date-picker .btn-primary         { background: #b45309; }
body.light-mode .iop-date-picker .btn-primary:hover   { background: #92400e; }

/* ── 8. Lists (lc-*) ─────────────────────────────────────────── */
body.light-mode .lc-item-dot.NONE { background: #d2cfca; }
body.light-mode .lc-modal-overlay { background: rgba(0,0,0,.35); }
body.light-mode .lc-modal         { background: #ffffff; border-color: #d2cfca; box-shadow: 0 24px 60px rgba(0,0,0,.12); }
body.light-mode .lc-modal-header  { border-bottom-color: #e6e3df; }
body.light-mode .lc-input,
body.light-mode .lc-textarea      { background: #fff; border-color: #e6e3df; color: #1c1810; }
body.light-mode .lc-input:focus,
body.light-mode .lc-textarea:focus { border-color: #b45309; }
body.light-mode .lc-search        { background: #fff; border-color: #e6e3df; color: #1c1810; }
body.light-mode .lc-search:focus  { border-color: #b45309; box-shadow: 0 0 0 3px rgba(180,83,9,.08); }
body.light-mode .lc-card:hover    { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
body.light-mode .lc-footer-btn:hover { background: rgba(0,0,0,.06); }
.lc-footer-btn.pin-active     { color: #f0b429; border-color: rgba(240,180,41,.3); }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first layout
   Root rule: nothing should ever be wider than 100vw.
   Fix order: shell containment → topbar → sidebar drawer →
              page content → per-component stacking.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. Global containment — prevents ANY element pushing page wider ── */
html, body           { overflow-x: hidden; max-width: 100%; }
.ex-shell.exl-shell  { overflow-x: hidden; max-width: 100vw; }

/* ── Tablet (≤900px) ─────────────────────────────────────────── */
@media (max-width: 900px) {
    :root                        { --exl-sidebar-w: 200px; }
    .exl-page-content            { padding: 20px; }
    .exl-subbar                  { padding: 8px 20px; }
    .fbrd-hero                   { padding: 24px 20px 20px; }
    .fbrd-board                  { padding: 0 20px 20px; }
    .ex-week-cols                { grid-template-columns: repeat(2, 1fr); }
}

/* ── Phone (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── 1. Shell: contain and clip overflow at every container level ── */
    .exl-body                    { overflow: visible; max-width: 100%; }
    .exl-main                    { overflow-x: hidden; min-width: 0; max-width: 100%; }
    .ex-body                     { overflow: visible; min-width: 0; max-width: 100%; }
    .ex-main                     { overflow-x: hidden; min-width: 0; flex: 1; }

    /* ── 2. Sidebar: fixed drawer, hidden by default via transform ── */
    /* JS in template.php adds exl-sidebar-collapsed on load.         */
    .exl-sidebar {
        position: fixed !important;
        top: var(--exl-topbar-h) !important;
        left: 0 !important; bottom: 0 !important;
        z-index: 200 !important;
        width: 280px !important;
        min-width: 280px !important;
        overflow-y: auto !important;
        transform: translateX(-100%);
        opacity: 1 !important;
        transition: transform .25s cubic-bezier(.22,.6,.36,1) !important;
    }
    .exl-shell.exl-sidebar-collapsed .exl-sidebar {
        width: 280px !important;
        min-width: 280px !important;
        overflow-y: auto !important;
        transform: translateX(-100%) !important;
        opacity: 1 !important;
    }
    .exl-shell:not(.exl-sidebar-collapsed) .exl-sidebar {
        transform: translateX(0) !important;
        box-shadow: 4px 0 32px rgba(0,0,0,.5);
    }
    .exl-shell:not(.exl-sidebar-collapsed)::after {
        content: ''; position: fixed; inset: 0;
        background: rgba(0,0,0,.5); z-index: 199;
    }

    /* ── 3. Topbar: compact, QC + theme always visible ── */
    .ex-topbar                   { padding: 0 12px; grid-template-columns: 1fr auto; }
    .exl-topbar-search           { display: none; }
    .exl-topbar-left             { gap: 8px; overflow: hidden; min-width: 0; }
    .exl-topbar-title            { display: none; }
    .exl-product-name            { display: block; }  /* show on mobile */
    .exl-topbar-right            { gap: 6px; }
    .exl-capture-btn             { padding: 7px 10px; }
    .exl-capture-btn span        { display: none; }   /* icon only */
    /* Hide the executive page's attention topbar widgets on mobile */
    .ex-attention-pill,
    .ex-status-badge             { display: none; }

    /* ── 4. Subbar / tab strip ───────────────────────────────── */
    .exl-subbar {
        padding: 0 12px;
        overflow-x: hidden;  /* clip — inner tabs handle their own scroll */
    }
    .ex-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 2px;
        padding: 6px 0;
    }
    .ex-tabs::-webkit-scrollbar  { display: none; }
    .ex-tab                      { padding: 5px 10px; font-size: 12px; flex-shrink: 0; }

    /* ── 5. Old executive shell topbar (Radar/Attention tabs bar) */
    .ex-topbar                   { padding: 0 12px; gap: 8px; overflow: hidden; }
    .ex-topbar-meta              { display: none; }
    .ex-logo-name                { display: none; }

    /* ── 6. Page content padding ─────────────────────────────── */
    .exl-page-content            { padding: 16px; }

    /* ── 7. Attention sorting: card list ────────────────────────*/
    .ex-card-list                { padding: 0 14px 20px; }
    .ex-card                     { padding: 14px 14px 12px; }
    .ex-card-actions             { gap: 5px; }
    .ex-action-btn               { padding: 5px 8px; font-size: 10px; }

    /* ── 8. This Week: stack header, collapse to single column ── */
    .ex-week-wrap                { padding: 16px 14px; }
    .ex-week-header              { flex-direction: column; gap: 16px; }
    .ex-week-title               { font-size: 26px; }
    .ex-week-stats               { flex-shrink: 1; gap: 18px; padding-top: 0; }
    .ex-week-stat                { text-align: left; }
    .ex-week-cols                { grid-template-columns: 1fr; gap: 10px; }

    /* ── 9. Flightboard: hero stacks, board stays horizontal ─── */
    .fbrd-hero {
        flex-direction: column;
        padding: 18px 14px 14px;
        gap: 12px;
    }
    .fbrd-hero-right             { flex-wrap: wrap; padding-top: 0; width: 100%; gap: 8px; }
    .fbrd-title                  { font-size: 20px; }
    .fbrd-subtitle               { font-size: 12px; max-width: 100%; }
    .fbrd-board                  { padding: 0 10px 16px; }
    .fbrd-stat-pill,
    .fbrd-filter-btn             { padding: 6px 10px; font-size: 10px; }

    /* ── 10. Pick Next hero card + alternates ───────────────── */
    /* exl-page-content already pads the sides; zero out focus-wrap's
       own padding to avoid double-padding that squeezes content */
    .ex-focus-wrap               { padding: 0 !important; overflow: hidden !important; max-width: 100% !important; }
    .ex-pn-card                  { padding: 22px 18px 20px !important; max-width: 100% !important; }
    .ex-pn-title                 { font-size: 26px !important; max-width: 100% !important; letter-spacing: -.5px; }
    .ex-pn-rings                 { display: none !important; }
    .ex-pn-meta                  { grid-template-columns: 1fr 1fr !important; gap: 12px 16px !important; margin-bottom: 20px; }
    .ex-pn-meta-val              { font-size: 14px !important; word-break: break-word; }
    .ex-pn-actions               { flex-wrap: wrap !important; gap: 8px !important; }
    .ex-pn-btn-primary           { font-size: 12px !important; padding: 12px 20px !important; }
    /* Alternates: hide the right-side meta column so items don't overflow */
    .ex-alt-item                 { overflow: hidden !important; max-width: 100% !important; }
    .ex-alt-item-meta            { display: none !important; }

    /* ── 11. Detail panel: full width ───────────────────────── */
    .detail-panel                { width: 100vw !important; }

    /* ── 12. Lists page ──────────────────────────────────────── */
    .lc-hero                     { flex-direction: column; gap: 14px; }
    .lc-hero-right               { width: 100%; flex-wrap: wrap; }
    .lc-hero-stats               { flex-wrap: wrap; gap: 12px; }
    .lc-hero-stat                { border-right: none; padding-right: 0; }
    .lc-toolbar                  { flex-wrap: wrap; gap: 8px; }
    .lc-search-wrap              { max-width: 100%; width: 100%; }
    .lc-grid                     { grid-template-columns: repeat(2, 1fr) !important; }
    .lc-grid-2                   { grid-template-columns: 1fr !important; }

    /* ── 13. Crew page — cards on mobile ────────────────────── */
    .crw-hero                    { flex-direction: column; gap: 14px; }
    .crw-hero-right              { width: 100%; }
    .crw-toolbar                 { flex-wrap: wrap; gap: 8px; }
    .crw-pills                   { flex-wrap: wrap; gap: 6px; }
    .crw-search                  { width: 100%; box-sizing: border-box; }

    /* Convert table → stack of cards */
    .crw-table-wrap              { overflow: visible; border: none; background: transparent;
                                   border-radius: 0; padding: 0; }
    .crw-table,
    .crw-table tbody,
    .crw-table tr                { display: block; width: 100%; }
    .crw-table thead             { display: none; }
    .crw-table tbody tr          { background: var(--ex-card); border: 1px solid var(--ex-border);
                                   border-radius: 12px; padding: 14px 16px;
                                   margin-bottom: 10px; overflow: hidden; }
    .crw-table tbody tr:hover .crw-td { background: transparent; }

    /* Strip table cell styling */
    .crw-td                      { display: block !important; padding: 0 !important;
                                   border: none !important; background: transparent !important; }

    /* Row 1: avatar + name */
    .crw-td:nth-child(1)         { margin-bottom: 6px; }

    /* Row 2: email — show (override any hide rule), indent to align under name */
    .crw-td:nth-child(2)         { display: block !important; padding-left: 48px !important;
                                   margin-bottom: 12px; }

    /* Bottom row: status left, actions right */
    .crw-td:nth-child(3)         { display: inline-flex !important; vertical-align: middle;
                                   align-items: center; }
    .crw-td:nth-child(4)         { float: right; }
    .crw-actions                 { gap: 6px; }

    /* ── 14. Modals: full width on phone ─────────────────────── */
    .ex-modal, .lc-modal         { width: calc(100vw - 32px) !important; max-width: 100% !important; margin: 0 16px; }
    .lc-modal-overlay,
    .modal-overlay               { align-items: flex-end; padding-bottom: 0; }
    .lc-modal                    { border-radius: 12px 12px 0 0 !important; }
}

/* ── Small phones (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {

    /* Topbar */
    .exl-topbar-title            { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Page content */
    .exl-page-content            { padding: 10px; }

    /* Attention sorting */
    .ex-card-list                { padding: 0 10px 16px; }
    .ex-card                     { padding: 12px 12px 10px; }
    .ex-card-title               { font-size: 14px; }

    /* Flightboard */
    .fbrd-hero                   { padding: 14px 10px 10px; }
    .fbrd-title                  { font-size: 18px; }
    .fbrd-subtitle               { display: none; }
    .fbrd-board                  { padding: 0 6px 10px; }
    .fbrd-col                    { min-width: 230px; }

    /* Pick Next */
    .ex-pn-card                  { padding: 20px 16px; }
    .ex-pn-title                 { font-size: 22px; }
    .ex-pn-meta                  { grid-template-columns: 1fr; gap: 10px; }

    /* Lists: single column */
    .lc-grid, .lc-grid-2         { grid-template-columns: 1fr !important; }

    /* Crew */
    .crw-title                   { font-size: 24px; }
    .crw-pill                    { font-size: 11px; padding: 5px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   FLIGHT PLAN — fp-* classes
   Weekly time-based calendar with load metrics per day.
═══════════════════════════════════════════════════════════════ */

/* ── Shell ─────────────────────────────────────────────────── */
.fp-shell {
    display: block;
    padding-bottom: 32px;
}

/* ── Hero ──────────────────────────────────────────────────── */
.fp-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 32px 20px;
    flex-wrap: wrap;
}
.fp-hero-left  { min-width: 0; }
.fp-hero-right { flex: 0 0 auto; }

.fp-breadcrumb {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ex-dim);
    margin-bottom: 8px;
}
.fp-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ex-text);
    line-height: 1.2;
    letter-spacing: -.5px;
    margin-bottom: 10px;
}
.fp-subtitle {
    font-size: 13px;
    color: var(--ex-sub);
    line-height: 1.55;
    max-width: 560px;
}
.fp-subtitle-accent {
    color: var(--ex-accent);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* ── Controls row ──────────────────────────────────────────── */
.fp-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.fp-toggle-group {
    display: flex;
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    overflow: hidden;
}
.fp-toggle-btn {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ex-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.fp-toggle-btn:hover  { background: rgba(255,255,255,.06); color: var(--ex-text); }
.fp-toggle-btn.active { background: var(--ex-accent); color: #fff; }

.fp-week-nav {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    overflow: hidden;
}
.fp-nav-btn {
    padding: 6px 10px;
    font-size: 15px;
    color: var(--ex-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, color .15s;
}
.fp-nav-btn:hover { background: rgba(255,255,255,.06); color: var(--ex-text); }
.fp-week-label {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--ex-text);
    white-space: nowrap;
    border-left: 1px solid var(--ex-border);
    border-right: 1px solid var(--ex-border);
}
.fp-today-btn {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ex-accent);
    background: transparent;
    border: 1px solid var(--ex-accent);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.fp-today-btn:hover { background: var(--ex-accent); color: #fff; }

/* ── Stats strip ───────────────────────────────────────────── */
.fp-stats-strip {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--ex-border);
    border-bottom: 1px solid var(--ex-border);
    margin: 0 32px 0;
    border-left: 1px solid var(--ex-border);
    border-radius: 8px;
    overflow: hidden;
}
.fp-stat {
    flex: 1;
    padding: 16px 22px;
    border-right: 1px solid var(--ex-border);
}
.fp-stat-last { border-right: none; }
.fp-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ex-dim);
    margin-bottom: 6px;
    white-space: nowrap;
}
.fp-stat-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--ex-text);
    line-height: 1;
}
.fp-stat-amber { color: var(--ex-accent); }
.fp-stat-green { color: #4ade80; }

/* ── Calendar outer ────────────────────────────────────────── */
.fp-cal-outer {
    margin: 20px 32px 0;
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ex-surface);
}

/* ── Sticky day-header row ─────────────────────────────────── */
.fp-cal-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--ex-surface);
    border-bottom: 2px solid var(--ex-border);
}
.fp-gutter-head {
    width: 56px;
    flex-shrink: 0;
    border-right: 1px solid var(--ex-border);
}
.fp-day-head {
    flex: 1;
    padding: 10px 12px 8px;
    border-left: 1px solid var(--ex-border);
    min-width: 0;
}
.fp-day-head-today {
    background: rgba(180,83,9,.07);
}
.fp-dh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.fp-dh-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ex-dim);
    display: flex;
    align-items: center;
    gap: 5px;
}
.fp-today-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--ex-accent);
    letter-spacing: .08em;
}
.fp-dh-load-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.fp-dh-load-lbl {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ex-dim);
}
.fp-dh-load-pct {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.3px;
}
.fp-load-green  { color: #4ade80; }
.fp-load-amber  { color: #f59e0b; }
.fp-load-orange { color: #f97316; }
.fp-load-red    { color: #ef4444; }

.fp-dh-date {
    font-size: 26px;
    font-weight: 800;
    color: var(--ex-text);
    line-height: 1;
    letter-spacing: -.5px;
    margin-bottom: 5px;
}
.fp-dh-bar-wrap {
    height: 3px;
    background: var(--ex-border);
    border-radius: 2px;
    margin-bottom: 5px;
    overflow: hidden;
}
.fp-dh-bar {
    height: 3px;
    border-radius: 2px;
    transition: width .3s;
}
.fp-dh-meta {
    font-size: 10px;
    color: var(--ex-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Calendar body (time grid) ─────────────────────────────── */
.fp-cal-body {
    display: flex;
    position: relative;
}

/* Left time gutter */
.fp-time-col {
    width: 56px;
    flex-shrink: 0;
    position: relative;
    border-right: 1px solid var(--ex-border);
}
.fp-time-lbl {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--ex-dim);
    white-space: nowrap;
    pointer-events: none;
}

/* Day columns container */
.fp-day-cols {
    display: flex;
    flex: 1;
    position: relative;
}
.fp-day-col {
    flex: 1;
    border-left: 1px solid var(--ex-border);
    position: relative;
    min-width: 0;
}
.fp-day-col:first-child { border-left: none; }
.fp-day-col-today { background: rgba(180,83,9,.04); }

/* Hour grid lines */
.fp-hour-line {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--ex-border);
    pointer-events: none;
}

/* Current-time indicator */
.fp-now-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--ex-accent);
    z-index: 5;
    pointer-events: none;
}
.fp-now-dot {
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ex-accent);
}

/* ── Event blocks ──────────────────────────────────────────── */
.fp-ev {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 8px 10px;
    overflow: hidden;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: filter .15s;
    box-sizing: border-box;
}
.fp-ev:hover { filter: brightness(1.15); }
.fp-ev-clickable { cursor: pointer; }
.fp-ev-clickable:hover { filter: brightness(1.2); box-shadow: 0 0 0 1px rgba(255,255,255,.15); }

.fp-ev-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-ev-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.fp-ev-short .fp-ev-title { display: none; }
.fp-ev-short .fp-ev-label { margin-bottom: 0; }

.fp-ev-bucket {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,.35);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Done items — muted strikethrough */
.fp-ev-done {
    background: rgba(255,255,255,.04);
    border-left-color: var(--ex-border);
    opacity: .55;
}
.fp-ev-done .fp-ev-label { color: var(--ex-dim); }
.fp-ev-done .fp-ev-title { color: var(--ex-sub); text-decoration: line-through; }

/* P0 / own work — amber */
.fp-ev-p0 {
    background: rgba(180,83,9,.22);
    border-left-color: #d97706;
}
.fp-ev-p0 .fp-ev-label { color: #fbbf24; }
.fp-ev-p0 .fp-ev-title { color: #fde68a; }

/* Focus block — dark green */
.fp-ev-focus {
    background: rgba(20,83,45,.55);
    border-left-color: #16a34a;
}
.fp-ev-focus .fp-ev-label { color: #4ade80; }
.fp-ev-focus .fp-ev-title { color: #bbf7d0; }

/* Meeting — charcoal */
.fp-ev-meeting {
    background: #1e1e26;
    border-left-color: #3d3d50;
}
.fp-ev-meeting .fp-ev-label { color: #8888a0; }
.fp-ev-meeting .fp-ev-title { color: #d4d4e4; }

/* Delegated — dashed dark */
.fp-ev-delegated {
    background: rgba(12,12,18,.7);
    border-left: none;
    outline: 1.5px dashed #4b4b60;
    outline-offset: -2px;
}
.fp-ev-delegated .fp-ev-label { color: #7070a0; }
.fp-ev-delegated .fp-ev-title { color: #9898b8; }

/* Waiting — dashed amber */
.fp-ev-waiting {
    background: rgba(180,83,9,.06);
    border-left: none;
    outline: 1.5px dashed #b45309;
    outline-offset: -2px;
}
.fp-ev-waiting .fp-ev-label { color: #d97706; }
.fp-ev-waiting .fp-ev-title { color: #fbbf24; }

/* Decision — blue */
.fp-ev-decision {
    background: rgba(37,99,235,.22);
    border-left-color: #3b82f6;
}
.fp-ev-decision .fp-ev-label { color: #60a5fa; }
.fp-ev-decision .fp-ev-title { color: #bfdbfe; }

/* ── Legend ────────────────────────────────────────────────── */
.fp-legend {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 16px 32px 24px;
    border-top: 1px solid var(--ex-border);
    margin-top: 16px;
}
.fp-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ex-dim);
}
.fp-ld {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.fp-ld-p0        { background: #d97706; }
.fp-ld-decision  { background: #3b82f6; }
.fp-ld-focus     { background: #16a34a; }
.fp-ld-meeting   { background: #3d3d50; }
.fp-ld-delegated { background: transparent; outline: 1.5px dashed #4b4b60; }
.fp-ld-waiting   { background: transparent; outline: 1.5px dashed #b45309; }

/* ── Loading state ─────────────────────────────────────────── */
.fp-loading {
    padding: 40px;
    color: var(--ex-dim);
    font-size: 13px;
}
.fp-day-empty {
    position: absolute;
    top: calc((9 - 8) * 80px + 28px);
    left: 0; right: 0;
    text-align: center;
    font-size: 18px;
    color: var(--ex-border);
    pointer-events: none;
}

/* ── Light mode overrides ──────────────────────────────────── */
/* P0 — warm amber tint */
body.light-mode .fp-ev-p0            { background: #fef3e2; border-left-color: #d97706; }
body.light-mode .fp-ev-p0 .fp-ev-label { color: #b45309; }
body.light-mode .fp-ev-p0 .fp-ev-title { color: #78350f; }

/* Focus — mint green tint */
body.light-mode .fp-ev-focus         { background: #e8f8ef; border-left-color: #22c55e; }
body.light-mode .fp-ev-focus .fp-ev-label { color: #16a34a; }
body.light-mode .fp-ev-focus .fp-ev-title { color: #14532d; }

/* Meeting — cool gray tint */
body.light-mode .fp-ev-meeting       { background: #ebebf2; border-left-color: #a0a0bc; }
body.light-mode .fp-ev-meeting .fp-ev-label { color: #5c5c84; }
body.light-mode .fp-ev-meeting .fp-ev-title { color: #2c2c44; }

/* Delegated — neutral dashed */
body.light-mode .fp-ev-delegated     { background: rgba(0,0,0,.04); outline-color: #9090b0; }
body.light-mode .fp-ev-delegated .fp-ev-label { color: #7070a0; }
body.light-mode .fp-ev-delegated .fp-ev-title { color: #3a3a60; }

/* Waiting — amber dashed */
body.light-mode .fp-ev-waiting       { background: #fefae8; outline-color: #d97706; }
body.light-mode .fp-ev-waiting .fp-ev-label { color: #b45309; }
body.light-mode .fp-ev-waiting .fp-ev-title { color: #78350f; }

/* Decision — blue tint */
body.light-mode .fp-ev-decision      { background: #eef4ff; border-left-color: #3b82f6; }
body.light-mode .fp-ev-decision .fp-ev-label { color: #1d4ed8; }
body.light-mode .fp-ev-decision .fp-ev-title { color: #1e3a8a; }

/* Done — muted */
body.light-mode .fp-ev-done          { background: rgba(0,0,0,.03); border-left-color: #c0c0c8; }
body.light-mode .fp-ev-done .fp-ev-label { color: #9090a8; }
body.light-mode .fp-ev-done .fp-ev-title { color: #9090a8; }

/* Shared light mode tokens */
body.light-mode .fp-ev-bucket        { color: rgba(0,0,0,.4); }
body.light-mode .fp-day-col-today    { background: rgba(180,83,9,.05); }
body.light-mode .fp-day-head-today   { background: rgba(180,83,9,.08); }
body.light-mode .fp-ld-meeting       { background: #a0a0bc; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .fp-hero                    { padding: 20px 16px 14px; }
    .fp-stats-strip             { margin: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
    .fp-stat                    { min-width: 130px; padding: 12px 16px; }
    .fp-cal-outer               { margin: 14px 16px 0; }
    .fp-legend                  { padding: 12px 16px 16px; gap: 16px; }
}
@media (max-width: 768px) {
    .fp-hero                    { flex-direction: column; gap: 14px; }
    .fp-hero-right              { width: 100%; }
    .fp-controls                { justify-content: flex-start; }
    .fp-title                   { font-size: 20px; }
    .fp-stats-strip             { margin: 0 12px; }
    .fp-cal-outer               { margin: 12px 12px 0; }
    .fp-cal-outer               { overflow-x: auto; }
    .fp-cal-head,
    .fp-cal-body                { min-width: 1036px; } /* 56px gutter + 7×140px cols */
    .fp-day-col                 { min-width: 140px; flex-shrink: 0; }
    .fp-dh-date                 { font-size: 20px; }
    .fp-legend                  { padding: 10px 12px 16px; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Flight Plan — Month View
═══════════════════════════════════════════════════════════════ */

/* ── Container & day-of-week header ────────────────────────── */
.fp-month-outer {
    margin: 20px 32px 32px;
}
.fp-month-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}
.fp-mh-cell {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--ex-dim);
}
.fp-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* ── Day cell shell ─────────────────────────────────────────── */
.fp-mc {
    min-height: 112px;
    padding: 10px 12px 8px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    transition: border-color .12s;
}
.fp-mc:not(.fp-mc-outside):hover {
    border-color: rgba(255,255,255,0.28);
}

/* ── Heat map backgrounds — dark mode ──────────────────────── */
.fp-mc-heat-0  { background: #0c0d0b; }
.fp-mc-heat-10 { background: #0f120d; }
.fp-mc-heat-20 { background: #141708; }
.fp-mc-heat-30 { background: #1a1d06; }
.fp-mc-heat-40 { background: #242105; }
.fp-mc-heat-50 { background: #2e2803; }
.fp-mc-heat-60 { background: #392f03; }
.fp-mc-heat-70 { background: #443703; }
.fp-mc-heat-80 { background: #503e02; }
.fp-mc-heat-90 { background: #5e4800; }

/* ── Today & overload highlights ───────────────────────────── */
.fp-mc.fp-mc-today {
    border-color: #c08010 !important;
    background: #5e4800 !important;
}
.fp-mc.fp-mc-ol:not(.fp-mc-today) {
    background: #634c00 !important;
}

/* ── Outside current month ──────────────────────────────────── */
.fp-mc.fp-mc-outside {
    opacity: 0.3;
    cursor: default;
}

/* ── Cell top: date + load % ────────────────────────────────── */
.fp-mc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}
.fp-mc-date {
    font-size: 21px;
    font-weight: 700;
    color: var(--ex-text);
    line-height: 1;
    letter-spacing: -.5px;
}
.fp-mc-date.fp-mc-date-today { color: #f5c032; }
.fp-mc-load {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    padding-top: 3px;
}

/* ── Dots row ───────────────────────────────────────────────── */
.fp-mc-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}
.fp-mc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    box-sizing: border-box;
}
.fp-dot-p0        { background: #f59e0b; }
.fp-dot-decision  { background: #60a5fa; }
.fp-dot-focus     { background: #4ade80; }
.fp-dot-meeting   { background: #5a6480; }
.fp-dot-delegated { background: #3d3d50; border: 1px solid #5a6480; }
.fp-dot-waiting   { background: transparent; border: 1.5px solid #8090a8; }
.fp-dot-done      { background: #374151; }
.fp-mc-dot-more {
    font-size: 9px;
    color: var(--ex-dim);
    font-weight: 600;
    line-height: 1;
}

/* ── Overload badge ─────────────────────────────────────────── */
.fp-mc-ol-badge {
    font-size: 9px;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: .8px;
    margin-top: auto;
    flex-shrink: 0;
}

/* ── Clear label ────────────────────────────────────────────── */
.fp-mc-clear {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.06);
    letter-spacing: 1px;
    margin-top: auto;
    flex-shrink: 0;
}

/* ── Legend label prefix ────────────────────────────────────── */
.fp-legend-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--ex-dim);
    margin-right: 4px;
    flex-shrink: 0;
}

/* ── Instant Triage button ──────────────────────────────────── */
.fp-triage-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 8px;
    padding: 9px 16px 9px 12px;
    cursor: pointer;
    z-index: 50;
    user-select: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    transition: border-color .15s;
}
.fp-triage-btn:hover { border-color: var(--ex-accent); }
.fp-triage-kbds {
    display: flex;
    gap: 4px;
    align-items: center;
}
.fp-triage-kbd {
    background: var(--ex-bg);
    border: 1px solid var(--ex-border);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ex-text-muted);
    font-family: monospace;
    line-height: 18px;
}
.fp-triage-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ex-text);
    letter-spacing: 1px;
}

/* ── Light mode overrides ───────────────────────────────────── */
body.light-mode .fp-mc          { border-color: rgba(0,0,0,0.10); }
body.light-mode .fp-mc:not(.fp-mc-outside):hover { border-color: rgba(0,0,0,0.22); }
/* Heat map: sage/mint (light load) → warm peach → terracotta (high load) */
body.light-mode .fp-mc-heat-0  { background: #eaf4ef; }
body.light-mode .fp-mc-heat-10 { background: #ddece6; }
body.light-mode .fp-mc-heat-20 { background: #cee4dc; }
body.light-mode .fp-mc-heat-30 { background: #bfdcd2; }
body.light-mode .fp-mc-heat-40 { background: #b0d4c8; }
body.light-mode .fp-mc-heat-50 { background: #e8ccb8; }
body.light-mode .fp-mc-heat-60 { background: #d9b89e; }
body.light-mode .fp-mc-heat-70 { background: #c8a284; }
body.light-mode .fp-mc-heat-80 { background: #b88c6c; }
body.light-mode .fp-mc-heat-90 { background: #a87654; }
/* Today: deep terracotta with rust border */
body.light-mode .fp-mc.fp-mc-today {
    border-color: #b85828 !important;
    background: oklab(0.555283 0.0954647 0.10981 / 0.35) !important;
}
body.light-mode .fp-mc.fp-mc-ol:not(.fp-mc-today) { background: #b07c5c !important; }
/* Text */
body.light-mode .fp-mc-date               { color: #1e1810; }
body.light-mode .fp-mc-date.fp-mc-date-today { color: #b85828; }
body.light-mode .fp-mc-clear              { color: rgba(0,0,0,0.16); }
body.light-mode .fp-mc-ol-badge           { color: #8c3810; }
/* Load % text — readable on both sage and peach backgrounds */
body.light-mode .fp-month-outer .fp-load-green  { color: #1a7055; }
body.light-mode .fp-month-outer .fp-load-amber  { color: #9c4c18; }
body.light-mode .fp-month-outer .fp-load-orange { color: #b03a10; }
body.light-mode .fp-month-outer .fp-load-red    { color: #a02010; }
/* Dots */
body.light-mode .fp-dot-p0        { background: #d4621e; }
body.light-mode .fp-dot-decision  { background: #3a8ec0; }
body.light-mode .fp-dot-focus     { background: #2a9a60; }
body.light-mode .fp-dot-meeting   { background: #8a9aaa; }
body.light-mode .fp-dot-delegated { background: #c8d8d0; border-color: #8a9aaa; }
body.light-mode .fp-dot-waiting   { border-color: #8a9aaa; }
body.light-mode .fp-dot-done      { background: #c0ccc8; }
body.light-mode .fp-triage-btn    { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .fp-month-outer { margin: 14px 16px 24px; }
}
@media (max-width: 768px) {
    .fp-month-outer    { margin: 12px 12px 24px; overflow-x: auto; }
    .fp-month-head,
    .fp-month-grid     { min-width: 560px; }
    .fp-mc             { min-height: 80px; padding: 8px 8px 6px; gap: 4px; }
    .fp-mc-date        { font-size: 16px; }
    .fp-mc-load        { font-size: 10px; }
    .fp-mc-dot         { width: 7px; height: 7px; }
    .fp-triage-btn     { bottom: 12px; right: 12px; padding: 8px 12px 8px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   Flight Plan — Day Detail Modal
═══════════════════════════════════════════════════════════════ */

/* ── Overlay ────────────────────────────────────────────────── */
.fp-day-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}

/* ── Panel ──────────────────────────────────────────────────── */
.fp-day-panel {
    background: #18181f;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    width: min(520px, 100%);
    max-height: min(82vh, 680px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    font-family: var(--ex-font);
}
.fp-day-panel button,
.fp-day-panel input {
    font-family: var(--ex-font);
}

/* ── Header ─────────────────────────────────────────────────── */
.fp-dm-head {
    padding: 22px 24px 0;
    position: relative;
    flex-shrink: 0;
}
.fp-dm-month-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,.35);
    margin-bottom: 6px;
}
.fp-dm-title-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}
.fp-dm-day-name {
    font-size: 32px;
    font-weight: 800;
    color: #f5c032;
    letter-spacing: -.5px;
    line-height: 1;
}
.fp-dm-load-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}
.fp-dm-counts {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 18px;
}
.fp-dm-count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    color: rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    gap: 5px;
}
.fp-dm-n { font-size: 13px; font-weight: 800; }
.fp-dm-n-p0        { color: #f59e0b; }
.fp-dm-n-decision  { color: #60a5fa; }
.fp-dm-n-focus     { color: #4ade80; }
.fp-dm-n-meeting   { color: rgba(255,255,255,.55); }
.fp-dm-n-delegated { color: rgba(255,255,255,.4); }
.fp-dm-n-waiting   { color: rgba(255,255,255,.4); }
.fp-dm-close-x {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255,255,255,.35);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.fp-dm-close-x:hover { color: var(--ex-text); background: rgba(255,255,255,.06); }

/* ── Divider ────────────────────────────────────────────────── */
.fp-dm-divider {
    height: 1px;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
}

/* ── Item list ──────────────────────────────────────────────── */
.fp-dm-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.fp-dm-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 24px;
    cursor: pointer;
    transition: background .1s;
    border-radius: 0;
}
.fp-dm-item:hover {
    background: rgba(255,255,255,.05);
}
.fp-dm-item:hover .fp-dm-item-title {
    color: #fff;
}
.fp-dm-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
}
.fp-dm-item-body {
    flex: 1;
    min-width: 0;
}
.fp-dm-item-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color .1s;
}
.fp-dm-item-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    color: rgba(255,255,255,.3);
    margin-top: 3px;
}
.fp-dm-item-arrow {
    color: rgba(255,255,255,.2);
    font-size: 14px;
    flex-shrink: 0;
    transition: color .1s, transform .1s;
}
.fp-dm-item:hover .fp-dm-item-arrow {
    color: rgba(255,255,255,.5);
    transform: translateX(2px);
}

/* ── Empty state ────────────────────────────────────────────── */
.fp-dm-empty {
    padding: 36px 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.25);
    letter-spacing: .4px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.fp-dm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.fp-dm-add-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,.35);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.fp-dm-add-btn:hover { color: var(--ex-text); background: rgba(255,255,255,.06); }
.fp-dm-close-btn {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 7px;
    transition: background .15s, border-color .15s;
}
.fp-dm-close-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }

/* ── Dot colours reused from month grid ─────────────────────── */
/* fp-dot-* classes already defined above */

/* ── Light mode ─────────────────────────────────────────────── */
body.light-mode .fp-day-panel {
    background: #ffffff;
    border-color: rgba(0,0,0,.10);
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
}
body.light-mode .fp-dm-month-label  { color: rgba(0,0,0,.35); }
body.light-mode .fp-dm-day-name     { color: #b85828; }
body.light-mode .fp-dm-count        { color: rgba(0,0,0,.4); }
body.light-mode .fp-dm-n-meeting    { color: rgba(0,0,0,.5); }
body.light-mode .fp-dm-close-x      { color: rgba(0,0,0,.35); }
body.light-mode .fp-dm-close-x:hover { color: #1a1a2e; background: rgba(0,0,0,.06); }
body.light-mode .fp-dm-divider      { background: rgba(0,0,0,.08); }
body.light-mode .fp-dm-item:hover   { background: rgba(0,0,0,.04); }
body.light-mode .fp-dm-item-title   { color: #1a1a2e; }
body.light-mode .fp-dm-item:hover .fp-dm-item-title { color: #000; }
body.light-mode .fp-dm-item-type    { color: rgba(0,0,0,.35); }
body.light-mode .fp-dm-item-arrow   { color: rgba(0,0,0,.2); }
body.light-mode .fp-dm-item:hover .fp-dm-item-arrow { color: rgba(0,0,0,.5); }
body.light-mode .fp-dm-empty        { color: rgba(0,0,0,.28); }
body.light-mode .fp-dm-footer       { border-top-color: rgba(0,0,0,.08); }
body.light-mode .fp-dm-add-btn      { color: rgba(0,0,0,.35); }
body.light-mode .fp-dm-add-btn:hover { color: #1a1a2e; background: rgba(0,0,0,.05); }
body.light-mode .fp-dm-close-btn    { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); color: #1a1a2e; }
body.light-mode .fp-dm-close-btn:hover { background: rgba(0,0,0,.10); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fp-day-overlay   { padding: 0; align-items: flex-end; }
    .fp-day-panel     { border-radius: 14px 14px 0 0; max-height: 88vh; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Hangar Detail (list-detail)  — prefix: hd-
   ══════════════════════════════════════════════════════════════ */

/* Hero / header */
.hd-header {
    padding: 28px 0 22px;
    border-bottom: 1px solid var(--ex-border);
    margin-bottom: 0;
}
.hd-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hd-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ex-text);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 6px;
}
.hd-desc {
    font-size: 13px;
    color: var(--ex-sub);
    margin-bottom: 10px;
    max-width: 580px;
}
.hd-meta {
    font-size: 12px;
    color: var(--ex-dim);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hd-meta-sep { color: var(--ex-border-hi); }
.hd-meta-open  { color: var(--ex-text); font-weight: 600; }
.hd-meta-done  { color: var(--ex-sub); }

/* Toolbar — tabs + sort */
.hd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--ex-border);
    margin-bottom: 0;
    gap: 12px;
    flex-wrap: wrap;
}
.hd-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
}
.hd-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-sub);
    background: none;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--ex-font);
    transition: background .1s, color .1s;
}
.hd-tab:hover { color: var(--ex-text); background: rgba(255,255,255,.06); }
.hd-tab.active {
    background: var(--ex-accent);
    color: #000;
}
.hd-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hd-sort-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-dim);
}
.hd-sort-btn {
    font-size: 12px;
    font-weight: 500;
    color: var(--ex-sub);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ex-font);
    padding: 2px 0;
    transition: color .1s;
}
.hd-sort-btn:hover { color: var(--ex-text); }
.hd-sort-btn.active {
    color: var(--ex-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Add item row */
.hd-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px dashed var(--ex-border-hi);
    border-radius: var(--ex-radius);
    margin: 16px 0 4px;
    cursor: text;
    transition: border-color .15s;
}
.hd-add-row:focus-within { border-color: var(--ex-accent); border-style: solid; }
.hd-add-icon {
    color: var(--ex-dim);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.hd-add-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: var(--ex-font);
    color: var(--ex-text);
}
.hd-add-input::placeholder { color: var(--ex-dim); }
.hd-add-btn {
    padding: 6px 14px;
    background: var(--ex-accent);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    font-family: var(--ex-font);
    flex-shrink: 0;
    transition: background .12s;
}
.hd-add-btn:hover { background: var(--ex-accent-dark); }
.hd-add-btn:disabled { opacity: .45; cursor: default; }

/* Item list — grid layout for column alignment */
.hd-list { display: flex; flex-direction: column; }
.hd-item {
    display: grid;
    grid-template-columns: 20px 1fr 128px 148px 58px 26px;
    align-items: center;
    column-gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--ex-border);
    cursor: pointer;
    transition: background .1s;
}
.hd-item:hover { background: rgba(255,255,255,.025); }

/* display:contents lifts children into the parent grid */
.hd-item-controls { display: contents; }

.hd-check {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--ex-border-hi);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    cursor: pointer;
    transition: border-color .1s, background .1s;
}
.hd-check:hover { border-color: var(--ex-accent); }
.hd-check.done  { background: var(--ex-accent); border-color: var(--ex-accent); }
.hd-check.done::after { content: '✓'; font-size: 10px; color: #000; font-weight: 700; }
.hd-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-decoration: none;
}
.hd-item-title.done-title { text-decoration: line-through; color: var(--ex-dim); }

/* Priority select — fixed column width, no background tiling */
.hd-priority {
    width: 128px;
    padding: 3px 20px 3px 7px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--ex-font);
    border-radius: 4px;
    border: 1.5px solid rgba(240,180,41,.4);
    background-color: var(--ex-accent-dim);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23f0b429'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    color: var(--ex-accent);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .1s;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hd-priority:hover { border-color: var(--ex-accent); }
/* Fix: use background-color (not background shorthand) so repeat/position are kept */
.hd-priority.none-pri {
    border-color: var(--ex-border-hi);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%237a7a8c'/%3E%3C/svg%3E");
    color: var(--ex-dim);
}

/* Status select — fixed column width */
.hd-status {
    width: 148px;
    padding: 3px 20px 3px 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--ex-font);
    border-radius: 4px;
    border: 1px solid var(--ex-border-hi);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238b8b99'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    color: var(--ex-sub);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .1s;
    text-decoration: none;
}
.hd-status:hover { border-color: var(--ex-accent); color: var(--ex-text); }
.hd-status option { background: var(--ex-card); color: var(--ex-text); }

/* Due date — fixed column, right-aligned */
.hd-due {
    width: 58px;
    font-size: 11px;
    color: var(--ex-dim);
    white-space: nowrap;
    text-align: right;
    text-decoration: none;
}
.hd-due.overdue { color: var(--ex-danger); font-weight: 600; }
.hd-due.today   { color: var(--ex-accent); font-weight: 600; }

/* Assignee avatar — fixed column */
.hd-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ex-border-hi);
    color: var(--ex-sub);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    text-decoration: none;
}
.hd-avatar.hd-avatar-empty { background: transparent; }

/* Responsive: collapse columns on small screens */
@media (max-width: 768px) {
    .hd-item { grid-template-columns: 20px 1fr 118px 130px; }
    .hd-due, .hd-avatar { display: none; }
}
@media (max-width: 520px) {
    .hd-item { grid-template-columns: 20px 1fr 110px; }
    .hd-status { display: none; }
}

/* Empty state */
.hd-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ex-dim);
}
.hd-empty-icon { font-size: 36px; margin-bottom: 12px; }
.hd-empty-title { font-size: 16px; font-weight: 700; color: var(--ex-sub); margin-bottom: 6px; }
.hd-empty-desc  { font-size: 13px; }

/* Count badge on Landed tab */
.hd-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
}
.hd-tab.active .hd-tab-count { background: rgba(0,0,0,.2); }

/* Loading */
.hd-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--ex-dim);
    font-size: 13px;
}

/* ── Light mode overrides ─────────────────────────────────── */
body.light-mode .hd-add-row        { border-color: rgba(0,0,0,.15); }
body.light-mode .hd-add-row:focus-within { border-color: var(--ex-accent); }
body.light-mode .hd-item:hover     { background: rgba(0,0,0,.025); }
body.light-mode .hd-check          { border-color: rgba(0,0,0,.25); }
body.light-mode .hd-priority.none-pri {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
}
body.light-mode .hd-status {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
}
body.light-mode .hd-tab:hover      { background: rgba(0,0,0,.06); }
body.light-mode .hd-sort-btn:hover { color: var(--ex-text); }
body.light-mode .hd-avatar         { background: rgba(0,0,0,.1); }

/* ── Settings page (st-*) ────────────────────────────────────── */
.st-page {
    max-width: 560px;
    padding: 32px 24px;
}
.st-section {
    margin-bottom: 0;
}
.st-divider {
    height: 1px;
    background: var(--ex-border);
    margin: 32px 0;
}
.st-section-head {
    margin-bottom: 24px;
}
.st-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ex-accent);
    margin-bottom: 4px;
}
.st-section-desc {
    font-size: 13px;
    color: var(--ex-dim);
    line-height: 1.5;
}
.st-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.st-field-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 16px;
}
.st-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-sub);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.st-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ex-dim);
    font-size: 11px;
}
.st-input {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text);
    font-family: var(--ex-font);
    font-size: 14px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
    width: 100%;
}
.st-input:focus {
    border-color: var(--ex-accent);
}
.st-input-readonly {
    color: var(--ex-dim);
    cursor: default;
    user-select: all;
}
.st-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.st-save-ok {
    font-size: 13px;
    color: var(--ex-success);
    font-weight: 600;
}

/* Toggle row */
.st-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-radius: 8px;
    padding: 4px;                  /* room for the highlight ring */
    margin: -4px;                  /* so layout doesn't shift */
    transition: box-shadow .3s ease, background .3s ease;
}
/* Highlight applied when arrived via /settings?open=daily-rundown from the
   email footer. Draws attention to the toggle without shouting — a soft
   accent ring that fades. Removed by JS after ~3s so it doesn't linger. */
.st-toggle-row.st-highlight {
    box-shadow: 0 0 0 2px var(--ex-accent), 0 0 24px rgba(59, 130, 246, .35);
    background: rgba(59, 130, 246, .06);
    animation: stHighlightPulse 1.4s ease-in-out 2;
}
@keyframes stHighlightPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--ex-accent), 0 0 24px  rgba(59, 130, 246, .35); }
    50%      { box-shadow: 0 0 0 2px var(--ex-accent), 0 0 8px   rgba(59, 130, 246, .15); }
}
.st-toggle-info { flex: 1; }
.st-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ex-text);
    margin-bottom: 4px;
}
.st-toggle-sub {
    font-size: 13px;
    color: var(--ex-dim);
    line-height: 1.5;
}

/* Toggle switch */
.st-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: var(--ex-accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
    padding: 0;
    margin-top: 2px;
}
.st-toggle.off {
    background: var(--ex-border-hi);
}
.st-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
    pointer-events: none;
}
.st-toggle.off .st-toggle-knob {
    transform: none;
}
.st-toggle:not(.off) .st-toggle-knob {
    transform: translateX(20px);
}

/* Light mode */
/* Select */
.st-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238b8b99'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}
.st-select option { background: var(--ex-card); color: var(--ex-text); }

/* Light mode */
body.light-mode .st-input {
    background: #fff;
    border-color: #e6e3df;
    color: #1c1810;
}
body.light-mode .st-input:focus       { border-color: var(--ex-accent); }
body.light-mode .st-input-readonly    { color: #9e9080; }
body.light-mode .st-label             { color: var(--ex-sub); }
body.light-mode .st-toggle-label      { color: #1c1810; }
body.light-mode .st-select option     { background: #fff; color: #1c1810; }

/* ═══════════════════════════════════════════════════════════════
   Lock Screen Overlay
   ═══════════════════════════════════════════════════════════════ */

.lock-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    /* font reset — overlay sits outside .ex-shell so it gets no inherited styles */
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ex-text);
    box-sizing: border-box;
}
.lock-overlay *, .lock-overlay *::before, .lock-overlay *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.lock-overlay.visible {
    display: flex;
}

.lock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border-hi);
    border-radius: 16px;
    padding: 40px 40px 36px;
    width: 320px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.lock-logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ex-text);
    margin-bottom: 4px;
}
.lock-logo span { color: var(--ex-accent); }

.lock-user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ex-text);
    text-align: center;
}
.lock-user-email {
    font-size: 12px;
    color: var(--ex-dim);
    text-align: center;
    margin-bottom: 8px;
}

/* ── PIN boxes ──────────────────────────────────────────────── */
.lock-pin-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 4px 0 2px;
}

.lock-pin-box {
    width: 52px;
    height: 60px;
    border: 2px solid var(--ex-border-hi);
    border-radius: 10px;
    background: var(--ex-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--ex-text);
    transition: border-color 0.12s, background 0.12s;
    user-select: none;
}

.lock-pin-box.active {
    border-color: var(--ex-accent);
    background: var(--ex-accent-dim);
}

.lock-pin-box.filled {
    border-color: var(--ex-border-hi);
}

.lock-error {
    font-size: 12px;
    color: var(--ex-danger);
    text-align: center;
    min-height: 18px;
}

.lock-hint {
    font-size: 11px;
    color: var(--ex-dim);
    text-align: center;
    margin-top: 2px;
}

/* Shake animation on wrong PIN */
@keyframes lock-shake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-7px); }
    35%       { transform: translateX(7px); }
    55%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}
.lock-shake {
    animation: lock-shake 0.42s ease;
}

/* ── Light mode ─────────────────────────────────────────────── */
body.light-mode .lock-card {
    background: #fff;
    border-color: #e6e3df;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
body.light-mode .lock-overlay {
    background: rgba(240, 238, 235, 0.70);
}
body.light-mode .lock-pin-box {
    background: #f7f6f4;
    border-color: #d4d0cb;
    color: #1c1810;
}
body.light-mode .lock-pin-box.active {
    border-color: var(--ex-accent);
    background: rgba(240, 180, 41, 0.10);
}
body.light-mode .lock-user-name { color: #1c1810; }
body.light-mode .lock-logo      { color: #1c1810; }

/* ═══════════════════════════════════════════════════════════════
   EXECUTIVE AUTH — login / signup / forgot / reset / activate
   Standalone pages that do NOT use the executive template
   (user is not authenticated yet). Uses --ex-* tokens only.
   Reuses .msg / .msg-error / .msg-success class names so the shared
   forms.js works unchanged, but scopes them under .ex-auth-card so
   they never leak into other pages that load executive.css.
   ═══════════════════════════════════════════════════════════════ */

.ex-auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: var(--ex-bg);
    color: var(--ex-text);
    font-family: var(--ex-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Brand panel (left) ─────────────────────────────────────── */
.ex-auth-brand {
    position: relative;
    padding: 56px 64px;
    background: var(--ex-surface);
    border-right: 1px solid var(--ex-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.ex-auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 600px at -10% -10%, var(--ex-accent-dim), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, var(--ex-accent-dim), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.ex-auth-brand::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--ex-accent), transparent);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.ex-auth-brand > * { position: relative; z-index: 1; }

.ex-auth-brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ex-auth-brand-mark {
    width: 34px;
    height: 34px;
    background: var(--ex-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    color: #000;
    letter-spacing: -.5px;
}
.ex-auth-brand-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-text);
}

.ex-auth-brand-body {
    max-width: 460px;
}
.ex-auth-brand-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ex-accent);
    margin-bottom: 20px;
}
.ex-auth-brand-title {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: var(--ex-text);
    margin-bottom: 20px;
}
.ex-auth-brand-title em {
    font-style: normal;
    color: var(--ex-accent);
}
.ex-auth-brand-sub {
    font-size: 15px;
    color: var(--ex-sub);
    line-height: 1.6;
    margin-bottom: 36px;
}
.ex-auth-brand-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}
.ex-auth-brand-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--ex-text);
}
.ex-auth-brand-item-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ex-accent-dim);
    color: var(--ex-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}
.ex-auth-brand-item-text b {
    font-weight: 600;
    color: var(--ex-text);
}
.ex-auth-brand-item-text span {
    color: var(--ex-sub);
    display: block;
    font-size: 13px;
    margin-top: 2px;
}

.ex-auth-brand-footer {
    font-size: 12px;
    color: var(--ex-dim);
    letter-spacing: .04em;
}

/* ── Form panel (right) ─────────────────────────────────────── */
.ex-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 40px;
    background: var(--ex-bg);
}
.ex-auth-card {
    width: 100%;
    max-width: 400px;
}
.ex-auth-mobile-logo {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.ex-auth-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ex-accent);
    margin-bottom: 10px;
}
.ex-auth-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ex-text);
    margin-bottom: 8px;
}
.ex-auth-subtitle {
    font-size: 14px;
    color: var(--ex-sub);
    margin-bottom: 28px;
}

.ex-auth-form { display: grid; gap: 16px; }
.ex-auth-field { display: grid; gap: 6px; }
.ex-auth-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ex-sub);
    text-transform: uppercase;
}
.ex-auth-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    color: var(--ex-text);
    font-family: var(--ex-font);
    font-size: 14px;
    transition: border-color .15s, background .15s, box-shadow .15s;
    outline: none;
}
.ex-auth-input::placeholder { color: var(--ex-dim); }
.ex-auth-input:hover  { border-color: var(--ex-border-hi); }
.ex-auth-input:focus  {
    border-color: var(--ex-accent);
    background: var(--ex-card-hov);
    box-shadow: 0 0 0 3px var(--ex-accent-dim);
}

.ex-auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
}
.ex-auth-forgot {
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-sub);
    text-decoration: none;
    transition: color .15s;
}
.ex-auth-forgot:hover { color: var(--ex-accent); }

.ex-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background: var(--ex-accent);
    color: #000;
    border: none;
    border-radius: var(--ex-radius);
    font-family: var(--ex-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .05s;
    position: relative;
    margin-top: 4px;
}
.ex-auth-btn:hover:not(:disabled) { background: var(--ex-accent-dark); }
.ex-auth-btn:active:not(:disabled) { transform: translateY(1px); }
.ex-auth-btn:disabled { opacity: .7; cursor: not-allowed; }
.ex-auth-btn.loading {
    color: transparent;
    pointer-events: none;
}
.ex-auth-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(0,0,0,.35);
    border-top-color: #000;
    border-radius: 50%;
    animation: ex-auth-spin .7s linear infinite;
}
@keyframes ex-auth-spin { to { transform: rotate(360deg); } }

.ex-auth-alt {
    margin-top: 22px;
    font-size: 13px;
    color: var(--ex-sub);
    text-align: center;
}
.ex-auth-link {
    color: var(--ex-accent);
    font-weight: 600;
    text-decoration: none;
}
.ex-auth-link:hover { text-decoration: underline; }

/* Messages — forms.js writes class="msg msg-error|msg-success" */
.ex-auth-card .msg {
    display: none;
    padding: 10px 12px;
    border-radius: var(--ex-radius);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.ex-auth-card .msg-error {
    display: block;
    background: var(--ex-danger-dim);
    border-color: rgba(239, 68, 68, .3);
    color: var(--ex-danger);
}
.ex-auth-card .msg-success {
    display: block;
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .3);
    color: var(--ex-success);
}

/* Utility — scoped so it can't leak */
.ex-auth-page .hidden { display: none !important; }

/* Two-column form row (e.g. First name / Last name) */
.ex-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* "(optional)" tag inside a label */
.ex-auth-optional {
    color: var(--ex-dim);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

/* Back link at top of form panel */
.ex-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-sub);
    text-decoration: none;
    margin-bottom: 18px;
    transition: color .15s;
}
.ex-auth-back:hover { color: var(--ex-accent); }

/* Footer line ("Already have an account? …") — same as .ex-auth-alt */
.ex-auth-footer {
    margin-top: 22px;
    font-size: 13px;
    color: var(--ex-sub);
    text-align: center;
}

/* ── State screens (activate-email, reset-password invalid) ─── */
.ex-auth-state {
    text-align: center;
    padding-top: 8px;
}
.ex-auth-state .ex-auth-title,
.ex-auth-state .ex-auth-subtitle { text-align: center; }
.ex-auth-state .ex-auth-form { margin-top: 24px; text-align: left; }

.ex-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    background: var(--ex-accent-dim);
    border: 1px solid var(--ex-border);
}
.ex-auth-icon.icon-success {
    background: rgba(34, 197, 94, .12);
    color: var(--ex-success);
    border-color: rgba(34, 197, 94, .3);
}
.ex-auth-icon.icon-warn {
    background: rgba(240, 180, 41, .12);
    color: var(--ex-accent);
    border-color: rgba(240, 180, 41, .3);
}
.ex-auth-icon.icon-error {
    background: var(--ex-danger-dim);
    color: var(--ex-danger);
    border-color: rgba(239, 68, 68, .3);
}

/* Loading spinner (activate-email verifying state) */
.ex-auth-icon.icon-loading::after {
    content: '';
    display: block;
    width: 28px; height: 28px;
    border: 3px solid var(--ex-border);
    border-top-color: var(--ex-accent);
    border-radius: 50%;
    animation: ex-auth-spin .8s linear infinite;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 880px) {
    .ex-auth-page { grid-template-columns: 1fr; }
    .ex-auth-brand { display: none; }
    .ex-auth-panel { padding: 40px 22px; }
    .ex-auth-mobile-logo { display: flex; }
    .ex-auth-title { font-size: 24px; }
    .ex-auth-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Light mode overrides ──────────────────────────────────── */
body.light-mode .ex-auth-brand::after { opacity: .5; }
body.light-mode .ex-auth-input:focus {
    background: #fff;
    box-shadow: 0 0 0 3px var(--ex-accent-dim);
}
body.light-mode .ex-auth-btn { color: #fff; }
body.light-mode .ex-auth-btn.loading::after {
    border-color: rgba(255,255,255,.4);
    border-top-color: #fff;
}
body.light-mode .ex-auth-card .msg-error {
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .25);
}
body.light-mode .ex-auth-card .msg-success {
    background: rgba(22, 163, 74, .10);
    border-color: rgba(22, 163, 74, .3);
}

/* ═══════════════════════════════════════════════════════════════
   AUTOPILOT — /autopilot page (recurring rules)
   ═══════════════════════════════════════════════════════════════ */

.ap-shell {
    padding: 24px 28px 40px;
    max-width: 1400px;
    margin: 0 auto;
    color: var(--ex-text);
}
.ap-shell .hidden,
.ap-modal-overlay .hidden { display: none !important; }

/* ── Hero ───────────────────────────────────────────────────── */
.ap-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 28px 32px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    overflow: hidden;
    margin-bottom: 20px;
}
.ap-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 300px at -5% -30%, var(--ex-accent-dim), transparent 60%),
        radial-gradient(500px 250px at 105% 130%, var(--ex-accent-dim), transparent 55%);
    pointer-events: none;
}
.ap-hero > * { position: relative; }
.ap-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ex-accent);
    margin-bottom: 6px;
}
.ap-hero-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ex-text);
    margin: 0 0 6px;
}
.ap-hero-sub {
    font-size: 13px;
    color: var(--ex-sub);
    margin: 0;
    max-width: 520px;
}
.ap-hero-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.ap-hero-stats {
    display: flex;
    gap: 16px;
}
.ap-hero-stat {
    text-align: right;
    padding-right: 16px;
    border-right: 1px solid var(--ex-border);
}
.ap-hero-stat:last-child { border-right: 0; padding-right: 0; }
.ap-hero-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--ex-text);
    line-height: 1;
}
.ap-hero-stat-num.engaged { color: var(--ex-success); }
.ap-hero-stat-num.standby { color: var(--ex-dim); }
.ap-hero-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-dim);
    margin-top: 4px;
}

/* ── Primary button ─────────────────────────────────────────── */
.ap-btn-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    background: var(--ex-accent);
    color: #000;
    border: none;
    border-radius: var(--ex-radius);
    font-family: var(--ex-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.ap-btn-new:hover { background: var(--ex-accent-dark); }
body.light-mode .ap-btn-new { color: #fff; }

/* ── List ───────────────────────────────────────────────────── */
.ap-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}
.ap-loading, .ap-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--ex-sub);
    font-size: 14px;
    background: var(--ex-card);
    border: 1px dashed var(--ex-border);
    border-radius: var(--ex-radius);
    grid-column: 1 / -1;
}
.ap-empty-emoji {
    font-size: 34px;
    display: block;
    margin-bottom: 10px;
    opacity: .7;
}
.ap-empty strong { color: var(--ex-text); font-weight: 600; }

/* ── Card ───────────────────────────────────────────────────── */
.ap-card {
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .15s, transform .05s;
    position: relative;
}
.ap-card:hover { border-color: var(--ex-border-hi); }
.ap-card.paused { opacity: .72; }
.ap-card.paused .ap-card-title { color: var(--ex-sub); }

.ap-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.ap-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ex-text);
    line-height: 1.35;
    word-break: break-word;
}

/* Status pill */
.ap-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    background: rgba(34, 197, 94, .12);
    color: var(--ex-success);
    border: 1px solid rgba(34, 197, 94, .3);
}
.ap-status.standby {
    background: rgba(139, 139, 153, .12);
    color: var(--ex-dim);
    border-color: var(--ex-border-hi);
}
.ap-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.ap-status.standby::before { box-shadow: none; }

/* Frequency + time line */
.ap-card-sched {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ex-text);
}
.ap-freq-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--ex-radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--ex-accent-dim);
    color: var(--ex-accent);
    border: 1px solid rgba(240, 180, 41, .2);
}
.ap-card-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ex-sub);
    font-size: 12px;
}

/* Meta chips row */
.ap-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: var(--ex-sub);
}
.ap-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ap-meta-icon { color: var(--ex-dim); }

.ap-card-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ex-sub);
    padding-top: 8px;
    border-top: 1px dashed var(--ex-border);
}
.ap-card-next-value { color: var(--ex-text); font-weight: 600; }

/* Actions */
.ap-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}
.ap-btn {
    flex: 1;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-sub);
    font-family: var(--ex-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.ap-btn:hover { border-color: var(--ex-border-hi); color: var(--ex-text); background: var(--ex-card-hov); }
.ap-btn.danger { color: var(--ex-danger); border-color: rgba(239, 68, 68, .3); }
.ap-btn.danger:hover { background: var(--ex-danger-dim); color: var(--ex-danger); }
.ap-btn:disabled { opacity: .5; cursor: not-allowed; }
.ap-btn.loading { pointer-events: none; color: transparent; position: relative; }
.ap-btn.loading::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--ex-border);
    border-top-color: var(--ex-accent);
    border-radius: 50%;
    animation: ex-auth-spin .7s linear infinite;
}

/* ── Pagination ─────────────────────────────────────────────── */
.ap-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
}
.ap-pagination button {
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-sub);
    font-family: var(--ex-font);
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.ap-pagination button:hover:not(:disabled) { border-color: var(--ex-accent); color: var(--ex-text); }
.ap-pagination button.active { background: var(--ex-accent); color: #000; border-color: var(--ex-accent); font-weight: 700; }
body.light-mode .ap-pagination button.active { color: #fff; }
.ap-pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ── Modal ──────────────────────────────────────────────────── */
.ap-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}
.ap-modal-overlay.active { display: flex; }
body.light-mode .ap-modal-overlay { background: rgba(0, 0, 0, .35); }

.ap-modal {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    margin: auto;
}
body.light-mode .ap-modal { box-shadow: 0 24px 64px rgba(0, 0, 0, .18); }
.ap-modal.narrow { max-width: 440px; }

.ap-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ex-border);
    flex-shrink: 0;
}
.ap-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ex-text);
}
.ap-modal-close {
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--ex-radius-sm);
    color: var(--ex-sub);
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ap-modal-close:hover { background: var(--ex-card-hov); color: var(--ex-text); }

.ap-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.ap-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--ex-border);
    flex-shrink: 0;
}
.ap-modal-foot .ap-btn { flex: 0; min-width: 92px; }
.ap-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 92px;
    padding: 0 16px;
    background: var(--ex-accent);
    color: #000;
    border: 1px solid var(--ex-accent);
    border-radius: var(--ex-radius-sm);
    font-family: var(--ex-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}
.ap-btn-primary:hover:not(:disabled) { background: var(--ex-accent-dark); border-color: var(--ex-accent-dark); }
.ap-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.ap-btn-primary.loading { color: transparent; pointer-events: none; }
.ap-btn-primary.loading::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(0,0,0,.35);
    border-top-color: #000;
    border-radius: 50%;
    animation: ex-auth-spin .7s linear infinite;
}
body.light-mode .ap-btn-primary { color: #fff; }
body.light-mode .ap-btn-primary.loading::after {
    border-color: rgba(255,255,255,.35);
    border-top-color: #fff;
}
.ap-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    background: var(--ex-danger);
    color: #fff;
    border: 1px solid var(--ex-danger);
    border-radius: var(--ex-radius-sm);
    font-family: var(--ex-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}
.ap-btn-danger:hover { background: #b91c1c; }
.ap-btn-danger.loading { color: transparent; pointer-events: none; }
.ap-btn-danger.loading::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ex-auth-spin .7s linear infinite;
}

/* ── Form fields inside modal ───────────────────────────────── */
.ap-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.ap-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.ap-field-row .ap-field { margin-bottom: 0; }

.ap-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-sub);
}
.ap-required { color: var(--ex-danger); }
.ap-optional {
    color: var(--ex-dim);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    margin-left: 4px;
}
.ap-input, .ap-select, .ap-textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text);
    font-family: var(--ex-font);
    font-size: 13px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.ap-input, .ap-select { height: 36px; }
.ap-textarea { resize: vertical; min-height: 76px; padding: 10px 12px; }
.ap-input::placeholder, .ap-textarea::placeholder { color: var(--ex-dim); }
.ap-input:focus, .ap-select:focus, .ap-textarea:focus {
    border-color: var(--ex-accent);
    background: var(--ex-card-hov);
    box-shadow: 0 0 0 3px var(--ex-accent-dim);
}
.ap-select {
    appearance: none;
    padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 48%, currentColor 50%, transparent 52%),
                      linear-gradient(-45deg, transparent 48%, currentColor 50%, transparent 52%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 14px top 55%, right 8px top 55%;
    background-size: 6px 6px, 6px 6px;
    color: var(--ex-text);
}

.ap-hint {
    font-size: 11px;
    color: var(--ex-dim);
    line-height: 1.5;
}
.ap-hint code {
    display: inline-block;
    padding: 1px 5px;
    background: var(--ex-card-hov);
    border: 1px solid var(--ex-border);
    border-radius: 3px;
    font-family: 'SF Mono', ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    color: var(--ex-text);
    margin: 0 2px;
}

/* Weekday picker */
.ap-weekday-picker {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.ap-wd-btn {
    flex: 1;
    min-width: 42px;
    height: 36px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    color: var(--ex-sub);
    font-family: var(--ex-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.ap-wd-btn:hover { border-color: var(--ex-border-hi); color: var(--ex-text); }
.ap-wd-btn.active {
    background: var(--ex-accent);
    color: #000;
    border-color: var(--ex-accent);
}
body.light-mode .ap-wd-btn.active { color: #fff; }

/* Assignee search dropdown */
.ap-assignee-search { position: relative; }
.ap-assignee-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    max-height: 220px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
body.light-mode .ap-assignee-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,.1); }

.ap-pd-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--ex-border);
    transition: background .15s;
}
.ap-pd-item:last-child { border-bottom: none; }
.ap-pd-item:hover { background: var(--ex-card-hov); }
.ap-pd-name { font-size: 13px; font-weight: 600; color: var(--ex-text); }
.ap-pd-email { font-size: 11px; color: var(--ex-sub); margin-top: 2px; }
.ap-pd-loading, .ap-pd-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--ex-sub);
    text-align: center;
}

/* ── PeoplePicker widget — executive context ────────────────────────────────
   Styles the shared people-picker.js widget on executive/attention pages.
   Classic pages (iop-style.css) handle these same classes separately.
   ──────────────────────────────────────────────────────────────────────── */
.people-search-box { position: relative; }

.pp-search {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: 8px;
    color: var(--ex-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}
.pp-search::placeholder { color: var(--ex-dim); }
.pp-search:focus {
    border-color: var(--ex-accent);
    background: var(--ex-card-hov);
    box-shadow: 0 0 0 3px var(--ex-accent-dim);
}

.people-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
body.light-mode .people-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,.1); }

.pd-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--ex-border);
    transition: background .15s;
}
.pd-item:last-child { border-bottom: none; }
.pd-item:hover { background: var(--ex-card-hov); }
.pd-name { font-size: 13px; font-weight: 600; color: var(--ex-text); }
.pd-email { font-size: 11px; color: var(--ex-sub); margin-top: 2px; }
.pd-loading, .pd-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--ex-sub);
    text-align: center;
}
.pd-add-new {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--ex-accent);
    cursor: pointer;
    border-top: 1px solid var(--ex-border);
    transition: background .15s;
}
.pd-add-new:hover { background: var(--ex-card-hov); }

/* Add-new form */
.people-add-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.people-add-form-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ex-sub);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pp-given, .pp-surname, .pp-email {
    width: 100%;
    height: 34px;
    padding: 7px 10px;
    background: var(--ex-card);
    border: 1px solid var(--ex-border);
    border-radius: 6px;
    color: var(--ex-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.pp-given:focus, .pp-surname:focus, .pp-email:focus {
    border-color: var(--ex-accent);
    box-shadow: 0 0 0 3px var(--ex-accent-dim);
}
.people-add-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 2px;
}
.pp-cancel {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--ex-border);
    background: transparent;
    color: var(--ex-text);
    transition: background .15s;
}
.pp-cancel:hover { background: var(--ex-card-hov); }
.pp-add-btn {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--ex-accent);
    color: #fff;
    transition: opacity .15s;
}
.pp-add-btn:hover { opacity: .88; }
.pp-add-btn.loading { opacity: .6; cursor: default; }

/* Assignee chips */
.ap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: var(--ex-card-hov);
    border: 1px solid var(--ex-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ex-text);
}
.ap-chip-remove {
    width: 18px; height: 18px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--ex-sub);
    cursor: pointer;
    font-size: 12px;
    transition: background .15s, color .15s;
}
.ap-chip-remove:hover { background: var(--ex-danger-dim); color: var(--ex-danger); }

/* Alert in delete modal */
.ap-alert {
    padding: 10px 12px;
    border-radius: var(--ex-radius-sm);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
    background: rgba(240, 180, 41, .1);
    border: 1px solid rgba(240, 180, 41, .3);
    color: var(--ex-text);
}
.ap-alert strong { color: var(--ex-accent); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .ap-shell { padding: 16px; }
    .ap-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
    }
    .ap-hero-right { flex-direction: column; align-items: flex-start; gap: 14px; }
    .ap-list { grid-template-columns: 1fr; }
    .ap-field-row { grid-template-columns: 1fr; gap: 0; }
    .ap-field-row .ap-field { margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   Admin — User Management (adm-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.adm-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:20px; }
.adm-hero-left { flex:1; }
.adm-breadcrumb { font-size:10px; font-weight:700; letter-spacing:2px; color:var(--ex-sub); margin-bottom:6px; text-transform:uppercase; }
.adm-title { font-size:26px; font-weight:800; color:var(--ex-text); letter-spacing:-0.5px; margin:0 0 6px; }
.adm-subtitle { font-size:13px; color:var(--ex-sub); margin:0; line-height:1.5; }
.adm-hero-right { flex-shrink:0; }
.adm-divider { border:none; border-top:1px solid var(--ex-border); margin:0 0 20px; }

/* ── KPI row ──────────────────────────────────────────────── */
.adm-kpi-row { display:flex; gap:24px; }
.adm-kpi { display:flex; flex-direction:column; align-items:center; min-width:60px; }
.adm-kpi-num { font-size:22px; font-weight:800; color:var(--ex-text); letter-spacing:-1px; }
.adm-kpi-num.adm-kpi-success { color:var(--ex-success); }
.adm-kpi-num.adm-kpi-warn { color:#fbbf24; }
.adm-kpi-num.adm-kpi-purple { color:var(--ex-purple); }
.adm-kpi-lbl { font-size:10px; font-weight:600; color:var(--ex-sub); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }

/* ── Toolbar: pills + search ──────────────────────────────── */
.adm-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.adm-pills { display:flex; gap:4px; }
.adm-pill {
    padding:6px 14px; border-radius:var(--ex-radius); font-size:12px; font-weight:600;
    background:transparent; border:1px solid var(--ex-border); color:var(--ex-sub); cursor:pointer;
    transition:all .15s;
}
.adm-pill:hover { color:var(--ex-text); background:rgba(255,255,255,.04); }
.adm-pill.active { background:var(--ex-accent-dim); color:var(--ex-accent); border-color:var(--ex-accent); }
body.light-mode .adm-pill:hover { background:rgba(0,0,0,.04); }

.adm-search {
    margin-left:auto; padding:7px 12px; width:240px; border-radius:var(--ex-radius);
    border:1px solid var(--ex-border); background:var(--ex-surface); color:var(--ex-text);
    font-size:13px; outline:none; transition:border-color .15s;
}
.adm-search:focus { border-color:var(--ex-accent); }
.adm-search::placeholder { color:var(--ex-sub); opacity:.6; }

/* ── Alert ─────────────────────────────────────────────────── */
.adm-alert { padding:10px 14px; border-radius:var(--ex-radius); font-size:13px; margin-bottom:14px; }
.adm-alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:var(--ex-success); }
.adm-alert-error   { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); color:var(--ex-danger); }

/* ── Table ─────────────────────────────────────────────────── */
.adm-table-wrap { overflow-x:auto; }
.adm-table { width:100%; border-collapse:collapse; }
.adm-table th {
    text-align:left; padding:8px 12px; font-size:10px; font-weight:700;
    color:var(--ex-sub); text-transform:uppercase; letter-spacing:.8px;
    border-bottom:1px solid var(--ex-border);
}
.adm-table td { padding:10px 12px; font-size:13px; color:var(--ex-text); border-bottom:1px solid var(--ex-border); }
.adm-table tr:last-child td { border-bottom:none; }
.adm-row { cursor:pointer; transition:background .12s; }
.adm-row:hover td { background:var(--ex-accent-dim); }
.adm-empty { text-align:center; padding:40px 12px !important; color:var(--ex-sub); }

/* User cell */
.adm-user-cell { display:flex; align-items:center; gap:10px; }
.adm-avatar {
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:var(--ex-accent-dim); color:var(--ex-accent);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
}
.adm-user-name { font-weight:600; font-size:13px; }
.adm-user-phone { font-size:11px; color:var(--ex-sub); }
.adm-cell-email { font-size:13px; }
.adm-cell-date { font-size:12px; color:var(--ex-sub); }
.adm-cell-actions { white-space:nowrap; }

/* ── Badges ────────────────────────────────────────────────── */
.adm-badge {
    display:inline-block; padding:3px 10px; border-radius:12px;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.adm-badge.active    { background:rgba(34,197,94,.15); color:var(--ex-success); }
.adm-badge.pending   { background:rgba(251,191,36,.15); color:#fbbf24; }
.adm-badge.suspended { background:rgba(239,68,68,.15); color:var(--ex-danger); }
.adm-verified   { color:var(--ex-success); font-size:12px; font-weight:600; }
.adm-unverified { color:var(--ex-danger);  font-size:12px; font-weight:600; }
.adm-inv { font-size:12px; }
.adm-inv-active  { color:var(--ex-success); font-weight:600; }
.adm-inv-invited { color:var(--ex-purple);  font-weight:600; }

/* ── Buttons ───────────────────────────────────────────────── */
.adm-btn {
    padding:5px 12px; border-radius:var(--ex-radius-sm); font-size:12px; font-weight:600;
    border:1px solid var(--ex-border); background:var(--ex-surface); color:var(--ex-text);
    cursor:pointer; transition:all .12s;
}
.adm-btn:hover { background:var(--ex-card); }
.adm-btn-sm { padding:4px 10px; font-size:11px; }
.adm-btn-success { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.3); color:var(--ex-success); }
.adm-btn-success:hover { background:rgba(34,197,94,.2); }
.adm-btn-danger { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:var(--ex-danger); }
.adm-btn-danger:hover { background:rgba(239,68,68,.2); }

/* ── Pagination ────────────────────────────────────────────── */
.adm-pagination { display:flex; align-items:center; gap:4px; margin-top:16px; }
.adm-pg-btn {
    padding:5px 10px; border-radius:var(--ex-radius-sm); font-size:12px; font-weight:600;
    border:1px solid var(--ex-border); background:transparent; color:var(--ex-sub); cursor:pointer;
}
.adm-pg-btn:hover:not(:disabled) { background:var(--ex-surface); color:var(--ex-text); }
.adm-pg-btn.active { background:var(--ex-accent); color:#000; border-color:var(--ex-accent); }
.adm-pg-btn:disabled { opacity:.4; cursor:not-allowed; }
.adm-pg-info { font-size:12px; color:var(--ex-sub); margin-left:8px; }

/* ── Detail page ───────────────────────────────────────────── */
.adm-back { font-size:13px; color:var(--ex-sub); text-decoration:none; display:inline-block; margin-bottom:16px; }
.adm-back:hover { color:var(--ex-text); }
.adm-loading { text-align:center; padding:60px; color:var(--ex-sub); }

.adm-detail-grid { display:grid; grid-template-columns:300px 1fr; gap:24px; }
@media (max-width:768px) { .adm-detail-grid { grid-template-columns:1fr; } }

/* Profile card */
.adm-profile-card {
    background:var(--ex-card); border:1px solid var(--ex-border); border-radius:var(--ex-radius);
    padding:28px 20px; text-align:center;
}
.adm-profile-avatar {
    width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
    background:var(--ex-accent-dim); color:var(--ex-accent);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:800;
}
.adm-profile-name { font-size:18px; font-weight:700; color:var(--ex-text); margin-bottom:2px; }
.adm-profile-email { font-size:13px; color:var(--ex-sub); margin-bottom:16px; word-break:break-all; }
.adm-profile-actions { display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
.adm-profile-meta { text-align:left; }
.adm-meta-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px solid var(--ex-border); font-size:13px;
}
.adm-meta-row:last-child { border-bottom:none; }
.adm-meta-label { color:var(--ex-sub); }
.adm-meta-value { color:var(--ex-text); font-weight:600; }

/* Stats grid */
.adm-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
@media (max-width:768px) { .adm-stats-grid { grid-template-columns:repeat(2,1fr); } }
.adm-stat-card {
    background:var(--ex-card); border:1px solid var(--ex-border); border-radius:var(--ex-radius);
    padding:16px; position:relative; overflow:hidden;
}
.adm-stat-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--ex-accent);
}
.adm-stat-success::before { background:var(--ex-success); }
.adm-stat-warn::before    { background:#fbbf24; }
.adm-stat-purple::before  { background:var(--ex-purple); }
.adm-stat-val { font-size:26px; font-weight:700; color:var(--ex-text); letter-spacing:-1px; }
.adm-stat-lbl { font-size:11px; color:var(--ex-sub); margin-top:4px; }

/* Section */
.adm-section {
    background:var(--ex-card); border:1px solid var(--ex-border); border-radius:var(--ex-radius);
    padding:16px 20px;
}
.adm-section-title { font-size:12px; font-weight:700; color:var(--ex-sub); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.adm-section-body { font-size:13px; color:var(--ex-text); }
.adm-login-date { font-weight:600; margin-bottom:6px; }
.adm-login-meta { font-size:12px; color:var(--ex-sub); margin-top:2px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:640px) {
    .adm-hero { flex-direction:column; }
    .adm-kpi-row { justify-content:flex-start; }
    .adm-toolbar { flex-direction:column; align-items:stretch; }
    .adm-search { width:100%; margin-left:0; }
    .adm-pills { overflow-x:auto; }
}