/* Source Building Group palette:
     - Navy #0a2540 (primary dark)
     - Red/Orange accent #c8322b (signature O mark)
     - Steel gray support, white, warm off-white */
  :root {
    --sbg-navy: #0a2540;
    --sbg-navy-2: #0f2d4d;
    --sbg-red: #c8322b;
    --sbg-red-dark: #a82621;
    --sbg-red-light: #e04a42;
    --sbg-gold: #d4a017;
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --surface-3: #edeff3;
    --border: #dbdfe5;
    --border-strong: #c3c9d3;
    --text: #0a2540;
    --text-2: #2d3a4d;
    --text-dim: #6b7687;
    --text-faint: #9ba4b0;
    --green: #2e7d52;
    --blue: #2563a8;
    --red: #c8322b;
    --yellow: #d4a017;
    --purple: #7b4397;
    --overlay: rgba(10, 37, 64, 0.72);
    /* Status fill tints (for board cards) */
    --fill-not-started: #f1f3f6;
    --fill-in-progress: #e3efff;
    --fill-blocked: #fde4e2;
    --fill-pending: #ece1f3;
    --fill-done: #def3e7;
    --fill-overdue: #ff3b30;
    --fill-overdue-border: #c41e17;
    --fill-soon: #fff4d6;
    --fill-soon-border: #e6b422;
    --fill-imminent: #ffd9bc;
    --fill-imminent-border: #e85d04;
    --fill-not-started-border: #c9d0da;
    --fill-in-progress-border: #9dc0ea;
    --fill-blocked-border: #ec9b96;
    --fill-pending-border: #bfa0d0;
    --fill-done-border: #86c9a4;
  }
  /* v145: Dark mode — overrides the :root vars when body has .dark-mode.
     Brand colors (navy, red, gold) stay identifiable but slightly brighter
     for readability on dark surfaces. Every surface/text/border color
     shifts to a GitHub-dark-inspired palette. Status fills use deep tints
     that keep their semantic meaning (blue/red/green/purple/gold) without
     glowing against the dark background. */
  body.dark-mode {
    --sbg-navy: #6ea3ff;
    --sbg-navy-fg: #6ea3ff;
    --sbg-navy-bg-solid: #0a2540;
    --sbg-navy-2: #1a3a68;
    --sbg-red: #e85952;
    --sbg-red-dark: #c8322b;
    --sbg-red-light: #f27871;
    --sbg-gold: #e5b24c;
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #1c2128;
    --surface-3: #21262d;
    --border: #30363d;
    --border-strong: #484f58;
    --text: #e6edf3;
    --text-2: #c9d1d9;
    --text-dim: #8b949e;
    --text-faint: #6e7681;
    --green: #3fb950;
    --blue: #58a6ff;
    --red: #f85149;
    --yellow: #e5b24c;
    --purple: #a371f7;
    --overlay: rgba(0, 0, 0, 0.85);
    /* Status fill tints — deep muted versions of the light-mode tints */
    --fill-not-started: #1c2128;
    --fill-in-progress: #0e3358;
    --fill-blocked: #4a1e1a;
    --fill-pending: #3d2b47;
    --fill-done: #103b21;
    --fill-overdue: #a51e19;
    --fill-overdue-border: #f85149;
    --fill-soon: #4d3b0e;
    --fill-soon-border: #d4a017;
    --fill-imminent: #4a2911;
    --fill-imminent-border: #e85d04;
    --fill-not-started-border: #30363d;
    --fill-in-progress-border: #1f6feb;
    --fill-blocked-border: #a51e19;
    --fill-pending-border: #7b4397;
    --fill-done-border: #238636;
  }
  /* Nudge sitewide affordances in dark mode where hardcoded lightness slips through */
  body.dark-mode img.brand-logo-img,
  body.dark-mode .brand-logo img {
    filter: none; /* keep the logo crisp */
  }
  body.dark-mode input,
  body.dark-mode textarea,
  body.dark-mode select {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
  }
  body.dark-mode input:focus,
  body.dark-mode textarea:focus,
  body.dark-mode select:focus {
    outline: 2px solid var(--sbg-red);
    outline-offset: 1px;
  }
  body.dark-mode ::placeholder { color: var(--text-faint); opacity: 0.7; }
  /* Modal backdrops render darker in dark mode for stronger contrast */
  body.dark-mode .modal-backdrop { background: rgba(0, 0, 0, 0.75); }
  body.dark-mode .modal { background: var(--surface); color: var(--text); }

  /* ==================================================================
     v146 DARK MODE COMPENSATION LAYER
     Broad-strokes overrides for the biggest visual containers whose
     backgrounds were hardcoded to #fff / near-white. Keeps the light-mode
     rules intact and just wraps them for dark. Surface hierarchy:
       --surface     = main card surface (#161b22)
       --surface-2   = raised affordance surface (#1c2128)
       --surface-3   = tinted/nested surface (#21262d)
     ================================================================== */

  /* Main layout surfaces */
  body.dark-mode .main-content,
  body.dark-mode #mainScrollArea,
  body.dark-mode .project-workspace,
  body.dark-mode .workspace-scroll,
  body.dark-mode .content-area { background: var(--bg); color: var(--text); }

  /* Sidebar */
  body.dark-mode .sidebar,
  body.dark-mode .sidebar-nav,
  body.dark-mode .sidebar-body { background: var(--surface); color: var(--text); }
  body.dark-mode .project-item,
  body.dark-mode .project-section-title,
  body.dark-mode .home-sidebar-btn,
  body.dark-mode .snapshot-sidebar-btn,
  body.dark-mode .project-section { background: transparent; color: var(--text-2); }
  body.dark-mode .project-item.active,
  body.dark-mode .project-item:hover { background: var(--surface-2); color: var(--text); }
  body.dark-mode .sf-version,
  body.dark-mode .sf-built,
  body.dark-mode .sf-tagline { color: var(--text-dim); }

  /* Cards, panels, tiles — the big Board / Table / Home surfaces */
  body.dark-mode .task-card,
  body.dark-mode .stage-panel,
  body.dark-mode .board-panel,
  body.dark-mode .hi-card,
  body.dark-mode .hi-item,
  body.dark-mode .plv-card,
  body.dark-mode .plv-section,
  body.dark-mode .plv-search,
  body.dark-mode .ctp-project-row,
  body.dark-mode .ctp-project-card,
  body.dark-mode .tlv-stat-tile,
  body.dark-mode .tlv-log-row,
  body.dark-mode .tlv-empty,
  body.dark-mode .twv-card,
  body.dark-mode .twv-toolbar,
  body.dark-mode .hmw-card,
  body.dark-mode .hmw-toolbar,
  body.dark-mode .ptv-project-block,
  body.dark-mode .ptv-milestone,
  body.dark-mode .ptv-header,
  body.dark-mode .tiv-tile,
  body.dark-mode .tiv-body,
  body.dark-mode .mst-card,
  body.dark-mode .mst-body,
  body.dark-mode .home-section,
  body.dark-mode .home-section-body,
  body.dark-mode .os-day-tile,
  body.dark-mode .os-list-item { background: var(--surface); color: var(--text); border-color: var(--border); }

  /* Nested / lighter surfaces */
  body.dark-mode .task-card-body,
  body.dark-mode .task-card-notes,
  body.dark-mode .stage-empty,
  body.dark-mode .hi-meta,
  body.dark-mode .home-section-header,
  body.dark-mode .plv-project-meta,
  body.dark-mode .tlv-stat-strip,
  body.dark-mode .ai-rj-desc,
  body.dark-mode .ai-rj-notes,
  body.dark-mode .mst-preview,
  body.dark-mode .twv-detail-table,
  body.dark-mode .hmw-detail-table { background: var(--surface-2); color: var(--text-2); }

  /* Tables (task table, template tables, workload tables) */
  body.dark-mode .task-table,
  body.dark-mode .task-table thead,
  body.dark-mode .task-table tbody,
  body.dark-mode table.mst-table,
  body.dark-mode table.twv-table,
  body.dark-mode table.hmw-table { background: var(--surface); color: var(--text); }
  body.dark-mode .task-table th,
  body.dark-mode table.mst-table th,
  body.dark-mode table.twv-table th,
  body.dark-mode table.hmw-table th { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
  body.dark-mode .task-table td,
  body.dark-mode table.mst-table td,
  body.dark-mode table.twv-table td,
  body.dark-mode table.hmw-table td { background: var(--surface); color: var(--text); border-color: var(--border); }
  body.dark-mode .task-table tr:hover td,
  body.dark-mode table.mst-table tr:hover td,
  body.dark-mode table.twv-table tr:hover td { background: var(--surface-2); }

  /* Dropdowns, popovers, tooltips */
  body.dark-mode .dropdown-menu,
  body.dark-mode .dropdown-content,
  body.dark-mode .assignee-dropdown,
  body.dark-mode .filter-dropdown,
  body.dark-mode .sort-dropdown,
  body.dark-mode .status-dropdown-menu,
  body.dark-mode .notification-dropdown,
  body.dark-mode .notif-dropdown-body,
  body.dark-mode .notif-dropdown-footer,
  body.dark-mode .grouping-dropdown,
  body.dark-mode .autocomplete-menu,
  body.dark-mode .tt-menu,
  body.dark-mode [class*="-popover"] { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }
  body.dark-mode .dropdown-item,
  body.dark-mode .assignee-option,
  body.dark-mode .notif-row,
  body.dark-mode .status-dropdown-item,
  body.dark-mode .autocomplete-item { color: var(--text); }
  body.dark-mode .dropdown-item:hover,
  body.dark-mode .assignee-option:hover,
  body.dark-mode .notif-row:hover,
  body.dark-mode .status-dropdown-item:hover { background: var(--surface-2); }

  /* Toasts — center + top-right */
  body.dark-mode .toast-card,
  body.dark-mode .toast-body,
  body.dark-mode .toast-msg { background: var(--surface); color: var(--text); border-color: var(--border); }
  body.dark-mode .toast-msg { background: transparent; }
  body.dark-mode .toast-container .toast-card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65); }

  /* Modal internals — header bars, body, footers */
  body.dark-mode .modal-header,
  body.dark-mode .modal-body,
  body.dark-mode .modal-footer,
  body.dark-mode .modal-content,
  body.dark-mode .modal-section,
  body.dark-mode .form-group,
  body.dark-mode .form-group label { background: transparent; color: var(--text); }
  body.dark-mode .modal-body h3,
  body.dark-mode .modal-body h4,
  body.dark-mode .modal-body label,
  body.dark-mode .modal-body strong { color: var(--text); }

  /* Task modal specifics */
  body.dark-mode #taskModal .modal,
  body.dark-mode #projectModal .modal,
  body.dark-mode #projectSetupModal .modal { background: var(--surface); color: var(--text); }
  body.dark-mode .task-modal-navy-bar { background: var(--sbg-navy-2); }
  body.dark-mode .checklist-item,
  body.dark-mode .deliverable-item,
  body.dark-mode .message-item,
  body.dark-mode .activity-item { background: var(--surface-2); color: var(--text); border-color: var(--border); }
  body.dark-mode .message-item .message-body,
  body.dark-mode .message-item .message-meta { color: var(--text-2); }

  /* Buttons — inherit dark palette but keep primary-color affordances */
  body.dark-mode .btn { color: var(--text); background: var(--surface-2); border-color: var(--border); }
  body.dark-mode .btn:hover { background: var(--surface-3); }
  body.dark-mode .btn-primary { background: var(--sbg-red); color: #fff; border-color: var(--sbg-red-dark); }
  body.dark-mode .btn-primary:hover { background: var(--sbg-red-light); }
  body.dark-mode .btn-navy,
  body.dark-mode .btn-dark { background: var(--sbg-navy-2); color: #fff; border-color: rgba(255,255,255,0.15); }
  body.dark-mode .btn-danger { background: var(--red); color: #fff; }
  body.dark-mode .btn-success { background: var(--green); color: #fff; }
  body.dark-mode .btn-ghost { background: transparent; color: var(--text-2); }
  body.dark-mode .btn-sm-outline { border-color: var(--border-strong); color: var(--text-2); }

  /* Pills, badges, chips — keep semantic colors, adjust neutral */
  body.dark-mode .badge,
  body.dark-mode .pill,
  body.dark-mode .chip,
  body.dark-mode .csi-code,
  body.dark-mode .task-card-meta-item,
  body.dark-mode .task-meta-pill { background: var(--surface-3); color: var(--text-2); border-color: var(--border); }
  body.dark-mode .stage-count,
  body.dark-mode .count { color: var(--text-dim); }

  /* Status fill classes — tint the whole card in dark mode using fill vars */
  body.dark-mode .task-card.status-not-started { background: var(--fill-not-started); }
  body.dark-mode .task-card.status-in-progress { background: var(--fill-in-progress); }
  body.dark-mode .task-card.status-blocked { background: var(--fill-blocked); }
  body.dark-mode .task-card.status-pending { background: var(--fill-pending); }
  body.dark-mode .task-card.status-done { background: var(--fill-done); }

  /* Text overrides for anything using hardcoded navy */
  body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5,
  body.dark-mode .modal-title,
  body.dark-mode .stage-panel-title,
  body.dark-mode .home-section-title,
  body.dark-mode .plv-project-name,
  body.dark-mode .twv-name,
  body.dark-mode .hmw-name,
  body.dark-mode .ptv-project-title,
  body.dark-mode .adv-row-title,
  body.dark-mode .tiv-tile-value { color: var(--text); }
  body.dark-mode .modal-title { color: var(--text); }
  body.dark-mode .subtle,
  body.dark-mode .muted,
  body.dark-mode .helper-text,
  body.dark-mode small,
  body.dark-mode .adv-row-meta,
  body.dark-mode .adv-row-desc { color: var(--text-dim); }

  /* Search / filter bars */
  body.dark-mode .search-input,
  body.dark-mode .filter-input,
  body.dark-mode .plv-search input,
  body.dark-mode .adv-filter-search input { background: var(--surface-2); color: var(--text); border-color: var(--border); }

  /* Progress bars — keep the fill visible, dark the track */
  body.dark-mode .stage-mini-progress,
  body.dark-mode .adv-progress-bar,
  body.dark-mode .plv-progress,
  body.dark-mode .health-score-track { background: var(--surface-3); }

  /* Task-modal specific — top navy bar sub-labels, hours strip, etc. */
  body.dark-mode .task-blue-bar,
  body.dark-mode .task-hours-strip { background: var(--surface-2); color: var(--text); }
  body.dark-mode .hours-strip-block { background: var(--surface-3); }

  /* Advancement modal — dark-friendly rows */
  body.dark-mode .adv-row,
  body.dark-mode .adv-tier-body,
  body.dark-mode .adv-stat-row { background: var(--surface); color: var(--text); border-color: var(--border); }
  body.dark-mode .adv-selected,
  body.dark-mode .adv-favorited { background: var(--surface-2); }
  body.dark-mode .adv-row-notes { background: var(--surface-2); color: var(--text-2); }

  /* Milestone chip in top header — keep gradient, ensure text stays bright */
  body.dark-mode .version-stamp-milestone { color: #fff; }

  /* Header stays navy — reinforce for consistency */
  body.dark-mode header { background: var(--sbg-navy-bg-solid); }
  body.dark-mode .header-stats { color: rgba(255,255,255,0.9); }

  /* v147: --sbg-navy was repurposed as bright text color (#6ea3ff) so
     the 228 places using color:var(--sbg-navy) for headings/labels/etc
     become readable on dark bg. Elements that legitimately need a NAVY
     BACKGROUND must be explicitly re-set to --sbg-navy-bg-solid. */
  body.dark-mode .btn-navy,
  body.dark-mode .btn-dark,
  body.dark-mode .btn-dark:hover,
  body.dark-mode .pill-tab.active,
  body.dark-mode .view-btn.active,
  body.dark-mode .twv-seg-btn.active,
  body.dark-mode .ssv-scope-btn.active,
  body.dark-mode .twv-strip-bar.bar-some,
  body.dark-mode .twv-lookahead-bar.bar-low,
  body.dark-mode .hi-due-badge.thisweek,
  body.dark-mode .home-sidebar-btn.active,
  body.dark-mode .snapshot-sidebar-btn.active,
  body.dark-mode .tlv-stat-ytd::before,
  body.dark-mode .ssv-stat-card.ssv-stat-allopen::before,
  body.dark-mode .task-modal-navy-bar,
  body.dark-mode #taskModal .task-blue-bar,
  body.dark-mode .modal-header.modal-header-navy { background: var(--sbg-navy-bg-solid); }
  body.dark-mode .pill-tab.active,
  body.dark-mode .view-btn.active,
  body.dark-mode .twv-seg-btn.active,
  body.dark-mode .ssv-scope-btn.active { color: #fff; border-color: var(--sbg-navy-bg-solid); }

  /* Buttons/badges that use var(--sbg-navy-2) as background (slightly
     lighter accent) — force the deeper accent navy from v145. */
  body.dark-mode .btn-dark:hover,
  body.dark-mode .modal-tab.active { background: var(--sbg-navy-2); }

  /* Text-only usages of --sbg-navy now correctly render as bright blue.
     Explicit reinforcement for common heading/label patterns. */
  body.dark-mode .stage-panel-title,
  body.dark-mode .home-section-title,
  body.dark-mode .plv-project-name,
  body.dark-mode .adv-row-title,
  body.dark-mode .modal-title,
  body.dark-mode .display,
  body.dark-mode .subtitle-heading,
  body.dark-mode .display-title { color: var(--text); }

  /* Semantic --blue was already brightened to #58a6ff — force it on
     any link/text that uses hardcoded #2563a8 or similar mid-blues. */
  body.dark-mode a,
  body.dark-mode a:visited { color: var(--blue); }
  body.dark-mode a:hover { color: #79b8ff; }

  /* Any remaining stubbornly-navy text from inline styles */
  body.dark-mode [style*="color:#0a2540"],
  body.dark-mode [style*="color: #0a2540"],
  body.dark-mode [style*="color:#0f2d4d"],
  body.dark-mode [style*="color: #0f2d4d"],
  body.dark-mode [style*="color:#1a3a5c"],
  body.dark-mode [style*="color: #1a3a5c"] { color: var(--text) !important; }
  body.dark-mode [style*="background:#0a2540"],
  body.dark-mode [style*="background: #0a2540"] { background: var(--sbg-navy-bg-solid) !important; }

  /* Table row hover — subtle in dark */
  body.dark-mode tr:hover td:not([data-col="stage"]):not([data-col="status"]) { background: var(--surface-2); }

  /* Any bright-white boxes still remaining fall back to surface */
  body.dark-mode [style*="background:#fff"],
  body.dark-mode [style*="background: #fff"],
  body.dark-mode [style*="background:#ffffff"],
  body.dark-mode [style*="background: #ffffff"],
  body.dark-mode [style*="background:white"],
  body.dark-mode [style*="background: white"] { background: var(--surface) !important; }
  body.dark-mode [style*="color:#0a2540"],
  body.dark-mode [style*="color: #0a2540"],
  body.dark-mode [style*="color:#1a1a1a"],
  body.dark-mode [style*="color: #1a1a1a"] { color: var(--text) !important; }

  /* SVG icons that were dark-navy stroke look wrong on dark bg — invert lightly */
  body.dark-mode svg.icon-dark-fill,
  body.dark-mode svg[fill="#0a2540"] { filter: brightness(1.5); }

  /* Toast + notification bell dropdown live on top of the header (already navy) — leave alone */
  /* v145: Dark mode toggle button in the header — sits between toast layer and bell */
  .dark-mode-toggle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 6px;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    flex-shrink: 0;
  }
  .dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(-8deg);
  }
  .dark-mode-toggle:active { transform: rotate(-8deg) scale(0.95); }
  body.dark-mode .dark-mode-toggle {
    background: rgba(229, 178, 76, 0.12);
    border-color: rgba(229, 178, 76, 0.35);
  }
  body.dark-mode .dark-mode-toggle:hover {
    background: rgba(229, 178, 76, 0.22);
    border-color: rgba(229, 178, 76, 0.55);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
  }
  .mono { font-family: 'JetBrains Mono', monospace; }
  .display { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }

  /* ========== HEADER ========== */
  header {
    background: var(--sbg-navy);
    color: #fff;
    padding: 14px 28px;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 100;
    border-bottom: 3px solid var(--sbg-red);
  }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand-logo {
    width: 52px; height: 52px;
    background: #fff;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    flex-shrink: 0;
  }
  .brand-logo svg { width: 40px; height: 40px; }
  .brand-text h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 800; letter-spacing: 0.08em;
    color: #fff; line-height: 1;
  }
  .brand-text h1 .accent { color: #fff; }
  .brand-text .version-stamp {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
  }
  /* v118: Copy-to-Project picker — one row per candidate project. Click a
     row to commit the copy. Mirrors the save-to-template preview pattern
     but keyed on projects rather than templates. */
  .ctp-source-preview {
    background: rgba(10, 37, 64, 0.05);
    border-left: 3px solid var(--sbg-navy, #0a2540);
    padding: 10px 12px;
    border-radius: 3px;
  }
  .ctp-source-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
  }
  .ctp-source-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    margin-top: 3px;
  }
  .ctp-source-note {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    margin-top: 6px;
    line-height: 1.4;
  }
  .ctp-project-row {
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    background: #fff;
  }
  .ctp-project-row:hover {
    background: rgba(10, 37, 64, 0.03);
    border-color: var(--sbg-navy, #0a2540);
    transform: translateX(2px);
  }
  .ctp-project-row .ctp-name {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
  }
  .ctp-project-row .ctp-meta {
    display: flex;
    gap: 6px;
    margin-top: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
  }
  /* v117: Milestone version chip on the top header — mirrors the sidebar
     footer .sf-version-milestone treatment so the app-wide version tag
     reads consistently. Gradient navy→red→gold + shimmer sweep. */
  .brand-text .version-stamp.version-stamp-milestone {
    padding: 3px 10px;
    font-family: 'Barlow Condensed', 'JetBrains Mono', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    background: linear-gradient(135deg, var(--sbg-navy, #0a2540) 0%, var(--sbg-red, #c8322b) 55%, var(--sbg-gold, #c07f00) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    position: relative;
    overflow: hidden;
  }
  .brand-text .version-stamp.version-stamp-milestone::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
    animation: milestone-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
  }
  .brand-text .version-built {
    display: inline-block;
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
  }
  .brand-text .subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.25em;
    color: #a8b3c2; margin-top: 4px;
  }
  .header-stats { display: flex; gap: 24px; align-items: center; }
  .stat-chip { display: flex; flex-direction: column; align-items: flex-end; }
  .stat-chip .label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; color: #a8b3c2;
    text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600;
  }
  .stat-chip .value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px; font-weight: 700; color: #fff;
  }
  .stat-chip .value.accent { color: var(--sbg-red-light); }

  /* ========== LAYOUT ========== */
  .layout { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 85px); transition: grid-template-columns 0.25s ease; }
  .layout.sidebar-collapsed { grid-template-columns: 56px 1fr; }
  .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 18px; overflow-y: auto;
    max-height: calc(100vh - 85px); position: sticky; top: 85px;
    transition: padding 0.25s ease;
    display: flex;
    flex-direction: column;
  }
  .layout.sidebar-collapsed .sidebar {
    padding: 12px 6px;
    overflow-x: hidden;
  }

  /* Sidebar toggle button */
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: background 0.12s, border-color 0.12s;
  }
  .sidebar-toggle:hover { background: var(--surface-3); border-color: var(--sbg-navy); color: var(--sbg-navy); }
  .sidebar-toggle-icon { font-size: 12px; transition: transform 0.25s; }
  .layout.sidebar-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
  .layout.sidebar-collapsed .sidebar-toggle-label { display: none; }
  .layout.sidebar-collapsed .sidebar-toggle {
    padding: 8px 6px;
    gap: 0;
  }

  .sidebar-section { margin-bottom: 24px; }

  /* Sidebar footer — pinned at bottom showing file version + creation date */
  .sidebar-footer {
    margin-top: auto;
    padding: 12px 10px 6px;
    border-top: 1px solid var(--border);
    text-align: center;
    line-height: 1.5;
  }
  .sidebar-footer .sf-brand {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sbg-navy);
  }
  .sidebar-footer .sf-version {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--sbg-red);
    letter-spacing: 0.1em;
    background: rgba(200, 50, 43, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 2px;
  }
  /* v100: milestone version chip — gradient + subtle shimmer to mark the 100th ship */
  .sidebar-footer .sf-version.sf-version-milestone {
    font-family: 'Barlow Condensed', 'JetBrains Mono', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    background: linear-gradient(135deg, var(--sbg-navy, #0a2540) 0%, var(--sbg-red, #c8322b) 55%, var(--sbg-gold, #c07f00) 100%);
    padding: 3px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(10, 37, 64, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
  }
  .sidebar-footer .sf-version.sf-version-milestone::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    animation: milestone-shimmer 3.5s ease-in-out infinite;
  }
  @keyframes milestone-shimmer {
    0%, 15% { left: -100%; }
    50%, 100% { left: 200%; }
  }
  .sidebar-footer .sf-created {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
    font-style: italic;
  }
  .sidebar-footer .sf-built {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-faint);
    margin-top: 2px;
    letter-spacing: 0.02em;
  }
  .sidebar-footer .sf-org {
    font-size: 9px;
    color: var(--text-faint);
    margin-top: 2px;
  }
  /* Collapsed sidebar: hide all text, show just a tiny version badge */
  .layout.sidebar-collapsed .sidebar-footer {
    padding: 8px 0 4px;
  }
  .layout.sidebar-collapsed .sidebar-footer .sf-brand,
  .layout.sidebar-collapsed .sidebar-footer .sf-built,
  .layout.sidebar-collapsed .sidebar-footer .sf-created,
  .layout.sidebar-collapsed .sidebar-footer .sf-org { display: none; }

  .sidebar-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--text-dim); font-weight: 700; margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
  }
  /* When collapsed, show section titles as a thin horizontal rule, hide text */
  .layout.sidebar-collapsed .sidebar-title {
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    justify-content: center;
  }
  .layout.sidebar-collapsed .sidebar-title span { display: none; }
  /* When collapsed, compact buttons: icon only, no label, tighter padding */
  .layout.sidebar-collapsed .sb-button {
    padding: 8px 0 !important;
    font-size: 15px;
    justify-content: center !important;
    margin-bottom: 4px !important;
  }
  .layout.sidebar-collapsed .sb-btn-label { display: none; }
  .layout.sidebar-collapsed .sb-section-action .sb-btn-label { display: none; }
  .layout.sidebar-collapsed .sb-section-action {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  .layout.sidebar-collapsed .sb-hint { display: none; }

  /* ============= TODAY / HOME VIEW ============= */
  .home-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--sbg-navy) 0%, #1a3a5c 100%);
    border: 1px solid var(--sbg-navy);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: transform 0.12s, box-shadow 0.12s;
    position: relative;
  }
  .home-sidebar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10,37,64,0.25);
  }
  .home-sidebar-btn.active {
    background: linear-gradient(135deg, var(--sbg-red) 0%, #a5291f 100%);
    border-color: var(--sbg-red);
  }
  .home-sidebar-btn .hsb-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }
  .home-sidebar-btn .hsb-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .home-sidebar-btn .hsb-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .home-sidebar-btn .hsb-sub {
    font-size: 10px;
    opacity: 0.8;
  }
  .home-sidebar-btn .hsb-badge {
    min-width: 22px;
    padding: 2px 7px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    border-radius: 11px;
    text-align: center;
    animation: newPulse 1.8s ease-in-out infinite;
  }
  .home-sidebar-btn.active .hsb-badge {
    background: #fff;
    color: var(--sbg-red);
  }
  .layout.sidebar-collapsed .home-sidebar-btn {
    padding: 10px 0;
    justify-content: center;
  }
  .layout.sidebar-collapsed .home-sidebar-btn .hsb-body { display: none; }
  .layout.sidebar-collapsed .home-sidebar-btn .hsb-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    padding: 1px 5px;
    font-size: 9px;
  }

  /* ========== STATUS SNAPSHOT — sidebar button ========== */
  .snapshot-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #c07f00 0%, #a06900 100%);
    border: 1px solid #a06900;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: transform 0.12s, box-shadow 0.12s;
    position: relative;
  }
  .snapshot-sidebar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192,127,0,0.3);
  }
  .snapshot-sidebar-btn.active {
    background: linear-gradient(135deg, var(--sbg-red) 0%, #a5291f 100%);
    border-color: var(--sbg-red);
  }
  .snapshot-sidebar-btn .ssb-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }
  .snapshot-sidebar-btn .ssb-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .snapshot-sidebar-btn .ssb-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .snapshot-sidebar-btn .ssb-sub {
    font-size: 10px;
    opacity: 0.85;
  }
  .snapshot-sidebar-btn .ssb-badge {
    min-width: 22px;
    padding: 2px 7px;
    background: rgba(255,255,255,0.95);
    color: #8a5a00;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    border-radius: 11px;
    text-align: center;
  }
  .snapshot-sidebar-btn.active .ssb-badge {
    background: #fff;
    color: var(--sbg-red);
  }
  .layout.sidebar-collapsed .snapshot-sidebar-btn {
    padding: 10px 0;
    justify-content: center;
  }
  .layout.sidebar-collapsed .snapshot-sidebar-btn .ssb-body { display: none; }
  .layout.sidebar-collapsed .snapshot-sidebar-btn .ssb-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    padding: 1px 5px;
    font-size: 9px;
  }

  /* ========== STATUS SNAPSHOT — full view ========== */
  /* ============================================================
     TEAM WORKLOAD VIEW (v52) — full-page CSS
     ============================================================ */
  /* ============================================================
     PROJECT TIMELINE VIEW (v75) — full chronological view
     ============================================================ */
  /* ============================================================
     OPEN SLOTS VIEW (v80) — find days with available capacity
     ============================================================ */
  /* ============================================================
     TEAM PERFORMANCE INSIGHTS VIEW (v82)
     Task hygiene metrics per estimator. Includes prominent caveat banner.
     ============================================================ */
  #teamInsightsView { padding: 24px 32px; }
  #teamInsightsView.hidden { display: none; }
  .tiv-header { margin-bottom: 18px; }
  .tiv-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .tiv-title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--sbg-navy);
    letter-spacing: 0.02em;
  }
  .tiv-subtitle {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 2px;
  }
  .tiv-actions { display: flex; gap: 6px; flex-wrap: wrap; }

  /* Caveat banner — yellow/gold border, can't be missed */
  .tiv-caveat {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 18px;
    background: #FCF3DC;
    border: 1px solid #c07f00;
    border-left: 6px solid #c07f00;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #5a3c00;
  }
  .tiv-caveat-icon { font-size: 22px; flex-shrink: 0; }
  .tiv-caveat-body strong { color: #5a3c00; }
  .tiv-caveat-body em { color: #5a3c00; }

  /* Toolbar */
  .tiv-toolbar {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .tiv-toolbar-group { display: flex; align-items: center; gap: 6px; }
  .tiv-toolbar-group label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin: 0;
  }

  /* Per-person cards */
  .tiv-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .tiv-person-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 18px;
  }
  .tiv-person-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .tiv-person-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--sbg-navy);
  }
  .tiv-person-meta {
    font-size: 12px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
  }

  /* Metric tiles — 4-column grid (collapses to 2 on narrow) */
  .tiv-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  @media (max-width: 900px) {
    .tiv-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .tiv-metric {
    text-align: left;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    border-left: 4px solid var(--border);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .tiv-metric:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
  .tiv-metric-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 4px;
  }
  .tiv-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: var(--sbg-navy);
    line-height: 1;
    margin-bottom: 4px;
  }
  .tiv-metric-sub {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.3;
  }
  /* Bands — neutral-positive coding (good = green, fair = gold, poor = red, n/a = gray) */
  .tiv-metric.tiv-band-good { border-left-color: #2e7d52; }
  .tiv-metric.tiv-band-good .tiv-metric-value { color: #2e7d52; }
  .tiv-metric.tiv-band-fair { border-left-color: var(--sbg-gold); }
  .tiv-metric.tiv-band-fair .tiv-metric-value { color: var(--sbg-gold); }
  .tiv-metric.tiv-band-poor { border-left-color: var(--sbg-red); }
  .tiv-metric.tiv-band-poor .tiv-metric-value { color: var(--sbg-red); }
  .tiv-metric.tiv-band-na .tiv-metric-value { color: var(--text-dim); }

  /* Blocked-tasks note inside the card */
  .tiv-blocked-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(200, 50, 43, 0.08);
    border: 1px solid rgba(200, 50, 43, 0.25);
    border-radius: 5px;
    font-size: 12px;
    color: #862522;
  }

  /* Empty state */
  .tiv-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-dim);
  }
  .tiv-empty-icon { font-size: 56px; margin-bottom: 14px; }
  .tiv-empty h3 { color: var(--sbg-navy); margin-bottom: 6px; }

  /* Drill-down task list */
  .tiv-drill-list { display: flex; flex-direction: column; gap: 4px; }
  .tiv-drill-row {
    display: grid;
    grid-template-columns: 1fr 200px 200px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
  }
  .tiv-drill-row:hover { background: var(--surface-3); }
  .tiv-drill-primary { color: var(--text); font-weight: 600; }
  .tiv-drill-secondary { color: var(--text-dim); font-size: 11px; }
  .tiv-drill-meta {
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-align: right;
  }

  #openSlotsView { padding: 24px 32px; }
  #openSlotsView.hidden { display: none; }
  .osv-header { margin-bottom: 18px; }
  .osv-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .osv-title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--sbg-navy);
    letter-spacing: 0.02em;
  }
  .osv-subtitle {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 2px;
  }
  .osv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .osv-toolbar {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .osv-toolbar-group { display: flex; align-items: center; gap: 6px; }
  .osv-toolbar-group label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin: 0;
  }
  .osv-summary {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .osv-summary-chip {
    flex: 0 1 auto;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
  }
  .osv-summary-chip strong {
    color: var(--sbg-navy);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
  }
  .osv-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .osv-person-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 18px;
  }
  .osv-person-card.has-no-slots { opacity: 0.6; }
  .osv-person-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .osv-person-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--sbg-navy);
  }
  .osv-person-meta {
    font-size: 12px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
  }
  .osv-slots-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
  }
  .osv-slot {
    padding: 8px 12px;
    background: var(--surface-2);
    border-radius: 6px;
    border-left: 4px solid var(--green);
    cursor: default;
  }
  .osv-slot.is-fully-open { border-left-color: #2e7d52; background: rgba(46, 125, 82, 0.06); }
  .osv-slot.is-mostly-open { border-left-color: var(--sbg-gold); }
  .osv-slot-date {
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
  }
  .osv-slot-detail {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .osv-slot-available {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    color: #2e7d52;
    margin-top: 2px;
  }
  .osv-no-slots-msg {
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
    padding: 6px 0;
  }
  .osv-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-dim);
  }
  .osv-empty-icon { font-size: 56px; margin-bottom: 14px; }
  .osv-empty h3 { color: var(--sbg-navy); margin-bottom: 6px; }

  /* v80: Open Slots badge on Team Workload cards */
  .twv-openslots-row {
    margin: 8px 0;
    display: flex;
    justify-content: center;
  }
  .twv-openslots-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(46, 125, 82, 0.10);
    border: 1px solid rgba(46, 125, 82, 0.25);
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #2e7d52;
    cursor: pointer;
    transition: background 0.1s;
  }
  .twv-openslots-badge:hover {
    background: rgba(46, 125, 82, 0.18);
  }
  .twv-openslots-badge.twv-openslots-none {
    background: rgba(107, 118, 135, 0.08);
    border-color: rgba(107, 118, 135, 0.20);
    color: var(--text-dim);
    cursor: default;
  }
  .twv-openslots-meta {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 10px;
    opacity: 0.8;
  }

  /* v80: Open Slots detail popover */
  .osd-list { display: flex; flex-direction: column; gap: 4px; }
  .osd-row {
    display: grid;
    grid-template-columns: 140px 1fr 100px 100px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    border-left: 4px solid var(--green);
    font-size: 12px;
  }
  .osd-date { font-weight: 700; color: var(--text); }
  .osd-load { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
  .osd-pct {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-align: right;
    color: var(--sbg-navy);
  }
  .osd-pct.fully-open { color: #2e7d52; }
  .osd-avail {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-align: right;
    color: #2e7d52;
  }

  /* v80: Find Availability modal */
  .fav-form-row {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    margin: 14px 0;
  }
  .fav-form-row label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    display: block;
    margin-bottom: 3px;
  }
  .fav-form-row input[type="number"] {
    width: 100px;
    font-size: 14px;
    padding: 6px 10px;
  }
  .fav-results { margin-top: 14px; }
  .fav-result-row {
    display: grid;
    grid-template-columns: 130px 130px 1fr auto;
    gap: 12px;
    padding: 9px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    border-left: 4px solid var(--green);
    margin-bottom: 4px;
    font-size: 13px;
  }
  .fav-result-row .fav-person { font-weight: 700; color: var(--text); }
  .fav-result-row .fav-date { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
  .fav-result-row .fav-meta { color: var(--text-dim); font-size: 11px; }
  .fav-result-row .fav-avail {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: #2e7d52;
  }
  .fav-no-results {
    color: var(--text-dim);
    text-align: center;
    padding: 40px 20px;
    font-style: italic;
  }

  #projectTimelineView { padding: 24px 32px; }
  #projectTimelineView.hidden { display: none; }
  .ptv-header { margin-bottom: 18px; }

  /* ============================================================
     v166: Project Timeline — clean view + print CSS
     ============================================================
     Clean view (toggle) and print output share most of their styling
     since both aim to strip internal actuals for a shareable plan.
     `body.ptv-clean-mode` triggers on-screen clean styling; `@media print`
     always applies clean styling (regardless of toggle) plus additional
     app-chrome hiding. */

  /* Active state for the Clean View toggle button */
  .ptv-clean-toggle.active {
    background: #2e7d52 !important;
    color: #fff !important;
    border-color: #2e7d52 !important;
  }
  /* v167: Active state for the Monochrome toggle button */
  .ptv-mono-toggle.active {
    background: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
  }
  /* v168: Active state for the Compact toggle button */
  .ptv-compact-toggle.active {
    background: var(--sbg-gold, #c07f00) !important;
    color: #fff !important;
    border-color: var(--sbg-gold, #c07f00) !important;
  }

  /* ----- v168: Compact mode ----- */
  /* Halves row heights + tightens type + reduces gaps so more tasks fit
     per printed page. Works on-screen and in print. Stacks with Clean
     View + Monochrome. */
  body.ptv-compact-mode .ptv-task-row {
    padding: 3px 8px !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    gap: 6px !important;
  }
  body.ptv-compact-mode .ptv-task-title {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
  body.ptv-compact-mode .ptv-task-stage {
    font-size: 10px !important;
    padding: 1px 5px !important;
  }
  body.ptv-compact-mode .ptv-task-assignee {
    font-size: 11px !important;
  }
  body.ptv-compact-mode .ptv-task-status-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
  }
  body.ptv-compact-mode .ptv-task-status-label {
    padding: 1px 6px !important;
    font-size: 9px !important;
  }
  body.ptv-compact-mode .ptv-group-header,
  body.ptv-compact-mode .ptv-stage-header {
    padding: 4px 10px !important;
    font-size: 11px !important;
    margin-top: 6px !important;
  }
  body.ptv-compact-mode .early-completion-badge,
  body.ptv-compact-mode .late-completion-badge,
  body.ptv-compact-mode .not-required-badge,
  body.ptv-compact-mode .rescheduled-past-due-badge,
  body.ptv-compact-mode .recurrence-badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }
  /* Print-only compact overrides — even tighter for maximum density */
  @media print {
    body.ptv-compact-mode .ptv-task-row {
      padding: 1.5pt 5pt !important;
      border-bottom: 0.25pt solid #ccc !important;
    }
    body.ptv-compact-mode .ptv-task-title {
      font-size: 9pt !important;
    }
    body.ptv-compact-mode .ptv-task-stage {
      font-size: 7pt !important;
    }
    body.ptv-compact-mode .ptv-task-assignee {
      font-size: 8pt !important;
    }
    body.ptv-compact-mode .ptv-group-header,
    body.ptv-compact-mode .ptv-stage-header {
      padding: 2pt 6pt !important;
      font-size: 9pt !important;
      margin-top: 3pt !important;
    }
  }

  /* ----- On-screen clean mode ----- */
  body.ptv-clean-mode .ptv-task-status-label {
    display: none !important;
  }
  body.ptv-clean-mode .ptv-task-status-dot {
    background: #cbd5df !important;
  }
  body.ptv-clean-mode .early-completion-badge,
  body.ptv-clean-mode .late-completion-badge,
  body.ptv-clean-mode .not-required-badge,
  body.ptv-clean-mode .rescheduled-past-due-badge,
  body.ptv-clean-mode .recurrence-badge,
  body.ptv-clean-mode .training-chip-mini {
    display: none !important;
  }
  body.ptv-clean-mode .ptv-task-row.is-done .ptv-task-title {
    text-decoration: none !important;
    opacity: 1 !important;
    color: var(--text) !important;
  }
  body.ptv-clean-mode .ptv-task-row.is-overdue {
    background: transparent !important;
  }
  body.ptv-clean-mode .ptv-task-row.is-overdue .ptv-task-title,
  body.ptv-clean-mode .ptv-task-row.is-overdue .ptv-task-assignee {
    color: var(--text) !important;
  }

  /* ----- v167: On-screen monochrome mode ----- */
  /* Strips every color out of the Project Timeline surface. Backgrounds
     become white/light grey, text becomes near-black, borders become
     grey hairlines. Works standalone or stacked with Clean View. */
  body.ptv-mono-mode #projectTimelineView,
  body.ptv-mono-mode #projectTimelineView * {
    color: #111 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #888 !important;
    box-shadow: none !important;
  }
  body.ptv-mono-mode #projectTimelineView {
    background: #fff !important;
  }
  body.ptv-mono-mode .ptv-task-row {
    border-bottom: 1px solid #ccc !important;
  }
  body.ptv-mono-mode .ptv-group-header,
  body.ptv-mono-mode .ptv-stage-header {
    background: #eee !important;
    border: 1px solid #888 !important;
  }
  body.ptv-mono-mode .ptv-task-status-dot {
    background: #666 !important;
    border: 1px solid #333 !important;
  }
  body.ptv-mono-mode .ptv-task-row.is-critical .ptv-task-title::before {
    content: "★ ";
    color: #000 !important;
  }
  /* Neutralize badge tints in mono mode (but keep badges visible if not
     also in clean mode — some users may want mono WITH the badges) */
  body.ptv-mono-mode .early-completion-badge,
  body.ptv-mono-mode .late-completion-badge,
  body.ptv-mono-mode .not-required-badge,
  /* v175: Reschedule modal reason-tile visual feedback */
  .rtm-reason-tile:hover {
    border-color: #6b46c1 !important;
    background: rgba(107, 70, 193, 0.03) !important;
  }
  .rtm-reason-tile input[type="radio"]:checked ~ span {
    color: #6b46c1 !important;
  }
  label.rtm-reason-tile:has(input[type="radio"]:checked) {
    border-color: #6b46c1 !important;
    background: rgba(107, 70, 193, 0.06) !important;
    box-shadow: 0 0 0 1px rgba(107, 70, 193, 0.2);
  }
  .rtm-shortcut:hover {
    background: rgba(107, 70, 193, 0.1) !important;
    border-color: #6b46c1 !important;
  }

  body.ptv-mono-mode .rescheduled-past-due-badge {
    background: #eee !important;
    color: #111 !important;
    border: 1px solid #888 !important;
  }
  body.ptv-mono-mode .ptv-task-row.is-overdue {
    background: transparent !important;
  }
  body.ptv-mono-mode .ptv-task-status-label {
    background: #eee !important;
    color: #111 !important;
    border: 1px solid #888 !important;
  }
  /* Kill the strikethrough emphasis on done tasks in mono — reads too
     "decorated" for a plain B&W handout */
  body.ptv-mono-mode .ptv-task-row.is-done .ptv-task-title {
    color: #333 !important;
  }

  /* ----- Print CSS ----- */
  @media print {
    /* Always strip app chrome — sidebar, toolbars, buttons, modals */
    body {
      background: #fff !important;
      font-size: 10.5pt;
    }
    /* Force color reproduction so backgrounds/tints print through */
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
    .sidebar,
    .main-header,
    .snapshot-sidebar,
    .toast-container,
    .modal-backdrop,
    #stickyCountdownBar {
      display: none !important;
    }
    .main {
      margin-left: 0 !important;
      padding: 0 !important;
      max-width: 100% !important;
    }
    /* Kill the toolbar + action buttons + interactive controls */
    .ptv-toolbar,
    .ptv-actions,
    .btn {
      display: none !important;
    }
    /* PTV header slimmed — title becomes the print page header */
    .ptv-header {
      margin-bottom: 8pt !important;
      padding-bottom: 4pt !important;
      border-bottom: 1pt solid #333;
    }
    .ptv-title {
      font-size: 14pt !important;
      margin: 0 !important;
    }
    .ptv-subtitle { display: none !important; }
    .version-stamp,
    .version-built {
      display: none !important;
    }
    /* Task rows can't split across pages */
    .ptv-task-row {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      padding: 3pt 6pt !important;
      cursor: default !important;
    }
    .ptv-group-header,
    .ptv-stage-header {
      page-break-after: avoid !important;
      break-after: avoid !important;
      padding: 4pt 8pt !important;
      font-size: 10pt !important;
      margin-top: 6pt !important;
      font-weight: 700;
    }
    .ptv-task-title { font-weight: 600; }
    .ptv-task-stage {
      font-size: 8pt !important;
      margin-left: 6pt;
    }
    .ptv-task-assignee { font-size: 9pt; }
    /* Page setup */
    @page {
      size: letter portrait;
      margin: 0.5in 0.5in 0.6in 0.5in;
    }
    @page {
      @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 8pt;
        color: #666;
      }
    }
  }

  .ptv-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .ptv-title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--sbg-navy);
    letter-spacing: 0.02em;
  }
  .ptv-subtitle {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 2px;
  }
  .ptv-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .ptv-toolbar {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .ptv-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ptv-toolbar-group label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin: 0;
  }
  .ptv-toolbar-group select {
    font-size: 12.5px;
    padding: 4px 10px;
  }
  .ptv-summary {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .ptv-stat {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
  }
  .ptv-stat-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 800;
    color: var(--sbg-navy);
    line-height: 1.1;
  }
  .ptv-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-top: 4px;
  }
  .ptv-stat.is-past { border-left: 4px solid var(--text-dim); }
  .ptv-stat.is-today { border-left: 4px solid var(--sbg-gold); }
  .ptv-stat.is-future { border-left: 4px solid var(--sbg-navy); }
  .ptv-stat.is-done { border-left: 4px solid var(--green); }
  .ptv-stat.is-overdue { border-left: 4px solid var(--sbg-red); }
  .ptv-stat.is-range { background: var(--surface-2); }
  .ptv-stat-range {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text);
    line-height: 1.2;
  }
  .ptv-content-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .ptv-content {
    padding: 0;
  }
  /* Day group — same structure as Look Ahead but with timeline-specific styling */
  .ptv-day-group {
    border-bottom: 1px solid var(--border);
  }
  .ptv-day-group:last-child {
    border-bottom: none;
  }
  .ptv-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .ptv-day-group.is-past .ptv-day-header { background: rgba(107, 118, 135, 0.08); }
  .ptv-day-group.is-today .ptv-day-header { background: rgba(192, 127, 0, 0.10); border-bottom-color: var(--sbg-gold); }
  .ptv-day-group.is-future .ptv-day-header { background: var(--surface-2); }
  .ptv-day-date {
    font-size: 15px;
    font-weight: 800;
    color: var(--sbg-navy);
  }
  .ptv-day-group.is-past .ptv-day-date { color: var(--text-2); }
  .ptv-day-group.is-today .ptv-day-date { color: var(--sbg-red); }
  .ptv-day-meta {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
  }
  .ptv-day-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-left: 8px;
    text-transform: uppercase;
  }
  .ptv-day-tag.tag-past { background: var(--surface-3); color: var(--text-2); }
  .ptv-day-tag.tag-today { background: var(--sbg-gold); color: #fff; }
  .ptv-day-tag.tag-future { background: rgba(10, 37, 64, 0.10); color: var(--sbg-navy); }
  /* Task row inside a day */
  .ptv-task-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 18px;
    border-bottom: 1px solid var(--surface-3);
    cursor: pointer;
    transition: background 0.1s;
  }
  .ptv-task-row:last-child { border-bottom: none; }
  .ptv-task-row:hover { background: var(--surface-2); }
  .ptv-task-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .ptv-task-status-dot.status-not-started { background: var(--text-faint); }
  .ptv-task-status-dot.status-in-progress { background: var(--blue); }
  .ptv-task-status-dot.status-blocked { background: var(--sbg-red); }
  .ptv-task-status-dot.status-pending { background: var(--purple); }
  .ptv-task-status-dot.status-done { background: var(--green); }
  .ptv-task-title {
    font-size: 13px;
    color: var(--text);
    line-height: 1.3;
  }
  .ptv-task-row.is-done .ptv-task-title {
    text-decoration: line-through;
    color: var(--text-dim);
  }
  .ptv-task-row.is-critical .ptv-task-title::before {
    content: "🔥 ";
  }
  .ptv-task-row.is-overdue .ptv-task-title {
    color: var(--sbg-red);
    font-weight: 700;
  }
  .ptv-task-stage {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-dim);
    margin-left: 8px;
    padding: 1px 6px;
    background: var(--surface-3);
    border-radius: 3px;
  }
  .ptv-task-assignee {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
  }
  .ptv-task-status-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .ptv-task-status-label.status-not-started { background: var(--fill-not-started); color: var(--text-2); border: 1px solid var(--fill-not-started-border); }
  .ptv-task-status-label.status-in-progress { background: var(--fill-in-progress); color: var(--blue); border: 1px solid var(--fill-in-progress-border); }
  .ptv-task-status-label.status-blocked { background: var(--fill-blocked); color: var(--sbg-red); border: 1px solid var(--fill-blocked-border); }
  .ptv-task-status-label.status-pending { background: var(--fill-pending); color: var(--purple); border: 1px solid var(--fill-pending-border, var(--purple)); }
  .ptv-task-status-label.status-done { background: var(--fill-done); color: var(--green); border: 1px solid var(--fill-done-border, var(--green)); }
  /* Empty day row */
  .ptv-day-empty {
    padding: 10px 18px;
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
  }
  /* Empty state — no tasks at all */
  .ptv-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-dim);
  }
  .ptv-empty-icon {
    font-size: 56px;
    margin-bottom: 14px;
  }
  .ptv-empty h3 {
    color: var(--sbg-navy);
    margin-bottom: 6px;
  }

  #teamWorkloadView { padding: 24px 32px; }
  #teamWorkloadView.hidden { display: none; }
  .twv-header { margin-bottom: 18px; }
  /* ============================================================
     TRAINING LOG VIEW (v119)
     Cross-project training-hours dashboard. Uses SBG gold as the
     primary accent (matching the 🎓 training tag color) so it's
     visually distinct from Team Workload (blue accent) and Home
     (navy accent).
     ============================================================ */
  /* ============================================================
     PROJECTS LIST VIEW (v125)
     Cross-workstream browsing page. Simple card grid grouped by
     workstream + Past Pursuits + Archived. Designed to be a clean,
     visually pleasing "find any project" surface.
     ============================================================ */
  .plv-header { margin: 0 0 24px 0; }
  .plv-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
  }
  .plv-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .plv-subtitle {
    font-size: 13px;
    color: var(--text-dim, #6b7687);
    margin-top: 4px;
    max-width: 640px;
    line-height: 1.5;
  }
  .plv-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .plv-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 480px;
  }
  .plv-search {
    flex: 1;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background: #fff;
    color: var(--text, #1a1a1a);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .plv-search:focus {
    outline: none;
    border-color: var(--sbg-navy, #0a2540);
    box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1);
  }
  .plv-body { display: flex; flex-direction: column; gap: 28px; }
  .plv-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
  }
  .plv-section-icon { font-size: 20px; line-height: 1; }
  .plv-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .plv-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 8px;
    background: rgba(10, 37, 64, 0.08);
    color: var(--sbg-navy, #0a2540);
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
  }
  .plv-section-ws-bidding .plv-section-header        { border-bottom-color: rgba(200, 50, 43, 0.35); }
  .plv-section-ws-training .plv-section-header       { border-bottom-color: rgba(192, 127, 0, 0.40); }
  .plv-section-ws-events .plv-section-header         { border-bottom-color: rgba(124, 58, 237, 0.35); }
  .plv-section-ws-precon-general .plv-section-header { border-bottom-color: rgba(74, 85, 96, 0.35); }
  .plv-section-past .plv-section-header,
  .plv-section-archived .plv-section-header  { border-bottom-color: rgba(107, 118, 135, 0.30); }
  .plv-section-past .plv-section-title,
  .plv-section-archived .plv-section-title { color: var(--text-dim, #6b7687); }
  .plv-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
  }
  .plv-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 14px 16px 14px 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
  }
  .plv-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10, 37, 64, 0.10);
    border-color: rgba(10, 37, 64, 0.20);
  }
  .plv-card-accent {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: rgba(10, 37, 64, 0.15);
  }
  .plv-card-ws-bidding .plv-card-accent        { background: var(--sbg-red, #c8322b); }
  .plv-card-ws-training .plv-card-accent       { background: var(--sbg-gold, #c07f00); }
  .plv-card-ws-events .plv-card-accent         { background: #7c3aed; }
  .plv-card-ws-precon-general .plv-card-accent { background: #4a5560; }
  .plv-card-archived { opacity: 0.65; }
  .plv-card-archived:hover { opacity: 0.85; }
  .plv-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
  }
  .plv-card-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--sbg-navy, #0a2540);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .plv-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .plv-card-header-body { flex: 1; min-width: 0; }
  .plv-card-name {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .plv-card-ws-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .plv-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .plv-card-tasks {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    color: var(--text-dim, #6b7687);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .plv-card-tasks strong {
    color: var(--sbg-navy, #0a2540);
    font-weight: 700;
    font-size: 13px;
  }
  .plv-card-days {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .plv-card-days-late,
  .plv-card-days-today,
  .plv-card-days-urgent   { background: #fef2f2; color: #991b1b; }
  .plv-card-days-warning  { background: #fef3c7; color: #92400e; }
  .plv-card-days-ok       { background: #f0fdf4; color: #166534; }
  .plv-card-days-none,
  .plv-card-days-archived { background: #f1f5f9; color: #64748b; }
  .plv-card-progress {
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    overflow: hidden;
  }
  .plv-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sbg-red, #c8322b) 0%, var(--sbg-gold, #c07f00) 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
  }
  .plv-empty {
    text-align: center;
    padding: 60px 20px;
  }
  .plv-empty-icon { font-size: 56px; margin-bottom: 14px; opacity: 0.4; }
  .plv-empty-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    margin-bottom: 8px;
  }
  .plv-empty-sub {
    font-size: 14px;
    color: var(--text-dim, #6b7687);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
  }
  .plv-empty-sub a { color: var(--sbg-navy, #0a2540); text-decoration: underline; }
  @media (max-width: 720px) {
    .plv-card-grid { grid-template-columns: 1fr; }
    .plv-title { font-size: 24px; }
  }

  .tlv-header { margin: 0 0 20px 0; }
  .tlv-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
  }
  .tlv-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .tlv-subtitle {
    font-size: 13px;
    color: var(--text-dim, #6b7687);
    margin-top: 4px;
    max-width: 640px;
    line-height: 1.5;
  }
  .tlv-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .tlv-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 8px;
  }
  .tlv-stat-tile {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
  }
  .tlv-stat-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
  }
  .tlv-stat-pending::before { background: var(--sbg-red, #c8322b); }
  .tlv-stat-month::before   { background: var(--sbg-gold, #c07f00); }
  .tlv-stat-ytd::before     { background: var(--sbg-navy, #0a2540); }
  .tlv-stat-all::before     { background: #4a5560; }
  .tlv-stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--sbg-navy, #0a2540);
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .tlv-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
    margin-top: 6px;
  }
  .tlv-stat-sub {
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    margin-top: 2px;
  }
  .tlv-body { display: flex; flex-direction: column; gap: 26px; }
  .tlv-section {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 18px 20px;
  }
  .tlv-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 10px;
  }
  .tlv-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .tlv-section-sub {
    font-size: 12px;
    color: var(--text-dim, #6b7687);
  }
  .tlv-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }
  .tlv-person-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 14px;
    transition: box-shadow 0.15s, border-color 0.15s;
  }
  .tlv-person-card:hover {
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.08);
    border-color: rgba(192, 127, 0, 0.4);
  }
  .tlv-person-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .tlv-person-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
  }
  .tlv-person-avatar.has-photo img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .tlv-person-name {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
  }
  .tlv-person-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .tlv-person-metric {
    background: rgba(10, 37, 64, 0.03);
    padding: 8px 10px;
    border-radius: 4px;
    border-left: 3px solid transparent;
  }
  .tlv-person-metric-pending { border-left-color: var(--sbg-red, #c8322b); }
  .tlv-person-metric-month   { border-left-color: var(--sbg-gold, #c07f00); }
  .tlv-person-metric-ytd     { border-left-color: var(--sbg-navy, #0a2540); }
  .tlv-person-metric-all     { border-left-color: #4a5560; }
  .tlv-metric-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--sbg-navy, #0a2540);
    line-height: 1;
  }
  .tlv-metric-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
    margin-top: 3px;
  }
  .tlv-metric-sub {
    font-size: 10px;
    color: var(--text-dim, #6b7687);
    margin-top: 1px;
  }
  .tlv-filters {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .tlv-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
  }
  .tlv-filter-select {
    padding: 5px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: #fff;
    color: var(--text, #1a1a1a);
    cursor: pointer;
  }
  .tlv-task-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tlv-tl-row {
    display: grid;
    grid-template-columns: 24px 1fr 200px 160px 140px 60px 80px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.12s;
  }
  .tlv-tl-row:hover { background: rgba(192, 127, 0, 0.04); }
  .tlv-tl-status {
    font-size: 16px;
    color: var(--text-dim, #6b7687);
    text-align: center;
  }
  .tlv-tl-row.tlv-tl-done .tlv-tl-status {
    color: #4caf50;
    font-weight: 800;
  }
  .tlv-tl-row.tlv-tl-done .tlv-tl-title {
    color: var(--text-dim, #6b7687);
    text-decoration: line-through;
  }
  .tlv-tl-title {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tlv-tl-project {
    font-size: 12px;
    color: var(--text-dim, #6b7687);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tlv-tl-stage {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sbg-navy, #0a2540);
    background: rgba(10, 37, 64, 0.06);
    padding: 2px 6px;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tlv-tl-person {
    font-size: 12px;
    color: var(--text, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tlv-tl-hours {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--sbg-gold, #c07f00);
    text-align: right;
  }
  .tlv-tl-due {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    text-align: right;
  }
  .tlv-empty {
    text-align: center;
    padding: 40px 20px;
    grid-column: 1 / -1;
  }
  .tlv-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
  }
  .tlv-empty-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    margin-bottom: 6px;
  }
  .tlv-empty-sub {
    font-size: 13px;
    color: var(--text-dim, #6b7687);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
  }
  .tlv-empty-small {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim, #6b7687);
  }
  @media (max-width: 1100px) {
    .tlv-stat-strip { grid-template-columns: repeat(2, 1fr); }
    .tlv-tl-row {
      grid-template-columns: 24px 1fr 100px 60px;
    }
    .tlv-tl-project, .tlv-tl-stage, .tlv-tl-due { display: none; }
  }
  .twv-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .twv-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--sbg-navy);
    margin: 0;
  }
  .twv-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .twv-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* v148: Beefed-up Reschedule Past-Due button — bigger, gold-accented,
     with a red count badge when there's work to reschedule. Draws the
     eye without shouting. */
  .twv-reschedule-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--sbg-red, #c8322b) 0%, #a82820 100%);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(200, 50, 43, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    letter-spacing: 0.3px;
  }
  .twv-reschedule-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200, 50, 43, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #d63b34 0%, #b02922 100%);
  }
  .twv-reschedule-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(200, 50, 43, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .twv-reschedule-btn .twv-reschedule-badge {
    background: #fff;
    color: var(--sbg-red, #c8322b);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  /* Dark mode: same treatment, tuned shadows */
  body.dark-mode .twv-reschedule-btn {
    box-shadow: 0 2px 10px rgba(232, 89, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode .twv-reschedule-btn:hover {
    box-shadow: 0 4px 16px rgba(232, 89, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  /* Toolbar */
  .twv-toolbar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 16px;
    align-items: center;
  }
  .twv-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .twv-toolbar-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 0;
  }
  .twv-segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface);
  }
  .twv-seg-btn {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    transition: all 0.1s;
  }
  .twv-seg-btn:last-child { border-right: none; }
  .twv-seg-btn:hover { background: var(--surface-2); color: var(--text); }
  .twv-seg-btn.active { background: var(--sbg-navy); color: #fff; }
  .twv-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
  }
  .twv-checkbox-label input[type="checkbox"] {
    accent-color: var(--sbg-navy);
    width: 14px;
    height: 14px;
  }

  /* Team summary chips */
  .twv-team-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .twv-summary-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }
  .twv-summary-chip .chip-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--sbg-navy);
  }
  .twv-summary-chip .chip-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .twv-summary-chip.chip-warn { border-color: #c07f00; background: rgba(192,127,0,0.08); }
  .twv-summary-chip.chip-warn .chip-num { color: #c07f00; }
  .twv-summary-chip.chip-critical { border-color: var(--sbg-red); background: rgba(200,50,43,0.08); }
  .twv-summary-chip.chip-critical .chip-num { color: var(--sbg-red); }
  .twv-summary-chip.chip-over { border-color: var(--sbg-red); background: var(--sbg-red); }
  .twv-summary-chip.chip-over .chip-num,
  .twv-summary-chip.chip-over .chip-label { color: #fff; }

  /* Card grid */
  .twv-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
  }
  .twv-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sbg-navy);
    border-radius: 6px;
    padding: 14px;
    transition: box-shadow 0.15s, transform 0.1s;
  }
  .twv-card:hover {
    box-shadow: 0 4px 10px rgba(10,37,64,0.1);
    transform: translateY(-1px);
  }
  .twv-card.load-over { border-left-color: var(--sbg-red); background: rgba(200,50,43,0.03); }
  .twv-card.load-high { border-left-color: #c07f00; }
  .twv-card.load-med { border-left-color: var(--sbg-navy); }
  .twv-card.load-low { border-left-color: #2ca674; }
  .twv-card.load-untracked { border-left-color: #9ba4b0; }

  .twv-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .twv-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
  }
  .twv-card-name-row { flex: 1; min-width: 0; }
  .twv-card-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* v152: Unassigned bucket — visually distinct so users notice
     unassigned work at a glance. Left border in SBG red, subtle red
     tint background, and a small "needs assignment" flag next to the
     name. */
  .twv-card.twv-card-unassigned {
    border-left: 4px solid var(--sbg-red, #c8322b);
    background: linear-gradient(90deg, rgba(200, 50, 43, 0.05) 0%, transparent 40%);
  }
  body.dark-mode .twv-card.twv-card-unassigned {
    background: linear-gradient(90deg, rgba(232, 89, 82, 0.10) 0%, transparent 40%);
  }
  .twv-unassigned-flag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    background: var(--sbg-red, #c8322b);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    vertical-align: middle;
  }
  .twv-card-role {
    font-size: 10.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .twv-card-reassign {
    flex-shrink: 0;
    font-size: 10.5px;
    padding: 4px 8px;
  }

  /* Capacity bar */
  .twv-capacity-bar-wrap { margin-bottom: 12px; }
  .twv-capacity-label {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
  }
  .twv-capacity-pct { color: var(--text-dim); }
  /* v76: small inline window indicator next to capacity number */
  .twv-capacity-window {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 10px;
    margin-left: 2px;
  }
  /* v76: normalized weekly load — shown below the capacity bar */
  .twv-capacity-normalized {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 8px;
    background: var(--surface-2);
    border-radius: 4px;
    border-left: 3px solid var(--sbg-navy);
  }
  .twv-capacity-normalized strong {
    color: var(--text);
    font-weight: 700;
  }
  .twv-card.load-over .twv-capacity-normalized {
    border-left-color: var(--sbg-red);
  }
  .twv-capacity-bar {
    height: 8px;
    background: var(--surface-3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }
  .twv-capacity-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ca674 0%, #2ca674 50%, #c07f00 80%, var(--sbg-red) 100%);
    transition: width 0.2s;
  }
  .twv-card.load-over .twv-capacity-fill { background: var(--sbg-red); }
  .twv-capacity-over {
    position: absolute;
    right: 4px;
    top: -1px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: var(--sbg-red);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
  }
  .twv-capacity-untracked {
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-dim);
    padding: 6px 10px;
    background: var(--surface-2);
    border-radius: 4px;
    border-left: 3px solid #9ba4b0;
  }
  .twv-capacity-untracked-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
  }
  .twv-capacity-untracked-hint {
    font-size: 10.5px;
    font-style: italic;
    margin-left: 6px;
  }

  /* v78: Per-estimator daily/weekly schedule strip
     Sits between the capacity bar and the stat row.
     ============================================================ */
  .twv-strip {
    margin: 8px 0 10px 0;
    padding: 8px 10px;
    background: var(--surface-2);
    border-radius: 6px;
    border: 1px solid var(--border);
  }
  .twv-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
  }
  .twv-strip-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
  }
  .twv-strip-total {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
  }
  .twv-strip-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 72px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    padding-top: 16px; /* v86: room for TODAY pill above today's column */
  }
  .twv-strip-col {
    flex: 1 0 32px;
    min-width: 32px;
    max-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    user-select: none;
  }
  .twv-strip-col:hover .twv-strip-bar { filter: brightness(1.1); }
  .twv-strip-bar-wrap {
    width: 100%;
    height: 54px;
    background: var(--surface-3);
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .twv-strip-bar {
    width: 100%;
    border-radius: 2px;
    transition: height 0.2s ease;
    min-height: 1px;
    position: relative; /* v164: anchor for .twv-strip-bar-early inner segment */
    overflow: hidden;
  }
  .twv-strip-bar.bar-empty { background: var(--surface-3); }
  .twv-strip-bar.bar-some  { background: var(--sbg-navy); }
  .twv-strip-bar.bar-high  { background: var(--sbg-gold); }
  .twv-strip-bar.bar-over  { background: var(--sbg-red); }
  /* v164: Green top segment layered inside a bar to show the portion that
     was completed BEFORE the day arrived. Anchored to bottom so its height
     grows upward from the base of the bar; the parent bar's total height
     stays the same, this just re-tints the lower slice green so remaining
     work is visible at the top. Diagonal-stripe pattern makes it obvious
     the hours aren't actively competing for the day's capacity. */
  .twv-strip-bar-early {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
      45deg,
      rgba(44, 166, 116, 0.85) 0px,
      rgba(44, 166, 116, 0.85) 4px,
      rgba(30, 133, 88, 0.85) 4px,
      rgba(30, 133, 88, 0.85) 8px
    );
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
  }
  body.dark-mode .twv-strip-bar-early {
    background: repeating-linear-gradient(
      45deg,
      rgba(63, 185, 80, 0.85) 0px,
      rgba(63, 185, 80, 0.85) 4px,
      rgba(46, 160, 67, 0.85) 4px,
      rgba(46, 160, 67, 0.85) 8px
    );
  }
  /* v164: Summary strip above every workload card — shows team-wide
     "pulled forward" total for the active window. Green accent to match
     the badge palette. */
  .twv-early-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 8px 0 12px 0;
    background: linear-gradient(90deg, rgba(44, 166, 116, 0.12), rgba(30, 133, 88, 0.08));
    border: 1px solid rgba(44, 166, 116, 0.35);
    border-left: 4px solid #2e7d52;
    border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    color: #1e8558;
    font-weight: 600;
    letter-spacing: 0.03em;
  }
  body.dark-mode .twv-early-summary {
    background: linear-gradient(90deg, rgba(63, 185, 80, 0.15), rgba(46, 160, 67, 0.1));
    border-color: rgba(63, 185, 80, 0.4);
    border-left-color: #3fb950;
    color: #3fb950;
  }
  .twv-early-summary-icon {
    font-size: 18px;
  }
  .twv-early-summary-text {
    flex: 1;
  }
  .twv-early-summary-cta {
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(44, 166, 116, 0.2);
    border: 1px solid rgba(44, 166, 116, 0.4);
    border-radius: 4px;
    color: #1e8558;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .twv-early-summary-cta:hover {
    background: rgba(44, 166, 116, 0.3);
  }
  .twv-strip-bar-num {
    position: absolute;
    top: 1px;
    right: 1px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 700;
    color: var(--text);
    background: rgba(255,255,255,0.85);
    padding: 0 2px;
    border-radius: 2px;
    pointer-events: none;
  }
  .twv-strip-col.is-today .twv-strip-bar-wrap {
    box-shadow: inset 0 0 0 2px var(--sbg-gold);
    background: rgba(192, 127, 0, 0.10);
    border-radius: 3px;
  }
  /* v86: stronger today highlight — label gets bold gold, with TODAY pill above bar */
  .twv-strip-col.is-today .twv-strip-col-label {
    color: var(--sbg-gold);
    font-weight: 700;
  }
  .twv-strip-col.is-today::before {
    content: 'TODAY';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background: var(--sbg-gold);
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
  }
  .twv-strip-col.is-today {
    position: relative;
  }
  .twv-strip-col-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    position: relative;
  }
  .twv-strip-today-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sbg-gold);
    margin-left: 3px;
    vertical-align: middle;
  }
  .twv-strip-col.is-holiday .twv-strip-col-label::after {
    content: ' 🎉';
    font-size: 9px;
  }

  /* v78: Workload drill-down modal task list */
  .wlDrill-list { display: flex; flex-direction: column; gap: 4px; }
  .wlDrill-row {
    display: grid;
    grid-template-columns: 90px 1fr 180px 50px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.1s;
  }
  .wlDrill-row:hover { background: var(--surface-3); }
  .wlDrill-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 700;
  }
  .wlDrill-title { color: var(--text); font-weight: 600; }
  .wlDrill-project { color: var(--text-dim); font-size: 11px; }
  .wlDrill-hours {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-align: right;
    color: var(--sbg-navy);
  }

  /* Stat row */
  .twv-card-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .twv-stat {
    text-align: center;
    padding: 2px;
  }
  .twv-stat-num {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
  }
  .twv-stat-label {
    display: block;
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-top: 2px;
  }
  .twv-stat.critical .twv-stat-num { color: var(--sbg-red); }
  .twv-stat.warn .twv-stat-num { color: #c07f00; }

  /* Top projects list */
  .twv-card-projects {
    margin-top: 8px;
  }
  .twv-card-projects-label {
    font-size: 10.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .twv-card-project-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
    color: var(--text);
  }
  .twv-card-project-row:hover {
    background: var(--surface-2);
    color: var(--sbg-navy);
  }
  .twv-card-project-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
  .twv-card-project-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    margin-left: 8px;
    flex-shrink: 0;
  }
  .twv-card-pto-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }

  .twv-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    background: var(--surface-2);
    border-radius: 4px;
  }

  /* Section headers (table, lookahead, unassigned) */
  .twv-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .twv-section-header h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
  }
  .twv-section-hint {
    font-size: 11.5px;
    color: var(--text-dim);
    font-style: italic;
  }
  .twv-table-section, .twv-lookahead-section, .twv-unassigned-section {
    margin-bottom: 28px;
  }

  /* Detail table */
  .twv-table-wrap {
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow-x: auto;
  }
  .twv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .twv-table thead {
    background: var(--sbg-navy);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .twv-table th {
    padding: 8px 10px;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 10.5px;
  }
  .twv-table th.num { text-align: right; }
  .twv-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
  }
  .twv-table td.num {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
  }
  .twv-table tr:hover { background: var(--surface-2); }
  .twv-table tr.load-over { background: rgba(200,50,43,0.05); }
  .twv-table tr.load-over:hover { background: rgba(200,50,43,0.1); }
  .twv-table .critical-cell { color: var(--sbg-red); font-weight: 700; }
  .twv-table .warn-cell { color: #c07f00; font-weight: 700; }

  /* 14-day look-ahead chart */
  .twv-lookahead-chart {
    display: flex;
    gap: 4px;
    align-items: stretch;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    min-height: 180px;
  }
  .twv-lookahead-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  .twv-lookahead-day.is-today .twv-lookahead-day-label {
    color: var(--sbg-red);
    font-weight: 800;
  }
  .twv-lookahead-day.is-holiday {
    background: rgba(192,127,0,0.08);
    border-radius: 3px;
  }
  .twv-lookahead-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 6px;
  }
  .twv-lookahead-bar {
    width: 80%;
    border-radius: 3px 3px 0 0;
    transition: height 0.2s;
    min-height: 2px;
  }
  .twv-lookahead-bar.bar-high { background: var(--sbg-red); }
  .twv-lookahead-bar.bar-med { background: #c07f00; }
  .twv-lookahead-bar.bar-low { background: var(--sbg-navy); }
  .twv-lookahead-bar.bar-empty { background: var(--surface-3); height: 2% !important; }
  .twv-lookahead-bar-label {
    position: absolute;
    bottom: 100%;
    margin-bottom: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
  }
  .twv-lookahead-holiday-marker {
    position: absolute;
    top: 0;
    font-size: 14px;
  }
  .twv-lookahead-day-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.1;
    word-wrap: break-word;
    width: 100%;
  }

  /* Unassigned pile */
  .twv-unassigned-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .twv-unassigned-row {
    display: grid;
    grid-template-columns: 24px 2fr 1.5fr 80px 50px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .twv-unassigned-row:hover { background: var(--surface-2); }
  .twv-unassigned-row:last-child { border-bottom: none; }
  .twv-unassigned-row.is-critical { background: rgba(200,50,43,0.04); }
  .twv-unassigned-row.is-critical:hover { background: rgba(200,50,43,0.08); }
  .twv-unas-crit { font-size: 14px; text-align: center; }
  .twv-unas-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .twv-unas-project { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .twv-unas-due, .twv-unas-hours { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); text-align: right; }
  .twv-unas-more { padding: 10px; text-align: center; font-style: italic; color: var(--text-faint); font-size: 11.5px; }

  /* ===== TEAM CAPACITY MODAL ===== */
  .tcm-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 14px;
  }
  .tcm-tab-btn {
    background: transparent;
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: 'Inter', sans-serif;
  }
  .tcm-tab-btn:hover { color: var(--sbg-navy); }
  .tcm-tab-btn.active { color: var(--sbg-navy); border-bottom-color: var(--sbg-navy); }
  .tcm-tab-pane { padding: 6px 0; }
  .tcm-explainer {
    background: rgba(10,37,64,0.04);
    border-left: 3px solid var(--sbg-navy);
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .tcm-cap-list {
    max-height: 56vh;
    overflow-y: auto;
  }
  .tcm-cap-row {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .tcm-cap-row-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .tcm-cap-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
  }
  .tcm-cap-row-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--sbg-navy);
    flex: 1;
    min-width: 120px;
  }
  .tcm-cap-row-cap, .tcm-cap-row-role {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }
  .tcm-cap-row-cap label, .tcm-cap-row-role label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-dim);
    margin: 0;
  }
  .tcm-cap-row-cap input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-align: right;
  }
  .tcm-cap-row-role select {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12px;
  }
  .tcm-pto-section {
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    margin-top: 4px;
  }
  .tcm-pto-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .tcm-pto-add-row label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-dim);
    margin: 0;
  }
  .tcm-pto-add-row input[type="date"] {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12px;
  }
  .tcm-pto-empty {
    font-size: 11.5px;
    color: var(--text-faint);
    font-style: italic;
  }
  .tcm-pto-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .tcm-pto-chip {
    background: rgba(192,127,0,0.12);
    color: #8a5a00;
    padding: 2px 6px 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .tcm-pto-chip button {
    background: none;
    border: none;
    color: #8a5a00;
    cursor: pointer;
    font-size: 13px;
    padding: 0 2px;
    line-height: 1;
  }
  .tcm-pto-chip button:hover { color: var(--sbg-red); }
  .tcm-holiday-add {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .tcm-holiday-add input[type="date"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12px;
  }
  .tcm-holiday-add input[type="text"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12px;
    flex: 1;
    min-width: 150px;
  }
  .tcm-holiday-list {
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .tcm-holiday-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
  }
  .tcm-holiday-row:last-child { border-bottom: none; }
  .tcm-holiday-date {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
  }
  .tcm-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 12.5px;
    background: var(--surface-2);
    border-radius: 4px;
  }

  /* ===== REASSIGN MODAL ===== */
  .reassign-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .reassign-toolbar input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12.5px;
  }
  .reassign-list {
    max-height: 48vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
  }
  .reassign-row {
    display: grid;
    grid-template-columns: 24px 24px 2fr 1.3fr 60px 80px 50px;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    cursor: pointer;
  }
  .reassign-row:hover { background: var(--surface-2); }
  .reassign-row:last-child { border-bottom: none; }
  .reassign-row.selected { background: rgba(10,37,64,0.05); }
  .reassign-row.is-critical .reassign-title { color: var(--sbg-red); font-weight: 700; }
  .reassign-row input[type="checkbox"] { accent-color: var(--sbg-navy); width: 16px; height: 16px; cursor: pointer; }
  .reassign-crit { font-size: 13px; text-align: center; }
  .reassign-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reassign-project { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reassign-role {
    font-size: 9.5px;
    background: var(--sbg-navy);
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-align: center;
  }
  .reassign-due, .reassign-hours { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); text-align: right; }
  .reassign-empty { padding: 30px; text-align: center; color: var(--text-faint); font-style: italic; font-size: 13px; }
  .reassign-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 6px 0;
    margin-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
  }
  .reassign-summary { font-size: 13px; }
  .reassign-summary strong {
    color: var(--sbg-navy);
    font-size: 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
  }
  .reassign-target-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .reassign-target-row label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-dim);
    margin: 0;
  }
  .reassign-target-row select {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12.5px;
    min-width: 180px;
  }

  #statusSnapshotView { padding: 24px 32px; }
  #statusSnapshotView.hidden { display: none; }
  .ssv-header { margin-bottom: 24px; }
  .ssv-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .ssv-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--sbg-navy);
    margin: 0;
  }
  .ssv-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 4px;
  }
  .ssv-actions { display: flex; gap: 6px; }

  .ssv-scope-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    flex-wrap: wrap;
  }
  .ssv-scope-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 4px;
  }
  .ssv-scope-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    padding: 5px 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.1s;
  }
  .ssv-scope-btn:hover {
    background: var(--surface-3);
    color: var(--sbg-navy);
  }
  .ssv-scope-btn.active {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }
  .ssv-scope-meta {
    margin-left: auto;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
  }

  .ssv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
  }
  .ssv-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform 0.12s, box-shadow 0.12s;
    position: relative;
    overflow: hidden;
  }
  .ssv-stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--text-dim);
  }
  .ssv-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10,37,64,0.12);
  }
  .ssv-stat-card.ssv-stat-atrisk::before { background: var(--sbg-red); }
  .ssv-stat-card.ssv-stat-inprogress::before { background: #1a9ec9; }
  .ssv-stat-card.ssv-stat-due1::before { background: #c07f00; }
  .ssv-stat-card.ssv-stat-due2::before { background: #6e4eb8; }
  .ssv-stat-card.ssv-stat-allopen::before { background: var(--sbg-navy); }
  .ssv-stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: var(--sbg-navy);
    margin-bottom: 4px;
  }
  .ssv-stat-card.ssv-stat-atrisk .ssv-stat-num { color: var(--sbg-red); }
  .ssv-stat-card.ssv-stat-inprogress .ssv-stat-num { color: #1a9ec9; }
  .ssv-stat-card.ssv-stat-due1 .ssv-stat-num { color: #c07f00; }
  .ssv-stat-card.ssv-stat-due2 .ssv-stat-num { color: #6e4eb8; }
  .ssv-stat-card.ssv-stat-allopen .ssv-stat-num { color: var(--sbg-navy); }
  .ssv-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sbg-navy);
    margin-bottom: 2px;
  }
  .ssv-stat-sub {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
  }

  .ssv-reorder-hint {
    font-size: 12px;
    color: var(--text-dim);
    background: rgba(46,125,82,0.06);
    border: 1px dashed rgba(46,125,82,0.25);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ssv-reorder-hint .ssv-grip {
    display: inline-block;
    color: var(--green);
    font-weight: 800;
  }

  .ssv-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--ssv-accent, var(--sbg-navy));
    border-radius: 6px;
    margin-bottom: 18px;
    overflow: hidden;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .ssv-section.ssv-dragging {
    opacity: 0.4;
    transform: scale(0.98);
  }
  .ssv-section.ssv-drop-target {
    box-shadow: 0 0 0 2px var(--green);
  }
  .ssv-section.ssv-section-highlight {
    animation: ssvSectionPulse 1.8s ease-out;
  }
  @keyframes ssvSectionPulse {
    0%   { box-shadow: 0 0 0 0 rgba(192,127,0,0.6); }
    25%  { box-shadow: 0 0 0 8px rgba(192,127,0,0.18); }
    100% { box-shadow: 0 0 0 0 rgba(192,127,0,0); }
  }
  .ssv-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ssv-accent-bg, var(--surface-2));
    border-bottom: 1px solid var(--border);
    user-select: none;
  }
  .ssv-grip {
    cursor: grab;
    color: var(--text-faint);
    font-size: 14px;
    font-weight: 800;
    padding: 0 4px;
    flex-shrink: 0;
  }
  .ssv-grip:active { cursor: grabbing; }
  .ssv-section-titlewrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
  }
  .ssv-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sbg-navy);
  }
  .ssv-section-count {
    background: var(--ssv-accent, var(--sbg-navy));
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
  }
  .ssv-section-desc {
    font-size: 11.5px;
    color: var(--text-dim);
    font-style: italic;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .ssv-section-toggle {
    font-size: 14px;
    color: var(--text-dim);
    transition: transform 0.2s;
    cursor: pointer;
    padding: 2px 6px;
  }
  .ssv-section.ssv-section-collapsed .ssv-section-toggle {
    transform: rotate(-90deg);
  }
  .ssv-section-body {
    max-height: 4000px;
    transition: max-height 0.3s ease, padding 0.2s;
    overflow: hidden;
  }
  .ssv-section.ssv-section-collapsed .ssv-section-body {
    max-height: 0;
  }
  .ssv-section-empty {
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: var(--text-dim);
    font-size: 13px;
  }

  .ssv-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.9fr) minmax(0, 2fr) auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.08s;
  }
  .ssv-row:last-child { border-bottom: none; }
  .ssv-row:hover { background: var(--surface-2); }
  .ssv-row-project {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .ssv-row-project-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--sbg-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
  }
  img.ssv-row-project-thumb { object-fit: cover; }
  .ssv-row-project-name {
    font-size: 12px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ssv-row-main { min-width: 0; }
  .ssv-row-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--sbg-navy);
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .ssv-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
  }
  .ssv-row-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ssv-row-status.status-not-started {
    background: rgba(110,110,122,0.15);
    color: #4a4a55;
  }
  .ssv-row-status.status-in-progress {
    background: rgba(26,158,201,0.15);
    color: #146a87;
  }
  .ssv-row-status.status-blocked {
    background: rgba(200,50,43,0.15);
    color: var(--sbg-red);
  }
  .ssv-row-status.status-pending {
    background: rgba(192,127,0,0.15);
    color: #8a5a00;
  }
  .ssv-row-assignee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
  }
  .ssv-row-avatar {
    width: 22px;
    height: 22px;
    background: var(--sbg-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    border-radius: 50%;
  }
  .ssv-row-due {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    text-align: center;
    min-width: 88px;
  }
  .ssv-due-overdue {
    background: var(--sbg-red);
    color: #fff;
    animation: newPulse 1.8s ease-in-out infinite;
  }
  .ssv-due-critical {
    background: var(--sbg-red);
    color: #fff;
  }
  .ssv-due-imminent {
    background: rgba(200,50,43,0.18);
    color: var(--sbg-red);
    border: 1px solid rgba(200,50,43,0.4);
  }
  .ssv-due-warning {
    background: rgba(192,127,0,0.18);
    color: #8a5a00;
    border: 1px solid rgba(192,127,0,0.4);
  }
  .ssv-due-ok {
    background: var(--surface-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
  }
  .ssv-due-none {
    background: transparent;
    color: var(--text-faint);
    font-style: italic;
  }

  .ssv-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
  }
  .ssv-chip-cl, .ssv-chip-dlv {
    background: var(--surface-3);
    color: var(--text-dim);
  }
  .ssv-chip-required {
    background: var(--sbg-red);
    color: #fff;
  }
  .ssv-chip-required-dlv {
    background: var(--sbg-red);
    color: #fff;
    border-left: 2px solid #c07f00;
    padding-left: 4px;
  }
  .ssv-chip-bp {
    background: rgba(192,127,0,0.18);
    color: #8a5a00;
  }
  .ssv-overlap-hint {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-style: italic;
    color: var(--text-faint);
    background: var(--surface-3);
    padding: 1px 6px;
    border-radius: 2px;
  }

  .ssv-empty {
    padding: 60px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .ssv-empty-icon {
    font-size: 48px;
    color: var(--green);
    margin-bottom: 12px;
  }
  .ssv-empty-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--sbg-navy);
    margin-bottom: 6px;
  }
  .ssv-empty-sub {
    font-size: 13px;
    color: var(--text-dim);
  }

  @media (max-width: 700px) {
    #statusSnapshotView { padding: 16px 18px; }
    .ssv-row {
      grid-template-columns: 1fr auto;
      gap: 8px;
    }
    .ssv-row-project {
      grid-column: 1 / -1;
      order: -1;
    }
  }

  /* Home view container */
  .home-header {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sbg-red);
    border-radius: 6px;
  }
  .home-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
  }
  .home-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--sbg-navy);
    margin: 0;
  }
  .home-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-dim);
  }
  .home-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .home-stat {
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .home-stat.is-critical { border-left: 3px solid var(--sbg-red); }
  .home-stat.is-warning { border-left: 3px solid #c07f00; }
  .home-stat.is-info { border-left: 3px solid var(--sbg-navy); }
  .home-stat .hs-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .home-stat .hs-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
  }
  .home-stat.is-critical .hs-value { color: var(--sbg-red); }
  .home-stat.is-warning .hs-value { color: #c07f00; }

  /* Home section (collapsible-like cards) */
  .home-section {
    margin-bottom: 16px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .home-section-lead {
    border-left: 4px solid var(--sbg-red);
  }
  /* v132: Alert dot on Today-page section headers. Shows a pulsing red dot
     when the section has pending items (unack tasks, unread messages,
     completions awaiting sign-off, rejections needing response). Also
     tints the whole header background subtly and adds a red border to
     make the whole section flash for attention. */
  .home-section-alert-dot {
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sbg-red, #c8322b);
    box-shadow: 0 0 0 0 rgba(200, 50, 43, 0.7);
    animation: alert-dot-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
    margin-left: 4px;
    vertical-align: middle;
  }
  .home-section-has-alerts .home-section-alert-dot {
    display: inline-block;
  }
  @keyframes alert-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200, 50, 43, 0.55); transform: scale(1); }
    70%  { box-shadow: 0 0 0 8px rgba(200, 50, 43, 0);   transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0 rgba(200, 50, 43, 0);     transform: scale(1); }
  }
  /* Give the whole section a subtle red accent when it has alerts —
     visible even when the section is collapsed. */
  .home-section-has-alerts > .home-section-header {
    background: linear-gradient(90deg, rgba(200, 50, 43, 0.06) 0%, transparent 80%);
    border-left: 3px solid var(--sbg-red, #c8322b);
    padding-left: 9px;
    animation: alert-border-pulse 2.5s ease-in-out infinite;
  }
  @keyframes alert-border-pulse {
    0%, 100% { border-left-color: var(--sbg-red, #c8322b); }
    50%      { border-left-color: rgba(200, 50, 43, 0.4); }
  }
  /* Sub-label text in alert sections gets a red tint for extra emphasis */
  .home-section-has-alerts .home-section-sub {
    color: var(--sbg-red, #c8322b);
    font-weight: 700;
  }
  .home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    /* v96: click-to-collapse cursor + subtle hover */
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
  }
  .home-section-header:hover {
    background: rgba(10, 37, 64, 0.03);
  }
  /* v96: chevron indicator (▾ expanded / ▸ collapsed) */
  .home-section-chevron {
    display: inline-block;
    font-size: 12px;
    color: var(--text-dim);
    margin-right: 6px;
    transition: transform 0.15s ease;
    font-weight: 700;
  }
  .home-section.home-section-collapsed .home-section-chevron {
    transform: rotate(-90deg);
    color: var(--sbg-navy);
  }
  .home-section .home-section-body {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease;
    opacity: 1;
  }
  .home-section.home-section-collapsed .home-section-body {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .home-section.home-section-collapsed .home-section-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .home-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sbg-navy);
  }
  .home-section-sub {
    font-size: 12px;
    color: var(--text-dim);
  }

  /* v96: My Workload section — signed-in user's snapshot */
  .home-mw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  .home-mw-stat {
    background: var(--surface-2, #f8f9fb);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .home-mw-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  }
  .home-mw-stat-num {
    font-family: 'Barlow Condensed', 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: var(--sbg-navy, #0a2540);
    line-height: 1;
  }
  .home-mw-stat-label {
    font-size: 10.5px;
    color: var(--text-dim, #6b7687);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .home-mw-stat.critical .home-mw-stat-num { color: var(--sbg-red, #c8322b); }
  .home-mw-stat.warn .home-mw-stat-num { color: var(--sbg-gold, #c07f00); }
  .home-mw-stat.success .home-mw-stat-num { color: #2e7d52; }
  .home-mw-capacity {
    background: var(--surface-2, #f8f9fb);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
  }
  .home-mw-cap-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    margin-bottom: 6px;
  }
  .home-mw-cap-label {
    font-weight: 600;
    color: var(--text, #1a1a1a);
  }
  .home-mw-cap-pct {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    color: var(--sbg-navy, #0a2540);
  }
  .home-mw-cap-pct.warn { color: var(--sbg-gold, #c07f00); }
  .home-mw-cap-pct.over { color: var(--sbg-red, #c8322b); }
  .home-mw-cap-bar {
    height: 8px;
    background: rgba(10, 37, 64, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }
  .home-mw-cap-fill {
    height: 100%;
    background: linear-gradient(90deg, #2e7d52 0%, #4ca67a 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
  }
  .home-mw-cap-fill.warn {
    background: linear-gradient(90deg, var(--sbg-gold, #c07f00) 0%, #d99622 100%);
  }
  .home-mw-cap-fill.over {
    background: linear-gradient(90deg, var(--sbg-red, #c8322b) 0%, #e04a44 100%);
  }
  .home-mw-cap-note {
    font-size: 10.5px;
    color: var(--text-dim, #6b7687);
    margin-top: 5px;
  }
  .home-mw-projects {
    background: var(--surface-2, #f8f9fb);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    padding: 10px 12px;
  }
  .home-mw-projects-title {
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .home-mw-project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }
  .home-mw-project-row:last-child { border-bottom: none; }
  .home-mw-project-name {
    color: var(--text, #1a1a1a);
    font-weight: 500;
  }
  .home-mw-project-hrs {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-dim, #6b7687);
  }
  .home-mw-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-dim, #6b7687);
    font-size: 12.5px;
    font-style: italic;
  }
  .home-mw-shortcut {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    color: var(--sbg-navy, #0a2540);
    text-decoration: none;
    font-weight: 600;
  }
  .home-mw-shortcut:hover { text-decoration: underline; }

  /* v97: My Workload — dedicated toolbar + full-width card wrapper */
  .hmw-toolbar {
    margin-bottom: 14px !important;
    padding: 10px 12px !important;
  }
  .hmw-card-wrap {
    /* Single card stretched to full section width (no grid, just direct fill) */
    display: block;
  }
  .hmw-card-wrap .twv-card {
    /* Card fills the whole section — no max-width, full stretch */
    width: 100%;
    box-sizing: border-box;
  }
  .hmw-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-dim, #6b7687);
    font-size: 13px;
    font-style: italic;
    background: var(--surface-2, #f8f9fb);
    border: 1px dashed var(--border, #e0e0e0);
    border-radius: 6px;
  }

  /* Bid countdown cards — compact, one per project */
  .home-countdowns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
  }
  .home-countdown-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    border-left: 4px solid var(--sbg-navy);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .home-countdown-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(10,37,64,0.12);
  }
  .home-countdown-card.cd-critical {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.05);
    animation: newPulse 1.8s ease-in-out infinite;
  }
  .home-countdown-card.cd-imminent {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.03);
  }
  .home-countdown-card.cd-warning { border-left-color: #c07f00; }
  .home-countdown-card.cd-attention { border-left-color: #c07f00; }
  .home-countdown-card.cd-past {
    border-left-color: #6b1d18;
    background: rgba(107,29,24,0.05);
    opacity: 0.75;
  }
  .hcc-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-faint);
  }
  .hcc-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .hcc-body {
    flex: 1;
    min-width: 0;
  }
  .hcc-project {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hcc-meta {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .hcc-right {
    text-align: right;
    flex-shrink: 0;
  }
  .hcc-countdown {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
  }
  .home-countdown-card.cd-critical .hcc-countdown,
  .home-countdown-card.cd-imminent .hcc-countdown { color: var(--sbg-red); }
  .home-countdown-card.cd-warning .hcc-countdown,
  .home-countdown-card.cd-attention .hcc-countdown { color: #c07f00; }
  .hcc-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 2px;
  }

  /* Task buckets — Today / Tomorrow / This Week */
  .home-tasks-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }
  .home-task-bucket {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .home-task-bucket-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 4px 8px;
    border-bottom: 2px solid var(--border);
  }
  .home-task-bucket.bucket-overdue .home-task-bucket-label { color: var(--sbg-red); border-bottom-color: var(--sbg-red); }
  .home-task-bucket.bucket-today .home-task-bucket-label { color: #e85d04; border-bottom-color: #e85d04; }
  .home-task-bucket.bucket-tomorrow .home-task-bucket-label { color: #c07f00; border-bottom-color: #c07f00; }
  .home-task-bucket.bucket-thisweek .home-task-bucket-label { color: var(--sbg-navy); border-bottom-color: var(--sbg-navy); }

  /* Generic item list (tasks, messages, sign-offs, rejections) */
  .home-items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .home-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
  }
  .home-item:hover {
    background: var(--surface-3);
    transform: translateX(2px);
  }
  .home-item.hi-critical {
    border-left: 3px solid var(--sbg-red);
    background: rgba(200,50,43,0.04);
  }
  .home-item.hi-warning { border-left: 3px solid #c07f00; }
  .home-item.hi-info { border-left: 3px solid var(--sbg-navy); }
  /* v113: Series occurrence badge on home item titles — visual cue that
     acknowledging this row covers a whole recurring series. */
  .hi-series-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    background: linear-gradient(135deg, var(--sbg-gold, #c07f00) 0%, #d99b1f 100%);
    color: #fff;
    border-radius: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(192, 127, 0, 0.3);
  }
  .hi-project-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--sbg-navy);
    color: #fff;
    border-radius: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hi-body { flex: 1; min-width: 0; }
  .hi-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hi-meta {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .hi-meta .hi-meta-strong { color: var(--text); font-weight: 600; }
  .hi-right {
    text-align: right;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-dim);
  }
  .hi-due-badge {
    display: inline-block;
    padding: 2px 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
  }
  .hi-due-badge.overdue { background: var(--sbg-red); color: #fff; animation: newPulse 1.6s ease-in-out infinite; }
  .hi-due-badge.today { background: #e85d04; color: #fff; }
  .hi-due-badge.tomorrow { background: #c07f00; color: #fff; }
  .hi-due-badge.thisweek { background: var(--sbg-navy); color: #fff; }
  .home-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 12px;
  }

  /* Sign-in prompt */
  .home-signin-prompt {
    padding: 40px 20px;
    text-align: center;
    background: var(--surface);
    border: 2px dashed var(--border-strong);
    border-radius: 6px;
  }
  .home-signin-prompt .hsp-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }
  .home-signin-prompt h3 {
    margin: 0 0 8px;
    color: var(--sbg-navy);
  }
  .home-signin-prompt p {
    color: var(--text-dim);
    margin-bottom: 16px;
  }

  .btn {
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
    padding: 8px 14px; border-radius: 4px; font-family: inherit;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.12s ease;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn:hover { border-color: var(--sbg-navy); background: var(--surface-2); }
  .btn-primary {
    background: var(--sbg-red); color: #fff; border-color: var(--sbg-red);
    font-weight: 600;
  }
  .btn-primary:hover { background: var(--sbg-red-dark); border-color: var(--sbg-red-dark); color: #fff; }
  .btn-dark {
    background: var(--sbg-navy); color: #fff; border-color: var(--sbg-navy);
    font-weight: 600;
  }
  .btn-dark:hover { background: var(--sbg-navy-2); color: #fff; }
  .btn-sm { padding: 5px 10px; font-size: 11px; }

  /* ========== PROJECT LIST ========== */
  .project-list { display: flex; flex-direction: column; gap: 6px; }
  .project-item {
    padding: 12px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer; transition: all 0.12s ease; position: relative;
    border-left: 3px solid transparent;
  }
  .project-item:hover { border-color: var(--border-strong); }
  .project-item.active {
    border-left-color: var(--sbg-red);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(10,37,64,0.08);
  }
  .project-item .name { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); }
  .project-item .meta {
    font-size: 11px; color: var(--text-dim);
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
  }
  .project-item .task-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-2); }
  .project-item .task-count .done { color: var(--green); font-weight: 700; }
  .project-item .mini-progress { height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
  .project-item .mini-progress-fill { height: 100%; background: linear-gradient(90deg, var(--sbg-red), var(--green)); }

  /* Collapsed-sidebar project items: thumb only, big and centered */
  .layout.sidebar-collapsed .project-item {
    padding: 4px;
    border-radius: 6px;
  }
  .layout.sidebar-collapsed .project-item-layout {
    gap: 0 !important;
    display: flex;
    justify-content: center;
  }
  .layout.sidebar-collapsed .project-item-body { display: none; }
  .layout.sidebar-collapsed .project-item-thumb {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    border-radius: 6px;
  }
  .layout.sidebar-collapsed .project-item.active .project-item-thumb {
    box-shadow: 0 0 0 2px var(--sbg-red);
  }
  .layout.sidebar-collapsed .project-item-od { display: none; }
  .layout.sidebar-collapsed .project-section-header {
    padding: 4px 0;
    justify-content: center;
  }
  .layout.sidebar-collapsed .project-section-header .ps-title { display: none; }
  .layout.sidebar-collapsed .project-section-header .ps-count { display: none; }
  .layout.sidebar-collapsed .project-section-empty { display: none; }
  .layout.sidebar-collapsed .sidebar-rev-pill { display: none; }
  .bid-days { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
  .bid-days.urgent { color: var(--red); }
  .bid-days.warning { color: var(--yellow); }
  .bid-days.ok { color: var(--green); }

  /* ========== MAIN CONTENT ========== */
  /* min-width: 0 is critical — without it, grid items don't shrink below
     their content's intrinsic width, which causes the 1fr column to
     overflow horizontally when wide content (tables, long titles, the
     dashboard sections grid) lives inside .main. This was the bug behind
     'cannot see all the page in collapsed sidebar mode' — the grid track
     was sized by content, so collapsing the sidebar from 300px to 56px
     freed space that .main never claimed because it was still sized to
     match the widest child. min-width:0 lets the grid track honor 1fr.
     overflow-x: hidden is a safety net so any single rogue child that
     does overflow gets clipped instead of forcing the whole page to scroll. */
  .main {
    padding: 24px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
  }
  .project-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px 22px;
    margin-bottom: 18px;
    border-left: 4px solid var(--sbg-red);
  }
  .project-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 16px; }
  .project-header h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--sbg-navy); text-transform: uppercase;
    margin-bottom: 4px; line-height: 1.1;
  }
  .project-subtitle { color: var(--text-dim); font-size: 13px; }
  .project-meta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .meta-card {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 12px;
  }
  .meta-card .label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--text-dim); margin-bottom: 6px; font-weight: 700;
  }
  .meta-card .value {
    font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: var(--text);
  }
  .meta-card .value .sub { color: var(--text-dim); font-size: 12px; font-weight: 400; }
  .progress-bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 6px; }
  .progress-fill { height: 100%; background: linear-gradient(90deg, var(--sbg-red), var(--green)); transition: width 0.3s; }

  /* ========== WORKSPACE CONTROLS PANEL ==========
     Wraps view switcher + grouping + stage filter pills in one segmented
     panel that visually separates "where you work" from the dashboard
     awareness sections above. Has its own muted background + corner label
     so the eye understands "this is my control surface, not data." */
  .pv-workspace-controls {
    margin-top: 32px;
    margin-bottom: 14px;
    padding: 20px 16px 8px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(10,37,64,0.04);
    /* Smooth shadow transition when entering/leaving the stuck state. */
    transition: box-shadow 0.18s, padding 0.18s;
  }
  /* When stuck, switch to position:fixed so the panel pins to the top of
     the viewport regardless of how deep its DOM ancestors go.
     position:sticky doesn't work here because the panel sits 6 levels
     deep inside .main > #projectView > .project-header > .project-header-banner > .banner-body
     and sticky requires a direct scroll-container parent. */
  .pv-workspace-controls.is-stuck {
    position: fixed;
    /* top/left/width set inline by setupPvWorkspaceStickyObserver based on
       measured natural position so it matches the layout. */
    z-index: 50;
    box-shadow: 0 4px 14px rgba(10,37,64,0.18);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
  }
  /* Placeholder element rendered in the panel's natural position when stuck,
     preserving layout height so content beneath doesn't jump up. */
  .pv-wc-placeholder {
    display: none;
  }
  .pv-wc-placeholder.is-active {
    display: block;
  }
  .pv-wc-label {
    position: absolute;
    /* When NOT stuck, badge floats above the panel (-14px). When stuck, the
       badge would clip above the viewport — so the .is-stuck variant pulls
       it inside the panel. */
    top: -14px;
    left: 14px;
    background: var(--sbg-navy);
    padding: 4px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid var(--sbg-navy);
    border-radius: 4px;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(10,37,64,0.18);
    transition: top 0.18s, border-radius 0.18s;
  }
  /* When stuck, pull the badge inside the panel so it doesn't clip above
     the viewport edge */
  .pv-workspace-controls.is-stuck .pv-wc-label {
    top: 6px;
    border-radius: 0 0 4px 4px;
  }
  /* When stuck, slightly compress vertical padding so the panel takes less
     screen space — but keep enough room for the inset badge */
  .pv-workspace-controls.is-stuck {
    padding-top: 36px;
    padding-bottom: 6px;
  }
  /* Tiny sentinel that the IntersectionObserver watches. 1px tall so it
     doesn't shift layout. Positioned right above the workspace panel. */
  .pv-wc-sticky-sentinel {
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
  }
  .pv-wc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
  }
  .pv-wc-grouping {
    /* Grouping cluster — sits below the dashed divider */
  }

  /* v98: collapsible grouping header + body */
  .pv-wc-grouping-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(10, 37, 64, 0.03);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
    /* v99: separate slightly from the Group By tabs row above */
    margin-top: 8px;
  }
  .pv-wc-grouping-header:hover {
    background: rgba(10, 37, 64, 0.06);
  }
  .pv-wc-chevron {
    display: inline-block;
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    transition: transform 0.15s ease;
    font-weight: 700;
    width: 12px;
    text-align: center;
  }
  .pv-wc-grouping.grouping-collapsed .pv-wc-chevron {
    transform: rotate(-90deg);
    color: var(--sbg-navy, #0a2540);
  }
  .pv-wc-collapse-label {
    flex-shrink: 0;
  }
  .pv-wc-collapse-summary {
    /* Compact pill shown when collapsed — tells user what filter is active
       without having to expand the section. */
    flex: 1;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim, #6b7687);
    padding: 2px 8px;
    background: transparent;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
  }
  .pv-wc-grouping.grouping-collapsed .pv-wc-collapse-summary {
    background: rgba(10, 37, 64, 0.06);
    color: var(--sbg-navy, #0a2540);
    font-weight: 600;
  }
  .pv-wc-grouping-body {
    max-height: 3000px;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.2s ease, margin 0.2s ease;
    opacity: 1;
  }
  .pv-wc-grouping.grouping-collapsed .pv-wc-grouping-body {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .pv-wc-grouping.grouping-collapsed .pv-wc-grouping-header {
    margin-bottom: 0;
  }

  /* ===== SECONDARY FILTER ROW =====
     Compact row beneath the grouping pill tabs that lets users narrow the
     active group to a single assignee. Subtle by default; gets a red-tinted
     background when filter is active so users see it's affecting their
     view. */
  .secondary-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    flex-wrap: wrap;
    transition: background 0.15s, border-color 0.15s;
  }
  .secondary-filter-row.sfr-active {
    background: rgba(200,50,43,0.06);
    border-color: rgba(200,50,43,0.35);
  }
  .sfr-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .secondary-filter-row.sfr-active .sfr-label {
    color: var(--sbg-red);
  }
  .sfr-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    min-width: 200px;
    transition: border-color 0.1s;
  }
  .sfr-select:hover { border-color: var(--sbg-navy); }
  .sfr-select:focus {
    outline: none;
    border-color: var(--sbg-red);
    box-shadow: 0 0 0 2px rgba(200,50,43,0.1);
  }
  .secondary-filter-row.sfr-active .sfr-select {
    background: #fff;
    border-color: var(--sbg-red);
    font-weight: 700;
    color: var(--sbg-red);
  }
  .sfr-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--sbg-red);
    flex: 1;
    min-width: 0;
  }
  .sfr-clear {
    background: transparent;
    border: 1px solid var(--sbg-red);
    color: var(--sbg-red);
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.1s, color 0.1s;
  }
  .sfr-clear:hover {
    background: var(--sbg-red);
    color: #fff;
  }

  /* ===== ALERT TIER PILL TABS (Group by Alert) =====
     Each tier gets a colored treatment that mirrors the project Alerts
     strip so the visual language stays consistent. Tabs always render
     (even at 0 count) for healthy + done; other tiers hide when empty. */
  .pill-tab.alert-tier-tab {
    border-left: 3px solid var(--text-dim);
  }
  .pill-tab.alert-tier-tab .atr-icon {
    margin-right: 6px;
    font-weight: 700;
  }
  /* All — neutral navy */
  .pill-tab.alert-tier-all { border-left-color: var(--sbg-navy); }
  .pill-tab.alert-tier-all.active {
    background: rgba(10,37,64,0.08);
    box-shadow: inset 4px 0 0 var(--sbg-navy);
  }
  /* Overdue — red, pulses when active */
  .pill-tab.alert-tier-overdue { border-left-color: var(--sbg-red); }
  .pill-tab.alert-tier-overdue.active {
    background: rgba(200,50,43,0.12);
    box-shadow: inset 4px 0 0 var(--sbg-red);
    color: var(--sbg-red);
  }
  /* Late Start — red */
  .pill-tab.alert-tier-late-start { border-left-color: var(--sbg-red); }
  .pill-tab.alert-tier-late-start.active {
    background: rgba(200,50,43,0.12);
    box-shadow: inset 4px 0 0 var(--sbg-red);
    color: var(--sbg-red);
  }
  /* At Risk — gold */
  .pill-tab.alert-tier-at-risk { border-left-color: #c07f00; }
  .pill-tab.alert-tier-at-risk.active {
    background: rgba(192,127,0,0.12);
    box-shadow: inset 4px 0 0 #c07f00;
    color: #8a5a00;
  }
  /* Blocked — red */
  .pill-tab.alert-tier-blocked { border-left-color: var(--sbg-red); }
  .pill-tab.alert-tier-blocked.active {
    background: rgba(200,50,43,0.1);
    box-shadow: inset 4px 0 0 var(--sbg-red);
    color: var(--sbg-red);
  }
  /* Imminent — gold */
  .pill-tab.alert-tier-imminent { border-left-color: #c07f00; }
  .pill-tab.alert-tier-imminent.active {
    background: rgba(192,127,0,0.1);
    box-shadow: inset 4px 0 0 #c07f00;
    color: #8a5a00;
  }
  /* Due Soon — gold lighter */
  .pill-tab.alert-tier-soon { border-left-color: #c07f00; }
  .pill-tab.alert-tier-soon.active {
    background: rgba(192,127,0,0.08);
    box-shadow: inset 4px 0 0 #c07f00;
    color: #8a5a00;
  }
  /* In Progress — cyan */
  .pill-tab.alert-tier-in-progress { border-left-color: #1a9ec9; }
  .pill-tab.alert-tier-in-progress.active {
    background: rgba(26,158,201,0.1);
    box-shadow: inset 4px 0 0 #1a9ec9;
    color: #146a87;
  }
  /* Rejected — red */
  .pill-tab.alert-tier-rejected { border-left-color: var(--sbg-red); }
  .pill-tab.alert-tier-rejected.active {
    background: rgba(200,50,43,0.1);
    box-shadow: inset 4px 0 0 var(--sbg-red);
    color: var(--sbg-red);
  }
  /* Unack — navy info */
  .pill-tab.alert-tier-unack { border-left-color: var(--sbg-navy); }
  .pill-tab.alert-tier-unack.active {
    background: rgba(10,37,64,0.08);
    box-shadow: inset 4px 0 0 var(--sbg-navy);
  }
  /* Unassigned — gray */
  .pill-tab.alert-tier-unassigned { border-left-color: #6b7687; }
  .pill-tab.alert-tier-unassigned.active {
    background: rgba(107,118,135,0.12);
    box-shadow: inset 4px 0 0 #6b7687;
  }
  /* Pending — purple */
  .pill-tab.alert-tier-pending { border-left-color: #7b4397; }
  .pill-tab.alert-tier-pending.active {
    background: rgba(123,67,151,0.1);
    box-shadow: inset 4px 0 0 #7b4397;
    color: #5d2f73;
  }
  /* Healthy — green */
  .pill-tab.alert-tier-healthy { border-left-color: #2e7d52; }
  .pill-tab.alert-tier-healthy.active {
    background: rgba(46,125,82,0.1);
    box-shadow: inset 4px 0 0 #2e7d52;
    color: #1f5736;
  }
  /* Done — gray-green, settled */
  .pill-tab.alert-tier-done { border-left-color: #6b7687; }
  .pill-tab.alert-tier-done.active {
    background: rgba(46,125,82,0.08);
    box-shadow: inset 4px 0 0 #6b7687;
  }

  /* ===== ALERT MULTI-FILTER ROW =====
     Three dropdowns (assignee + stage + source) plus clear-all. Same
     visual language as the secondary filter row so the two read as
     siblings. */
  .alert-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    flex-wrap: wrap;
    transition: background 0.15s, border-color 0.15s;
  }
  .alert-filter-row.afr-active {
    background: rgba(200,50,43,0.06);
    border-color: rgba(200,50,43,0.35);
  }
  .afr-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .alert-filter-row.afr-active .afr-label {
    color: var(--sbg-red);
  }
  .afr-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.1s;
  }
  .afr-select:hover { border-color: var(--sbg-navy); }
  .afr-select:focus {
    outline: none;
    border-color: var(--sbg-red);
    box-shadow: 0 0 0 2px rgba(200,50,43,0.1);
  }
  /* Active styling for individual selects — only when each is non-default */
  .afr-select:not([data-default="true"]) {
    /* placeholder selector — actual state set by checking value in JS */
  }
  .alert-filter-row.afr-active .afr-select option:checked:not([value="all"]) {
    font-weight: 700;
  }
  .afr-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--sbg-red);
    flex: 1;
    min-width: 0;
  }
  .alert-filter-row:not(.afr-active) .afr-meta {
    color: var(--text-dim);
  }
  .afr-clear {
    background: transparent;
    border: 1px solid var(--sbg-red);
    color: var(--sbg-red);
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.1s, color 0.1s;
  }
  .afr-clear:hover {
    background: var(--sbg-red);
    color: #fff;
  }

  /* ===== MY ALERTS GROUPING — gold accent variant =====
     Group by My Alerts is visually distinguished from Group by Alert via
     a subtle gold treatment. The pill tabs get a gold-toned border on the
     left edge BEFORE active state kicks in (then their tier-specific
     active color takes over). The filter row gets a gold-tinted resting
     background so the user always sees they're in the user-scoped view. */
  .pill-tab.alert-tier-mine {
    border-left-width: 3px;
    box-shadow: -3px 0 0 0 rgba(192,127,0,0.25); /* subtle gold rail to the left */
  }
  /* When active, suppress the gold-rail box-shadow because the tier-specific
     active state is providing its own inset border via box-shadow.
     The active state's box-shadow already differentiates the tab. */
  .pill-tab.alert-tier-mine.active {
    box-shadow: inherit;
  }
  /* Filter row — slightly gold-tinted at rest so the My-scoped row reads
     differently from the project-wide alert filter row. */
  .alert-filter-row.alert-filter-row-mine {
    background: rgba(192,127,0,0.05);
    border-color: rgba(192,127,0,0.3);
  }
  .alert-filter-row.alert-filter-row-mine .afr-label {
    color: #8a5a00;
  }
  /* Active filter still flips to red so the user sees an active filter the
     same way they do in the project-wide row. */
  .alert-filter-row.alert-filter-row-mine.afr-active {
    background: rgba(200,50,43,0.06);
    border-color: rgba(200,50,43,0.35);
  }
  .alert-filter-row.alert-filter-row-mine.afr-active .afr-label {
    color: var(--sbg-red);
  }

  /* Snapshot section — visually quieter than the urgent dashboard sections
     above it (alerts/countdown/milestones), since it's reference data not
     action items. Lighter rail accent + reduced shadow weight. */
  .pv-section.pv-section-snapshot::before {
    background: var(--text-dim);
    opacity: 0.4;
  }
  .pv-section.pv-section-snapshot > .pv-section-header {
    background: var(--surface-2);
  }

  /* When inside the workspace controls panel, the wrapper handles spacing */
  .pv-workspace-controls .view-switcher { margin-bottom: 0; }
  .pv-workspace-controls .group-tabs { margin-bottom: 8px; }
  .pv-workspace-controls #tabNav { margin-bottom: 0; padding-bottom: 4px; }

  /* ========== VIEW MODE SWITCHER ========== */
  .view-switcher {
    display: flex; gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
    margin-bottom: 14px;
    width: fit-content;
  }
  .view-btn {
    background: transparent; border: none; color: var(--text-dim);
    padding: 7px 14px; border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    cursor: pointer; transition: all 0.12s;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .view-btn:hover { color: var(--text); background: var(--surface-2); }
  .view-btn.active { background: var(--sbg-navy); color: #fff; }

  /* ========== GROUPING TABS ========== */
  .group-tabs {
    display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: fit-content;
  }
  .group-tab {
    padding: 7px 14px; background: transparent; border: none;
    color: var(--text-dim); cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    border-radius: 4px;
    transition: all 0.12s;
  }
  .group-tab:hover { color: var(--text); background: var(--surface-2); }
  .group-tab.active { background: var(--sbg-red); color: #fff; }

  /* ========== STAGE/ASSIGNEE NAV ========== */
  .tab-nav {
    display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid var(--border);
  }
  .pill-tab {
    padding: 9px 13px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text-2); cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px; transition: all 0.12s ease;
  }
  .pill-tab:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
  .pill-tab.active { color: #fff; background: var(--sbg-navy); border-color: var(--sbg-navy); }
  .pill-tab .count {
    background: var(--surface-3); padding: 2px 7px; border-radius: 10px;
    font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--text-dim);
  }
  .pill-tab.active .count { background: rgba(255,255,255,0.15); color: #fff; }
  .pill-tab .count .done-num { color: var(--green); font-weight: 700; }
  .pill-tab.active .count .done-num { color: #7fe3a8; }
  .pill-tab .icon { font-size: 14px; }
  .pill-tab .icon img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: middle;
    display: inline-block;
  }
  .pill-tab .mini-avatar {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--sbg-red); color: #fff;
    font-size: 9px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pill-tab.active .mini-avatar { background: #fff; color: var(--sbg-navy); }
  .pill-tab.assignee-tab {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 160px;
    padding: 8px 10px;
  }
  .pill-tab.assignee-tab .pill-top {
    display: flex; align-items: center; gap: 7px;
  }
  .pill-tab.assignee-tab .pill-progress {
    height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden;
    width: 100%;
  }
  .pill-tab.active.assignee-tab .pill-progress { background: rgba(255,255,255,0.18); }
  .pill-tab.assignee-tab .pill-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sbg-red), var(--green));
    transition: width 0.3s;
  }
  .pill-tab.active.assignee-tab .pill-progress-fill {
    background: linear-gradient(90deg, #ff8a80, #7fe3a8);
  }
  /* Source tab — same column layout as assignee but without alert badges */
  .pill-tab.source-tab {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 160px;
    padding: 8px 10px;
  }
  .pill-tab.source-tab .pill-top {
    display: flex; align-items: center; gap: 7px;
  }
  .pill-tab.source-tab .pill-progress {
    height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden;
    width: 100%;
  }
  .pill-tab.active.source-tab .pill-progress { background: rgba(255,255,255,0.18); }
  .pill-tab.source-tab .pill-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sbg-red), var(--green));
    transition: width 0.3s;
  }
  .pill-tab.active.source-tab .pill-progress-fill {
    background: linear-gradient(90deg, #ff8a80, #7fe3a8);
  }
  .pill-tab.source-tab .icon {
    font-size: 18px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ========== STATUS TAB (Group by Status) ==========
     Compact pill tab — single row, status dot + label + count chip.
     Each status gets a thin colored left border in active mode so the eye
     locks onto which status is currently filtered without reading the text. */
  .pill-tab.status-tab {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 160px;
    padding: 8px 12px;
    border-left: 4px solid transparent;
    transition: border-color 0.15s, background 0.15s;
  }
  .pill-tab.status-tab .pill-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pill-tab.status-tab .count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
  }
  .pill-tab.active.status-tab .count {
    color: rgba(255,255,255,0.85);
  }
  .status-tab-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
  }
  .pill-tab.active.status-tab .status-tab-dot {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
  }
  /* Per-status dot colors mirror the board column dots */
  .status-tab-dot.dot-not-started { background: var(--text-faint); }
  .status-tab-dot.dot-in-progress { background: #1a9ec9; }
  .status-tab-dot.dot-blocked     { background: var(--sbg-red); }
  .status-tab-dot.dot-pending     { background: #6e4eb8; }
  .status-tab-dot.dot-done        { background: var(--green); }
  /* Active state — left border picks up the status color so it reads as
     "you are filtered to <status>" without re-reading the label */
  .pill-tab.status-tab.status-tab-not-started.active { border-left-color: var(--text-faint); }
  .pill-tab.status-tab.status-tab-in-progress.active { border-left-color: #1a9ec9; }
  .pill-tab.status-tab.status-tab-blocked.active     { border-left-color: var(--sbg-red); }
  .pill-tab.status-tab.status-tab-pending.active     { border-left-color: #6e4eb8; }
  .pill-tab.status-tab.status-tab-done.active        { border-left-color: var(--green); }
  /* Inactive hover — subtle tint matching the status color */
  .pill-tab.status-tab.status-tab-not-started:hover:not(.active) { border-left-color: rgba(110,110,122,0.4); }
  .pill-tab.status-tab.status-tab-in-progress:hover:not(.active) { border-left-color: rgba(26,158,201,0.4); }
  .pill-tab.status-tab.status-tab-blocked:hover:not(.active)     { border-left-color: rgba(200,50,43,0.4); }
  .pill-tab.status-tab.status-tab-pending:hover:not(.active)     { border-left-color: rgba(110,78,184,0.4); }
  .pill-tab.status-tab.status-tab-done:hover:not(.active)        { border-left-color: rgba(46,125,82,0.4); }

  /* ========== SECTION HEADER ========== */
  .section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
  }
  .section-header h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--sbg-navy); text-transform: uppercase;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .section-header .stage-sub { color: var(--text-dim); font-size: 12px; margin-top: 4px; max-width: 680px; }
  .count-badge {
    font-family: 'JetBrains Mono', monospace;
    background: var(--surface); border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700;
  }
  .count-badge .done-num { color: var(--green); font-weight: 700; }
  .section-actions { display: flex; gap: 8px; }

  /* ========== KANBAN BOARD ========== */
  .board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .column {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 12px; min-height: 280px;
  }
  .column-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .column-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 700;
    display: flex; align-items: center; gap: 8px;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .dot.not-started { background: var(--text-faint); }
  .dot.in-progress { background: var(--blue); }
  .dot.blocked { background: var(--red); }
  .dot.pending { background: var(--purple); }
  .dot.done { background: var(--green); }
  .column-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); font-weight: 700; }
  .task-list { display: flex; flex-direction: column; gap: 7px; min-height: 80px; }

  /* ========== TASK CARD ========== */
  .task-card {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 10px; cursor: grab; transition: all 0.12s ease; position: relative;
  }
  .task-card:hover { box-shadow: 0 2px 6px rgba(10,37,64,0.12); transform: translateY(-1px); }
  .task-card.status-not-started { background: var(--fill-not-started); border-color: var(--fill-not-started-border); }
  .task-card.status-in-progress { background: var(--fill-in-progress); border-color: var(--fill-in-progress-border); }
  .task-card.status-blocked { background: var(--fill-blocked); border-color: var(--fill-blocked-border); }
  .task-card.status-pending { background: var(--fill-pending); border-color: var(--fill-pending-border); }
  .task-card.status-done { background: var(--fill-done); border-color: var(--fill-done-border); }
  .task-card.status-done .task-title { text-decoration: line-through; opacity: 0.75; }
  /* v158: Not Required task card — grey-tinted, italic + strikethrough title,
     visually distinct from Complete so users can tell at a glance which
     tasks were finished vs which were skipped as unnecessary. */
  .task-card.status-not-required {
    background: rgba(107, 118, 135, 0.12);
    border-color: rgba(107, 118, 135, 0.4);
  }
  .task-card.status-not-required .task-title {
    text-decoration: line-through;
    font-style: italic;
    opacity: 0.65;
    color: var(--text-dim);
  }
  body.dark-mode .task-card.status-not-required {
    background: rgba(139, 148, 158, 0.15);
    border-color: rgba(139, 148, 158, 0.35);
  }
  /* v158: Early / late / on-time completion badges — small pills that
     appear on task cards + rows when a completed task was finished before
     (or after) its scheduled due date. Green for early, gold for late,
     subtle grey for on-time (only shown as tooltip since it's the neutral). */
  .early-completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(44, 166, 116, 0.12);
    color: #1e8558;
    border: 1px solid rgba(44, 166, 116, 0.35);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    line-height: 1.2;
  }
  body.dark-mode .early-completion-badge {
    background: rgba(63, 185, 80, 0.14);
    color: #3fb950;
    border-color: rgba(63, 185, 80, 0.35);
  }
  .late-completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(192, 127, 0, 0.12);
    color: #a06600;
    border: 1px solid rgba(192, 127, 0, 0.35);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    line-height: 1.2;
  }
  body.dark-mode .late-completion-badge {
    background: rgba(229, 178, 76, 0.14);
    color: #e5b24c;
    border-color: rgba(229, 178, 76, 0.35);
  }
  /* Not Required inline badge — used in table + calendar + card meta */
  .not-required-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(107, 118, 135, 0.12);
    color: #6b7687;
    border: 1px solid rgba(107, 118, 135, 0.35);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    line-height: 1.2;
  }
  body.dark-mode .not-required-badge {
    background: rgba(139, 148, 158, 0.15);
    color: #8b949e;
    border-color: rgba(139, 148, 158, 0.4);
  }
  /* v173: Missed Deadline — rust palette. Signals the window closed
     without the loud red of active-overdue, but still darker/warmer than
     Not Required's grey so the two are visually distinct at a glance. */
  .task-card.status-missed-deadline {
    background: rgba(164, 64, 41, 0.10);
    border-color: rgba(164, 64, 41, 0.4);
  }
  .task-card.status-missed-deadline .task-title {
    text-decoration: line-through;
    font-style: italic;
    opacity: 0.7;
    color: #6b3020;
  }
  body.dark-mode .task-card.status-missed-deadline {
    background: rgba(219, 96, 66, 0.14);
    border-color: rgba(219, 96, 66, 0.4);
  }
  body.dark-mode .task-card.status-missed-deadline .task-title {
    color: #dbb0a0;
  }
  .missed-deadline-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(164, 64, 41, 0.12);
    color: #a44029;
    border: 1px solid rgba(164, 64, 41, 0.4);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    line-height: 1.2;
  }
  body.dark-mode .missed-deadline-badge {
    background: rgba(219, 96, 66, 0.15);
    color: #db6042;
    border-color: rgba(219, 96, 66, 0.4);
  }
  .task-card.is-overdue {
    background: var(--fill-overdue) !important;
    border-color: var(--fill-overdue-border) !important;
    color: #fff !important;
  }
  .task-card.is-overdue .task-title,
  .task-card.is-overdue .task-meta,
  .task-card.is-overdue .assignee span { color: #fff !important; }

  /* === Co-Lead chip styling on task cards ===
     "Sarah · Trent" — simple separator between co-Lead names.
     "+N" — used when 3+ co-Leads to keep the chip readable. */
  .co-lead-sep {
    color: var(--text-dim);
    margin: 0 2px;
    font-weight: 400;
  }
  .co-lead-more {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: rgba(192,127,0,0.15);
    color: #8a5a00;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    cursor: help;
  }
  .task-card.is-overdue .co-lead-sep { color: rgba(255,255,255,0.7) !important; }
  .task-card.is-overdue .co-lead-more {
    background: rgba(255,255,255,0.25);
    color: #fff;
  }

  /* === Multi-Lead picker (Edit Task modal) ===
     Mirrors the .multi-support-picker pattern but uses navy accent (Lead
     tier) vs gray (Support tier). */
  .multi-lead-picker {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px;
  }
  .mlp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
    margin-bottom: 8px;
  }
  .mlp-empty {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
    padding: 4px 6px;
  }
  .mlp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 3px;
    background: var(--surface);
    border: 1px solid var(--sbg-navy);
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sbg-navy);
    box-shadow: 0 1px 2px rgba(10,37,64,0.08);
  }
  .mlp-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sbg-navy);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
  }
  .mlp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mlp-name {
    line-height: 1.2;
    padding-right: 2px;
  }
  .mlp-primary-badge {
    background: #c07f00;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.05em;
  }
  .mlp-promote, .mlp-remove {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-dim);
    padding: 0;
    flex-shrink: 0;
  }
  .mlp-promote:hover {
    background: rgba(10,37,64,0.1);
    color: var(--sbg-navy);
  }
  .mlp-remove:hover {
    background: rgba(200,50,43,0.12);
    color: var(--sbg-red);
  }
  .mlp-input-row {
    display: flex;
    gap: 6px;
  }
  .mlp-input-row input {
    flex: 1;
  }
  .mlp-add-btn {
    background: var(--sbg-navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .mlp-add-btn:hover { background: #14304d; }
  .mlp-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    font-style: italic;
  }

  /* === Per-Lead acknowledgment panel ===
     Shows ack status for each Lead, with an inline "Acknowledge as you"
     button if the current user is an unacked Lead. */
  .mlp-ack-panel {
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
  }
  .mlp-ack-header {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .mlp-ack-header-pending { color: #c8322b; }
  .mlp-ack-header-done    { color: #1a7f37; }
  .mlp-ack-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .mlp-ack-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
  }
  .mlp-ack-name {
    font-weight: 600;
    color: var(--text);
    flex: 0 0 auto;
    min-width: 80px;
  }
  .mlp-ack-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
  }
  .mlp-ack-done {
    color: #fff;
    background: #1a7f37;
  }
  .mlp-ack-pending {
    color: #8a5a00;
    background: rgba(192,127,0,0.15);
    border: 1px solid rgba(192,127,0,0.3);
  }
  .mlp-ack-btn {
    margin-left: auto;
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mlp-ack-btn:hover {
    background: #a02921;
  }

  /* === Per-Lead completion panel ===
     Sits below the ack panel. Shows each Lead's completion status with
     inline mark/un-mark buttons. Cyan-toned to differentiate from the
     navy ack panel. */
  .mlp-completion-panel {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(26,158,201,0.06);
    border: 1px solid rgba(26,158,201,0.3);
    border-radius: 4px;
    font-size: 12px;
  }
  .mlp-comp-header {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .mlp-comp-header-pending { color: #1a7593; }
  .mlp-comp-header-done    { color: #1a7f37; }
  .mlp-comp-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mlp-comp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
  }
  .mlp-comp-name {
    font-weight: 600;
    color: var(--text);
    flex: 0 0 auto;
    min-width: 80px;
  }
  .mlp-comp-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.03em;
  }
  .mlp-comp-done {
    color: #fff;
    background: #1a7f37;
  }
  .mlp-comp-pending {
    color: #1a7593;
    background: rgba(26,158,201,0.15);
    border: 1px solid rgba(26,158,201,0.3);
  }
  .mlp-comp-btn {
    margin-left: auto;
    border: none;
    border-radius: 3px;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mlp-comp-btn-primary {
    background: #1a7f37;
    color: #fff;
  }
  .mlp-comp-btn-primary:hover { background: #145c28; }
  .mlp-comp-btn-secondary {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .mlp-comp-btn-secondary:hover { background: var(--surface-2); }
  .mlp-comp-btn-onbehalf {
    background: var(--surface);
    color: #1a7593;
    border: 1px solid rgba(26,158,201,0.5);
  }
  .mlp-comp-btn-onbehalf:hover {
    background: rgba(26,158,201,0.08);
  }
  .mlp-comp-hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }

  /* Card chip — small "🏁 N/M" indicator on cards with co-Lead completion in progress */
  .lead-comp-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: rgba(26,158,201,0.12);
    color: #1a7593;
    border: 1px solid rgba(26,158,201,0.35);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
  }
  .lead-comp-chip-done {
    background: rgba(26,127,55,0.15);
    color: #1a7f37;
    border-color: rgba(26,127,55,0.4);
  }
  .task-card.is-overdue .lead-comp-chip {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }

  /* === Projected Hours card chip ===
     Small "⏱ 4h" indicator on cards. Purple-toned to differentiate from
     the cyan completion chip and the gold start-by chip. */
  .hours-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: rgba(96,86,143,0.12);
    color: #5d4f8c;
    border: 1px solid rgba(96,86,143,0.35);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
  }
  .task-card.is-overdue .hours-chip {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }

  /* === Edit Task modal: Hours field group === */
  .hours-group label .hours-hint {
    font-style: italic;
  }
  .hours-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  .hours-row input[type="number"] {
    flex: 0 0 auto;
  }

  /* === Project-level Hours Rollup panel ===
     Sits between the project header and the Alerts section. Shows total /
     done / remaining stats, a per-stage horizontal-bar breakdown, and a
     per-Lead horizontal-bar breakdown. Capacity warning surfaces in red
     when remaining hours / business days > 6h/person/day. */
  .hours-rollup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid #5d4f8c;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 12px 0;
  }
  .hours-rollup-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .hours-rollup-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5d4f8c;
  }
  .hours-coverage-note {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    cursor: help;
  }
  .hours-rollup-empty .hours-rollup-empty-msg {
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .hours-rollup-empty .hours-rollup-tip {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-faint);
    font-style: italic;
  }

  /* Capacity warning banner — fires when daily-per-person hours > 6 */
  .hours-capacity-warning {
    background: rgba(200,50,43,0.08);
    border: 1px solid rgba(200,50,43,0.35);
    color: #8a1f1a;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.4;
  }

  /* Stat strip — total / done / remaining / coverage */
  .hours-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
  }
  .hours-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    text-align: center;
  }
  .hours-stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
  }
  .hours-stat-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-top: 2px;
    font-weight: 600;
  }
  .hours-stat-total .hours-stat-num    { color: #5d4f8c; }
  .hours-stat-done .hours-stat-num     { color: #1a7f37; }
  .hours-stat-remaining .hours-stat-num { color: var(--sbg-navy); }
  @media (max-width: 720px) {
    .hours-stat-strip { grid-template-columns: 1fr 1fr; }
  }

  /* Two-column breakdown grid (by stage + by Lead) */
  .hours-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 720px) {
    .hours-breakdown-grid { grid-template-columns: 1fr; }
  }
  .hours-breakdown-col {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
  }
  .hours-breakdown-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    font-weight: 700;
    margin-bottom: 6px;
  }

  /* Horizontal-bar rows in the breakdowns */
  .hours-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
  }
  .hours-bar-label {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hours-bar-track {
    height: 14px;
    background: var(--surface-3);
    border-radius: 2px;
    overflow: hidden;
  }
  .hours-bar-fill {
    height: 100%;
    background: #5d4f8c;
    border-radius: 2px;
    transition: width 0.2s ease;
  }
  .hours-bar-fill-unassigned {
    background: var(--sbg-red);
  }
  .hours-bar-row.hours-bar-unassigned .hours-bar-label {
    color: var(--sbg-red);
    font-style: italic;
  }
  .hours-bar-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
  }
  .hours-empty-mini {
    color: var(--text-dim);
    font-size: 11.5px;
    font-style: italic;
    padding: 4px 0;
  }

  /* v77: Person row — extends the bar row with a 3-number display
     (Total · Done · Remaining). Used in the By Person breakdown.
     ============================================================ */
  .hours-person-row {
    display: grid;
    grid-template-columns: 110px 1fr 168px;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--surface-3);
  }
  .hours-person-row:last-child { border-bottom: none; }
  .hours-person-label {
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* v151: Lead vs support badge on the project hours rollup so users can
     see WHY someone's hours look smaller — they're a support member on
     some tasks and pro-rated accordingly. */
  .hours-person-role {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
  }
  .hours-role-lead {
    background: rgba(10, 37, 64, 0.08);
    color: var(--sbg-navy);
    border: 1px solid rgba(10, 37, 64, 0.15);
  }
  body.dark-mode .hours-role-lead {
    background: rgba(110, 163, 255, 0.15);
    color: var(--sbg-navy);
    border-color: rgba(110, 163, 255, 0.3);
  }
  .hours-role-support {
    background: rgba(192, 127, 0, 0.1);
    color: var(--sbg-gold);
    border: 1px solid rgba(192, 127, 0, 0.25);
  }
  body.dark-mode .hours-role-support {
    background: rgba(229, 178, 76, 0.15);
    color: var(--sbg-gold);
    border-color: rgba(229, 178, 76, 0.35);
  }
  .hours-person-row.hours-bar-unassigned .hours-person-label {
    color: var(--sbg-red);
    font-style: italic;
  }
  .hours-person-track {
    height: 16px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }
  /* Total fill (lighter, full-width-of-share) sits underneath the Remaining fill */
  .hours-person-fill-total {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(93, 79, 140, 0.35);
    border-radius: 3px;
  }
  /* Remaining fill (darker, overlaid on top) shows how much is still ahead */
  .hours-person-fill-remaining {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #5d4f8c;
    border-radius: 3px;
    transition: width 0.2s ease;
  }
  .hours-person-fill-remaining.hours-fill-unassigned {
    background: var(--sbg-red);
  }
  .hours-person-numbers {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
  }
  .hours-person-num {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
    min-width: 38px;
    text-align: center;
  }
  .hours-person-num-total    { background: var(--surface-2); }
  .hours-person-num-done     { background: rgba(46, 125, 82, 0.10); color: var(--green); border-color: rgba(46, 125, 82, 0.25); }
  .hours-person-num-remaining{ background: rgba(93, 79, 140, 0.12); color: #5d4f8c; border-color: rgba(93, 79, 140, 0.30); }
  .hours-person-row.hours-bar-unassigned .hours-person-num-remaining {
    background: rgba(200, 50, 43, 0.10);
    color: var(--sbg-red);
    border-color: rgba(200, 50, 43, 0.30);
  }
  .hours-person-num-label {
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
  }
  /* Header row showing what each number means */
  .hours-person-header {
    display: grid;
    grid-template-columns: 110px 1fr 168px;
    gap: 10px;
    padding: 2px 0 4px 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .hours-person-header > div:last-child {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
  }
  .hours-person-header-num {
    min-width: 38px;
    text-align: center;
    padding: 0 6px;
  }

  /* === Hours Settings modal: per-stage defaults grid === */
  .hours-stage-defaults-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }
  @media (max-width: 600px) {
    .hours-stage-defaults-grid { grid-template-columns: 1fr; }
  }
  .hours-stage-row {
    display: grid;
    grid-template-columns: 1fr 80px auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .hours-stage-label {
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
  }
  .hours-stage-input {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
  }
  .hours-stage-unit {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
  }

  .task-card.is-overdue .csi-code {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
  }
  .task-card.is-overdue .due-date { color: #fff !important; font-weight: 700; }
  .task-card.is-overdue .day-offset { background: rgba(255,255,255,0.2); color: #fff; }
  .task-card.is-overdue .dot { box-shadow: 0 0 0 2px #fff; }
  .task-card.dragging { opacity: 0.5; cursor: grabbing; }

  /* ===== NEW task acknowledgment (Group by Assignee) ===== */
  .task-card.needs-ack {
    box-shadow: 0 0 0 2px var(--sbg-red), 0 2px 6px rgba(200,50,43,0.2);
    position: relative;
  }
  .new-task-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 3px 7px;
    border-radius: 2px;
    z-index: 2;
    animation: newPulse 1.6s ease-in-out infinite;
  }
  @keyframes newPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0.6); }
    50% { box-shadow: 0 0 0 5px rgba(200,50,43,0); }
  }
  .task-ack-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
  }
  .task-ack-btn:hover { background: #a5291f; transform: translateY(-1px); }
  .task-card.is-overdue .task-ack-btn { background: #fff; color: var(--sbg-red); }
  .task-card.is-overdue .task-ack-btn:hover { background: #f5f5f5; }

  /* Unacknowledged task counter on assignee tabs */
  .assignee-new-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 2px;
    vertical-align: middle;
    animation: newPulse 1.6s ease-in-out infinite;
  }
  .pill-tab.active.assignee-tab .assignee-new-badge {
    background: #fff;
    color: var(--sbg-red);
  }

  /* ===== Assignee alert dots — per-type counts shown between header and progress bar ===== */
  .assignee-alert-dots {
    display: flex;
    gap: 3px;
    padding: 2px 0 4px;
    flex-wrap: wrap;
  }
  .assignee-alert-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
  }
  .assignee-alert-dot.ad-overdue { background: var(--sbg-red); animation: newPulse 1.6s ease-in-out infinite; }
  .assignee-alert-dot.ad-imminent { background: #e85d04; }
  .assignee-alert-dot.ad-soon { background: #e6b422; color: #000; }
  .assignee-alert-dot.ad-unack { background: var(--sbg-red); }
  .assignee-alert-dot.ad-pending { background: #6e4eb8; }
  .assignee-alert-dot.ad-completion { background: var(--green); }
  /* When tab is active, invert dot backgrounds for contrast against navy */
  .pill-tab.active .assignee-alert-dot { background: rgba(255,255,255,0.28) !important; color: #fff !important; }

  /* ===== Progress bar severity tinting — progress bar takes on alert color ===== */
  .pill-tab.has-critical-alerts .pill-progress {
    background: rgba(200,50,43,0.18);
    box-shadow: inset 0 0 0 1px rgba(200,50,43,0.45);
  }
  .pill-tab.has-alerts .pill-progress {
    background: rgba(232,93,4,0.15);
    box-shadow: inset 0 0 0 1px rgba(232,93,4,0.4);
  }
  .pill-tab.has-warning-alerts .pill-progress {
    background: rgba(230,180,34,0.18);
    box-shadow: inset 0 0 0 1px rgba(230,180,34,0.4);
  }
  /* Keep progress fill color clearly green (completion progress) against the tinted background */
  .pill-tab.has-critical-alerts .pill-progress-fill,
  .pill-tab.has-alerts .pill-progress-fill,
  .pill-tab.has-warning-alerts .pill-progress-fill {
    background: var(--green);
  }

  /* Alert count pill overlaid on the right of the progress bar */
  .pill-progress { position: relative; }
  .pill-alert-count {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 6px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 2px;
    line-height: 1.2;
    pointer-events: none;
  }
  .pill-tab.has-warning-alerts .pill-alert-count {
    background: #c07f00;
  }
  .pill-tab.has-alerts .pill-alert-count {
    background: #e85d04;
  }
  .pill-tab.active .pill-alert-count {
    background: #fff;
    color: var(--sbg-red);
  }
  /* Critical (overdue) pulsing on the pill */
  .pill-tab.has-critical-alerts .pill-alert-count {
    animation: newPulse 1.6s ease-in-out infinite;
  }

  /* "Acknowledge All" button in assignee section header */
  .ack-all-btn {
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .ack-all-btn:hover {
    background: #a5291f;
    transform: translateY(-1px);
  }

  /* Subtle highlight on assignee sections with new tasks */
  .stage-panel.has-new-tasks {
    box-shadow: 0 0 0 1px var(--sbg-red), 0 1px 3px rgba(200,50,43,0.08);
  }
  .stage-panel.has-new-tasks > .stage-panel-header {
    background: linear-gradient(to right, rgba(200,50,43,0.04), transparent 60%);
  }

  /* ===== Completion Sign-Off (Completed alert panel) ===== */
  .completion-panel-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(46,125,82,0.08);
    border-bottom: 1px solid var(--green);
    flex-wrap: wrap;
  }
  .completion-panel-notice .cpn-lead {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
  }
  .completion-panel-notice .cpn-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green);
    font-weight: 700;
  }
  .completion-panel-notice .cpn-lead strong {
    font-size: 14px;
    color: var(--text);
    font-weight: 700;
  }
  .completion-panel-notice .cpn-sub {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
  }
  .completion-panel-notice .cpn-missing {
    color: var(--sbg-red);
    font-weight: 600;
  }

  /* Alert items styled as completion sign-off queue */
  .alert-item.alert-item-completion {
    border-left-color: var(--green) !important;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    gap: 10px;
    align-items: center;
  }

  /* ===== Unacknowledged (newly-assigned, awaiting acknowledgment) ===== */
  .alert-tab.tab-unacknowledged {
    background: rgba(200,50,43,0.08);
    border-color: var(--sbg-red);
    color: var(--sbg-red);
    position: relative;
  }
  .alert-tab.tab-unacknowledged::before {
    content: '🔔';
    font-size: 11px;
  }
  .alert-tab.tab-unacknowledged:hover {
    background: rgba(200,50,43,0.15);
  }
  .alert-tab.tab-unacknowledged.active {
    box-shadow: 0 0 0 3px rgba(200,50,43,0.3);
  }
  /* The Unacknowledged tab pulses softly to draw attention — it's the "bell" for new work */
  .alert-tab.tab-unacknowledged:not(.active) .alert-count {
    animation: newPulse 1.8s ease-in-out infinite;
  }
  .alert-panel.panel-unacknowledged { border-color: var(--sbg-red); }
  .alert-panel.panel-unacknowledged .alert-panel-title { color: var(--sbg-red); }
  .alert-panel.panel-unacknowledged .alert-item { border-left-color: var(--sbg-red); }
  /* v171: Not Required tab + panel — muted grey palette so it reads as
     informational rather than urgent. Sits alongside the alert tabs but
     visually recedes. */
  .alert-tab.tab-notrequired {
    background: rgba(107, 118, 135, 0.1);
    border: 1px solid rgba(107, 118, 135, 0.35);
    color: #4a5461;
  }
  .alert-tab.tab-notrequired:hover {
    background: rgba(107, 118, 135, 0.2);
  }
  .alert-tab.tab-notrequired.active {
    background: rgba(107, 118, 135, 0.35);
    border-color: #6b7687;
    color: #2c3038;
  }
  .alert-tab.tab-notrequired .alert-count {
    background: rgba(107, 118, 135, 0.25);
    color: #4a5461;
  }
  .alert-panel.panel-not-required {
    border-color: #6b7687;
  }
  .alert-panel.panel-not-required .alert-panel-title {
    color: #4a5461;
  }
  .alert-panel.panel-not-required .alert-item {
    border-left-color: #6b7687;
    opacity: 0.85;
  }
  body.dark-mode .alert-tab.tab-notrequired {
    background: rgba(139, 148, 158, 0.12);
    border-color: rgba(139, 148, 158, 0.4);
    color: #b8bfc7;
  }
  body.dark-mode .alert-tab.tab-notrequired.active {
    background: rgba(139, 148, 158, 0.3);
    color: #e5e9ef;
  }

  /* Unacknowledged badge on alert items */
  .alert-item .ai-flag.badge-unacknowledged {
    background: var(--sbg-red);
    color: #fff;
  }
  .alert-item.alert-item-unack {
    background: rgba(200,50,43,0.04);
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    gap: 10px;
    align-items: center;
  }

  /* Acknowledge button inline in the alert list */
  .ai-ack-btn {
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ai-ack-btn:hover {
    background: #a5291f;
    transform: translateY(-1px);
  }
  /* Lead override button — purple/navy accent to distinguish from self-ack */
  .ai-override-btn {
    background: #4a3c8a;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    margin-left: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ai-override-btn:hover {
    background: #322866;
    transform: translateY(-1px);
  }
  .ack-override-all-btn {
    background: #4a3c8a !important;
    border-color: #4a3c8a !important;
  }
  .ack-override-all-btn:hover {
    background: #322866 !important;
    border-color: #322866 !important;
  }
  /* View-switcher-bar Acknowledge-All and Override-All buttons */
  .pv-ack-override-btn {
    background: #4a3c8a !important;
    color: #fff !important;
    border-color: #4a3c8a !important;
  }
  .pv-ack-override-btn:hover {
    background: #322866 !important;
    border-color: #322866 !important;
  }

  /* Task card override button (Board view) + override badge */
  .task-override-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    margin-left: 6px;
    background: #4a3c8a;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s;
  }
  .task-override-btn:hover { background: #322866; }
  /* Table view override button */
  .table-override-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    margin-left: 4px;
    background: #4a3c8a;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
  }
  .table-override-btn:hover { background: #322866; }
  /* Calendar view override button — tiny ⚡ icon */
  .cal-override-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    margin-right: 4px;
    padding: 0;
    background: #4a3c8a;
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
  }
  .cal-override-btn:hover { background: #322866; }
  /* Override audit badge — shown on task cards that were ack'd via override */
  .override-audit-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(74,60,138,0.12);
    color: #4a3c8a;
    border: 1px solid #4a3c8a;
    border-radius: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: 6px;
  }

  /* ===== By-Assignee Alerts Strip ===== */
  .assignee-alerts-strip {
    display: none; /* render function will toggle */
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    border-left: 3px solid var(--sbg-navy);
  }
  .assignee-alerts-strip.active { display: block; }
  .assignee-alerts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .assignee-alerts-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sbg-navy);
  }
  .assignee-alerts-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .assignee-alert-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  }
  .assignee-alert-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background: var(--surface-3);
  }
  .assignee-alert-card.active {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }
  .aac-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
  }
  .aac-avatar img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .aac-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .aac-badges {
    display: flex;
    gap: 3px;
    align-items: center;
  }
  .aac-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
  }
  .aac-badge.b-overdue { background: var(--sbg-red); color: #fff; animation: newPulse 1.6s ease-in-out infinite; }
  .aac-badge.b-imminent { background: #e85d04; color: #fff; }
  .aac-badge.b-soon { background: #e6b422; color: #000; }
  .aac-badge.b-unack { background: var(--sbg-red); color: #fff; }
  .aac-badge.b-pending { background: #6e4eb8; color: #fff; }
  .aac-badge.b-completion { background: var(--green); color: #fff; }
  /* When card is active, invert badge backgrounds to stay readable */
  .assignee-alert-card.active .aac-badge { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

  .ai-signoff-btn {
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ai-signoff-btn:hover {
    background: #226b46;
    transform: translateY(-1px);
  }
  .ai-signoff-btn.disabled {
    background: var(--text-dim);
    cursor: not-allowed;
    opacity: 0.85;
  }
  .ai-reject-btn {
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    margin-left: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ai-reject-btn:hover {
    background: #a5291f;
    transform: translateY(-1px);
  }
  .ai-signoff-btn.disabled:hover {
    background: var(--text-dim);
    transform: none;
  }

  /* Sign-off status footer on task cards */
  .task-signoff-footer {
    margin-top: 8px;
    padding: 5px 8px;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
  }
  .task-signoff-footer.signed {
    background: rgba(46,125,82,0.15);
    color: var(--green);
    border: 1px solid var(--green);
  }
  .task-signoff-footer.pending {
    background: rgba(230,180,34,0.15);
    color: #a67c00;
    border: 1px solid var(--yellow);
    animation: signoffPulse 2s ease-in-out infinite;
  }
  @keyframes signoffPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
  }
  .task-card.is-overdue .task-signoff-footer.signed {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: #fff;
  }
  .task-card.is-overdue .task-signoff-footer.pending {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.8);
  }

  /* ===== Table View — acknowledgment indicators ===== */
  .task-table tr.row-needs-ack {
    box-shadow: inset 3px 0 0 0 var(--sbg-red);
  }
  .table-new-badge {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 6px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 2px;
    vertical-align: middle;
    animation: newPulse 1.6s ease-in-out infinite;
  }
  .table-ack-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    margin-left: 8px;
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.1s, background 0.1s;
    vertical-align: middle;
    white-space: nowrap;
  }
  .table-ack-btn:hover {
    background: #a5291f;
    transform: translateY(-1px);
  }
  .table-signoff {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 2px;
    vertical-align: middle;
  }
  .table-signoff.signed {
    background: rgba(46,125,82,0.15);
    color: var(--green);
    border: 1px solid var(--green);
  }
  .task-table tr.row-overdue .table-signoff.signed {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: #fff;
  }
  .table-signoff.pending {
    background: rgba(230,180,34,0.2);
    color: #a67c00;
    border: 1px solid var(--yellow);
    animation: signoffPulse 2s ease-in-out infinite;
  }

  /* ===== Calendar View — acknowledgment indicators ===== */
  .cal-event.needs-ack-cal {
    box-shadow: inset 2px 0 0 0 var(--sbg-red);
    position: relative;
  }
  .cal-new-badge {
    display: inline-block;
    padding: 1px 5px;
    margin-right: 5px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 2px;
    vertical-align: middle;
    cursor: pointer;
    animation: newPulse 1.6s ease-in-out infinite;
  }
  .cal-new-badge:hover { background: #a5291f; }
  .cal-ack-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    margin-right: 5px;
    padding: 0;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
  }
  .cal-ack-btn:hover { background: #226b46; }

  /* ===== v90: NOTIFICATION BELL ===== */
  .notification-bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .notification-bell-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
  }
  .notification-bell-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.05);
  }
  .notification-bell-btn.has-unread .notif-bell-icon {
    animation: bell-ring 1.4s ease infinite;
    transform-origin: 50% 20%;
  }
  @keyframes bell-ring {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-14deg); }
    20% { transform: rotate(14deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    50% { transform: rotate(-4deg); }
  }
  .notif-bell-icon {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
  }
  .notification-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--sbg-red, #c8322b);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sbg-navy, #0a2540);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  /* v93: Toast notifications — top-right, persistent, stack vertically */
  /* v106: Dismiss-all chip — appears above the stack when 2+ toasts. */
  /* v110: pushed both down from top:20px to sit clearly BELOW the ~83px
     navy header (14+52+14+3 border) so they don't blur into it. */
  .toast-dismiss-all {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 10001;
    background: var(--sbg-navy, #0a2540);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease, transform 0.12s ease;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .toast-dismiss-all:hover {
    background: #061a2e;
    transform: translateX(-2px);
  }
  .toast-dismiss-all .tda-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sbg-red, #c8322b);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0;
  }
  .toast-container {
    position: fixed;
    top: 100px; /* v110: below the 83px navy header; JS pushes to 142px when dismiss-all chip is showing */
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    pointer-events: none;
  }
  .toast-card {
    background: #fff;
    border: 1px solid var(--border, #e0e0e0);
    border-left: 4px solid var(--sbg-red, #c8322b);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 14px 40px 14px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .toast-card:hover {
    transform: translateX(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .toast-card.toast-dismissing {
    animation: toast-slide-out 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  @keyframes toast-slide-in {
    from {
      opacity: 0;
      transform: translateX(120%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes toast-slide-out {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(120%);
    }
  }
  .toast-icon {
    font-size: 22px;
    line-height: 1.1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    margin-top: 1px;
  }
  .toast-body {
    flex: 1;
    min-width: 0;
  }
  .toast-title {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--sbg-red, #c8322b);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 3px;
    line-height: 1.2;
  }
  .toast-msg {
    font-size: 13px;
    color: var(--text, #1a1a1a);
    line-height: 1.4;
    word-wrap: break-word;
  }
  .toast-meta {
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    margin-top: 4px;
  }
  .toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-dim, #6b7687);
    font-size: 18px;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
  }
  .toast-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text, #1a1a1a);
  }
  /* Color-code the left border by event type severity */
  .toast-card.toast-severity-critical {
    border-left-color: var(--sbg-red, #c8322b);
  }
  .toast-card.toast-severity-critical .toast-title {
    color: var(--sbg-red, #c8322b);
  }
  .toast-card.toast-severity-info {
    border-left-color: var(--sbg-navy, #0a2540);
  }
  .toast-card.toast-severity-info .toast-title {
    color: var(--sbg-navy, #0a2540);
  }
  .toast-card.toast-severity-success {
    border-left-color: #2e7d52;
  }
  .toast-card.toast-severity-success .toast-title {
    color: #2e7d52;
  }
  .toast-card.toast-severity-warning {
    border-left-color: var(--sbg-gold, #c07f00);
  }
  .toast-card.toast-severity-warning .toast-title {
    color: var(--sbg-gold, #c07f00);
  }
  /* v108: 'assigned' severity — thicker gold border + gold-tint background +
     gentle attention pulse so the user clearly catches when work has landed
     on their plate. Distinct from 'info' which is used for status changes. */
  .toast-card.toast-severity-assigned {
    border-left-color: var(--sbg-gold, #c07f00);
    border-left-width: 6px;
    background: linear-gradient(90deg, rgba(192, 127, 0, 0.06) 0%, #fff 45%);
    box-shadow: 0 10px 26px rgba(192, 127, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.1);
    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1), assigned-attention 2.2s ease-in-out 1;
  }
  @keyframes assigned-attention {
    0%, 100% { box-shadow: 0 10px 26px rgba(192, 127, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: 0 12px 32px rgba(192, 127, 0, 0.45), 0 6px 14px rgba(192, 127, 0, 0.25); }
  }
  .toast-card.toast-severity-assigned .toast-title {
    color: var(--sbg-gold, #c07f00);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
  }
  .toast-card.toast-severity-assigned .toast-icon {
    font-size: 24px;
  }
  /* v115: Center-screen assignment toast — pops in the middle of the screen
     with a thick red border and stronger presence. "In your face but not too
     much." Only applied to task-assigned / task-reassigned toasts via extra
     class .toast-assignment-center added by _spawnToast. */
  #toastCenterLayer {
    position: fixed;
    inset: 0;
    z-index: 10002;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
  }
  #toastCenterLayer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 37, 64, 0.20);
    backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  #toastCenterLayer.has-toast::before { opacity: 1; }
  .toast-card.toast-assignment-center {
    position: relative;
    width: 500px;
    max-width: calc(100vw - 40px);
    padding: 18px 20px;
    border: 3px solid var(--sbg-red, #c8322b);
    border-left-width: 8px;
    border-left-color: var(--sbg-gold, #c07f00);
    background: linear-gradient(135deg, #fff 0%, rgba(192, 127, 0, 0.05) 100%);
    box-shadow:
      0 20px 60px rgba(200, 50, 43, 0.35),
      0 8px 20px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.9) inset;
    border-radius: 6px;
    pointer-events: auto;
    animation:
      assignment-center-in 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      assignment-center-pulse 2.5s ease-in-out 1;
  }
  .toast-card.toast-assignment-center .toast-title {
    font-size: 15px;
    letter-spacing: 0.6px;
  }
  .toast-card.toast-assignment-center .toast-icon {
    font-size: 30px;
  }
  .toast-card.toast-assignment-center .toast-msg {
    font-size: 13.5px;
    line-height: 1.5;
    margin-top: 4px;
  }
  .toast-card.toast-assignment-center .toast-actions {
    margin-top: 12px;
  }
  .toast-card.toast-assignment-center .toast-action-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
  @keyframes assignment-center-in {
    from { opacity: 0; transform: translateY(-30px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes assignment-center-pulse {
    0%, 100% { box-shadow: 0 20px 60px rgba(200, 50, 43, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.9) inset; }
    50% { box-shadow: 0 24px 72px rgba(200, 50, 43, 0.55), 0 10px 26px rgba(200, 50, 43, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9) inset; }
  }
  /* v108: Toast action button row — sits below the message + meta. */
  .toast-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .toast-action-btn {
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    font-family: 'Inter', -apple-system, sans-serif;
    letter-spacing: 0.02em;
  }
  .toast-action-btn:hover { transform: translateY(-1px); }
  .toast-action-btn:active { transform: translateY(0); }
  .toast-action-primary {
    background: var(--sbg-gold, #c07f00);
    color: #fff;
    border-color: var(--sbg-gold, #c07f00);
    box-shadow: 0 2px 4px rgba(192, 127, 0, 0.3);
  }
  .toast-action-primary:hover {
    background: #a06d00;
    border-color: #a06d00;
    box-shadow: 0 3px 6px rgba(192, 127, 0, 0.4);
  }
  .toast-action-secondary {
    background: transparent;
    color: var(--text-dim, #6b7687);
    border-color: rgba(0, 0, 0, 0.15);
  }
  .toast-action-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text, #1a1a1a);
    border-color: rgba(0, 0, 0, 0.25);
  }
  /* v109: Danger variant of the primary action — SBG red for acknowledging
     a rejection (visually distinct from the gold "accept a task" primary). */
  .toast-action-primary.toast-action-danger {
    background: var(--sbg-red, #c8322b);
    border-color: var(--sbg-red, #c8322b);
    box-shadow: 0 2px 4px rgba(200, 50, 43, 0.3);
  }
  .toast-action-primary.toast-action-danger:hover {
    background: #a5251f;
    border-color: #a5251f;
    box-shadow: 0 3px 6px rgba(200, 50, 43, 0.4);
  }
  /* Silenced state indicator on the bell */
  .notification-bell-btn.toasts-silenced::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-dim, #6b7687);
    border: 2px solid var(--sbg-navy, #0a2540);
  }
  /* v105: Lead Manager Mode indicator — small eye icon on the bell */
  .notification-bell-btn.bell-manager-mode::before {
    content: '👁';
    position: absolute;
    bottom: -4px;
    left: -4px;
    font-size: 11px;
    background: var(--sbg-gold, #c07f00);
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sbg-navy, #0a2540);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    line-height: 1;
    z-index: 2;
  }
  .notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-height: 520px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 200;
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  .notification-dropdown.open {
    display: flex;
  }
  .notif-dropdown-header {
    padding: 12px 14px 10px 14px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    background: var(--surface-2, #f8f9fb);
  }
  .notif-dropdown-title {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #1a1a1a);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .notif-scope-toggle {
    display: inline-flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.05);
    padding: 3px;
    border-radius: 6px;
  }
  /* v107: Prominent Manager Mode row inside the bell dropdown header. */
  .notif-manager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(10, 37, 64, 0.05) 0%, rgba(192, 127, 0, 0.08) 100%);
    border: 1px solid rgba(10, 37, 64, 0.12);
    border-radius: 6px;
    margin: 6px 0 8px 0;
  }
  .notif-manager-label {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--sbg-navy, #0a2540);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  /* Simple iOS-style toggle switch */
  .notif-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
  }
  .notif-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }
  .notif-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
    border-radius: 22px;
  }
  .notif-switch-slider::before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    transition: transform 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .notif-switch input:checked + .notif-switch-slider {
    background: var(--sbg-gold, #c07f00);
  }
  .notif-switch input:checked + .notif-switch-slider::before {
    transform: translateX(18px);
  }
  .notif-scope-btn {
    background: transparent;
    border: none;
    color: var(--text-dim, #6b7687);
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .notif-scope-btn.active {
    background: var(--sbg-navy, #0a2540);
    color: #fff;
  }
  .notif-scope-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text, #1a1a1a);
  }
  .notif-dropdown-body {
    overflow-y: auto;
    flex: 1;
    max-height: 380px;
  }
  .notif-row {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: background 0.1s;
    position: relative;
  }
  .notif-row:hover {
    background: rgba(10, 37, 64, 0.04);
  }
  .notif-row.notif-unread {
    background: rgba(200, 50, 43, 0.04);
  }
  .notif-row.notif-unread:hover {
    background: rgba(200, 50, 43, 0.08);
  }
  .notif-icon {
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
  }
  .notif-body {
    flex: 1;
    min-width: 0;
  }
  .notif-msg {
    font-size: 12.5px;
    color: var(--text, #1a1a1a);
    line-height: 1.4;
    word-wrap: break-word;
  }
  .notif-unread .notif-msg {
    font-weight: 600;
  }
  .notif-meta {
    font-size: 10.5px;
    color: var(--text-dim, #6b7687);
    margin-top: 3px;
  }
  .notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sbg-red, #c8322b);
    flex-shrink: 0;
    margin-top: 6px;
  }
  .notif-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-dim, #6b7687);
    font-size: 12px;
    line-height: 1.5;
  }
  .notif-dropdown-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border, #e0e0e0);
    background: var(--surface-2, #f8f9fb);
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .notif-footer-btn {
    background: transparent;
    border: 1px solid var(--border, #e0e0e0);
    color: var(--text-dim, #6b7687);
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .notif-footer-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text, #1a1a1a);
  }
  .notif-footer-btn-danger:hover {
    background: rgba(200, 50, 43, 0.1);
    color: var(--sbg-red, #c8322b);
    border-color: rgba(200, 50, 43, 0.3);
  }

  /* ===== MESSAGING UI ===== */
  /* Current user chip in top header */
  .current-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    margin-right: 10px;
  }
  .current-user-chip:hover {
    background: var(--surface-3);
    border-color: var(--sbg-navy);
    transform: translateY(-1px);
  }
  .current-user-chip.not-signed-in {
    background: rgba(200,50,43,0.08);
    border-color: var(--sbg-red);
    animation: newPulse 2.2s ease-in-out infinite;
  }
  .current-user-chip.not-signed-in .cuc-name { color: var(--sbg-red); font-weight: 700; }
  .current-user-chip .cuc-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Barlow Condensed', sans-serif;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--text-faint);
  }
  .current-user-chip .cuc-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .current-user-chip .cuc-avatar.empty::before {
    content: '?';
    font-size: 14px;
  }
  .current-user-chip .cuc-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.1;
  }
  .current-user-chip .cuc-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 700;
  }
  .current-user-chip .cuc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
  }
  .current-user-chip .cuc-caret {
    font-size: 10px;
    color: var(--text-dim);
    margin-left: 2px;
  }

  /* ===== Signed-in-as bar (on project page) ===== */
  .signed-in-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-top: 12px;
    background: linear-gradient(to right, rgba(10,37,64,0.04), var(--surface-2));
    border: 1px solid var(--border);
    border-left: 4px solid var(--sbg-navy);
    border-radius: 4px;
    flex-wrap: wrap;
  }
  .signed-in-bar.not-signed-in {
    background: linear-gradient(to right, rgba(200,50,43,0.08), var(--surface-2));
    border-left-color: var(--sbg-red);
    animation: newPulse 2.2s ease-in-out infinite;
  }
  .signed-in-bar .sib-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
  .signed-in-bar .sib-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--text-faint);
  }
  .signed-in-bar .sib-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .signed-in-bar .sib-avatar.empty::before { content: '?'; font-size: 18px; }
  .signed-in-bar .sib-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .signed-in-bar .sib-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .signed-in-bar.not-signed-in .sib-label { color: var(--sbg-red); }
  .signed-in-bar .sib-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
  }
  .signed-in-bar.not-signed-in .sib-name {
    color: var(--sbg-red);
  }
  .signed-in-bar .sib-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .signed-in-bar .sib-role {
    padding: 3px 8px;
    background: var(--sbg-navy);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    line-height: 1.3;
  }
  .signed-in-bar .sib-role.is-lead {
    background: var(--sbg-red);
  }
  .signed-in-bar .sib-role:empty { display: none; }

  /* Messages alert tab */
  .alert-tab.tab-messages {
    background: rgba(14,91,156,0.08);
    border-color: #0e5b9c;
    color: #0e5b9c;
  }
  .alert-tab.tab-messages::before {
    content: '📩';
    font-size: 11px;
  }
  .alert-tab.tab-messages:hover { background: rgba(14,91,156,0.15); }
  .alert-tab.tab-messages.active { box-shadow: 0 0 0 3px rgba(14,91,156,0.3); }
  .alert-tab.tab-messages:not(.active) .alert-count {
    animation: newPulse 1.8s ease-in-out infinite;
  }
  .alert-panel.panel-messages { border-color: #0e5b9c; }
  .alert-panel.panel-messages .alert-panel-title { color: #0e5b9c; }

  /* Receipts tab — green, positive confirmation */
  .alert-tab.tab-receipts {
    background: rgba(46,125,82,0.08);
    border-color: var(--green);
    color: var(--green);
  }
  .alert-tab.tab-receipts::before {
    content: '✉✓';
    font-size: 11px;
  }
  .alert-tab.tab-receipts:hover { background: rgba(46,125,82,0.18); }
  .alert-tab.tab-receipts .alert-count { background: var(--green); color: #fff; }

  /* Rejected completions tab — red, pulsing */
  .alert-tab.tab-rejected {
    background: rgba(200,50,43,0.1);
    border-color: var(--sbg-red);
    color: var(--sbg-red);
    animation: newPulse 2.2s ease-in-out infinite;
  }
  .alert-tab.tab-rejected:hover { background: rgba(200,50,43,0.2); }
  .alert-tab.tab-rejected.active { box-shadow: 0 0 0 3px rgba(200,50,43,0.3); }
  .alert-tab.tab-rejected .alert-count { background: var(--sbg-red); color: #fff; }
  .alert-panel.panel-rejected { border-color: var(--sbg-red); }
  .alert-panel.panel-rejected .alert-panel-title { color: var(--sbg-red); }

  /* At Risk tab — gold/amber, non-pulsing (overdue tab handles the urgent pulse) */
  .alert-tab.tab-atrisk {
    background: rgba(192,127,0,0.12);
    border-color: #c07f00;
    color: #8a5a00;
  }
  .alert-tab.tab-atrisk:hover { background: rgba(192,127,0,0.22); }
  .alert-tab.tab-atrisk.active { box-shadow: 0 0 0 3px rgba(192,127,0,0.3); }
  .alert-tab.tab-atrisk .alert-count { background: #c07f00; color: #fff; }
  .alert-panel.panel-atrisk { border-color: #c07f00; }
  .alert-panel.panel-atrisk .alert-panel-title { color: #8a5a00; }

  /* In Progress tab — cyan, neutral status indicator (informational not urgent) */
  .alert-tab.tab-inprogress {
    background: rgba(26,158,201,0.12);
    border-color: #1a9ec9;
    color: #146a87;
  }
  .alert-tab.tab-inprogress:hover { background: rgba(26,158,201,0.22); }
  .alert-tab.tab-inprogress.active { box-shadow: 0 0 0 3px rgba(26,158,201,0.3); }
  .alert-tab.tab-inprogress .alert-count { background: #1a9ec9; color: #fff; }

  /* Blocked tab — red-tinted, signals stuck/RFI work */
  .alert-tab.tab-blocked {
    background: rgba(200,50,43,0.1);
    border-color: var(--sbg-red);
    color: var(--sbg-red);
  }
  .alert-tab.tab-blocked:hover { background: rgba(200,50,43,0.18); }
  .alert-tab.tab-blocked.active { box-shadow: 0 0 0 3px rgba(200,50,43,0.3); }
  .alert-tab.tab-blocked .alert-count { background: var(--sbg-red); color: #fff; }

  /* Late Start tab — red-bordered with the clock icon, pulses to draw eye
     because being past Start By with no progress is a planning failure
     that wants attention. Sits next to At Risk so the two read as
     complementary "needs your attention now" alerts. */
  .alert-tab.tab-latestart {
    background: rgba(200,50,43,0.1);
    border-color: var(--sbg-red);
    color: var(--sbg-red);
    animation: newPulse 2.4s ease-in-out infinite;
  }
  .alert-tab.tab-latestart:hover { background: rgba(200,50,43,0.18); }
  .alert-tab.tab-latestart.active { box-shadow: 0 0 0 3px rgba(200,50,43,0.3); }
  .alert-tab.tab-latestart .alert-count { background: var(--sbg-red); color: #fff; }

  /* Flag badges for the new tiers */
  .ai-flag.badge-status-inprogress {
    background: rgba(26,158,201,0.15);
    color: #146a87;
    border: 1px solid rgba(26,158,201,0.4);
  }
  .ai-flag.badge-status-blocked {
    background: rgba(200,50,43,0.15);
    color: var(--sbg-red);
    border: 1px solid rgba(200,50,43,0.4);
  }
  .ai-flag.badge-atrisk {
    background: #c07f00;
    color: #fff;
    border-color: #c07f00;
    font-weight: 800;
    letter-spacing: 0.06em;
  }
  /* Late Start badge — red filled with clock, sharp visual signal that
     this task slipped past its Start By and still hasn't moved off
     Not Started. */
  .ai-flag.badge-latestart {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  /* Rejection alert flag — sits in the .ai-flag slot like other tier flags */
  .ai-flag.badge-rejected {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
    font-weight: 800;
    letter-spacing: 0.06em;
    animation: ai-rejected-flash 2.4s ease-in-out infinite;
  }
  @keyframes ai-rejected-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0.5); }
    50%      { box-shadow: 0 0 0 3px rgba(200,50,43,0); }
  }
  /* Whole row distinction when rejected — subtle red wash + left border */
  .alert-item.alert-item-rejected {
    background: linear-gradient(90deg, rgba(200,50,43,0.06) 0%, transparent 60%);
    border-left: 3px solid var(--sbg-red);
  }

  /* ===== Rejection detail block (inside expanded Rejected alert dropdown) ===== */
  .ai-rejection-block {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fff5f4;
    border: 1px solid rgba(200,50,43,0.3);
    border-left: 4px solid var(--sbg-red);
    border-radius: 4px;
  }
  .ai-rj-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .ai-rj-reason-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sbg-red);
    color: #fff;
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .ai-rj-reason-icon { font-size: 13px; }
  .ai-rj-reason-label { letter-spacing: 0.04em; }
  .ai-rj-who {
    font-size: 12px;
    color: #6e1f1a;
    flex: 1;
  }
  .ai-rj-who strong { color: var(--sbg-red); }
  .ai-rj-when {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
  }
  .ai-rj-desc {
    font-size: 12px;
    color: #7a2c25;
    font-style: italic;
    margin: 4px 0 8px;
  }
  .ai-rj-notes {
    background: #fff;
    border: 1px solid rgba(200,50,43,0.15);
    border-radius: 3px;
    padding: 8px 10px;
    margin-top: 6px;
  }
  .ai-rj-notes-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sbg-red);
    margin-bottom: 4px;
  }
  .ai-rj-notes-body {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .ai-rj-notes-empty {
    font-size: 11.5px;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 6px;
  }
  .ai-rj-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  /* Primary action — "Open & [verb]" button. Filled style so it reads as
     the recommended action; the Acknowledge button next to it becomes the
     secondary path. Each reason gets its own subtle accent. */
  .ai-rj-edit-btn {
    background: var(--sbg-navy);
    color: #fff;
    border: 1px solid var(--sbg-navy);
    border-radius: 3px;
    padding: 6px 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.12s;
    box-shadow: 0 1px 3px rgba(10,37,64,0.2);
  }
  .ai-rj-edit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(10,37,64,0.3);
  }
  .ai-rj-edit-btn-resubmit:hover   { background: #1a3a5c; border-color: #1a3a5c; }
  .ai-rj-edit-btn-reverify         { background: #6e4eb8; border-color: #6e4eb8; }
  .ai-rj-edit-btn-reverify:hover   { background: #5a3d99; border-color: #5a3d99; }
  .ai-rj-edit-btn-incomplete       { background: #c07f00; border-color: #c07f00; }
  .ai-rj-edit-btn-incomplete:hover { background: #a06900; border-color: #a06900; }
  .ai-rj-edit-btn-startover        { background: #9c2520; border-color: #9c2520; }
  .ai-rj-edit-btn-startover:hover  { background: #7e1d19; border-color: #7e1d19; }
  .ai-rj-edit-btn-meeting          { background: #1a9ec9; border-color: #1a9ec9; }
  .ai-rj-edit-btn-meeting:hover    { background: #1380a3; border-color: #1380a3; }
  /* When a primary edit button is alongside the Acknowledge, downgrade Ack
     to a secondary outlined treatment so the edit action visually wins. */
  .ai-rj-actions .ai-rj-edit-btn ~ .ai-rj-ack-btn {
    background: transparent;
    color: var(--sbg-red);
    border: 1px solid var(--sbg-red);
  }
  .ai-rj-actions .ai-rj-edit-btn ~ .ai-rj-ack-btn:hover {
    background: var(--sbg-red);
    color: #fff;
  }
  .ai-rj-ack-btn {
    background: var(--sbg-red);
    color: #fff;
    border: 1px solid var(--sbg-red);
    border-radius: 3px;
    padding: 6px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.1s;
  }
  .ai-rj-ack-btn:hover {
    background: #9c2520;
    transform: translateY(-1px);
  }
  .ai-rj-acked {
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    background: rgba(46,125,82,0.1);
    border: 1px solid rgba(46,125,82,0.25);
    padding: 4px 10px;
    border-radius: 3px;
  }
  /* Highlight pulse on the in-modal rejection notice when the user lands
     there via "Open & [verb]" — flashes briefly so the eye lands on the
     reason + notes immediately. */
  .task-modal-rejection-notice.tmrn-highlight {
    animation: tmrn-highlight-pulse 2.2s ease-out;
  }
  @keyframes tmrn-highlight-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200,50,43,0.7); }
    25%  { box-shadow: 0 0 0 8px rgba(200,50,43,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(200,50,43,0); }
  }

  /* Project header — Messages button */
  .pv-messages-btn {
    position: relative;
  }
  .pv-messages-btn .pvm-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: newPulse 1.6s ease-in-out infinite;
  }

  /* Message Board Modal — composer */
  .msg-current-user {
    padding: 8px 12px;
    background: var(--surface-2);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 12px;
    border-left: 3px solid var(--sbg-navy);
  }
  .msg-current-user strong { color: var(--text); }
  .msg-composer {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
  }
  .msg-composer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .msg-composer-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin: 0;
  }
  .msg-recipient-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
  }
  .msg-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
  }
  .msg-recipient-chip:hover { background: var(--surface); }
  .msg-recipient-chip.selected {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }
  .msg-recipient-chip.broadcast-selected {
    background: #e85d04;
    color: #fff;
    border-color: #e85d04;
  }
  .msg-composer-body {
    width: 100%;
    min-height: 70px;
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    resize: vertical;
  }
  .msg-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 10px;
  }
  .msg-composer-hint {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }

  /* Message list */
  .msg-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sbg-navy);
  }
  .msg-filter-toggles {
    display: flex;
    gap: 8px;
  }
  .msg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
  }
  .msg-filter-chip input { margin: 0; }
  .msg-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    padding: 6px;
  }
  .msg-list-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 13px;
  }
  .msg-item {
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 3px;
  }
  .msg-item:last-child { margin-bottom: 0; }
  .msg-item.msg-broadcast {
    border-left-color: #e85d04;
    background: rgba(232,93,4,0.04);
  }
  .msg-item.msg-to-me {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.04);
  }
  .msg-item.msg-unread {
    box-shadow: 0 0 0 2px var(--sbg-red);
  }
  .msg-item.msg-receipt {
    border-left-color: var(--green);
    background: rgba(46,125,82,0.05);
    opacity: 0.9;
  }
  .msg-item.msg-from-me {
    border-left-color: var(--sbg-navy);
    background: rgba(10,37,64,0.04);
  }
  .msg-item.msg-modification {
    border-left-color: #e85d04;
    background: rgba(232,93,4,0.06);
  }
  .msg-item.msg-modification .msg-from::before {
    content: '🔧 ';
    font-size: 13px;
  }
  .msg-item.msg-rejection {
    border-left-color: var(--sbg-red);
    border-left-width: 4px;
    background: rgba(200,50,43,0.08);
    box-shadow: 0 0 0 1px var(--sbg-red);
  }
  .msg-item.msg-rejection .msg-from::before {
    content: '✗ ';
    color: var(--sbg-red);
    font-weight: 800;
  }
  .msg-item.msg-rejection .msg-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    line-height: 1.55;
    background: rgba(255,255,255,0.6);
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid rgba(200,50,43,0.3);
    max-height: 400px;
    overflow-y: auto;
  }
  /* Rejection messages — red, urgent, with ✗ prefix */
  .msg-item.msg-rejection {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.08);
    box-shadow: 0 0 0 1px rgba(200,50,43,0.2);
  }
  .msg-item.msg-rejection.msg-unread {
    box-shadow: 0 0 0 2px var(--sbg-red), 0 0 12px rgba(200,50,43,0.3);
    animation: newPulse 1.8s ease-in-out infinite;
  }
  .msg-item.msg-rejection .msg-from::before {
    content: '✗ ';
    font-size: 14px;
    color: var(--sbg-red);
    font-weight: 800;
  }
  .msg-item.msg-rejection .msg-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    line-height: 1.55;
    background: rgba(255,255,255,0.6);
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid rgba(200,50,43,0.3);
    max-height: 400px;
    overflow-y: auto;
  }
  .msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
  }
  .msg-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
  }
  .msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .msg-from {
    font-weight: 700;
    color: var(--text);
  }
  .msg-to {
    color: var(--text-dim);
    font-size: 11px;
  }
  .msg-to-chips {
    display: inline-flex;
    gap: 3px;
    flex-wrap: wrap;
  }
  .msg-to-chip {
    display: inline-block;
    padding: 1px 5px;
    background: var(--surface-3);
    border-radius: 2px;
    font-size: 10px;
    color: var(--text-2);
  }
  .msg-to-chip.broadcast { background: #e85d04; color: #fff; }
  .msg-to-chip.me-tag { background: var(--sbg-red); color: #fff; font-weight: 700; }
  .msg-time {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
  }
  .msg-body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  /* Modification messages get monospace treatment for the structured diff */
  .msg-item.msg-modification .msg-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    line-height: 1.55;
    background: rgba(255,255,255,0.5);
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid rgba(232,93,4,0.25);
    max-height: 400px;
    overflow-y: auto;
  }

  /* ===== Completion Rejection Modal & indicators ===== */
  .btn-danger {
    background: var(--sbg-red) !important;
    color: #fff !important;
    border-color: var(--sbg-red) !important;
  }
  .btn-danger:hover:not(:disabled) {
    background: #a5291f !important;
    border-color: #a5291f !important;
  }
  .btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .reject-task-context {
    padding: 10px 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--sbg-red);
    border-radius: 3px;
    font-size: 13px;
  }
  .reject-task-context .rtc-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    display: block;
    margin-bottom: 3px;
  }
  .reject-task-context .rtc-title {
    font-weight: 700;
    color: var(--text);
  }
  .reject-task-context .rtc-meta {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .reject-reason-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .reject-reason-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
    font-family: inherit;
  }
  .reject-reason-btn:hover {
    background: var(--surface-2);
    border-color: var(--sbg-red);
    transform: translateY(-1px);
  }
  .reject-reason-btn.selected {
    background: rgba(200,50,43,0.08);
    border-color: var(--sbg-red);
    box-shadow: inset 0 0 0 1px var(--sbg-red);
  }
  .reject-reason-btn .rrb-icon {
    font-size: 18px;
  }
  .reject-reason-btn .rrb-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
  }
  .reject-reason-btn.selected .rrb-label {
    color: var(--sbg-red);
  }
  .reject-reason-btn .rrb-desc {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.3;
  }

  /* Rejected state on task cards */
  .task-card.completion-rejected {
    box-shadow: inset 0 0 0 2px var(--sbg-red);
  }
  .task-signoff-footer.rejected {
    background: rgba(200,50,43,0.12);
    color: var(--sbg-red);
    border-color: var(--sbg-red);
    animation: newPulse 1.6s ease-in-out infinite;
  }
  .task-signoff-footer.rejected strong {
    font-weight: 800;
  }
  .rejected-reason-chip {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 4px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
  }
  .task-modal-rejection-notice {
    margin: 14px 0;
    padding: 12px;
    background: rgba(200,50,43,0.08);
    border: 2px solid var(--sbg-red);
    border-radius: 4px;
  }
  .task-modal-rejection-notice .tmrn-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sbg-red);
    margin-bottom: 6px;
  }
  .task-modal-rejection-notice .tmrn-body {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
  }
  .task-modal-rejection-notice .tmrn-notes {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff;
    border-left: 3px solid var(--sbg-red);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    white-space: pre-wrap;
    color: var(--text);
  }
  .task-modal-rejection-notice .tmrn-acknowledge {
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .task-modal-rejection-notice .tmrn-acknowledge:hover {
    background: #a5291f;
  }
  .task-modal-rejection-notice.acknowledged {
    background: rgba(46,125,82,0.05);
    border-color: var(--green);
  }
  .task-modal-rejection-notice.acknowledged .tmrn-header {
    color: var(--green);
  }
  /* v111: Task modal Awaiting Sign-Off notice — mirrors the rejection notice
     structure but uses SBG gold for the "action needed" framing since this
     is the completion-pending-approval state, not a rejection. */
  .task-modal-signoff-notice {
    margin: 14px 0;
    padding: 12px;
    background: rgba(192, 127, 0, 0.08);
    border: 2px solid var(--sbg-gold, #c07f00);
    border-radius: 4px;
  }
  .task-modal-signoff-notice .tmsn-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sbg-gold, #c07f00);
    margin-bottom: 6px;
  }
  .task-modal-signoff-notice .tmsn-body {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
  }
  .task-modal-signoff-notice .tmsn-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .task-modal-signoff-notice .tmsn-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s;
  }
  .task-modal-signoff-notice .tmsn-btn-accept {
    background: var(--green, #2e7d52);
    color: #fff;
  }
  .task-modal-signoff-notice .tmsn-btn-accept:hover { background: #245e3f; }
  .task-modal-signoff-notice .tmsn-btn-reject {
    background: var(--sbg-red, #c8322b);
    color: #fff;
  }
  .task-modal-signoff-notice .tmsn-btn-reject:hover { background: #a5291f; }
  .task-modal-signoff-notice .tmsn-hint {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    font-style: italic;
  }
  .msg-task-ref {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    margin-top: 6px;
    background: var(--sbg-navy);
    border: 1px solid var(--sbg-navy);
    border-radius: 3px;
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
  }
  .msg-task-ref:hover {
    background: #1a3a5c;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(10,37,64,0.3);
  }
  .msg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 8px;
  }
  .msg-ack-status {
    font-size: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .msg-ack-status .ack-count { color: var(--green); }
  .msg-ack-btn {
    padding: 5px 12px;
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
  }
  .msg-ack-btn:hover { background: #a5291f; transform: translateY(-1px); }
  .msg-ack-btn.acknowledged {
    background: var(--green);
    cursor: default;
  }
  .msg-ack-btn.acknowledged:hover { transform: none; }

  /* Task modal — inline message section */
  .task-msg-section {
    margin-top: 16px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    border-left: 3px solid #0e5b9c;
  }
  .task-msg-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .task-msg-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sbg-navy);
  }
  .cal-signoff-badge {
    display: inline-block;
    margin-right: 5px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    vertical-align: middle;
  }
  .cal-signoff-badge.signed { background: var(--green); color: #fff; }
  .cal-signoff-badge.pending {
    background: var(--yellow);
    color: #000;
    animation: signoffPulse 2s ease-in-out infinite;
  }

  /* ===== Collapsible Major Sections ===== */
  .sections-controller {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 14px;
    background: linear-gradient(90deg, rgba(10,37,64,0.05) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 4px;
    flex-wrap: wrap;
  }
  .sections-controller .sc-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sbg-navy);
    margin-right: 4px;
  }
  .pv-section {
    margin-top: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(10,37,64,0.06);
    transition: box-shadow 0.18s, transform 0.18s;
    position: relative;
  }
  /* Each pv-section gets a colored left rail by category so they read as
     distinct "kinds" of information rather than a wall of identical boxes. */
  .pv-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--sbg-navy);
    z-index: 1;
  }
  .pv-section-alerts::before     { background: var(--sbg-red); }
  .pv-section-countdown::before  { background: #c07f00; }
  .pv-section-addendums::before  { background: #c07f00; }
  .pv-section-milestones::before { background: #2e7d52; }
  /* Expanded sections get a subtle elevation so they read as "lifted" */
  .pv-section:not(.collapsed) {
    box-shadow: 0 2px 6px rgba(10,37,64,0.08);
  }
  .pv-section:not(.collapsed):hover {
    box-shadow: 0 3px 10px rgba(10,37,64,0.10);
  }
  /* First pv-section in the dashboard area should not have huge top margin
     since it sits right under the project header */
  .pv-section:first-of-type {
    margin-top: 16px;
  }
  .pv-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    cursor: pointer;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    user-select: none;
    transition: background 0.15s;
  }
  /* Section-color tints for headers — subtle wash that matches the rail */
  .pv-section.pv-section-alerts > .pv-section-header {
    background: linear-gradient(to right, rgba(200,50,43,0.05) 0%, var(--surface-2) 50%);
  }
  .pv-section.pv-section-countdown > .pv-section-header,
  .pv-section.pv-section-addendums > .pv-section-header {
    background: linear-gradient(to right, rgba(192,127,0,0.05) 0%, var(--surface-2) 50%);
  }
  .pv-section.pv-section-milestones > .pv-section-header {
    background: linear-gradient(to right, rgba(46,125,82,0.05) 0%, var(--surface-2) 50%);
  }
  /* Hover stays subtle but consistent across sections */
  .pv-section-header:hover {
    background: var(--surface-3);
  }
  .pv-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sbg-navy);
  }
  .pv-section-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pv-section-summary {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pv-section-summary .ss-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    background: var(--sbg-red);
    color: #fff;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 800;
  }
  .pv-section-summary .ss-chip.ss-warn { background: #c07f00; }
  .pv-section-summary .ss-chip.ss-info { background: var(--sbg-navy); }
  .pv-section-summary .ss-chip.ss-green { background: var(--green); }
  .pv-section-summary .ss-chip.ss-cyan { background: #1a9ec9; }
  /* Grouped summary chips — "PROJECT: ... · MINE: ..." */
  .pv-section-summary .ss-scope-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .pv-section-summary .ss-scope-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--sbg-navy);
    margin-right: 2px;
  }
  .pv-section-summary .ss-scope-mine .ss-scope-label { color: var(--sbg-red); }
  .pv-section-summary .ss-scope-sep {
    display: inline-block;
    margin: 0 8px;
    color: var(--text-faint);
    font-weight: 700;
  }
  .pv-section-toggle {
    font-size: 14px;
    color: var(--text-dim);
    transition: transform 0.2s;
    display: inline-block;
    width: 14px;
    text-align: center;
  }
  .pv-section.collapsed .pv-section-toggle { transform: rotate(-90deg); }
  .pv-section-body {
    padding: 12px 14px;
    max-height: 2000px;
    transition: max-height 0.3s ease, padding 0.2s;
    overflow: hidden;
  }
  .pv-section.collapsed .pv-section-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .pv-section-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 13px;
  }
  /* Section alert states — when there's urgent content, the whole header
     tints red/gold and the rail is automatic via ::before above */
  .pv-section.has-critical > .pv-section-header {
    background: linear-gradient(to right, rgba(200,50,43,0.16) 0%, var(--surface-2) 70%);
  }
  .pv-section.has-warning > .pv-section-header {
    background: linear-gradient(to right, rgba(192,127,0,0.16) 0%, var(--surface-2) 70%);
  }
  /* When the countdown/alerts have urgent state, pulse the rail/shadow even collapsed */
  .pv-section.critical-pulse > .pv-section-header {
    animation: newPulse 1.8s ease-in-out infinite;
  }
  .pv-section.critical-pulse {
    box-shadow: 0 0 0 1px rgba(200,50,43,0.15), 0 2px 8px rgba(200,50,43,0.18);
  }
  /* Remove unused internal header of milestones-strip since section header replaces it */
  .milestones-strip {
    margin-top: 0;
    padding: 4px 0 0;
    border: none;
    background: transparent;
  }
  .milestones-strip .milestones-header { display: none; }

  /* Remove extra margin on countdown card since it's inside section body now */
  .bid-countdown-card { margin-top: 0; }

  /* ========== ADDENDUMS LOG ========== */
  .pv-section-addendums .pv-section-title { color: #c07f00; }
  .addenda-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
  }
  .addenda-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 13px;
  }
  .addenda-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid #c07f00;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
  }
  .addenda-row:hover {
    background: var(--surface-3);
    transform: translateX(2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
  }
  .addenda-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #c07f00;
    text-align: center;
    line-height: 1.1;
    align-self: center;
    border-right: 1px dashed var(--border);
    padding-right: 12px;
    letter-spacing: 0.02em;
  }
  .addenda-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .addenda-primary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .addenda-subject {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    flex: 1;
    min-width: 0;
    line-height: 1.35;
  }
  .addenda-meta-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  .addenda-bid-impact {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid;
    white-space: nowrap;
  }
  .addenda-status-select {
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 18px 2px 8px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%23556472'><path d='M0 0l5 6 5-6z'/></svg>");
    transition: transform 0.1s, box-shadow 0.1s;
    white-space: nowrap;
  }
  .addenda-status-select:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  .addenda-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }
  .addenda-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--text-2);
    letter-spacing: 0.02em;
  }
  .addenda-attachment {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(10, 37, 64, 0.08);
    color: var(--sbg-navy);
    text-decoration: none;
    letter-spacing: 0.02em;
  }
  a.addenda-attachment:hover {
    background: rgba(10, 37, 64, 0.16);
    text-decoration: underline;
  }
  .addenda-desc {
    font-size: 11.5px;
    color: var(--text-2);
    line-height: 1.5;
    background: var(--surface);
    padding: 6px 10px;
    border-radius: 3px;
    border-left: 2px solid var(--border-strong);
    font-style: italic;
    margin-top: 2px;
  }
  .addenda-actions {
    align-self: start;
    display: flex;
    gap: 4px;
  }
  .addenda-btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    cursor: pointer;
    padding: 3px 7px;
    font-size: 11px;
    border-radius: 3px;
    transition: background 0.1s, color 0.1s;
  }
  .addenda-btn-icon:hover {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
  }

  /* Header button addendum count badge — gold styling */
  .pva-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c07f00;
    color: #fff;
    border-radius: 9px;
    padding: 0 6px;
    margin-left: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    min-width: 18px;
  }

  @media (max-width: 700px) {
    .addenda-row {
      grid-template-columns: 50px 1fr;
    }
    .addenda-actions {
      grid-column: 1 / -1;
      justify-self: end;
    }
  }

  /* Alert strip + assignee-alerts-strip sit tight inside section body */
  .pv-section-body .alert-strip:empty,
  .pv-section-body .assignee-alerts-strip:not(.active) {
    margin: 0;
  }

  /* ===== Key Milestones Strip (internals — header is replaced by section header) ===== */
  .milestones-strip-inner {
    margin-top: 0;
  }
  .milestones-header-hidden {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .milestones-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sbg-navy);
  }
  .milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  .milestone-card {
    position: relative;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sbg-navy);
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .milestone-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .milestone-card .mc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .milestone-card .mc-icon {
    font-size: 16px;
  }
  .milestone-card .mc-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    line-height: 1.2;
  }
  .milestone-card .mc-moment {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
    font-weight: 500;
  }
  .milestone-card .mc-countdown {
    display: flex;
    gap: 4px;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }
  .milestone-card .mc-countdown .mc-num {
    font-variant-numeric: tabular-nums;
  }
  .milestone-card .mc-countdown .mc-unit {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-right: 3px;
  }

  /* Missing state */
  .milestone-card.missing {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.05);
    border-color: var(--sbg-red);
  }
  .milestone-card.missing .mc-missing-alert {
    display: inline-block;
    padding: 3px 8px;
    background: var(--sbg-red);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 2px;
    animation: newPulse 1.6s ease-in-out infinite;
  }
  /* Past state */
  .milestone-card.past {
    border-left-color: #6b1d18;
    background: rgba(107,29,24,0.08);
    opacity: 0.85;
  }
  .milestone-card.past .mc-countdown { color: #6b1d18; }
  /* Imminent state */
  .milestone-card.imminent {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.08);
    animation: milestonePulse 2s ease-in-out infinite;
  }
  @keyframes milestonePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(200,50,43,0); }
  }
  /* Warning state (<3 days) */
  .milestone-card.warning {
    border-left-color: #c07f00;
    background: rgba(192,127,0,0.05);
  }

  /* ===== Milestones Modal Row ===== */
  .milestone-edit-row {
    display: grid;
    grid-template-columns: 30px 1.5fr 1fr 1fr 1.5fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 6px;
  }
  .milestone-edit-row .mer-icon {
    font-size: 18px;
    text-align: center;
  }
  .milestone-edit-row .mer-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
  }
  .milestone-edit-row input, .milestone-edit-row select {
    padding: 5px 7px;
    font-size: 12px;
  }
  .milestone-edit-row .mer-preview {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-align: right;
  }
  .milestone-edit-row .mer-preview.missing { color: var(--sbg-red); }
  .milestone-edit-row .mer-preview.past { color: #6b1d18; }
  /* Per-milestone calendar invite button — small icon button next to the date preview */
  .btn-icon-cal {
    background: transparent;
    border: 1px solid #107c41;
    border-radius: 4px;
    padding: 4px 7px;
    font-size: 14px;
    cursor: pointer;
    color: #107c41;
    transition: all 0.1s;
    line-height: 1;
  }
  .btn-icon-cal:hover:not(:disabled) {
    background: #107c41;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(16,124,65,0.25);
  }
  .btn-icon-cal:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--text-faint);
  }

  /* Milestone Type list row — 5 cols: icon, name, color, days-before, actions */
  .mtype-row {
    display: grid;
    grid-template-columns: 40px 1fr 50px 80px auto;
    gap: 8px;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .mtype-row.mtype-header-row {
    background: var(--surface-2);
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-strong);
  }
  .mtype-row input[type="text"] { padding: 5px 7px; font-size: 12px; }
  .mtype-row input[type="color"] { height: 24px; padding: 1px; }
  .mtype-row input[type="number"] { padding: 5px 6px; font-size: 12px; text-align: center; font-family: 'JetBrains Mono', monospace; }
  .mtype-row .mtype-icon-input { text-align: center; }
  .mtype-row .mtype-days-input { color: var(--sbg-navy); font-weight: 700; }

  /* ========== DEFAULT OFFSETS OPT-IN PANEL (in milestones modal) ========== */
  .default-offsets-panel {
    background: linear-gradient(135deg, rgba(10,37,64,0.04) 0%, rgba(10,37,64,0.08) 100%);
    border: 1px solid rgba(10,37,64,0.2);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .dop-header { margin-bottom: 8px; }
  .dop-toggle-label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0 !important;
    font-weight: 400 !important;
  }
  .dop-toggle-label input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .dop-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
  }
  .dop-toggle-text strong {
    font-size: 13px;
    color: var(--sbg-navy);
    letter-spacing: 0.02em;
  }
  .dop-hint {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.5;
    font-weight: normal;
  }
  .dop-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(10,37,64,0.2);
  }
  .dop-apply-btn {
    background: var(--sbg-navy) !important;
    color: #fff !important;
    border-color: var(--sbg-navy) !important;
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
  }
  .dop-apply-btn:hover {
    background: #1a3a5c !important;
    transform: translateY(-1px);
  }
  .dop-auto-status {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }

  /* Auto-date / default-available chips on milestone editor rows */
  .m-auto-tag {
    display: inline-block;
    background: var(--sbg-navy);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.02em;
  }
  .m-default-available {
    display: inline-block;
    background: rgba(192,127,0,0.15);
    color: #c07f00;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.02em;
  }
  .m-default-disabled {
    display: inline-block;
    background: var(--surface-3);
    color: var(--text-faint);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.02em;
  }
  .milestone-edit-row.has-auto-date {
    background: rgba(10,37,64,0.03);
    border-left: 2px solid var(--sbg-navy);
  }
  .task-card .priority-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 4px 0 0 4px; }
  .priority-bar.high { background: var(--red); }
  .priority-bar.medium { background: var(--yellow); }
  .priority-bar.low { background: var(--text-faint); }
  /* Critical priority bar — bright red, slightly thicker for emphasis */
  .priority-bar.critical {
    background: var(--sbg-red);
    width: 4px;
    box-shadow: 0 0 6px rgba(200,50,43,0.5);
  }

  /* ========== CRITICAL BUTTON in Edit Task modal ==========
     🔥 outline when off, filled red when on. Toggles task.critical. */
  .critical-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 2px dashed var(--sbg-red);
    border-radius: 6px;
    color: var(--sbg-red);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  }
  .critical-btn:hover {
    background: rgba(200,50,43,0.06);
    border-color: var(--sbg-red);
  }
  .critical-btn:active {
    transform: scale(0.98);
  }
  .critical-btn .critical-btn-icon {
    font-size: 16px;
    filter: grayscale(0.6);
    opacity: 0.7;
    transition: filter 0.15s, opacity 0.15s;
  }
  .critical-btn.critical-btn-active {
    background: var(--sbg-red);
    border-style: solid;
    border-color: var(--sbg-red);
    color: #fff;
    box-shadow: 0 2px 6px rgba(200,50,43,0.3);
  }
  .critical-btn.critical-btn-active:hover {
    background: #a52822;
    border-color: #a52822;
  }
  .critical-btn.critical-btn-active .critical-btn-icon {
    filter: none;
    opacity: 1;
  }

  /* ========== TRAINING BUTTON in Edit Task modal (v119) ==========
     🎓 outline when off, filled gold when on. Toggles task.isTraining.
     Sits next to the Critical button so both signals share the same
     "importance flag" visual space. Uses SBG gold so it doesn't compete
     with the red Critical treatment. */
  .training-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-left: 8px;
    background: transparent;
    border: 2px dashed var(--sbg-gold, #c07f00);
    border-radius: 6px;
    color: var(--sbg-gold, #c07f00);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  }
  .training-btn:hover {
    background: rgba(192, 127, 0, 0.06);
    border-color: var(--sbg-gold, #c07f00);
  }
  .training-btn:active {
    transform: scale(0.98);
  }
  .training-btn .training-btn-icon {
    font-size: 16px;
    filter: grayscale(0.6);
    opacity: 0.7;
    transition: filter 0.15s, opacity 0.15s;
  }
  .training-btn.training-btn-active {
    background: var(--sbg-gold, #c07f00);
    border-style: solid;
    border-color: var(--sbg-gold, #c07f00);
    color: #fff;
    box-shadow: 0 2px 6px rgba(192, 127, 0, 0.3);
  }
  .training-btn.training-btn-active:hover {
    background: #a06a00;
    border-color: #a06a00;
  }
  .training-btn.training-btn-active .training-btn-icon {
    filter: none;
    opacity: 1;
  }

  /* ========== TRAINING CHIP on cards (v119) ========== */
  .training-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    background: var(--sbg-gold, #c07f00);
    color: #fff;
    border: 1px solid var(--sbg-gold, #c07f00);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 2px rgba(192, 127, 0, 0.25);
  }
  .task-card.is-overdue .training-chip {
    background: rgba(255,255,255,0.95);
    color: var(--sbg-gold, #c07f00);
    border-color: rgba(255,255,255,0.9);
  }

  /* v119.1: Compact training chip — a smaller inline variant used in
     dense list views (Home Today, Look Ahead, Alerts, Workload drill,
     Timeline, Board table). Same gold treatment; just short "🎓"
     glyph with a tight border so it fits alongside other title chips. */
  .training-chip-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--sbg-gold, #c07f00);
    color: #fff;
    border: 1px solid var(--sbg-gold, #c07f00);
    border-radius: 3px;
    font-size: 10px;
    line-height: 1;
    margin: 0 4px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(192, 127, 0, 0.25);
    flex-shrink: 0;
    cursor: help;
  }

  /* ========== CRITICAL CHIP on cards ========== */
  .critical-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    background: var(--sbg-red);
    color: #fff;
    border: 1px solid var(--sbg-red);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 2px rgba(200,50,43,0.25);
  }
  .task-card.is-overdue .critical-chip {
    background: rgba(255,255,255,0.95);
    color: var(--sbg-red);
    border-color: rgba(255,255,255,0.9);
  }

  /* ========== CRITICAL ONLY filter pill in workspace toolbar ========== */
  .critical-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    background: transparent;
    border: 1.5px dashed var(--sbg-red);
    border-radius: 16px;
    color: var(--sbg-red);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .critical-filter-btn:hover {
    background: rgba(200,50,43,0.06);
  }
  .critical-filter-btn .critical-filter-icon {
    font-size: 14px;
    filter: grayscale(0.4);
    opacity: 0.85;
  }
  .critical-filter-btn .critical-filter-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    background: rgba(200,50,43,0.15);
    color: var(--sbg-red);
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
  }
  .critical-filter-btn.active {
    background: var(--sbg-red);
    border-style: solid;
    color: #fff;
    box-shadow: 0 2px 6px rgba(200,50,43,0.3);
  }
  .critical-filter-btn.active .critical-filter-icon {
    filter: none;
    opacity: 1;
  }
  .critical-filter-btn.active .critical-filter-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
  }

  /* ========== SAVED FILTER VIEWS — toolbar dropdown ========== */
  .saved-views-wrap {
    position: relative;
    display: inline-block;
  }
  .saved-views-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
  }
  .saved-views-btn:hover {
    background: var(--surface-2);
    border-color: var(--sbg-navy);
  }
  .saved-views-btn.has-active-view {
    background: rgba(10,37,64,0.06);
    border-color: var(--sbg-navy);
    color: var(--sbg-navy);
    font-weight: 700;
  }
  .saved-views-btn .sv-btn-icon {
    font-size: 13px;
  }
  .saved-views-btn .sv-btn-label {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .saved-views-btn .sv-btn-caret {
    font-size: 10px;
    color: var(--text-dim);
  }
  .saved-views-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 280px;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(10,37,64,0.18);
    padding: 6px;
  }
  .sv-empty {
    padding: 14px 12px;
    text-align: center;
  }
  .sv-empty-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
  }
  .sv-empty-msg {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .sv-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
  }
  .sv-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-radius: 4px;
    transition: background 0.1s;
  }
  .sv-row:hover {
    background: rgba(10,37,64,0.04);
  }
  .sv-row.active {
    background: rgba(10,37,64,0.08);
    border: 1px solid var(--sbg-navy);
  }
  .sv-row-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
  }
  .sv-row-icon {
    font-size: 15px;
    flex-shrink: 0;
  }
  .sv-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sv-preset-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 800;
    background: var(--surface-3);
    color: var(--text-dim);
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
  .sv-active-dot {
    color: var(--sbg-navy);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
  }
  .sv-row-delete {
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 18px;
    line-height: 1;
    width: 28px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
  }
  .sv-row-delete:hover {
    background: rgba(200,50,43,0.12);
    color: var(--sbg-red);
  }
  .sv-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
  }
  .sv-save-btn {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: var(--sbg-navy);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
  }
  .sv-save-btn:hover {
    background: #143557;
  }

  /* ========== SAVE VIEW MODAL — icon picker + snapshot ========== */
  .sv-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .sv-icon-option {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, transform 0.1s;
  }
  .sv-icon-option:hover {
    background: rgba(10,37,64,0.06);
    border-color: var(--sbg-navy);
  }
  .sv-icon-option.selected {
    background: var(--sbg-navy);
    border-color: var(--sbg-navy);
    transform: scale(1.05);
  }
  .sv-current-snapshot {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .sv-snap-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .sv-snap-line {
    font-size: 12px;
    color: var(--text);
    padding: 1px 0;
    font-family: 'Inter', sans-serif;
  }
  .sv-snap-key {
    display: inline-block;
    min-width: 110px;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 11.5px;
  }

  /* ========== TABLE CELL — priority-tag.critical ========== */
  .priority-tag.critical {
    display: inline-block;
    background: var(--sbg-red);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ========== LOOK AHEAD priority class ========== */
  .la-task-row.la-priority-critical .la-task-priority-bar {
    background: var(--sbg-red);
    width: 4px;
    box-shadow: 0 0 4px rgba(200,50,43,0.4);
  }
  .la-task-row.la-priority-normal .la-task-priority-bar {
    background: var(--text-faint);
  }

  /* ========== WORKLOAD MODAL — critical/normal section rails ========== */
  .tw-priority-section-critical { border-left: 3px solid var(--sbg-red); padding-left: 9px; }
  .tw-priority-section-normal { border-left: 3px solid var(--text-faint); padding-left: 9px; }

  .task-card .csi-code {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--sbg-red); background: rgba(200, 50, 43, 0.08);
    padding: 2px 6px; border-radius: 3px; display: inline-block; font-weight: 600;
  }
  .task-card-top { display:flex; align-items:center; gap:6px; margin-left:7px; margin-bottom:4px; flex-wrap: wrap; }
  .task-card .task-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding-left: 7px; line-height: 1.35; color: var(--text); }
  .task-card .task-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-dim); padding-left: 7px; }
  .due-date { font-family: 'JetBrains Mono', monospace; }
  .due-date.overdue { color: var(--red); font-weight: 700; }
  .due-date.soon { color: var(--yellow); font-weight: 600; }
  .assignee { display: inline-flex; align-items: center; gap: 5px; }
  .avatar {
    width: 20px; height: 20px; border-radius: 50%;
    color: #fff; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .day-offset {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    background: var(--surface-3);
    color: var(--text-dim);
    padding: 2px 5px;
    border-radius: 3px;
  }

  /* Ball in Court indicator */
  .bic-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
  }
  .bic-chip::before { content: '🏀'; font-size: 10px; }
  /* Color-based classes (from master list) */
  .bic-chip.bic-color-red { background: rgba(200,50,43,0.1); color: var(--sbg-red); border-color: var(--sbg-red); }
  .bic-chip.bic-color-blue { background: rgba(37,99,168,0.1); color: var(--blue); border-color: var(--blue); }
  .bic-chip.bic-color-yellow { background: rgba(212,160,23,0.12); color: #8a6a00; border-color: var(--yellow); }
  .bic-chip.bic-color-purple { background: rgba(123,67,151,0.1); color: var(--purple); border-color: var(--purple); }
  .bic-chip.bic-color-green { background: rgba(46,125,82,0.1); color: var(--green); border-color: var(--green); }
  .bic-chip.bic-color-gray { background: var(--surface-3); color: var(--text-dim); border-color: var(--border-strong); }
  /* Legacy name-based fallbacks */
  .bic-chip.bic-Lead { background: rgba(200,50,43,0.1); color: var(--sbg-red); border-color: var(--sbg-red); }
  .bic-chip.bic-Support { background: rgba(37,99,168,0.1); color: var(--blue); border-color: var(--blue); }
  .bic-chip.bic-Owner, .bic-chip.bic-Architect, .bic-chip.bic-Engineer {
    background: rgba(212,160,23,0.12); color: #8a6a00; border-color: var(--yellow);
  }
  .bic-chip.bic-Subcontractor, .bic-chip.bic-Vendor {
    background: rgba(123,67,151,0.1); color: var(--purple); border-color: var(--purple);
  }
  .bic-chip.bic-GC, .bic-chip.bic-Internal, .bic-chip.bic-Other {
    background: var(--surface-3); color: var(--text-dim); border-color: var(--border-strong);
  }

  /* ========== SOURCE BADGE — visible on board cards + table rows ========== */
  .source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px 2px 3px;
    border-radius: 3px;
    background: rgba(10, 37, 64, 0.06);
    border: 1px solid rgba(10, 37, 64, 0.15);
    font-size: 10px;
    font-weight: 600;
    color: var(--sbg-navy);
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
  }
  .source-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
  }
  .source-badge-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10,37,64,0.15);
    flex-shrink: 0;
  }
  .source-badge-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .source-badge-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .task-meta-source { line-height: 1.2; }
  .task-card.is-overdue .source-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .task-card.is-overdue .source-badge-img {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
  }
  /* Table view variant — slightly tighter */
  .task-table .source-badge {
    font-size: 11px;
    padding: 2px 8px 2px 3px;
  }

  /* ========== SOURCE MANAGER ROWS (in source modal) ========== */
  .src-row {
    display: grid;
    grid-template-columns: 30px 200px 1fr 36px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .src-row:last-child { border-bottom: none; }
  .src-row:hover { background: var(--surface-2); }
  .src-row.src-header-row {
    background: var(--surface-2);
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-strong);
  }
  .src-row-num {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 700;
  }
  .src-icon-cell {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .src-icon-preview {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
  }
  .src-preview-icon {
    font-size: 22px;
    line-height: 1;
  }
  .src-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .src-icon-input {
    width: 36px !important;
    text-align: center;
    font-size: 16px !important;
    padding: 4px !important;
  }
  .src-photo-actions {
    display: flex;
    gap: 2px;
  }
  .src-photo-btn,
  .src-photo-clear-btn {
    padding: 4px 7px !important;
    font-size: 11px !important;
    min-width: auto !important;
  }
  .src-photo-clear-btn {
    color: var(--red) !important;
  }
  .src-name-input {
    padding: 6px 8px !important;
    font-size: 12px !important;
    font-weight: 600;
  }

  .task-card.is-overdue .bic-chip {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.5) !important;
  }

  /* Support member chip */
  .support-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .support-chip .support-avatar {
    width: 16px; height: 16px; border-radius: 50%;
    color: #fff; font-size: 8px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--surface);
    overflow: hidden;
  }
  .support-chip .support-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .support-chip .support-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 2px;
  }
  .task-card.is-overdue .support-chip,
  .task-card.is-overdue .support-chip .support-label {
    color: rgba(255,255,255,0.9) !important;
  }

  .add-task-btn {
    background: transparent; border: 1px dashed var(--border-strong); color: var(--text-dim);
    padding: 8px; border-radius: 4px; cursor: pointer; font-family: inherit;
    font-size: 12px; transition: all 0.12s ease; width: 100%; margin-top: 7px;
  }
  .add-task-btn:hover { border-color: var(--sbg-red); color: var(--sbg-red); border-style: solid; background: rgba(200,50,43,0.04); }

  /* ========== STAGE OVERVIEW ========== */
  .stage-overview { display: flex; flex-direction: column; gap: 14px; }
  .stage-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; }
  .stage-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .stage-panel-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--sbg-navy); text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
  }
  .stage-panel-title .stage-count {
    font-family: 'JetBrains Mono', monospace; background: var(--surface-2);
    padding: 3px 8px; border-radius: 3px; font-size: 11px; color: var(--text-dim);
    border: 1px solid var(--border);
  }
  .stage-panel-title .stage-count .done-num { color: var(--green); font-weight: 700; }
  .stage-panel-stats { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }

  /* ========== BULK ASSIGN BUTTON ========== */
  .bulk-assign-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #2563a8 0%, #0a2540 100%);
    color: #fff;
    border: 1px solid #0a2540;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
  }
  .bulk-assign-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(10,37,64,0.25);
  }
  .bulk-assign-btn-sm {
    padding: 3px 8px;
    font-size: 10px;
    margin-left: 0;
  }

  /* ========== REASSIGN PERSON BUTTON (in team member row) ========== */
  .reassign-person-btn {
    background: linear-gradient(135deg, #c07f00 0%, #8a5a00 100%);
    color: #fff !important;
    border: 1px solid #8a5a00;
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 0.1s, box-shadow 0.15s;
  }
  .reassign-person-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(192,127,0,0.3);
    color: #fff !important;
  }

  /* ========== BULK ASSIGN MODAL STATS PANEL ========== */
  .bulk-assign-stats {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
  }
  .ba-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
  }
  .ba-stat-row:not(:last-child) { border-bottom: 1px dashed var(--border); }
  .ba-stat-label {
    color: var(--text-dim);
    font-weight: 500;
  }
  .ba-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
  }
  .stage-mini-progress { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; width: 140px; }
  .stage-mini-progress-fill { height: 100%; background: linear-gradient(90deg, var(--sbg-red), var(--green)); }
  .stage-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
  .stage-empty { color: var(--text-faint); font-size: 12px; padding: 16px; text-align: center; font-style: italic; }

  /* ========== TABLE VIEW ========== */
  .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
  .task-table { width: 100%; border-collapse: collapse; }
  /* Column-hiding controlled by grouping mode.
     Group by Stage → hide Stage col (redundant) + Offset (rarely needed). Gives Task/Notes more room.
     Group by Assignee → hide Offset only.
     All columns visible in other views (e.g. grouping=none or filtered). */
  .task-table.hide-stage th[data-col="stage"],
  .task-table.hide-stage td[data-col="stage"] { display: none; }
  .task-table.hide-offset th[data-col="offset"],
  .task-table.hide-offset td[data-col="offset"] { display: none; }
  .task-table.hide-source th[data-col="source"],
  .task-table.hide-source td[data-col="source"] { display: none; }
  /* When column(s) are hidden, let the Task and Notes columns expand to fill */
  .task-table.hide-stage .task-title-cell,
  .task-table.hide-offset .task-title-cell {
    min-width: 240px;
  }
  .task-table thead {
    background: var(--sbg-navy);
  }
  .task-table th {
    padding: 10px 12px; text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    color: #c8d3e0; font-weight: 700;
    white-space: nowrap;
  }
  .task-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
  }
  .task-table th.sortable:hover { background: rgba(255,255,255,0.06); }
  .task-table th.sort-active { background: rgba(200, 50, 43, 0.25); color: #fff; }

  /* Table mode indicator / clear-sort button */
  .table-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    font-size: 12px;
  }
  .table-mode-bar:empty { display: none; }
  .table-mode-bar .mode-label {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-dim);
    font-size: 11px;
  }
  .table-mode-bar .mode-value {
    color: var(--sbg-navy);
    font-size: 12px;
  }
  .table-mode-bar .mode-btn {
    padding: 4px 10px;
    background: var(--sbg-red);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
  }
  .table-mode-bar .mode-btn:hover { background: #b02a24; }
  .task-table tr.stage-group-header {
    cursor: default;
  }
  .task-table tr.stage-group-header td {
    background: var(--sbg-navy) !important;
    color: #fff !important;
    padding: 0 !important;
    border-top: 2px solid var(--sbg-red);
  }
  .task-table tr.stage-group-header .sgh-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 16px;
  }
  .task-table tr.stage-group-header .sgh-title {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .task-table tr.stage-group-header .sgh-icon {
    font-size: 17px;
  }
  .task-table tr.stage-group-header .sgh-name {
    color: #fff;
  }
  .task-table tr.stage-group-header .sgh-count {
    margin-left: 10px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.15);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 3px;
    text-transform: none;
    color: #fff;
  }
  .task-table tr.stage-group-header .sgh-progress {
    display: flex; align-items: center; gap: 10px;
    min-width: 180px;
  }
  .task-table tr.stage-group-header .sgh-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    min-width: 120px;
  }
  .task-table tr.stage-group-header .sgh-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sbg-red), #ff8a7f);
    transition: width 0.3s;
  }
  .task-table tr.stage-group-header .sgh-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    min-width: 42px;
    text-align: right;
  }
  /* Don't let group header rows get "hover" effect that normal rows do */
  .task-table tr.stage-group-header:hover td { background: var(--sbg-navy) !important; }
  /* Print: keep stage headers visible */
  @media print {
    .task-table tr.stage-group-header td {
      background: #0a2540 !important;
      color: #fff !important;
      -webkit-print-color-adjust: exact !important;
    }
  }
  .sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    transition: color 0.12s;
  }
  .sort-arrow.asc::after { content: '▲'; color: var(--sbg-red-light, #ff8a7f); }
  .sort-arrow.desc::after { content: '▼'; color: var(--sbg-red-light, #ff8a7f); }
  .sort-arrow:not(.asc):not(.desc)::after { content: '⇅'; }
  .task-table td {
    padding: 10px 12px; font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }
  .task-table tr { cursor: pointer; transition: filter 0.12s; }
  .task-table tr:hover { filter: brightness(0.97); }
  .task-table tr:last-child td { border-bottom: none; }
  /* Row fills by status */
  .task-table tr.row-not-started td { background: var(--fill-not-started); }
  .task-table tr.row-in-progress td { background: var(--fill-in-progress); }
  .task-table tr.row-blocked td { background: var(--fill-blocked); }
  .task-table tr.row-pending td { background: var(--fill-pending); }
  .task-table tr.row-done td { background: var(--fill-done); }
  .task-table tr.row-done td.task-title-cell { text-decoration: line-through; opacity: 0.7; }
  .task-table tr.row-done td { color: var(--text-dim); }
  .task-table tr.row-overdue td {
    background: var(--fill-overdue) !important;
    color: #fff !important;
    font-weight: 600;
  }
  .task-table tr.row-overdue td .status-pill {
    background: rgba(255,255,255,0.25); color: #fff;
  }
  .task-table tr.row-overdue td .csi-code {
    background: rgba(255,255,255,0.22) !important; color: #fff !important;
  }
  .task-table tr.row-overdue td .priority-tag { color: #fff !important; }
  .task-table tr.row-overdue td .avatar { box-shadow: 0 0 0 2px #fff; }
  .task-table tr.row-not-started td { background: var(--fill-not-started); }
  .task-table tr.row-in-progress td { background: var(--fill-in-progress); }
  .task-table tr.row-blocked td { background: var(--fill-blocked); }
  .task-table tr.row-pending td { background: var(--fill-pending); }
  .task-table tr.row-done td { background: var(--fill-done); color: var(--text-dim); text-decoration: line-through; }
  .task-table tr.row-done td .status-pill,
  .task-table tr.row-done td .csi-code,
  .task-table tr.row-done td .priority-tag,
  .task-table tr.row-done td .avatar,
  .task-table tr.row-done td .assignee { text-decoration: none; }
  .task-table tr:hover td { filter: brightness(0.97); }
  .status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 600;
    background: var(--surface-3);
  }

  /* ========== INLINE STATUS DROPDOWNS ==========
     Used in board cards + table rows to change status without opening the task modal.
     Color-coded pills matching the existing .dot palette. Sized compactly so
     the status text is legible at a glance without dominating the card/row. */
  .inline-status-select,
  .card-status-select {
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 16px 2px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 8px;
    transition: transform 0.1s, box-shadow 0.1s;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }
  .inline-status-select:hover,
  .card-status-select:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  .inline-status-select:focus,
  .card-status-select:focus {
    outline: 2px solid var(--sbg-navy);
    outline-offset: 1px;
  }
  /* Status-specific color coding (matches existing .dot palette) */
  .status-not-started {
    background-color: #e8ecef;
    color: #49566b;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%2349566b'><path d='M0 0l5 6 5-6z'/></svg>");
  }
  .status-in-progress {
    background-color: rgba(10, 37, 64, 0.12);
    color: var(--sbg-navy);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%230a2540'><path d='M0 0l5 6 5-6z'/></svg>");
  }
  .status-blocked {
    background-color: rgba(200, 50, 43, 0.15);
    color: var(--sbg-red);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%23c8322b'><path d='M0 0l5 6 5-6z'/></svg>");
  }
  .status-pending {
    background-color: rgba(123, 67, 151, 0.15);
    color: var(--purple);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%237b4397'><path d='M0 0l5 6 5-6z'/></svg>");
  }
  .status-done {
    background-color: rgba(46, 125, 82, 0.15);
    color: var(--green);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%232e7d52'><path d='M0 0l5 6 5-6z'/></svg>");
  }
  /* Table row variant — uppercase, tight */
  .inline-status-select {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 16px 3px 8px;
  }
  /* Board card variant — compact fit inside card-top meta row */
  .card-status-select {
    max-width: 120px;
    flex-shrink: 0;
  }

  /* ========== TASK MODAL PROJECT CONTEXT CHIP ==========
     Shows which project the task belongs to — prominent, at top of modal. */
  /* ===== Task Modal — Alerts Strip =====
     Sits above the navy project bar, pulses when present, hidden when no
     alert tiers apply. Loud-pill format with tone variants matching the
     Project Alerts section. */
  .task-modal-alerts-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 12px 0;
    padding: 8px 10px;
    background: rgba(200,50,43,0.06);
    border: 1px solid rgba(200,50,43,0.25);
    border-left: 4px solid var(--sbg-red);
    border-radius: 4px;
    animation: tmasPulse 2.4s ease-in-out infinite;
  }
  @keyframes tmasPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(200,50,43,0.08); }
  }
  .tmas-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid;
    line-height: 1.1;
  }
  .tmas-pill .tmas-icon { font-size: 12px; line-height: 1; }
  .tmas-pill.tmas-tone-critical {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
  }
  .tmas-pill.tmas-tone-warning {
    background: #c07f00;
    color: #fff;
    border-color: #c07f00;
  }
  .tmas-pill.tmas-tone-info {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }

  /* ===== Task Modal — Project / Task / Due bar ===== */
  .task-modal-project-chip {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 16px 0;
    background: linear-gradient(135deg, var(--sbg-navy) 0%, #1a3a5c 100%);
    border-radius: 6px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(10,37,64,0.15);
    flex-wrap: wrap;
  }
  .tmpc-thumb {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: rgba(255,255,255,0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.2);
    align-self: center;
  }
  .tmpc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .tmpc-body {
    flex: 0 1 auto;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 2px;
    align-self: center;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,0.15);
  }
  .tmpc-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .tmpc-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
  }
  .tmpc-meta {
    font-size: 11px;
    opacity: 0.75;
    color: #fff;
  }
  /* Task description — middle segment, flex-grow so it fills available space */
  .tmpc-task {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: center;
    min-width: 0;
  }
  .tmpc-task-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .tmpc-task-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    word-break: break-word;
  }
  .tmpc-task-title.is-empty {
    color: rgba(255,255,255,0.45);
    font-weight: 400;
    font-style: italic;
  }
  /* Due date — stand-out white box at the right of the bar.
     Box around it, white background, dark text — visually distinct from
     the navy bar so the eye locks onto it instantly. */
  .tmpc-due {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--sbg-navy);
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    min-width: 120px;
    flex-shrink: 0;
    gap: 1px;
    align-self: center;
  }
  .tmpc-due-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1;
  }
  .tmpc-due-date {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--sbg-navy);
    line-height: 1.1;
  }
  .tmpc-due-relative {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: lowercase;
    line-height: 1;
  }
  /* Urgency variants on the due box */
  .tmpc-due.tmpc-due-overdue {
    background: var(--sbg-red);
    border-color: var(--sbg-red);
  }
  .tmpc-due.tmpc-due-overdue .tmpc-due-label,
  .tmpc-due.tmpc-due-overdue .tmpc-due-date,
  .tmpc-due.tmpc-due-overdue .tmpc-due-relative {
    color: #fff;
  }
  .tmpc-due.tmpc-due-imminent {
    background: #fff5f4;
    border-color: var(--sbg-red);
    border-width: 2px;
  }
  .tmpc-due.tmpc-due-imminent .tmpc-due-date {
    color: var(--sbg-red);
  }
  .tmpc-due.tmpc-due-imminent .tmpc-due-relative {
    color: var(--sbg-red);
  }

  /* Hours pill — sits in the modal blue bar next to the due box. Cyan-themed
     to match the rest of the hours feature. Click scrolls to the hours field. */
  .tmpc-hours {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.35);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    align-self: center;
  }
  .tmpc-hours:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.6);
  }
  .tmpc-hours-icon {
    font-size: 14px;
    line-height: 1;
  }
  .tmpc-hours-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
  }
  .tmpc-hours-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }
  .tmpc-hours.tmpc-hours-empty {
    background: rgba(255,255,255,0.1);
    border-style: dashed;
  }
  .tmpc-hours.tmpc-hours-empty .tmpc-hours-value {
    color: rgba(255,255,255,0.55);
  }

  /* ===== STATUS PILL on project chip header (v58) ===== */
  .tmpc-status {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    padding: 6px 10px 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    align-self: center;
    position: relative;
    user-select: none;
  }
  .tmpc-status:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.7);
  }
  .tmpc-status:active { transform: scale(0.98); }
  .tmpc-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ba4b0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
    flex-shrink: 0;
  }
  /* Status-specific dot colors. status-* classes match status values. */
  .status-not-started, .tmpc-status[data-status="not-started"] .tmpc-status-dot { background: #9ba4b0; }
  .status-in-progress, .tmpc-status[data-status="in-progress"] .tmpc-status-dot { background: #c07f00; }
  .status-blocked,     .tmpc-status[data-status="blocked"]     .tmpc-status-dot { background: var(--sbg-red); }
  .status-pending,     .tmpc-status[data-status="pending"]     .tmpc-status-dot { background: #6b46c1; }
  .status-done,        .tmpc-status[data-status="done"]        .tmpc-status-dot { background: #2ca674; }
  .status-not-required, .tmpc-status[data-status="not-required"] .tmpc-status-dot { background: #6b7687; }
  /* v173: Missed Deadline — rust color for pill dot */
  .status-missed-deadline, .tmpc-status[data-status="missed-deadline"] .tmpc-status-dot { background: #a44029; }
  /* Whole pill tinted to status color for high-visibility cue */
  .tmpc-status[data-status="not-started"] { background: rgba(155,164,176,0.35); border-color: rgba(255,255,255,0.45); }
  .tmpc-status[data-status="in-progress"] { background: rgba(192,127,0,0.55); border-color: #c07f00; }
  .tmpc-status[data-status="blocked"]     { background: rgba(200,50,43,0.55); border-color: var(--sbg-red); }
  .tmpc-status[data-status="pending"]     { background: rgba(107,70,193,0.55); border-color: #6b46c1; }
  .tmpc-status[data-status="done"]        { background: rgba(44,166,116,0.55); border-color: #2ca674; }
  .tmpc-status[data-status="not-required"] { background: rgba(107,118,135,0.5); border-color: #6b7687; }
  /* v173: Missed Deadline whole-pill tint */
  .tmpc-status[data-status="missed-deadline"] { background: rgba(164,64,41,0.55); border-color: #a44029; }
  /* v161: Completion timing banner — floats to the right of the status
     pill in the task modal header. Warm-tinted for early wins, gold for
     late, grey for Not Required. Same palette as the card badges. */
  .tmpc-completion-banner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin-left: 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }
  .tmpc-completion-banner.variant-early {
    background: linear-gradient(90deg, rgba(44, 166, 116, 0.85), rgba(30, 133, 88, 0.85));
    color: #fff;
    border-color: rgba(44, 166, 116, 0.6);
  }
  .tmpc-completion-banner.variant-late {
    background: linear-gradient(90deg, rgba(192, 127, 0, 0.85), rgba(160, 102, 0, 0.85));
    color: #fff;
    border-color: rgba(192, 127, 0, 0.6);
  }
  .tmpc-completion-banner.variant-not-required {
    background: linear-gradient(90deg, rgba(107, 118, 135, 0.85), rgba(85, 94, 108, 0.85));
    color: #fff;
    border-color: rgba(107, 118, 135, 0.6);
  }
  /* v173: Missed Deadline completion-banner variant — rust gradient */
  .tmpc-completion-banner.variant-missed-deadline {
    background: linear-gradient(90deg, rgba(164, 64, 41, 0.9), rgba(122, 45, 27, 0.9));
    color: #fff;
    border-color: rgba(164, 64, 41, 0.65);
  }
  .tmpc-status-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
  }
  .tmpc-status-caret {
    font-size: 10px;
    color: rgba(255,255,255,0.85);
    line-height: 1;
  }

  /* Status picker — floating popover anchored under the pill */
  .tmpc-status-picker {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(10,37,64,0.25);
    z-index: 12;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tmpc-status-opt {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .tmpc-status-opt:hover { background: var(--surface-2); }
  .tmpc-status-opt-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--surface);
  }

  /* ===== LEAD/SUPPORT AVATAR STACKS on project chip header (v59) ===== */
  /* Each stack: small label + horizontal row of overlapping avatars.
     Click anywhere on the stack to scroll-and-focus the Column 2 picker. */
  .tmpc-lead-stack, .tmpc-support-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: center;
    background: rgba(255,255,255,0.12);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.25);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
  }
  .tmpc-lead-stack:hover, .tmpc-support-stack:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.55);
  }
  .tmpc-stack-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    line-height: 1;
  }
  .tmpc-avatars {
    display: flex;
    align-items: center;
  }
  .tmpc-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid var(--sbg-navy);
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    margin-left: -8px;
    transition: transform 0.1s;
  }
  .tmpc-avatar:first-child { margin-left: 0; }
  .tmpc-lead-stack:hover .tmpc-avatar,
  .tmpc-support-stack:hover .tmpc-avatar {
    transform: translateY(-1px);
  }
  /* Support avatars are visually subordinate — slightly smaller + thinner border */
  .tmpc-support-stack .tmpc-avatar {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
    border-width: 1.5px;
    opacity: 0.85;
  }
  .tmpc-avatar-tooltip {
    /* Tooltip uses native title attribute — no separate styling needed */
  }
  /* "+N" overflow chip — shown when there are more avatars than fit comfortably */
  .tmpc-avatar-overflow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid var(--sbg-navy);
    margin-left: -8px;
    cursor: default;
  }
  .tmpc-support-stack .tmpc-avatar-overflow {
    width: 22px;
    height: 22px;
    font-size: 9px;
    border-width: 1.5px;
  }
  /* Empty-state placeholder — when a stack is shown but has 0 people */
  .tmpc-avatars-empty {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-style: italic;
    line-height: 1;
    padding: 4px 0;
  }

  /* ===== BALL-IN-COURT PILL on project chip header (v59) ===== */
  /* Same shape as the Status pill — clickable with picker popover. */
  .tmpc-bic {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(192,127,0,0.45);
    color: #fff;
    padding: 6px 10px 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255,222,150,0.6);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    align-self: center;
    position: relative;
    user-select: none;
  }
  .tmpc-bic:hover {
    background: rgba(192,127,0,0.65);
    border-color: rgba(255,222,150,0.85);
  }
  .tmpc-bic:active { transform: scale(0.98); }
  .tmpc-bic-icon {
    font-size: 13px;
    line-height: 1;
  }
  .tmpc-bic-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
  }
  .tmpc-bic-caret {
    font-size: 10px;
    color: rgba(255,255,255,0.85);
    line-height: 1;
  }
  .tmpc-bic-picker {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(10,37,64,0.25);
    z-index: 12;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tmpc-bic-opt {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
  }
  .tmpc-bic-opt:hover { background: var(--surface-2); }
  .tmpc-bic-opt.active {
    background: rgba(192,127,0,0.15);
    color: #8a5a00;
  }

  /* ===== PROMOTED SUB-ITEMS WRAPPER (v58) =====
     Holds the Checklist + Deliverables sections at the TOP of the modal,
     above the 4-column body. Side-by-side internally on screens >= 900px,
     stacks below. */
  .task-subitems-promoted {
    display: flex;
    gap: 14px;
    margin: 12px 0 16px;
    align-items: flex-start;
  }
  .task-subitems-promoted > details {
    flex: 1 1 50%;
    min-width: 0;
    margin: 0;
  }
  @media (max-width: 899px) {
    .task-subitems-promoted {
      flex-direction: column;
    }
    .task-subitems-promoted > details {
      flex: 1 1 auto;
      width: 100%;
    }
  }

  .tmpc-due.tmpc-due-warning {
    background: #fffaf0;
    border-color: #c07f00;
  }
  .tmpc-due.tmpc-due-warning .tmpc-due-date {
    color: #8a5a00;
  }
  .tmpc-due.tmpc-due-warning .tmpc-due-relative {
    color: #8a5a00;
  }
  /* Mobile: stack the bar contents */
  @media (max-width: 700px) {
    .task-modal-project-chip {
      gap: 8px;
    }
    .tmpc-body {
      border-right: none;
      padding-right: 0;
      flex: 1 1 100%;
    }
    .tmpc-task { flex: 1 1 100%; }
    .tmpc-due { width: 100%; }
  }
  .priority-tag { font-size: 11px; font-weight: 600; text-transform: capitalize; }
  .priority-tag.high { color: var(--red); }
  .priority-tag.medium { color: var(--yellow); }
  .priority-tag.low { color: var(--text-dim); }

  /* ========== CALENDAR VIEW ========== */
  .calendar-controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; flex-wrap: wrap; gap: 12px;
  }

  /* ========== MULTI-TEMPLATE UI ========== */
  .tmpl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sbg-navy);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .tmpl-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 280px;
  }
  .tmpl-toolbar-right {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .tmpl-toolbar-right .btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 10px;
  }
  .tmpl-btn-create {
    background: var(--sbg-navy) !important;
    color: #fff !important;
    border-color: var(--sbg-navy) !important;
  }
  .tmpl-btn-create:hover {
    background: #1a3a5c !important;
    transform: translateY(-1px);
  }
  .tmpl-default-badge {
    display: inline-block;
    background: #c07f00;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 3px;
    margin-left: 8px;
    letter-spacing: 0.08em;
    vertical-align: middle;
  }

  /* Template picker (load into project) */
  .tmpl-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 480px;
    overflow-y: auto;
    padding: 4px;
  }
  .tmpl-picker-card {
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    overflow: hidden;
    transition: transform 0.1s, box-shadow 0.15s, border-color 0.1s;
  }
  .tmpl-picker-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(10,37,64,0.15);
    border-color: var(--sbg-navy);
  }
  .tmpl-picker-card.is-default {
    border-color: #c07f00;
  }
  /* Action button row at bottom of each picker card (v49) */
  .tmpl-picker-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .tmpl-picker-actions .btn {
    flex: 1;
    justify-content: center;
    font-size: 11.5px;
    padding: 6px 8px;
  }
  .tmpl-picker-card-header {
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tmpl-picker-icon { font-size: 18px; }
  /* When a template's icon is a custom uploaded image (data URL),
     render it inside the picker-icon span as an inline img. */
  .tmpl-picker-icon img {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.3);
  }
  /* Generic template-icon-img class used by renderTemplateIconHtml.
     Sized down for inline use; specific call sites can override via
     the extraClass argument. */
  .tmpl-icon-img {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
    vertical-align: middle;
    display: inline-block;
  }
  /* Title bar variant — slightly bigger to match the H3 emoji size */
  .tmpl-icon-img.tmpl-title-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 2px;
  }
  /* Save-to-template card uses same sizing pattern as picker card */
  .stt-icon img {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.3);
  }

  /* ===== TEMPLATE ICON PICKER (in Edit Template Info modal) ===== */
  .tmpl-icon-picker {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    background: var(--surface-2);
  }
  .tmpl-icon-current-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
  }
  .tmpl-icon-preview {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: var(--surface);
    border: 2px solid var(--sbg-navy);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(10,37,64,0.1);
  }
  .tmpl-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .tmpl-icon-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .tmpl-icon-actions .btn {
    justify-content: flex-start;
    text-align: left;
  }
  .tmpl-icon-palette-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }
  .tmpl-icon-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .tmpl-icon-option {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.1s;
    line-height: 1;
    padding: 0;
  }
  .tmpl-icon-option:hover {
    background: rgba(10,37,64,0.06);
    border-color: var(--sbg-navy);
    transform: scale(1.08);
  }
  .tmpl-icon-option.selected {
    background: var(--sbg-navy);
    border-color: var(--sbg-navy);
    box-shadow: 0 0 0 2px rgba(10,37,64,0.2);
  }

  /* ===== STAGE ICON PICKER ===== */
  .stage-icon-picker-wrap {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    background: var(--surface-2);
  }
  .stage-icon-current-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .stage-icon-preview {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: var(--surface);
    border: 2px solid var(--sbg-navy);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(10,37,64,0.1);
  }
  .stage-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .stage-icon-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .stage-icon-actions .btn { justify-content: flex-start; text-align: left; }
  .stage-icon-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .stage-icon-option {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.1s;
    line-height: 1;
    padding: 0;
  }
  .stage-icon-option:hover {
    background: rgba(10,37,64,0.06);
    border-color: var(--sbg-navy);
    transform: scale(1.08);
  }
  .stage-icon-option.selected {
    background: var(--sbg-navy);
    border-color: var(--sbg-navy);
    box-shadow: 0 0 0 2px rgba(10,37,64,0.2);
  }

  /* Stage icon button — replaces the old text input on each stage row.
     Shows current icon (image or emoji), clickable to open the picker. */
  .stage-icon-btn {
    width: 44px;
    height: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    overflow: hidden;
    transition: border-color 0.1s, background 0.1s;
  }
  .stage-icon-btn:hover {
    border-color: var(--sbg-navy);
    background: var(--surface-2);
  }
  .stage-icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .tmpl-picker-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tmpl-picker-default-badge {
    background: rgba(255,255,255,0.25);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.08em;
  }
  .tmpl-picker-card-body {
    padding: 10px 12px;
  }
  .tmpl-picker-desc {
    font-size: 11.5px;
    color: var(--text-dim);
    margin: 0 0 8px;
    line-height: 1.4;
    min-height: 32px;
  }
  .tmpl-picker-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--sbg-navy);
    margin-bottom: 6px;
  }
  .tmpl-picker-count strong {
    font-size: 14px;
    font-weight: 800;
  }
  .tmpl-picker-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }
  .tmpl-picker-stage-chip {
    font-size: 9.5px;
    background: var(--surface-3);
    color: var(--text-dim);
    padding: 1px 5px;
    border-radius: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* ===== TASK PICKER MODAL (v49) — selective-load UI ===== */
  .task-picker-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .task-picker-toolbar input[type="text"],
  .task-picker-toolbar select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    background: var(--surface);
  }
  .task-picker-list {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    padding: 6px;
  }
  .task-picker-stage-group {
    margin-bottom: 8px;
  }
  .task-picker-stage-group:last-child {
    margin-bottom: 0;
  }
  .task-picker-stage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--sbg-navy);
    color: #fff;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
    margin-bottom: 4px;
  }
  .task-picker-stage-header:hover {
    background: #143557;
  }
  .task-picker-stage-header input[type="checkbox"] {
    accent-color: #fff;
    width: 14px;
    height: 14px;
    cursor: pointer;
  }
  .task-picker-stage-header .task-picker-stage-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    background: rgba(255,255,255,0.18);
    padding: 1px 8px;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0;
  }
  .task-picker-task-row {
    display: grid;
    grid-template-columns: 24px 24px 1fr 70px 60px;
    gap: 8px;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 12.5px;
    transition: background 0.1s;
  }
  .task-picker-task-row:hover {
    background: var(--surface-2);
  }
  .task-picker-task-row.selected {
    background: rgba(10,37,64,0.06);
  }
  .task-picker-task-row:last-child {
    border-bottom: none;
  }
  .task-picker-task-row input[type="checkbox"] {
    accent-color: var(--sbg-navy);
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .task-picker-task-critical {
    text-align: center;
    font-size: 13px;
  }
  .task-picker-task-title {
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .task-picker-task-row.is-critical .task-picker-task-title {
    color: var(--sbg-red);
    font-weight: 600;
  }
  .task-picker-task-hours {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
  }
  .task-picker-task-offset {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--sbg-navy);
    font-weight: 700;
    text-align: right;
  }
  .task-picker-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 13px;
  }
  .task-picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 6px 0;
    margin-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
  }
  .task-picker-summary {
    font-size: 13px;
    color: var(--text);
  }
  .task-picker-summary strong {
    color: var(--sbg-navy);
    font-size: 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
  }
  .task-picker-summary-sep {
    color: var(--text-faint);
    margin: 0 6px;
  }

  /* Save-to-template picker (from a project task) */
  .save-to-tmpl-preview {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid #c07f00;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
  }
  .save-to-tmpl-preview-row {
    display: flex;
    gap: 10px;
    font-size: 12.5px;
    padding: 2px 0;
  }
  .stp-label {
    color: var(--text-dim);
    font-weight: 600;
    min-width: 70px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
    align-self: center;
  }
  .stp-offset {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--sbg-navy);
  }
  .save-to-tmpl-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
  }
  .save-to-tmpl-card {
    border: 2px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s, box-shadow 0.15s, border-color 0.1s;
  }
  .save-to-tmpl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(10,37,64,0.12);
    border-color: var(--sbg-navy);
  }
  .save-to-tmpl-card.is-default { border-color: #c07f00; }
  .save-to-tmpl-card.has-duplicate { border-color: var(--yellow); }
  .stt-card-header {
    color: #fff;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .stt-icon { font-size: 16px; }
  .stt-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stt-default-badge {
    background: rgba(255,255,255,0.3);
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 2px;
  }
  .stt-card-body { padding: 8px 10px; }
  .stt-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin: 0 0 6px;
    line-height: 1.4;
    min-height: 28px;
  }
  .stt-desc-empty { font-style: italic; color: var(--text-faint); }
  .stt-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--sbg-navy);
  }
  .stt-count strong { font-size: 13px; font-weight: 800; }
  .stt-dup-warn {
    color: #8a6a00;
    font-size: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* ========== SCHEDULE CALENDAR (weekend / holiday auto-skip) ========== */
  .sched-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(10,37,64,0.04) 0%, rgba(192,127,0,0.04) 100%);
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .sched-toggle-row { display: flex; align-items: flex-start; }
  .sched-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    width: 100%;
    margin: 0;
  }
  .sched-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--sbg-navy);
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .sched-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sched-toggle-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sbg-navy);
  }
  .sched-toggle-sub {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
  }
  .sched-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .sched-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sbg-navy);
  }
  .sched-section-sub {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
  }

  /* Holiday rows */
  .hl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    transition: background 0.1s;
  }
  .hl-row:last-child { border-bottom: none; }
  .hl-row:hover { background: rgba(10,37,64,0.03); }
  .hl-row.hl-disabled {
    opacity: 0.55;
    background: var(--surface-2);
  }
  .hl-toggle {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
    cursor: pointer;
    flex-shrink: 0;
  }
  .hl-info { flex: 1; min-width: 0; }
  .hl-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--sbg-navy);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hl-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-dim);
  }
  .hl-occ {
    font-family: 'JetBrains Mono', monospace;
  }
  .hl-type-chip {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 2px;
  }
  .hl-type-recurring {
    background: rgba(46,125,82,0.12);
    color: var(--green);
  }
  .hl-type-rule {
    background: rgba(110,78,184,0.12);
    color: #6e4eb8;
  }
  .hl-type-oneoff {
    background: rgba(192,127,0,0.15);
    color: #8a5a00;
  }
  .hl-seed-tag {
    background: rgba(10,37,64,0.1);
    color: var(--sbg-navy);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 1px 4px;
    border-radius: 2px;
  }
  .hl-remove-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    transition: all 0.1s;
  }
  .hl-remove-btn:hover {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
  }

  /* ========== ADVANCEMENTS TRACKER ========== */
  .advancements-modal {
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  .advancements-header {
    flex-shrink: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .advancements-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .advancements-subtitle {
    color: var(--text-dim);
    font-size: 12.5px;
    margin: 6px 0 0;
    line-height: 1.5;
  }
  .adv-stats {
    flex-shrink: 0;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .adv-stat-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .adv-stat-pill {
    flex: 1 1 120px;
    min-width: 120px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .adv-stat-implemented { border-left: 4px solid #2e7d52; }
  .adv-stat-progress    { border-left: 4px solid #c07f00; }
  .adv-stat-open        { border-left: 4px solid #6b7280; }
  .adv-stat-total       { border-left: 4px solid #0a2540; background: #f4f7fa; }
  .adv-stat-icon { font-size: 18px; }
  .adv-stat-num { font-size: 20px; font-weight: 700; color: var(--text); }
  .adv-stat-label { font-size: 11.5px; color: var(--text-dim); margin-left: 2px; }
  .adv-progress-bar {
    position: relative;
    height: 24px;
    background: #f0f3f7;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .adv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2e7d52 0%, #4ca57b 100%);
    transition: width 300ms ease;
  }
  .adv-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    text-shadow: 0 0 4px rgba(255,255,255,0.7);
  }
  .advancements-toolbar {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .adv-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
  }
  .adv-filter-group.adv-filter-search {
    flex: 1 1 200px;
  }
  .adv-filter-group label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  .adv-filter-group select,
  .adv-filter-group input {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12.5px;
    background: var(--bg);
    font-family: inherit;
  }
  .adv-toolbar-actions {
    display: flex;
    gap: 6px;
    align-self: flex-end;
  }
  .adv-bulk-toolbar {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe9b8 100%);
    border: 1px solid #c07f00;
    border-radius: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .adv-bulk-count {
    font-weight: 600;
    color: #6b4d00;
  }
  .adv-bulk-spacer {
    flex: 1;
  }
  .advancements-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 4px 8px;
  }
  .adv-tier-section {
    margin-bottom: 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .adv-tier-summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: background 120ms ease;
  }
  .adv-tier-summary::-webkit-details-marker { display: none; }
  .adv-tier-summary:hover { background: #f0f3f7; }
  .adv-tier-icon { font-size: 18px; }
  .adv-tier-label {
    font-weight: 700;
    color: var(--text);
    font-size: 13.5px;
  }
  .adv-tier-count {
    color: var(--text-dim);
    font-size: 11.5px;
    margin-left: auto;
  }
  .adv-tier-bar {
    width: 80px;
    height: 6px;
    background: #e6eaf0;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .adv-tier-bar-fill {
    height: 100%;
    transition: width 300ms ease;
  }
  .adv-tier-body {
    background: #fafbfd;
    border-top: 1px solid var(--border);
  }
  .adv-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    transition: background 120ms ease;
  }
  .adv-row:last-child { border-bottom: none; }
  .adv-row:hover { background: #f0f3f7; }
  .adv-row.adv-implemented {
    background: rgba(46,125,82,0.05);
  }
  .adv-row.adv-implemented .adv-row-title {
    text-decoration: line-through;
    color: var(--text-dim);
  }
  .adv-row.adv-selected {
    background: rgba(0,120,212,0.08);
    border-left: 3px solid #0078d4;
    padding-left: 11px;
  }
  .adv-row-checkbox {
    margin-top: 4px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  /* === Star (favorite) button === */
  .adv-fav-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #c4c8cf;
    margin-top: 2px;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s, transform 0.12s;
  }
  .adv-fav-btn:hover {
    color: #c07f00;
    background: rgba(192,127,0,0.08);
    transform: scale(1.1);
  }
  /* Filled star — gold when favorited */
  .adv-row.adv-favorited .adv-fav-btn {
    color: #c07f00;
    text-shadow: 0 0 1px rgba(192,127,0,0.4);
  }
  .adv-row.adv-favorited .adv-fav-btn:hover {
    color: #8a5a00;
  }
  /* Subtle gold accent on the row itself when favorited so you can spot
     starred rows when scanning the list. */
  .adv-row.adv-favorited {
    background: rgba(192,127,0,0.04);
    border-left: 3px solid #c07f00;
    padding-left: 10px;
    margin-left: -3px;
  }

  /* === Favorites-only filter pill button (in the toolbar) === */
  .adv-fav-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
  }
  .adv-fav-filter-btn:hover {
    border-color: #c07f00;
    background: rgba(192,127,0,0.05);
  }
  .adv-fav-filter-btn .adv-fav-filter-icon {
    color: #c07f00;
    font-size: 14px;
    line-height: 1;
  }
  .adv-fav-filter-btn .adv-fav-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-dim);
    padding: 2px 6px;
    border-radius: 3px;
    min-width: 22px;
    text-align: center;
  }
  /* Active state — gold filled, looks pressed-in */
  .adv-fav-filter-btn.active {
    background: #c07f00;
    border-color: #8a5a00;
    color: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  }
  .adv-fav-filter-btn.active .adv-fav-filter-icon {
    color: #fff;
    text-shadow: 0 0 4px rgba(255,255,255,0.6);
  }
  .adv-fav-filter-btn.active .adv-fav-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
  }
  .adv-fav-filter-btn.active:hover {
    background: #8a5a00;
  }
  .adv-row-content {
    flex: 1;
    min-width: 0;
  }
  .adv-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
  }
  .adv-row-title {
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
  }
  .adv-row-priority {
    font-size: 12px;
  }
  .adv-priority-high { color: #c8322b; }
  .adv-priority-normal { color: #6b7280; }
  .adv-priority-low { color: #9ca3af; }
  .adv-row-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 2px 0;
  }
  .adv-row-notes {
    font-size: 11.5px;
    color: var(--text-dim);
    margin: 4px 0;
    background: #fff8e1;
    padding: 4px 8px;
    border-radius: 3px;
    border-left: 2px solid #c07f00;
  }
  .adv-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .adv-row-status {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11.5px;
    cursor: pointer;
    background: var(--bg);
    font-family: inherit;
  }
  .adv-row-status.adv-status-open        { background: #f4f6f9; color: var(--text); }
  .adv-row-status.adv-status-in-progress { background: #fff4dc; color: #6b4d00; border-color: #c07f00; }
  .adv-row-status.adv-status-implemented { background: #e3f3eb; color: #1f5b3b; border-color: #2e7d52; }
  .adv-row-implemented-date {
    font-size: 11px;
    color: #2e7d52;
    font-weight: 600;
  }
  .adv-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .adv-row-actions .btn {
    padding: 4px 8px;
    font-size: 12px;
  }
  .adv-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
  }
  .adv-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }
  .adv-empty-title {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }
  .adv-empty-msg {
    font-size: 12.5px;
    line-height: 1.5;
  }
  .advancements-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    gap: 12px;
  }
  .adv-footer-hint {
    font-size: 11.5px;
    color: var(--text-dim);
    flex: 1;
    line-height: 1.5;
  }

  /* Send to Claude modal */
  .stc-step-list {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe9b8 100%);
    border: 1px solid #c07f00;
    border-radius: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .stc-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #6b4d00;
    font-weight: 500;
  }
  .stc-step-num {
    width: 20px;
    height: 20px;
    background: #c07f00;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
  }
  .stc-selected-list {
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px;
    background: #fafbfd;
  }
  .stc-selected-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
  }
  .stc-selected-item:last-child { border-bottom: none; }
  .stc-tier-icon {
    font-size: 14px;
    flex-shrink: 0;
  }
  .stc-title {
    font-weight: 500;
    color: var(--text);
  }
  .stc-status-msg {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
  }
  .stc-status-success {
    background: #e3f3eb;
    color: #1f5b3b;
    border: 1px solid #2e7d52;
  }
  .stc-status-warn {
    background: #fff4dc;
    color: #6b4d00;
    border: 1px solid #c07f00;
  }
  .stc-status-info {
    background: #e6f3ff;
    color: #0a4a8a;
    border: 1px solid #0078d4;
  }

  /* ========== ACTIVITY LOG ========== */
  .activity-log-modal {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .activity-log-header {
    flex-shrink: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .activity-log-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .activity-log-subtitle {
    color: var(--text-dim);
    font-size: 12.5px;
    margin: 6px 0 0;
  }
  .activity-log-filters {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: rgba(10,37,64,0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .al-filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
  }
  .al-filter-group.al-filter-search {
    flex: 1 1 200px;
    min-width: 200px;
  }
  .al-filter-group label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    font-weight: 600;
  }
  .al-filter-group select,
  .al-filter-group input {
    font-size: 12.5px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text);
  }
  .al-filter-group select:focus,
  .al-filter-group input:focus {
    outline: 2px solid var(--sbg-navy);
    outline-offset: 0;
    border-color: var(--sbg-navy);
  }
  .al-filter-actions {
    display: flex;
    gap: 6px;
  }
  .activity-log-stats {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text-dim);
    padding: 0 4px 8px;
  }
  .al-stat {
    font-weight: 500;
  }
  .al-stat-divider {
    margin: 0 8px;
    color: var(--border);
    user-select: none;
  }
  .activity-log-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 4px 8px;
  }
  .al-date-divider {
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 8px 0 4px;
    margin: 6px 0 4px;
    z-index: 1;
    border-bottom: 1px solid var(--border);
  }
  .al-date-divider span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--sbg-navy);
  }
  .al-entry {
    display: flex;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
    transition: background 0.15s;
  }
  .al-entry:hover {
    background: rgba(10,37,64,0.03);
  }
  .al-entry-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(10,37,64,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
  .al-entry.al-action-created .al-entry-icon { background: rgba(46,125,82,0.12); color: #2e7d52; }
  .al-entry.al-action-deleted .al-entry-icon { background: rgba(200,50,43,0.12); color: var(--sbg-red); }
  .al-entry.al-action-rejected .al-entry-icon { background: rgba(200,50,43,0.12); color: var(--sbg-red); }
  .al-entry.al-action-statuschanged .al-entry-icon { background: rgba(37,99,168,0.12); color: #2563a8; }
  .al-entry.al-action-signedoff .al-entry-icon { background: rgba(46,125,82,0.12); color: #2e7d52; }
  .al-entry.al-action-acknowledged .al-entry-icon { background: rgba(192,127,0,0.12); color: #c07f00; }
  .al-entry.al-type-bulk .al-entry-icon { background: rgba(110,78,184,0.12); color: #6e4eb8; }
  .al-entry-content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .al-entry-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
  }
  .al-entry-summary {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 500;
  }
  .al-open-task-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--sbg-navy);
    font-size: 11px;
    transition: all 0.15s;
  }
  .al-open-task-btn:hover {
    background: var(--sbg-navy);
    color: white;
    border-color: var(--sbg-navy);
  }
  .al-entry-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 3px;
  }
  .al-entry-actor {
    font-weight: 600;
    color: var(--sbg-navy);
  }
  .al-changes {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(10,37,64,0.04);
    border-radius: 4px;
    font-size: 11.5px;
    border-left: 2px solid var(--sbg-navy);
  }
  .al-change-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
    padding: 1.5px 0;
    line-height: 1.5;
  }
  .al-change-field {
    font-weight: 600;
    color: var(--sbg-navy);
    min-width: 80px;
  }
  .al-change-from {
    color: var(--text-dim);
    text-decoration: line-through;
  }
  .al-change-arrow {
    color: var(--text-dim);
    font-weight: 600;
    margin: 0 2px;
  }
  .al-change-to {
    color: var(--text);
    font-weight: 500;
  }
  .al-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
  }
  .al-empty-icon {
    font-size: 32px;
    margin-bottom: 10px;
    opacity: 0.6;
  }
  .al-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
  }
  .al-empty-msg {
    font-size: 12.5px;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
  }
  .activity-log-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .al-footer-hint {
    font-size: 11px;
    color: var(--text-dim);
  }

  /* ========== HELP CENTER ========== */
  .help-modal {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .help-header {
    flex-shrink: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .help-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .help-search-bar input {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
  }
  .help-search-bar input:focus {
    outline: none;
    border-color: var(--sbg-navy);
    box-shadow: 0 0 0 3px rgba(10,37,64,0.1);
  }
  .help-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 12px;
  }
  .help-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow 0.15s;
  }
  .help-section[open] {
    box-shadow: 0 1px 3px rgba(10,37,64,0.08);
    border-color: var(--sbg-navy);
  }
  .help-section summary {
    padding: 12px 16px;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sbg-navy);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: background 0.1s;
  }
  .help-section summary:hover { background: rgba(10,37,64,0.06); }
  .help-section[open] summary {
    background: var(--sbg-navy);
    color: #fff;
    border-bottom: 1px solid var(--border);
  }
  .help-section .help-icon {
    font-size: 20px;
    line-height: 1;
  }
  .help-body {
    padding: 16px 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
  }
  .help-body h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sbg-navy);
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--sbg-navy);
  }
  .help-body h4:first-child { margin-top: 0; }
  .help-body p { margin: 0 0 10px; }
  .help-body ul, .help-body ol {
    margin: 0 0 12px;
    padding-left: 22px;
  }
  .help-body li { margin-bottom: 5px; }
  .help-body code {
    background: var(--surface-3);
    padding: 1px 5px;
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--sbg-navy);
    border: 1px solid var(--border);
  }
  .help-body strong { color: var(--sbg-navy); }
  .help-body em {
    background: rgba(192,127,0,0.08);
    padding: 0 4px;
    border-radius: 2px;
    font-style: normal;
    color: #8a5a00;
    font-weight: 600;
  }

  /* Numbered step list */
  .help-step-list {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .help-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 0 4px 4px 0;
    padding: 10px 14px;
  }
  .help-step .step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: var(--sbg-navy);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
  }
  .help-step > div {
    flex: 1;
    line-height: 1.5;
  }

  /* Tip callout */
  .help-tip {
    background: rgba(192,127,0,0.08);
    border-left: 3px solid #c07f00;
    padding: 10px 14px;
    border-radius: 0 4px 4px 0;
    margin: 14px 0 6px !important;
    font-size: 13px;
    color: #5a3d00;
  }
  .help-tip strong { color: #8a5a00; }

  /* Glossary */
  .help-glossary {
    margin: 0;
  }
  .help-glossary dt {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sbg-navy);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
  }
  .help-glossary dt:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .help-glossary dd {
    margin: 4px 0 0 0;
    padding-left: 14px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
  }

  /* ========== CALENDAR INVITE DIALOG ========== */
  .calendar-task-preview {
    background: linear-gradient(135deg, rgba(16,124,65,0.06) 0%, rgba(16,124,65,0.10) 100%);
    border: 1px solid rgba(16,124,65,0.25);
    border-left: 3px solid #107c41;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
  }
  .ctp-row {
    display: flex;
    gap: 10px;
    font-size: 12.5px;
    padding: 2px 0;
  }
  .ctp-label {
    color: var(--text-dim);
    font-weight: 700;
    min-width: 80px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
    align-self: center;
  }
  .ctp-value {
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ========== ACTIVITY LOG ========== */
  .activity-log-section {
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .activity-log-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--surface-2);
    border-bottom: 1px solid transparent;
    transition: background 0.1s, border-color 0.15s;
  }
  .activity-log-summary::-webkit-details-marker { display: none; }
  .activity-log-summary:hover { background: rgba(10,37,64,0.05); }
  .activity-log-section[open] .activity-log-summary {
    border-bottom-color: var(--border);
  }
  .activity-log-summary::after {
    content: '▾';
    color: var(--text-dim);
    font-size: 11px;
    transition: transform 0.15s;
    margin-left: auto;
  }
  .activity-log-section[open] .activity-log-summary::after { transform: rotate(180deg); }
  .al-summary-icon { font-size: 16px; }
  .al-summary-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .al-summary-count {
    background: var(--surface-3);
    color: var(--text);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
  }
  .al-summary-hint {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
    margin-left: 6px;
  }
  .activity-log-section[open] .al-summary-hint { display: none; }
  .activity-log-body {
    padding: 12px 14px;
  }
  .activity-log-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .al-filter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11.5px;
    color: var(--text);
    cursor: pointer;
  }
  .al-controls-spacer { flex: 1; }
  .activity-log-list {
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
  }
  .al-event {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--surface-2);
    transition: background 0.08s;
  }
  .al-event:hover { background: var(--surface-2); }
  .al-event:last-child { border-bottom: none; }
  .al-event-icon {
    flex-shrink: 0;
    font-size: 16px;
    width: 24px;
    text-align: center;
    margin-top: 2px;
  }
  .al-event-body {
    flex: 1;
    min-width: 0;
  }
  .al-event-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
  }
  .al-actor-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0;
    flex-shrink: 0;
  }
  .al-actor-name {
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
  }
  .al-event-time {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
  }
  .al-event-summary {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.4;
  }
  .al-changes {
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--surface-2);
    border-radius: 3px;
    border-left: 2px solid var(--sbg-navy);
  }
  .al-change-row {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.5;
    font-family: 'JetBrains Mono', monospace;
  }
  .al-change-row strong {
    color: var(--text);
    font-family: 'Inter', sans-serif;
  }
  .al-from, .al-to {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 10.5px;
  }
  .al-from {
    background: rgba(200,50,43,0.10);
    color: #6b1d18;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .al-to {
    background: rgba(46,125,82,0.12);
    color: #1f5235;
    font-weight: 600;
  }
  .al-empty-val {
    color: var(--text-faint);
    font-style: italic;
    font-size: 10.5px;
  }
  /* Type-specific accents on the icon background */
  .al-event.al-type-task .al-event-icon { color: var(--sbg-navy); }
  .al-event.al-type-project .al-event-icon { color: #6e4eb8; }
  .al-event.al-type-milestone .al-event-icon { color: #c07f00; }
  .al-event.al-type-addendum .al-event-icon { color: #1a9ec9; }
  .al-event.al-type-bulk .al-event-icon { color: #e85d04; }
  .al-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12.5px;
    font-style: italic;
  }
  .al-truncate-note {
    padding: 8px 12px;
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 10.5px;
    text-align: center;
    border-top: 1px solid var(--border);
    font-style: italic;
  }

  /* ========== BULK TASK EDITING ========== */
  /* Toggle button — gold when active */
  #bulkSelectToggleBtn.bulk-mode-active {
    background: #c07f00 !important;
    color: #fff !important;
    border-color: #c07f00 !important;
    font-weight: 700;
  }

  /* Card-mode visual indicator — when bulk mode is on, all cards get a subtle outline */
  .task-card.bulk-mode {
    cursor: pointer;
    transition: border-color 0.1s, box-shadow 0.1s, transform 0.05s;
  }
  .task-card.bulk-mode:hover {
    border-color: #c07f00 !important;
    transform: translateY(-1px);
  }
  .task-card.bulk-selected {
    border: 2px solid #c07f00 !important;
    box-shadow: 0 0 0 2px rgba(192,127,0,0.25), 0 4px 10px rgba(192,127,0,0.15) !important;
  }
  .bulk-checkbox-wrap {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    background: rgba(255,255,255,0.95);
    border: 1.5px solid var(--border);
    border-radius: 3px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.1s;
  }
  .task-card.bulk-mode .bulk-checkbox-wrap {
    border-color: var(--sbg-navy);
  }
  .task-card.bulk-selected .bulk-checkbox-wrap {
    border-color: #c07f00;
    background: #fff8e6;
  }
  .bulk-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #c07f00;
  }
  .task-card.bulk-mode .priority-bar {
    /* Avoid overlap with checkbox in bulk mode */
    margin-left: 30px;
  }

  /* Table row selected state */
  .task-table tr.bulk-selected {
    background: #fff8e6 !important;
    border-left: 3px solid #c07f00;
  }
  .task-table tr.bulk-selected:hover {
    background: #fff2cc !important;
  }
  .task-table .bulk-cell {
    width: 32px;
    padding: 4px 8px;
    text-align: center;
  }
  .task-table th.bulk-th {
    background: var(--surface-2);
    border-bottom: 2px solid var(--border);
  }
  .task-table th.bulk-th input[type="checkbox"] {
    cursor: pointer;
    accent-color: #c07f00;
    width: 14px;
    height: 14px;
  }

  /* Floating action bar */
  .bulk-action-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sbg-navy);
    color: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(10,37,64,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
    z-index: 9000;
    max-width: calc(100vw - 32px);
    flex-wrap: wrap;
    animation: bab-slide-in 0.2s ease-out;
  }
  @keyframes bab-slide-in {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
  }
  .bulk-action-bar.has-selection {
    background: linear-gradient(135deg, var(--sbg-navy) 0%, #1a3a5c 100%);
  }
  .bab-left {
    display: flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid rgba(255,255,255,0.2);
    padding-right: 12px;
  }
  .bab-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
  }
  .bab-count #bulkSelectedCount {
    background: #c07f00;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    margin-right: 4px;
  }
  .bab-select-all, .bab-left .btn {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-size: 11px;
  }
  .bab-select-all:hover, .bab-left .btn:hover {
    background: rgba(255,255,255,0.22) !important;
  }
  .bab-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
  }
  .bab-action {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 10px !important;
    transition: all 0.1s;
  }
  .bab-action:hover {
    background: rgba(255,255,255,0.25) !important;
    transform: translateY(-1px);
  }
  .bab-action.bab-danger {
    background: rgba(200,50,43,0.4) !important;
    border-color: rgba(200,50,43,0.7) !important;
  }
  .bab-action.bab-danger:hover {
    background: var(--sbg-red) !important;
  }
  .bab-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.1s;
  }
  .bab-close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
  }

  /* Bulk edit dialog summary */
  .bulk-edit-summary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid #c07f00;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
    max-height: 160px;
    overflow-y: auto;
  }
  .bes-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sbg-navy);
    margin-bottom: 6px;
  }
  .bes-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .bes-list li {
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.4;
    border-bottom: 1px solid var(--surface-3);
  }
  .bes-list li:last-child { border-bottom: none; }
  .bes-meta {
    color: var(--text-dim);
    font-size: 10.5px;
    font-style: italic;
    margin-left: 6px;
  }
  .bes-overflow {
    color: var(--text-dim);
    font-style: italic;
    font-size: 11px;
    text-align: center;
  }

  /* ========== CHECKLIST / SUB-ITEMS ========== */
  .checklist-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 12px 0 8px;
    overflow: hidden;
  }
  .checklist-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.1s, border-color 0.15s;
  }
  .checklist-summary::-webkit-details-marker { display: none; }
  .checklist-summary:hover { background: rgba(10,37,64,0.05); }
  .checklist-section[open] .checklist-summary {
    border-bottom-color: var(--border);
    background: rgba(10,37,64,0.04);
  }
  .checklist-summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    transition: transform 0.15s;
  }
  .checklist-section[open] .checklist-summary::after { transform: rotate(180deg); }
  .cl-summary-icon { font-size: 15px; }
  .cl-summary-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cl-summary-status {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    font-weight: 600;
  }
  .cl-summary-status.active {
    color: var(--sbg-navy);
    font-style: normal;
    font-weight: 700;
  }
  .cl-summary-status.cl-flash {
    animation: cl-flash-anim 1.2s ease-out;
  }
  @keyframes cl-flash-anim {
    0%, 100% { background: transparent; color: var(--sbg-navy); }
    25%, 75% { background: var(--green); color: #fff; padding: 2px 6px; border-radius: 3px; }
  }
  .checklist-body { padding: 12px; }

  /* Progress bar at top of section */
  .checklist-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 6px 8px;
    background: var(--surface);
    border-radius: 4px;
  }
  .cl-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--surface-3);
    border-radius: 4px;
    overflow: hidden;
  }
  .cl-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sbg-navy) 0%, #1a3a5c 100%);
    transition: width 0.3s ease;
  }
  .cl-progress-fill.cl-progress-complete {
    background: linear-gradient(90deg, var(--green) 0%, #3d9968 100%);
  }
  .cl-progress-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sbg-navy);
    min-width: 70px;
    text-align: right;
  }

  /* Item rows */
  .checklist-items { margin-bottom: 10px; }
  .cl-empty {
    padding: 14px 8px;
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
    text-align: center;
  }
  .cl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 4px;
    transition: background 0.1s, border-color 0.1s;
  }
  .cl-item:hover { border-color: var(--sbg-navy); }
  .cl-item-done {
    background: rgba(46,125,82,0.06);
    border-color: rgba(46,125,82,0.25);
  }
  .cl-item-done .cl-text {
    text-decoration: line-through;
    color: var(--text-dim);
  }
  .cl-checkbox {
    cursor: pointer;
    accent-color: var(--green);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .cl-text {
    flex: 1;
    border: 1px solid transparent !important;
    background: transparent !important;
    padding: 4px 6px !important;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    transition: border-color 0.1s, background 0.1s;
  }
  .cl-text:focus {
    border-color: var(--sbg-navy) !important;
    background: var(--surface) !important;
  }
  .cl-item-done-info {
    font-size: 10px;
    color: var(--green);
    font-weight: 700;
    background: rgba(46,125,82,0.1);
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
  }
  .cl-item-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
  }
  .cl-reorder-btn, .cl-remove-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 10px;
    color: var(--text-dim);
    transition: all 0.1s;
  }
  .cl-reorder-btn:hover {
    background: var(--surface-2);
    color: var(--sbg-navy);
    border-color: var(--border);
  }
  .cl-remove-btn:hover {
    background: var(--sbg-red);
    color: #fff;
  }
  .cl-reorder-spacer { width: 22px; display: inline-block; }

  /* Add new item row */
  .checklist-add-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }
  .checklist-add-row input {
    flex: 1;
    padding: 6px 10px !important;
    font-size: 12.5px;
    border: 1px solid var(--border);
    border-radius: 3px;
  }
  .cl-add-btn {
    background: var(--sbg-navy);
    color: #fff;
    border: 1px solid var(--sbg-navy);
    border-radius: 3px;
    padding: 5px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.1s;
  }
  .cl-add-btn:hover {
    background: #1a3a5c;
    transform: translateY(-1px);
  }

  /* Bulk actions */
  .checklist-bulk-actions {
    display: flex;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .cl-bulk-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 4px 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s;
  }
  .cl-bulk-btn:hover {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }
  .cl-bulk-btn.cl-bulk-danger:hover {
    background: var(--sbg-red);
    border-color: var(--sbg-red);
  }

  /* Checklist chip on cards/rows */
  .cl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(10,37,64,0.08);
    border: 1px solid rgba(10,37,64,0.18);
    color: var(--sbg-navy);
    font-size: 10.5px;
    padding: 1px 5px 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    line-height: 1.2;
  }
  .cl-chip-icon { font-size: 10px; }
  .cl-chip-count { font-weight: 800; }
  .cl-chip-bar {
    display: inline-block;
    width: 24px;
    height: 4px;
    background: rgba(10,37,64,0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-left: 2px;
  }
  .cl-chip-bar-fill {
    display: block;
    height: 100%;
    background: var(--sbg-navy);
    transition: width 0.3s;
  }
  .cl-chip.cl-chip-done {
    background: rgba(46,125,82,0.12);
    border-color: rgba(46,125,82,0.3);
    color: var(--green);
  }
  .cl-chip.cl-chip-done .cl-chip-bar { background: rgba(46,125,82,0.2); }
  .cl-chip.cl-chip-done .cl-chip-bar-fill { background: var(--green); }
  /* LOUD chip — required SUBTASKS still open. Solid red, subtle red pulse. */
  .cl-chip.cl-chip-required-open {
    background: var(--sbg-red);
    border-color: var(--sbg-red);
    color: #fff;
    font-weight: 800;
    animation: chip-required-pulse 2s ease-in-out infinite;
  }
  .cl-chip.cl-chip-required-open .cl-chip-bar { background: rgba(255,255,255,0.25); }
  .cl-chip.cl-chip-required-open .cl-chip-bar-fill { background: #fff; }
  /* LOUD chip — required DELIVERABLES still open. Same red urgency, but with
     a gold left bar so it reads as "deliverable" at a glance even when
     stacked next to a subtask chip. The gold stripe inherits from the gold
     deliverable accent used elsewhere in the UI. */
  .dlv-chip.dlv-chip-required-open {
    background: var(--sbg-red);
    border-color: var(--sbg-red);
    border-left: 4px solid #c07f00;
    color: #fff;
    font-weight: 800;
    padding-left: 5px;
    animation: chip-required-pulse-deliverable 2s ease-in-out infinite;
  }
  .dlv-chip.dlv-chip-required-open .dlv-chip-bar { background: rgba(255,255,255,0.25); }
  .dlv-chip.dlv-chip-required-open .dlv-chip-bar-fill { background: #fff; }
  .dlv-chip.dlv-chip-required-open .dlv-chip-icon {
    /* Slight emboss on the package icon so it pops on the red ground */
    filter: drop-shadow(0 0 1px rgba(255,255,255,0.6));
  }
  @keyframes chip-required-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(200,50,43,0); }
  }
  /* Deliverable variant uses a gold pulse ring so the two chips read as
     same-urgency-different-category at a glance. */
  @keyframes chip-required-pulse-deliverable {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,127,0,0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(192,127,0,0); }
  }
  /* REQ / opt toggle — small inline pill in checklist & deliverable rows */
  .cl-req-toggle, .dlv-req-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.1s;
    flex-shrink: 0;
    line-height: 1.5;
  }
  .cl-req-on, .dlv-req-on {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
  }
  .cl-req-on:hover, .dlv-req-on:hover {
    background: #9c2520;
    border-color: #9c2520;
  }
  .cl-req-off, .dlv-req-off {
    background: var(--surface);
    color: var(--text-faint);
    border-color: var(--border);
  }
  .cl-req-off:hover, .dlv-req-off:hover {
    background: var(--surface-2);
    color: var(--sbg-navy);
  }
  /* Subtle left border on required items inside the modal so they read as "must do" */
  .cl-item.cl-item-required:not(.cl-item-done) {
    border-left: 3px solid var(--sbg-red);
  }
  .dlv-item.dlv-item-required:not(.dlv-item-done) {
    border-left-color: var(--sbg-red);
  }
  /* Override .dlv-item base border-left (which is gold) when required AND not done */
  .dlv-item.dlv-item-required:not(.dlv-item-done) {
    border-left-width: 3px;
  }
  .task-card.is-overdue .cl-chip {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }
  .task-card.is-overdue .cl-chip-bar { background: rgba(255,255,255,0.2); }
  .task-card.is-overdue .cl-chip-bar-fill { background: #fff; }
  /* Table chip — slightly more compact, no bar */
  .cl-chip-table {
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 10px;
  }
  .cl-chip-table .cl-chip-bar { display: none; }
  /* Deliverable + best-practice table variants — same compact treatment */
  .dlv-chip-table {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
  }
  .dlv-chip-table .dlv-chip-bar { display: none; }
  .bp-chip-table {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9.5px;
  }
  /* Keep the gold left-stripe distinction even in the compact table chip
     so subtask vs deliverable read as different categories on dense rows. */
  .dlv-chip.dlv-chip-table.dlv-chip-required-open {
    border-left-width: 3px;
    padding-left: 4px;
  }

  /* ========== DELIVERABLES / OUTPUT ==========
     Reuses the checklist visual pattern with gold accent (per SBG palette)
     so it reads as related-but-distinct from the standard checklist. */
  .deliverables-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 12px 0 8px;
    overflow: hidden;
  }
  .deliverables-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.1s, border-color 0.15s;
  }
  .deliverables-summary::-webkit-details-marker { display: none; }
  .deliverables-summary:hover { background: rgba(192,127,0,0.06); }
  .deliverables-section[open] .deliverables-summary {
    border-bottom-color: var(--border);
    background: rgba(192,127,0,0.05);
  }
  .deliverables-summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    transition: transform 0.15s;
  }
  .deliverables-section[open] .deliverables-summary::after { transform: rotate(180deg); }
  .dlv-summary-icon { font-size: 15px; }
  .dlv-summary-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .dlv-summary-status {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    font-weight: 600;
  }
  .dlv-summary-status.active {
    color: var(--sbg-gold, #c07f00);
    font-style: normal;
    font-weight: 700;
  }
  .deliverables-body { padding: 12px; }

  /* Item rows — taller than checklist because they hold description + file link */
  .dlv-items { margin-bottom: 10px; }
  .dlv-empty {
    padding: 14px 8px;
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
    text-align: center;
  }
  .dlv-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid #c07f00;
    border-radius: 3px;
    margin-bottom: 6px;
    transition: background 0.1s, border-color 0.1s;
  }
  .dlv-item:hover { border-color: var(--sbg-navy); border-left-color: #c07f00; }
  .dlv-item-done {
    background: rgba(46,125,82,0.06);
    border-color: rgba(46,125,82,0.25);
    border-left-color: var(--green);
  }
  .dlv-item-done .dlv-text { text-decoration: line-through; color: var(--text-dim); }
  .dlv-item-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dlv-item-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 24px;
    flex-wrap: wrap;
  }
  .dlv-checkbox {
    cursor: pointer;
    accent-color: var(--green);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .dlv-text {
    flex: 1;
    border: 1px solid transparent !important;
    background: transparent !important;
    padding: 4px 6px !important;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    transition: border-color 0.1s, background 0.1s;
  }
  .dlv-text:focus {
    border-color: var(--sbg-navy) !important;
    background: var(--surface) !important;
  }
  .dlv-file-input {
    flex: 1;
    min-width: 180px;
    padding: 4px 6px !important;
    font-size: 11.5px;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
  }
  .dlv-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(192,127,0,0.1);
    border: 1px solid rgba(192,127,0,0.3);
    border-radius: 3px;
    color: #8a5a00;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dlv-file-link:hover {
    background: rgba(192,127,0,0.18);
    color: #6e4700;
  }
  .dlv-file-link-icon { font-size: 11px; }
  .dlv-upload-btn, .dlv-link-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 3px 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s;
  }
  .dlv-upload-btn:hover, .dlv-link-btn:hover {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }
  .dlv-file-clear {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 10px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.1s;
  }
  .dlv-file-clear:hover { background: var(--sbg-red); color: #fff; }
  .dlv-item-done-info {
    font-size: 10px;
    color: var(--green);
    font-weight: 700;
    background: rgba(46,125,82,0.1);
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
  }
  .dlv-item-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
  }
  .dlv-reorder-btn, .dlv-remove-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 10px;
    color: var(--text-dim);
    transition: all 0.1s;
  }
  .dlv-reorder-btn:hover {
    background: var(--surface-2);
    color: var(--sbg-navy);
    border-color: var(--border);
  }
  .dlv-remove-btn:hover { background: var(--sbg-red); color: #fff; }
  .dlv-reorder-spacer { width: 22px; display: inline-block; }

  /* Add new deliverable */
  .dlv-add-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }
  .dlv-add-row input {
    flex: 1;
    padding: 6px 10px !important;
    font-size: 12.5px;
    border: 1px solid var(--border);
    border-radius: 3px;
  }
  .dlv-add-btn {
    background: #c07f00;
    color: #fff;
    border: 1px solid #c07f00;
    border-radius: 3px;
    padding: 5px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.1s;
  }
  .dlv-add-btn:hover {
    background: #a06900;
    transform: translateY(-1px);
  }

  /* Deliverable chip on cards/rows — gold variant of cl-chip */
  .dlv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(192,127,0,0.12);
    border: 1px solid rgba(192,127,0,0.35);
    color: #8a5a00;
    font-size: 10.5px;
    padding: 1px 5px 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    line-height: 1.2;
  }
  .dlv-chip-icon { font-size: 10px; }
  .dlv-chip-count { font-weight: 800; }
  .dlv-chip-bar {
    display: inline-block;
    width: 24px;
    height: 4px;
    background: rgba(192,127,0,0.18);
    border-radius: 2px;
    overflow: hidden;
    margin-left: 2px;
  }
  .dlv-chip-bar-fill {
    display: block;
    height: 100%;
    background: #c07f00;
    transition: width 0.3s;
  }
  .dlv-chip.dlv-chip-done {
    background: rgba(46,125,82,0.12);
    border-color: rgba(46,125,82,0.3);
    color: var(--green);
  }
  .dlv-chip.dlv-chip-done .dlv-chip-bar { background: rgba(46,125,82,0.2); }
  .dlv-chip.dlv-chip-done .dlv-chip-bar-fill { background: var(--green); }
  .task-card.is-overdue .dlv-chip {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }
  .task-card.is-overdue .dlv-chip-bar { background: rgba(255,255,255,0.2); }
  .task-card.is-overdue .dlv-chip-bar-fill { background: #fff; }

  /* ========== BEST PRACTICE / NOTES SECTION ========== */
  .bestpractice-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 12px 0 8px;
    overflow: hidden;
  }
  /* TOP variant — shown at the top of Edit Task to showcase Lead-authored
     guidance. Stronger visual treatment so the eye lands here first:
     - Gold-to-red gradient header band
     - Larger label with explicit "TIP" tag
     - When ACTIVE (has content), the whole section gets a red left border
       and a soft cream wash so it reads as a directive at first glance. */
  .bestpractice-section.bestpractice-section-top {
    margin: 0 0 14px;
    border: 1px solid rgba(192,127,0,0.35);
    border-left: 4px solid #c07f00;
  }
  .bestpractice-section.bestpractice-section-top .bestpractice-summary {
    background: linear-gradient(135deg, rgba(192,127,0,0.08) 0%, rgba(200,50,43,0.05) 100%);
    padding: 10px 14px;
  }
  .bestpractice-section.bestpractice-section-top:hover .bestpractice-summary {
    background: linear-gradient(135deg, rgba(192,127,0,0.14) 0%, rgba(200,50,43,0.09) 100%);
  }
  .bestpractice-section.bestpractice-section-top .bp-summary-icon {
    font-size: 18px;
  }
  .bestpractice-section.bestpractice-section-top .bp-summary-label {
    font-size: 14px;
    color: #8a5a00;
    letter-spacing: 0.06em;
  }
  /* Populated state — section actively has guidance text. Loud red wash so
     an opening assignee can't miss that there's a directive to read. */
  .bestpractice-section.bestpractice-section-top.bp-has-content {
    border-color: var(--sbg-red);
    border-left: 4px solid var(--sbg-red);
    background: linear-gradient(135deg, #fff5f4 0%, #fff 60%);
    box-shadow: 0 1px 3px rgba(200,50,43,0.12);
  }
  .bestpractice-section.bestpractice-section-top.bp-has-content .bestpractice-summary {
    background: linear-gradient(135deg, rgba(200,50,43,0.1) 0%, rgba(200,50,43,0.04) 100%);
  }
  .bestpractice-section.bestpractice-section-top.bp-has-content .bp-summary-label {
    color: var(--sbg-red);
  }
  /* Compact bp section when used DEEP in modal (legacy position) — unchanged */
  .bestpractice-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.1s, border-color 0.15s;
  }
  .bestpractice-summary::-webkit-details-marker { display: none; }
  .bestpractice-summary:hover { background: rgba(200,50,43,0.05); }
  .bestpractice-section[open] .bestpractice-summary {
    border-bottom-color: var(--border);
    background: rgba(200,50,43,0.04);
  }
  .bestpractice-summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    transition: transform 0.15s;
  }
  .bestpractice-section[open] .bestpractice-summary::after { transform: rotate(180deg); }
  .bp-summary-icon { font-size: 15px; }
  .bp-summary-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .bp-summary-status {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    font-weight: 600;
  }
  .bp-summary-status.active {
    color: var(--sbg-red);
    font-style: normal;
    font-weight: 700;
  }
  .bestpractice-body { padding: 12px; }
  .bp-textarea {
    width: 100%;
    min-height: 38px;        /* compact when empty/short — about one line */
    max-height: 320px;       /* never balloon beyond reason */
    padding: 8px 10px !important;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    resize: vertical;
    overflow-y: auto;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .bp-textarea:focus {
    border-color: var(--sbg-red);
    box-shadow: 0 0 0 2px rgba(200,50,43,0.1);
  }
  .bp-textarea::placeholder {
    color: var(--text-faint);
    font-style: italic;
  }
  /* When the section is in 'has-content' mode, the textarea reads as a quote
     card — gold left rule + cream wash. Less "form input" more "directive." */
  .bestpractice-section-top.bp-has-content .bp-textarea {
    background: #fffaf0;
    border-color: rgba(192,127,0,0.35);
    border-left: 3px solid #c07f00;
    font-weight: 500;
    color: var(--text);
  }
  .bestpractice-section-top.bp-has-content .bp-textarea:focus {
    border-color: var(--sbg-red);
    border-left-color: var(--sbg-red);
  }
  .bp-popup-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(200,50,43,0.06);
    border: 1px solid rgba(200,50,43,0.2);
    border-radius: 3px;
  }
  .bp-popup-toggle label {
    font-size: 11.5px;
    color: var(--text);
    cursor: pointer;
    margin: 0;
  }
  .bp-popup-toggle input {
    accent-color: var(--sbg-red);
    width: 16px;
    height: 16px;
  }
  .bp-ack-status {
    margin-top: 10px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .bp-ack-status strong { color: var(--green); }

  /* Best-practice popup modal — distinct from regular task modal */
  .bp-popup-modal {
    max-width: 540px;
    padding: 0;
  }
  .bp-popup-header {
    background: linear-gradient(135deg, #c8322b 0%, #9c2520 100%);
    color: #fff;
    padding: 18px 22px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .bp-popup-header-icon {
    font-size: 26px;
    line-height: 1;
  }
  .bp-popup-header-text {
    flex: 1;
  }
  .bp-popup-header-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.1;
  }
  .bp-popup-header-sub {
    font-size: 11.5px;
    opacity: 0.9;
    margin-top: 2px;
  }
  .bp-popup-body {
    padding: 20px 22px;
  }
  .bp-popup-task-title {
    font-size: 12.5px;
    color: var(--text-dim);
    margin-bottom: 8px;
  }
  .bp-popup-task-title strong { color: var(--sbg-navy); }
  .bp-popup-content {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sbg-red);
    border-radius: 3px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 340px;
    overflow-y: auto;
  }
  .bp-popup-footer {
    padding: 14px 22px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
  }
  .bp-popup-ack-btn {
    background: var(--sbg-red);
    color: #fff;
    border: 1px solid var(--sbg-red);
    border-radius: 3px;
    padding: 8px 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.1s;
  }
  .bp-popup-ack-btn:hover { background: #9c2520; transform: translateY(-1px); }
  .bp-popup-skip-btn {
    background: var(--surface);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 8px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
  }
  .bp-popup-skip-btn:hover { color: var(--sbg-navy); }

  /* Best-practice indicator chip on task cards — small red dot */
  .bp-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(200,50,43,0.1);
    border: 1px solid rgba(200,50,43,0.3);
    color: var(--sbg-red);
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .task-card.is-overdue .bp-chip {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }

  /* ========== START BY CHIP (task cards) ==========
     Forward-looking timing chip — color codes by urgency relative to the
     task's Start By date. Same visual family as bp-chip / cl-chip / dlv-chip
     so it nests cleanly into the row of card chrome chips. */
  .sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    border: 1px solid;
  }
  /* Default — Start By is set but more than 2 days out */
  .sb-chip {
    background: rgba(110,110,122,0.1);
    color: var(--text-dim);
    border-color: rgba(110,110,122,0.3);
  }
  /* Warning — within 2 days of Start By */
  .sb-chip.sb-chip-warning {
    background: rgba(192,127,0,0.15);
    color: #8a5a00;
    border-color: rgba(192,127,0,0.45);
  }
  /* Imminent — Start By is today */
  .sb-chip.sb-chip-imminent {
    background: rgba(192,127,0,0.25);
    color: #8a5a00;
    border-color: #c07f00;
    font-weight: 800;
  }
  /* Late — Start By date passed and task still not started */
  .sb-chip.sb-chip-late {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
    animation: newPulse 2s ease-in-out infinite;
  }
  /* Satisfied — task moved off not-started, Start By is no longer urgent */
  .sb-chip.sb-chip-satisfied {
    background: rgba(46,125,82,0.15);
    color: #2e7d52;
    border-color: rgba(46,125,82,0.4);
  }
  /* On overdue cards (red bg), reset to a transparent-on-white-ish look */
  .task-card.is-overdue .sb-chip {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }
  .task-card.is-overdue .sb-chip.sb-chip-late {
    background: rgba(255,255,255,0.95);
    color: var(--sbg-red);
    border-color: #fff;
  }

  /* ========== START BY GROUP (Edit Task modal) ========== */
  .start-by-group {
    background: rgba(192,127,0,0.04);
    border: 1px dashed rgba(192,127,0,0.35);
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
  }
  .start-by-group label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .start-by-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .start-by-row input[type="date"] {
    min-width: 160px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
  }
  .start-by-row input[type="date"]:focus {
    outline: none;
    border-color: #c07f00;
    box-shadow: 0 0 0 2px rgba(192,127,0,0.15);
  }
  .start-by-suggest {
    background: rgba(192,127,0,0.12);
    border: 1px solid rgba(192,127,0,0.4);
    color: #8a5a00;
  }
  .start-by-suggest:hover {
    background: rgba(192,127,0,0.22);
    border-color: #c07f00;
  }
  .start-by-clear {
    background: transparent;
    border: 1px solid rgba(110,110,122,0.4);
    color: var(--text-dim);
  }
  .start-by-clear:hover {
    background: rgba(110,110,122,0.1);
  }

  /* ========== PROJECTED HOURS — Edit Task modal field ========== */
  .hours-group {
    background: rgba(26,158,201,0.04);
    border: 1px dashed rgba(26,158,201,0.35);
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
  }
  .hours-group label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .hours-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .hours-row input[type="number"] {
    min-width: 100px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
  }
  .hours-row input[type="number"]:focus {
    outline: none;
    border-color: #1a9ec9;
    box-shadow: 0 0 0 2px rgba(26,158,201,0.15);
  }

  /* ========== HOURS CHIP on task cards ========== */
  .hours-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: rgba(26,158,201,0.10);
    color: #1a7593;
    border: 1px solid rgba(26,158,201,0.3);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
  }
  .task-card.is-overdue .hours-chip {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }

  /* ========== PROJECT HOURS ROLLUP PANEL ========== */
  .hours-rollup {
    background: linear-gradient(135deg, #f4fafd 0%, #e8f4fa 100%);
    border: 1px solid rgba(26,158,201,0.4);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 0 0 18px;
    box-shadow: 0 1px 4px rgba(26,158,201,0.08);
  }
  .hours-rollup-empty {
    background: var(--surface-2);
    border: 1px dashed var(--border);
  }
  .hours-rollup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hours-rollup-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a7593;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .hours-rollup-title-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hours-rollup-chevron {
    font-size: 14px;
    color: #1a7593;
    width: 14px;
    text-align: center;
    user-select: none;
  }
  .hours-rollup-summary {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text);
    font-weight: 500;
    margin-left: 4px;
  }
  .hours-rollup-summary strong {
    color: #1a7593;
    font-weight: 700;
  }
  .hours-rollup-collapsed .hours-rollup-header {
    margin-bottom: 0;
  }
  .hours-rollup-empty-msg {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .hours-rollup-tip {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-style: italic;
    color: var(--text-faint);
  }
  .hours-coverage-note {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    background: rgba(192,127,0,0.12);
    color: #8a5a00;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: help;
  }
  .hours-capacity-warning {
    background: rgba(200,50,43,0.08);
    border: 1px solid rgba(200,50,43,0.4);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--sbg-red);
  }

  /* Stat strip — top-of-rollup numbers */
  .hours-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
  }
  .hours-stat {
    background: #fff;
    border: 1px solid rgba(26,158,201,0.2);
    border-radius: 4px;
    padding: 10px 12px;
    text-align: center;
  }
  .hours-stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 2px;
  }
  .hours-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hours-stat-total .hours-stat-num { color: var(--sbg-navy); }
  .hours-stat-done .hours-stat-num { color: #1a7f37; }
  .hours-stat-remaining .hours-stat-num { color: #1a7593; }
  .hours-stat-coverage .hours-stat-num { color: #c07f00; font-size: 18px; padding-top: 4px; }

  /* Breakdown grid — by stage / by Lead */
  .hours-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 760px) {
    .hours-breakdown-grid { grid-template-columns: 1fr; }
    .hours-stat-strip { grid-template-columns: repeat(2, 1fr); }
  }
  .hours-breakdown-col {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(26,158,201,0.2);
    border-radius: 4px;
    padding: 10px 12px;
  }
  .hours-breakdown-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .hours-bar-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) 2fr auto;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
  }
  .hours-bar-label {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hours-bar-track {
    height: 6px;
    background: rgba(26,158,201,0.12);
    border-radius: 3px;
    overflow: hidden;
  }
  .hours-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1a9ec9 0%, #1a7593 100%);
    border-radius: 3px;
  }
  .hours-bar-fill-unassigned {
    background: linear-gradient(90deg, #aaa 0%, #888 100%);
  }
  .hours-bar-row.hours-bar-unassigned .hours-bar-label {
    color: var(--text-dim);
    font-style: italic;
  }
  .hours-bar-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #1a7593;
    min-width: 36px;
    text-align: right;
  }
  .hours-empty-mini {
    font-size: 11.5px;
    color: var(--text-dim);
    font-style: italic;
    padding: 4px 0;
  }

  /* Hours cells in table — column hidden entirely when feature is off via
     body-level data-hours-enabled="false". Belt-and-suspenders: cell content
     also stays as em-dash when feature is off. */
  .hours-cell {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #1a7593;
  }
  body[data-hours-enabled="false"] .task-table th[data-col="hours"],
  body[data-hours-enabled="false"] .task-table td[data-col="hours"] {
    display: none;
  }

  /* ========== HOURS SETTINGS MODAL — per-stage defaults editor ========== */
  .hours-stage-defaults-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
  }
  @media (max-width: 600px) {
    .hours-stage-defaults-grid { grid-template-columns: 1fr; }
  }
  .hours-stage-row {
    display: grid;
    grid-template-columns: 1fr 80px auto;
    gap: 8px;
    align-items: center;
  }
  .hours-stage-label {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 600;
  }
  .hours-stage-input {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-align: right;
  }
  .hours-stage-input:focus {
    outline: none;
    border-color: #1a9ec9;
    box-shadow: 0 0 0 2px rgba(26,158,201,0.15);
  }
  .hours-stage-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 700;
  }

  /* ========== REQUIRED ITEMS PANEL =========================================
     Surfaces unfinished required checklist items + deliverables across the
     current user's tasks. Used on the Today (home) view AND at the top of
     the active project view. */
  .required-items-panel {
    background: linear-gradient(135deg, #fff5f4 0%, #ffeae8 100%);
    border: 2px solid var(--sbg-red);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 18px;
    box-shadow: 0 2px 8px rgba(200,50,43,0.12);
  }
  .rip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .rip-header-icon {
    font-size: 22px;
    line-height: 1;
  }
  .rip-header-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sbg-red);
    margin: 0;
    flex: 1;
  }
  .rip-header-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    background: var(--sbg-red);
    color: #fff;
    padding: 3px 9px;
    border-radius: 12px;
  }
  .rip-header-collapse {
    background: transparent;
    border: 1px solid rgba(200,50,43,0.4);
    border-radius: 3px;
    color: var(--sbg-red);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.1s;
  }
  .rip-header-collapse:hover {
    background: var(--sbg-red);
    color: #fff;
  }
  .rip-tagline {
    font-size: 12px;
    color: #6e1f1a;
    margin-bottom: 12px;
    font-style: italic;
  }
  .rip-task {
    background: #fff;
    border: 1px solid rgba(200,50,43,0.25);
    border-left: 4px solid var(--sbg-red);
    border-radius: 4px;
    padding: 10px 12px 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.12s;
  }
  .rip-task:hover {
    border-color: var(--sbg-red);
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(200,50,43,0.15);
  }
  .rip-task-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .rip-task-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--sbg-navy);
    flex: 1;
    min-width: 200px;
  }
  .rip-task-project {
    font-size: 10.5px;
    color: var(--text-dim);
    background: var(--surface-2);
    padding: 1px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
  }
  .rip-task-due {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
  }
  .rip-task-due.overdue {
    background: var(--sbg-red);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
  }
  .rip-task-due.imminent {
    background: #fff3cd;
    color: #856404;
    padding: 1px 6px;
    border-radius: 3px;
  }
  .rip-items {
    margin: 0;
    padding-left: 0;
    list-style: none;
  }
  .rip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    margin-bottom: 2px;
    border-radius: 3px;
    transition: background 0.1s;
  }
  .rip-item:hover {
    background: rgba(200,50,43,0.05);
  }
  .rip-item-icon {
    font-size: 13px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
  }
  .rip-item-label {
    flex: 1;
    font-size: 12.5px;
    color: var(--text);
  }
  .rip-item-type {
    font-size: 9.5px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .rip-item-type.rip-type-checklist {
    background: rgba(10,37,64,0.1);
    color: var(--sbg-navy);
  }
  .rip-item-type.rip-type-deliverable {
    background: rgba(192,127,0,0.15);
    color: #8a5a00;
  }
  .rip-empty {
    text-align: center;
    padding: 16px;
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
    background: rgba(46,125,82,0.06);
    border: 1px solid rgba(46,125,82,0.2);
    border-radius: 4px;
  }
  /* Compact variant when collapsed */
  .required-items-panel.collapsed .rip-tagline,
  .required-items-panel.collapsed .rip-tasks {
    display: none;
  }
  .required-items-panel.collapsed { padding-bottom: 12px; }

  /* Completion guardrail modal — replaces the native confirm() with a clear list */
  .guardrail-modal {
    max-width: 560px;
    padding: 0;
  }
  .guardrail-header {
    background: linear-gradient(135deg, #c8322b 0%, #9c2520 100%);
    color: #fff;
    padding: 18px 22px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .guardrail-header-icon { font-size: 26px; line-height: 1; }
  .guardrail-header-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.1;
  }
  .guardrail-header-sub {
    font-size: 11.5px;
    opacity: 0.9;
    margin-top: 2px;
  }
  .guardrail-body {
    padding: 18px 22px;
    max-height: 380px;
    overflow-y: auto;
  }
  .guardrail-task-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--sbg-navy);
    margin-bottom: 12px;
  }
  .guardrail-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sbg-red);
    margin: 12px 0 6px;
  }
  .guardrail-list {
    margin: 0 0 8px 0;
    padding-left: 22px;
  }
  .guardrail-list li {
    font-size: 12.5px;
    color: var(--text);
    padding: 3px 0;
  }
  .guardrail-footer {
    padding: 14px 22px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
  }
  .guardrail-cancel-btn {
    background: var(--sbg-navy);
    color: #fff;
    border: 1px solid var(--sbg-navy);
    border-radius: 3px;
    padding: 8px 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .guardrail-cancel-btn:hover { background: #1a3a5c; }
  .guardrail-jump-btn {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 8px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
  }
  .guardrail-jump-btn:hover { background: var(--surface-2); color: var(--sbg-navy); }


  /* ========== RECURRING TASKS ========== */
  .recurrence-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 12px 0 8px;
    overflow: hidden;
  }
  .recurrence-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.1s, border-color 0.15s;
  }
  .recurrence-summary::-webkit-details-marker { display: none; }
  .recurrence-summary:hover { background: rgba(10,37,64,0.05); }
  .recurrence-section[open] .recurrence-summary {
    border-bottom-color: var(--border);
    background: rgba(10,37,64,0.04);
  }
  .recurrence-summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    transition: transform 0.15s;
  }
  .recurrence-section[open] .recurrence-summary::after { transform: rotate(180deg); }
  .rec-summary-icon { font-size: 15px; }
  .rec-summary-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .rec-summary-status {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    font-weight: 600;
  }
  .rec-summary-status.active {
    color: var(--green);
    font-style: normal;
    font-weight: 700;
  }
  .recurrence-body {
    padding: 12px;
  }

  /* Day-of-week picker */
  .rec-day-picker {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .rec-day-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 6px 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s;
    min-width: 42px;
  }
  .rec-day-btn:hover {
    border-color: var(--sbg-navy);
    background: var(--surface-2);
  }
  .rec-day-btn.active {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }

  /* Live preview chip */
  .rec-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, rgba(46,125,82,0.08) 0%, rgba(46,125,82,0.04) 100%);
    border: 1px solid var(--green);
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 10px;
  }
  .rec-preview-icon { font-size: 16px; }
  .rec-preview-text {
    font-size: 12px;
    color: var(--green);
    font-weight: 700;
  }

  /* Series info banner */
  .rec-series-info {
    background: rgba(212,160,23,0.1);
    border: 1px solid var(--yellow);
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text);
    line-height: 1.5;
  }

  /* Recurrence badge on cards */
  .recurrence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(46,125,82,0.12);
    color: var(--green);
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    border: 1px solid rgba(46,125,82,0.25);
    line-height: 1.2;
  }
  .task-card.is-overdue .recurrence-badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }

  /* v89: Rescheduled-from-past-due permanent accountability badge */
  .rescheduled-past-due-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(200,50,43,0.10);
    color: var(--red, #c8322b);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    border: 1px solid rgba(200,50,43,0.35);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: help;
  }
  .rescheduled-past-due-badge .rpd-count {
    background: var(--red, #c8322b);
    color: #fff;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    margin-left: 2px;
  }
  .task-card.is-overdue .rescheduled-past-due-badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
  }
  .task-card.is-overdue .rescheduled-past-due-badge .rpd-count {
    background: #fff;
    color: var(--red, #c8322b);
  }

  /* ========== GLOBAL SEARCH ========== */
  .global-search-wrapper {
    position: relative;
    margin-bottom: 12px;
    z-index: 100;
  }
  .global-search-input-row {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .global-search-input-row:focus-within {
    border-color: var(--sbg-navy);
    box-shadow: 0 0 0 3px rgba(10,37,64,0.12);
  }
  .gs-icon {
    color: var(--text-dim);
    font-size: 14px;
    margin-right: 6px;
    flex-shrink: 0;
  }
  .global-search-input {
    border: none !important;
    background: transparent !important;
    flex: 1;
    padding: 8px 0 !important;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    width: 100%;
    min-width: 0;
  }
  .global-search-input::placeholder {
    color: var(--text-faint);
    font-style: italic;
    font-size: 12px;
  }
  .gs-clear-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.1s;
  }
  .gs-clear-btn:hover {
    background: var(--surface-3);
    color: var(--sbg-red);
  }

  /* Results dropdown */
  .global-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(10,37,64,0.18);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1001;
  }
  .gs-group-header {
    background: var(--surface-2);
    color: var(--sbg-navy);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .gs-group-header:first-child { border-top: none; }
  .gs-group-count {
    background: var(--sbg-navy);
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: 0;
  }
  .gs-result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--surface-2);
    transition: background 0.08s;
  }
  .gs-result:last-child { border-bottom: none; }
  .gs-result:hover, .gs-result.selected {
    background: rgba(10,37,64,0.06);
  }
  .gs-result.selected {
    background: rgba(10,37,64,0.10);
    border-left: 3px solid var(--sbg-navy);
    padding-left: 9px;
  }
  .gs-result-icon {
    flex-shrink: 0;
    font-size: 14px;
    width: 20px;
    text-align: center;
    margin-top: 1px;
  }
  .gs-result-body {
    flex: 1;
    min-width: 0;
  }
  .gs-result-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gs-result-context {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.3;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gs-mark {
    background: rgba(212,160,23,0.4);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 700;
  }
  .gs-no-results {
    padding: 16px 12px;
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    font-style: italic;
  }
  .gs-truncate-note {
    padding: 8px 12px;
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 10.5px;
    text-align: center;
    border-top: 1px solid var(--border);
    font-style: italic;
  }

  /* Hide search bar in collapsed sidebar */
  .sidebar.collapsed .global-search-wrapper { display: none; }

  /* ========== MULTI-SUPPORT PICKER (task modal) ========== */
  .multi-support-picker {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    padding: 6px;
  }
  .msp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 24px;
    margin-bottom: 6px;
  }
  .msp-empty {
    font-size: 11.5px;
    color: var(--text-faint);
    font-style: italic;
    padding: 4px 6px;
  }
  .msp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 3px 4px 3px 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    transition: all 0.1s;
  }
  .msp-chip:hover {
    border-color: var(--sbg-navy);
    background: rgba(10,37,64,0.05);
  }
  .msp-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
  }
  .msp-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .msp-name {
    padding: 0 2px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .msp-remove {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.1s;
  }
  .msp-remove:hover {
    background: var(--sbg-red);
    color: #fff;
  }
  .msp-input-row {
    display: flex;
    gap: 4px;
    align-items: stretch;
  }
  .msp-input-row input {
    flex: 1;
    padding: 5px 8px;
    font-size: 12.5px;
    border: 1px solid var(--border);
    border-radius: 3px;
  }
  .msp-add-btn {
    background: var(--sbg-navy);
    color: #fff;
    border: 1px solid var(--sbg-navy);
    border-radius: 3px;
    padding: 4px 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.1s;
  }
  .msp-add-btn:hover {
    background: #1a3a5c;
    transform: translateY(-1px);
  }

  /* ========== STACKED SUPPORT AVATARS (board cards & task rows) ========== */
  .support-stack {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
  }
  .support-stack .support-avatar {
    margin-left: -6px;
    border: 1.5px solid var(--surface);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  }
  .support-stack .support-avatar:first-child {
    margin-left: 0;
  }
  .support-overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sbg-navy);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    padding: 0 5px;
    height: 18px;
    min-width: 18px;
    border-radius: 9px;
    margin-left: -6px;
    border: 1.5px solid var(--surface);
    letter-spacing: 0.04em;
  }
  .support-text {
    margin-left: 4px;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
  }

  /* ========== EMAIL TASK DIALOG ========== */
  .email-task-preview {
    background: linear-gradient(135deg, rgba(0,120,212,0.06) 0%, rgba(0,120,212,0.10) 100%);
    border: 1px solid rgba(0,120,212,0.25);
    border-left: 3px solid #0078d4;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
  }
  .etp-row {
    display: flex;
    gap: 10px;
    font-size: 12.5px;
    padding: 2px 0;
  }
  .etp-label {
    color: var(--text-dim);
    font-weight: 700;
    min-width: 70px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
    align-self: center;
  }
  .etp-value {
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .email-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    align-items: center;
  }
  .email-quick-picks-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-right: 4px;
  }
  .email-quick-pick-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s;
  }
  .email-quick-pick-btn:hover {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
    transform: translateY(-1px);
  }
  .email-quick-pick-btn.has-email {
    border-color: #0078d4;
    color: #0078d4;
  }
  .email-quick-pick-btn.has-email:hover {
    background: #0078d4;
    color: #fff;
  }
  .email-quick-pick-btn.no-email {
    border-style: dashed;
    color: var(--text-faint);
  }
  .email-quick-pick-btn.no-email:hover {
    background: var(--yellow);
    color: #5a4500;
    border-color: var(--yellow);
    border-style: solid;
  }
  .email-quick-picks-empty {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
  }

  /* ========== LOOK AHEAD VIEW ========== */
  #lookaheadView { padding: 0; }
  .lookahead-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .la-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--sbg-navy);
    letter-spacing: 0.04em;
  }
  .la-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .la-window-switcher {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .la-window-btn {
    background: var(--surface);
    border: none;
    border-right: 1px solid var(--border);
    padding: 6px 14px;
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: var(--text-dim);
    transition: background 0.1s, color 0.1s;
  }
  .la-window-btn:last-child { border-right: none; }
  .la-window-btn:hover { background: var(--surface-2); color: var(--text); }
  .la-window-btn.active {
    background: var(--sbg-navy);
    color: #fff;
  }
  .la-scope-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .la-control-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin: 0 !important;
  }
  .la-scope-controls select {
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    font-weight: 600;
  }
  .la-show-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    margin: 0 !important;
  }
  .la-show-label input[type="checkbox"] { cursor: pointer; }

  /* Summary panel */
  .lookahead-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 14px;
  }
  .la-summary-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .la-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 12px;
    border-left: 3px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 4px 4px 0;
  }
  .la-stat-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
  }
  .la-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
  }
  .la-stat-red {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.06);
  }
  .la-stat-red .la-stat-num { color: var(--sbg-red); }
  .la-stat-orange {
    border-left-color: #e85d04;
    background: rgba(232,93,4,0.06);
  }
  .la-stat-orange .la-stat-num { color: #e85d04; }
  .la-stat-navy {
    border-left-color: var(--sbg-navy);
    background: rgba(10,37,64,0.06);
  }
  .la-stat-navy .la-stat-num { color: var(--sbg-navy); }
  .la-stat-window {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
  }
  .la-window-arrow {
    font-size: 14px;
    color: var(--sbg-navy);
    font-weight: 800;
  }

  /* Day groups */
  .lookahead-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .la-day-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .la-day-group.la-day-today {
    border-color: #e85d04;
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(232,93,4,0.12);
  }
  .la-day-group.la-day-tomorrow {
    border-color: var(--yellow);
  }
  .la-day-group.la-day-overdue {
    border-color: var(--sbg-red);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(200,50,43,0.15);
  }
  .la-day-group.la-day-weekend .la-day-header {
    background: rgba(10,37,64,0.04);
  }
  .la-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }
  .la-day-group.la-day-today .la-day-header {
    background: rgba(232,93,4,0.08);
    border-bottom-color: #e85d04;
  }
  .la-day-group.la-day-tomorrow .la-day-header {
    background: rgba(212,160,23,0.08);
  }
  .la-day-group.la-day-overdue .la-day-header {
    background: rgba(200,50,43,0.08);
    border-bottom-color: var(--sbg-red);
  }
  .la-day-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .la-day-name-text {
    font-size: 16px;
  }
  .la-day-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 700;
  }
  .la-day-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  .la-pill-today {
    background: #e85d04;
    color: #fff;
  }
  .la-pill-tomorrow {
    background: var(--yellow);
    color: #5a4500;
  }
  .la-day-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--sbg-navy);
    padding: 2px 8px;
    border-radius: 3px;
  }
  .la-day-empty-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--text-faint);
    background: transparent;
    font-style: italic;
    font-weight: 400;
  }
  .la-day-group.la-day-today .la-day-count {
    background: #e85d04;
  }
  .la-day-group.la-day-overdue .la-day-count {
    background: var(--sbg-red);
  }
  .la-day-tasks {
    display: flex;
    flex-direction: column;
  }

  /* Task rows */
  .la-task-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
    position: relative;
  }
  .la-task-row:last-child { border-bottom: none; }
  .la-task-row:hover { background: rgba(10,37,64,0.04); }
  .la-task-priority-bar {
    width: 4px;
    flex-shrink: 0;
  }
  .la-task-row.la-priority-high .la-task-priority-bar { background: var(--sbg-red); }
  .la-task-row.la-priority-medium .la-task-priority-bar { background: var(--yellow); }
  .la-task-row.la-priority-low .la-task-priority-bar { background: var(--text-faint); }
  .la-task-overdue { background: rgba(200,50,43,0.04); }
  .la-task-overdue:hover { background: rgba(200,50,43,0.08); }
  .la-task-main {
    flex: 1;
    padding: 10px 14px;
    min-width: 0;
  }
  .la-task-top {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .la-task-stage {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sbg-navy);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid var(--border);
  }
  .la-project-chip {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--sbg-navy);
    padding: 1px 7px;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    white-space: nowrap;
  }
  .la-overdue-tag {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--sbg-red);
    padding: 1px 7px;
    border-radius: 2px;
  }
  /* NEW alert badge — surfaced on Look Ahead rows for unacknowledged tasks */
  .la-new-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--sbg-red);
    padding: 2px 7px;
    border-radius: 2px;
    animation: newPulse 1.6s ease-in-out infinite;
  }
  /* Subtle red wash on the row when it needs acknowledgment */
  .la-task-row.la-task-needs-ack {
    background: rgba(200,50,43,0.04);
    border-left: 3px solid var(--sbg-red);
  }
  .la-task-row.la-task-needs-ack:hover {
    background: rgba(200,50,43,0.08);
  }
  /* Inline Acknowledge button on the Look Ahead row */
  .la-ack-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    background: var(--sbg-red);
    color: #fff;
    border: 1px solid var(--sbg-red);
    border-radius: 3px;
    padding: 5px 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.1s;
  }
  .la-ack-btn:hover {
    background: #9c2520;
    transform: translateY(-1px);
  }
  .la-task-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .la-task-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11.5px;
  }
  /* In Look Ahead, the meta strip uses gap for spacing — reset chip margins
     so they align with the rest of the row instead of double-spacing. */
  .la-task-meta .cl-chip,
  .la-task-meta .dlv-chip,
  .la-task-meta .bp-chip {
    margin-left: 0;
  }
  .la-assignee {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text);
    font-weight: 600;
  }
  .la-assignee-name { font-size: 11.5px; }
  .la-assignee-none {
    color: var(--sbg-red);
    font-style: italic;
    font-weight: 700;
  }
  .la-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    overflow: hidden;
  }
  .la-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .la-avatar-sm { width: 16px; height: 16px; font-size: 8px; }
  .la-support-overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sbg-navy);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    padding: 0 4px;
    height: 16px;
    min-width: 16px;
    border-radius: 8px;
    margin-left: 1px;
    letter-spacing: 0.04em;
  }
  .la-support {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
  }
  .la-task-status {
    padding: 2px 8px;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: auto;
  }
  .la-status-not-started { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border); }
  .la-status-in-progress { background: rgba(10,37,64,0.1); color: var(--sbg-navy); border: 1px solid var(--sbg-navy); }
  .la-status-blocked { background: rgba(200,50,43,0.1); color: var(--sbg-red); border: 1px solid var(--sbg-red); }
  .la-status-pending { background: rgba(123,67,151,0.1); color: var(--purple); border: 1px solid var(--purple); }
  .la-status-done { background: rgba(46,125,82,0.1); color: var(--green); border: 1px solid var(--green); }

  /* Empty state */
  .lookahead-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: 6px;
  }
  .la-empty-icon { font-size: 48px; margin-bottom: 12px; }
  .lookahead-empty h3 {
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--sbg-navy);
    margin: 0 0 6px;
    font-size: 18px;
  }
  .lookahead-empty p {
    color: var(--text-dim);
    margin: 0;
    font-size: 13px;
    max-width: 480px;
  }

  /* ========== SCHEDULE / GANTT VIEW ========== */
  #scheduleView { padding: 0; }
  .schedule-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .schedule-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--sbg-navy);
    letter-spacing: 0.04em;
  }
  .sched-title-stats {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    margin-left: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .schedule-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .sched-grouping-switcher,
  .sched-zoom-switcher {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .sched-group-btn,
  .sched-zoom-btn {
    background: var(--surface);
    border: none;
    border-right: 1px solid var(--border);
    padding: 5px 12px;
    font-size: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: var(--text-dim);
    transition: background 0.1s, color 0.1s;
  }
  .sched-group-btn:last-child,
  .sched-zoom-btn:last-child { border-right: none; }
  .sched-group-btn:hover,
  .sched-zoom-btn:hover { background: var(--surface-2); color: var(--text); }
  .sched-group-btn.active,
  .sched-zoom-btn.active {
    background: var(--sbg-navy);
    color: #fff;
  }
  .sched-show-controls { display: flex; gap: 10px; align-items: center; }
  .sched-show-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    margin: 0 !important;
  }
  .sched-show-label input[type="checkbox"] { cursor: pointer; }

  /* Chart container */
  .schedule-chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .sched-scroll-wrap {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
  }
  .sched-chart-inner {
    position: relative;
    min-width: 100%;
  }

  /* Time axis header */
  .sched-axis {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 2px solid var(--sbg-navy);
    height: 50px;
  }
  .sched-axis-corner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--sbg-navy);
    color: #fff;
    border-right: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    padding: 0 14px;
    z-index: 2;
  }
  .sched-corner-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .sched-axis-time {
    position: absolute;
    top: 0;
    height: 100%;
  }
  .sched-month-row {
    position: relative;
    height: 22px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }
  .sched-month-band {
    position: absolute;
    top: 0;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sbg-navy);
    border-right: 1px solid var(--border);
  }
  .sched-day-row {
    position: relative;
    height: 28px;
  }
  .sched-day-tick {
    position: absolute;
    top: 0;
    height: 28px;
    border-right: 1px solid var(--border);
    text-align: center;
    line-height: 28px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
  }
  .sched-day-tick.is-weekend {
    background: rgba(10, 37, 64, 0.04);
    color: var(--text-faint);
  }

  /* Body — group rows + bars */
  .sched-body {
    position: relative;
    background:
      linear-gradient(to right, var(--border) 1px, transparent 1px) 0 0 / 28px 100%;
    background-color: var(--surface);
  }
  .sched-group {
    position: relative;
  }
  .sched-group-header {
    position: relative;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-strong);
    border-left: 4px solid var(--sbg-navy);
    display: flex;
  }
  .sched-group-header-label {
    position: relative;
    z-index: 3;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 100%;
  }
  .sched-group-header-track {
    position: absolute;
    top: 0;
  }
  .sched-group-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
  }
  .sched-group-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
  }
  .sched-group-avatar.has-photo { padding: 0; }
  .sched-group-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
  .sched-group-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sbg-navy);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sched-group-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--sbg-navy);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: auto;
  }

  /* Task rows */
  .sched-task-row {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
  }
  .sched-task-row:hover { background: rgba(10, 37, 64, 0.04); }
  .sched-task-row-label {
    position: relative;
    z-index: 3;
    background: inherit;
    border-right: 1px solid var(--border);
    padding-right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    flex-shrink: 0;
    height: 100%;
  }
  .sched-task-row:hover .sched-task-row-label { background: rgba(10,37,64,0.04); }
  .strow-icon {
    color: var(--text-faint);
    font-size: 11px;
    flex-shrink: 0;
  }
  .strow-title {
    font-size: 11.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sched-task-track {
    position: absolute;
    top: 0;
    right: 0;
  }

  /* Task bars */
  .sched-task-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    min-height: 14px;
    border: 1px solid;
    border-radius: 3px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .sched-task-row:hover .sched-task-bar {
    transform: translateY(-50%) scale(1.02);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .sched-bar-label {
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
  }
  /* Single-day milestone marker */
  .sched-milestone-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    border: 2px solid;
    border-radius: 2px;
  }
  .sched-task-row:hover .sched-milestone-marker {
    transform: translateY(-50%) rotate(45deg) scale(1.15);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  /* Vertical lines (today, bid start, bid due, milestones) */
  .sched-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 2;
    pointer-events: none;
  }
  .sched-vline-today {
    background: var(--sbg-red);
    box-shadow: 0 0 4px rgba(200,50,43,0.4);
  }
  .sched-vline-bidstart {
    background: var(--sbg-navy);
    opacity: 0.6;
  }
  .sched-vline-biddue {
    background: var(--sbg-red);
    width: 3px;
    box-shadow: 0 0 6px rgba(200,50,43,0.5);
  }
  .sched-vline-milestone {
    border-left: 2px dashed;
    background: transparent;
    width: 0;
    pointer-events: auto;
    cursor: help;
  }
  .vline-label {
    position: absolute;
    top: -2px;
    left: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--sbg-red);
    color: #fff;
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    z-index: 5;
  }
  .sched-vline-bidstart .vline-label { background: var(--sbg-navy); }
  .vline-milestone-label {
    background: #c07f00;
    top: 22px;
    pointer-events: auto;
  }

  /* Legend */
  .sched-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-dim);
  }
  .sched-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .legend-bar {
    display: inline-block;
    width: 18px;
    height: 10px;
    border-radius: 2px;
  }
  .legend-bar-thin {
    width: 2px;
    height: 14px;
    border-radius: 1px;
  }
  .legend-bar-dashed {
    width: 0;
    height: 14px;
    border-left: 2px dashed #c07f00;
  }
  .legend-diamond {
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 2px solid var(--border-strong);
  }
  .legend-divider {
    color: var(--border-strong);
    margin: 0 4px;
  }

  /* Empty state */
  .schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: 6px;
  }
  .se-icon { font-size: 48px; margin-bottom: 12px; }
  .schedule-empty h3 {
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--sbg-navy);
    margin: 0 0 6px;
    font-size: 18px;
  }
  .schedule-empty p {
    color: var(--text-dim);
    margin: 0;
    font-size: 13px;
  }
  .calendar-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 700; text-transform: uppercase;
    color: var(--sbg-navy); letter-spacing: 0.04em;
  }
  .calendar-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .cal-range-switcher {
    display: flex; gap: 2px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px; padding: 3px;
  }
  .cal-range-btn {
    background: transparent; border: none; color: var(--text-dim);
    padding: 6px 12px; border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    cursor: pointer; transition: all 0.12s;
  }
  .cal-range-btn:hover { color: var(--text); background: var(--surface-2); }
  .cal-range-btn.active { background: var(--sbg-navy); color: #fff; }

  .cal-assignee-filter {
    display: flex; gap: 6px; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 10px; font-size: 12px;
  }
  .cal-assignee-filter label {
    margin: 0; font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em;
  }
  .cal-assignee-filter select {
    border: none; background: transparent; padding: 4px 6px;
    font-size: 12px; font-weight: 600; color: var(--sbg-navy); cursor: pointer;
    width: auto;
  }
  .cal-assignee-filter select:focus { box-shadow: none; }

  .calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden;
  }
  .calendar-grid.cal-day-view { grid-template-columns: 1fr; }
  .calendar-grid.cal-week-view { grid-template-columns: repeat(7, 1fr); }
  .calendar-grid.cal-2week-view { grid-template-columns: repeat(7, 1fr); }

  .cal-dow {
    background: var(--sbg-navy); color: #fff;
    padding: 8px; text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 700;
  }
  .cal-day {
    background: var(--surface);
    min-height: 110px;
    padding: 6px;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    position: relative;
  }
  .calendar-grid.cal-day-view .cal-day { min-height: 500px; padding: 14px; }
  .calendar-grid.cal-week-view .cal-day { min-height: 320px; }
  .calendar-grid.cal-2week-view .cal-day { min-height: 180px; }
  .cal-day:nth-child(7n+1) { border-left: none; }
  .cal-day.other-month { background: var(--surface-2); }
  .cal-day.weekend { background: rgba(219, 223, 229, 0.15); }
  .cal-day.weekend.other-month { background: var(--surface-2); }
  .cal-day.today { background: rgba(200, 50, 43, 0.04); }
  .cal-day.today .cal-day-num { background: var(--sbg-red); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
  .cal-day.is-bid-date { background: rgba(212, 160, 23, 0.08); }
  .cal-day.is-bid-date::before {
    content: 'BID DUE'; position: absolute; top: 4px; right: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
    color: var(--sbg-red); text-transform: uppercase;
  }
  .cal-day.is-bid-start { background: rgba(46, 125, 82, 0.06); }
  .cal-day.is-bid-start::before {
    content: 'BID START'; position: absolute; top: 4px; right: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
    color: var(--green); text-transform: uppercase;
  }
  .cal-day-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700; color: var(--text-2);
    margin-bottom: 4px; display: block;
  }
  .calendar-grid.cal-day-view .cal-day-num { font-size: 16px; margin-bottom: 10px; }
  .cal-day.other-month .cal-day-num { color: var(--text-faint); }
  .cal-day-dow-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-left: 6px; font-weight: 600;
  }

  .cal-event {
    font-size: 10px;
    padding: 4px 6px;
    border-radius: 3px;
    margin-bottom: 3px;
    cursor: pointer;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.12s;
    border-left: 3px solid;
    font-weight: 500;
  }
  .calendar-grid.cal-day-view .cal-event,
  .calendar-grid.cal-week-view .cal-event { font-size: 11px; padding: 6px 8px; white-space: normal; }
  .cal-event:hover { transform: translateX(2px); }
  .cal-event.status-not-started { background: var(--fill-not-started); border-left-color: var(--text-faint); color: var(--text-2); }
  .cal-event.status-in-progress { background: var(--fill-in-progress); border-left-color: var(--blue); color: var(--sbg-navy); }
  .cal-event.status-blocked { background: var(--fill-blocked); border-left-color: var(--red); color: #8a201b; font-weight: 600; }
  .cal-event.status-pending { background: var(--fill-pending); border-left-color: var(--purple); color: #512e6a; }
  .cal-event.status-done { background: var(--fill-done); border-left-color: var(--green); color: var(--text-dim); text-decoration: line-through; opacity: 0.75; }
  .cal-event.overdue-task {
    background: var(--fill-overdue) !important;
    border-left-color: var(--fill-overdue-border) !important;
    color: #fff !important;
    font-weight: 700;
  }
  .cal-event-more {
    font-size: 10px; color: var(--text-dim);
    font-weight: 700;
    margin-top: 2px;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.05em;
  }
  /* v150: Inline status picker on calendar events. Small circle glyph that
     reveals on hover of the parent event. Click opens a floating menu. */
  .cal-status-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-right: 5px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    vertical-align: -3px;
  }
  .cal-event:hover .cal-status-picker {
    opacity: 1;
    transform: scale(1);
  }
  .cal-status-picker:hover {
    background: #fff;
    border-color: var(--sbg-navy, #0a2540);
    color: var(--sbg-navy, #0a2540);
    transform: scale(1.15) !important;
  }
  body.dark-mode .cal-status-picker {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
  }
  body.dark-mode .cal-status-picker:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--sbg-gold, #e5b24c);
    color: var(--sbg-gold, #e5b24c);
  }

  /* v150: Floating status menu triggered by cal-status-picker */
  .cal-status-menu {
    position: absolute;
    z-index: 10050;
    min-width: 200px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e6e8eb);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    animation: cal-status-menu-in 0.14s ease-out;
  }
  body.dark-mode .cal-status-menu {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  @keyframes cal-status-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cal-status-menu-hdr {
    padding: 6px 12px 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
    border-bottom: 1px solid var(--border, #e6e8eb);
    margin-bottom: 4px;
  }
  .cal-status-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    text-align: left;
    color: var(--text, #1a1a1a);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s ease;
  }
  .cal-status-menu-item:hover {
    background: var(--surface-2, #f0f2f5);
  }
  .cal-status-menu-item.active {
    background: rgba(200, 50, 43, 0.06);
    font-weight: 600;
  }
  body.dark-mode .cal-status-menu-item.active {
    background: rgba(232, 89, 82, 0.12);
  }
  .cal-status-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .cal-status-menu-label {
    flex: 1;
  }
  .cal-status-menu-current {
    font-size: 10px;
    color: var(--text-dim, #6b7687);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .cal-event-meta {
    display: block; font-size: 10px; font-weight: 400;
    margin-top: 2px; opacity: 0.85;
  }
  .cal-event-bic {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 5px;
    margin-top: 3px;
    background: rgba(10,37,64,0.08);
    color: var(--sbg-navy);
    border-radius: 2px;
  }
  .cal-event.overdue-task .cal-event-bic {
    background: rgba(255,255,255,0.25);
    color: #fff;
  }

  .cal-empty-state {
    padding: 60px 20px; text-align: center; color: var(--text-dim);
    font-style: italic; font-size: 13px;
  }

  /* ========== MODAL ========== */
  .modal-backdrop {
    position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
  }
  .modal-backdrop.active { display: flex; }
  .modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 24px; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto;
    border-top: 4px solid var(--sbg-red);
  }

  /* ============================================================
     TASK MODAL (v55) — bigger, 4-column desktop layout
     The Edit Task modal is the most-used surface in the app. Resize it
     to ~98% of the viewport, and on wide screens (>= 1500px) split the
     body into FOUR columns: Task & Classification | Assignees |
     Dates & Time | Sub-items (Checklist + Deliverables).
     Below 1500px it falls back to a 2-column layout (1100-1499px) and
     a single column (<1100px). The title, alerts strip, project chip,
     best practice section, messages thread, and modal-actions footer
     all span the full width.
     ============================================================ */
  #taskModal .modal {
    max-width: 1900px;
    width: 98vw;
    max-height: 97vh;
    padding: 28px 32px;
  }
  #taskModal .modal h3 {
    font-size: 26px;
    margin-bottom: 14px;
  }
  /* Primary fields use larger font + spacing so the surface feels comfortable */
  #taskModal #taskTitle {
    font-size: 16px;
    padding: 10px 12px;
    font-weight: 600;
  }
  #taskModal label {
    font-size: 12px;
  }
  /* Sticky modal-actions footer — keeps Save/Cancel reachable while scrolling */
  /* v100: Series scope dialog options */
  .series-scope-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 4px 0;
  }
  .series-scope-option {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    background: var(--surface, #fff);
  }
  .series-scope-option:hover {
    background: rgba(10, 37, 64, 0.03);
  }
  .series-scope-option input[type="radio"] {
    /* v101.1: Reset global `input { width:100%; padding; border }` from line ~15073
       which was rendering these radios as giant filled circles. */
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    margin: 3px 0 0 0;
    accent-color: var(--sbg-navy, #0a2540);
    flex-shrink: 0;
    appearance: auto;
    -webkit-appearance: radio;
  }
  .series-scope-option:has(input[type="radio"]:checked) {
    border-color: var(--sbg-navy, #0a2540);
    background: rgba(10, 37, 64, 0.05);
  }
  .sso-body { flex: 1; min-width: 0; }
  .sso-title {
    font-weight: 600;
    color: var(--text, #1a1a1a);
    font-size: 12.5px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.3;
  }
  .sso-desc {
    font-size: 11px;
    color: var(--text-dim, #6b7687);
    line-height: 1.35;
  }
  .sso-count-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    background: var(--sbg-navy, #0a2540);
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: 0.02em;
  }
  .series-scope-option:has(input[value="this-only"]:checked) .sso-count-chip { display: none; }
  /* v104: red variant of the count chip for the delete dialog */
  .sso-count-chip.sso-count-danger {
    background: var(--sbg-red, #c8322b);
  }
  /* v101: series scope modal sits ABOVE other modals so it's not hidden
     behind the task modal that spawned it. Also slim the container so it
     doesn't fight the task modal for screen space. */
  #seriesScopeModal,
  #seriesDeleteModal { z-index: 1100 !important; }
  #seriesScopeModal .modal,
  #seriesDeleteModal .modal {
    max-width: 440px;
    padding: 18px 20px;
  }
  #seriesScopeModal h2,
  #seriesDeleteModal h2 {
    font-size: 15px;
    margin: 0 0 3px 0;
  }
  #seriesScopeModal .modal-actions,
  #seriesDeleteModal .modal-actions {
    gap: 6px;
    margin-top: 12px !important;
  }
  #seriesScopeModal .modal-actions .btn,
  #seriesDeleteModal .modal-actions .btn {
    font-size: 12px;
    padding: 6px 12px;
  }
  /* v104: danger button variant for delete confirmation */
  .btn.btn-danger {
    background: var(--sbg-red, #c8322b);
    color: #fff;
    border-color: var(--sbg-red, #c8322b);
  }
  .btn.btn-danger:hover {
    background: #a5251f;
    border-color: #a5251f;
  }

  #taskModal .modal-actions {
    position: sticky;
    bottom: -28px; /* compensates for the modal's bottom padding */
    margin-bottom: -28px;
    padding: 14px 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, var(--surface) 30%, var(--surface) 100%);
    backdrop-filter: blur(2px);
    z-index: 5;
    border-top: 1px solid var(--border);
    margin-top: 18px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ===== 4-COLUMN GRID (>= 1500px) ===== */
  /* On wide screens, the modal becomes a CSS Grid with 4 columns.
     Each form-group is explicitly placed in its target column via
     grid-column rules below. Form-groups without an explicit rule
     flow into column 1 by default. */
  @media (min-width: 1500px) {
    #taskModal .modal {
      display: grid;
      /* v58: Now 3 columns since Checklist + Deliverables moved to a
         full-width promoted section above. Cols: Task | Assignees | Dates. */
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 24px;
      row-gap: 0;
      align-content: start;
      align-items: start;
    }
    /* Full-width children — span all 3 columns */
    #taskModal .modal h3,
    #taskModal #taskModalAlertsStrip,
    #taskModal #taskModalProjectChip,
    #taskModal #bestPracticeSection,
    #taskModal #taskSubitemsPromoted,
    #taskModal #taskMsgSection,
    #taskModal .modal-actions {
      grid-column: 1 / -1;
    }
    /* COLUMN 1 — Task & Classification.
       Task Title spans the full width (cols 1-3) so the most important
       field reads as a prominent heading at the top of the form area. */
    #taskModal #taskTitleFormGroup { grid-column: 1 / -1; }
    /* On wide screens the header pill replaces the inline Status dropdown
       to avoid a duplicate control. taskStatusFormGroup is hidden here. */
    #taskModal #taskStatusFormGroup { display: none; }
    #taskModal #taskStageFormGroup,
    #taskModal #taskCategoryFormGroup,
    #taskModal #taskCriticalFormGroup,
    #taskModal #taskSourceFormGroup,
    #taskModal #taskNotesFormGroup { grid-column: 1; }
    /* COLUMN 2 — Assignees & Ownership */
    #taskModal #taskLeadFormGroup,
    #taskModal #taskSupportFormGroup,
    #taskModal #taskBallInCourtFormGroup { grid-column: 2; }
    /* COLUMN 3 — Dates & Time */
    #taskModal #taskDayOffsetFormGroup,
    #taskModal #taskDueDateFormGroup,
    #taskModal #taskDateCalcFormGroup,
    #taskModal #startByGroup,
    #taskModal #hoursGroup,
    #taskModal #recurrenceSection { grid-column: 3; }

    /* Notes textarea — give it more height */
    #taskModal #taskNotes {
      min-height: 160px;
    }
    /* Project chip — slightly bigger */
    #taskModal .task-modal-project-chip {
      padding: 14px 18px;
    }
  }

  /* ===== 2-COLUMN GRID (1100-1499px) ===== */
  /* Mid-size screens (laptops): 2-column layout. Classification + Notes go
     in column 1, everything else stacks in column 2. */
  @media (min-width: 1100px) and (max-width: 1499px) {
    #taskModal .modal {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      column-gap: 24px;
      row-gap: 0;
      align-content: start;
      align-items: start;
    }
    #taskModal .modal h3,
    #taskModal #taskModalAlertsStrip,
    #taskModal #taskModalProjectChip,
    #taskModal #bestPracticeSection,
    #taskModal #taskSubitemsPromoted,
    #taskModal #taskMsgSection,
    #taskModal .modal-actions {
      grid-column: 1 / -1;
    }
    #taskModal #taskTitleFormGroup { grid-column: 1 / -1; }
    /* On the 2-col layout the header pill also replaces the inline Status
       dropdown — same logic as the 3-col layout. */
    #taskModal #taskStatusFormGroup { display: none; }
    /* Right column residents: dates */
    #taskModal #recurrenceSection,
    #taskModal #taskDayOffsetFormGroup,
    #taskModal #taskDueDateFormGroup,
    #taskModal #taskDateCalcFormGroup,
    #taskModal #startByGroup,
    #taskModal #hoursGroup { grid-column: 2; }
    /* Everything else flows into column 1 */
    #taskModal #taskNotes { min-height: 110px; }
  }

  /* ===== SINGLE COLUMN (<1100px) ===== */
  @media (max-width: 1099px) {
    #taskModal .modal {
      max-width: 95vw;
      width: 95vw;
    }
  }
  .modal h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 700;
    margin-bottom: 18px; letter-spacing: 0.02em;
    color: var(--sbg-navy); text-transform: uppercase;
  }
  .form-group { margin-bottom: 12px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-dim); margin-bottom: 5px; font-weight: 700;
  }
  input, select, textarea {
    width: 100%; background: var(--surface); border: 1px solid var(--border-strong);
    color: var(--text); padding: 8px 10px; border-radius: 4px;
    font-family: inherit; font-size: 13px;
  }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sbg-red); box-shadow: 0 0 0 2px rgba(200,50,43,0.12); }
  textarea { resize: vertical; min-height: 70px; }
  .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

  .hint-inline {
    font-size: 11px; color: var(--text-dim); margin-top: 4px; font-style: italic;
  }

  /* ========== PROJECT IMAGE ========== */
  .project-image-upload {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px; background: var(--surface-2);
    border: 1px dashed var(--border-strong); border-radius: 4px;
  }
  .project-image-preview {
    width: 120px; height: 90px;
    border-radius: 4px; overflow: hidden;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint); font-size: 11px;
    flex-shrink: 0; border: 1px solid var(--border);
  }
  .project-image-preview img { width: 100%; height: 100%; object-fit: cover; }
  .project-image-actions { display: flex; flex-direction: column; gap: 6px; flex: 1; }

  .project-item-layout {
    display: flex; gap: 10px; align-items: flex-start;
  }
  .project-item-thumb {
    width: 40px; height: 40px;
    border-radius: 4px; overflow: hidden;
    background: var(--surface-3);
    flex-shrink: 0;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 800;
    color: var(--sbg-navy);
    letter-spacing: 0.05em;
  }
  .project-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .project-item-body { flex: 1; min-width: 0; }

  .project-header-banner {
    display: flex; gap: 18px; align-items: flex-start;
  }
  .project-header-banner .banner-image {
    width: 140px; height: 100px;
    border-radius: 6px; overflow: hidden;
    background: var(--surface-3);
    flex-shrink: 0; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
  }
  .project-header-banner .banner-image img { width: 100%; height: 100%; object-fit: cover; }
  .project-header-banner .banner-image .placeholder {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px; font-weight: 800;
    color: var(--text-faint); letter-spacing: 0.05em;
  }
  .project-header-banner .banner-body { flex: 1; min-width: 0; }

  /* ========== TEAM STRIP — below the action buttons in project header ==========
     Shows additional team members (Lead OR Support on >=1 task) excluding the
     Lead Estimator. Click an avatar to open the workload modal scoped to the
     current project. */
  .pv-team-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    flex-wrap: wrap;
  }
  .pvts-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .pvts-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .pvts-avatar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    position: relative;
  }
  .pvts-avatar:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
  }
  .pvts-avatar img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .pvts-initials {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
  }
  .pvts-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
  }
  .pvts-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 1px 6px;
    border-radius: 9px;
    line-height: 1.4;
  }
  .pvts-role-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1;
  }
  .pvts-role-lead {
    background: #c07f00;
    color: #fff;
  }
  .pvts-role-support {
    background: rgba(255,255,255,0.25);
    color: #fff;
  }
  .pvts-overflow {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255,255,255,0.10);
    border: 1px dashed rgba(255,255,255,0.4);
    border-radius: 18px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
  }

  /* ========== TEAM MEMBER WORKLOAD MODAL ========== */

  /* Sort toolbar — small bar at top of body with the four sort modes */
  .tw-sort-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .tw-sort-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 4px;
  }
  .tw-sort-btn {
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
  }
  .tw-sort-btn:hover {
    background: rgba(26,158,201,0.06);
    border-color: rgba(26,158,201,0.4);
  }
  .tw-sort-btn.active {
    background: #1a7593;
    border-color: #1a5970;
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
  }
  .tw-sort-btn.active:hover {
    background: #155f78;
  }

  /* Status section colors — left rail tint by status */
  .tw-status-section-not-started { border-left: 3px solid var(--border-strong); padding-left: 9px; }
  .tw-status-section-in-progress { border-left: 3px solid #1a9ec9; padding-left: 9px; }
  .tw-status-section-blocked { border-left: 3px solid #c07f00; padding-left: 9px; }
  .tw-status-section-pending { border-left: 3px solid #6e6e7a; padding-left: 9px; }
  .tw-status-section-done { border-left: 3px solid #1a7f37; padding-left: 9px; }

  /* Priority section colors — left rail tint by priority */
  .tw-priority-section-high { border-left: 3px solid var(--sbg-red); padding-left: 9px; }
  .tw-priority-section-medium { border-left: 3px solid #c07f00; padding-left: 9px; }
  .tw-priority-section-low { border-left: 3px solid var(--text-faint); padding-left: 9px; }

  .tw-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }
  .tw-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    text-align: center;
  }
  .tw-stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 2px;
  }
  .tw-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .tw-stat.tw-open .tw-stat-num { color: var(--sbg-navy); }
  .tw-stat.tw-done .tw-stat-num { color: #1a7f37; }
  .tw-stat.tw-overdue .tw-stat-num { color: var(--sbg-red); }
  .tw-stat.tw-blocked .tw-stat-num { color: #c07f00; }
  .tw-stat.tw-hours .tw-stat-num { color: #1a7593; font-size: 18px; padding-top: 4px; }
  .tw-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .tw-stage-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
  }
  .tw-stage-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--sbg-navy);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tw-stage-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-dim);
    padding: 1px 6px;
    border-radius: 3px;
  }
  .tw-stage-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tw-row {
    display: grid;
    grid-template-columns: 70px 1fr 110px 110px auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.1s, border-color 0.1s;
  }
  .tw-row:hover {
    background: rgba(10,37,64,0.05);
    border-color: var(--sbg-navy);
  }
  .tw-row.tw-row-overdue {
    background: rgba(200,50,43,0.05);
    border-color: rgba(200,50,43,0.3);
  }
  .tw-role-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 2px;
    text-align: center;
    letter-spacing: 0.05em;
  }
  .tw-row .tw-role-badge.tw-role-lead {
    background: var(--sbg-navy);
    color: #fff;
  }
  .tw-row .tw-role-badge.tw-role-support {
    background: var(--surface-3);
    color: var(--text-dim);
    border: 1px solid var(--border);
  }
  .tw-row-title {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tw-row-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    text-align: center;
    color: var(--text);
    background: var(--surface-3);
  }
  .tw-row-status.tw-status-done { background: rgba(26,127,55,0.15); color: #1a7f37; }
  .tw-row-status.tw-status-blocked { background: rgba(192,127,0,0.15); color: #8a5a00; }
  .tw-row-status.tw-status-in-progress { background: rgba(26,158,201,0.12); color: #1a7593; }
  .tw-row-due {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
  }
  .tw-row-overdue .tw-row-due {
    color: var(--sbg-red);
    font-weight: 700;
  }
  .tw-hours-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #1a7593;
    background: rgba(26,158,201,0.10);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .tw-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
  }
  @media (max-width: 700px) {
    .tw-row {
      grid-template-columns: 60px 1fr;
      grid-template-rows: auto auto;
      row-gap: 4px;
    }
    .tw-row-status, .tw-row-due, .tw-hours-cell {
      grid-column: 2;
      justify-self: start;
    }
  }

  /* Lead Estimator chip — in the top navy header next to the Signed In chip */
  .pv-lead-estimator-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    font-family: inherit;
    margin-right: 10px;
  }
  .pv-lead-estimator-chip:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
  }
  .pv-lead-estimator-chip.missing {
    background: rgba(200, 50, 43, 0.18);
    border: 1px dashed var(--sbg-red);
    color: #fff;
  }
  .pv-lead-estimator-chip.missing:hover {
    background: rgba(200, 50, 43, 0.28);
  }
  .pv-lead-estimator-chip.missing .plec-name { color: #ffb3ae; }
  .pv-lead-estimator-chip.is-me {
    background: var(--sbg-red);
    border-color: var(--sbg-red);
  }
  .pv-lead-estimator-chip.is-me:hover {
    background: #a5291f;
    border-color: #a5291f;
  }
  .plec-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--text-faint);
  }
  .plec-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .pv-lead-estimator-chip.missing .plec-avatar {
    background: var(--sbg-red);
    color: #fff;
  }
  .plec-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    gap: 1px;
  }
  .plec-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .plec-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
  }
  .pv-lead-estimator-chip.is-me::after {
    content: 'YOU';
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    background: #fff;
    color: var(--sbg-red);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    border-radius: 2px;
  }
  .date-calc-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: var(--surface-3);
    padding: 4px 8px;
    border-radius: 3px;
    color: var(--text-2);
    margin-top: 5px;
  }
  .date-calc-badge.has-date { background: rgba(46, 125, 82, 0.1); color: var(--green); }
  .date-calc-badge.has-shift {
    background: rgba(192,127,0,0.12);
    color: #8a5a00;
    font-weight: 700;
    border: 1px solid rgba(192,127,0,0.4);
  }

  /* ===== TASK ANCHOR TOGGLE (v63) =====
     Tiny S/B segmented control next to the day-offset input in the Edit Task
     modal. Picks whether the offset is from Bid Start (S) or Bid Day (B).
     Active button is filled with role color; inactive is outlined gray. */
  .task-anchor-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
  }
  .task-anchor-toggle {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    height: 32px;
  }
  .task-anchor-btn {
    background: var(--surface);
    color: var(--text-dim);
    border: none;
    padding: 0 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.1s;
    border-right: 1px solid var(--border);
  }
  .task-anchor-btn:last-child { border-right: none; }
  .task-anchor-btn:hover {
    background: var(--surface-2);
    color: var(--text);
  }
  .task-anchor-btn.active {
    background: var(--sbg-navy);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  }
  .task-anchor-btn.active[data-anchor="bid-day"] {
    background: var(--sbg-red);
  }
  /* v82+: distinct colors for pre-bid and rfi-due */
  .task-anchor-btn.active[data-anchor="pre-bid"] {
    background: var(--sbg-gold);
  }
  .task-anchor-btn.active[data-anchor="rfi-due"] {
    background: #6e4eb8;
  }
  /* v170: Sub Bids Due anchor — teal to distinguish from other anchors */
  .task-anchor-btn.active[data-anchor="sub-bids-due"] {
    background: #2e8b8b;
  }
  .task-anchor-warning {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sbg-red);
    background: rgba(200, 50, 43, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    border: 1px solid rgba(200, 50, 43, 0.3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Inline (template-editor) anchor toggle — smaller version of the same
     pattern, fits in the 112px D+ Days column alongside the number input.
     v63b: tightened to leave more room for the number input.
     v82+: now 4 buttons (S/B/P/R) — narrower per-button width. */
  .mtt-anchor-toggle {
    display: inline-flex;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    height: 22px;
    flex-shrink: 0;
    margin-right: 4px;
  }
  .mtt-anchor-btn {
    background: var(--surface);
    color: var(--text-dim);
    border: none;
    padding: 0 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.1s;
    line-height: 1;
    width: 14px;
  }
  .mtt-anchor-btn:hover {
    background: var(--surface-2);
    color: var(--text);
  }
  .mtt-anchor-btn.active {
    background: var(--sbg-navy);
    color: #fff;
  }
  .mtt-anchor-btn.active[data-anchor="bid-day"] {
    background: var(--sbg-red);
  }
  /* v82+: distinct colors for pre-bid and rfi-due active states */
  .mtt-anchor-btn.active[data-anchor="pre-bid"] {
    background: var(--sbg-gold);
    color: #fff;
  }
  .mtt-anchor-btn.active[data-anchor="rfi-due"] {
    background: #6e4eb8;
    color: #fff;
  }
  /* v170: Sub Bids Due anchor — teal */
  .mtt-anchor-btn.active[data-anchor="sub-bids-due"] {
    background: #2e8b8b;
    color: #fff;
  }
  /* Wrap the inline anchor + number input for the D+ Days column in templates.
     v63b: number input gets a minimum width so 2-digit values fit comfortably. */
  .mtt-offset-row {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .mtt-offset-row input[type="number"] {
    flex: 1;
    min-width: 50px;
    width: 100%;
  }

  /* ===== PREVIEW DATES TOOLBAR (v69) ===== */
  .mtt-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(192, 127, 0, 0.06); /* very subtle gold tint */
    border: 1px solid rgba(192, 127, 0, 0.25);
    border-radius: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    font-size: 12px;
  }
  .mtt-preview-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a5a00;
  }
  .mtt-preview-field {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .mtt-preview-field label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    margin: 0;
    cursor: pointer;
  }
  .mtt-preview-field input[type="date"] {
    font-size: 12px;
    padding: 3px 6px;
    width: auto;
    font-family: 'JetBrains Mono', monospace;
  }
  .mtt-preview-arrow {
    color: var(--text-dim);
    font-weight: 700;
  }
  .mtt-preview-span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    padding: 2px 8px;
    background: var(--surface);
    border-radius: 3px;
    border: 1px solid var(--border);
  }

  /* Preview Date column cell — italic muted readout with weekend highlighting */
  .mtt-preview-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    line-height: 1.3;
  }
  .mtt-preview-cell.weekend {
    color: var(--sbg-red);
    font-style: normal;
    font-weight: 700;
  }
  .mtt-preview-cell.no-anchor {
    color: var(--text-faint);
    font-style: italic;
  }

  .empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
  /* v88: Floating Add Task button */
  .fab-add-task {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 18px;
    border-radius: 40px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #c8322b 0%, #a02620 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(200, 50, 43, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-family: inherit;
  }
  .fab-add-task:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(200, 50, 43, 0.45), 0 4px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #d13a32 0%, #a52a24 100%);
  }
  .fab-add-task:active { transform: translateY(0); }
  .fab-add-task .fab-plus {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin-top: -2px;
  }
  .fab-add-task .fab-label {
    line-height: 1;
  }
  .fab-add-task.hidden { display: none !important; }
  @media (max-width: 720px) {
    /* Collapse to circular icon-only on narrow screens */
    .fab-add-task {
      padding: 0;
      width: 56px;
      height: 56px;
      justify-content: center;
      right: 16px;
      bottom: 16px;
      border-radius: 50%;
    }
    .fab-add-task .fab-label { display: none; }
    .fab-add-task .fab-plus { font-size: 30px; margin-top: 0; }
  }
  .empty-state .icon { font-size: 48px; margin-bottom: 12px; }

  /* Compact secondary project details strip */
  .project-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
  }
  .project-compact-meta .cm-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 14px;
    border-right: 1px solid var(--border);
  }
  .project-compact-meta .cm-item:last-child { border-right: none; }
  .project-compact-meta .cm-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    font-weight: 700;
  }
  .project-compact-meta .cm-value {
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .project-compact-meta .cm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
  }
  .project-compact-meta .cm-avatar img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .project-compact-meta .cm-lead .cm-label { color: var(--sbg-red); }
  .project-compact-meta .cm-lead .cm-value { font-weight: 700; }
  .project-compact-meta .cm-value.link {
    color: var(--sbg-red);
    text-decoration: none;
  }
  .project-compact-meta .cm-value.link:hover { text-decoration: underline; }
  .project-compact-meta .cm-item.empty .cm-value { color: var(--text-faint); font-weight: 400; }

  /* OneDrive link special styling */
  .onedrive-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    background: #0078d4;
    color: #fff !important;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
  }
  .onedrive-chip:hover { background: #106ebe; }

  .project-item-od {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: #0078d4;
    color: #fff !important;
    border-radius: 3px;
    font-size: 11px;
    text-decoration: none;
    margin-left: 6px;
    vertical-align: middle;
    transition: background 0.12s;
  }
  .project-item-od:hover { background: #106ebe; }

  /* ===== Sidebar Project Sections (Currently Bidding / Past Pursuits) ===== */
  .project-section {
    margin-bottom: 14px;
  }
  .project-section:last-child { margin-bottom: 0; }

  .project-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 8px;
    margin-bottom: 4px;
    border-radius: 3px;
    background: var(--surface-2);
    border-left: 3px solid var(--sbg-red);
    user-select: none;
  }
  .project-section-header.clickable {
    cursor: pointer;
    transition: background 0.12s;
  }
  .project-section-header.clickable:hover { background: var(--surface-3); }

  .project-section-past .project-section-header {
    border-left-color: var(--text-faint);
    background: var(--surface);
  }

  .ps-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
  }
  .ps-dot-active {
    background: var(--sbg-red);
    box-shadow: 0 0 0 3px rgba(200, 50, 43, 0.18);
  }
  .ps-dot-past {
    background: var(--text-faint);
    opacity: 0.6;
  }
  /* v124: Duplicate Project modal — pick target workstream when duplicating */
  .dpm-source {
    background: rgba(10, 37, 64, 0.05);
    border-left: 3px solid var(--sbg-navy, #0a2540);
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 4px;
  }
  .dpm-source-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
  }
  .dpm-source-title {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    margin-top: 1px;
  }
  .dpm-source-meta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
    margin-top: 2px;
  }
  /* v130: Duplicate Project modal — user asked to just make it BIGGER.
     Simple override: 1100px max-width so there's plenty of room for the
     preset cards, options grid, and everything else. */
  .modal.dpm-modal {
    max-width: 1100px;
  }
  .dpm-ws-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .dpm-ws-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, transform 0.08s;
  }
  .dpm-ws-btn:hover {
    border-color: var(--sbg-navy, #0a2540);
    background: rgba(10, 37, 64, 0.03);
  }
  .dpm-ws-btn.active {
    border-color: var(--sbg-navy, #0a2540);
    background: var(--sbg-navy, #0a2540);
    color: #fff;
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.25);
  }
  .dpm-ws-btn.active:hover {
    background: #133860;
  }
  .dpm-ws-icon { font-size: 18px; line-height: 1; }
  .dpm-warn {
    background: rgba(200, 50, 43, 0.08);
    border-left: 3px solid var(--sbg-red, #c8322b);
    padding: 10px 12px;
    border-radius: 3px;
    margin-top: 10px;
  }
  .dpm-warn-title {
    font-weight: 700;
    color: var(--sbg-red, #c8322b);
    font-size: 13px;
    margin-bottom: 4px;
  }
  .dpm-warn-body {
    font-size: 12px;
    color: var(--text, #1a1a1a);
    line-height: 1.45;
  }
  .dpm-info {
    background: rgba(76, 175, 80, 0.10);
    border-left: 3px solid #4caf50;
    padding: 8px 12px;
    border-radius: 3px;
    margin-top: 10px;
  }
  .dpm-info-body {
    font-size: 12px;
    color: #2e7d32;
    font-weight: 600;
  }
  .dpm-carry-info {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  .dpm-carry-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
    margin-bottom: 2px;
  }
  .dpm-carry-body {
    font-size: 11.5px;
    color: var(--text, #1a1a1a);
    line-height: 1.45;
  }
  /* v130: Copy Mode preset picker + granular options panel — rebuilt
     as plain <button> elements after the label+radio pattern rendered
     with content escaping outside the modal in some browsers. */
  .dpm-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
  }
  .dpm-preset {
    display: block;
    text-align: left;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    width: 100%;
    transition: border-color 0.12s, background 0.12s;
  }
  .dpm-preset:hover {
    border-color: var(--sbg-navy, #0a2540);
    background: rgba(10, 37, 64, 0.02);
  }
  .dpm-preset.active {
    border-color: var(--sbg-navy, #0a2540);
    background: rgba(10, 37, 64, 0.06);
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.10);
  }
  .dpm-preset-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1a1a1a);
    margin-bottom: 4px;
  }
  .dpm-preset-desc {
    font-size: 12px;
    color: var(--text-dim, #6b7687);
    line-height: 1.4;
  }
  .dpm-options-panel {
    margin-top: 6px;
    padding: 12px 14px;
    background: rgba(10, 37, 64, 0.03);
    border: 1px solid rgba(10, 37, 64, 0.10);
    border-radius: 6px;
  }
  .dpm-options-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7687);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .dpm-options-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 18px;
  }
  .dpm-opts-group-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sbg-navy, #0a2540);
    margin-bottom: 4px;
  }
  .dpm-opts-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .dpm-opt {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .dpm-opt:hover { background: rgba(10, 37, 64, 0.04); }
  .dpm-opt input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--sbg-navy, #0a2540);
    flex-shrink: 0;
  }
  .dpm-opt-body { flex: 1; min-width: 0; }
  .dpm-opt-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    line-height: 1.3;
  }
  .dpm-opt-hint {
    font-size: 10.5px;
    color: var(--text-dim, #6b7687);
    line-height: 1.3;
    margin-top: 1px;
  }
  @media (max-width: 600px) {
    .modal.dpm-modal { padding: 16px; }
    .dpm-preset { padding: 8px 10px; }
  }
  /* v123: Workstream-based sidebar sections. Each project workstream
     (Bidding, Training, Events, Precon General, custom) gets its own
     collapsible section with a color-coded left border reflecting its
     theme so the user can distinguish sections at a glance. */
  .project-section-ws .project-section-header {
    border-left: 3px solid rgba(10, 37, 64, 0.15);
    padding-left: 9px;
  }
  .project-section-ws-bidding .project-section-header        { border-left-color: var(--sbg-red, #c8322b); }
  .project-section-ws-training .project-section-header       { border-left-color: var(--sbg-gold, #c07f00); }
  .project-section-ws-events .project-section-header         { border-left-color: #7c3aed; }
  .project-section-ws-precon-general .project-section-header { border-left-color: #4a5560; }
  .ps-ws-icon {
    font-size: 14px;
    margin-right: 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }
  .layout.sidebar-collapsed .ps-ws-icon { display: none; }
  .ps-title {
    flex: 1;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text);
  }
  .project-section-past .ps-title { color: var(--text-dim); }
  .ps-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--surface-3);
    padding: 1px 7px;
    border-radius: 2px;
    min-width: 20px;
    text-align: center;
  }
  .ps-chevron {
    font-size: 11px;
    color: var(--text-dim);
    width: 12px;
    text-align: center;
    transition: transform 0.15s;
  }
  .project-section.expanded .ps-chevron { transform: none; }
  .project-section-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .project-section-empty {
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
    text-align: center;
  }
  /* Past Pursuits items — dimmed to signal archival state */
  .project-section-past .project-item {
    opacity: 0.72;
  }
  .project-section-past .project-item:hover { opacity: 1; }
  .project-section-past .project-item.active { opacity: 1; }

  /* ===== Archived projects ===== */
  /* Section header dot — distinct from active/past */
  .ps-dot-archived {
    background: #6e6e7a;
    box-shadow: 0 0 0 2px rgba(110,110,122,0.18);
  }
  .project-section-archived {
    margin-top: 6px;
  }
  .project-section-archived .project-section-header {
    color: var(--text-dim);
  }
  /* Archived project items — more dimmed than past-pursuits + slight desat */
  .project-item.project-item-archived {
    opacity: 0.62;
    background: var(--surface-2);
    border-left: 2px solid #6e6e7a;
  }
  .project-item.project-item-archived:hover { opacity: 0.92; }
  .project-item.project-item-archived .project-item-thumb {
    filter: grayscale(0.6);
  }
  /* Small "ARCHIVED" badge inside the project name row */
  .pi-archived-badge {
    display: inline-block;
    background: #6e6e7a;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
  }

  /* ===== Inline kebab menu on project items =====
     Hover-revealed action menu: Edit / Archive / Delete (or Edit / Restore /
     Delete for archived items). Replaces the need to open the Edit Project
     modal just to archive or delete. */
  .project-item-actions {
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .pi-kebab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transition: all 0.12s;
  }
  .project-item:hover .pi-kebab {
    opacity: 0.7;
  }
  .project-item .pi-kebab:hover {
    background: var(--surface-3);
    color: var(--sbg-navy);
    border-color: var(--border);
    opacity: 1;
  }
  /* Keep the kebab visible when its menu is open even after the user
     mouses away */
  .pi-menu.open + .pi-kebab,
  .project-item-actions:has(.pi-menu.open) .pi-kebab {
    opacity: 1;
  }
  .pi-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    overflow: hidden;
    margin-top: 2px;
  }
  .pi-menu.open { display: block; }
  .pi-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.08s;
  }
  .pi-menu-item:last-child { border-bottom: none; }
  .pi-menu-item:hover {
    background: var(--surface-2);
  }
  .pi-menu-item.pi-menu-archive {
    color: var(--sbg-navy);
  }
  .pi-menu-item.pi-menu-archive:hover {
    background: rgba(10,37,64,0.08);
  }
  .pi-menu-item.pi-menu-restore {
    color: var(--green);
  }
  .pi-menu-item.pi-menu-restore:hover {
    background: rgba(46,125,82,0.1);
  }
  .pi-menu-item.pi-menu-delete {
    color: var(--sbg-red);
    font-weight: 700;
  }
  .pi-menu-item.pi-menu-delete:hover {
    background: var(--sbg-red);
    color: #fff;
  }

  /* ===== Bid Extension Panel (Project Modal) ===== */
  .bid-extension-panel {
    margin: 16px 0;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 4px;
  }
  .bex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .bex-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sbg-navy);
  }
  .bex-hint {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    text-align: right;
    max-width: 60%;
  }
  .bex-shift-display {
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    min-height: 20px;
  }
  .bex-shift-display.shift-positive { color: var(--green); background: rgba(46,125,82,0.08); border-color: var(--green); }
  .bex-shift-display.shift-negative { color: var(--sbg-red); background: rgba(200,50,43,0.08); border-color: var(--sbg-red); }

  /* Toggle switch */
  .bex-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 2px;
  }
  .bex-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    flex-shrink: 0;
  }
  .bex-toggle input { opacity: 0; width: 0; height: 0; }
  .bex-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--text-faint);
    transition: 0.2s;
    border-radius: 22px;
  }
  .bex-slider:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background-color: #fff;
    transition: 0.2s;
    border-radius: 50%;
  }
  .bex-toggle input:checked + .bex-slider { background-color: var(--sbg-red); }
  .bex-toggle input:checked + .bex-slider:before { transform: translateX(22px); }

  .bex-toggle-labels {
    flex: 1;
    font-size: 12px;
    line-height: 1.3;
  }
  .bex-toggle-label { display: none; }
  .bex-toggle-label.active {
    display: block;
    color: var(--text);
  }

  /* ===== v81: Project Health Score gauge =====
     Compact circular gauge sized to fit inline with action buttons. */
  .pv-health-gauge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 4px;
    height: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    color: var(--text);
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .pv-health-gauge:hover { transform: scale(1.02); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .pv-health-gauge.health-high { color: #2e7d52; border-color: rgba(46, 125, 82, 0.4); background: rgba(46, 125, 82, 0.05); }
  .pv-health-gauge.health-med  { color: var(--sbg-gold); border-color: rgba(192, 127, 0, 0.4); background: rgba(192, 127, 0, 0.06); }
  .pv-health-gauge.health-low  { color: var(--sbg-red); border-color: rgba(200, 50, 43, 0.4); background: rgba(200, 50, 43, 0.05); }
  .pv-health-gauge-svg { display: inline-flex; align-items: center; }
  .pv-health-gauge-body {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
  }
  .pv-health-gauge-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 13px;
  }
  .pv-health-gauge-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    opacity: 0.85;
    margin-top: 1px;
  }

  /* Health score popover */
  .hsp-popover {
    position: absolute;
    width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    padding: 14px 16px;
    z-index: 9000;
    font-family: 'Inter', system-ui, sans-serif;
  }
  .hsp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
  }
  .hsp-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sbg-navy);
  }
  .hsp-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dim);
    padding: 2px 6px;
    border-radius: 3px;
  }
  .hsp-close:hover { background: var(--surface-2); color: var(--text); }
  .hsp-overall {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 12px 0;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 10px;
  }
  .hsp-overall-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 36px;
    font-weight: 800;
    color: var(--sbg-navy);
    line-height: 1;
  }
  .hsp-overall-label {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.3;
  }
  .hsp-overall-sub { font-size: 11px; }
  .hsp-components { display: flex; flex-direction: column; gap: 9px; }
  .hsp-component {
    padding: 7px 10px;
    background: var(--surface-2);
    border-radius: 5px;
    font-size: 12px;
  }
  .hsp-component.is-excluded { opacity: 0.55; }
  .hsp-comp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
  }
  .hsp-comp-label { font-weight: 700; color: var(--text); }
  .hsp-comp-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 13px;
  }
  .hsp-comp-value.band-high { color: #2e7d52; }
  .hsp-comp-value.band-med  { color: var(--sbg-gold); }
  .hsp-comp-value.band-low  { color: var(--sbg-red); }
  .hsp-comp-raw {
    color: var(--text-dim);
    font-size: 11px;
    margin-bottom: 4px;
  }
  .hsp-comp-bar {
    height: 4px;
    background: var(--surface-3);
    border-radius: 2px;
    overflow: hidden;
  }
  .hsp-comp-fill { height: 100%; transition: width 0.3s ease; }
  .hsp-comp-fill.band-high { background: #2e7d52; }
  .hsp-comp-fill.band-med  { background: var(--sbg-gold); }
  .hsp-comp-fill.band-low  { background: var(--sbg-red); }
  .hsp-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 10.5px;
    color: var(--text-dim);
    line-height: 1.45;
  }

  /* ===== Project Header: Date Mode Indicator + Quick Toggle ===== */
  .date-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.12s;
  }
  .date-mode-chip:hover { transform: translateY(-1px); }
  .date-mode-chip.mode-original {
    background: var(--surface-3);
    color: var(--text-dim);
    border: 1px solid var(--border-strong);
  }
  .date-mode-chip.mode-revised {
    background: rgba(200,50,43,0.12);
    color: var(--sbg-red);
    border: 1px solid var(--sbg-red);
  }
  .date-mode-chip::before {
    content: '🔄';
    font-size: 11px;
  }

  /* "REV" badge — signals a date has been revised from its original */
  .rev-badge {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: var(--sbg-red);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1;
  }

  /* Original-date reference line shown under a revised date on metric cards */
  .orig-ref {
    display: block;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
  }

  /* Small REV pill shown inline on sidebar project cards */
  .sidebar-rev-pill {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    background: var(--sbg-red);
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.08em;
    margin-left: 5px;
    vertical-align: middle;
  }


  /* ===== Bid Countdown Card ===== */
  .bid-countdown-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--sbg-navy) 0%, #1a3a5c 100%);
    border: 1px solid var(--sbg-navy);
    border-radius: 4px;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .bid-countdown-card.countdown-past {
    background: linear-gradient(135deg, #6b1d18 0%, #8a2a23 100%);
    border-color: #6b1d18;
  }
  /* <1 HOUR — CRITICAL — deepest red, fastest pulse */
  .bid-countdown-card.countdown-critical {
    background: linear-gradient(135deg, #b01a12 0%, var(--sbg-red) 100%);
    border-color: #b01a12;
    animation: countdownPulseFast 0.9s ease-in-out infinite;
  }
  @keyframes countdownPulseFast {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0.9); }
    50% { box-shadow: 0 0 0 12px rgba(200,50,43,0); }
  }
  .bid-countdown-card.countdown-imminent {
    background: linear-gradient(135deg, var(--sbg-red) 0%, #e85d04 100%);
    border-color: var(--sbg-red);
    animation: countdownPulse 1.8s ease-in-out infinite;
  }
  @keyframes countdownPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0.7); }
    50% { box-shadow: 0 0 0 8px rgba(200,50,43,0); }
  }
  .bid-countdown-card.countdown-warning {
    background: linear-gradient(135deg, #c07f00 0%, #e6b422 100%);
    border-color: #c07f00;
    color: #fff;
  }
  /* <2 DAYS — ATTENTION — lighter amber, no animation (calm but colored) */
  .bid-countdown-card.countdown-attention {
    background: linear-gradient(135deg, #8a6400 0%, #c07f00 100%);
    border-color: #8a6400;
    color: #fff;
  }
  /* <5 DAYS — APPROACHING — navy with subtle amber accent */
  .bid-countdown-card.countdown-approaching {
    background: linear-gradient(135deg, var(--sbg-navy) 0%, #284a70 100%);
    border-color: #284a70;
    border-top: 3px solid #c07f00;
  }
  /* Trade Partner Bids countdown: same tier system but with a subtle identity accent
     — visible as a thin left-side stripe so it's distinguishable from the main Bid
     Submission countdown below it. Colors still switch per urgency tier. */
  .bid-countdown-card.bid-countdown-tradepartner {
    margin-bottom: 10px;
    border-left-width: 5px;
    border-left-style: solid;
  }
  .bid-countdown-card.bid-countdown-tradepartner:not(.countdown-past):not(.countdown-critical):not(.countdown-imminent):not(.countdown-warning):not(.countdown-attention):not(.countdown-approaching) {
    /* Default (no urgency yet applied) — muted teal stripe to signal "trade partner scope" */
    border-left-color: #1a9ec9;
  }
  /* Nudge banner when TP milestone not set */
  .tp-countdown-nudge {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: rgba(26,158,201,0.08);
    border: 1px dashed #1a9ec9;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text);
  }
  .tp-countdown-nudge strong { color: #1a9ec9; }
  .bcc-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    opacity: 0.85;
    margin-bottom: 3px;
  }
  .bcc-moment {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
  }
  .bcc-format {
    font-size: 10px;
    margin-top: 3px;
    opacity: 0.8;
    font-weight: 500;
  }
  .bcc-clock {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
  }
  .bcc-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    background: rgba(0,0,0,0.25);
    padding: 5px 6px;
    border-radius: 3px;
  }
  .bcc-num {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .bcc-u {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    opacity: 0.85;
    margin-top: 2px;
  }
  .bcc-sep {
    font-size: 18px;
    font-weight: 800;
    opacity: 0.5;
    padding-bottom: 13px;
  }
  .bcc-status {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 5px;
    text-align: right;
    opacity: 0.85;
  }
  @media print {
    .bid-countdown-card {
      background: #fff !important;
      color: #000 !important;
      border: 2px solid #000 !important;
    }
    .bcc-unit { background: #f0f0f0 !important; color: #000 !important; }
    .bcc-sep { color: #000 !important; }
  }
  @media (max-width: 900px) {
    .bid-countdown-card {
      grid-template-columns: 1fr;
    }
    .bcc-unit { min-width: 48px; }
    .bcc-num { font-size: 22px; }
  }

  /* ===== Revise Bid Date Modal ===== */
  .rbd-context {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .rbd-context .rbd-proj-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sbg-navy);
    margin-bottom: 6px;
  }
  .rbd-context .rbd-context-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    font-size: 12px;
  }
  .rbd-context .rbd-ctx-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
  }
  .rbd-context .rbd-ctx-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
  }
  .rbd-context .rbd-ctx-value.ctx-revised { color: var(--sbg-red); }

  .rbd-option-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .rbd-check-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    margin: 0;
  }
  .rbd-check-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
  }
  .rbd-check-label strong { font-weight: 700; }

  /* Team roster */
  .team-member-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 6px;
    background: var(--surface-2);
  }
  .team-member-row:hover { background: var(--surface); }
  .team-member-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    color: #fff; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .tm-photo-btn {
    position: absolute; bottom: -2px; right: -2px;
    background: var(--sbg-navy); color: #fff;
    border: 2px solid var(--surface-2);
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
  }
  .tm-photo-btn:hover { background: var(--sbg-red); }
  .team-member-info { line-height: 1.3; min-width: 0; }
  .team-member-info .tm-name { font-weight: 700; font-size: 14px; color: var(--text); }
  .tm-progress-wrap {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 140px;
  }
  .team-member-load {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--text-dim); font-weight: 600;
    background: var(--surface-3); padding: 3px 8px; border-radius: 3px;
    text-align: center;
  }
  .tm-progress {
    height: 4px; background: var(--surface-3);
    border-radius: 2px; overflow: hidden;
  }
  .tm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sbg-red), var(--green));
    transition: width 0.3s;
  }
  .team-empty {
    padding: 30px; text-align: center; color: var(--text-faint);
    font-style: italic; font-size: 13px;
    background: var(--surface-2); border-radius: 4px;
  }

  /* Avatar with photo (used across task cards, tabs, etc.) */
  .avatar.has-photo { overflow: hidden; padding: 0; }
  .avatar.has-photo img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
  }

  /* Due-soon badges (rendered as spans in HTML so label can be dynamic) */
  .due-badge {
    position: absolute;
    top: 4px; right: 4px;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
  }
  .due-badge.badge-soon { background: var(--fill-soon-border); }
  .due-badge.badge-imminent {
    background: var(--fill-imminent-border);
    animation: imminentPulse 1.8s ease-in-out infinite;
  }
  @keyframes imminentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,93,4,0.6); }
    50% { box-shadow: 0 0 0 5px rgba(232,93,4,0); }
  }

  /* Soon-due (2 days out) indicator — board cards */
  .task-card.is-soon {
    border-color: var(--fill-soon-border) !important;
    box-shadow: 0 0 0 1px var(--fill-soon-border);
  }
  .task-card.is-overdue.is-soon .due-badge,
  .task-card.is-overdue.is-imminent .due-badge { display: none; }

  /* Imminent (0–1 days out) indicator — board cards — MORE urgent */
  .task-card.is-imminent {
    border-color: var(--fill-imminent-border) !important;
    box-shadow: 0 0 0 2px var(--fill-imminent-border);
  }

  /* Table rows */
  .task-table tr.row-soon td {
    background: var(--fill-soon) !important;
    border-left: 3px solid var(--fill-soon-border) !important;
  }
  .task-table tr.row-soon td:first-child {
    box-shadow: inset 3px 0 0 var(--fill-soon-border);
  }
  .task-table tr.row-imminent td {
    background: var(--fill-imminent) !important;
    border-left: 3px solid var(--fill-imminent-border) !important;
    font-weight: 600;
  }
  .task-table tr.row-imminent td:first-child {
    box-shadow: inset 3px 0 0 var(--fill-imminent-border);
  }

  /* Table status-pill inline badges */
  .status-pill .due-inline {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 2px;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
  }
  .status-pill .due-inline.badge-soon { background: var(--fill-soon-border); }
  .status-pill .due-inline.badge-imminent { background: var(--fill-imminent-border); }

  /* Calendar events */
  .cal-event.soon-task {
    box-shadow: 0 0 0 1px var(--fill-soon-border) inset !important;
  }
  .cal-event.imminent-task {
    box-shadow: 0 0 0 2px var(--fill-imminent-border) inset !important;
    background: var(--fill-imminent) !important;
    font-weight: 600;
  }
  .cal-event .cal-due-flag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 2px;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    vertical-align: middle;
  }
  .cal-event .cal-due-flag.badge-soon { background: var(--fill-soon-border); }
  .cal-event .cal-due-flag.badge-imminent { background: var(--fill-imminent-border); }

  /* ===================== Due Alert Tabs ===================== */
  /* Two-scope wrapper: Project Alerts stacked above My Alerts.
     Full-width layout gives each expanded alert panel enough room to show
     all task details (title, chips, notes) without squeezing. */
  .alert-scope-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .alert-scope {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sbg-navy);
    border-radius: 4px;
    min-width: 0;
  }
  .alert-scope-my {
    border-left-color: var(--sbg-red);
    background: rgba(200,50,43,0.02);
  }
  .alert-scope-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .alert-scope-header .asc-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sbg-navy);
  }
  .alert-scope-my .alert-scope-header .asc-title { color: var(--sbg-red); }
  .alert-scope-header .asc-sub {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }
  /* Empty-state inside an alert scope */
  .alert-strip-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
  }
  .alert-strip-empty .ase-icon {
    font-size: 18px;
    font-style: normal;
  }

  .alert-strip {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .alert-strip:empty { display: none; }
  .alert-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 2px solid;
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: transform 0.12s, box-shadow 0.12s;
    color: var(--text);
    user-select: none;
  }
  .alert-tab:hover { transform: translateY(-1px); }
  .alert-tab.tab-overdue {
    background: var(--fill-overdue);
    color: #fff;
    border-color: var(--fill-overdue-border);
    animation: alertFlash 2.2s ease-in-out infinite;
  }
  .alert-tab.tab-imminent {
    background: var(--fill-imminent);
    border-color: var(--fill-imminent-border);
    color: #7a3800;
  }
  .alert-tab.tab-imminent::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fill-imminent-border);
    animation: alertPulse 1.4s ease-in-out infinite;
  }
  .alert-tab.tab-soon {
    background: var(--fill-soon);
    border-color: var(--fill-soon-border);
    color: #6a5200;
  }
  .alert-tab.tab-soon::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fill-soon-border);
  }
  .alert-tab .alert-count {
    background: rgba(0,0,0,0.18);
    color: inherit;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 3px;
    min-width: 28px;
    text-align: center;
  }
  .alert-tab.tab-overdue .alert-count { background: rgba(255,255,255,0.25); color: #fff; }
  .alert-tab.active {
    box-shadow: 0 0 0 3px rgba(10,37,64,0.15);
    transform: translateY(-1px);
  }
  .alert-tab.tab-overdue.active { box-shadow: 0 0 0 3px rgba(200,50,43,0.3); }
  .alert-tab.tab-imminent.active { box-shadow: 0 0 0 3px rgba(232,93,4,0.3); }
  .alert-tab.tab-soon.active { box-shadow: 0 0 0 3px rgba(230,180,34,0.3); }
  /* Unassigned tab — neutral gray with a subtle blue accent */
  .alert-tab.tab-unassigned {
    background: var(--surface-2);
    border-color: var(--text-dim);
    color: var(--text);
  }
  .alert-tab.tab-unassigned::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-dim);
  }
  .alert-tab.tab-unassigned:hover {
    background: var(--surface-3);
  }
  .alert-tab.tab-unassigned.active {
    box-shadow: 0 0 0 3px rgba(107,118,135,0.25);
  }
  /* Unassigned panel */
  .alert-panel.panel-unassigned { border-color: var(--text-dim); }
  .alert-panel.panel-unassigned .alert-panel-title { color: var(--text); }
  .alert-panel.panel-unassigned .alert-item { border-left-color: var(--text-dim); }
  /* Unassigned badge on individual alert items */
  .alert-item .ai-flag.badge-unassigned {
    background: var(--text-dim);
    color: #fff;
  }

  /* ===== Status-based alert tabs (Completed / Not Started / Pending) ===== */
  .alert-tab.tab-completed {
    background: rgba(46,125,82,0.1);
    border-color: var(--green);
    color: var(--green);
  }
  .alert-tab.tab-completed::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green);
  }
  .alert-tab.tab-completed:hover { background: rgba(46,125,82,0.18); }
  .alert-tab.tab-completed.active { box-shadow: 0 0 0 3px rgba(46,125,82,0.25); }

  .alert-tab.tab-notstarted {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
  }
  .alert-tab.tab-notstarted::before {
    content: '○';
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 700;
  }
  .alert-tab.tab-notstarted:hover { background: var(--surface-3); }
  .alert-tab.tab-notstarted.active { box-shadow: 0 0 0 3px rgba(107,118,135,0.25); }

  .alert-tab.tab-pending {
    background: rgba(110,78,184,0.1);
    border-color: #6e4eb8;
    color: #6e4eb8;
  }
  .alert-tab.tab-pending::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: #6e4eb8;
  }
  .alert-tab.tab-pending:hover { background: rgba(110,78,184,0.18); }
  .alert-tab.tab-pending.active { box-shadow: 0 0 0 3px rgba(110,78,184,0.3); }
    background: rgba(110,78,184,0.1);
    border-color: #6e4eb8;
    color: #6e4eb8;
  }
  .alert-tab.tab-pending::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: #6e4eb8;
  }
  .alert-tab.tab-pending:hover { background: rgba(110,78,184,0.18); }
  .alert-tab.tab-pending.active { box-shadow: 0 0 0 3px rgba(110,78,184,0.3); }

  /* Panels */
  .alert-panel.panel-completed { border-color: var(--green); }
  .alert-panel.panel-completed .alert-panel-title { color: var(--green); }
  .alert-panel.panel-completed .alert-item { border-left-color: var(--green); }

  .alert-panel.panel-notstarted { border-color: var(--border-strong); }
  .alert-panel.panel-notstarted .alert-panel-title { color: var(--text); }
  .alert-panel.panel-notstarted .alert-item { border-left-color: var(--border-strong); }
  .alert-panel.panel-not-started { border-color: var(--border-strong); }
  .alert-panel.panel-not-started .alert-panel-title { color: var(--text); }
  .alert-panel.panel-not-started .alert-item { border-left-color: var(--border-strong); }

  .alert-panel.panel-pending { border-color: #6e4eb8; }
  .alert-panel.panel-pending .alert-panel-title { color: #6e4eb8; }
  .alert-panel.panel-pending .alert-item { border-left-color: #6e4eb8; }

  /* Status-based badges on individual alert items */
  .alert-item .ai-flag.badge-status-completed { background: var(--green); color: #fff; }
  .alert-item .ai-flag.badge-status-notstarted { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }
  .alert-item .ai-flag.badge-status-pending { background: #6e4eb8; color: #fff; }
  /* Empty-state (no tasks in tier) — dimmed */
  .alert-tab.empty {
    opacity: 0.45;
    background: var(--surface-2) !important;
    color: var(--text-dim) !important;
    border-color: var(--border-strong) !important;
    animation: none !important;
  }
  .alert-tab.empty::before { display: none !important; }
  .alert-tab.empty:hover { opacity: 0.7; transform: none; }
  .alert-tab.tab-overdue.empty {
    background: rgba(46, 125, 82, 0.08) !important;
    color: var(--green) !important;
    border-color: var(--green) !important;
    opacity: 0.75;
  }
  .alert-tab.empty .alert-count { background: var(--surface-3); color: var(--text-dim); }
  .alert-tab.tab-overdue.empty .alert-count { background: rgba(46,125,82,0.15); color: var(--green); }
  @keyframes alertPulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 4px transparent; opacity: 0.6; }
  }
  @keyframes alertFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,50,43,0); }
    50% { box-shadow: 0 0 0 4px rgba(200,50,43,0.25); }
  }

  /* Alert detail panel (when a tab is clicked) */
  .alert-panel {
    background: var(--surface);
    border: 2px solid;
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .alert-panel.panel-overdue { border-color: var(--fill-overdue-border); }
  .alert-panel.panel-imminent { border-color: var(--fill-imminent-border); }
  .alert-panel.panel-soon { border-color: var(--fill-soon-border); }
  .alert-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .alert-panel-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .alert-panel.panel-overdue .alert-panel-title { color: var(--fill-overdue-border); }
  .alert-panel.panel-imminent .alert-panel-title { color: var(--fill-imminent-border); }
  .alert-panel.panel-soon .alert-panel-title { color: #6a5200; }
  .alert-panel-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 18px;
    padding: 4px 8px; border-radius: 3px;
  }
  .alert-panel-close:hover { background: var(--surface-3); color: var(--text); }
  .alert-list { display: flex; flex-direction: column; gap: 6px; }
  .alert-item {
    display: block;
    padding: 10px 12px;
    background: var(--surface-2);
    border-left: 3px solid;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    margin-bottom: 6px;
  }
  .alert-item:hover {
    background: var(--surface-3);
    transform: translateX(2px);
  }
  .alert-item:last-child { margin-bottom: 0; }
  .alert-panel.panel-overdue .alert-item { border-left-color: var(--fill-overdue-border); }
  .alert-panel.panel-imminent .alert-item { border-left-color: var(--fill-imminent-border); }
  .alert-panel.panel-soon .alert-item { border-left-color: var(--fill-soon-border); }

  /* Primary row: stage, title, assignee, due, flag, action buttons */
  .alert-item .ai-primary-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    gap: 12px;
    align-items: center;
  }
  .alert-item .ai-stage {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    white-space: nowrap;
  }
  /* v115: Series occurrence badge on project-alerts unacknowledged rows */
  .ai-series-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    background: linear-gradient(135deg, var(--sbg-gold, #c07f00) 0%, #d99b1f 100%);
    color: #fff;
    border-radius: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(192, 127, 0, 0.3);
    white-space: nowrap;
  }
  .alert-item .ai-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    line-height: 1.35;
    /* Allow up to 2 lines before truncating — long task titles stay legible */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .alert-item .ai-assignee {
    font-size: 12px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .alert-item .ai-due {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
  }
  .alert-item .ai-hours {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #1a7593;
    background: rgba(26,158,201,0.10);
    border: 1px solid rgba(26,158,201,0.3);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .alert-item .ai-flag {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 2px;
    color: #fff;
    white-space: nowrap;
  }
  .alert-item .ai-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .alert-item .ai-flag.badge-overdue { background: var(--fill-overdue-border); }
  .alert-item .ai-flag.badge-imminent { background: var(--fill-imminent-border); }
  .alert-item .ai-flag.badge-soon { background: var(--fill-soon-border); }

  /* Secondary details row: chips + notes preview */
  .alert-item .ai-details-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .alert-item .ai-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }
  .alert-item .ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid transparent;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  .alert-item .ai-chip-priority {
    /* Inline styles set the tinted background based on priority level */
    border: 1px solid;
  }
  .alert-item .ai-chip-category {
    background: rgba(10, 37, 64, 0.08);
    color: var(--sbg-navy);
  }
  .alert-item .ai-chip-source {
    background: rgba(123, 67, 151, 0.1);
    color: var(--purple);
  }
  .alert-item .ai-chip-support {
    background: rgba(43, 115, 200, 0.1);
    color: var(--blue);
  }
  .alert-item .ai-chip-offset {
    font-family: 'JetBrains Mono', monospace;
    background: var(--surface-3);
    color: var(--text-dim);
  }
  .alert-item .ai-chip-messages {
    background: rgba(46, 125, 82, 0.12);
    color: var(--green);
  }
  .alert-item .ai-support-avatar {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
  }
  .alert-item .ai-support-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .alert-item .ai-notes {
    font-size: 11.5px;
    color: var(--text-2);
    line-height: 1.45;
    background: var(--surface);
    padding: 6px 10px;
    border-radius: 3px;
    border-left: 2px solid var(--border-strong);
    font-style: italic;
    /* Allow up to 3 lines of notes, truncate beyond */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Responsive: stack primary row fields on narrow panels */
  @media (max-width: 900px) {
    .alert-item .ai-primary-row {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "stage flag"
        "title title"
        "assignee due"
        "actions actions";
      gap: 6px;
    }
    .alert-item .ai-stage { grid-area: stage; }
    .alert-item .ai-title { grid-area: title; }
    .alert-item .ai-assignee { grid-area: assignee; }
    .alert-item .ai-due { grid-area: due; justify-self: end; }
    .alert-item .ai-flag { grid-area: flag; justify-self: end; }
    .alert-item .ai-actions { grid-area: actions; justify-self: start; flex-wrap: wrap; }
  }

  /* Company logo edit button in header */
  .brand-logo { cursor: pointer; position: relative; }
  .brand-logo:hover::after {
    content: 'Edit';
    position: absolute;
    inset: 0;
    background: rgba(10,37,64,0.78);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 4px;
  }
  .brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

  /* Master Task Template Manager modal */
  .mtt-list {
    max-height: 500px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface-2);
  }
  .mtt-row {
    display: grid;
    /* drag(24) chev(24) title(2fr) stage(1fr) category(1fr) source(90) critical(40) roles(110) hours(56) days(112) remove(auto)
       v63b: days col bumped from 70 → 112 to fit the S/B anchor toggle + number input comfortably */
    grid-template-columns: 24px 24px 2fr 1fr 1fr 90px 40px 110px 56px 112px 84px auto;
    gap: 8px; align-items: center;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
  }
  .mtt-row:last-child { border-bottom: none; }
  .mtt-row:hover { background: var(--surface-2); }
  .mtt-row input, .mtt-row select {
    padding: 5px 7px;
    font-size: 12px;
  }
  .mtt-row .mtt-drag {
    cursor: grab; color: var(--text-faint); text-align: center;
    user-select: none; font-size: 14px;
  }
  .mtt-row .mtt-drag:active { cursor: grabbing; }
  .mtt-row.dragging { opacity: 0.4; }
  .mtt-header {
    background: var(--sbg-navy);
    color: #fff;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 24px 24px 2fr 1fr 1fr 90px 40px 110px 56px 112px 84px auto;
    gap: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
  }

  /* ===== INLINE ROLE PILLS (v61) =====
     Three small pill buttons (S / L1 / L2) that toggle the role-requirement
     flags on a template task. Active = solid color matching the role's
     palette (Senior=navy, Lead1=red, Lead2=gold), inactive = outlined gray.
     Sized to fit in the 110px Roles column with 8px gap padding. */
  .mtt-role-pills {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
  }
  .mtt-role-pill {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-dim);
    padding: 3px 0;
    width: 32px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.1s;
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
  }
  .mtt-role-pill:hover {
    border-color: var(--sbg-navy);
    color: var(--sbg-navy);
    background: rgba(10,37,64,0.05);
  }
  /* Active states — each role gets its own color */
  .mtt-role-pill-senior.active {
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
    box-shadow: 0 1px 3px rgba(10,37,64,0.4);
  }
  .mtt-role-pill-lead1.active {
    background: var(--sbg-red);
    color: #fff;
    border-color: var(--sbg-red);
    box-shadow: 0 1px 3px rgba(200,50,43,0.4);
  }
  .mtt-role-pill-lead2.active {
    background: var(--sbg-gold);
    color: #fff;
    border-color: var(--sbg-gold);
    box-shadow: 0 1px 3px rgba(192,127,0,0.4);
  }
  /* Hover when active — slightly darker / extra glow */
  .mtt-role-pill.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }

  /* ===== SPLIT LAYOUT — List (left) + Schedule (right) ===== */
  .mtt-split-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .mtt-split-toolbar-left, .mtt-split-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }
  .mtt-split-toolbar-right { justify-content: flex-end; }
  .mtt-split-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sbg-navy);
  }
  .mtt-split-hint {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }
  .mtt-lock-btn {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
    font-family: 'Inter', sans-serif;
  }
  .mtt-lock-btn:hover {
    border-color: var(--sbg-navy);
  }
  .mtt-lock-btn.locked {
    color: var(--text);
    background: var(--surface-2);
  }
  .mtt-lock-btn.unlocked {
    color: #fff;
    background: var(--sbg-red);
    border-color: var(--sbg-red);
    box-shadow: 0 1px 3px rgba(200,50,43,0.3);
  }

  /* The split container — flex with gap. Min-widths force shrinking
     children rather than overflowing. */
  /* The split container — stacked vertically (list on top, schedule below).
     Mode-driven visibility controlled by data-mode attr on the wrapper. */
  .mtt-split {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
  }
  .mtt-split-list {
    width: 100%;
    min-width: 0; /* allow column to shrink instead of overflowing parent */
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    flex: 0 0 auto;
  }
  .mtt-split-list .mtt-header {
    border-radius: 4px 4px 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .mtt-split-schedule {
    width: 100%;
    min-width: 0;
    max-height: 45vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 auto;
  }
  /* ===== LAYOUT MODE STATES ===== */
  /* List Only: schedule pane hidden, list expands to claim freed vertical space */
  .mtt-split[data-mode="list"] .mtt-split-schedule {
    display: none;
  }
  .mtt-split[data-mode="list"] .mtt-split-list {
    max-height: 70vh;
  }
  /* Schedule Only: list pane hidden, schedule expands to fill modal */
  .mtt-split[data-mode="schedule"] .mtt-split-list {
    display: none;
  }
  .mtt-split[data-mode="schedule"] .mtt-split-schedule {
    max-height: 75vh;
    min-height: 500px;
  }
  /* Both (default): split the available vertical space — list ~50vh, schedule ~45vh */
  .mtt-split[data-mode="both"] .mtt-split-list {
    max-height: 40vh;
  }
  .mtt-split[data-mode="both"] .mtt-split-schedule {
    max-height: 45vh;
  }

  /* ===== LAYOUT MODE SWITCHER (segmented buttons) ===== */
  .mtt-mode-switcher {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface);
  }
  .mtt-mode-btn {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
    font-family: 'Inter', sans-serif;
    color: var(--text-dim);
    white-space: nowrap;
  }
  .mtt-mode-btn:last-child { border-right: none; }
  .mtt-mode-btn:hover {
    background: var(--surface-2);
    color: var(--text);
  }
  .mtt-mode-btn.active {
    background: var(--sbg-navy);
    color: #fff;
  }

  /* ===== SCHEDULE PANE — day-axis + bars ===== */
  .mtt-sched-axis-wrap {
    border-bottom: 2px solid var(--sbg-navy);
    background: var(--sbg-navy);
    color: #fff;
    flex: 0 0 auto;
  }
  .mtt-sched-axis {
    position: relative;
    height: 40px;
    /* Day tick width is set inline by renderMttSchedule (--mtt-day-width) */
    /* Total width set inline based on day range; container scrolls horizontally */
    overflow: visible;
  }
  .mtt-sched-axis-scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .mtt-sched-tick {
    position: absolute;
    top: 14px;  /* minor ticks start lower, shorter */
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.10);
  }
  /* v70: Major ticks (every 5 days) — full-height, brighter */
  .mtt-sched-tick.major {
    top: 0;
    background: rgba(255,255,255,0.30);
    width: 1px;
  }
  .mtt-sched-tick-label {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    letter-spacing: 0.04em;
    pointer-events: none;
  }
  /* Bid Start / Bid Day markers — bold red vertical lines.
     v70: Two markers now — Bid Start (the kickoff date, offset 0) and
     Bid Day (the submission date, offset = previewBidDay - previewBidStart).
     Both render in red but use slightly different visual treatments to
     distinguish them. */
  .mtt-sched-bidline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sbg-red);
    z-index: 3;
    pointer-events: none;
  }
  /* Bid Day line uses a slightly different appearance — dashed to distinguish
     from Bid Start, plus a thicker line. */
  .mtt-sched-bidline.bid-day {
    width: 3px;
    background: repeating-linear-gradient(
      to bottom,
      var(--sbg-red) 0px,
      var(--sbg-red) 6px,
      transparent 6px,
      transparent 10px
    );
    background-color: transparent;
  }
  .mtt-sched-bidline-label {
    position: absolute;
    top: 22px;
    transform: translateX(-50%);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: var(--sbg-red);
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
  }
  /* v70: Bid Day label sits at a different vertical position so it doesn't
     overlap the Bid Start label if they're close, and uses gold to visually
     reinforce that this is the deadline (the more urgent marker). */
  .mtt-sched-bidline-label.bid-day {
    top: 4px;
    background: var(--sbg-red);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--sbg-red);
  }
  /* Body — vertical list of task bars, scrolls horizontally with the axis */
  .mtt-sched-body {
    flex: 1 1 auto;
    overflow: auto; /* both x and y; bars can extend beyond viewport on either axis */
    position: relative;
  }
  .mtt-sched-rowwrap {
    /* This wrapper holds all rows AND the bid-day vertical line spanning
       the full timeline height. Width is set inline to match axis. */
    position: relative;
    /* min-height makes empty schedules still show the bid line */
    min-height: 100px;
  }
  .mtt-sched-row {
    position: relative;
    height: 28px;
    border-bottom: 1px solid var(--border);
  }
  .mtt-sched-row:nth-child(even) {
    background: rgba(10,37,64,0.025);
  }
  /* Task bar — full-width 1-day block per user choice */
  .mtt-sched-bar {
    position: absolute;
    top: 3px;
    height: 22px;
    background: var(--sbg-navy);
    border: 1px solid var(--sbg-navy);
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(10,37,64,0.2);
    cursor: default;
    user-select: none;
    transition: box-shadow 0.12s, transform 0.05s;
  }
  /* When unlocked, bars get the move cursor and a subtle glow on hover */
  .mtt-split.unlocked .mtt-sched-bar {
    cursor: ew-resize;
  }
  .mtt-split.unlocked .mtt-sched-bar:hover {
    box-shadow: 0 2px 6px rgba(10,37,64,0.4), 0 0 0 2px rgba(192,127,0,0.5);
    z-index: 5;
  }
  .mtt-sched-bar.dragging {
    opacity: 0.85;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(200,50,43,0.4);
    transform: scale(1.02);
  }
  /* Stage color tint — applied via inline style in JS, but a base class
     for the colored bar variant exists for future extensibility */
  .mtt-sched-bar.is-critical {
    border-color: var(--sbg-red);
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(200,50,43,0.4), 0 1px 3px rgba(10,37,64,0.3);
  }
  /* Empty state when no tasks match filter */
  .mtt-sched-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 12px;
  }
  /* When locked, dim the bars slightly to signal interaction is disabled */
  .mtt-split:not(.unlocked) .mtt-sched-bar {
    opacity: 0.92;
  }

  /* ===== TEMPLATE ROW: Critical toggle + Hours + Expand chevron + Details panel ===== */
  /* Critical toggle button — single 🔥 icon, dim when off, red when on */
  .mtt-critical-btn {
    width: 32px; height: 28px;
    background: transparent;
    border: 1.5px dashed var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: all 0.12s;
    filter: grayscale(0.7);
    opacity: 0.55;
  }
  .mtt-critical-btn:hover {
    border-color: var(--sbg-red);
    background: rgba(200,50,43,0.05);
    opacity: 0.85;
  }
  .mtt-critical-btn.active {
    background: var(--sbg-red);
    border-color: var(--sbg-red);
    border-style: solid;
    filter: none;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(200,50,43,0.3);
  }

  /* Hours input — narrow numeric */
  .mtt-hours-input {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
  }

  /* Expand chevron — toggles details panel below */
  .mtt-expand-btn {
    width: 22px; height: 22px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    transition: transform 0.18s, background 0.12s, color 0.12s;
  }
  .mtt-expand-btn:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--sbg-navy);
  }
  .mtt-expand-btn.expanded {
    transform: rotate(90deg);
    background: var(--sbg-navy);
    color: #fff;
    border-color: var(--sbg-navy);
  }

  /* Expanded details panel — appears beneath the row when chevron clicked */
  .mtt-details-panel {
    grid-column: 1 / -1;
    padding: 16px 16px 18px;
    background: linear-gradient(180deg, rgba(10,37,64,0.04) 0%, rgba(10,37,64,0.01) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 2px solid var(--sbg-navy);
    margin-top: 0;
  }
  .mtt-details-panel-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--sbg-navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
  }
  .mtt-details-section {
    margin-bottom: 14px;
  }
  .mtt-details-section:last-child {
    margin-bottom: 0;
  }

  /* ===== ROLE-REQUIREMENT CHECKBOX SECTION (v60) ===== */
  /* Three checkboxes per template task — Senior / Lead 1 / Lead 2.
     Active state has navy left-border accent + soft navy tint background. */
  .mtt-role-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sbg-navy);
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 6px;
  }
  .mtt-role-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
  .mtt-role-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
    flex: 1 1 calc(33% - 6px);
    min-width: 180px;
  }
  .mtt-role-check:hover {
    border-color: var(--sbg-navy);
    background: rgba(10,37,64,0.04);
  }
  .mtt-role-check.active {
    background: rgba(10,37,64,0.08);
    border-color: var(--sbg-navy);
    box-shadow: 0 0 0 1px rgba(10,37,64,0.2);
  }
  .mtt-role-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sbg-navy);
    cursor: pointer;
  }
  .mtt-role-check-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
  }
  .mtt-role-check-hint {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.2;
    margin-left: auto;
  }

  .mtt-details-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
  }
  .mtt-details-hint {
    font-size: 10.5px;
    color: var(--text-dim);
    font-weight: 500;
    margin-left: 6px;
    font-style: italic;
  }
  .mtt-tips-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    background: var(--surface);
  }
  .mtt-tips-textarea:focus {
    outline: 2px solid var(--sbg-navy);
    outline-offset: -1px;
  }
  /* Sub-list items (deliverables / checklist) — flex rows with input + delete */
  .mtt-sublist {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mtt-sublist-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 4px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  /* Checklist rows have an extra column for the required-flag toggle */
  .mtt-sublist-row.is-checklist {
    grid-template-columns: 24px 1fr auto auto;
  }
  .mtt-sublist-row:hover {
    border-color: var(--sbg-navy);
  }
  .mtt-sublist-bullet {
    text-align: center;
    color: var(--text-faint);
    font-size: 12px;
    user-select: none;
  }
  .mtt-sublist-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 12px;
    background: transparent;
  }
  .mtt-sublist-input:focus {
    border-color: var(--sbg-navy);
    background: var(--surface-2);
    outline: none;
  }
  .mtt-required-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.12s;
    white-space: nowrap;
  }
  .mtt-required-toggle:hover {
    border-color: var(--sbg-red);
    color: var(--sbg-red);
  }
  .mtt-required-toggle.active {
    background: var(--sbg-red);
    border-color: var(--sbg-red);
    color: #fff;
  }
  .mtt-sublist-delete {
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
  }
  .mtt-sublist-delete:hover {
    background: rgba(200,50,43,0.1);
    color: var(--sbg-red);
  }
  .mtt-sublist-add {
    margin-top: 4px;
    padding: 5px 10px;
    background: transparent;
    border: 1.5px dashed var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
  }
  .mtt-sublist-add:hover {
    border-color: var(--sbg-navy);
    border-style: solid;
    color: var(--sbg-navy);
    background: var(--surface-2);
  }
  .mtt-sublist-empty {
    padding: 8px 12px;
    text-align: center;
    color: var(--text-faint);
    font-size: 11px;
    font-style: italic;
  }
  /* Visual indicator on collapsed rows when they have rich content set */
  .mtt-row .mtt-richness-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sbg-navy);
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.6;
  }
  .mtt-empty { padding: 30px; text-align: center; color: var(--text-faint); font-style: italic; font-size: 13px; }
  .mtt-remove-btn {
    background: transparent; border: none; color: var(--red);
    cursor: pointer; padding: 4px 6px; font-size: 14px;
  }

  /* ============= Manage Stages section (collapsible inside MTT modal) ============= */
  .mtt-stages-mgr {
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
    overflow: hidden;
  }
  .mtt-stages-mgr summary {
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, rgba(10,37,64,0.04) 0%, rgba(10,37,64,0.08) 100%);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s;
  }
  .mtt-stages-mgr summary::-webkit-details-marker { display: none; }
  .mtt-stages-mgr summary::before {
    content: '▸';
    color: var(--sbg-navy);
    font-size: 12px;
    transition: transform 0.18s ease;
    flex-shrink: 0;
  }
  .mtt-stages-mgr[open] summary::before { transform: rotate(90deg); }
  .mtt-stages-mgr[open] summary { border-bottom-color: var(--border); }
  .mtt-stages-mgr summary:hover {
    background: linear-gradient(135deg, rgba(10,37,64,0.08) 0%, rgba(10,37,64,0.12) 100%);
  }
  .mtt-stages-summary-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--sbg-navy);
    text-transform: uppercase;
  }
  .mtt-stages-summary-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    background: var(--sbg-navy);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
  }
  .mtt-stages-summary-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }
  .mtt-stages-mgr-body {
    padding: 14px;
  }
  .mtt-add-stage-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    background: var(--surface);
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .mtt-stages-header {
    display: grid;
    grid-template-columns: 28px 60px 1.4fr 2fr 60px auto;
    gap: 8px;
    background: var(--sbg-navy);
    color: #fff;
    padding: 8px 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
  }
  .mtt-stages-list {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: var(--surface-2);
    max-height: 360px;
    overflow-y: auto;
  }
  .mtt-stages-row {
    display: grid;
    grid-template-columns: 28px 60px 1.4fr 2fr 60px auto;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
  }
  .mtt-stages-row:last-child { border-bottom: none; }
  .mtt-stages-row:hover { background: var(--surface-2); }
  .mtt-stages-order {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 700;
  }
  .mtt-stage-icon-input {
    text-align: center;
    font-size: 16px !important;
    padding: 4px !important;
  }
  .mtt-stage-name-input,
  .mtt-stage-desc-input {
    padding: 5px 7px;
    font-size: 12px;
  }
  .mtt-stage-name-input { font-weight: 600; }
  .mtt-stage-desc-input { color: var(--text-dim); }
  .mtt-stage-usage {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    background: var(--surface-3);
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 700;
  }
  .mtt-stages-actions {
    display: flex;
    gap: 2px;
  }
  .mtt-stages-actions button {
    padding: 3px 7px;
    font-size: 11px;
  }
  .mtt-stages-actions button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .mtt-remove-btn:hover { background: rgba(200,50,43,0.1); border-radius: 3px; }

  /* CSI / Division list group header */
  .csi-group-header {
    padding: 8px 12px;
    background: var(--sbg-navy);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .empty-state h3 { color: var(--text); margin-bottom: 8px; font-size: 20px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
  .empty-state p { font-size: 13px; margin-bottom: 16px; }
  .hidden { display: none !important; }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

  @media (max-width: 1400px) { .project-meta-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 1300px) { .board { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 1100px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; max-height: none; }
    .project-meta-grid { grid-template-columns: 1fr 1fr; }
    .board { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 700px) {
    .board { grid-template-columns: 1fr; }
    .main { padding: 16px; }
    header { padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
    .header-stats { gap: 14px; }
    .calendar-grid { font-size: 11px; }
    .cal-day { min-height: 70px; }
  }

  /* ========== PRINT STYLES ========== */
  @media print {
    @page { margin: 0.4in; size: landscape; }
    body {
      background: #fff !important;
      color: #000 !important;
      font-size: 10pt;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    /* Hide chrome */
    header, .sidebar, .view-switcher, .group-tabs,
    .section-actions, .add-task-btn, .calendar-nav,
    .cal-view-switcher, .cal-assignee-filter,
    .alert-strip, .alert-panel,
    #groupingSection > div:first-child,
    button[onclick*="printView"],
    .modal-backdrop { display: none !important; }

    .layout { grid-template-columns: 1fr !important; }
    .main { padding: 0 !important; }
    .project-header { border: 1px solid #000 !important; break-inside: avoid; }
    .project-header h2 { color: #000 !important; }
    .meta-card { border: 1px solid #999 !important; }

    /* Print header/footer block */
    #printHeader {
      display: block !important;
      border-bottom: 3px solid #c8322b;
      padding-bottom: 10px;
      margin-bottom: 14px;
    }
    #printHeader .ph-brand {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px; font-weight: 800; letter-spacing: 0.06em;
      color: #0a2540; text-transform: uppercase;
    }
    #printHeader .ph-brand .ph-o { color: #c8322b; }
    #printHeader .ph-sub {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px; color: #666; letter-spacing: 0.15em;
      text-transform: uppercase; margin-top: 2px;
    }
    #printHeader .ph-meta {
      margin-top: 6px; font-size: 10pt; color: #333;
      display: flex; gap: 20px; flex-wrap: wrap;
    }

    /* Board view for print */
    .board { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; }
    .column { border: 1px solid #000 !important; padding: 6px !important; min-height: 0 !important; break-inside: avoid-column; }
    .column-title { font-size: 9pt !important; }
    .task-card { break-inside: avoid; page-break-inside: avoid; margin-bottom: 4px; box-shadow: none !important; }
    .task-card.status-not-started { background: #f1f3f6 !important; border: 1px solid #888 !important; }
    .task-card.status-in-progress { background: #e3efff !important; border: 1px solid #4478b3 !important; }
    .task-card.status-blocked { background: #fde4e2 !important; border: 1px solid #c8322b !important; }
    .task-card.status-pending { background: #ece1f3 !important; border: 1px solid #7b4397 !important; }
    .task-card.status-done { background: #def3e7 !important; border: 1px solid #2e7d52 !important; }
    .task-card.is-overdue { background: #ff3b30 !important; border: 2px solid #c41e17 !important; color: #fff !important; }
    .task-card.is-overdue * { color: #fff !important; }

    /* All-stages panels */
    .stage-panel { break-inside: avoid; border: 1px solid #000 !important; margin-bottom: 10px; }

    /* Table view */
    .task-table { font-size: 8.5pt !important; }
    .task-table thead { background: #0a2540 !important; color: #fff !important; -webkit-print-color-adjust: exact; }
    .task-table th { color: #fff !important; padding: 5px 6px !important; font-size: 8pt !important; }
    .task-table td { padding: 4px 6px !important; }
    .task-table tr { break-inside: avoid; page-break-inside: avoid; }
    .task-table tr.row-not-started td { background: #f1f3f6 !important; }
    .task-table tr.row-in-progress td { background: #e3efff !important; }
    .task-table tr.row-blocked td { background: #fde4e2 !important; }
    .task-table tr.row-pending td { background: #ece1f3 !important; }
    .task-table tr.row-done td { background: #def3e7 !important; color: #666 !important; }
    .task-table tr.row-done td.task-title-cell { text-decoration: line-through; }
    .task-table tr.row-overdue td { background: #ff3b30 !important; color: #fff !important; font-weight: 600 !important; }
    .task-table tr.row-soon td { background: #fff4d6 !important; }
    .bic-chip { border: 1px solid #999 !important; font-size: 7pt !important; padding: 1px 4px !important; }

    /* Calendar view */
    .calendar-grid { break-inside: avoid; }
    .cal-day { min-height: 80px !important; break-inside: avoid; page-break-inside: avoid; }
    .calendar-grid.cal-day-view .cal-day { min-height: 0 !important; }
    .cal-dow { background: #0a2540 !important; color: #fff !important; }
    .cal-event.status-not-started { background: #f1f3f6 !important; border-left: 3px solid #888 !important; }
    .cal-event.status-in-progress { background: #e3efff !important; border-left: 3px solid #4478b3 !important; }
    .cal-event.status-blocked { background: #fde4e2 !important; border-left: 3px solid #c8322b !important; }
    .cal-event.status-pending { background: #ece1f3 !important; border-left: 3px solid #7b4397 !important; }
    .cal-event.status-done { background: #def3e7 !important; border-left: 3px solid #2e7d52 !important; }
    .cal-event.overdue-task { background: #ff3b30 !important; color: #fff !important; border-left: 3px solid #c41e17 !important; }

    /* Ensure status dots print */
    .dot { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .avatar { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .priority-bar { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Force project image to print */
    .project-banner img { max-height: 80px !important; }

    /* Print legend */
    #printLegend {
      display: flex !important;
      gap: 16px;
      margin-top: 14px;
      padding: 10px;
      border: 1px solid #999;
      font-size: 9pt;
      flex-wrap: wrap;
    }
    #printLegend .leg {
      display: flex; align-items: center; gap: 6px;
    }
    #printLegend .swatch {
      width: 14px; height: 14px;
      border: 1px solid #333;
      display: inline-block;
    }

    /* Page break utilities */
    .section-header { break-inside: avoid; }
  }
  #printHeader, #printLegend { display: none; }

  /* =============================================================
     ONBOARDING TOUR — interactive walkthrough overlay
     ============================================================= */
  .tour-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: none;
    pointer-events: none;
  }
  .tour-overlay.active { display: block; }
  /* Four-panel mask so the spotlight rectangle stays clear and clickable.
     Each panel covers one side around the spotlight bounds. */
  .tour-mask-panel {
    position: absolute;
    background: rgba(10, 37, 64, 0.62);
    backdrop-filter: blur(1px);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
  }
  .tour-spotlight-ring {
    position: absolute;
    border: 3px solid var(--sbg-gold);
    border-radius: 6px;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.85),
      0 0 24px 4px rgba(212, 160, 23, 0.55);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    animation: tour-pulse 2.4s ease-in-out infinite;
  }
  @keyframes tour-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 24px 4px rgba(212, 160, 23, 0.55); }
    50%      { box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 32px 8px rgba(212, 160, 23, 0.85); }
  }
  .tour-tooltip {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--sbg-red);
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(10, 37, 64, 0.35);
    padding: 18px 20px 16px;
    width: 360px;
    max-width: calc(100vw - 32px);
    /* Cap the entire tooltip so it never pushes the footer below the
       viewport. Body scrolls inside if needed. 32px allows for top/bottom
       breathing room when positioned. */
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    z-index: 2001;
  }
  .tour-tooltip-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 8px;
    flex-shrink: 0;
  }
  .tour-tooltip-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px; font-weight: 700;
    color: var(--sbg-navy); letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
  }
  .tour-tooltip-step {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--text-dim);
    letter-spacing: 0.08em; white-space: nowrap;
    background: var(--surface-3); padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid var(--border);
  }
  .tour-tooltip-body {
    font-family: 'Inter', sans-serif;
    font-size: 13px; line-height: 1.55;
    color: #2c3441;
    margin-bottom: 14px;
    /* Scroll inside if the step is long enough to overflow the tooltip
       max-height. Keeps the footer (Back / Next buttons) always visible. */
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .tour-tooltip-body strong { color: var(--sbg-navy); }
  .tour-tooltip-body code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: var(--surface-3);
    padding: 1px 5px; border-radius: 3px;
    color: var(--sbg-red-dark);
  }
  .tour-tooltip-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
  }
  .tour-tooltip-progress {
    flex: 1;
    height: 4px;
    background: var(--surface-3);
    border-radius: 2px;
    overflow: hidden;
    margin-right: 4px;
  }
  .tour-tooltip-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sbg-red) 0%, var(--sbg-gold) 100%);
    transition: width 0.28s ease;
  }
  .tour-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    transition: all 0.15s ease;
    white-space: nowrap;
  }
  .tour-btn:hover { background: var(--surface-3); color: var(--sbg-navy); }
  .tour-btn-primary {
    background: linear-gradient(135deg, var(--sbg-navy) 0%, var(--sbg-navy-2) 100%);
    color: #fff;
    border-color: var(--sbg-navy);
  }
  .tour-btn-primary:hover {
    background: linear-gradient(135deg, var(--sbg-red) 0%, var(--sbg-red-dark) 100%);
    border-color: var(--sbg-red);
    color: #fff;
  }
  .tour-btn-skip {
    background: transparent;
    border-color: transparent;
    color: var(--text-dim);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 7px 8px;
  }
  .tour-btn-skip:hover { color: var(--sbg-red); background: transparent; }
  .tour-tooltip-arrow {
    position: absolute;
    width: 14px; height: 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
  }
  .tour-tooltip[data-arrow="top"]    .tour-tooltip-arrow { top: -8px;    left: 28px; transform: rotate(225deg); border-left: 1px solid var(--border); border-top: 1px solid var(--border); border-right: none; border-bottom: none; }
  .tour-tooltip[data-arrow="bottom"] .tour-tooltip-arrow { bottom: -8px; left: 28px; }
  .tour-tooltip[data-arrow="left"]   .tour-tooltip-arrow { top: 24px; left: -8px;  transform: rotate(135deg); }
  .tour-tooltip[data-arrow="right"]  .tour-tooltip-arrow { top: 24px; right: -8px; transform: rotate(-45deg); }
  .tour-tooltip[data-arrow="none"]   .tour-tooltip-arrow { display: none; }

  /* Welcome modal — first contact, sits inside a regular modal-backdrop */
  .tour-welcome-modal { max-width: 540px; text-align: center; padding: 32px 28px 26px; }
  .tour-welcome-icon {
    font-size: 44px; margin-bottom: 8px;
    display: inline-block;
    filter: drop-shadow(0 4px 8px rgba(10, 37, 64, 0.18));
  }
  .tour-welcome-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px; font-weight: 800;
    color: var(--sbg-navy); letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 4px 0 6px;
  }
  .tour-welcome-title .accent { color: var(--sbg-red); }
  .tour-welcome-sub {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; letter-spacing: 0.18em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .tour-welcome-body {
    font-family: 'Inter', sans-serif;
    font-size: 14px; line-height: 1.6;
    color: #2c3441;
    margin-bottom: 22px;
  }
  .tour-welcome-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-bottom: 22px;
  }
  .tour-welcome-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 8px;
  }
  .tour-welcome-stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 800;
    color: var(--sbg-red);
    line-height: 1;
  }
  .tour-welcome-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; letter-spacing: 0.12em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-top: 4px;
  }
  .tour-welcome-actions {
    display: flex; gap: 10px; justify-content: center;
    flex-wrap: wrap;
  }
  .tour-welcome-actions .tour-btn { padding: 10px 22px; font-size: 13px; }

  /* Replay button in sidebar — sits under Help Center */
  .sb-tour-btn { width: 100%; justify-content: center;
    background: linear-gradient(135deg, var(--sbg-gold) 0%, #c07f00 100%) !important;
    color: #fff !important;
    border-color: #c07f00 !important;
    margin-top: 6px;
  }
  .sb-tour-btn:hover {
    background: linear-gradient(135deg, #b8920f 0%, #a07000 100%) !important;
  }

  /* Mobile: tooltip becomes a centered card */
  @media (max-width: 640px) {
    .tour-tooltip {
      width: calc(100vw - 32px);
      left: 16px !important;
      right: 16px;
      top: auto !important;
      bottom: 16px;
    }
    .tour-tooltip-arrow { display: none; }
  }

  /* Print: never show tour overlays */
  @media print {
    .tour-overlay, #tourWelcomeModal { display: none !important; }
  }