/* =============================================
   Keka Design System — Custom Properties
   ============================================= */
:root {
  --primary: #7C46F1;
  --primary-dark: #5A2DD1;
  --primary-soft: #EDE9FF;
  --accent: #1077DA;
  --accent-soft: #E8F2FD;
  --green: #16A34A;
  --green-soft: #DCFCE7;
  --teal: #0891B2;
  --teal-soft: #CFFAFE;
  --amber: #D97706;
  --amber-soft: #FEF3C7;
  --orange: #EA580C;
  --orange-soft: #FFEDD5;
  --yellow: #EAB308;
  --yellow-soft: #FEF9C3;
  --red: #DC2626;
  --red-soft: #FEE2E2;
  --neutral: #6B6560;
  --neutral-soft: #F0EEF8;

  --bg: #F6F5FB;
  --surface: #FFFFFF;
  --surface-2: #F0EEF8;
  --border: #E4E1EF;
  --border-strong: #C9C4DE;
  --text-primary: #1A1814;
  --text-secondary: #6B6560;
  --text-tertiary: #9993AE;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-m: 0 6px 20px rgba(0,0,0,0.10);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-primary: 0 2px 8px rgba(124,70,241,0.28);
  --depth-shadow: rgba(15,23,42,0.10); /* slate depth layer under KPI hover shadows; darker in body.dark */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-xl: 20px;
  --radius-pill: 100px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t: 220ms;
  --t-slow: 350ms;
  --t-xfast: 120ms;
  --ease-spring: cubic-bezier(0.34, 1.38, 0.64, 1);
  --scrim: rgba(15,14,20,0.5); /* unified modal/panel scrim (was 0.3/0.35/0.45/0.55 per overlay) */
  --scrim-blur: 4px;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;
  --frozen-hover-bg: var(--primary-soft);

  /* Primary color opacity scale */
  --primary-a04: rgba(124,70,241,0.04);
  --primary-a08: rgba(124,70,241,0.08);
  --primary-a10: rgba(124,70,241,0.10);
  --primary-a12: rgba(124,70,241,0.12);
  --primary-a15: rgba(124,70,241,0.15);
  --primary-a20: rgba(124,70,241,0.20);
  --primary-a30: rgba(124,70,241,0.30);
  --primary-a50: rgba(124,70,241,0.50);

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-overlay: 500;
  --z-top: 9999;
}

/* Dark mode tokens */
body.dark {
  --bg: #0F0E14;
  --surface: #18161F;
  --surface-2: #211E2A;
  --border: #2D2A3A;
  --border-strong: #3D3850;
  --text-primary: #EEEAF8;
  --text-secondary: #9993AE;
  --text-tertiary: #6B6580;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
  --shadow-m: 0 6px 20px rgba(0,0,0,0.28);
  --shadow: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-primary: 0 2px 10px rgba(124,70,241,0.40); /* tighter violet glow — 0.28 read as haze on dark surfaces */
  --depth-shadow: rgba(0,0,0,0.45); /* slate 10% depth layer is invisible on #0F0E14 */
  --primary-soft: rgba(124,70,241,0.15);
  --frozen-hover-bg: color-mix(in srgb, var(--primary) 22%, var(--surface));
  --accent-soft: rgba(16,119,218,0.15);
  --green-soft: rgba(22,163,74,0.15);
  --teal-soft: rgba(8,145,178,0.15);
  --amber-soft: rgba(217,119,6,0.15);
  --orange-soft: rgba(234,88,12,0.18);
  --yellow-soft: rgba(234,179,8,0.18);
  --red-soft: rgba(220,38,38,0.15);
  --neutral-soft: rgba(107,101,96,0.15);
}

/* =============================================
   Reset & Base
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; } /* scroll-behavior removed — caused perf issues on mobile */

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  display: flex;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — fixes iOS Safari address-bar reflow */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; }
.hidden { display: none !important; }

/* Lucide icon sizing */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { display: block; }

/* =============================================
   Animations
   ============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes snackIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fadeUp 0.5s var(--ease) both; }

/* =============================================
   Scrollbar
   ============================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* Firefox parity with the webkit rules above */

/* =============================================
   Text selection (brand)
   ============================================= */
::selection      { background: var(--primary); color: #fff; }
::-moz-selection { background: var(--primary); color: #fff; }

/* =============================================
   Navigation Sidebar
   ============================================= */
.nav-rail {
  width: 224px;
  min-width: 224px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow-x: hidden;
  /* Single smooth ease-in-out — no spring overshoot on width transitions */
  transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1),
              min-width 260ms cubic-bezier(0.4, 0, 0.2, 1),
              background var(--t-slow) var(--ease);
}

/* Collapsed sidebar */
.nav-rail.collapsed { width: 60px; min-width: 60px; }

.nav-rail.collapsed .brand-text,
.nav-rail.collapsed .nav-label,
.nav-rail.collapsed .nav-section-label,
.nav-rail.collapsed .user-info { display: none; }

/* Collapsed: NO layout-changing properties — only opacity hides labels */
/* Layout stays identical so the browser never reflows during the width transition */
.nav-rail.collapsed .nav-count { opacity: 0; pointer-events: none; }
.nav-rail.collapsed .kb-beta-tag { display: none; }
.nav-rail.collapsed .nav-collapse-btn { position: static; transform: none; margin-left: 0; }

/* Labels: max-width + opacity transition — GPU composite, no layout reflow */
.nav-label,
.brand-text,
.nav-section-label,
.user-info {
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 260ms cubic-bezier(0.4,0,0.2,1),
              opacity     var(--t-fast) var(--ease);
}
.nav-rail.collapsed .nav-label,
.nav-rail.collapsed .brand-text,
.nav-rail.collapsed .nav-section-label,
.nav-rail.collapsed .user-info {
  max-width: 0;
  opacity: 0;
}

/* Sidebar tooltip — position:fixed, appended to body by JS, escapes overflow */
.nav-tooltip {
  position: fixed;
  background: var(--text-primary);
  color: var(--surface);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius-s);
  pointer-events: none;
  box-shadow: var(--shadow);
  z-index: 9998; /* below inline-edit dropdown (9999) */
  opacity: 0;
  transition: opacity var(--t-xfast) var(--ease);
}
.nav-tooltip.visible { opacity: 1; }

/* Collapse toggle button */
.nav-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-s);
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.nav-collapse-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-collapse-btn svg { width: 15px; height: 15px; }
.nav-rail.collapsed .nav-collapse-btn { transform: none; }

body.dark .nav-rail {
  background: rgba(15,14,20,0.92);
  /* backdrop blur removed: the rail is in-flow — only the flat page background is
     behind it, so the blur rendered nothing yet kept a GPU backdrop pass alive (and
     made the rail a containing block for fixed children in dark mode only).
     Rollback: restore backdrop-filter: blur(12px) saturate(1.4) (+ -webkit-). */
}

.nav-rail-top {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
}
/* Expanded padding keeps the rail header on the same divider baseline as the main top bar.
   Collapsed header: padding-top(10) + brand(34) + gap(0) + btn(20) = 64px content + 1px border = 65px total.
   Top-bar auto-height = padding(14)+icon-btn(36)+padding(14)=64px + 1px border = 65px total. */
.nav-rail.collapsed .nav-rail-top { justify-content: center; align-items: center; padding: 10px 0 0; flex-direction: column; gap: 0; }
.nav-rail.collapsed .nav-collapse-btn { height: 20px; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.brand-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(145deg, #8B5BF2 0%, #7C46F1 55%, #5B2CC9 100%);
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 2px 6px rgba(106,58,244,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
}
.brand-icon svg { width: 22px; height: 22px; }

/* Dark mode: inverse logo — white tile + Royal Blue mark (via currentColor) */
body.dark .brand-icon {
  background: #fff;
  color: #7C46F1;
  border: 1px solid rgba(124,70,241,0.20);
  box-shadow: 0 2px 8px rgba(0,0,0,0.40);
}

.brand-text {
  display: flex;
  flex-direction: column;
  white-space: normal;
  line-height: 1.1;
}
.brand-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.brand-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 1px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Program-switch transition overlay (HCR ⇄ PER) ── */
.prog-switch-overlay {
  position: fixed;
  display: none;            /* set to flex by JS during a switch */
  align-items: center;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, rgba(247,246,251,0.55), rgba(247,246,251,0.30));
}
body.dark .prog-switch-overlay {
  background: radial-gradient(120% 120% at 50% 40%, rgba(20,16,31,0.55), rgba(20,16,31,0.32));
}
.pso-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  will-change: transform, opacity;
}
.pso-mark svg { width: 56px; height: 56px; display: block; filter: drop-shadow(0 10px 24px rgba(124,70,241,0.40)); }
.pso-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1A1330);
  text-align: center;
}
body.dark .pso-name { color: var(--text-primary); }

/* ── Program Toggle (HCR / PER) ── */
.prog-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 6px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(124,70,241,0.08), rgba(124,70,241,0));
}
/* Sliding indicator — GSAP moves this, CSS just styles it */
.prog-slider {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,70,241,0.18), rgba(124,70,241,0.08));
  border: 1px solid rgba(124,70,241,0.42);
  box-shadow: 0 12px 26px rgba(124,70,241,0.14), inset 0 1px 0 rgba(255,255,255,0.55);
  pointer-events: none;
}
body.dark .prog-slider {
  background: linear-gradient(135deg, rgba(124,70,241,0.3), rgba(124,70,241,0.12));
  border-color: rgba(167,139,250,0.34);
  /* Soften the 55% white inset sheen for dark surfaces. Rollback: remove this box-shadow line. */
  box-shadow: 0 12px 26px rgba(124,70,241,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-rail.collapsed .prog-slider { border-radius: var(--radius-m); }
.prog-pill {
  flex: 1;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(124,70,241,0.16);
  border-radius: 12px;
  background: rgba(255,255,255,0.68);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
  line-height: 1;
}
.prog-pill:hover {
  color: var(--text-primary);
  border-color: rgba(124,70,241,0.32);
  transform: translateY(-1px);
}
.prog-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.prog-pill__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Active pill: slider provides the fill, while the pill keeps the text color.
   Collapsed rail adds its own border so the active state stays legible even
   when the compact layout visually compresses the slider layer. */
.prog-pill--active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--primary);
}
body.dark .prog-pill {
  background: rgba(24,22,31,0.9);
  border-color: rgba(167,139,250,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark .prog-pill--active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-primary);
}
.nav-rail.collapsed .prog-toggle {
  flex-direction: column;
  gap: 6px;
  padding: 10px 6px 8px;
  background: transparent;
}
.nav-rail.collapsed .prog-pill {
  flex: 0 0 auto;
  width: 40px;
  min-height: 32px;
  padding: 0;
  gap: 0;
  border-radius: var(--radius-m);
  box-shadow: none;
}
.nav-rail.collapsed .prog-pill--active {
  border-color: rgba(124,70,241,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}
body.dark .nav-rail.collapsed .prog-pill--active {
  border-color: rgba(167,139,250,0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-rail.collapsed .prog-pill:hover {
  transform: none;
  box-shadow: none;
}
.nav-rail.collapsed .prog-pill__icon {
  display: none;
}
.nav-rail.collapsed .prog-pill__label {
  font-size: 9px;
  letter-spacing: .11em;
}

.nav-items {
  flex: 1;
  padding: 10px 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;   /* prevents horizontal scrollbar when items wider than 60px collapsed rail */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-m);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative;
  text-align: left;
}

.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }

.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.nav-item.active .nav-item-icon { color: var(--primary); }

.nav-item-icon {
  display: flex;
  align-items: center;
  width: 18px;
  flex-shrink: 0;
}
.nav-item-icon svg { width: 16px; height: 16px; }

.nav-indicator { position: relative; display: flex; align-items: center; }

/* Inline count pill — right side of nav item */
.nav-count {
  margin-left: auto;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  min-width: 24px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  letter-spacing: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item.active .nav-count {
  background: var(--primary);
  color: #fff;
}
.nav-item:hover .nav-count { background: var(--border); color: var(--text-primary); }
/* Hide count in collapsed mode */
.nav-rail.collapsed .nav-count { display: none; }

.nav-label { font-size: 13.5px; }

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 2px 12px 4px;
}

.nav-rail-bottom {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-m);
  width: 100%;
  transition: background var(--t-fast) var(--ease);
}
.user-chip:hover { background: var(--surface-2); }
.nav-rail.collapsed .user-chip { justify-content: center; padding: 8px 0; gap: 0; }
.nav-rail.collapsed .nav-rail-bottom { padding: 12px 0; }

.user-info { display: flex; flex-direction: column; text-align: left; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-role { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

/* =============================================
   Avatars
   ============================================= */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  color: #fff;
  letter-spacing: 0.02em;
}

.avatar-sm { width: 26px; height: 26px; font-size: 9px; }

/* Tooltip — shared by avatars and score badges (stack-rank breakdown).
   .badge[data-tooltip] added: app.js emits data-tooltip on score badges but only
   .avatar had a renderer, so the breakdown text never showed. Rollback: remove
   the .badge[data-tooltip] selectors + the position rule below. */
.badge[data-tooltip] { position: relative; }
.avatar[data-tooltip]::after,
.badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font-size: 11px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--radius-s);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-xfast);
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow);
  font-weight: 500;
}
.avatar[data-tooltip]:hover::after,
.badge[data-tooltip]:hover::after { opacity: 1; }

/* =============================================
   Main Content
   ============================================= */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  transition: background var(--t-slow) var(--ease);
}

/* =============================================
   Top App Bar
   ============================================= */
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  transition: background var(--t-slow) var(--ease);
}

body.dark .top-bar {
  background: rgba(24,22,31,0.92);
  /* backdrop blur removed (in-flow bar, flat background behind — see .nav-rail).
     Rollback: restore backdrop-filter: blur(12px) saturate(1.4) (+ -webkit-). */
}

.page-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Search Bar — collapsed icon pill, expands on click ── */
.search-bar {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 7px 8px;
  gap: 0;
  cursor: pointer;
  flex-shrink: 0;
  /* drive open/close via padding + gap transition; width comes from inner wrapper */
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    padding 340ms var(--ease),
    gap 340ms var(--ease);
}
.search-bar:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.search-bar:hover .search-icon { color: var(--primary); }
.search-bar--open {
  background: var(--surface);
  border-color: var(--border);
  padding: 7px 12px;
  gap: 8px;
  cursor: default;
}
.search-bar--open:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a15);
}

/* Icon — stays fixed left */
.search-icon {
  color: var(--text-secondary);
  display: flex;
  flex-shrink: 0;
  pointer-events: none;
  transition: color var(--t-fast) var(--ease);
}
.search-bar--open .search-icon { color: var(--text-primary); }
.search-icon svg { width: 15px; height: 15px; }

/* Inner wrapper — max-width drives the expand animation */
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  transition: max-width var(--t-slow) var(--ease);
}
.search-bar--open .search-input-wrap {
  max-width: 240px;
}

.search-input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 500;
  width: 160px;
  min-width: 0;
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease) 140ms;
}
.search-bar--open .search-input {
  opacity: 1;
  pointer-events: all;
}
.search-input::placeholder { color: var(--text-tertiary); }

.search-clear {
  color: var(--text-tertiary);
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease);
  animation: sc-pop var(--t-fast) var(--ease);   /* Rollback: remove this line + @keyframes sc-pop. Replays on each unhide (.hidden toggle) */
}
/* appear pop for the search clear (×) button — fires every time .hidden is removed */
@keyframes sc-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.search-clear:hover { color: var(--text-primary); }
.search-clear svg { width: 14px; height: 14px; }

/* Icon Button */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.icon-btn svg { width: 17px; height: 17px; }
.notif-bell-motion {
  position: absolute;
  inset: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.btn-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Primary Button */
.btn-filled {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-m);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-primary);
  transition: background var(--t-fast) var(--ease), transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease);
  white-space: nowrap;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep — same as kb-ask-btn */
.btn-filled::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}
.btn-filled:hover::before { transform: translateX(100%); }
.btn-filled:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,70,241,0.42);
}
.btn-filled:active { transform: scale(0.96); box-shadow: var(--shadow-primary); }
.btn-filled:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.btn-filled svg { width: 15px; height: 15px; }

/* Ghost/Outlined Button */
.btn-outlined {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn-outlined:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-outlined:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-outlined svg { width: 14px; height: 14px; }

/* Text Button */
.btn-text {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-m);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-text:hover { background: var(--primary-soft); color: var(--primary-dark); }
.btn-text:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-text svg { width: 14px; height: 14px; }

/* =============================================
   Views
   ============================================= */
.view { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.view.active { display: flex; }
/* Entrance animation is OPT-IN: switchView adds .view-enter-anim only on real navigations —
   never on HTML parse, never during a program switch (the blur reveal handles that). This is
   why the initial view doesn't double-animate (no parse anim + no re-activation replay). */
.view.view-enter-anim { animation: view-enter 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.view#view-all-requests {
  position: relative;
  isolation: isolate;
  --requests-morph-wash-bg: linear-gradient(118deg, rgba(124,70,241,0.16) 0%, rgba(124,70,241,0.06) 28%, rgba(8,145,178,0.12) 58%, rgba(16,185,129,0.08) 100%);
  --requests-morph-sheen-bg: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 47%, rgba(255,255,255,0) 100%);
  --requests-morph-wash-filter: blur(18px) saturate(1.14);
  --requests-morph-sheen-filter: blur(28px);
  --requests-ghost-aura-bg:
    radial-gradient(circle at 18% 50%, rgba(124,70,241,0.18), transparent 28%),
    radial-gradient(circle at 78% 52%, rgba(8,145,178,0.14), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 48%, rgba(255,255,255,0) 100%);
  --requests-ghost-aura-filter: blur(30px) saturate(1.12);
}
.view#view-all-requests::before,
.view#view-all-requests::after {
  content: '';
  position: absolute;
  inset: 96px 18px 20px;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
}
.view#view-all-requests::before {
  border-radius: 26px;
  background: var(--requests-morph-wash-bg);
  filter: var(--requests-morph-wash-filter);
}
.view#view-all-requests::after {
  inset: 118px 8% 42px;
  border-radius: var(--radius-pill);
  background: var(--requests-morph-sheen-bg);
  filter: var(--requests-morph-sheen-filter);
}
.requests-surface-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}
.requests-surface-panel {
  position: absolute;
  inset: 0;
  min-height: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-origin: 50% 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.requests-surface-panel--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}
.requests-surface-panel--inactive {
  z-index: 1;
}
/* Inactive surface hidden with content-visibility, not visibility (Oct 2026).
   visibility and pointer-events are INHERITED: flipping either on a panel restyles
   every descendant — ~14k elements (all 293 rows + the board) each time, several
   times per table⇄board morph, which is why the morph lagged with every record
   shown and stayed smooth under ~70. content-visibility is not inherited and keeps
   the hidden panel's rendering state cached, so showing it again does not restyle
   the subtree. Its contents are unfocusable and not hit-testable; the panel box
   itself sits under the active one (z-index). Browsers without content-visibility
   keep the visibility/pointer-events rules above.
   Rollback: delete this block + the stage ::after shield below. */
@supports (content-visibility: hidden) {
  .requests-surface-panel {
    visibility: visible;
    pointer-events: auto;
    content-visibility: hidden;
  }
  .requests-surface-panel--active,
  .view.requests-view--morphing .requests-surface-panel {
    content-visibility: visible;
  }
}
/* Click shield for the morph — replaces pointer-events:none on the panels (an
   inherited flip that restyled every row). One box over the stage, so clicks
   during the ~0.7s morph land nowhere. */
.view.requests-view--morphing .requests-surface-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
}
.view#view-all-requests.requests-view--morphing .requests-surface-panel {
  visibility: visible;
}
.view#view-all-requests.requests-view--morphing::before {
  animation: requests-fluid-wash 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.view#view-all-requests.requests-view--morphing::after {
  animation: requests-fluid-sheen 720ms var(--ease) both;
}
.view-mode-ghost-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  overflow: hidden;
}
.view-mode-ghost {
  position: absolute;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(28, 18, 66, 0.18);
  transform-origin: 50% 12%;
  background: var(--surface);
}
.view-mode-ghost-aura {
  position: absolute;
  inset: 112px 9% 44px;
  border-radius: var(--radius-pill);
  background: var(--requests-ghost-aura-bg);
  filter: var(--requests-ghost-aura-filter);
  opacity: 0;
}
body.dark .view#view-all-requests {
  --requests-morph-wash-bg: linear-gradient(118deg, rgba(124,70,241,0.11) 0%, rgba(124,70,241,0.05) 28%, rgba(8,145,178,0.08) 58%, rgba(16,185,129,0.05) 100%);
  --requests-morph-sheen-bg: linear-gradient(90deg, rgba(124,70,241,0) 0%, rgba(124,70,241,0.08) 36%, rgba(8,145,178,0.07) 52%, rgba(16,185,129,0.04) 68%, rgba(124,70,241,0) 100%);
  --requests-morph-wash-filter: blur(18px) saturate(1.02);
  --requests-morph-sheen-filter: blur(28px) saturate(1);
  --requests-ghost-aura-bg:
    radial-gradient(circle at 18% 50%, rgba(124,70,241,0.11), transparent 30%),
    radial-gradient(circle at 78% 52%, rgba(8,145,178,0.09), transparent 32%),
    linear-gradient(90deg, rgba(124,70,241,0) 0%, rgba(124,70,241,0.07) 40%, rgba(8,145,178,0.06) 58%, rgba(124,70,241,0) 100%);
  --requests-ghost-aura-filter: blur(30px) saturate(1.01);
}

/* ── PER All Requests view-mode morphing (mirrors HCR) ───────────────────── */
.view#view-per-all-requests {
  position: relative;
  isolation: isolate;
}
.view#view-per-all-requests.requests-view--morphing .requests-surface-panel {
  visibility: visible;
}
.view#view-per-all-requests.requests-view--morphing::before {
  animation: requests-fluid-wash 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.view#view-per-all-requests.requests-view--morphing::after {
  animation: requests-fluid-sheen 720ms var(--ease) both;
}
.view#view-per-all-requests::before,
.view#view-per-all-requests::after {
  content: '';
  position: absolute;
  inset: 96px 18px 20px;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
}
.view#view-per-all-requests::before {
  border-radius: 26px;
  background: linear-gradient(118deg, rgba(124,70,241,0.16) 0%, rgba(124,70,241,0.06) 28%, rgba(8,145,178,0.12) 58%, rgba(16,185,129,0.08) 100%);
  filter: blur(18px) saturate(1.14);
}
.view#view-per-all-requests::after {
  inset: 118px 8% 42px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 47%, rgba(255,255,255,0) 100%);
  filter: blur(28px);
}
body.dark .view#view-per-all-requests::after {
  background: linear-gradient(90deg, rgba(124,70,241,0) 0%, rgba(124,70,241,0.08) 36%, rgba(8,145,178,0.07) 52%, rgba(16,185,129,0.04) 68%, rgba(124,70,241,0) 100%);
}

@keyframes view-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes requests-fluid-wash {
  0%   { opacity: 0; transform: scale(0.92) translate3d(0, 24px, 0); }
  28%  { opacity: 0.82; }
  62%  { opacity: 0.56; transform: scale(1.02) translate3d(0, -4px, 0); }
  100% { opacity: 0; transform: scale(1.08) translate3d(0, -18px, 0); }
}
@keyframes requests-fluid-sheen {
  0%   { opacity: 0; transform: translate3d(-16%, 28px, 0) scaleX(0.88); }
  24%  { opacity: 0.78; }
  100% { opacity: 0; transform: translate3d(18%, -18px, 0) scaleX(1.08); }
}


/* =============================================
   Filter Row
   ============================================= */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 24px 8px;
  flex-shrink: 0;
  position: relative;   /* establish stacking context */
  z-index: 70;          /* above sticky thead (z-index: 60) so filter dropdowns render above it */
}
.filter-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.filter-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Filters button */
.filter-panel-btn { gap: 6px; }
.filter-panel-btn svg { width: 14px; height: 14px; }
.fp-count {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-left: 2px;
}

/* Active filter chips */
.active-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--primary-soft);
  border: 1px solid rgba(124,70,241,0.25);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.active-chip:hover { background: rgba(124,70,241,0.2); }
.active-chip strong { font-weight: 700; }
.chip-x { font-size: 14px; line-height: 1; opacity: 0.7; margin-left: 2px; }

/* Filter panel */
.fp-overlay {
  position: fixed; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  z-index: var(--z-toast);
}
.fp-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
/* Exit fade — same idiom as the other *--closing overlays. JS holds the class for the
   panel's 250ms slide, then swaps to .hidden. Rollback: delete this rule. */
.fp-overlay--closing { animation: cmd-overlay-out 160ms ease forwards !important; }

/* ── Panel slide keyframes ── */
@keyframes panel-slide-in {
  0%   { transform: translateX(100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(0);    opacity: 1; }
}
@keyframes panel-slide-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

.filter-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%); /* resting off-screen */
}
/* Opening — fill:both holds the from-state before display change settles */
.filter-panel:not(.hidden) {
  will-change: transform, opacity;
  animation: panel-slide-in 320ms var(--ease) both;
}
/* Closing — JS adds class, then .hidden after 250ms */
.filter-panel--closing {
  will-change: transform, opacity;
  animation: panel-slide-out 240ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}

.fp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fp-title { font-size: 15px; font-weight: 700; flex: 1; }
.fp-clear-btn { font-size: 12.5px; padding: 5px 8px; color: var(--text-secondary); }
.fp-clear-btn:hover { color: var(--red); background: var(--red-soft); }

.fp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }

.fp-group { display: flex; flex-direction: column; gap: 5px; }
.fp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.fp-select {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 9px 32px 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239993AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--t-fast);
}
.fp-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
.fp-select option[value="all"] { color: var(--text-tertiary); }

/* Multi-select filter checklist — replaces the single <select> for every filter
   except the two binary presence filters (ClickUp Linked, OS Link). The <select>
   stays in the DOM as the option source and is hidden; this renders it.
   Borrows .fp-select's box treatment so the panel still reads as one control set.
   Rollback: delete this block and unhide .fp-select for the multi keys. */
.fp-checklist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 168px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 4px;
  transition: border-color var(--t-fast);
}
.fp-checklist:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
/* Row is a flex container now (was the <label> itself) so the "Only" button can
   live outside the label — inside it, clicking Only would also toggle the box. */
.fp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-s);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.fp-check:hover { background: var(--surface-2); }
.fp-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.fp-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
.fp-check-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "All" pinned to the top of the scroll area — on a long list it must stay
   reachable without scrolling back up. Divider marks it as a control, not a value. */
.fp-check--all {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  margin-bottom: 2px;
  font-weight: 600;
}
.fp-check--all:hover { background: var(--surface-2); }
.fp-check--all .fp-check-text { flex: 1 1 auto; }
.fp-check-all-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Only: revealed on row hover / keyboard focus. Kept out of the tab order until
   its row is hovered or focused so Tab still walks the checkboxes first. */
.fp-check-only {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-s);
  padding: 2px 7px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.fp-check:hover .fp-check-only,
.fp-check-only:focus-visible { opacity: 1; }
.fp-check-only:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-a15);
}
.fp-check-only:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-a15); }
/* No hover on touch — an invisible-but-tappable target is worse than a visible one. */
@media (hover: none) {
  .fp-check-only { opacity: 1; }
}

.fp-checklist-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}
.fp-checklist-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-tertiary);
}
.fp-checklist-foot--active .fp-checklist-count { color: var(--primary); }
.fp-checklist-clear {
  font-size: 11px;
  padding: 0;
  color: var(--text-tertiary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.fp-checklist-foot--active .fp-checklist-clear { opacity: 1; pointer-events: auto; }
.fp-checklist-clear:hover { color: var(--primary); }

/* Year-grouped multi-select date picker (fp-datelist).
   Reuses the fp-checklist visual language; year headers collapse to keep the
   panel bounded as history grows year-over-year. */
.fp-datelist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 8px;
  transition: border-color var(--t-fast);
}
.fp-datelist:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
.fp-date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fp-date-shortcut {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.fp-date-shortcut:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.fp-date-none {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-left: auto;
}
.fp-date-none input { accent-color: var(--primary); margin: 0; }
.fp-date-years { display: flex; flex-direction: column; gap: 2px; }
.fp-date-year { display: flex; flex-direction: column; }
.fp-date-year-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 4px;
  border-radius: var(--radius-s);
  transition: background var(--t-fast);
}
.fp-date-year-head:hover { background: var(--surface-2); }
.fp-date-year-toggle {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.fp-date-chev { display: inline-block; width: 12px; color: var(--text-tertiary); }
.fp-date-year-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
}
.fp-date-year-cb-wrap { display: inline-flex; align-items: center; cursor: pointer; padding: 0 4px; }
.fp-date-year-cb { accent-color: var(--primary); margin: 0; cursor: pointer; }
.fp-date-months {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 4px 6px 22px;
}
.fp-date-year--open .fp-date-months { display: grid; }
.fp-date-month {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: var(--radius-s);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.fp-date-month:hover { background: var(--surface-2); }
.fp-date-month input { accent-color: var(--primary); margin: 0; cursor: pointer; }
.fp-datelist-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.fp-datelist-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-tertiary);
}
.fp-datelist-foot--active .fp-datelist-count { color: var(--primary); }
.fp-datelist-clear {
  font-size: 11px;
  padding: 0;
  color: var(--text-tertiary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.fp-datelist-foot--active .fp-datelist-clear { opacity: 1; pointer-events: auto; }
.fp-datelist-clear:hover { color: var(--primary); }

.fp-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  letter-spacing: 0.01em;
}

.chip:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong); }

.chip--filter.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(124,70,241,0.3);
  font-weight: 700;
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Chip color variants */
.chip--success.active, .chip--success:has(.chip-dot) { color: var(--green); }
.chip--primary.active { color: var(--accent); background: var(--accent-soft); border-color: rgba(16,119,218,0.3); }
.chip--warning.active { color: var(--amber); background: var(--amber-soft); border-color: rgba(217,119,6,0.3); }
.chip--error.active { color: var(--red); background: var(--red-soft); border-color: rgba(220,38,38,0.3); }
.chip--secondary.active { color: var(--teal); background: var(--teal-soft); border-color: rgba(8,145,178,0.3); }

.filter-dropdowns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Dropdown */
.dropdown { position: relative; }

.dropdown-trigger svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.dropdown.open .dropdown-trigger svg { transform: rotate(180deg); }
.dropdown.open .dropdown-trigger { border-color: var(--primary); color: var(--primary); }

.dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  min-width: 180px;
  z-index: 50;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: scaleY(0.92) translateY(-4px);
  transform-origin: top;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.dropdown.open .dropdown-menu { opacity: 1; transform: scaleY(1) translateY(0); pointer-events: all; }

.dropdown-menu li {
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--t-fast);
}
.dropdown-menu li:hover { background: var(--surface-2); }
.dropdown-menu li.selected { color: var(--primary); font-weight: 700; }

.sort-btn { color: var(--text-primary); font-weight: 500; gap: 5px; }
.sort-label { white-space: nowrap; }
.sort-btn:hover { color: var(--text-primary); }
.sort-arrow { font-size: 13px; }

/* =============================================
   Data Table
   ============================================= */
.table-section {
  flex: 1;
  overflow: hidden;
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  /* Scroll performance: layout isolation only. Rollback: restore "contain: layout paint;"
     — paint containment clipped .cu-hover-card at the wrapper edge */
  contain: layout;
  -webkit-overflow-scrolling: touch;   /* iOS momentum scroll */
  view-transition-name: requests-surface;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* Absorbs leftover width — real columns never stretch beyond content */
.col-spacer { padding: 0; pointer-events: none; border: none !important; min-width: 0; }

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 60; /* must exceed all sticky body cells: row-sel-cell(46), col-frozen(45), frozen-th(50), sel-th(52) */
  background: var(--surface-2);
}
/* Unfrozen state — headers scroll with content */
.data-table.headers-unfrozen thead { position: relative; top: auto; z-index: auto; }

.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  cursor: default;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast);
}
.data-table th.sortable:hover { color: var(--text-primary); }
.data-table th.active-sort { color: var(--primary); }

.sort-icon { width: 12px; height: 12px; vertical-align: middle; margin-left: 3px; }

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--primary-soft); }
body.dark .data-table tbody tr:hover { background: var(--primary-soft); } /* --primary-soft already dark-mode-aware */

.data-table td {
  padding: 11px 14px;
  color: var(--text-primary);
  vertical-align: middle;
  white-space: nowrap;
  background: var(--surface);
  transition: background var(--t-xfast) var(--ease); /* matches row hover speed — td repaint was instant while tr eased */
}
.data-table tbody tr:hover td:not(.col-frozen):not(.row-sel-cell) { background: transparent; }

/* =============================================
   Column Manager Modal
   ============================================= */
.col-mgr-overlay {
  position: fixed; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  z-index: 200;
}
.col-mgr-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
.col-mgr-overlay--closing      { animation: cmd-overlay-out 160ms ease forwards !important; }

.col-mgr {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* resting center */
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 420px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 201;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.col-mgr--card-fields {
  width: 1020px;
  max-width: min(96vw, 1020px);
  max-height: min(86vh, 820px);
}
.col-mgr--card-fields .col-mgr-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 12px;
}
.col-mgr:not(.hidden) {
  will-change: transform, opacity;
  animation: modal-spotlight-in 390ms var(--ease) both;
}
.col-mgr--closing {
  will-change: transform, opacity;
  animation: modal-spotlight-out 190ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}

.col-mgr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.col-mgr-header h3 { font-size: 15px; font-weight: 700; }

.col-mgr-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}
.col-mgr-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  font-weight: 500;
}

.col-list { display: flex; flex-direction: column; gap: 0; }

.col-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  user-select: none;
  transition: background var(--t-fast) var(--ease);
  border-radius: var(--radius-s);
}
.col-item:last-child { border-bottom: none; }
.col-item.dragging { opacity: 0.35; }
.col-item.drag-over { box-shadow: 0 -2px 0 0 var(--primary); }

.col-item-grip {
  color: var(--text-tertiary);
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color var(--t-fast);
}
.col-item-grip:active { cursor: grabbing; }
.col-item:hover .col-item-grip { color: var(--text-secondary); }

.col-item-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
}
.col-item-label--hidden { color: var(--text-tertiary); }

.card-field-config {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.card-field-config__split {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  height: auto;
}
.card-field-config__rail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.card-field-list-shell {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.card-field-list-shell::-webkit-scrollbar {
  width: 10px;
}
.card-field-list-shell::-webkit-scrollbar-track {
  background: transparent;
}
.card-field-list-shell::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.card-field-config__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-field-config__intro-copy {
  min-width: 0;
}
.card-field-config__intro .col-mgr-hint {
  margin-bottom: 0;
  max-width: none;
}
.card-field-config__microcopy {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.45;
}
.card-field-config__count {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.card-field-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 10px;
  min-height: 100%;
}
.card-field-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.kanban-card-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.kanban-card-status-row .status2-chip {
  max-width: 100%;
}
.card-field-item__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.card-field-item__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.card-field-item__label--hidden {
  color: var(--text-tertiary);
}
.card-field-item__zone {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.card-field-item .col-toggle {
  width: 32px;
  height: 18px;
}
.card-field-item .col-toggle-track::after {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
}
.card-field-item .col-toggle input:checked + .col-toggle-track::after {
  transform: translateX(14px);
}
.card-field-preview-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: 16px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.card-field-preview-shell__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-field-preview-shell__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.card-field-preview-shell__hint {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.card-field-preview-shell__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(124,70,241,0.1);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.card-field-preview-canvas {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: calc(var(--radius-l) - 4px);
  background: linear-gradient(180deg, rgba(124,70,241,0.05), rgba(124,70,241,0.01));
}
.card-field-preview-board {
  max-width: 360px;
  width: min(100%, 360px);
  margin: 0 auto;
}
.card-field-preview-colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.card-field-preview-coltitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.card-field-preview-colcount {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Toggle switch */
.col-toggle {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.col-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.col-toggle-track {
  position: absolute; inset: 0;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t) var(--ease);
}
.col-toggle-track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--t) var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.col-toggle input:checked + .col-toggle-track { background: var(--primary); }
.col-toggle input:checked + .col-toggle-track::after { transform: translateX(16px); }

.col-mgr-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.col-mgr-footer .btn-text { font-size: 13px; color: var(--text-secondary); }
.col-mgr-footer__status {
  min-width: 0;
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-mgr-footer__status[data-empty="true"] {
  visibility: hidden;
  pointer-events: none;
}
.col-mgr-footer__status[data-tone="warning"] { color: var(--amber); }
.col-mgr-footer__status[data-tone="error"] { color: var(--red); }
.col-mgr-footer__status[data-tone="success"] { color: var(--green); }
.col-mgr-footer__apply {
  justify-self: end;
}
.col-mgr-footer .btn-text:hover { background: var(--surface-2); color: var(--text-primary); }

/* Customer chips in table */
/* QoL #9 — Row pinning: border-left indicator on pinned rows, no icon in cell */
.col-customer-inner {
  display: flex;
  align-items: center;
  min-width: 0;
}
/* Pinned row: subtle tint only — no border (lands on checkbox cell, looks wrong) */
.table-row[data-pinned] td {
  background: color-mix(in srgb, var(--primary-soft) 25%, var(--surface)) !important;
}
/* Pin button in row actions bar */
.rab-btn--pin:hover { color: var(--primary); }
.rab-btn--pin-on { color: var(--primary) !important; }
.rab-btn--pin-on svg polygon { fill: var(--primary); stroke: var(--primary); }
.rab-btn--pin-on:hover { background: var(--primary-soft); }

/* ID column — narrow, muted, read-only tracker row id */
.col-id { width: 48px; text-align: center; }
.col-id-value { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.col-team { text-align: center; }
/* Center the headers of compact metadata columns (ID, date columns, Team) so the
   title sits flush over its centered value. Text columns stay left-aligned.
   The label-zone is flex:1 (fills the header), so we center ITS content —
   centering .th-inner alone is a no-op because the label-zone eats the width. */
th[data-col="id"] .th-label-zone,
th[data-col="added"] .th-label-zone,
th[data-col="expiry"] .th-label-zone,
th[data-col="firstReported"] .th-label-zone,
th[data-col="committedDate"] .th-label-zone,
th[data-col="timelinePromised"] .th-label-zone,
th[data-col="actualGoLive"] .th-label-zone,
th[data-col="team"] .th-label-zone { justify-content: center; }
/* The pin/freeze glyph is opacity:0 but keeps a 22px flex slot, which shoves the
   centered label ~11px left. Float it out of flow for these columns so the label
   centers on the TRUE column center; it still appears + stays clickable on hover. */
th[data-col="id"],
th[data-col="added"],
th[data-col="expiry"],
th[data-col="firstReported"],
th[data-col="committedDate"],
th[data-col="timelinePromised"],
th[data-col="actualGoLive"],
th[data-col="team"] { position: relative; }
th[data-col="id"] .col-pin-glyph,
th[data-col="added"] .col-pin-glyph,
th[data-col="expiry"] .col-pin-glyph,
th[data-col="firstReported"] .col-pin-glyph,
th[data-col="committedDate"] .col-pin-glyph,
th[data-col="timelinePromised"] .col-pin-glyph,
th[data-col="actualGoLive"] .col-pin-glyph,
th[data-col="team"] .col-pin-glyph {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

/* Cell star badge — absolutely positioned in left padding zone, no layout impact */
.col-customer { position: relative; }
.row-star-badge {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  color: var(--primary); fill: var(--primary);
  pointer-events: none;
  display: block;
}

.customer-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 200px; min-width: 0; flex: 1; }
mark.search-hl {
  background: rgba(255, 213, 0, 0.45);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.customer-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--primary-soft);
  color: var(--primary);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-value { color: var(--text-tertiary); font-size: 12px; }

.customer-chip--merged {
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-style: italic;
}

/* Inline-editable cells */
.cell-editable {
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  border-radius: var(--radius-xs);
}
.cell-editable:hover {
  filter: brightness(0.94);
  box-shadow: 0 0 0 2px rgba(124,70,241,0.28); /* animated glow, no jarring outline */
}
/* Pending save (app.js _markCellSaving / kanban drop): content dims until the PATCH
   settles. Children only — the cell background stays opaque so frozen (sticky)
   cells never turn see-through. Rollback: delete these two rules. */
td[data-saving] { cursor: progress; }
td[data-saving] > *, .kanban-card[data-saving] { opacity: .55; transition: opacity var(--t-fast) var(--ease); }
.cell-text {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
}

/* Locked cell — not editable, shows lock icon */
.cell-locked {
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lock-icon {
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--t-fast) var(--ease);
  vertical-align: middle;
}
.table-row:hover .cell-locked .lock-icon { opacity: 0.45; }

/* Inline edit floating dropdown */
.inline-edit-dropdown {
  position: fixed;
  z-index: var(--z-top);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  max-height: min(280px, 60vh);
  overflow-y: auto;
  min-width: 160px;
  animation: slideDown var(--t-fast) var(--ease);
}
.ied-option {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.ied-option:hover { background: var(--primary-soft); color: var(--primary); }
.ied-option--active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.ied-option--active::after { content: ' ✓'; opacity: 0.7; }

/* ClickUp edit button inside cu-cell */
.cu-cell-top {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.cu-edit-btn {
  opacity: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 3px;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.cu-cell:hover .cu-edit-btn,
.table-row:hover .cu-edit-btn { opacity: 1; }
.cu-edit-btn:hover { color: var(--primary); background: var(--primary-soft); }

.cu-empty-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px dashed var(--border-strong);
}
.cu-empty-edit:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* Inline text edit popover */
.inline-edit-text {
  position: fixed;
  z-index: var(--z-top);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(124,70,241,0.12);
  padding: 10px 12px;
  width: 340px;
  animation: slideDown var(--t-fast) var(--ease);
}
.iet-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color var(--t-fast);
}
.iet-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
.iet-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
  font-weight: 500;
}

/* Badges / Pills */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status L1 */
.badge--live        { background: var(--green-soft);   color: var(--green); }
.badge--live .badge-dot { background: var(--green); }
.badge--primary     { background: var(--accent-soft);  color: var(--accent); }
.badge--primary .badge-dot { background: var(--accent); }
.badge--inprogress  { background: var(--amber-soft);   color: var(--amber); }
.badge--inprogress .badge-dot { background: var(--amber); }
.badge--waiting-cx  { background: var(--teal-soft);    color: var(--teal); }
.badge--waiting-cx .badge-dot { background: var(--teal); }
.badge--escalated   { background: var(--red-soft);     color: var(--red); }
.badge--escalated .badge-dot { background: var(--red); }
.badge--partial     { background: var(--teal-soft);    color: var(--teal); }
.badge--partial .badge-dot { background: var(--teal); }
.badge--backlog     { background: var(--neutral-soft); color: var(--neutral); }
.badge--backlog .badge-dot { background: var(--neutral); }

/* Segment */
.badge--enterprise  { background: var(--primary-soft); color: var(--primary); }
.badge--midmarket   { background: var(--accent-soft);  color: var(--accent); }
.badge--mea         { background: var(--amber-soft);   color: var(--amber); }
.badge--smb         { background: var(--green-soft);   color: var(--green); }
.badge--us          { background: var(--teal-soft);    color: var(--teal); }

/* Impact */
.badge--high        { background: var(--red-soft);     color: var(--red); }
.badge--med         { background: var(--amber-soft);   color: var(--amber); }
.badge--pebble      { background: var(--accent-soft);  color: var(--accent); }
.badge--low         { background: var(--neutral-soft); color: var(--neutral); }

/* ── Risk Indicator: pill colors ─────────────────────────────── */
.badge--risk-critical {
  background: var(--red-soft);
  color: var(--red);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-origin: center;
}
.badge--risk-high     { background: var(--orange-soft); color: var(--orange); }
.badge--risk-moderate { background: var(--yellow-soft); color: var(--yellow); }
.badge--risk-watch    { background: var(--green-soft);  color: var(--green);  }
/* Dark mode: brighten high/moderate text for contrast on the translucent soft bg */
body.dark .badge--risk-high     { color: #FB923C; }
body.dark .badge--risk-moderate { color: #FACC15; }
.badge--risk-none     { background: transparent; color: var(--text-tertiary); font-weight: 500; }

/* Heat bar segments — color via currentColor from parent badge */
.risk-heat-bar         { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-right: 4px; }
.risk-heat-bar__seg    { width: 4px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.risk-heat-bar__seg--fill  { background: currentColor; opacity: 0.85; }
.risk-heat-bar__seg--empty { background: currentColor; opacity: 0.18; }

/* Risk breakdown in detail modal */
.dm-risk-breakdown { margin-top: 12px; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-m); border: 1px solid var(--border); border-top-width: 3px; }
.dm-risk-breakdown--critical { border-top-color: var(--red); }
.dm-risk-breakdown--high     { border-top-color: var(--orange); }
.dm-risk-breakdown--moderate { border-top-color: var(--yellow); }
.dm-risk-breakdown--watch    { border-top-color: var(--primary); } /* watch tier uses --primary app-wide (was rogue indigo #6366F1) */
.dm-risk-breakdown__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dm-risk-breakdown__title  { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.dm-risk-breakdown__row    { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12.5px; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.dm-risk-breakdown__row:last-of-type { border-bottom: none; }
.dm-risk-breakdown__pts    { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.dm-risk-breakdown__pts--critical { background: rgba(220,38,38,.1); color: var(--red); }
.dm-risk-breakdown__pts--high     { background: rgba(234,88,12,.1); color: var(--orange); }
.dm-risk-breakdown__pts--moderate { background: rgba(234,179,8,.1); color: var(--yellow); }
.dm-risk-breakdown__pts--watch    { background: var(--primary-a10); color: var(--primary); }
/* Dark mode: brighten high/moderate pts — same pattern as .badge--risk-* above */
body.dark .dm-risk-breakdown__pts--high     { color: #FB923C; }
body.dark .dm-risk-breakdown__pts--moderate { color: #FACC15; }
.dm-risk-breakdown__total { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dm-risk-breakdown__total-score { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dm-risk-breakdown--critical .dm-risk-breakdown__total-score { color: var(--red); }
.dm-risk-breakdown--high     .dm-risk-breakdown__total-score { color: var(--orange); }
.dm-risk-breakdown--moderate .dm-risk-breakdown__total-score { color: var(--yellow); }
.dm-risk-breakdown--watch    .dm-risk-breakdown__total-score { color: var(--primary); }
body.dark .dm-risk-breakdown--high     .dm-risk-breakdown__total-score { color: #FB923C; }
body.dark .dm-risk-breakdown--moderate .dm-risk-breakdown__total-score { color: #FACC15; }

/* Risk pill hover popover */
#riskPillPopover {
  position: fixed;
  z-index: 250;
  display: none;
  min-width: 230px;
  max-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.rpp-header  { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px 8px; border-bottom: 1px solid var(--border); gap: 8px; }
.rpp-score   { font-size: 11px; font-weight: 700; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpp-signals { padding: 8px 13px; display: flex; flex-direction: column; gap: 2px; }
.rpp-row     { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-primary); padding: 2px 0; gap: 8px; }
.rpp-pts     { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpp-total   { display: flex; justify-content: space-between; align-items: center; padding: 7px 13px 10px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
body.dark #riskPillPopover { box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2); }

/* Status L2 chip */
.status2-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-s);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status2-chip--neutral {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
}
.status2-chip--good {
  background: rgba(22,163,74,.12);
  color: var(--green);
  border-color: rgba(22,163,74,.2);
}
.status2-chip--track {
  background: rgba(8,145,178,.12);
  color: var(--teal);
  border-color: rgba(8,145,178,.2);
}
.status2-chip--warn {
  background: rgba(217,119,6,.12);
  color: var(--amber);
  border-color: rgba(217,119,6,.2);
}
.status2-chip--risk {
  background: rgba(220,38,38,.1);
  color: var(--red);
  border-color: rgba(220,38,38,.18);
}

/* ARR */
.arr-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Expiry */
.expiry-value { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.expiry-value--urgent { color: var(--red); font-weight: 700; }
.expiry-value--soon { color: var(--amber); font-weight: 600; }

/* QoL #8 — Smart Deadline Badges */
.deadline-cell {
  display: flex;            /* full-width so the date/badge stack centers in its column */
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.dlb {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}
.dlb--urgent { background: var(--red-soft);   color: var(--red);   }
.dlb--warn   { background: var(--amber-soft);  color: var(--amber); }
.dlb--soon   { background: var(--amber-soft);  color: var(--amber); opacity: 0.8; }
.dlb--ok     { background: var(--surface-2);   color: var(--text-secondary); }

/* ClickUp link */
.cu-task-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  letter-spacing: 0.01em;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cu-task-pill--named {
  font-size: 11.5px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.cu-task-pill--named:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.cu-task-pill:not(.cu-task-pill--named):hover { background: rgba(124,70,241,0.18); }
.cu-task-pill svg { width: 11px; height: 11px; flex-shrink: 0; }

/* legacy alias */
.clickup-link { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Table empty */
/* Legacy — kept for compat; actual empty state now lives inside tbody */
.table-empty { display: none; }
.empty-icon svg { width: 40px; height: 40px; opacity: 0.4; }

/* First-load skeleton rows (app.js renderTable) — inert, no hover wash.
   Rollback: delete with the skeleton block in renderTable. */
.data-table tbody tr.table-skel-row { cursor: default; pointer-events: none; }
.data-table tbody tr.table-skel-row td { padding-top: 13px; padding-bottom: 13px; }

/* In-table empty state — spans all columns inside tbody */
.table-empty-row { border: none !important; }
.table-empty-cell {
  padding: 0 !important;
  background: var(--surface) !important;
  border: none !important;
}
.table-empty-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
}
.table-empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  animation: table-empty-float 3s ease-in-out infinite;
}
@keyframes table-empty-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.table-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.table-empty-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  max-width: 300px;
  line-height: 1.5;
}
.table-empty-clear {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}
.cx-empty-motion {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cx-motion-slot {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cx-motion-slot--sm { width: 18px; height: 18px; }
.cx-motion-slot--lg { width: 72px; height: 72px; }
.cx-motion-slot svg {
  width: 100%;
  height: 100%;
}
.cx-motion-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cx-motion-fallback svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cx-motion-fallback--violet,
.cx-motion-fallback--accent { color: var(--primary); }
.cx-motion-fallback--success,
.cx-motion-fallback--green { color: var(--green); }
.cx-motion-fallback--warning,
.cx-motion-fallback--amber { color: var(--amber); }
.cx-motion-fallback--danger,
.cx-motion-fallback--red { color: var(--red); }
.cx-motion-fallback--teal { color: var(--teal); }

/* =============================================
   Placeholder Views
   ============================================= */.placeholder-card--error { border-left: 3px solid var(--red); }
.chip--error-sm {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--red-soft);
  color: var(--red);
  border-radius: var(--radius-pill);
}

/* =============================================
   Escalations + Notification Center
   ============================================= */
.escalations-page,
.notifications-page {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(124,70,241,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 28%),
    var(--bg);
}
body.dark .escalations-page,
body.dark .notifications-page {
  background:
    radial-gradient(circle at top right, rgba(124,70,241,.08), transparent 30%),
    var(--bg);
}
.esc-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}
.esc-hero-top,
.esc-hero-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: stretch;
}
.esc-hero-workspace {
  align-items: start;
}
.notif-center-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
  gap: 18px;
  margin-bottom: 18px;
}
.esc-hero-main,
.notif-center-main,
.esc-side-card,
.notif-center-side,
.esc-queue-shell,
.esc-table-shell,
.notif-center-shell {
  background: color-mix(in srgb, var(--surface) 92%, white 8%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.esc-hero-main,
.notif-center-main {
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.esc-hero-main::before,
.notif-center-main::before {
  content: '';
  position: absolute;
  inset: auto -50px -50px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,70,241,.14), transparent 70%);
}
.esc-kicker,
.notif-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.esc-title-row,
.notif-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.esc-title-row h2,
.notif-title-row h2 {
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -.04em;
}
.esc-subtitle,
.notif-subtitle {
  margin-top: 8px;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.6;
  font-size: 13.5px;
}
.esc-hero-actions,
.notif-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.esc-hero-motion-shell {
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white 10%), color-mix(in srgb, var(--surface-2) 82%, white 18%));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.esc-hero-motion {
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
}
.esc-hero-motion-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
}
.esc-hero-motion-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.esc-hero-motion-copy strong {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.esc-hero-motion-copy p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.esc-action-brief,
.esc-queue-snapshot {
  min-height: 100%;
}
.esc-snapshot-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 13px;
  border-radius: var(--radius-l);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border) 88%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 18%, var(--surface) 82%), color-mix(in srgb, var(--surface) 92%, white 8%));
}
.esc-snapshot-intro--critical { border-color: rgba(220,38,38,.16); }
.esc-snapshot-intro--high { border-color: rgba(217,119,6,.18); }
.esc-snapshot-intro--watch { border-color: rgba(124,70,241,.18); }
.esc-snapshot-intro--calm { border-color: rgba(22,163,74,.14); }
.esc-snapshot-intro-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
}
.esc-snapshot-intro-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.esc-snapshot-intro-body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.esc-snapshot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.esc-snapshot-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.esc-snapshot-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.esc-snapshot-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.esc-snapshot-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.notif-center-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.esc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.esc-filter-pills,
.notif-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.esc-filter-pill,
.notif-filter-pill {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.esc-filter-pill strong,
.notif-filter-pill strong {
  font-size: 11px;
  color: inherit;
}
.esc-filter-pill:hover,
.notif-filter-pill:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.esc-filter-pill.active,
.notif-filter-pill.active {
  background: var(--primary-soft);
  border-color: rgba(124,70,241,.26);
  color: var(--primary);
}
.esc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  gap: 18px;
  align-items: start;
}
.esc-queue-shell,
.esc-table-shell,
.notif-center-shell,
.esc-side-card,
.notif-center-side {
  padding: 18px;
}
.esc-shell-head,
.notif-shell-head,
.esc-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.esc-shell-head {
  align-items: flex-start;
}
.esc-shell-title,
.notif-shell-title,
.esc-side-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.esc-shell-sub,
.notif-shell-sub {
  font-size: 12px;
  color: var(--text-secondary);
}
.esc-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
  white-space: nowrap;
}
.esc-inline-link svg {
  width: 14px;
  height: 14px;
}
.esc-queue-list,
.notif-center-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.esc-queue-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.esc-queue-list {
  flex: 1;
  min-height: 0;
  max-height: clamp(360px, 52vh, 620px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.esc-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
  box-shadow: var(--shadow-sm);
}
.esc-card--critical { border-color: rgba(220,38,38,.18); }
.esc-card--high { border-color: rgba(217,119,6,.2); }
.esc-card-top,
.esc-card-meta,
.esc-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.esc-card-top { align-items: flex-start; }
.esc-customer {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.esc-card-arr {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.esc-card-meta {
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  color: var(--text-secondary);
  font-size: 11px;
}
.esc-card-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.esc-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
}
.esc-signal--risk { background: rgba(220,38,38,.1); color: var(--red); }
.esc-signal--warn { background: rgba(217,119,6,.12); color: var(--amber); }
.esc-signal--track { background: rgba(8,145,178,.12); color: var(--teal); }
.esc-context {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
}
.esc-card-actions {
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}
.esc-card-actions .btn-filled,
.esc-card-actions .btn-outlined {
  padding: 7px 10px;
  font-size: 11.5px;
}
.esc-card-actions svg {
  width: 13px;
  height: 13px;
}
.esc-playbook-summary {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 14px 12px;
  margin-top: 2px;
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 22%, var(--surface) 78%), color-mix(in srgb, var(--surface) 90%, white 10%));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border) 88%);
}
.esc-playbook-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
}
.esc-playbook-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.esc-playbook-body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.esc-playbook-focus {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
}
.esc-playbook-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.esc-playbook-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.esc-playbook-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.esc-playbook-step-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.esc-playbook-draft {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface-2) 84%, white 16%);
  border: 1px solid var(--border);
}
.esc-playbook-draft-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.esc-playbook-draft p {
  white-space: pre-wrap;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.esc-playbook-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.esc-side-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.esc-owner-list,
.esc-mini-list,
.notif-mini-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esc-owner-row,
.esc-mini-row,
.notif-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.esc-owner-name,
.esc-mini-label,
.notif-mini-label {
  color: var(--text-primary);
  font-weight: 600;
}
.esc-owner-meta,
.esc-mini-meta,
.notif-mini-meta {
  color: var(--text-secondary);
  font-size: 11.5px;
}
.esc-owner-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 6px;
}
.esc-owner-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--accent) 60%, var(--primary) 40%));
}
.esc-table-shell { margin-top: 22px; }
.esc-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-l); }
.esc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
}
.esc-table th,
.esc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.esc-table th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  z-index: 1;
}
.esc-table td {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.esc-table td strong {
  display: inline-block;
  font-size: 12.5px;
  color: var(--text-primary);
}
.esc-table td .esc-mini-meta {
  margin-top: 4px;
  font-size: 10.5px;
}
.esc-table td .esc-signal {
  font-size: 10px;
  padding: 3px 7px;
  margin: 0 5px 5px 0 !important;
}
.esc-table tr:last-child td { border-bottom: none; }
.esc-table tr:hover { background: rgba(124,70,241,.04); }
.esc-link-btn {
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.esc-empty,
.notif-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--surface) 88%, white 12%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.notif-empty--hub {
  min-height: 220px;
}
.notif-empty-motion,
.esc-empty-motion {
  width: 62px;
  height: 62px;
}
.notif-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 360px;
}
.notif-empty-copy strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.notif-empty-copy p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── Score badge ─────────────────────────────────── */
.esc-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.esc-score--sm { width: 24px; height: 24px; font-size: 10px; }
.esc-score--critical { background: rgba(220,38,38,.14); color: var(--red); }
.esc-score--high     { background: rgba(217,119,6,.14);  color: var(--amber); }
.esc-score--watch    { background: rgba(124,70,241,.12); color: var(--primary); }

/* ── Customer row (name + score badge side by side) ─ */
.esc-customer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

/* ── Swimlane grouping ───────────────────────────── */
.esc-swimlane { display: flex; flex-direction: column; gap: 10px; }
.esc-swimlane + .esc-swimlane { margin-top: 6px; }
.esc-swimlane-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-m);
}
.esc-swimlane-header--critical { background: rgba(220,38,38,.09); color: var(--red); }
.esc-swimlane-header--high     { background: rgba(217,119,6,.09);  color: var(--amber); }
.esc-swimlane-header--watch    { background: rgba(124,70,241,.08); color: var(--primary); }
.esc-swimlane-count {
  background: rgba(255,255,255,.2);
  border-radius: var(--radius-m);
  padding: 0 6px;
  font-weight: 700;
  font-size: 11px;
}

/* ── Sort pills ──────────────────────────────────── */
.esc-sort-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.esc-sort-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.esc-sort-pill {
  padding: 4px 11px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.esc-sort-pill:hover  { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
.esc-sort-pill.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* ── Active tier chip (donut drill-down indicator) ── */
.esc-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border-radius: var(--radius-xl);
  font-size: 11px;
  font-weight: 700;
}
.esc-tier-chip--critical { background: rgba(220,38,38,.12); color: var(--red); border: 1px solid rgba(220,38,38,.3); }
.esc-tier-chip--high     { background: rgba(217,119,6,.12);  color: var(--amber); border: 1px solid rgba(217,119,6,.3); }
.esc-tier-chip--watch    { background: rgba(124,70,241,.1);  color: var(--primary); border: 1px solid rgba(124,70,241,.25); }
.esc-tier-chip-clear {
  background: none; border: none; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0 1px;
  opacity: .7; color: inherit;
}
.esc-tier-chip-clear:hover { opacity: 1; }

/* ── Charts row (ARR donut + expiry timeline) ─────── */
.esc-charts-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  margin-bottom: 20px;
}
.esc-chart-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 16px 18px;
}
.esc-runway-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.esc-runway-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  font-family: inherit;
}
.esc-runway-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.esc-runway-chip.active { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.esc-runway-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 12%, white 88%);
  color: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
}
.esc-runway-chip--neutral { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.esc-runway-chip--danger { background: rgba(220,38,38,.10); color: var(--red); border-color: rgba(220,38,38,.18); }
.esc-runway-chip--amber  { background: rgba(245,158,11,.12); color: var(--amber); border-color: rgba(245,158,11,.18); }
.esc-runway-chip--warn   { background: rgba(217,119,6,.10); color: var(--amber); border-color: rgba(217,119,6,.16); }
.esc-runway-chip--calm   { background: rgba(22,163,74,.09); color: var(--green); border-color: rgba(22,163,74,.16); }
.esc-chart-tip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 150px;
}
.esc-chart-tip__cust {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}
.esc-chart-tip__days {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}
.esc-chart-tip__meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.esc-queue-shell .esc-shell-head {
  margin-bottom: 10px;
}
.esc-queue-shell .esc-shell-sub {
  max-width: 420px;
}
.esc-grid {
  margin-top: 4px;
}
@media (max-width: 900px) {
  .esc-hero-top,
  .esc-hero-workspace {
    grid-template-columns: 1fr;
  }
  .esc-charts-row { grid-template-columns: 1fr; }
  .esc-runway-legend { gap: 6px; }
}
.notif-panel {
  width: 372px;
}
.notif-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-list {
  max-height: 360px;
  overflow-y: auto;
}
.notif-item {
  align-items: flex-start;
}
.notif-item-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
.notif-item-cta {
  flex-shrink: 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}
.notif-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
}

/* SLA bell card — multi-record layout (bell panel + Notifications page).
   Title + one-line meta, one compact row per record (id · customer · stage
   chip), then the two actions side by side. Rows are buttons that open the
   record; only "Open my queue" acks. Rollback: delete this block +
   renderSlaNotifRows + the item.rows branches in renderNotificationSurfaces. */
.notif-sla { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.notif-sla-head strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.notif-sla-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.notif-sla-rows { display: flex; flex-direction: column; gap: 4px; }
.notif-sla-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 6px 8px; border: 0; border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-primary); font: inherit; font-size: 12px;
  text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.notif-sla-row:hover { background: var(--primary-soft); }
.notif-sla-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.notif-sla-row .id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.notif-sla-row .cust { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.notif-sla-row .dlb { flex-shrink: 0; white-space: nowrap; }
.dlb--breach { background: var(--red-soft); color: var(--red); }
.notif-sla-more { font-size: 11px; color: var(--text-tertiary); padding: 2px 8px; }
.notif-sla-actions { display: flex; gap: 6px; margin-top: 2px; }
.notif-sla-actions .btn-text { padding: 6px 10px; font-size: 12px; }
.notif-sla-actions .notif-sla-snooze { color: var(--text-secondary); }
.notif-item--sla .notif-icon { margin-top: 1px; }
.notif-center-card--sla .notif-sla-row { background: var(--surface-2); }
.notif-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.notif-center-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
}
.notif-center-shell .notif-list {
  max-height: none;
}
.notif-center-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 14px;
  background: var(--surface);
}
.notif-center-card + .notif-center-card {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .esc-hero,
  .notif-center-hero,
  .esc-grid,
  .notif-center-grid {
    grid-template-columns: 1fr;
  }
  .esc-hero-motion-shell {
    min-height: 0;
  }}

@media (max-width: 720px) {
  .escalations-page,
  .notifications-page {
    padding: 16px;
  }
  .tl-group-strip {
    margin: 0 16px 12px;
  }
  .tl-group-strip__toggle {
    padding: 12px;
  }
  .tl-group-strip__toggle-meta {
    gap: 8px;
  }
  .tl-group-strip__metric {
    min-width: 70px;
    padding: 4px 8px;
  }
  .tl-group-strip__chips {
    width: 100%;
    padding: 10px 12px 12px;
  }  .esc-hero-motion-shell {
    align-items: flex-start;
    flex-direction: column;
  }
  .notif-panel {
    right: 12px;
    left: 12px;
    top: 68px;
    width: auto;
  }
}

/* =============================================
   Detail Modal (3 tabs)
   ============================================= */
.dm-overlay {
  position: fixed; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  z-index: var(--z-dropdown);
}
.dm-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
.dm-overlay--closing      { animation: cmd-overlay-out 160ms ease forwards !important; }

/* ── Shared spotlight keyframes (used by dm, dialog, col-mgr) ── */
@keyframes modal-spotlight-in {
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(0.86); }
  28%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes modal-spotlight-out {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(0.88); }
}

.dm {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* resting center — animation overrides on show */
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 880px;
  max-width: 96vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
/* Opening — animation holds from-state via fill:both, so no display-flash */
.dm:not(.hidden) {
  will-change: transform, opacity;
  animation: modal-spotlight-in 440ms var(--ease) both;
}
/* Closing — JS adds class, then .hidden after 210ms */
.dm--closing {
  will-change: transform, opacity;
  animation: modal-spotlight-out 200ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}

/* Kanban Status L1 guard — compact single-field prompt on the shared .dm shell.
   Rollback: delete these rules + #kanbanGuardModal markup. */
.dm--compact { width: 460px; }
.kg-context { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.45; margin-top: 4px; }
.kg-context strong { color: var(--text-secondary); font-weight: 600; }
.kg-body { padding: 20px 26px 8px; }
/* Ghost date stamp for remark textareas (attachRemarkGhost): drawn, never typed. Mirrors the
   textarea padding (9px 12px + 1px border); line-height is copied from the textarea by JS so
   it sits on the first line's baseline. --line: stamp on its own line ABOVE existing entries,
   clickable to begin a dated entry; the textarea gains one line of top padding for it. */
.remark-ghost-wrap { position: relative; width: 100%; }
.remark-ghost-wrap > textarea { display: block; width: 100%; } /* the wrap replaces the flex-stretch the field had */
.remark-ghost {
  position: absolute; top: 10px; left: 13px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  line-height: calc(13.5px * 1.6); color: var(--text-tertiary);
  pointer-events: none; user-select: none; white-space: pre;
}
.remark-ghost-wrap--line > .remark-ghost { pointer-events: auto; cursor: text; }
.remark-ghost-wrap--line > .form-input { padding-top: calc(9px + 13.5px * 1.6); }

.dm-header {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dm-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
/* Record identifier beside the detail-modal title ("#164 snoonu.keka.com").
   Rollback: delete this rule + the .dm-title-id span in the two dmTitle setters. */
.dm-title-id {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  vertical-align: 2px;
}
.dm-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.dm-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}
.dm-save-status {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dm-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-arr-inline { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* Tabs */
.dm-tabs {
  display: flex;
  position: relative;
  border-bottom: 1px solid var(--border);
  padding: 0 26px;
  flex-shrink: 0;
  gap: 0;
}
.dm-tab {
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.dm-tab svg { width: 13px; height: 13px; } /* single source for tab icon size (was inline width/height on each <i data-lucide>) */
.dm-tab:hover { color: var(--text-primary); }
.dm-tab.active { color: var(--primary); }
.dm-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

/* Body is the scroll container — reliable with max-height flex containers */
.dm-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.dm-panel { display: none; padding: 24px 26px 32px; }
.dm-panel.active { display: block; }

/* Details grid */
.dm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.dm-cell {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--border);
}
.dm-cell:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--border); }
.dm-cell:nth-last-child(1),
.dm-cell:nth-last-child(2) { border-bottom: none; }

/* PER detail panel — Problem Statement + Remarks top pair */
.per-dm-ps-text {
  white-space: pre-wrap; font-size: 13px; line-height: 1.65;
  max-height: 220px; overflow-y: auto; padding-right: 4px;
}
.per-dm-remarks-col {
  overflow-y: auto; max-height: 280px;
}

/* PER detail panel — section headers + HCR link cards */
.per-dm-section-header {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 18px 0 8px;
  border-top: 1px solid var(--border); margin-top: 4px;
}
.per-dm-section-header:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.per-dm-hcr-links { display: flex; flex-direction: column; gap: 6px; }
.per-dm-hcr-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-m);
  border: 1px solid var(--border); background: var(--surface-2);
}
.per-dm-hcr-card-body { flex: 1; min-width: 0; }
.per-dm-hcr-card-customers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.per-dm-hcr-card-meta { font-size: 11px; color: var(--text-secondary); }
.per-dm-hcr-card-link { font-size: 11px; color: var(--primary); flex-shrink: 0; }

/* =============================================
   Working Remarks Thread
   ============================================= */

.remark-add-form {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.remark-add-input {
  flex: 1;
  line-height: 1.6; /* explicit so the ghost stamp can mirror it */
  resize: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 56px;
}
.remark-add-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a15);
}
.remark-add-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.remark-today-stamp {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}

.remark-thread {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  padding-right: 4px; /* breathing room for scrollbar */
}

.remark-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  animation: fadeUp 250ms var(--ease) both;
}
.remark-entry:last-child { border-bottom: none; }

.remark-entry-date {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.remark-entry-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.remark-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  word-break: break-all;
}
.remark-link:hover { text-decoration: underline; }
.remark-link svg { flex-shrink: 0; }

.remark-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 8px 0;
}

.remark-show-more {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 12.5px;
  padding: 6px 10px;
}

.dm-cell-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 7px;
}
.dm-cell-value {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dm-cell-value--muted { color: var(--text-tertiary); font-style: italic; font-weight: 400; white-space: normal; }
.dm-cell-value--warning { color: var(--amber); font-weight: 700; white-space: normal; }
.dm-cell-value--person { display: flex; align-items: center; gap: 8px; white-space: normal; }

.dm-os-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.dm-os-link:hover { opacity: 0.75; text-decoration: underline; }
.dm-os-link svg { width: 13px; height: 13px; }
/* OS Profile links are real <a>s (the OS Link is a <span>) — drop the UA underline
   so both read the same; .dm-os-link:hover still underlines. */
.os-profile-link { text-decoration: none; }

.dm-cu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--primary-soft);
  border-radius: var(--radius-m);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background var(--t-fast) var(--ease);
  font-family: inherit;
}
.dm-cu-btn:hover { background: rgba(124,70,241,0.2); }
.dm-cu-btn svg { width: 13px; height: 13px; }

/* Edit tab */
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }

/* Audit log */
.audit-timeline { display: flex; flex-direction: column; }
.audit-entry { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.audit-entry:last-child { border-bottom: none; }
.audit-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 24px; }
.audit-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 4px;
}
.audit-dot--error { background: var(--red); }
.audit-dot--success { background: var(--green); }
.audit-dot--warning { background: var(--amber); }
.audit-connector { width: 1px; flex: 1; background: var(--border); margin-top: 4px; min-height: 20px; }
.audit-content { flex: 1; }
.audit-action { font-size: 13.5px; color: var(--text-primary); font-weight: 600; margin-bottom: 3px; }
.audit-change-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 7px 0 2px;
}
.audit-change-row {
  display: grid;
  grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.audit-field {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.audit-delta {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  word-break: break-word;
}
.audit-delta-old,
.audit-delta-new {
  display: inline;
}
.audit-delta-arrow {
  display: inline-block;
  margin: 0 6px;
  color: var(--text-tertiary);
}
.audit-delta-empty {
  color: var(--text-tertiary);
  font-style: italic;
}
.audit-meta { font-size: 12px; color: var(--text-tertiary); }
.audit-user { color: var(--primary); font-weight: 600; }

/* Footer */
.dm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 26px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.dm-save-btn { background: var(--primary); }

/* =============================================
   Add Request Dialog
   ============================================= */
.dialog-overlay {
  position: fixed; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  z-index: 200;
}
.dialog-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
.dialog-overlay--closing      { animation: cmd-overlay-out 160ms ease forwards !important; }

.dialog {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* resting center */
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 600px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 201;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.dialog:not(.hidden) {
  will-change: transform, opacity;
  animation: modal-spotlight-in 420ms var(--ease) both;
}
.dialog--closing {
  will-change: transform, opacity;
  animation: modal-spotlight-out 190ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}

/* Layered modal: detail opened from within add form */
.dm--elevated         { z-index: 400 !important; }
.dm-overlay--elevated { z-index: 399 !important; }
/* Add form dims + yields pointer events while detail is reviewed */
.dialog--behind       { opacity: 0.4; pointer-events: none; transition: opacity var(--t-fast) var(--ease); }
/* Backdrop suppressed — prevents accidental add-form close during detail review */
.dialog-overlay--behind { pointer-events: none !important; }

/* ── ClickUp in-app modal (cu-modal) ─────────────────────────────
   Clones the .dm recipe; z 700/701 sits above .dm--elevated (400) and
   below kekabot (1090) / command palette (1200).
   Rollback: delete this block + #cuModal markup + cuModal fns in app.js. */
.cu-overlay { z-index: 700; }
.cu-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px));
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: 701;
  overflow: hidden;
}
/* Centre-scale fallback (origin missing / reduced motion) — reuses the
   shared modal-spotlight keyframes so the fluid look matches .dm. */
.cu-modal--spotlight:not(.hidden) { animation: modal-spotlight-in 390ms var(--ease) both; }
.cu-modal--closing { will-change: transform, opacity; animation: modal-spotlight-out 200ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important; }

.cu-modal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cu-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.cu-crumb {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-s);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cu-crumb:hover { color: var(--primary); background: var(--primary-soft); }
.cu-crumb--current {
  color: var(--text-primary);
  font-weight: 700;
  cursor: default;
  max-width: 320px;
}
.cu-crumb--current:hover { color: var(--text-primary); background: none; }
.cu-crumb-sep { color: var(--text-tertiary); font-size: 12px; flex-shrink: 0; }
.cu-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cu-open-ext { padding: 6px; display: inline-flex; align-items: center; }
.cu-open-ext svg, .cu-open-ext i { width: 15px; height: 15px; }
/* The OS modal reuses .cu-modal-head but swaps .cu-crumbs for a plain title, so it
   needs the same flex:1 growth the crumbs carry — without it the header actions
   collapse against the title instead of sitting at the far right. Type matches
   .cu-crumb--current so both modal headers read identically. */
.os-modal-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.cu-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  outline: none;
}

/* OS request viewer — API-rendered body inside the shared .cu-modal shell.
   Wide two-column layout: meta grid on top, then main + activity side by side.
   Rollback: delete this block + #osModal markup + the OS fns in app.js. */
.os-modal { width: min(1080px, calc(100vw - 32px)); height: 88vh; max-height: 88vh; }
.os-req-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}
/* meta as a scannable grid (label above value); fills to ~4-up on the wide modal */
.os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 24px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--surface-alt, rgba(124,70,241,0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius-l, 10px);
}
.os-field { min-width: 0; }
.os-field-k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.os-field-v {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
@media (max-width: 520px) { .os-grid { grid-template-columns: 1fr; } }
/* two-column body: main (description + who-wants-it) | activity (tabs) */
.os-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}
.os-col-side { border-left: 1px solid var(--border); padding-left: 28px; }
.os-tabgroup { min-width: 0; }
.os-col-main .os-section:first-child,
.os-col-side .os-tabs { margin-top: 0; }
.os-col-main .os-section:first-child { border-top: none; padding-top: 0; }
@media (max-width: 820px) {
  .os-cols { grid-template-columns: 1fr; gap: 0; }
  .os-col-side { border-left: none; padding-left: 0; border-top: 1px solid var(--border); margin-top: 20px; padding-top: 4px; }
}
.os-submeta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 14px; }
.os-submeta a { color: var(--primary); text-decoration: underline; }
/* rendered OS HTML (description + comments) */
.os-html { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.os-html p { margin: 0 0 10px; }
.os-html p:last-child { margin-bottom: 0; }
.os-html b, .os-html strong { color: var(--text-primary); font-weight: 700; }
.os-html ul, .os-html ol { margin: 0 0 10px; padding-left: 20px; }
.os-html li { margin: 2px 0; }
.os-html a { color: var(--primary); text-decoration: underline; }
.os-html .mention { color: var(--primary); font-weight: 600; }
.os-req-desc { margin-bottom: 4px; }
.os-msg { padding: 24px 4px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
.os-skel { display: flex; flex-direction: column; gap: 12px; }
/* discussion / updates sections */
.os-section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.os-section-h { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.os-cmt { padding: 10px 0; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.os-cmt:last-child { border-bottom: none; padding-bottom: 0; }
.os-cmt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.os-cmt-author { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.os-cmt-date { font-size: 11.5px; color: var(--text-tertiary); }
/* tabbed panels (Discussion / History / Customers / …) */
.os-tabs {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.os-tabs::-webkit-scrollbar { display: none; }
.os-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.os-tab:hover { color: var(--text-primary); }
.os-tab--active { color: var(--primary); border-bottom-color: var(--primary); }
.os-tab-n {
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
  border-radius: 999px;
  color: var(--text-tertiary);
  background: var(--surface-alt, rgba(124,70,241,0.08));
}
.os-tab--active .os-tab-n { color: var(--primary); background: var(--primary-soft, rgba(124,70,241,0.12)); }
.os-panels { padding-top: 14px; }
.os-hist { margin: 0; padding-left: 18px; }
.os-hist li { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 2px 0; }
/* Long activity entries (a description diff carries both full versions) collapse
   behind a native <details> so one edit can't flood the timeline. */
.os-hist summary { cursor: pointer; color: var(--text-tertiary); }
.os-hist summary:hover { color: var(--text-secondary); }
.os-hist details[open] > summary { margin-bottom: 5px; }
/* customer / prospect org cards */
.os-org { padding: 12px 0; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.os-org:last-child { border-bottom: none; }
.os-org-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.os-org-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.os-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--danger, #d1435b);
  background: var(--danger-soft, rgba(209,67,91,0.10));
}
/* Amber tier: the replica has missed a CDC beat but is not yet risky to act on.
   Red (the base .os-badge) is reserved for the escalated state. */
.os-badge--amber { color: var(--amber); background: var(--amber-soft); }
.os-org-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.os-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.os-att {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-alt, rgba(124,70,241,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius-s, 6px);
}
.os-att svg, .os-att i { width: 13px; height: 13px; flex-shrink: 0; }
.os-att > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-att-sz { color: var(--text-tertiary); flex-shrink: 0; }

/* Skeleton while loading — shaped, not a spinner. Flattened to a static
   block by the global prefers-reduced-motion neutralizer. */
.cu-skel { display: flex; flex-direction: column; gap: 12px; }
.cu-skel-line {
  height: 14px;
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: cu-skel-sweep 1.2s var(--ease) infinite;
}
.cu-skel-line--title { height: 22px; width: 60%; }
.cu-skel-line--chip  { height: 20px; width: 120px; border-radius: 999px; }
.cu-skel-line--half  { width: 50%; }
.cu-skel-row { display: flex; gap: 8px; }
@keyframes cu-skel-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Body content bits that extend the existing cu-tab-* vocabulary */
.cu-modal-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; line-height: 1.35; }
.cu-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.cu-tag-chip {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.cu-modal-section { margin-top: 18px; }
.cu-modal-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.cu-ref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  max-width: 260px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cu-ref-chip:hover { border-color: var(--primary); background: var(--primary-soft); }
.cu-ref-chip .cu-ref-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cu-ref-chip .cu-ref-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-check-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; padding: 3px 0; color: var(--text-secondary); }
.cu-check-item--done { text-decoration: line-through; color: var(--text-tertiary); }
.cu-md { font-size: 13px; line-height: 1.7; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.cu-md h4 { margin: 10px 0 4px; font-size: 13.5px; color: var(--text-primary); }
.cu-md code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 1px 5px; }
.cu-doc-page + .cu-doc-page { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
/* Submit button amber warn state when unresolved dupe callout is active */
[data-dupe-warn] { box-shadow: 0 0 0 2px var(--amber) !important; }
[data-dupe-warn][disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(0.3);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.dialog-title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }

.dialog-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* Forms */
.form-row { display: flex; gap: 14px; margin-bottom: 14px; }
.form-field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.form-field--full { flex: 1 1 100%; }
.form-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.form-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.form-label-note {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.tooltip-icon {
  display: inline-block;
  /* Now a <button> for keyboard reachability — strip UA button chrome */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  margin-left: 4px;
  font-size: 11px;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary);
  cursor: default;
  vertical-align: middle;
}

.form-row--assistable {
  flex-wrap: wrap;
  align-items: flex-start;
}

.form-field--assist {
  flex: 1 1 100%;
  gap: 0;
  margin-top: -2px;
}

.form-assist {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 0;
}

.form-assist__text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.form-assist__action {
  flex-shrink: 0;
  padding: 2px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.form-assist__action:hover {
  background: transparent;
  color: var(--primary-dark);
  text-decoration: underline;
}

.form-assist[data-tone="warning"] .form-assist__text {
  color: var(--amber);
}

.form-input,
.form-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 500;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: inherit;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a15);
  background: var(--surface);
}

.form-input.error,
.form-select.error {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(220,38,38,0.12);
}

.form-error-msg {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--red);
  margin-top: 4px;
  min-height: 0;
  animation: fadeUp var(--t-fast) var(--ease) both;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239993AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

/* =============================================
   Notification Panel
   ============================================= */
.notif-panel {
  position: fixed;
  top: 60px;
  right: 24px;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: 50; /* below modals (101) — was 150 which blocked detail modal */
  overflow: hidden;
  animation: slideDown 200ms var(--ease);
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.notif-header h3 { font-size: 14.5px; font-weight: 700; }

.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: flex;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item--unread { background: var(--primary-soft); }
body.dark .notif-item--unread { background: rgba(124,70,241,0.08); }

.notif-icon { flex-shrink: 0; margin-top: 2px; }
.notif-icon svg { width: 18px; height: 18px; }
.notif-icon--error { color: var(--red); }
.notif-icon--warning { color: var(--amber); }
.notif-icon--success { color: var(--green); }

.notif-body { display: flex; flex-direction: column; gap: 2px; }
.notif-body strong { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.notif-body p { font-size: 12px; color: var(--text-secondary); }
.notif-body time { font-size: 11px; color: var(--text-tertiary); }

/* =============================================
   Snackbar
   ============================================= */
.snackbar {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* mobile layer: clear iOS home indicator */
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px); /* mobile layer: never wider than viewport */
  background: var(--text-primary);
  color: var(--bg);
  border-radius: var(--radius-l);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  animation: snackIn 300ms var(--ease);
  min-width: 260px;
}
/* Exit = snackIn reversed (keeps translateX(-50%)); JS hides after 160ms.
   Rollback: delete this rule (with hideSnackbar in app.js). */
.snackbar.snackbar--closing { animation: snackIn 160ms var(--ease) reverse forwards; pointer-events: none; }
body.dark .snackbar { background: #EEEAF8; color: #0F0E14; }
.snackbar[data-tone="success"] { background: #112918; color: #ECFFF2; }
.snackbar[data-tone="warning"] { background: #332212; color: #FFF4E6; }
.snackbar[data-tone="error"] { background: #34161A; color: #FFF1F3; }
.snackbar[data-tone="loading"] { background: #19182A; color: #F5F2FF; }
body.dark .snackbar[data-tone="success"] { background: #EAF9EF; color: #0F2919; }
body.dark .snackbar[data-tone="warning"] { background: #FFF4E4; color: #4F2F07; }
body.dark .snackbar[data-tone="error"] { background: #FFECEE; color: #53171D; }
body.dark .snackbar[data-tone="loading"] { background: #EEEAF8; color: #0F0E14; }

.snackbar-icon { color: currentColor; }
.snackbar-icon svg { width: 17px; height: 17px; }
.snackbar-msg { flex: 1; }
.snackbar-dismiss {
  color: currentColor;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  opacity: 0.8;
}
.snackbar-dismiss:hover { opacity: 1; }
.snackbar-undo {
  color: currentColor;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  font-family: inherit;
  padding: 2px 7px;
  opacity: 0.85;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: 4px;
}
.snackbar-undo:hover { opacity: 1; }

/* =============================================
   ClickUp Integration
   ============================================= */

/* Table cell */
.cu-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; max-width: 100%; overflow: hidden; }

.cu-status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  /* light mode: mix with white so tint is visible on white bg */
  background: color-mix(in srgb, var(--cu-color, #607D8B) 14%, white);
  color: color-mix(in srgb, var(--cu-color, #607D8B) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--cu-color, #607D8B) 35%, white);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.dark .cu-status-badge {
  background: color-mix(in srgb, var(--cu-color, #607D8B) 22%, #000);
  color: color-mix(in srgb, var(--cu-color, #607D8B) 80%, #fff);
  border-color: color-mix(in srgb, var(--cu-color, #607D8B) 40%, #000);
}

.cu-status-badge--lg { padding: 4px 12px; font-size: 11px; max-width: none; }

.cu-drift-icon {
  display: inline-flex; align-items: center;
  color: var(--amber); cursor: help; margin-left: 4px;
}
.cu-drift-icon svg { width: 13px; height: 13px; }

@keyframes cu-spin { to { transform: rotate(360deg); } }
.cu-spin { animation: cu-spin 0.9s linear infinite; display: inline-block; }
.cu-syncing-indicator { color: var(--text-tertiary); display: inline-flex; align-items: center; }
.cu-syncing-indicator svg { width: 13px; height: 13px; animation: cu-spin 0.9s linear infinite; }
.cu-tab-loading svg  { animation: cu-spin 1s linear infinite; }
.cu-error-chip { font-size: 10px; color: var(--red); opacity: 0.75; }

/* Modal ClickUp tab */
.cu-tab-meta {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; margin-bottom: 4px;
}
.cu-fetched-time { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }

.cu-drift-banner {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-m);
  margin-bottom: 14px; font-size: 13px; line-height: 1.4;
}
.cu-drift-banner svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.cu-drift-banner--warning { background: rgba(217,119,6,0.1); color: var(--amber); border: 1px solid rgba(217,119,6,0.25); }
.cu-drift-banner--error   { background: rgba(220,38,38,0.08); color: var(--red);   border: 1px solid rgba(220,38,38,0.2); }
body.dark .cu-drift-banner--warning { background: rgba(217,119,6,0.15); }
body.dark .cu-drift-banner--error   { background: rgba(220,38,38,0.12); }

.cu-tab-drift-dot {
  width: 6px; height: 6px;
  background: var(--amber); border-radius: 50%;
  display: inline-block; margin-left: 5px; vertical-align: middle;
}

.cu-eta-delta { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-xs); margin-left: 6px; }
.cu-eta-delta--late  { background: rgba(220,38,38,0.1); color: var(--red);   border: 1px solid rgba(220,38,38,0.2); }
.cu-eta-delta--early { background: rgba(22,163,74,0.1); color: var(--green); border: 1px solid rgba(22,163,74,0.2); }
.cu-date--urgent { color: var(--red); font-weight: 600; }

.cu-assignees { display: flex; gap: 8px; flex-wrap: wrap; }
.cu-assignee  { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cu-assignee-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cu-assignee-avatar--initials {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
}

.cu-custom-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-cf-item {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--surface-2); border-radius: var(--radius-s);
  border: 1px solid var(--border); padding: 5px 9px; min-width: 110px;
}
.cu-cf-name  { font-size: 9px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.cu-cf-value { font-size: 12px; color: var(--text-primary); }

.cu-comments-section { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.cu-comments-header {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 10px;
}
.cu-comments-header svg { width: 13px; height: 13px; }
.cu-comment {
  padding: 9px 12px; background: var(--surface-2); border-radius: var(--radius-m);
  margin-bottom: 6px; border-left: 3px solid var(--border-strong);
}
.cu-comment:last-child { margin-bottom: 0; }
.cu-comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cu-comment-meta strong { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cu-comment-meta time   { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.cu-comment-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; }

.cu-tab-loading,
.cu-tab-empty,
.cu-tab-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 24px; color: var(--text-tertiary); text-align: center; font-size: 14px;
}
.cu-tab-loading svg,
.cu-tab-empty svg   { width: 28px; height: 28px; color: var(--primary); opacity: 0.7; }
.cu-tab-error svg   { width: 28px; height: 28px; color: var(--red); }
.cu-tab-hint { font-size: 12px; opacity: 0.7; }

/* ── PER ClickUp inline chip panel (table cell edit) ─────────────────────── */
.per-cu-url-panel {
  position: fixed; z-index: 9100;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-l); box-shadow: var(--shadow-lg);
  width: 320px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.per-cu-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.per-cu-panel-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.per-cu-panel-x {
  background: none; border: none; cursor: pointer; font-size: 14px;
  color: var(--text-tertiary); padding: 2px 5px; border-radius: var(--radius-xs); line-height: 1;
}
.per-cu-panel-x:hover { background: var(--surface-2); color: var(--text-primary); }
.per-cu-chip-list { display: flex; flex-direction: column; gap: 4px; min-height: 28px; }
.per-cu-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 4px 8px; font-size: 11px;
}
.per-cu-chip-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); color: var(--primary); }
.per-cu-chip-del {
  background: none; border: none; cursor: pointer; font-size: 11px;
  color: var(--text-tertiary); padding: 1px 3px; border-radius: 3px; flex-shrink: 0; line-height: 1;
}
.per-cu-chip-del:hover { background: var(--red-soft, rgba(220,38,38,.1)); color: var(--red); }
.per-cu-chip-empty { font-size: 11px; color: var(--text-tertiary); padding: 4px 2px; font-style: italic; }
.per-cu-add-row { display: flex; gap: 6px; }
.per-cu-add-input {
  flex: 1; font-size: 11px; font-family: var(--font-mono); padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--input-bg, var(--surface-2));
  color: var(--text-primary); outline: none;
}
.per-cu-add-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
.per-cu-add-btn {
  font-size: 11px; font-weight: 600; padding: 5px 10px;
  background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.per-cu-add-btn:hover { opacity: .85; }
.per-cu-panel-footer { display: flex; gap: 6px; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--border); }
.per-cu-cancel-btn {
  font-size: 11px; padding: 5px 10px; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; background: none; color: var(--text-secondary);
}
.per-cu-cancel-btn:hover { background: var(--surface-2); }
.per-cu-save-btn {
  font-size: 11px; font-weight: 600; padding: 5px 12px;
  background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.per-cu-save-btn:hover { opacity: .85; }

/* ── PER ClickUp modal tab — task cards ──────────────────────────────────── */
.per-cu-tab-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.per-cu-tab-count { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.per-cu-refresh-all-btn {
  font-size: 11px; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; background: none; color: var(--text-secondary);
}
.per-cu-refresh-all-btn:hover { background: var(--surface-2); }
.per-cu-task-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.per-cu-task-card {
  border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px;
}
.per-cu-task-card--loaded {
  cursor: pointer;
  transition: border-color var(--t-xfast), box-shadow var(--t-xfast), background var(--t-xfast);
}
.per-cu-task-card--loaded:hover {
  border-color: rgba(124,70,241,.35); background: var(--surface-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.per-cu-task-card--loaded:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.per-cu-task-card--loading { opacity: .65; }
.per-cu-task-card--error { border-left: 3px solid var(--red); }
.per-cu-task-card--unconfigured { border-style: dashed; opacity: .8; }
.per-cu-task-card-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.per-cu-task-id {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-tertiary); background: var(--surface-2);
  padding: 2px 6px; border-radius: var(--radius-xs); flex-shrink: 0;
}
.per-cu-task-open {
  margin-left: auto; font-size: 11px; color: var(--primary);
  text-decoration: none; font-weight: 600; white-space: nowrap; flex-shrink: 0; opacity: .8;
}
.per-cu-task-open:hover { text-decoration: underline; opacity: 1; }
.per-cu-task-loading-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--primary); border-top-color: transparent;
  animation: cu-spin 0.8s linear infinite; display: inline-block;
}
.per-cu-task-loading-label { font-size: 11px; color: var(--text-tertiary); }
.per-cu-task-err-label { font-size: 11px; color: var(--red); font-weight: 600; }
.per-cu-task-url-hint { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }
.per-cu-task-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.per-cu-task-meta-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11px; color: var(--text-tertiary);
}
.per-cu-task-meta-item { display: inline-flex; align-items: center; }
.per-cu-meta-sep { margin: 0 2px; opacity: .4; }
.per-cu-expand-hint {
  font-size: 11px; color: var(--text-tertiary); margin-top: 2px; align-self: flex-start;
  transition: color var(--t-xfast);
}
.per-cu-task-card--loaded:hover .per-cu-expand-hint { color: var(--primary); }
.per-cu-task-btn {
  align-self: flex-start; font-size: 11px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  cursor: pointer; background: none; color: var(--text-secondary);
}
.per-cu-task-btn:hover { background: var(--surface-2); }

/* ── PER ClickUp expanded task detail ─────────────────────────────────────── */
.per-cu-expanded-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.per-cu-back-btn {
  font-size: 12px; padding: 5px 10px; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; background: none;
  color: var(--text-secondary); font-weight: 500; flex-shrink: 0;
}
.per-cu-back-btn:hover { background: var(--surface-2); color: var(--text-primary); }

/* ── PER ClickUp URL manager (bottom of ClickUp tab) ──────────────────────── */
.per-cu-url-manager {
  border-top: 1px solid var(--border); padding-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.per-cu-mgr-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.per-cu-mgr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.per-cu-mgr-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 3px 7px; font-size: 11px;
}
.per-cu-mgr-chip-label { font-family: var(--font-mono); color: var(--primary); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.per-cu-mgr-chip-del {
  background: none; border: none; cursor: pointer; font-size: 10px;
  color: var(--text-tertiary); padding: 1px 3px; border-radius: 3px; line-height: 1; flex-shrink: 0;
}
.per-cu-mgr-chip-del:hover { background: rgba(220,38,38,.1); color: var(--red); }
.per-cu-mgr-add-row { display: flex; gap: 6px; }
.per-cu-mgr-input {
  flex: 1; font-size: 11px; font-family: var(--font-mono); padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--input-bg, var(--surface-2));
  color: var(--text-primary); outline: none;
}
.per-cu-mgr-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
.per-cu-mgr-add-btn {
  font-size: 11px; font-weight: 600; padding: 5px 10px;
  background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.per-cu-mgr-add-btn:hover { opacity: .85; }

/* =============================================
   Admin Config icon tile (was the Settings View block — page retired,
   only the icon tile survived because every admin section header uses it)
   ============================================= */
.ac-section-head-main > .settings-section-icon {
  width: 36px; height: 36px; border-radius: var(--radius-m);
  background: var(--primary-soft); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--primary);
}
body.dark .ac-section-head-main > .settings-section-icon { background: rgba(124,70,241,0.2); }
.settings-section-icon svg { width: 18px; height: 18px; }

.form-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }

.cu-status-indicator { display: flex; align-items: center; gap: 7px; padding: 9px 0; }
.cu-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-tertiary); opacity: 0.5; flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t), opacity var(--t);
}
.cu-status-dot--connected {
  background: var(--green); opacity: 1;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.2);
}
.cu-status-text { font-size: 12.5px; color: var(--text-secondary); }

.cu-test-result {
  margin-top: 10px; padding: 9px 14px; border-radius: var(--radius-m); font-size: 12.5px;
  display: flex; align-items: center; gap: 7px;
}
.cu-test-result__content {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.5;
}
.cu-test-result__content > span:last-child {
  flex: 1;
}
.cu-test-result svg { width: 14px; height: 14px; flex-shrink: 0; }
.cu-test-result--success { background: rgba(22,163,74,0.1);  color: var(--green); border: 1px solid rgba(22,163,74,0.2); }
.cu-test-result--error   { background: rgba(220,38,38,0.08); color: var(--red);   border: 1px solid rgba(220,38,38,0.2); }
.cu-test-result--warning { background: rgba(217,119,6,0.1);  color: var(--amber); border: 1px solid rgba(217,119,6,0.2); }
.cu-test-result--loading { background: var(--surface-2);     color: var(--text-secondary); }

.cu-sync-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; width: 100%; }
.cu-progress-bar  { flex: 1; height: 5px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.cu-progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width var(--t) var(--ease); width: 0%; }
.cu-progress-text { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.cu-sync-timestamp { font-size: 12.5px; color: var(--text-tertiary); padding: 9px 0; }

/* =============================================
   Auto-Link Match Results
   ============================================= */
.match-summary { display: flex; gap: 10px; font-size: 12.5px; margin: 10px 0 6px; flex-wrap: wrap; align-items: center; }
.match-summary-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
}
.match-summary-chip svg { width: 11px; height: 11px; }
.match-summary-chip--green { background: rgba(22,163,74,0.12); color: var(--green); }
.match-summary-chip--amber { background: rgba(217,119,6,0.12);  color: var(--amber); }
.match-summary-chip--red   { background: rgba(220,38,38,0.08);  color: var(--red); }

.match-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); margin-top: 8px; max-height: 340px; overflow-y: auto; }
.match-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.match-table th {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-tertiary); padding: 7px 10px;
  border-bottom: 1px solid var(--border); text-align: left;
  background: var(--surface-2); position: sticky; top: 0; z-index: 2;
}
.match-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }
.match-table tr:last-child td { border-bottom: none; }
.match-table tr:hover td { background: var(--surface-2); }
.match-table .col-source { font-size: 10px; font-weight: 700; color: var(--text-tertiary); white-space: nowrap; }
.match-table .col-task { font-size: 12px; color: var(--text-secondary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.match-score {
  display: inline-block; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: var(--radius-xs); white-space: nowrap;
}
.match-score--high { background: rgba(22,163,74,0.12); color: var(--green); }
.match-score--med  { background: rgba(217,119,6,0.12);  color: var(--amber); }
.match-score--low  { background: rgba(220,38,38,0.08);  color: var(--red); }

.match-toggle {
  position: relative; width: 34px; height: 18px; border-radius: 9px;
  cursor: pointer; border: none; flex-shrink: 0;
  transition: background var(--t-fast);
}
.match-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform var(--t-fast);
}
.match-toggle--on  { background: var(--green); }
.match-toggle--on::after { transform: translateX(16px); }
.match-toggle--off { background: var(--border-strong); }

.match-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

.no-matches-msg { text-align: center; padding: 20px; color: var(--text-tertiary); font-size: 13px; }

/* =============================================
   Text Popover (Working Remarks / Escalation Context)
   ============================================= */
.text-popover {
  position: fixed;
  z-index: var(--z-top);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  width: 320px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transition: opacity var(--t-xfast) var(--ease), transform var(--t-xfast) var(--ease);
  opacity: 0;
  transform: translateY(4px);
}
.text-popover:not(.hidden) { opacity: 1; transform: translateY(0); }
.text-popover-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 8px 12px 5px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--primary-soft);
}
body.dark .text-popover-label { background: rgba(124,70,241,0.12); }
.text-popover-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  padding: 9px 12px 10px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Remarks thread view inside popover */
.text-popover-thread {
  overflow-y: auto;
  padding: 6px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.text-popover-thread .remark-entry {
  padding: 8px 0;
  animation: none; /* skip animation inside popover */
}
.text-popover-thread .remark-entry-text {
  font-size: 12.5px;
}
.text-popover-thread .remark-entry-date {
  font-size: 10px;
}
.th-sort-arrow {
  font-size: 11px;
  opacity: 0.8;
  margin-left: 3px;
  font-weight: 700;
}

/* ── Column pin glyph (inline freeze-in-place UX) ─────────── */
/* th-inner is a flex wrapper INSIDE <th> — <th> keeps display:table-cell */
.th-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

.th-label-zone {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-pin-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-s);
  flex-shrink: 0;
  opacity: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  transition:
    opacity   var(--t-fast) var(--ease),
    color     var(--t-fast) var(--ease),
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--t-fast) var(--ease);
}

/* Show on header hover */
th:hover .col-pin-glyph { opacity: 1; }

/* Hover intent on pin itself */
.col-pin-glyph:hover {
  color: var(--primary);
  background: var(--primary-soft);
  transform: scale(1.12);
}

/* Frozen / active state — always visible, tilted like pinned-in */
.col-pin-glyph--active {
  opacity: 1;
  color: var(--primary);
  transform: rotate(-45deg);
}
.col-pin-glyph--active:hover {
  color: var(--red);
  background: var(--red-soft);
  transform: rotate(-45deg) scale(1.1);
}

/* ═══════════════════════════════════════════
   Dark mode — Escalation page overrides
   ═══════════════════════════════════════════ */

/* Strip white mixing from card/shell backgrounds — keeps surfaces dark */
body.dark .esc-card {
  background: var(--surface);
}
body.dark .esc-hero-motion-shell {
  background: var(--surface-2);
}
body.dark .esc-playbook-summary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-soft) 30%, var(--surface) 70%),
    var(--surface));
}
body.dark .esc-snapshot-intro {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-soft) 22%, var(--surface) 78%),
    var(--surface));
}

/* Boost label text: tertiary is unreadable on mixed-white dark surfaces */
body.dark .esc-snapshot-label { color: var(--text-secondary); }

/* Runway chip count badge — white 88% mix is jarring on dark bg */
body.dark .esc-runway-chip__count {
  background: color-mix(in srgb, currentColor 22%, transparent);
}

/* Swimlane count badge — slight reduction of white opacity */
body.dark .esc-swimlane-count {
  background: rgba(255,255,255,.1);
}

/* =============================================
   Analytics Dashboard
   ============================================= */
.analytics-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* GridStack container — must not be clipped; height set by JS */
#analyticsGrid {
  min-height: 200px;
  overflow: visible !important; /* allow GridStack to set height via inline style */
}
.an-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.an-loading--motion {
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), color-mix(in srgb, var(--surface-2) 86%, white 14%));
}
.an-loading--motion span {
  max-width: 320px;
  line-height: 1.55;
}
.an-loading--empty {
  color: var(--text-secondary);
}

/* KPI row */
/* Chart card */
.an-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.an-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.an-card-title  { font-size: 13px; font-weight: 700; color: var(--text-primary); }

.an-card-sub    { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.an-chart-wrap  { position: relative; }

/* Grid rows */
.an-row-2        { display: grid; gap: 16px; }
.an-row-2--5050  { grid-template-columns: 1fr 1fr; }
.an-row-2--6040  { grid-template-columns: 3fr 2fr; }
.an-row-2--4060  { grid-template-columns: 2fr 3fr; }

/* Analytics tables */
.an-table-wrap { overflow-x: auto; max-height: 360px; overflow-y: auto; border-radius: var(--radius-m); border: 1px solid var(--border); }
.an-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.an-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-2); /* on thead itself, not just th — prevents bleed-through */
}
.an-table th {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-tertiary); padding: 8px 12px;
  /* box-shadow instead of border-bottom — border-collapse:collapse eats border-bottom on sticky */
  box-shadow: 0 1px 0 var(--border);
  text-align: left;
  background: var(--surface-2);
}
.an-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.an-table tr:last-child td { border-bottom: none; }
.an-table tbody tr:hover td { background: var(--surface-2); }

/* Badges in analytics */
.an-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; }
.an-badge--yes    { background: rgba(220,38,38,.1);  color: var(--red); }
.an-badge--no     { background: rgba(22,163,74,.1);  color: var(--green); }

/* Delay tracker filter buttons */
.an-tl-fb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.an-tl-fb:hover { background: var(--surface-2); color: var(--text-primary); }
.an-tl-fb.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.an-badge--0-5    { background: rgba(22,163,74,.12); color: var(--green); }
.an-badge--5-10   { background: rgba(217,119,6,.12); color: var(--amber); }
.an-badge--10-15  { background: rgba(217,119,6,.2);  color: var(--amber); }
.an-badge--15plus { background: rgba(220,38,38,.1);  color: var(--red); }

/* Section label */
.an-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: -6px;
}

/* Due-soon highlight */
.an-due-soon { color: var(--amber); font-weight: 600; }
.an-overdue   { color: var(--red);   font-weight: 600; }

/* ── Breadcrumb (analytics drill-down) ── */
.an-breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:4px 0 8px; border-bottom:1px solid var(--border); margin-bottom:4px; font-size:12px; }
.an-breadcrumb.hidden { display:none !important; }
.an-bc-all { color:var(--text-secondary); cursor:pointer; transition:color var(--t-fast); }
.an-bc-all:hover { color:var(--primary); }
.an-bc-sep { color:var(--text-tertiary); }
.an-bc-seg { color:var(--primary); cursor:pointer; font-weight:600; padding:2px 9px; border-radius:var(--radius-pill); background:var(--primary-soft); transition:background var(--t-fast); }
.an-bc-seg:hover { background:rgba(124,70,241,.25); }

/* ── Drill detail panel ── */
.an-drill-panel { border-top:1px solid var(--border); padding-top:12px; margin-top:6px; }
.an-drill-panel.hidden { display:none !important; }
.an-drill-count { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); margin-bottom:8px; }
.an-drill-open { color:var(--primary) !important; cursor:pointer !important; }
.an-drill-open:hover { text-decoration:underline; }

/* ── Delivery stat pills ── */
.an-delivery-stats { display:flex; gap:12px; margin-bottom:4px; }
.an-delivery-pill { display:flex; flex-direction:column; align-items:center; background:var(--surface-2); border-radius:var(--radius-m); padding:10px 16px; gap:3px; flex:1; }
.an-delivery-pill-val { font-size:24px; font-weight:800; line-height:1; } /* was 300 — every other display numeral is 800 */
.an-delivery-pill-lbl { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); }
.an-delivery-pill--green  .an-delivery-pill-val { color:var(--green); }
.an-delivery-pill--red    .an-delivery-pill-val { color:var(--red); }
.an-delivery-pill--violet .an-delivery-pill-val { color:var(--primary); }

/* =============================================
   Timeline View — Gantt
   ============================================= */
.tl-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* Stats row reuses .stats-row */
.tl-stats { flex-shrink: 0; }

/* ── Timeline KPI Cards ───────────────────────────────────── */
.tl-kpi-row {
  display:flex;
  gap:14px;
  padding:20px 24px 12px;
  flex-shrink:0;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.hcr-summary-stack {
  display: flex;
  flex-direction: column;
}

.summary-collapse-row,
.hcr-summary-compact {
  transform-origin: top center;
  will-change: opacity, transform;
  transition:
    opacity .42s cubic-bezier(0.22, 1, 0.36, 1),
    transform .56s cubic-bezier(0.22, 1, 0.36, 1),
    max-height .56s cubic-bezier(0.22, 1, 0.36, 1),
    padding .56s cubic-bezier(0.22, 1, 0.36, 1),
    margin .56s cubic-bezier(0.22, 1, 0.36, 1),
    filter var(--t-slow) var(--ease);
}

.summary-collapse-row {
  max-height: 280px;
}

.hcr-summary-stack.is-collapsed .summary-collapse-row {
  opacity: 0;
  transform: translateY(-12px) scale(0.985);
  filter: saturate(0.94);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  pointer-events: none;
}

/* Instant apply when restoring persisted collapse state on init/re-render — prevents the
   collapse animation from replaying on every view rebuild (e.g. PER gantt re-renders). */
.hcr-summary-stack.summary-collapse--no-anim .summary-collapse-row,
.hcr-summary-stack.summary-collapse--no-anim .hcr-summary-compact {
  transition: none !important;
}

.hcr-summary-compact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  padding: 0 24px;
}

.hcr-summary-stack.is-collapsed .hcr-summary-compact {
  max-height: 92px;
  opacity: 1;
  transform: translateY(0) scale(1);
  padding: 10px 24px 14px;
  pointer-events: auto;
}

.summary-controls-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 24px 10px; /* top gap so the Hide-summary button clears the KPI cards */
}

.summary-controls-row__spacer {
  flex: 1;
}

.hcr-summary-compact__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.hcr-summary-compact__main > * ,
.hcr-summary-compact__show {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1),
    transform .48s cubic-bezier(0.22, 1, 0.36, 1);
}

.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > *,
.hcr-summary-stack.is-collapsed .hcr-summary-compact__show {
  opacity: 1;
  transform: translateY(0);
}

.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(1) { transition-delay: .06s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(2) { transition-delay: .11s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(3) { transition-delay: .16s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(4) { transition-delay: .21s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(5) { transition-delay: .26s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(6) { transition-delay: .31s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(7) { transition-delay: .36s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__show { transition-delay: .24s; }

.hcr-summary-compact__lead {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.hcr-summary-compact__metric,
.hcr-summary-compact__filter {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.hcr-summary-compact__metric {
  color: var(--text-primary);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--surface) 88%, white 12%),
    color-mix(in srgb, var(--surface-2) 74%, white 26%)
  );
}

.hcr-summary-compact__metric::after {
  display: none;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--compact-kpi-accent, var(--border-strong));
  opacity: 0;
}

.hcr-summary-compact__metric--violet {
  --compact-kpi-accent: var(--primary);
  background: linear-gradient(155deg, var(--surface) 38%, var(--primary-soft) 100%);
  border-color: rgba(124,70,241,0.18);
  color: var(--primary);
}

.hcr-summary-compact__metric--amber {
  --compact-kpi-accent: var(--amber);
  background: linear-gradient(155deg, var(--surface) 38%, var(--amber-soft) 100%);
  border-color: rgba(217,119,6,0.18);
  color: var(--amber);
}

.hcr-summary-compact__metric--red {
  --compact-kpi-accent: var(--red);
  background: linear-gradient(155deg, var(--surface) 38%, var(--red-soft) 100%);
  border-color: rgba(220,38,38,0.18);
  color: var(--red);
}

.hcr-summary-compact__metric--green {
  --compact-kpi-accent: var(--green);
  background: linear-gradient(155deg, var(--surface) 38%, var(--green-soft) 100%);
  border-color: rgba(22,163,74,0.18);
  color: var(--green);
}

.hcr-summary-compact__metric--teal {
  --compact-kpi-accent: var(--teal);
  background: linear-gradient(155deg, var(--surface) 38%, var(--teal-soft) 100%);
  border-color: rgba(8,145,178,0.18);
  color: var(--teal);
}

.hcr-summary-compact__metric--accent {
  --compact-kpi-accent: var(--accent);
  background: linear-gradient(155deg, var(--surface) 38%, var(--accent-soft) 100%);
  border-color: rgba(16,119,218,0.18);
  color: var(--accent);
}

.hcr-summary-compact__metric[data-filter-chip],
.hcr-summary-compact__metric[data-per-chip] {
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--t) cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease),
    filter var(--t) var(--ease);
}

.hcr-summary-compact__metric[data-filter-chip]:hover,
.hcr-summary-compact__metric[data-per-chip]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--depth-shadow);
  filter: saturate(1.04);
}

.hcr-summary-compact__metric--active {
  border-color: var(--primary) !important;
  box-shadow:
    0 0 0 1px rgba(124,70,241,0.16),
    0 10px 22px rgba(124,70,241,0.14) !important;
  transform: translateY(-1px);
}

.hcr-summary-compact__filter {
  background: rgba(124,70,241,.08);
  border-color: rgba(124,70,241,.18);
  color: var(--primary);
}

.hcr-summary-compact__show {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

body.dark .hcr-summary-compact__lead {
  color: color-mix(in srgb, var(--text-tertiary) 78%, white 22%);
}

body.dark .hcr-summary-compact__metric,
body.dark .hcr-summary-compact__filter {
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  /* White-mix gradient from the light theme lightened these toward grey on dark */
  background: linear-gradient(155deg, var(--surface), var(--surface-2));
}

body.dark .hcr-summary-compact__show {
  color: color-mix(in srgb, var(--primary) 84%, white 16%);
}

.tl-kpi-card {
  flex: 1;
  border-radius: var(--radius-xl);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  box-shadow: var(--shadow-sm);
  text-align: left;
  /* Spring easing on lift; smoother ease on shadow/border */
  transition:
    transform      var(--t-slow) var(--ease-spring),
    box-shadow     var(--t-slow) var(--ease),
    border-color   var(--t) var(--ease);
}

/* Top-edge glass sheen */
.tl-kpi-card::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 16px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}

/* Bottom accent strip */
.tl-kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  opacity: 0.78;
  transition: filter var(--t-slow) var(--ease), height var(--t-slow) var(--ease-spring), opacity 0.28s var(--ease);
}

/* Hover — spring lift, layered shadow depth, sheen intensifies */
.tl-kpi-card:hover {
  transform: translateY(-4px) scale(1.006);
  z-index: 2;
}
.tl-kpi-card:hover::before {
  opacity: 0.82;
}
.tl-kpi-card:hover::after {
  filter: brightness(1.12);
  height: 3px;
  opacity: 0.92;
}

/* Dark mode — kill white glass sheen; it reads as harsh light bleed on dark cards */
body.dark .tl-kpi-card::before,
body.dark .tl-kpi-card:hover::before { opacity: 0; }

/* Icon wrap micro-scale on card hover */
.tl-kpi-card:hover .tl-kpi-icon-wrap {
  transform: scale(1.1);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tl-kpi-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }

.tl-kpi-icon-wrap {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--radius-m); flex-shrink:0;
  transition: transform var(--t) var(--ease);
}
.tl-kpi-icon-wrap svg { width:15px; height:15px; }

.tl-kpi-label { font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; }
.tl-kpi-value { font-size:36px; font-weight:800; line-height:1; letter-spacing:-0.8px; }
.tl-kpi-value--sm { font-size:22px; letter-spacing:-0.4px; }
/* Rollback: remove @keyframes kpi-digit-pop + .kpi-digit rules to revert KPI number pop-in.
   Per-digit blur-slide (transitions.dev 02-number-pop-in); house bouncy easing; reduced-motion neutralized globally. */
@keyframes kpi-digit-pop {
  0%   { transform: translateY(8px); opacity: 0; filter: blur(2px); }
  100% { transform: translateY(0);   opacity: 1; filter: blur(0); }
}
.tl-kpi-value .kpi-digit { display: inline-block; }
.tl-kpi-value.is-pop .kpi-digit { animation: kpi-digit-pop 500ms cubic-bezier(0.34, 1.45, 0.64, 1) both; }  /* skill 02-number-pop-in: --digit-dur 500ms, --digit-ease */
.tl-kpi-value.is-pop .kpi-digit[data-stagger="1"] { animation-delay: 70ms; }
.tl-kpi-value.is-pop .kpi-digit[data-stagger="2"] { animation-delay: 140ms; }
.tl-kpi-sub { font-size:11.5px; font-weight:500; line-height:1.4; margin-top:2px; color:var(--text-secondary); }

/* Violet */
.tl-kpi--violet { background:linear-gradient(155deg,var(--surface) 40%,var(--primary-soft) 100%); border:1px solid rgba(124,70,241,0.18); }
.tl-kpi--violet::after { background:var(--primary); }
.tl-kpi--violet:hover  {
  box-shadow:
    0 2px 4px  rgba(124,70,241,0.10),      /* ambient */
    0 8px 20px rgba(124,70,241,0.22),     /* colored glow */
    0 20px 36px var(--depth-shadow); /* depth */
}
.tl-kpi--violet .tl-kpi-icon-wrap { background:var(--primary-soft); color:var(--primary); }
.tl-kpi--violet .tl-kpi-label { color:var(--primary); }
.tl-kpi--violet .tl-kpi-value { color:var(--primary); }

/* Amber */
.tl-kpi--amber { background:linear-gradient(155deg,var(--surface) 40%,var(--amber-soft) 100%); border:1px solid rgba(217,119,6,0.18); }
.tl-kpi--amber::after { background:var(--amber); }
.tl-kpi--amber:hover  {
  box-shadow:
    0 2px 4px  rgba(217,119,6,0.08),      /* ambient */
    0 8px 20px rgba(217,119,6,0.22),     /* colored glow */
    0 20px 36px var(--depth-shadow); /* depth */
}
.tl-kpi--amber .tl-kpi-icon-wrap { background:var(--amber-soft); color:var(--amber); }
.tl-kpi--amber .tl-kpi-label { color:var(--amber); }
.tl-kpi--amber .tl-kpi-value { color:var(--amber); }

/* Red */
.tl-kpi--red { background:linear-gradient(155deg,var(--surface) 40%,var(--red-soft) 100%); border:1px solid rgba(220,38,38,0.18); }
.tl-kpi--red::after { background:var(--red); }
.tl-kpi--red:hover  {
  box-shadow:
    0 2px 4px  rgba(220,38,38,0.08),      /* ambient */
    0 8px 20px rgba(220,38,38,0.22),     /* colored glow */
    0 20px 36px var(--depth-shadow); /* depth */
}
.tl-kpi--red .tl-kpi-icon-wrap { background:var(--red-soft); color:var(--red); }
.tl-kpi--red .tl-kpi-label { color:var(--red); }
.tl-kpi--red .tl-kpi-value { color:var(--red); }

/* Green */
.tl-kpi--green { background:linear-gradient(155deg,var(--surface) 40%,var(--green-soft) 100%); border:1px solid rgba(22,163,74,0.18); }
.tl-kpi--green::after { background:var(--green); }
.tl-kpi--green:hover  {
  box-shadow:
    0 2px 4px  rgba(22,163,74,0.08),      /* ambient */
    0 8px 20px rgba(22,163,74,0.22),     /* colored glow */
    0 20px 36px var(--depth-shadow); /* depth */
}
.tl-kpi--green .tl-kpi-icon-wrap { background:var(--green-soft); color:var(--green); }
.tl-kpi--green .tl-kpi-label { color:var(--green); }
.tl-kpi--green .tl-kpi-value { color:var(--green); }

/* Accent */
.tl-kpi--accent { background:linear-gradient(155deg,var(--surface) 40%,var(--accent-soft) 100%); border:1px solid rgba(16,119,218,0.18); }
.tl-kpi--accent::after { background:var(--accent); }
.tl-kpi--accent:hover  {
  box-shadow:
    0 2px 4px  rgba(16,119,218,0.08),      /* ambient */
    0 8px 20px rgba(16,119,218,0.22),     /* colored glow */
    0 20px 36px var(--depth-shadow); /* depth */
}
.tl-kpi--accent .tl-kpi-icon-wrap { background:var(--accent-soft); color:var(--accent); }
.tl-kpi--accent .tl-kpi-label { color:var(--accent); }
.tl-kpi--accent .tl-kpi-value { color:var(--accent); }

/* Teal */
.tl-kpi--teal { background:linear-gradient(155deg,var(--surface) 40%,var(--teal-soft) 100%); border:1px solid rgba(8,145,178,0.18); }
.tl-kpi--teal::after { background:var(--teal); }
.tl-kpi--teal:hover  {
  box-shadow:
    0 2px 4px  rgba(8,145,178,0.08),      /* ambient */
    0 8px 20px rgba(8,145,178,0.24),     /* colored glow */
    0 20px 36px var(--depth-shadow); /* depth */
}
.tl-kpi--teal .tl-kpi-icon-wrap { background:var(--teal-soft); color:var(--teal); }
.tl-kpi--teal .tl-kpi-label { color:var(--teal); }
.tl-kpi--teal .tl-kpi-value { color:var(--teal); }

/* Active state (filter chip selected) */
.tl-kpi--active {
  transform:translateY(-2px) !important;
  outline:2px solid var(--primary);
  outline-offset:2px;
}
/* Rollback: remove this rule to revert. Without it the !important above beats
   .tl-kpi-card:hover, so hovering an active KPI card dropped it from -4px to -2px. */
.tl-kpi--active:hover {
  transform: translateY(-4px) scale(1.006) !important;
}

/* All Requests page: cards are clickable filters */
.tl-kpi-card[data-filter-chip] { cursor:pointer; }

/* Informational tiles should stay visually calm and non-interactive */
.tl-kpi-card--static { cursor: default; }
.tl-kpi-card--static:hover {
  transform: none;
  z-index: 0;
}
.tl-kpi-card--static:hover::before {
  opacity: 0.5;
}
.tl-kpi-card--static:hover::after {
  filter: none;
  height: 3px;
}
.tl-kpi-card--static:hover .tl-kpi-icon-wrap {
  transform: none;
}

/* Controls bar */
.tl-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tl-ctl-group { display: flex; align-items: center; gap: 6px; }
.tl-ctl-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); white-space: nowrap; }
.tl-ctl-btn {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  font-family: inherit;
  white-space: nowrap;
}
.tl-ctl-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.tl-ctl-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.tl-dated-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; user-select: none;
}
.tl-dated-toggle input { accent-color: var(--primary); cursor: pointer; }
.tl-undated-badge {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  background: var(--surface-2); padding: 3px 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
}

.tl-group-strip {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 24px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border) 86%);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface-2) 88%, white 12%));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tl-group-strip__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 14px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.tl-group-strip__toggle:hover {
  background: color-mix(in srgb, var(--surface-2) 72%, white 28%);
}
.tl-group-strip__toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.tl-group-strip__toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tl-group-strip__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.tl-group-strip__summary {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.tl-group-strip__caption {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  max-width: 560px;
}
.tl-group-strip__metric {
  display: inline-flex;
  flex-direction: row;      /* single-line pill (value + label) — was a 2-line stacked chip */
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 74%, white 26%);
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--primary) 26%);
}
.tl-group-strip__metric-value {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.tl-group-strip__metric-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tl-group-strip__chevron {
  font-size: 16px;
  color: var(--text-tertiary);
  line-height: 1;
  transition: transform var(--t-fast), color var(--t-fast);
}
.tl-group-strip.is-open .tl-group-strip__chevron {
  transform: rotate(180deg);
  color: var(--primary);
}
.tl-group-strip__toggle:hover .tl-group-strip__chevron {
  color: var(--text-primary);
}
.tl-group-strip__body {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--t) var(--ease), opacity var(--t) var(--ease), border-color var(--t-fast) var(--ease);
  opacity: 0;
}
.tl-group-strip.is-open .tl-group-strip__body {
  grid-template-rows: 1fr;
  opacity: 1;
  border-top-color: var(--border);
}
.tl-group-strip__body > .tl-group-strip__chips {
  min-height: 0;
  overflow: hidden;
}
.tl-group-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 16px;
}
.tl-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--group-color, var(--primary)) 20%, var(--border) 80%);
  background: color-mix(in srgb, var(--group-color, var(--primary)) 7%, var(--surface) 93%);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  font-family: inherit;
}
.tl-group-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--group-color, var(--primary)) 44%, var(--border) 56%);
  box-shadow: var(--shadow-sm);
}
.tl-group-chip--active {
  border-color: var(--group-color, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color, var(--primary)) 18%, transparent);
}
.tl-group-chip__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--group-color, var(--primary));
  flex-shrink: 0;
}
.tl-group-chip__label {
  font-size: 12px;
  font-weight: 700;
}
.tl-group-chip__meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Gantt canvas wrapper */
.tl-gantt-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden !important;
  margin: 0 24px 10px;
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}
/* Keep the Gantt container as the only scroll parent so sticky headers lock correctly. */
.tl-gantt-wrap .gantt-container {
  height: 100% !important;
  overflow: auto !important;
}
.tl-group-overlay {
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
  z-index: 2;
}
.tl-group-band {
  position: absolute;
  left: 0;
}
.tl-group-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--group-color, var(--primary)) 6%, transparent), transparent 18%);
  opacity: .95;
}
.tl-group-band::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--group-color, var(--primary)) 28%, var(--border) 72%);
}
.tl-group-band--first::after {
  display: none;
}
.tl-group-band--active::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--group-color, var(--primary)) 12%, transparent), transparent 22%);
}

.tl-legend {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 24px 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.tl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.tl-legend-bar {
  width: 20px;
  height: 5px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.tl-empty-msg {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-tertiary);
  font-style: italic;
  line-height: 1.55;
}
.tl-empty-motion {
  width: 74px;
  height: 74px;
}

/* ── Frappe Gantt overrides ───────────────────────── */
.gantt-container {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: var(--surface) !important;
}

.gantt-container .grid-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--surface-2) !important;
}

.gantt-container .upper-header,
.gantt-container .lower-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.gantt-container .side-header {
  background: var(--surface-2) !important;
  border-left: 1px solid var(--border) !important;
}
.gantt-container .upper-text,
.gantt-container .lower-text,
.gantt-container .lower-header .date,
.gantt-container .upper-header .date {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-shadow: none !important;
}
.gantt-container .upper-text {
  color: var(--text-tertiary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}
.gantt-container .lower-text {
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  background: transparent !important;
}
.gantt-container .upper-text.current-upper {
  background: transparent !important;
  color: var(--primary) !important;
  border: none !important;
  border-radius: 0 !important;
}
.gantt-container .lower-text.current-date-highlight {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(124,70,241,.25) !important;
  border-radius: var(--radius-pill) !important;
}
.gantt-container .lower-header .date { color: var(--text-secondary) !important; font-weight: 600 !important; font-size: 11px !important; }
.gantt-container .upper-header .date { color: var(--text-tertiary) !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .05em !important; }

.gantt .grid-row { fill: var(--surface) !important; }
.gantt .grid-row:nth-child(even) { fill: var(--bg) !important; }
.gantt .row-line { stroke: var(--border) !important; }
.gantt .tick { stroke: var(--border) !important; }
.gantt .tick.thick { stroke: var(--border-strong) !important; }
.gantt .today-highlight { fill: rgba(217,119,6,0.08) !important; }

.gantt .bar-label { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; fill: #fff !important; }
.gantt .bar-label.big { fill: var(--text-secondary) !important; }
.gantt .bar-progress { opacity: 0.75 !important; }
.gantt .bar-wrapper { cursor: pointer !important; }
.gantt .bar-wrapper:hover .bar { filter: brightness(1.1) !important; }

.gantt-container .today-button {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-m) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
}

.gantt-container .popup-wrapper {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-l) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 14px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  max-width: 300px !important;
  min-width: 240px !important;
}
.gantt-container .popup-wrapper .title,
.gantt-container .popup-wrapper .subtitle,
.gantt-container .popup-wrapper .details { display: none !important; }

body.dark .gantt .grid-row { fill: var(--surface) !important; }
body.dark .gantt .grid-row:nth-child(even) { fill: var(--bg) !important; }
body.dark .gantt-container .upper-header,
body.dark .gantt-container .lower-header { background: var(--surface-2) !important; border-bottom-color: var(--border) !important; }
body.dark .gantt .bar-label.big { fill: var(--text-secondary) !important; }
body.dark .gantt-container .popup-wrapper { background: var(--surface) !important; }

.cu-md-link { color: var(--primary); font-weight: 500; }
.cu-md-link svg { opacity: 0.7; }

/* =============================================
   Clerk Auth Gate
   ============================================= */
.clerk-gate {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  transition: opacity var(--t-slow) var(--ease);
}
.clerk-gate.hidden { display: none !important; }

.clerk-gate-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.clerk-gate-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, #8B5BF2 0%, #7C46F1 55%, #5B2CC9 100%);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 16px rgba(106,58,244,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.clerk-gate-icon svg { width: 31px; height: 31px; }
/* Dark mode: inverse logo — white tile + Royal Blue mark (via currentColor) */
body.dark .clerk-gate-icon {
  background: #fff;
  color: #7C46F1;
  border: 1px solid rgba(124,70,241,0.20);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(124,70,241,0.08);
}
.clerk-gate-title { font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: .03em; text-transform: uppercase; }
.clerk-gate-sub   { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }

#clerkSignInMount { width: 100%; max-width: 420px; }

.clerk-gate-msg {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 400px;
  line-height: 1.6;
  padding: 14px 18px;
  background: var(--surface-2);
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
}
.clerk-gate-msg a { color: var(--primary); font-weight: 600; }
.clerk-gate-msg.hidden { display: none !important; }

/* ── Clerk gate loading animation ───────────────────────────── */
.clerk-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: cg-fade-up 0.5s cubic-bezier(0.34,1.2,0.64,1) both;
}
.clerk-loader--out {
  animation: cg-fade-out 0.4s ease forwards !important;
  pointer-events: none;
}

/* Orbit container */
.clerk-loader-orbit {
  position: relative;
  width: 88px;
  height: 88px;
}

/* Central brand icon */
.clerk-loader-icon-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, #8B5BF2 0%, #7C46F1 55%, #5B2CC9 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  animation: cg-icon-pulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(124,70,241,0.45);
}
/* explicit size so the mark is padded & centred like the header/gate (was full-bleed) */
.clerk-loader-icon-wrap svg { width: 35px; height: 35px; }
/* Dark mode: inverse logo — white tile + Royal Blue mark (via currentColor) */
body.dark .clerk-loader-icon-wrap {
  background: #fff;
  color: #7C46F1;
}

/* Inner orbit ring */
.clerk-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--primary);
  border-right-color: rgba(124,70,241,0.25);
  animation: cg-spin 1.1s linear infinite;
}

/* Outer orbit ring — counter-spin, fainter */
.clerk-loader-ring--outer {
  inset: -10px;
  border-width: 1.5px;
  border-top-color: transparent;
  border-bottom-color: rgba(124,70,241,0.35);
  animation: cg-spin-rev 1.9s linear infinite;
}

/* "Authenticating…" blinking label */
.clerk-loader-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  animation: cg-blink 1.8s ease-in-out infinite;
}

/* Progress bar */
.clerk-loader-bar {
  width: 180px;
  height: 3px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.clerk-loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary) 0%, #a78bfa 100%);
  border-radius: var(--radius-pill);
  animation: cg-progress 3s cubic-bezier(0.4,0,0.15,1) forwards;
}

/* Sign-in mount — hidden until loader finishes */
.clerk-mount-hidden {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
  pointer-events: none;
  width: 100%;
  max-width: 420px;
}
.clerk-mount-hidden.clerk-mount-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Keyframes */
@keyframes cg-spin     { to { transform: rotate(360deg); } }
@keyframes cg-spin-rev { to { transform: rotate(-360deg); } }
@keyframes cg-icon-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,70,241,0.4); transform: translate(-50%,-50%) scale(1); }
  50%     { box-shadow: 0 0 0 12px rgba(124,70,241,0); transform: translate(-50%,-50%) scale(1.06); }
}
@keyframes cg-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}
@keyframes cg-progress {
  0%   { width: 0%; }
  55%  { width: 70%; }
  82%  { width: 88%; }
  100% { width: 100%; }
}
@keyframes cg-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cg-fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* User menu (sign out dropdown) */
.user-menu {
  position: fixed;
  bottom: 64px;
  left: 12px;
  width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-overlay);
  overflow: hidden;
  animation: slideDown var(--t-fast) var(--ease);
}
.user-menu-info {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-menu-name  { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-menu-email { font-size: 11px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
  text-align: left;
  transition: background var(--t-fast);
}
.user-menu-item:hover { background: var(--surface-2); }

/* =============================================
   Profile View
   ============================================= */
.profile-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: stretch;
}
.profile-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 752px;
  max-width: 860px;
}

.profile-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary); padding-bottom: 4px;
}

/* Clerk component container */
.profile-clerk-card {
  min-height: 720px;
  border-radius: var(--radius-xl);
}
#clerkUserProfile { min-height: 720px; }
#clerkUserProfile,
#clerkUserProfile > *,
#clerkUserProfile .cl-rootBox,
#clerkUserProfile .cl-userProfile-root,
#clerkUserProfile .cl-cardBox,
#clerkUserProfile .cl-scrollBox,
#clerkUserProfile .cl-pageScrollBox,
#clerkUserProfile .cl-page,
#clerkUserProfile .cl-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
#clerkUserProfile .cl-cardBox,
#clerkUserProfile .cl-card {
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
}

.profile-empty {
  min-height: 260px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.profile-empty strong {
  color: var(--text-primary);
  font-size: 15px;
}
.profile-empty span:not(.profile-empty-icon) {
  max-width: 360px;
  font-size: 12.5px;
  line-height: 1.6;
}
.profile-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-l);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-empty-icon svg { width: 22px; height: 22px; }

.profile-pref-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.profile-pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.profile-pref-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.profile-pref-sub   { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

.profile-theme-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  cursor: pointer; transition: background var(--t-fast);
}
.profile-theme-toggle:hover { background: var(--primary-soft); color: var(--primary); }
.profile-theme-toggle svg { width: 15px; height: 15px; }

/* ── Clerk UserProfile seamless overrides ── */
#clerkUserProfile { width: 100%; }
#clerkUserProfile .cl-rootBox,
#clerkUserProfile .cl-userProfile-root { width: 100% !important; box-shadow: none !important; }

/* Strip Clerk's outer shadow so it blends with app surface */
#clerkUserProfile .cl-card { box-shadow: none !important; }

/* Nav sidebar matches app's surface-2 */
#clerkUserProfile .cl-navbar {
  background: var(--surface-2) !important;
  border-right: 1px solid var(--border) !important;
}

/* Nav buttons match app nav style */
#clerkUserProfile .cl-navbarButton:hover { background: var(--primary-soft) !important; }
#clerkUserProfile .cl-navbarButton__active { background: var(--primary-soft) !important; color: var(--primary) !important; }

/* Injected sign-out nav item */
.cl-injected-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
}
.cl-injected-signout-btn {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px !important;
  border-radius: var(--radius-m) !important;
  color: var(--red, #E5534B) !important;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 100ms;
}
.cl-injected-signout-btn:hover { background: rgba(229,83,75,0.08) !important; }
.cl-injected-signout-btn svg { flex-shrink: 0; opacity: 0.85; }

/* Hide standalone session card — sign-out now lives inside Clerk nav */
.profile-session-card { display: none !important; }

/* Hide "Secured by Clerk" and development mode badge */
#clerkUserProfile .cl-footer,
#clerkUserProfile .cl-footerAction,
#clerkUserProfile [data-localization-key="userProfile.footer.text"] { display: none !important; }

/* Profile page layout — full height */
.view#view-my-submissions { overflow: hidden; }
.profile-container { max-height: 100%; }

/* Hide ALL Clerk branding/footer — target every possible selector */
#clerkUserProfile [class*="footer"],
#clerkUserProfile [class*="Footer"],
#clerkUserProfile [class*="powered"],
#clerkUserProfile [class*="Powered"],
#clerkUserProfile [class*="secured"],
#clerkUserProfile [class*="Secured"],
#clerkUserProfile [class*="badge"],
#clerkUserProfile [class*="Badge"],
#clerkUserProfile a[href*="clerk.com"],
#clerkUserProfile a[href*="clerk.dev"] { display: none !important; height: 0 !important; overflow: hidden !important; }

.profile-pref-card { min-width: 0; }
.profile-pref-row { flex-wrap: nowrap; gap: 8px; }
.profile-pref-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-theme-toggle { white-space: nowrap; flex-shrink: 0; }
.profile-signout-btn { flex-shrink: 0; white-space: nowrap; }

.user-menu-item--settings { color: var(--text-primary); }
.user-menu-item--settings:hover { background: var(--surface-2); color: var(--primary); }

/* ── Analytics active filter chip ── */
.an-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.an-filter-chip-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}

.an-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 12px;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.an-filter-chip:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: var(--primary);
}
.an-filter-chip-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
}
.an-filter-chip-x {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.7;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  transition: background var(--t-fast), opacity var(--t-fast);
}
.an-filter-chip:hover .an-filter-chip-x {
  opacity: 1;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ── Frappe Gantt dark mode overrides ── */
body.dark .gantt-container {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}
body.dark .gantt-container .grid-header,
body.dark .gantt-container .upper-header,
body.dark .gantt-container .lower-header,
body.dark .gantt-container .side-header {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
body.dark .gantt svg,
body.dark .gantt-container svg {
  background: var(--surface) !important;
}
body.dark .gantt .grid-row           { fill: var(--surface) !important; }
body.dark .gantt .grid-row:nth-child(even) { fill: rgba(255,255,255,0.02) !important; }
body.dark .gantt .row-line           { stroke: var(--border) !important; stroke-opacity: 1 !important; }
body.dark .gantt .tick               { stroke: var(--border) !important; stroke-opacity: 0.6 !important; }
body.dark .gantt .tick.thick         { stroke: var(--border-strong) !important; stroke-opacity: 1 !important; }
body.dark .gantt .today-highlight    { fill: rgba(124,70,241,0.1) !important; }
body.dark .gantt text                { fill: var(--text-secondary) !important; }
body.dark .gantt .bar-label          { fill: rgba(255,255,255,0.9) !important; }
body.dark .gantt .bar-label.big      { fill: var(--text-secondary) !important; }
body.dark .tl-gantt-wrap             { border-color: var(--border) !important; background: var(--surface) !important; }

/* Fix white background on Frappe Gantt internal elements in dark mode */
body.dark .gantt-container .gantt    { background: var(--surface) !important; }
body.dark .gantt-container rect[fill="#fff"],
body.dark .gantt-container rect[fill="white"],
body.dark .gantt-container rect[fill="#f5f5f5"] { fill: var(--surface) !important; }
body.dark .gantt-container .lower-text { color: var(--text-secondary) !important; }
body.dark .gantt-container .upper-text { color: var(--text-tertiary) !important; }
body.dark .gantt-container .popup-wrapper {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── Frappe Gantt: override CSS variables in dark mode ── */
body.dark .gantt-container {
  --g-header-background: #18161F;
  --g-row-color: #18161F;
  --g-row-border-color: #2D2A3A;
  --g-tick-color: rgba(255,255,255,0.06);
  --g-tick-color-thick: rgba(255,255,255,0.12);
  --g-text-dark: #EEEAF8;
  --g-text-muted: #9993AE;
  --g-text-light: #EEEAF8;
  --g-border-color: #2D2A3A;
  --g-bar-color: #211E2A;
  --g-bar-border: #3D3850;
  --g-progress-color: transparent;           /* hides the white pill */
  --g-actions-background: #211E2A;
  --g-arrow-color: #9993AE;
  --g-weekend-highlight-color: rgba(255,255,255,0.02);
  --g-today-highlight: rgba(124,70,241,0.2);
  --g-weekend-label-color: #2D2A3A;
  --g-expected-progress: rgba(124,70,241,0.2);
  --g-handle-color: #9993AE;
}

/* Hide date-range-highlight pill permanently (both modes) */
.gantt-container .date-range-highlight { display: none !important; }

/* current-upper sticky label white bg fix */
body.dark .gantt-container .current-upper { background: #18161F !important; }
.gantt-container .side-header { z-index: 2000 !important; pointer-events: all !important; }
body.dark .gantt-container .side-header,
body.dark .gantt-container .side-header * { background-color: #211E2A !important; color: #EEEAF8 !important; border-color: #2D2A3A !important; }

/* ── Timeline popup tooltip ── */
.gantt-container .popup-wrapper { padding: 0 !important; border-radius: var(--radius-l) !important; min-width: 240px !important; max-width: 300px !important; overflow: hidden !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; background: var(--surface) !important; }
body.dark .gantt-container .popup-wrapper { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }

.tl-tt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px solid var(--border); }
.tl-tt-cust { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tl-tt-arr  { font-size: 12px; font-weight: 700; color: var(--primary); font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap; }

.tl-tt-badges { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 6px; }

.tl-tt-module { font-size: 11px; color: var(--text-tertiary); padding: 0 14px 8px; }

.tl-tt-phases { padding: 6px 14px 6px; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tl-tt-ph { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.tl-tt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tl-tt-ph > span:nth-child(2) { color: var(--text-secondary); flex: 1; }
.tl-tt-dt { color: var(--text-primary); font-weight: 600; margin-left: auto; white-space: nowrap; }

.tl-tt-owners { display: flex; gap: 12px; padding: 8px 14px; flex-wrap: wrap; }
.tl-tt-own { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }

.tl-tt-hint { padding: 6px 14px 10px; font-size: 10.5px; color: var(--text-tertiary); font-style: italic; text-align: center; }

/* ── Timeline legend interactive buttons ── */
.tl-legend-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin-right: 4px; }
.tl-legend-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tl-legend-btn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); }
.tl-legend-btn--active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
.tl-legend-btn--muted { opacity: 0.38; }
.tl-legend-clear {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--red); cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--red);
  background: rgba(220,38,38,.06); transition: background var(--t-fast);
  margin-left: 4px;
}
.tl-legend-clear:hover { background: rgba(220,38,38,.12); }

/* ── Column freeze ── */
.col-frozen                              { background: var(--surface)   !important; }
.data-table thead th.col-frozen          { background: var(--surface-2) !important; }

/* freeze-rail-active: tinted panel — visually distinct from scrolling area */
.data-table.freeze-rail-active th.col-frozen,
.data-table.freeze-rail-active .row-sel-th {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)) !important;
}
.data-table.freeze-rail-active td.col-frozen,
.data-table.freeze-rail-active .row-sel-cell {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
}

/* Last pinned column — one subtle neutral hairline (no glow, no purple, no doubled line) */
.col-frozen-last,
.data-table.freeze-rail-active tbody td.col-frozen-last,
.data-table.freeze-rail-active thead th.col-frozen-last {
  box-shadow: 1px 0 0 0 var(--border) !important;
}
.data-table.freeze-rail-active thead th.col-frozen-last {
  z-index: 54 !important;
  isolation: isolate;
}
/* drop the old secondary header hairline that doubled the separator */
.data-table.freeze-rail-active thead th.col-frozen-last::after { content: none; }

/* Per-cell top sheen — col-frozen-last overrides this via !important on last col */
.data-table.freeze-rail-active td.col-frozen {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
body.dark .data-table.freeze-rail-active td.col-frozen {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* GPU compositing hint — body frozen cells only.
   DO NOT apply transform to thead cells (.row-sel-th, thead .col-frozen):
   transform on a <th> inside position:sticky <thead> breaks vertical stickiness
   by creating a stacking context that decouples the cell from the parent's sticky offset. */
.data-table tbody .col-frozen,
.row-sel-cell {
  transform: translateZ(0);
}

/* Selector column z-index */
.row-sel-th   { background: var(--surface-2) !important; z-index: 20 !important; }
.row-sel-cell { background: var(--surface)   !important; z-index: 10 !important; }

/* Hover/selected — uses --frozen-hover-bg (light: --primary-soft, dark: color-mix) */
.table-row:hover .row-sel-cell        { background: var(--frozen-hover-bg) !important; }
.table-row.row-selected .row-sel-cell { background: var(--frozen-hover-bg) !important; }
.data-table.freeze-rail-active .table-row:hover td.col-frozen,
.data-table.freeze-rail-active .table-row:hover .row-sel-cell {
  background: var(--frozen-hover-bg) !important;
}
.data-table.freeze-rail-active .table-row.row-selected td.col-frozen,
.data-table.freeze-rail-active .table-row.row-selected .row-sel-cell,
.data-table.freeze-rail-active .table-row.row-selected:hover td.col-frozen,
.data-table.freeze-rail-active .table-row.row-selected:hover .row-sel-cell {
  background: var(--frozen-hover-bg) !important;
}

/* ── Dark mode frozen overrides ── */
body.dark .col-frozen                     { background: var(--surface)   !important; }
body.dark .data-table thead th.col-frozen { background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)) !important; }
body.dark .col-frozen-last { box-shadow: 1px 0 0 0 var(--border) !important; }
/* frozen header: deepest primary tint — caps the panel visually */
body.dark .row-sel-th,
body.dark .data-table.freeze-rail-active th.col-frozen,
body.dark .data-table.freeze-rail-active .row-sel-th {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)) !important;
}
/* frozen body: clearly purple-tinted vs neutral #18161F scroll cells */
body.dark .row-sel-cell,
body.dark .data-table.freeze-rail-active td.col-frozen,
body.dark .data-table.freeze-rail-active .row-sel-cell {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
}
/* hover/selected — dark uses opaque color-mix via --frozen-hover-bg (avoids semi-transparent bleed) */
body.dark .data-table.freeze-rail-active .table-row:hover td.col-frozen,
body.dark .data-table.freeze-rail-active .table-row:hover .row-sel-cell,
body.dark .data-table.freeze-rail-active .table-row.row-selected td.col-frozen,
body.dark .data-table.freeze-rail-active .table-row.row-selected .row-sel-cell,
body.dark .data-table.freeze-rail-active .table-row.row-selected:hover td.col-frozen,
body.dark .data-table.freeze-rail-active .table-row.row-selected:hover .row-sel-cell {
  background: var(--frozen-hover-bg) !important;
}

/* Freeze dropdown removed — pin glyphs in column headers now handle freezing */

/* ── CSV Export ── */
.export-sel-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; background: var(--primary); color: #fff;
  border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
  padding: 0 5px; margin-left: 4px;
}
.export-btn--active { background: var(--primary-soft) !important; border-color: var(--primary) !important; color: var(--primary) !important; }

/* ── Row selector column — slim rail UX ─────────────────────────────────── */
.row-sel-th {
  width: 32px !important; min-width: 32px !important; max-width: 32px !important;
  padding: 0 !important; text-align: center !important; vertical-align: middle !important;
  /* Divider hidden at rest — only appears when table has active selection */
  box-shadow: none !important;
  transition: box-shadow var(--t-fast) var(--ease);
}
.row-sel-cell {
  width: 32px !important; min-width: 32px !important; max-width: 32px !important;
  padding: 0 !important; text-align: center !important; vertical-align: middle !important;
  box-shadow: none !important;
  transition: box-shadow var(--t-fast) var(--ease), background var(--t-xfast) var(--ease);
}

/* Divider appears only when any row is selected — consistent low-opacity on both header and body */
.data-table.has-selection .row-sel-th  { box-shadow: 2px 0 0 0 rgba(124,70,241,0.22) !important; }
.data-table.has-selection .row-sel-cell { box-shadow: 2px 0 0 0 rgba(124,70,241,0.12) !important; }

.row-checkbox {
  width: 14px; height: 14px; cursor: pointer; display: block; margin: auto;
  accent-color: var(--primary);
  opacity: 0.22; /* dim at rest — visible enough to discover, quiet enough not to clutter */
  transition: opacity var(--t-xfast) var(--ease), transform var(--t-xfast) cubic-bezier(0.34,1.56,0.64,1);
}
/* Select-all header checkbox — slightly more visible */
.row-sel-th .row-checkbox { opacity: 0.3; }

/* Hover — snap to full opacity + micro scale-up */
.table-row:hover .row-checkbox,
.row-sel-th:hover .row-checkbox { opacity: 1 !important; transform: scale(1.1); }

/* Checked — always full opacity + pop */
.row-checkbox:checked { opacity: 1 !important; transform: scale(1.08); }

/* PER table checkboxes — mirrors HCR .row-checkbox pattern */
.per-row-checkbox {
  width: 14px; height: 14px; display: block; margin: auto;
  accent-color: var(--primary);
  opacity: 0;
  transition: opacity var(--t-xfast) var(--ease), transform var(--t-xfast) cubic-bezier(0.34,1.56,0.64,1);
}
.per-row-sel-th .per-row-checkbox { opacity: 0.3; }
.per-table-row:hover .per-row-checkbox,
.per-row-sel-th:hover .per-row-checkbox { opacity: 1 !important; transform: scale(1.1); }
.per-row-checkbox:checked { opacity: 1 !important; transform: scale(1.08); }

/* Selected row — violet left accent border + tint */
.table-row.row-selected td {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important;
}
.table-row.row-selected:hover td {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
}
/* Left accent rail on selected row's first visible cell */
.table-row.row-selected .row-sel-cell {
  box-shadow: inset 3px 0 0 var(--primary) !important;
}

/* Dark mode overrides */
body.dark .table-row.row-selected td {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
}
body.dark .table-row.row-selected:hover td {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important;
}

/* ── Toolbar overflow ⋯ menu ─────────────────────────────────────────────── */
.toolbar-overflow { position: relative; }
.toolbar-overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(124,70,241,0.06);
  z-index: 190; /* below modal overlays (200) — a menu must never paint over an open dialog scrim */
  padding: 4px 0;
  animation: tov-in 180ms var(--ease) both;
  transform-origin: top right;
}
body.dark .toolbar-overflow-menu {
  box-shadow: 0 4px 6px rgba(0,0,0,0.14), 0 12px 32px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(124,70,241,0.15);
}
/* Exit = tov-in reversed; app.js _closeMenuAnimated hides after 150ms.
   Rollback: delete (with _closeMenuAnimated). */
.toolbar-overflow-menu.toolbar-overflow-menu--closing { animation: tov-in 130ms var(--ease) reverse forwards; pointer-events: none; }
.tov-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 14px;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
  transition: background 100ms var(--ease), color 100ms var(--ease);
}
.tov-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-tertiary); transition: color 100ms; }
.tov-item:hover { background: var(--primary-soft); color: var(--primary); }
.tov-item:hover svg { color: var(--primary); }
.tov-item--active { color: var(--primary); font-weight: 600; }
.tov-sep { height: 1px; background: var(--border); margin: 4px 0; }
@keyframes tov-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hide proxy buttons (still in DOM for JS compat) */
#exportCsvBtn,
#clipboardExportBtn { display: none !important; }

/* ── Contextual selection toolbar ───────────────────────────────────────── */

/* Default elements — visible at rest, hidden when rows selected */
.ctx-default {
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), width var(--t) var(--ease);
  opacity: 1;
  transform: translateX(0) scale(1);
  overflow: hidden;
  max-width: 200px; /* large enough; transitions from 0 */
}
.requests-toolbar-mode-rail {
  display: grid;
  align-items: center;
  justify-items: end;
  flex-shrink: 0;
}
.requests-toolbar-mode-group {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  transform-origin: right center;
}
.requests-toolbar-mode-group--active {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}
.requests-toolbar-mode-group--inactive {
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  visibility: hidden;
  pointer-events: none;
}
.filter-right--selecting .ctx-default {
  opacity: 0;
  transform: translateX(8px) scale(0.95);
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
  border: none !important;
}
/* When both filters active AND rows selected: fully remove from flex layout so gap: 8px doesn't create phantom spacing */
.filter-right--selecting.filter-right--filtered .ctx-default {
  display: none !important;
}

/* Contextual elements — hidden at rest, spring in when rows selected */
.ctx-sel {
  display: none !important; /* !important beats any class-level display override */
  opacity: 0;
  transform: translateY(-3px) scale(0.96);
  pointer-events: none;
}
.filter-right--selecting .ctx-sel {
  display: inline-flex !important; /* override ctx-sel's !important */
  align-items: center;
  opacity: 1;
  transform: translateY(0) scale(1);
  margin: 0 !important;
  pointer-events: all;
  animation: ctx-filter-slide 0.58s var(--ease) both;
}

/* Stagger delays */
.filter-right--selecting #ctxCopyBtn     { animation-delay: 0ms; }
.filter-right--selecting #ctxExportBtn   { animation-delay: 40ms; }
.filter-right--selecting #bulkSelectPill { animation-delay: 80ms; }
.filter-right--selecting #ctxDeselBtn    { animation-delay: 80ms; }

/* PER ctx-sel stagger — mirrors HCR timing */
.filter-right--selecting #perCtxCopyBtn     { animation-delay: 0ms; }
.filter-right--selecting #perCtxExportBtn   { animation-delay: 40ms; }
.filter-right--selecting #perBulkSelectPill { animation-delay: 80ms; }
.filter-right--selecting #perCtxDeselectBtn { animation-delay: 80ms; }

/* ── Contextual filter toolbar (shown when active filters exist) ─────────── */
.ctx-filter {
  display: none !important;
  opacity: 0;
  transform: translateY(-3px) scale(0.96);
  pointer-events: none;
}
.filter-right--filtered .ctx-filter {
  display: inline-flex !important;
  align-items: center;
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
  animation: ctx-filter-slide 0.58s var(--ease) both;
}
/* Stagger: Density slides in first, Saved Filters follows */
.filter-right--filtered #densityBtn    { animation-delay: 0ms; }
.filter-right--filtered .sf-wrap       { animation-delay: 60ms; }
/* PER ctx-filter stagger — #perSfWrap gets 60ms from .sf-wrap rule above */
.filter-right--filtered #perDensityBtn { animation-delay: 0ms; }

/* Slide in from the right — visually originates from the ⋯ menu */
@keyframes ctx-filter-slide {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Selection count chip (inside rowCountBadge) */
.row-count-badge--selecting {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}

/* Contextual copy / export buttons */
#ctxCopyBtn, #ctxExportBtn {
  white-space: nowrap;
  gap: 6px;
}

/* Deselect × button */
.ctx-desel-btn {
  color: var(--text-tertiary) !important;
  padding: 4px 6px !important;
}
.ctx-desel-btn:hover { color: var(--red) !important; }

/* Bulk Edit dropdown in contextual bar */
.ctx-bulk-trigger {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ctx-bulk-caret {
  transition: transform var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.ctx-bulk-trigger.open .ctx-bulk-caret { transform: rotate(180deg); }

.ctx-bulk-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.12);
  z-index: 190; /* below modal overlays (200) — a menu must never paint over an open dialog scrim */
  padding: 4px 0;
  animation: tov-in 180ms var(--ease) both;
}

/* Export column list */
.export-col-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; padding: 4px 0; }
.export-col-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: var(--radius-m);
  border: 1px solid var(--border); background: var(--surface-2);
  cursor: default; transition: border-color var(--t-fast), background var(--t-fast);
  user-select: none;
}
.export-col-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.export-col-item.export-col-dragging { opacity: 0.5; border-style: dashed; }
.export-col-item.export-col-over { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(124,70,241,.2); }

.export-col-drag { font-size: 14px; color: var(--text-tertiary); cursor: grab; line-height: 1; }
.export-col-drag:active { cursor: grabbing; }

.export-col-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; }
.export-col-label input { margin: 0; }

.cu-cell .cu-status-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ClickUp column cell — hard-contain content, no overflow ── */
.col-clickup-cell {
  max-width: 180px;
  width: 180px;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.cu-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  width: 100%;
  max-width: 176px;
  min-width: 0;
  overflow: visible;
  position: relative;
}
.cu-cell .cu-status-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.cu-hover-card {
  position: absolute;
  top: -8px;
  left: 0;
  width: min(320px, calc(100vw - 64px));
  padding: 12px 13px;
  border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--surface) 97%, white 3%);
  box-shadow: 0 16px 28px rgba(28, 22, 56, 0.16), 0 2px 0 rgba(124,70,241,0.08);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity var(--t-xfast) var(--ease), transform var(--t-xfast) var(--ease);
  z-index: 35;
}
.col-clickup-cell:hover,
.col-clickup-cell:focus-within {
  z-index: 40;
}
/* Detail modal: ticket title + stage pill inline in the OS Link block (no hover gesture) */
.os-inline-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }
.os-inline-meta .os-hover-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.45; overflow-wrap: anywhere; }
/* OS link cells reuse the exact ClickUp hover-card primitives — only the scoping differs */
.col-os-cell { position: relative; overflow: visible; z-index: 1; }
.os-link-wrap { display: inline-block; }
.col-os-cell:hover,
.col-os-cell:focus-within {
  z-index: 40;
}
.col-os-cell:hover .cu-hover-card,
.col-os-cell:focus-within .cu-hover-card,
.col-clickup-cell:hover .cu-hover-card,
.col-clickup-cell:focus-within .cu-hover-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Interactive while visible — a click on the raised card must open the
     task, not fall through onto whatever row sits underneath it. */
  pointer-events: auto;
  cursor: pointer;
}
.cu-hover-card-title {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.cu-hover-card-title span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cu-hover-card-title svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cu-hover-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.cu-hover-card-meta .cu-status-badge {
  max-width: 100%;
}
.cu-hover-status-empty {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
body.dark .cu-hover-card {
  background: color-mix(in srgb, var(--surface) 94%, #000 6%);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(124,70,241,0.16);
}

/* =============================================
   Kekabot — Ask Kekabot AI Assistant
   ============================================= */

/* ── Animations ─────────────────────────────── */
@keyframes kbFadeUp {
  0%  { opacity: 0; transform: translateY(16px) scale(0.96); }
  30% { opacity: 1; }
  100%{ opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes kbPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Nav item highlight ──────────────────────── */
.kb-nav-item .nav-item-icon svg {
  transition: filter 0.2s var(--ease);
}
.kb-nav-item.active .nav-item-icon svg,
.kb-nav-item:hover .nav-item-icon svg {
  filter: drop-shadow(0 0 4px rgba(124,70,241,0.5));
}

/* AI aurora shimmer on Ask Kekabot label + icon */
@keyframes kb-aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes kb-icon-aurora {
  0%   { color: #7c46f1; filter: drop-shadow(0 0 3px rgba(124,70,241,.5)); }
  25%  { color: #60a5fa; filter: drop-shadow(0 0 4px rgba(96,165,250,.5)); }
  50%  { color: #34d399; filter: drop-shadow(0 0 4px rgba(52,211,153,.5)); }
  75%  { color: #a78bfa; filter: drop-shadow(0 0 4px rgba(167,139,250,.5)); }
  100% { color: #7c46f1; filter: drop-shadow(0 0 3px rgba(124,70,241,.5)); }
}
.kb-label-ai {
  background: linear-gradient(
    120deg,
    #7c46f1 0%,
    #a78bfa 20%,
    #60a5fa 40%,
    #34d399 60%,
    #a78bfa 80%,
    #7c46f1 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kb-aurora 4s ease infinite;
}
.kb-icon-ai {
  animation: kb-icon-aurora 4s ease infinite;
}
.kb-nav-item.active .kb-label-ai,
.kb-nav-item:hover .kb-label-ai {
  animation-duration: 2s;
}
.kb-nav-item.active .kb-icon-ai,
.kb-nav-item:hover .kb-icon-ai {
  animation-duration: 2s;
}

/* collapsed: dot badge on icon replaces text pill */
.kb-nav-item .nav-item-icon.kb-icon-ai { position: relative; }
.kb-nav-item .nav-item-icon.kb-icon-ai::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7c46f1;
  border: 1.5px solid var(--surface, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.nav-rail.collapsed .kb-nav-item .nav-item-icon.kb-icon-ai::after {
  opacity: 1;
  animation: kb-dot-pulse 2s ease infinite;
}
@keyframes kb-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,70,241,.5); }
  50%       { box-shadow: 0 0 0 4px rgba(124,70,241,0); }
}

.kb-beta-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, rgba(124,70,241,.15), rgba(96,165,250,.15));
  border: 1px solid rgba(124,70,241,.25);
  color: #7c46f1;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1.5;
  align-self: center;
}

/* ── Page container ─────────────────────────── */
#view-kekabot {
  overflow-y: auto;
}
.kb-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top right, rgba(124,70,241,.07), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.4), transparent 22%),
    var(--bg);
}
body.dark .kb-page {
  background:
    radial-gradient(circle at top right, rgba(124,70,241,.10), transparent 35%),
    var(--bg);
}

/* ── Glass Hero Card ─────────────────────────── */
.kb-hero-card {
  margin: 24px 24px 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: var(--radius-xl);
  padding: 28px 28px 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 8px 40px rgba(124,70,241,0.08),
    0 2px 8px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}
/* Faint purple shimmer in corner */
.kb-hero-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(124,70,241,0.07), transparent 70%);
  pointer-events: none;
}
body.dark .kb-hero-card {
  background: rgba(22,18,38,0.75);
  border-color: rgba(124,70,241,0.2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.05) inset;
}
body.dark .kb-hero-card::before {
  background: radial-gradient(circle, rgba(124,70,241,0.12), transparent 70%);
}

/* Lottie idle — absolute top-right decoration */
.kb-lottie-idle {
  position: absolute;
  top: 12px; right: 16px;
  width: 130px; height: 100px;
  pointer-events: none;
  opacity: 0.85;
}

.kb-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* Eyebrow label */
.kb-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.75;
}

/* Gradient title */
.kb-hero-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.7px;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(130deg, var(--text-primary) 20%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.dark .kb-hero-title {
  background: linear-gradient(130deg, #f0ecff 10%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kb-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: -6px 0 0;
  max-width: 420px;
}

/* ── Query bar — rotating colorful Border Beam, nothing else ──────────────────────────
   Beam = conic gradient on the BORDER-BOX layer; a solid surface layer clipped to the
   PADDING-BOX hides the interior, so colour shows only in the 2px transparent border.
   background-clip method = bulletproof cross-browser (the old mask-composite ring was
   rendering as a full fill in Safari/older WebKit). Spin via @property --bb-angle.
   No pulse, no glow halo. Loading just spins faster (rule below). ── */
.kb-query-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-l);
  padding: 12px 14px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--bb-angle),
      #7C46F1, #BF5AF2, #0A84FF, #32ADE6, #5E5CE6, #7C46F1) border-box;
  animation: bb-rotate 4s linear infinite;
}
.kb-query-bar:focus-within {
  /* Keyboard focus cue — .kb-input has outline:none. Rollback: delete this rule. */
  box-shadow: 0 0 0 3px var(--primary-a15);
}
.kb-query-bar.kb-loading {
  animation-duration: 1.2s;   /* loading cue: faster beam (replaced old kb-glow-loading) */
}
.kb-query-bar--panel {
  border-radius: var(--radius-m);
  padding: 8px 12px;
}
.kb-search-icon {
  color: var(--primary);
  flex-shrink: 0;
  opacity: 0.6;
}
.kb-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
}
.kb-input::placeholder { color: var(--text-tertiary); }

/* Gradient shimmer Ask button */
.kb-ask-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #7C46F1 0%, #9B6BF2 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-m);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(124,70,241,0.35);
  transition:
    transform var(--t) var(--ease-spring),
    box-shadow var(--t) var(--ease),
    opacity var(--t-fast);
}
/* Shimmer sweep */
.kb-ask-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease);
}
.kb-ask-btn:hover::before { transform: translateX(100%); }
.kb-ask-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124,70,241,0.45);
}
.kb-ask-btn:active { transform: scale(0.96); box-shadow: none; }
.kb-ask-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.kb-ask-btn--sm { padding: 6px 12px; font-size: 12px; gap: 4px; }

/* ── Suggested queries ───────────────────────── */
.kb-suggested {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.kb-suggested-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-right: 2px;
  flex-shrink: 0;
}
.kb-suggested-chip {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    transform 0.2s var(--ease-spring),
    box-shadow var(--t-fast);
}
.kb-suggested-chip:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(124,70,241,0.3);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124,70,241,0.18);
}

/* Meta row — status badge + reindex */
.kb-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kb-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}
.kb-status-badge--empty {
  color: var(--text-tertiary);
  background: var(--surface-2);
}
.kb-reindex-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 3px 9px;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.kb-reindex-btn:hover {
  color: var(--primary);
  border-color: rgba(124,70,241,0.3);
  background: var(--primary-soft);
}
.kb-reindex-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── States ──────────────────────────────────── */
.kb-states {
  padding: 20px 28px 0;
}
.kb-hidden { display: none !important; }

.kb-idle-hint {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 40px 0 20px;
}

/* Loading */
.kb-lottie-thinking {
  width: 120px;
  height: 90px;
  margin: 0 auto;
}
.kb-loading-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  animation: kbPulse 1.8s ease-in-out infinite;
}

/* ── Answer card ─────────────────────────────── */
.kb-card {
  position: relative;
  background: color-mix(in srgb, var(--surface) 92%, white 8%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kb-card--animate {
  animation: kbFadeUp 0.35s var(--ease) both;
}

/* Left accent strip */
.kb-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.kb-strip--high::before    { background: var(--primary); }
.kb-strip--partial::before { background: var(--amber); }
.kb-strip--low::before     { background: var(--border); }

/* Glass sheen */
.kb-card::after {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 38%;
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 10px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
body.dark .kb-card::after { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%); }

.kb-card--notfound::before { background: var(--border); }

.kb-card-inner {
  padding: 18px 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kb-card--compact .kb-card-inner {
  padding: 14px 16px 14px 18px;
  gap: 10px;
}

/* Confidence row */
.kb-conf-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.kb-conf-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kb-conf--high    .kb-conf-dot, .kb-conf-dot.kb-conf--high    { background: var(--primary); box-shadow: 0 0 0 3px rgba(124,70,241,0.18); }
.kb-conf--partial .kb-conf-dot, .kb-conf-dot.kb-conf--partial { background: var(--amber);   box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.kb-conf--low     .kb-conf-dot, .kb-conf-dot.kb-conf--low     { background: var(--text-tertiary); }
.kb-conf-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

/* Field grid */
.kb-field-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  align-items: start;
}
.kb-field-grid-compact {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 10px;
}
.kb-fl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 1px;
}
.kb-fv {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Note */
.kb-note {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: var(--radius-m);
  padding: 8px 12px;
  line-height: 1.5;
}

/* Source link */
.kb-source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid rgba(124,70,241,0.2);
  background: var(--primary-soft);
  border-radius: var(--radius-m);
  padding: 5px 10px;
  transition: background var(--t-fast), border-color var(--t-fast);
  align-self: flex-start;
}
.kb-source-link:hover {
  background: rgba(124,70,241,0.15);
  border-color: rgba(124,70,241,0.35);
}

/* Actions row */
.kb-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kb-refine-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 5px 12px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  font-family: inherit;
}
.kb-refine-btn:hover { color: var(--primary); border-color: rgba(124,70,241,0.3); }
.kb-flag-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(124,70,241,0.2);
  border-radius: var(--radius-m);
  padding: 5px 12px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  font-family: inherit;
}
.kb-flag-btn:hover { background: rgba(124,70,241,0.15); border-color: rgba(124,70,241,0.35); }

/* Lottie in success position */
.kb-lottie-success {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 50px;
  height: 50px;
  pointer-events: none;
  z-index: 1;
}

/* Not found card — pure not-found (lottie + text side by side) */
.kb-card--notfound .kb-card-inner {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.kb-lottie-nf {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.kb-nf-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kb-nf-text strong {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
}
.kb-nf-text span {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Not found but tracker match exists — column layout */
.kb-card--has-tracker::before { background: var(--border); }
.kb-card--has-tracker .kb-card-inner {
  flex-direction: column;
  gap: 12px;
}
.kb-nf-notice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  align-self: flex-start;
}
.kb-nf-notice svg { flex-shrink: 0; }

/* Groq unavailable card */
.kb-card--groq-unavailable::before { background: var(--amber); }
.kb-card--groq-unavailable .kb-card-inner { flex-direction: column; gap: 10px; }
.kb-groq-unavail-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
}
.kb-groq-unavail-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.kb-groq-unavail-sub a { color: var(--primary); text-decoration: none; }
.kb-groq-unavail-sub a:hover { text-decoration: underline; }
.kb-groq-unavail-fallback {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Row highlight flash when navigating from Kekabot */
@keyframes kbRowFlash {
  0%   { background: rgba(124,70,241,0.18); }
  60%  { background: rgba(124,70,241,0.12); }
  100% { background: transparent; }
}
.kb-row-flash {
  animation: kbRowFlash 2s ease-out forwards;
}

/* ── Session history ─────────────────────────── */
.kb-history {
  padding: 20px 28px 28px;
}
.kb-history-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.kb-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-l);
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform 0.2s var(--ease-spring);
  font-family: inherit;
}
.kb-chip:hover {
  border-color: rgba(124,70,241,0.3);
  background: var(--primary-soft);
  transform: translateY(-1px);
}
.kb-chip-q { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.kb-chip-badge { font-size: 10px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.04em; }
.kb-chip--high   .kb-chip-badge { color: var(--primary); }
.kb-chip--partial .kb-chip-badge { color: var(--amber); }
.kb-chip--miss   .kb-chip-badge { color: var(--text-tertiary); }

/* ── Slide-over panel ────────────────────────── */
.kb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  z-index: 1080; /* above gantt sticky header (1000 !important) — was tied/covered on Timeline */
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.kb-backdrop--open {
  display: block;
  opacity: 1;
}
.kb-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — same iOS Safari fix as body */
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 48px rgba(0,0,0,0.16), -1px 0 0 rgba(124,70,241,0.06);
  z-index: 1090; /* pairs with .kb-backdrop 1080; above gantt header 1000 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%); /* resting off-screen */
}
/* Opening — same spring as filter panel */
.kb-panel--open {
  will-change: transform, opacity;
  animation: panel-slide-in 320ms var(--ease) both;
  transform: translateX(0);
}
/* Closing — ease-in for snappy dismiss */
.kb-panel--closing {
  will-change: transform, opacity;
  animation: panel-slide-out 240ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}

/* Panel header — glass strip */
.kb-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
body.dark .kb-panel-header { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; } /* 80% white hairline was harsh on dark */
.kb-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.kb-panel-title svg { color: var(--primary); }
.kb-panel-kbd {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  letter-spacing: 0.02em;
}

/* Panel body — scrollable */
.kb-panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Panel input bar — compact variant */
.kb-panel-body .kb-query-bar {
  border-radius: var(--radius-m);
  padding: 9px 12px;
  border-width: 1.5px;
  border-color: transparent;            /* keep border as the beam window */
  /* re-declare the beam bg here so this higher-specificity rule doesn't flatten it to solid */
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--bb-angle),
      #7C46F1, #BF5AF2, #0A84FF, #32ADE6, #5E5CE6, #7C46F1) border-box;
}
.kb-panel-body .kb-input { font-size: 13px; }
.kb-panel-body .kb-ask-btn { padding: 7px 14px; font-size: 12px; gap: 4px; }

.kb-panel-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 24px 0 16px;
  line-height: 1.5;
}
.kb-panel-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Compact answer card in panel */
.kb-answer--compact .kb-answer-body {
  padding: 14px 16px 12px;
  gap: 10px;
}
.kb-answer--compact .kb-answer-conf-pill {
  font-size: 10px;
  padding: 3px 9px;
}
.kb-answer--compact .kb-pf-item {
  padding: 9px 11px;
}
.kb-answer--compact .kb-pf-val {
  font-size: 13px;
}
.kb-answer--compact .kb-source-footer-link {
  padding: 8px 10px;
}
.kb-answer--compact .kb-source-footer-name {
  font-size: 11px;
}
.kb-answer--compact .kb-cf-section {
  gap: 7px;
}
.kb-answer--compact .kb-cf-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px 10px;
}
.kb-answer--compact .kb-per-answer-summary {
  font-size: 13px;
  line-height: 1.55;
}
.kb-panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
}
.kb-panel-thinking-lottie {
  width: 80px;
  height: 60px;
}
.kb-panel-loading span {
  font-size: 12px;
  color: var(--text-secondary);
  animation: kbPulse 1.8s ease-in-out infinite;
}
.kb-panel-error {
  font-size: 12px;
  color: var(--red);
  background: var(--red-soft);
  border-radius: var(--radius-m);
  padding: 10px 12px;
}

/* ── Custom fields section ───────────────────── */
.kb-cf-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.kb-cf-section--compact { gap: 8px; }

.kb-cf-header {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* 2-column grid — minmax(0,1fr) forces hard 50% bounds regardless of badge/nowrap content */
.kb-cf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 16px;
}
.kb-cf-section--compact .kb-cf-grid {
  gap: 8px 12px;
}

.kb-cf-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* allow grid item to shrink below content min-width */
}

.kb-cf-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kb-cf-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: flex-start;
}
.kb-cf-badge--neutral {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
}
/* Colored badge — dark text in light mode, brighter in dark mode */
.kb-cf-badge--colored {
  color: color-mix(in srgb, var(--kb-pill-color, var(--text-secondary)) 55%, #0d0d1a 45%);
}
body.dark .kb-cf-badge--colored {
  color: color-mix(in srgb, var(--kb-pill-color, var(--text-secondary)) 75%, #ffffff 25%);
}

/* ── CX Tracker match banner ────────────────── */
.kb-tracker-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface) 40%);
  border: 1px solid rgba(124,70,241,0.22);
  border-radius: var(--radius-l);
  animation: kbFadeUp 0.3s var(--ease) both;
}

/* "Also tracked" variant — neutral, muted, part of the card flow */
.kb-tracker-section--also {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding-top: 12px;
  margin-top: 2px;
}

.kb-tracker-section-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}
/* Muted header for "also" mode */
.kb-tracker-section-header--also {
  color: var(--text-tertiary);
}
/* Card inside "also" section inherits neutral bg */
.kb-tracker-section--also .kb-tm-card,
.kb-tm-card--also {
  background: var(--surface);
  border-color: var(--border);
}
.kb-tm-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 10px 12px;
}
.kb-tm-card + .kb-tm-card { margin-top: 6px; }
.kb-tm-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.kb-tm-customers {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.3;
}
.kb-tm-badges {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.kb-tm-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.kb-tm-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.kb-tm-module {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.kb-tm-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  flex-wrap: wrap;
}
.kb-tm-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.kb-tm-detail-btn,
.kb-tm-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
  font-family: inherit;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.kb-tm-detail-btn:hover,
.kb-tm-view-btn:hover { transform: translateY(-1px); }
.kb-tm-detail-btn {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
}
.kb-tm-detail-btn:hover { color: var(--primary); border-color: rgba(124,70,241,0.3); }
.kb-tm-view-btn {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease);
}
.kb-tm-view-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}
.kb-tm-view-btn:hover::before { transform: translateX(100%); }
.kb-tm-view-btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,70,241,0.42);
}
.kb-tm-view-btn:active { transform: scale(0.96); box-shadow: var(--shadow-primary); }
.kb-tm-view-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ── Description ────────────────────────────── */
.kb-desc-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.kb-desc-body {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 160px;
  overflow-y: auto;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  padding: 10px 12px;
  scrollbar-width: thin;
}
.kb-desc-body a { color: var(--primary); text-decoration: none; }
.kb-desc-body a:hover { text-decoration: underline; }
.kb-desc-body strong { color: var(--text-primary); font-weight: 700; }
.kb-desc-body em { font-style: italic; }

/* ── Comments ────────────────────────────────── */
.kb-comments-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.kb-comment {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-m);
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.kb-comment-header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.kb-comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.kb-comment-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}
.kb-comment-date {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-left: auto;
}
/* Bot/automation comment */
.kb-comment--bot {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--amber-soft) 30%);
  border-color: rgba(217,119,6,0.18);
}
.kb-comment-avatar--bot {
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 11px;
}
.kb-comment-bot-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid rgba(217,119,6,0.25);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}
.kb-comment-body {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.kb-comment-body a { color: var(--primary); text-decoration: none; }
.kb-comment-body a:hover { text-decoration: underline; }
.kb-comment-body strong { color: var(--text-primary); font-weight: 700; }
.kb-comment-body em { font-style: italic; }

/* Dark mode adjustments */
body.dark .kb-card {
  background: color-mix(in srgb, var(--surface) 94%, #000 6%);
}
body.dark .kb-ask-btn:hover {
  box-shadow: 0 8px 28px rgba(124,70,241,0.55);
}
body.dark .kb-lottie-idle { opacity: 0.7; }

/* ── Revamped Answer Card ────────────────────── */
@keyframes kbAnswerIn {
  0%  { opacity: 0; transform: translateY(22px); }
  28% { opacity: 1; }
  100%{ opacity: 1; transform: translateY(0); }
}

.kb-answer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  overflow: hidden;
}
.kb-answer.kb-card--animate {
  animation: kbAnswerIn 0.38s var(--ease) both;
}

/* Top accent gradient bar */
.kb-answer-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.kb-answer--high    .kb-answer-accent { background: linear-gradient(90deg, #7C46F1, #a78bfa); }
.kb-answer--partial .kb-answer-accent { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.kb-answer--low     .kb-answer-accent { background: var(--border); }

/* Subtle top-left glass sheen */
.kb-answer::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 36%;
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
body.dark .kb-answer::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
}

.kb-answer-body {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Header: conf pill */
.kb-answer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.kb-answer-conf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
}
.kb-answer-conf-pill--high {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(124,70,241,0.22);
}
.kb-answer-conf-pill--partial {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(217,119,6,0.22);
}
.kb-answer-conf-pill--low {
  background: var(--surface-2);
  color: var(--text-tertiary);
  border-color: var(--border);
}

.kb-per-answer-program {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.kb-per-answer-summary {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.kb-per-answer-note {
  margin-top: -2px;
}

/* Primary fields: Status + ETA large callouts */
.kb-primary-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.kb-pf-item {
  flex: 1;
  min-width: 130px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kb-pf-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.kb-pf-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

/* Source footer */
.kb-source-footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 2px;
}
.kb-source-footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.kb-source-footer-link:hover {
  background: var(--primary-soft);
  border-color: rgba(124,70,241,0.28);
  box-shadow: 0 2px 8px rgba(124,70,241,0.12);
}
.kb-source-footer-link svg {
  color: var(--primary);
  flex-shrink: 0;
  opacity: 0.7;
}
.kb-source-footer-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-source-footer-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.kb-source-footer-open {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.kb-source-footer-link:hover .kb-source-footer-open {
  opacity: 1;
  transform: translateX(0);
}

body.dark .kb-answer {
  background: color-mix(in srgb, var(--surface) 94%, #000 6%);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
body.dark .kb-pf-item {
  background: color-mix(in srgb, var(--surface) 90%, #000 10%);
}
body.dark .kb-source-footer-link {
  background: color-mix(in srgb, var(--surface) 90%, #000 10%);
}
body.dark .kb-source-footer-link:hover {
  background: rgba(124,70,241,0.12);
}

/* =============================================
   QoL #5 — Row Quick Actions Bar (icon-only)
   ============================================= */
@keyframes rabSlideIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.rab {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 3px;
  /* Was a 12px backdrop blur over the table — re-blurred on every row hover as the
     bar follows the pointer. Near-opaque surface reads the same without the
     per-move GPU pass. Rollback: 85% + backdrop-filter: blur(12px) saturate(1.4). */
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.8) inset;
  padding: 3px 5px;
  z-index: 90;
  animation: rabSlideIn var(--t-fast) var(--ease) both;
}
body.dark .rab {
  /* Keep elevation shadow in dark (was dropped, bar merged with table) — mirrors .bulk-strip dark rule */
  box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.rab-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}
.rab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-xfast), color var(--t-xfast), transform var(--t-fast) var(--ease-spring);
  flex-shrink: 0;
}
.rab-btn:hover {
  background: var(--surface-2);
  color: var(--primary);
  transform: scale(1.15);
}
.rab-btn--flag:hover { color: var(--amber); }
.rab-btn--flag-on { color: var(--red) !important; }
.rab-btn--flag-on:hover { background: var(--red-soft); color: var(--red) !important; }

/* =============================================
   QoL #7 — Inline Remarks Editor
   ============================================= */
.col-remarks-editable { cursor: pointer; }
.col-remarks-editable:hover span { color: var(--text-primary) !important; }
.ire-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  margin-left: 5px;
  opacity: 0;
  transition: opacity var(--t-fast);
  vertical-align: middle;
}
.col-remarks-editable:hover .ire-hint-icon { opacity: 1; }
.ire {
  position: absolute;
  width: 300px;
  background: var(--surface);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(124,70,241,0.1);
  z-index: 10000; /* above text-popover (9999) so hover popover never covers the editor */
  overflow: hidden;
  animation: kbFadeUp var(--t-fast) ease both;
}
.ire-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
}
.ire-label { font-size: 11px; font-weight: 700; color: var(--primary); }
.ire-hint { font-size: 10px; color: var(--text-tertiary); }
.ire-input-wrap { position: relative; }
.ire-ghost-prefix {
  position: absolute;
  top: 4px;            /* matches .ire-textarea padding-top */
  left: 12px;          /* matches .ire-textarea padding-left */
  font-size: 12.5px;   /* matches .ire-textarea */
  line-height: 1.5;    /* matches .ire-textarea */
  font-family: inherit;
  color: var(--text-tertiary);
  pointer-events: none;
  white-space: pre;
  user-select: none;
  transition: color var(--t-fast) var(--ease);
}
.ire-ghost-prefix.is-typing { color: var(--primary); } /* user started typing */
.ire-textarea {
  width: 100%;
  border: none;
  outline: none;
  padding: 4px 12px 8px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-primary);
  background: transparent;
  resize: none;
  line-height: 1.5;
  box-sizing: border-box;
}
.ire-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.ire-cancel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}
.ire-save { font-size: 11px; padding: 4px 10px; }

/* =============================================
   QoL #12 — Auto-save Indicator
   ============================================= */
.autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(22,163,74,0.18);
  background: rgba(22,163,74,0.08);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.01em;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.3s;
}
.autosave-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.autosave-indicator--saving {
  color: var(--amber);
  background: rgba(217,119,6,0.08);
  border-color: rgba(217,119,6,0.2);
}
.autosave-indicator--error {
  color: var(--red);
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.2);
}

/* =============================================
   QoL #10 — Row Count Badge
   ============================================= */
.row-count-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
/* Purple tint only when rows are selected */
.filter-right--selecting .row-count-badge {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: rgba(124,70,241,0.22);
  font-weight: 700;
}

/* =============================================
   QoL #6 — Table Density
   ============================================= */
/* Comfortable */
body.density-comfortable .data-table td,
body.density-comfortable .data-table th { padding: 14px 14px; }
/* Compact */
body.density-compact .data-table td,
body.density-compact .data-table th { padding: 5px 10px; font-size: 12px; }
body.density-compact .customer-chip   { padding: 1px 6px; font-size: 10.5px; }
body.density-compact .badge           { padding: 2px 7px; font-size: 10.5px; }

/* =============================================
   QoL #3 — Saved Filter Sets
   ============================================= */
.sf-wrap { position: relative; }
/* Panel lives in document.body — position/top/left set via JS */
.sf-panel {
  position: fixed;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  overflow: hidden;
  animation: ctx-filter-slide 0.22s var(--ease) both;
}

/* Header */
.sf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.sf-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* Saved filter list */
.sf-list  { max-height: 220px; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; }
.sf-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 12px 14px;
  font-style: italic;
}
.sf-item  {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 8px;
  margin: 1px 4px;
  border-radius: var(--radius-m);
  transition: background var(--t-xfast), border-color var(--t-xfast);
  border: 1px solid transparent;
}
.sf-item:hover { background: var(--surface-2); }
.sf-apply {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: none;
  padding: 7px 4px;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sf-apply:hover { color: var(--primary); }
.sf-apply-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sf-current-badge {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(124,70,241,.1);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}
.sf-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-s);
  font-family: inherit;
  opacity: 0;
  transition: opacity var(--t-xfast), color var(--t-xfast);
}
.sf-item:hover .sf-delete { opacity: 1; }
.sf-delete:hover { color: var(--red); background: var(--red-soft); opacity: 1; }
.sf-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.sf-footer-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
}
.sf-footer-row {
  display: flex;
  gap: 6px;
}
.sf-name-input {
  flex: 1;
  font-size: 12.5px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 6px 10px;
  background: var(--surface);
  color: var(--text-primary);
  outline: none;
  min-width: 0;
}
.sf-name-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
.sf-save-btn { font-size: 12px; padding: 6px 12px; white-space: nowrap; }

/* =============================================
   QoL #4 — Bulk Action Strip
   grid-template-rows transition = smooth open/close, no display:none snap
   ============================================= */
/* Strip hidden by default — only shows when Bulk Edit is ON and rows are selected */
/* Grid collapses height; opacity+transform fade the content in/out */
#bulkStripMount {
  display: grid;
  grid-template-rows: 0fr;
  /* No overflow:hidden here — strip has its own; shadow must escape to show */
  transition: grid-template-rows 0.42s var(--ease), padding 0.42s var(--ease);
  padding: 0 24px;
}
#bulkStripMount.bulk-open {
  grid-template-rows: 1fr;
  padding: 6px 24px 10px; /* room for shadow + breathing space below */
}

.bulk-strip {
  display: flex;
  min-height: 0;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 14px;
  /* Frosted glass pill — identical to .rab */
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.8) inset;
  opacity: 0;
  transform: translateY(-6px) scale(0.988);
  pointer-events: none;
  transition:
    opacity   var(--t-slow) var(--ease),
    transform 0.44s var(--ease);
}
body.dark .bulk-strip {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.05) inset;
}
#bulkStripMount.bulk-open .bulk-strip {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* PER bulk strip — same grid-collapse behaviour */
#perBulkStripMount {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease), padding 0.42s var(--ease);
  padding: 0 24px;
}
#perBulkStripMount.bulk-open {
  grid-template-rows: 1fr;
  padding: 6px 24px 10px;
}
#perBulkStripMount.bulk-open .bulk-strip {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.bulk-strip-left {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.bulk-strip-count { font-size: 12px; font-weight: 800; color: var(--primary); letter-spacing: -0.3px; }
.bulk-strip-label { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }

.bulk-strip-actions { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }

/* Status + Apply buttons — compact to match .rab popover scale */
.bulk-strip .btn-outlined,
.bulk-strip .btn-filled {
  font-size: 11.5px;
  padding: 4px 10px;
  height: auto;
}
.bulk-strip .btn-filled svg,
.bulk-strip .btn-outlined svg { width: 12px; height: 12px; }

/* Status dropdown buttons — btn-outlined base + active override */
.bulk-pill-btn { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.bulk-pill-btn--set {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-color: rgba(124,70,241,0.35) !important;
}
.bulk-pill-drop { z-index: 95 !important; }

/* Bulk Edit toggle label in filter bar */
.bulk-toggle-label {
  display: inline-flex; /* ctx-sel's display:none !important hides this at rest */
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  padding: 0 2px;
}
.bulk-toggle-text {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.bulk-toggle-label:hover .bulk-toggle-text { color: var(--text-primary); }

/* Settings toggle component */
.settings-toggle {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.settings-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.settings-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: background 0.2s;
}
.settings-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle input:checked + .settings-toggle-track { background: var(--primary); }
.settings-toggle input:checked + .settings-toggle-track::after { transform: translateX(18px); }

/* =============================================
   QoL #2 — Command Palette
   ============================================= */
/* ── Command Palette — macOS 26 Spotlight style ──────────────────────────── */

/* Overlay: light scrim + subtle blur (previous blur level restored) */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  z-index: 1200; /* topmost chrome: above kb-panel (1090) and gantt header (1000) */
  animation: cmd-overlay-in 180ms ease both;
}
.cmd-overlay--closing { animation: cmd-overlay-out 160ms ease forwards !important; }

.cmd-palette {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow:
    0 0 0 0.5px rgba(124,70,241,0.10),
    0 4px 12px rgba(0,0,0,0.08),
    0 16px 48px rgba(0,0,0,0.16),
    0 40px 80px rgba(0,0,0,0.20);
  z-index: 1201; /* one above .cmd-overlay — was tied with gantt grid-header 1000 !important */
  overflow: hidden;
  /* GPU layer — essential for 120Hz smoothness */
  will-change: transform, opacity;
  /* iOS/macOS smooth spring — single arc, no stutter-prone overshoot stops */
  animation: cmd-spotlight-in 480ms var(--ease) both;
}

/* Close — smooth collapse, eases in (mirrors open curve reversed) */
.cmd-palette--closing {
  will-change: transform, opacity;
  animation: cmd-spotlight-out 200ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}

/* Dark mode */
body.dark .cmd-palette {
  background: color-mix(in srgb, var(--surface) 96%, #000);
  border-color: rgba(124,70,241,0.22);
  box-shadow:
    0 0 0 0.5px rgba(124,70,241,0.18),
    0 4px 12px rgba(0,0,0,0.22),
    0 16px 48px rgba(0,0,0,0.38),
    0 40px 80px rgba(0,0,0,0.42);
}
body.dark .cmd-overlay {
  background: rgba(0,0,0,0.45);
}

/* ── Keyframes ────────────────────────────────────────────────────────────── */

/* Open — single smooth arc, 0.82→1.0, blur clears in first 30% of animation */
@keyframes cmd-spotlight-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  28%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Close — mirror: collapses smoothly, no stutter */
@keyframes cmd-spotlight-out {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
}

@keyframes cmd-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmd-overlay-out { from { opacity: 1; } to { opacity: 0; } }
.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmd-input-wrap:focus-within {
  /* Keyboard focus cue — .cmd-input has outline:none. Rollback: delete this rule. */
  box-shadow: inset 0 -2px 0 var(--primary);
}
.cmd-icon { color: var(--text-tertiary); flex-shrink: 0; }
.cmd-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  color: var(--text-primary);
}
.cmd-input::placeholder { color: var(--text-tertiary); }
.cmd-kbd {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  flex-shrink: 0;
}
.cmd-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.cmd-item:hover,
.cmd-item--active { background: var(--primary-soft); }
.cmd-item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.cmd-item--active .cmd-item-label { color: var(--primary); font-weight: 600; }
.cmd-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 24px 16px;
}
/* dark mode cmd-palette handled above in the main cmd-palette block */

/* ── Shared dropdown animation (matches col-mgr spring feel, adapted for dropdowns) ── */
@keyframes dropdown-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.96); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dropdown-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-5px) scale(0.96); }
}

/* Notifications panel — spring open, ease-in close */
.notif-panel:not(.hidden) {
  animation: dropdown-in 300ms var(--ease) both;
}
.notif-panel--closing {
  animation: dropdown-out 180ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}

/* Saved views panel — same spring animation */
.sf-panel:not(.hidden) {
  animation: dropdown-in 300ms var(--ease) both;
}
.sf-panel--closing {
  animation: dropdown-out 180ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}

/* View Transitions API — theme crossfade (Chrome 111+, Safari 18+) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Disable default cross-fade mix to avoid double-render flicker */
::view-transition-old(root) { animation-name: none; }
::view-transition-new(root) { animation-name: none; }
/* Fade old state out, new state in */
@keyframes theme-fade-out { to   { opacity: 0; } }
@keyframes theme-fade-in  { from { opacity: 0; } }
::view-transition-old(root) { animation: theme-fade-out 380ms cubic-bezier(0.4,0,0.2,1) both; }
::view-transition-new(root) { animation: theme-fade-in  380ms cubic-bezier(0.4,0,0.2,1) both; }

:root[data-view-morph]::view-transition-group(requests-surface) {
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-view-morph]::view-transition-old(root) {
  animation: requests-root-out 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-view-morph]::view-transition-new(root) {
  animation: requests-root-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-view-morph]::view-transition-old(requests-surface) {
  transform-origin: 50% 12%;
  animation: requests-surface-out 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-view-morph]::view-transition-new(requests-surface) {
  transform-origin: 50% 12%;
  animation: requests-surface-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes requests-root-out {
  0%   { opacity: 1; filter: saturate(1); }
  100% { opacity: 0.96; filter: saturate(1.06); }
}
@keyframes requests-root-in {
  0%   { opacity: 0.96; filter: saturate(1.08); }
  100% { opacity: 1; filter: saturate(1); }
}
@keyframes requests-surface-out {
  0% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateY(0) scale(1);
    clip-path: inset(0 round 22px);
  }
  48% {
    opacity: 0.74;
    filter: blur(10px) saturate(1.08);
  }
  100% {
    opacity: 0;
    filter: blur(18px) saturate(1.16);
    transform: translateY(18px) scale(0.965);
    clip-path: inset(10% 6% 12% 6% round 30px);
  }
}
@keyframes requests-surface-in {
  0% {
    opacity: 0;
    filter: blur(20px) saturate(1.18);
    transform: translateY(-18px) scale(1.025);
    clip-path: inset(12% 8% 10% 8% round 30px);
  }
  54% {
    opacity: 0.9;
    filter: blur(8px) saturate(1.08);
  }
  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateY(0) scale(1);
    clip-path: inset(0 round 22px);
  }
}

/* ── Command Palette — Keyboard Shortcuts sub-view ──── */
.cmd-shortcuts { padding: 4px 0 8px; }
.cmd-shortcuts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cmd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--t-xfast), background var(--t-xfast);
}
.cmd-back-btn:hover { color: var(--primary); border-color: rgba(124,70,241,0.3); background: var(--primary-soft); }
.cmd-shortcuts-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.cmd-shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 6px 6px;
}
.cmd-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-m);
  gap: 12px;
}
.cmd-shortcut-row:hover { background: var(--surface-2); }
.cmd-shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cmd-kbd-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  min-width: 24px;
  line-height: 1.4;
}
.cmd-key-sep {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.cmd-shortcut-desc {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   KANBAN — VIEW MODE TOGGLE
   ═══════════════════════════════════════════════════════════════════ */
.view-mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  flex-shrink: 0;
}
.vmt-btn {
  padding: 7px 14px;
  background: var(--surface);
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
/* Divider between the two buttons */
.vmt-btn + .vmt-btn { border-left: 1px solid var(--border); }
.vmt-btn svg { width: 14px; height: 14px; }
.vmt-btn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong); }
.vmt-btn.active { background: var(--primary); color: #fff; }
.vmt-btn.active + .vmt-btn { border-left-color: var(--primary); }
.vmt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Title-scale segmented control: on the Requests views this control IS the page
   heading (the h1 is hidden), so it has to carry title weight while still reading
   as switchable. Same .view-mode-toggle/.vmt-btn primitive, sized up — the
   inactive half stays visibly clickable rather than looking like a static label,
   which is the whole point of putting it where the title used to be. */
.view-mode-toggle--title { border-radius: 999px; padding: 2px; background: var(--surface-2); border-color: transparent; }
.view-mode-toggle--title .vmt-btn {
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-tertiary);
}
/* No divider — the pill background already separates the halves. */
.view-mode-toggle--title .vmt-btn + .vmt-btn { border-left: none; }
.view-mode-toggle--title .vmt-btn:hover { background: var(--surface); color: var(--text-primary); }
.view-mode-toggle--title .vmt-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.view-mode-toggle--title .vmt-btn.active:hover { background: var(--primary); color: #fff; }
.view-mode-toggle--title .vmt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   KANBAN — BOARD LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.kanban-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.kanban-board {
  display: flex;
  gap: 14px;
  padding: 16px 24px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  align-items: flex-start;
  min-height: 0;
  view-transition-name: requests-surface;
}

/* ═══════════════════════════════════════════════════════════════════
   KANBAN — COLUMN
   ═══════════════════════════════════════════════════════════════════ */
.kanban-col {
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background: var(--surface-2);
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  min-height: 120px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.kanban-col.drag-over {
  border-color: var(--primary);
  background: rgba(124, 70, 241, 0.04);
}
.kanban-col.collapsed .kanban-col-body { display: none; }
.kanban-col-header {
  padding: 11px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  /* -1px keeps the header flush inside the column's 1px border (no bg sliver at corners) */
  border-radius: calc(var(--radius-l) - 1px) calc(var(--radius-l) - 1px) 0 0;
  user-select: none;
  transition: background var(--t-xfast) var(--ease);
}
.kanban-col-header:hover { background: rgba(0,0,0,.03); }
body.dark .kanban-col-header:hover { background: rgba(255,255,255,.03); }
.kanban-col-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-col-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.kanban-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

/* ═══════════════════════════════════════════════════════════════════
   KANBAN — CARD
   ═══════════════════════════════════════════════════════════════════ */
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 11px 12px;
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative;
  user-select: none;
}
.kanban-card--preview {
  cursor: default;
}
.kanban-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-strong, var(--border));
}
.kanban-card--preview:hover {
  box-shadow: var(--shadow);
  border-color: var(--border);
  transform: none;
}
.kanban-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.kanban-card.dragging {
  opacity: .45;
  transform: scale(.97);
  cursor: grabbing;
}
.kanban-card-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.kanban-card-arr {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  margin-left: auto;
}
.kanban-card-customers {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kanban-card-module {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.per-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.per-card-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
}
.per-card-meta-pill--feature {
  text-transform: none;
}
.per-card-meta-pill--rank,
.per-card-meta-pill--violet {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface) 88%);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
}
.per-card-meta-pill--teal {
  background: color-mix(in srgb, var(--teal) 12%, var(--surface) 88%);
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 22%, transparent);
}
.per-card-meta-pill--amber {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface) 86%);
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 24%, transparent);
}
.per-card-meta-pill--green {
  background: color-mix(in srgb, var(--green) 12%, var(--surface) 88%);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 22%, transparent);
}
.per-card-meta-pill--blue {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.per-card-meta-pill--slate {
  background: color-mix(in srgb, var(--text-tertiary) 12%, var(--surface) 88%);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
}
.per-card-meta-pill--mint {
  background: color-mix(in srgb, #10b981 12%, var(--surface) 88%);
  color: #059669;
  border-color: color-mix(in srgb, #10b981 22%, transparent);
}
.kanban-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.kanban-card-pm {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.kanban-card-pm span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-card-due {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.kanban-card-due.overdue { color: var(--red); font-weight: 600; }
.card-field-preview-slot {
  display: block;
  border-radius: 8px;
  transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.card-field-preview-slot--inline {
  display: inline-flex;
}
.card-field-preview-slot--inline[data-preview-field="arr"] {
  margin-left: auto;
}
.card-field-preview-slot.is-highlighted {
  background: rgba(124,70,241,0.08);
  box-shadow: 0 0 0 1px rgba(124,70,241,0.18);
}
/* PER kanban card sub-elements (shared class names, no HCR equivalent) */.kanban-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--primary-soft);
  color: var(--primary);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-card-indicators {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.kanban-indic {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 2px 5px;
  white-space: nowrap;
}
.kanban-owner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.kanban-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transform: translateX(-10px) scale(0.985);
  transform-origin: left center;
  pointer-events: none;
  visibility: hidden;
  transition:
    max-width 260ms var(--ease),
    opacity 200ms var(--ease),
    transform var(--t) var(--ease),
    visibility 0s linear 240ms;
}
.kanban-controls--active {
  max-width: 240px;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}
.kanban-controls--inactive {
  max-width: 0;
  opacity: 0;
  transform: translateX(-10px) scale(0.985);
  pointer-events: none;
  visibility: hidden;
}
@media (max-width: 760px) {
  .col-mgr--card-fields {
    width: min(94vw, 720px);
  }
  .col-mgr--card-fields .col-mgr-body {
    overflow-y: auto;
  }
  .card-field-config__split {
    grid-template-columns: 1fr;
    height: auto;
  }
  .card-field-config__intro,
  .card-field-preview-shell__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .card-field-preview-shell {
    height: auto;
  }
  .card-field-list {
    overflow: visible;
    padding-right: 0;
  }
  .card-field-preview-board {
    max-width: 100%;
  }
}

/* ── Kanban column drag reorder ───────────────────── */
.kanban-col-grip {
  color: var(--text-tertiary);
  cursor: grab;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  margin-right: 4px;
}
.kanban-col-header:hover .kanban-col-grip,
.per-roadmap-col-header:hover .kanban-col-grip { opacity: 1; }
.kanban-col.col-dragging { opacity: .45; }
.kanban-col.col-drag-target { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-l); }

/* ── Kanban group-by select — matches toolbar btn-outlined ─── */
.kanban-group-select {
  height: 34px;
  padding: 0 30px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.kanban-group-select:hover { border-color: var(--border-strong, var(--border)); background: var(--surface-2); }
.kanban-group-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
body.dark .kanban-group-select { background-color: var(--surface); }

/* ── Kanban sort menu active item ─────────────────── */

/* ── Sort arrow — clickable direction toggle in board mode ─── */
#sortArrow,
.sort-arrow {
  pointer-events: auto;
  border-radius: 3px;
  padding: 0 2px 0 6px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease);
}
#sortArrow:hover,
.sort-arrow:hover { color: var(--primary); }

/* ── Sort arrow — board mode: subtle separator before direction indicator ── */
.sort-btn--kanban .sort-arrow {
  border-left: 1px solid var(--border);
  padding-left: 7px;
  margin-left: 4px;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}
.sort-btn--kanban .sort-arrow:hover { color: var(--primary); }

/* ── Saved Views button — active glow when a view is loaded ─── */
/* ── Saved view — force sf-wrap visible when a view is active ── */
.filter-right--saved-active .sf-wrap {
  display: inline-flex !important;
  align-items: center;
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* ── Saved Views button glow when a view is loaded ─────────── */
@keyframes sv-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(124,70,241,.10); }
  50%       { box-shadow: 0 0 0 3px rgba(124,70,241,.24), 0 0 10px rgba(124,70,241,.12); }
}
.saved-view--active {
  border-color: rgba(124,70,241,.35) !important;
  animation: sv-glow 2.4s ease-in-out infinite;
  position: relative;
}

/* ── Hover tooltip ──────────────────────────────────────────── */
.sv-active-tooltip {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-primary);
  z-index: var(--z-overlay);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease);
}
.saved-view--active:hover .sv-active-tooltip {
  visibility: visible;
  opacity: 1;
}
.sv-active-tooltip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
}
.sv-active-tooltip strong { font-weight: 700; color: var(--primary); }
.sv-active-tooltip-mode {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-xl);
  background: rgba(124,70,241,.1);
  color: var(--primary);
}

.sf-exit-btn {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(124,70,241,.25);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sf-exit-btn:hover { background: rgba(124,70,241,.1); border-color: rgba(124,70,241,.4); }
.sf-item--active {
  background: rgba(124,70,241,.07);
  border-color: rgba(124,70,241,.16);
}
.sf-item--active .sf-apply { font-weight: 600; color: var(--primary); }
body.dark .sf-item--active {
  background: rgba(124,70,241,.12);
  border-color: rgba(124,70,241,.22);
}

/* ── Kanban card module badge ────────────────── */
.badge--module { background: rgba(8,145,178,.1); color: var(--teal); }
body.dark .badge--module { background: rgba(8,145,178,.18); }

/* ── Card field section headers in Card Fields modal ── */
.card-field-section-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  padding: 10px 14px 4px;
  list-style: none;
  pointer-events: none;
}
.card-field-section-header:first-child { padding-top: 6px; }

/* ── Kanban body date urgency ─────────────────── */
.kanban-date--overdue { color: var(--red)   !important; font-weight: 600; }
.kanban-date--warn    { color: var(--amber) !important; font-weight: 600; }

/* ── Card field drag animation ───────────────── */
.card-field-item { cursor: grab; transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.card-field-item.dragging { opacity: 0.35; cursor: grabbing; }
.card-field-item.drag-over { box-shadow: 0 -2px 0 0 var(--primary); background: rgba(124,70,241,.04); }

.card-field-item.drag-above { box-shadow: 0 -2px 0 0 var(--primary); }
.card-field-item.drag-below { box-shadow: 0  2px 0 0 var(--primary); }

.card-field-item--no-drag { cursor: default; }
.card-field-item--no-drag .col-item-grip { display: none; }

/* ═══════════════════════════════════════════════════════
   CUSTOMER TYPEAHEAD — Add Request form
   ═══════════════════════════════════════════════════════ */
.ct-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(124,70,241,.09); border: 1px solid rgba(124,70,241,.25);
  border-radius: var(--radius-pill); padding: 3px 8px;
  font-size: 12px; color: var(--primary);
}
.ct-chip-arr { font-size: 10px; font-weight: 700; opacity: .75; }
.ct-chip-x {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 14px; line-height: 1; color: var(--primary); opacity: .6;
}
.ct-chip-x:hover { opacity: 1; }
.ct-search { width: 100%; }
.ct-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 400;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); box-shadow: var(--shadow);
  max-height: 260px; overflow-y: auto; margin-top: 2px;
}
.ct-item {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background var(--t-fast) var(--ease);
}
.ct-item:last-child { border-bottom: none; }
.ct-item:hover { background: var(--primary-soft); }
.ct-item-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ct-item-meta { font-size: 11px; color: var(--text-tertiary); }
.ct-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--text-tertiary); }

/* ── Auto-populated field indicator ─────────────────── */
.field-auto-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(124,70,241,.08);
  border: 1px solid rgba(124,70,241,.18);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  line-height: 1.2;
  white-space: nowrap;
  margin-left: auto;
}
.field-auto-locked {
  opacity: 0.72;
  cursor: not-allowed;
  background: var(--surface-2) !important;
  /* Disabled inputs swallow cursor styling — drop pointer-events so hover falls
     through to the parent .form-field, which carries the block cursor */
  pointer-events: none;
}
/* Block-input cursor on hover over the locked field region (incl. disabled date inputs) */
.form-field:has(> .field-auto-locked) { cursor: not-allowed; }

/* Rollback: customer-greened confetti (Customer Health inline edit celebration) */
.pulse-confetti { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-top); overflow: hidden; }
.pulse-confetti-piece {
  position: fixed; top: 0; left: 0;
  width: 9px; height: 14px;
  border-radius: 2px;
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════
   ELIGIBILITY GATING — Add Request form
   ═══════════════════════════════════════════════════════ */

/* Framework qualification checkboxes */
.elig-qual {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}
.elig-qual-header {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.elig-check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
}
.elig-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.elig-check-label {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.elig-check-row:hover .elig-check-label { color: var(--text-primary); }
.elig-mini-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 8px 0;
}
.elig-mini-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.elig-mini-label {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-tertiary);
}
.elig-context {
  margin: 8px 0 4px;
}
.elig-exclusions {
  margin: 8px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.elig-load-note {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border: 1px solid rgba(217,119,6,.28);
  border-radius: var(--radius-s);
  background: rgba(217,119,6,.07);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.elig-load-note strong {
  color: var(--text-primary);
}
@media (max-width: 720px) {
  .elig-mini-grid { grid-template-columns: 1fr; }
}

/* Eligibility status bar */
.elig-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  margin: 10px 0 0;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.elig-bar--pass { background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.3); color: var(--green); }
.elig-bar--fail { background: rgba(217,119,6,.07); border-color: rgba(217,119,6,.3); color: var(--amber); }
.elig-bar-inner { flex: 1; display: flex; align-items: center; gap: 7px; }
.elig-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.elig-dot--pass { background: var(--green); }
.elig-dot--fail { background: var(--amber); }
.elig-bar-toggle {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: inherit; opacity: .7; transition: transform var(--t-fast) var(--ease);
}
.elig-bar-toggle--open { transform: rotate(180deg); }

/* Eligibility details (expanded) */
.elig-details {
  padding: 8px 16px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  margin-top: -1px;
}
.elig-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.elig-row:last-child { border-bottom: none; }
.elig-row--pass .elig-icon { color: var(--green); margin-top: 1px; flex-shrink: 0; }
.elig-row--fail .elig-icon { color: var(--amber); margin-top: 1px; flex-shrink: 0; }
.elig-rule-name { font-weight: 600; color: var(--text-primary); display: block; }
.elig-rule-msg  { color: var(--text-tertiary); font-size: 11.5px; margin-top: 1px; display: block; }

/* Exception Review button */
.btn-review {
  color: var(--amber) !important;
  border-color: rgba(217,119,6,.35) !important;
  gap: 6px;
}
.btn-review:hover { background: rgba(217,119,6,.07) !important; border-color: rgba(217,119,6,.6) !important; }

/* ── Exception Review Queue ─────────────────── */
.rq-pending-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 20px;
  background: var(--amber); color: #fff;
  font-size: 10px; font-weight: 700; padding: 0 5px; margin-left: 6px;
}
.rq-item {
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.rq-item:last-child { border-bottom: none; }
.rq-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rq-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rq-customer { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.rq-detail { font-size: 12px; color: var(--text-tertiary); }
.rq-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.rq-fails { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.rq-fail-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-xl); background: rgba(217,119,6,.1); color: var(--amber);
}
.rq-escalation {
  font-size: 12px; color: var(--text-secondary); font-style: italic;
  background: var(--surface-2); padding: 7px 10px; border-radius: var(--radius-s);
  margin-bottom: 8px; line-height: 1.5;
}
.rq-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rq-reject-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; }
.rq-reject-reason { flex: 1; }
.rq-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-xl); text-transform: uppercase; letter-spacing: .05em; }
.rq-status--pending  { background: rgba(217,119,6,.1); color: var(--amber); }
.rq-status--approved { background: rgba(22,163,74,.1);  color: var(--green); }
.rq-status--rejected { background: rgba(220,38,38,.1);  color: var(--red);   }

/* ── Review Detail Panel — design language aligned ── */
.rq-detail-panel { width: 480px; }
.rqd-panel-body {
  flex: 1; overflow-y: auto; padding: 0;
  scrollbar-width: thin;
}
.rqd-criteria-block {
  padding: 14px 20px 12px;
  background: rgba(217,119,6,.06);
  border-bottom: 1px solid rgba(217,119,6,.18);
}
.rqd-criteria-row {
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px;
}
.rqd-criteria-row:last-child { margin-bottom: 0; }
.rqd-criteria-icon { color: var(--amber); margin-top: 2px; flex-shrink: 0; }
.rqd-criteria-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: block; }
.rqd-criteria-msg  { font-size: 11.5px; color: var(--text-tertiary); display: block; margin-top: 1px; }
.rqd-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-tertiary);
  margin: 14px 0 8px;
}
.rqd-body { padding: 2px 20px 16px; }
.rqd-escalation {
  font-size: 13px; color: var(--text-secondary); line-height: 1.65;
  white-space: pre-wrap; background: var(--surface-2);
  padding: 10px 12px; border-radius: var(--radius-m); margin-bottom: 4px;
}
.dm-cell--full { grid-column: 1 / -1; }

/* ── Review Queue page filter tabs ─────────────── */
.rq-filter-tabs { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 3px; }
.rq-tab {
  padding: 5px 12px; font-size: 12px; font-weight: 500; border: none; cursor: pointer;
  border-radius: var(--radius-s); background: transparent; color: var(--text-secondary);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 5px;
}
.rq-tab:hover { color: var(--text-primary); }
.rq-tab.active { background: var(--surface); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.rq-tab-count {
  font-size: 10px; font-weight: 700; background: var(--amber); color: #fff;
  border-radius: var(--radius-xl); padding: 0 5px; min-width: 16px; text-align: center;
}

/* ── RQ Detail Panel — native design system ──────── */
.rqd-panel-submeta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); flex-shrink: 0;
}
.rqd-meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-tertiary); }
.rqd-meta-item svg { opacity: .6; }
.rqd-meta-sep { font-size: 11px; color: var(--border-strong, var(--border)); }
.rqd-panel-footer {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
  padding: 14px 16px; border-top: 1px solid var(--border);
  background: var(--surface);
}
.rqd-reject-row { display: flex; gap: 6px; flex: 1; min-width: 150px; }
.rqd-reject-row .form-input { height: 34px; font-size: 12px; padding: 0 10px; }
.rqd-reviewed-state { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 12.5px; font-weight: 600; padding: 4px 0; width: 100%; }
.rqd-reviewed-state--approved { color: var(--green); }
.rqd-reviewed-state--rejected { color: var(--red); }
.rqd-reviewer { font-weight: 400; color: var(--text-tertiary); font-size: 11.5px; margin-left: auto; }
.dm-cell-value--strong { font-weight: 700; font-size: 13.5px; }
.rqd-link { color: var(--primary); word-break: break-all; }
.rqd-link:hover { text-decoration: underline; }

/* ── Row flash highlight ─────────────────────────────────────────────────── */
@keyframes row-flash-pulse {
  0%   { box-shadow: inset 0 0 0 9999px rgba(124,70,241,.20); }
  38%  { box-shadow: inset 0 0 0 9999px rgba(124,70,241,.04); }
  62%  { box-shadow: inset 0 0 0 9999px rgba(124,70,241,.16); }
  100% { box-shadow: inset 0 0 0 9999px transparent; }
}
.table-row.row-flash td {
  animation: row-flash-pulse 2s var(--ease) forwards !important;
}

/* ═══════════════════════════════════════════════════════
   ADMIN CONFIGURATION CENTER
   ═══════════════════════════════════════════════════════ */
/* Revamp (Sep 30 2026): every section now renders the same shell — icon-tile
   header (reuses .settings-section-icon), white radius-xl cards (.ac-fw-card,
   same surface as .settings-section / .tl-kpi-card), a sticky save bar, and a
   grouped sidebar (reuses .nav-section-label). Tokens only; no new colours.
   Rollback: git checkout this block + the admin renderers in app.js. */
.ac-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.ac-sidebar {
  width: 236px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.ac-sidebar .nav-section-label { padding: 14px 10px 6px; }
.ac-sidebar .nav-section-label:first-child { padding-top: 6px; }
.ac-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-m);
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ac-nav-btn svg { flex-shrink: 0; color: var(--text-tertiary); transition: color var(--t-fast) var(--ease); }
.ac-nav-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.ac-nav-btn:hover svg { color: var(--text-secondary); }
.ac-nav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ac-nav-btn.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.ac-nav-btn.active svg { color: var(--primary); }
body.dark .ac-nav-btn.active { background: var(--primary-a20); }
.ac-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-dirty-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0; margin-left: auto; box-shadow: 0 0 0 3px var(--amber-soft); }
.ac-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ac-content > .an-loading,
.ac-content > .cu-tab-empty { margin: 0 28px; }

/* ── Section header ─────────────────────────────── */
.ac-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 4px;
  width: 100%;
  max-width: 1240px;
  box-sizing: border-box;
}
.ac-section-head-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.ac-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 4px; }
.ac-section-desc  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; max-width: 80ch; }
.ac-section-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ac-section-actions .btn-outlined,
.ac-section-actions .btn-filled { padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; }

/* ── Editor body + sticky save bar ──────────────── */
.ac-editor {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1240px;
  box-sizing: border-box;
}
.ac-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 28px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.ac-footer-meta { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ac-footer-meta strong { color: var(--text-secondary); font-weight: 600; }
.ac-footer-actions { display: flex; align-items: center; gap: 8px; }

/* ── Cards ───────────────────────────────────────── */
.ac-fw-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ac-fw-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ac-fw-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-fw-card-head .ac-fw-card-title { margin-bottom: 3px; }
.ac-fw-card-sub { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
.ac-fw-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ac-count {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  background: var(--surface-2); border-radius: var(--radius-pill);
  padding: 1px 8px; font-variant-numeric: tabular-nums;
}

/* ── Table ───────────────────────────────────────── */
.ac-fw-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}
.ac-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-th {
  padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary);
  background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ac-td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }
.ac-td--action { width: 44px; text-align: right; padding-right: 8px; }
.ac-td--check { width: 40px; padding-right: 0; }
.ac-td--muted { color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-table-row:last-child .ac-td { border-bottom: none; }
.ac-table-row { transition: background var(--t-xfast) var(--ease); }
.ac-table-row:hover { background: var(--primary-a04); }
.ac-table-row.is-selected { background: var(--primary-a08); }
.ac-row-key { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.ac-table .form-input,
.ac-table .form-select { width: 100%; min-width: 120px; height: 34px; font-size: 12.5px; padding: 0 10px; box-sizing: border-box; }
.ac-table .form-select { padding-right: 30px; }
.ac-row-del { color: var(--text-tertiary); width: 30px; height: 30px; padding: 0; flex-shrink: 0; border-radius: var(--radius-s); display: inline-flex; align-items: center; justify-content: center; }
.ac-row-del:hover { color: var(--red); background: var(--red-soft); }
body.dark .ac-row-del:hover { background: rgba(220,38,38,.16); }

/* ── Chips / tag lists ───────────────────────────── */
.ac-tag-area { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; align-content: flex-start; }
.ac-tag-area:empty::before { content: attr(data-empty); font-size: 12.5px; color: var(--text-tertiary); padding: 8px 0; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px 4px 4px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--text-primary);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ac-chip:hover { border-color: var(--border-strong); }
.ac-chip-x {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-tertiary); line-height: 1;
}
.ac-chip-x:hover { color: var(--red); background: var(--red-soft); }
.ac-add-row { display: flex; gap: 8px; align-items: center; }
.ac-add-row .form-input,
.ac-add-row .form-select { flex: 1; min-width: 0; height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.ac-add-row .btn-outlined { height: 36px; }

/* Field labels used by the bucket / rule editors (were referenced but never styled) */
.ac-field-group { display: flex; flex-direction: column; gap: 6px; }
.ac-field-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ac-field-hint  { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
.ac-field-group-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* ── Risk Indicator ──────────────────────────────── */
.ac-risk-layout   { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.ac-risk-form     { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ac-risk-preview  { position: sticky; top: 20px; }
.ac-risk-sig-row  { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; gap: 10px; font-size: 13px; color: var(--text-primary); border-bottom: 1px dashed var(--border); }
.ac-risk-sig-row:last-child { border-bottom: none; }
.ac-risk-sig-label{ flex: 1; min-width: 0; }
.ac-risk-bracket-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.ac-risk-num      { padding: 3px 6px !important; height: 32px !important; font-size: 12.5px !important; text-align: center; font-variant-numeric: tabular-nums; }
.ac-risk-bar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); margin-bottom: 14px; gap: 2px; }
.ac-risk-bar > span { display: block; height: 100%; transition: flex-grow var(--t-slow) var(--ease); min-width: 0; }
@media (max-width: 1180px) { .ac-risk-form { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .ac-risk-layout { grid-template-columns: 1fr; } .ac-risk-preview { position: static; } }

/* ── SLA ladder ──────────────────────────────────── */
.ac-sla-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ac-sla-step {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface-2); padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.ac-sla-step-idx { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ac-sla-step-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; min-height: 32px; }
.ac-sla-step-input { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); }
.ac-sla-step-input .form-input { width: 64px; height: 32px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; background-color: var(--surface); }
.ac-sla-step--breach { background: var(--red-soft); border-color: rgba(220,38,38,.22); }
.ac-sla-step--breach .ac-sla-step-idx { color: var(--red); }
body.dark .ac-sla-step--breach { background: rgba(220,38,38,.12); }
.ac-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (max-width: 1100px) { .ac-sla-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Framework builder ───────────────────────────── */
.ac-fw-tabs { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; align-self: flex-start; }
.ac-fw-tabs::-webkit-scrollbar { display: none; }
.ac-fw-tabs .rq-tab { white-space: nowrap; padding: 6px 12px; }
.ac-fw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ac-fw-stack { display: flex; flex-direction: column; gap: 16px; }
.ac-fw-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ac-fw-stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.ac-fw-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ac-fw-stat-value--mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.ac-fw-badge-row,
.ac-fw-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ac-fw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ac-fw-badge.is-good {
  background: rgba(22,163,74,.1);
  border-color: rgba(22,163,74,.25);
  color: var(--green);
}
.ac-fw-badge.is-warn {
  background: rgba(217,119,6,.1);
  border-color: rgba(217,119,6,.25);
  color: var(--amber);
}
.ac-fw-badge.is-bad {
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.22);
  color: var(--red);
}
.ac-fw-badge.is-accent {
  background: var(--primary-a08);
  border-color: var(--primary-a20);
  color: var(--primary);
}
.ac-fw-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ac-fw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ac-fw-field .form-input,
.ac-fw-field .form-select { width: 100%; box-sizing: border-box; }
.ac-fw-add-btn {
  margin-top: 12px;
  font-size: 12.5px;
}
.ac-fw-row-btn,
.ac-fw-version-btn { font-size: 12px; }
.ac-fw-region-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ac-fw-region-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 16px;
  background: var(--surface-2);
  min-width: 0;
}
.ac-fw-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.ac-fw-region-card .form-input,
.ac-fw-region-card .form-select { background-color: var(--surface); }
.ac-fw-validation {
  padding: 10px 12px;
  border-radius: var(--radius-m);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.ac-fw-validation svg { flex-shrink: 0; margin-top: 2px; }
.ac-fw-validation.is-valid {
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.2);
  color: var(--green);
}
.ac-fw-validation.is-invalid {
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.2);
  color: var(--red);
}
.ac-fw-validation.is-info {
  background: var(--primary-a04);
  border: 1px solid var(--primary-a15);
  color: var(--text-secondary);
  font-weight: 500;
}
.ac-fw-list {
  display: flex;
  flex-direction: column;
}
.ac-fw-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ac-fw-list-item:first-child { padding-top: 0; }
.ac-fw-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.ac-fw-list-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-fw-list-sub,
.ac-fw-list-note,
.ac-fw-preview-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.ac-fw-preview-state {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 1120px) {
  .ac-fw-grid,
  .ac-fw-region-grid,
  .ac-fw-field-grid,
  .ac-fw-stat-row {
    grid-template-columns: 1fr;
  }
}

/* ── Sign-in Accounts ────────────────────────────── */
.ac-editor > .tl-kpi-row { padding: 0; }
.ac-clerk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ac-clerk-toolbar .ac-field-hint { max-width: 60ch; }
.btn-filled--danger { background: var(--red); box-shadow: none; }
.btn-filled--danger:hover { background: color-mix(in srgb, var(--red) 88%, #000 12%); box-shadow: 0 6px 20px rgba(220,38,38,0.32); }
.ac-content .btn-filled:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.ac-content .btn-filled:disabled::before { display: none; }

/* ── Customer chip — country tag ─────────────────── */
.ct-chip-country {
  font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: var(--radius-xl); background: var(--surface-2);
  color: var(--text-tertiary); border: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── PER Stack Rank ─────────────────────────────────────────────── */
.per-sr-table { width: max-content; min-width: 100%; }
.per-sr-table col.per-sr-col--handle { width: 20px; }
.per-sr-table col.per-sr-col--rank { width: 72px; }
.per-sr-table col.per-sr-col--customer { width: 220px; }
.per-sr-table col.per-sr-col--problem { width: 320px; }
.per-sr-table col.per-sr-col--score-param { width: 44px; }
.per-sr-table col.per-sr-col--score { width: 112px; }
.per-sr-table col.per-sr-col--status { width: 96px; }
.per-sr-table col.per-sr-col--pm-note { width: 132px; }
.per-sr-table col.per-sr-col--actions { width: 60px; }
.per-sr-table thead th {
  white-space: nowrap;
  vertical-align: top;
}
.per-sr-table th,
.per-sr-table td {
  box-sizing: border-box;
}
.per-sr-score-cell {
  position: relative;
  border-radius: var(--radius-xs);
  transition: filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.per-sr-score-cell:hover {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  box-shadow: inset 0 0 0 1px rgba(124,70,241,0.22), 0 0 0 2px rgba(124,70,241,0.14);
}
.per-sr-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.per-sr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-m);
  background: var(--surface); border: 1px solid var(--border);
  transition: box-shadow var(--t-fast), background var(--t-fast);
  cursor: default;
}
.per-sr-row:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); }
.per-sr-row.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.per-sr-row.dragging  { opacity: .45; }
.per-sr-handle { font-size: 16px; color: var(--text-tertiary); cursor: grab; padding: 0 4px; user-select: none; }
.per-sr-rank   { min-width: 28px; font-size: 11px; font-weight: 800; color: var(--text-tertiary); text-align: center; }
.per-sr-rank--set { color: var(--primary); }
.per-sr-problem { flex: 1; font-size: 12px; color: var(--text-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.per-sr-table .per-sr-problem {
  display: block;
  max-width: 100%;
}
.per-sr-pm-note-cell {
  font-size: 12px;
  color: var(--text-secondary);
}
.per-sr-pm-note-cell--filled {
  text-align: left;
}
.per-sr-pm-note-cell--empty {
  text-align: center;
}
.per-sr-pm-note-empty-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 18px;
}
.per-sr-pm-note-shell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.per-sr-pm-note-text {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.per-sr-pm-note-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.per-sr-pm-note-empty {
  color: var(--text-tertiary);
}
.per-sr-pm-note-icon {
  width: 18px;
  height: 18px;
  font-size: 11px;
  opacity: 0.78;
  flex-shrink: 0;
}
.per-sr-pm-note-cell--editable:hover .per-sr-pm-note-add {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}
.per-sr-pm-note-cell--editable:hover .per-sr-pm-note-icon {
  opacity: 1;
}
.per-sr-act-col {
  width: 60px;
  font-size: 0;
}
.per-sr-act-col .per-sr-act-btn {
  width: 26px;
  height: 26px;
}
.per-sr-act-col .per-sr-act-btn svg {
  width: 13px;
  height: 13px;
}
.per-sr-meta   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.per-sr-badge  { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.per-sr-pm-note { font-size: 10px; color: var(--teal); cursor: pointer; max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.per-sr-note-btn { opacity: 0; transition: opacity var(--t-fast); background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-size: 13px; padding: 2px 4px; }
.per-sr-row:hover .per-sr-note-btn { opacity: 1; }
.per-sr-note-input { font-size: 12px; border: 1px solid var(--primary); border-radius: var(--radius-xs); padding: 3px 8px; background: var(--surface); color: var(--text-primary); width: 200px; }

/* ── PER Roadmap ─────────────────────────────────────────────────── */
/* ── PER Roadmap Board ──────────────────────────── */
.per-roadmap-kpi-row {
  margin-bottom: 16px;
  padding: 0;
}
.per-roadmap-kpi-row .tl-kpi-card {
  appearance: none;
  text-align: left;
  font: inherit;
}
/* ── Roadmap toolbar ── */
.rm-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.rm-toolbar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rm-toolbar__left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.rm-toolbar__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}
.rm-sep {
  display: block;
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
  border-radius: 1px;
}
.rm-module-picker {
  position: relative;
  flex-shrink: 0;
}
.rm-module-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-size: 12px;
  height: 28px;
  max-width: 160px;
  white-space: nowrap;
}
.rm-module-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.per-roadmap-module-menu {
  transform-origin: top left;
  right: auto;
  left: 0;
  min-width: 200px;
}
.rm-search-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rm-search-wrap .search-bar--open .search-input-wrap {
  max-width: 200px;
}
.rm-collapse-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.rm-planned-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.rm-planned-toggle input { margin: 0; cursor: pointer; }
.rm-undated-badge {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.per-roadmap-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
  margin-top: -2px;
}
.per-roadmap-board-shell {
  min-width: 0;
  min-height: 0;
  flex: 1;
}
.per-roadmap-gantt-surface {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.per-roadmap-board {
  display: flex;
  gap: 14px;
  padding: 4px 0 24px;
  overflow-x: auto;
  align-items: flex-start;
  min-height: 0;
  flex: 1;
}
.per-roadmap-board--comfortable { gap: 16px; }
.per-roadmap-board--comfortable .per-roadmap-col { flex-basis: 304px; }
.per-roadmap-board--comfortable .per-roadmap-card { padding: 12px 13px 11px; margin-bottom: 9px; }
.per-roadmap-board--comfortable .prc-title { font-size: 12.5px; margin-bottom: 9px; }
.per-roadmap-board--comfortable .prc-customers { margin-bottom: 9px; }
.per-roadmap-board--default { gap: 14px; }
.per-roadmap-board--default .per-roadmap-col { flex-basis: 288px; }
.per-roadmap-board--default .per-roadmap-card { padding: 10px 11px 9px; margin-bottom: 7px; }
.per-roadmap-col {
  flex: 0 0 288px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--per-col-color, var(--border));
  border-radius: var(--radius-l);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 320px); /* mobile layer: dvh tracks iOS address bar */
  min-height: 200px;
  overflow: hidden;
  transition: max-height var(--t) var(--ease), flex-basis var(--t-fast), min-height var(--t-fast);
}
.per-roadmap-col.col-dragging { opacity: .45; }
.per-roadmap-col.col-drag-target { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-l); }
.per-roadmap-col--collapsed {
  max-height: none !important;
  flex-basis: 128px;
  min-height: 0;
}
.per-roadmap-col--empty {
  min-height: 0;
}
.per-roadmap-col--empty .per-roadmap-col-body {
  display: none;
}
.per-roadmap-col--compact .per-roadmap-col-header,
.per-roadmap-col--empty .per-roadmap-col-header,
.per-roadmap-col--collapsed .per-roadmap-col-header {
  height: 100%;
  padding: 14px 10px 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.per-roadmap-col--compact .per-roadmap-col-header-left,
.per-roadmap-col--compact .per-roadmap-col-header-right,
.per-roadmap-col--empty .per-roadmap-col-header-left,
.per-roadmap-col--empty .per-roadmap-col-header-right,
.per-roadmap-col--collapsed .per-roadmap-col-header-left,
.per-roadmap-col--collapsed .per-roadmap-col-header-right {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.per-roadmap-col--compact .per-roadmap-col-label,
.per-roadmap-col--empty .per-roadmap-col-label,
.per-roadmap-col--collapsed .per-roadmap-col-label {
  writing-mode: initial;
  transform: none;
  text-align: left;
  letter-spacing: .07em;
  line-height: 1.15;
  white-space: normal;
}
.per-roadmap-col--compact .per-roadmap-col-arr,
.per-roadmap-col--empty .per-roadmap-col-arr,
.per-roadmap-col--collapsed .per-roadmap-col-arr {
  display: none;
}
.per-roadmap-col--compact .per-roadmap-col-count,
.per-roadmap-col--empty .per-roadmap-col-count,
.per-roadmap-col--collapsed .per-roadmap-col-count {
  padding: 2px 6px;
}
.per-roadmap-col--compact .per-roadmap-col-chevron,
.per-roadmap-col--empty .per-roadmap-col-chevron,
.per-roadmap-col--collapsed .per-roadmap-col-chevron {
  align-self: flex-start;
}
.per-roadmap-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast);
}
.per-roadmap-col-header[draggable="true"] { cursor: grab; }
.per-roadmap-col-header[draggable="true"]:active { cursor: grabbing; }
.per-roadmap-col--empty .per-roadmap-col-header {
  cursor: default;
  border-bottom: none;
}
.per-roadmap-col-header:hover { background: var(--surface-2); }
.per-roadmap-col-header-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.per-roadmap-col-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.per-roadmap-col-dot { display: none; }
.per-roadmap-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--per-col-color, var(--text-primary)); }
.per-roadmap-col-count { font-size: 10px; font-weight: 700; color: var(--text-tertiary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 7px; }
.per-roadmap-col-arr { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); white-space: nowrap; }
.per-roadmap-col-chevron { font-size: 11px; color: var(--text-tertiary); transition: transform var(--t-fast); line-height: 1; }
.per-roadmap-col--collapsed .per-roadmap-col-chevron { transform: rotate(-90deg); }
.per-roadmap-col--collapsed .per-roadmap-col-body { display: none; }
.per-roadmap-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  min-height: 60px;
}
.per-roadmap-shipped-group { margin-top: 6px; }
.per-roadmap-shipped-summary {
  font-size: 11px;
  color: var(--green);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.per-roadmap-shipped-summary::marker,
.per-roadmap-shipped-summary::-webkit-details-marker { display: none; }
.per-roadmap-shipped-list { margin-top: 4px; }
/* ── Not Moving Forward (terminal) ── */
.per-roadmap-col--terminal {
  background: linear-gradient(180deg, rgba(220,38,38,0.06) 0%, transparent 44%), var(--surface-2);
  border-color: rgba(220, 38, 38, 0.28);
}
.per-roadmap-col--terminal .per-roadmap-col-header {
  background: rgba(254, 226, 226, 0.55);
  border-bottom-color: rgba(220, 38, 38, 0.2);
}
.per-roadmap-col--terminal .per-roadmap-col-count {
  color: var(--red);
  border-color: rgba(220, 38, 38, 0.18);
}
body.dark .per-roadmap-col--terminal {
  background:
    linear-gradient(180deg, rgba(34,24,30,0.96), rgba(28,22,27,0.94)),
    linear-gradient(145deg, rgba(220,38,38,0.1), rgba(0,0,0,0));
  border-color: rgba(248, 113, 113, 0.32);
}
body.dark .per-roadmap-col--terminal .per-roadmap-col-header {
  background: rgba(43, 28, 34, 0.92);
  border-bottom-color: rgba(248, 113, 113, 0.22);
}
body.dark .per-roadmap-col--terminal .per-roadmap-col-label {
  color: rgba(255, 235, 235, 0.92);
}
body.dark .per-roadmap-col--terminal .per-roadmap-col-count {
  background: rgba(127, 29, 29, 0.3);
  color: #fda4af;
  border-color: rgba(248, 113, 113, 0.28);
}

/* ── Unplanned / TBD (amber) ── */
.per-roadmap-col--unplanned {
  background: linear-gradient(180deg, rgba(245,158,11,0.06) 0%, transparent 44%), var(--surface-2);
  border-color: rgba(245, 158, 11, 0.32);
}
.per-roadmap-col--unplanned .per-roadmap-col-header {
  background: rgba(255, 251, 235, 0.7);
  border-bottom-color: rgba(245, 158, 11, 0.2);
}
.per-roadmap-col--unplanned .per-roadmap-col-count {
  color: #D97706;
  border-color: rgba(245, 158, 11, 0.22);
}
body.dark .per-roadmap-col--unplanned {
  background: linear-gradient(180deg, rgba(245,158,11,0.09) 0%, transparent 44%), var(--surface-2);
  border-color: rgba(251, 191, 36, 0.28);
}
body.dark .per-roadmap-col--unplanned .per-roadmap-col-header {
  background: rgba(78, 52, 6, 0.45);
  border-bottom-color: rgba(251, 191, 36, 0.18);
}
body.dark .per-roadmap-col--unplanned .per-roadmap-col-count {
  background: rgba(78, 52, 6, 0.3);
  color: #FCD34D;
  border-color: rgba(251, 191, 36, 0.25);
}

/* ── Beyond (slate) ── */
.per-roadmap-col--beyond {
  background: linear-gradient(180deg, rgba(100,116,139,0.05) 0%, transparent 44%), var(--surface-2);
  border-color: rgba(100, 116, 139, 0.28);
}
.per-roadmap-col--beyond .per-roadmap-col-header {
  background: rgba(241, 245, 249, 0.8);
  border-bottom-color: rgba(100, 116, 139, 0.16);
}
.per-roadmap-col--beyond .per-roadmap-col-count {
  color: #64748B;
  border-color: rgba(100, 116, 139, 0.2);
}
body.dark .per-roadmap-col--beyond {
  background: linear-gradient(180deg, rgba(100,116,139,0.1) 0%, transparent 44%), var(--surface-2);
  border-color: rgba(148, 163, 184, 0.24);
}
body.dark .per-roadmap-col--beyond .per-roadmap-col-header {
  background: rgba(30, 41, 59, 0.5);
  border-bottom-color: rgba(148, 163, 184, 0.15);
}
body.dark .per-roadmap-col--beyond .per-roadmap-col-count {
  color: #94A3B8;
  border-color: rgba(148, 163, 184, 0.2);
}

/* ── Column note (terminal / beyond / unplanned) ── */
.per-roadmap-col-note {
  font-size: 11px; line-height: 1.5;
  margin: 0 0 10px; padding: 6px 8px;
  border-radius: var(--radius-s);
}
.per-roadmap-col-note--terminal {
  background: rgba(220,38,38,0.06); color: #B91C1C;
  border: 1px solid rgba(220,38,38,0.14);
}
.per-roadmap-col-note--unplanned {
  background: rgba(245,158,11,0.07); color: #92400E;
  border: 1px solid rgba(245,158,11,0.18);
}
.per-roadmap-col-note--beyond {
  background: rgba(100,116,139,0.06); color: #475569;
  border: 1px solid rgba(100,116,139,0.16);
}
body.dark .per-roadmap-col-note--terminal { background: rgba(220,38,38,0.12); color: #FCA5A5; border-color: rgba(248,113,113,0.2); }
body.dark .per-roadmap-col-note--unplanned { background: rgba(245,158,11,0.1); color: #FCD34D; border-color: rgba(251,191,36,0.2); }
body.dark .per-roadmap-col-note--beyond { background: rgba(100,116,139,0.1); color: #94A3B8; border-color: rgba(148,163,184,0.18); }

/* ── Board Cards (prc-* structure) ── */
.per-roadmap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 11px 9px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: box-shadow var(--t-fast), transform .1s, border-color var(--t-xfast);
}
.per-roadmap-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.per-roadmap-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.per-roadmap-card--muted { opacity: .5; }

.prc-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 7px; min-height: 20px;
}
.prc-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 8px 3px 5px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--prc-color, var(--text-secondary)) 12%, transparent);
  color: var(--prc-color, var(--text-secondary));
  max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prc-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--prc-color, var(--text-secondary)); flex-shrink: 0;
}
.prc-rank {
  font-size: 10px; font-weight: 700; color: var(--text-tertiary);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; line-height: 1.4; flex-shrink: 0;
}
.prc-title {
  font-size: 12px; font-weight: 500; color: var(--text-primary);
  line-height: 1.5; margin-bottom: 7px;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
.prc-customers {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; margin-bottom: 8px;
}
.prc-extra { font-size: 10px; color: var(--text-tertiary); font-weight: 500; }
.prc-footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 4px;
}
.prc-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.prc-tag {
  font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: var(--radius-xs);
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border);
  white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.prc-tag--ft { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.prc-arr {
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  color: var(--text-secondary); white-space: nowrap; flex-shrink: 0;
}

/* Compact density */
.per-roadmap-board--compact { gap: 12px; }
.per-roadmap-board--compact .per-roadmap-col { flex-basis: 264px; }
.per-roadmap-board--compact .per-roadmap-card { padding: 7px 10px 6px; margin-bottom: 5px; }
.per-roadmap-board--compact .prc-header { margin-bottom: 5px; }
.per-roadmap-board--compact .prc-title { font-size: 11px; -webkit-line-clamp: 1; margin-bottom: 5px; }
.per-roadmap-board--compact .prc-customers { margin-bottom: 5px; }

/* Empty column state */
.per-roadmap-empty {
  font-size: 11px; color: var(--text-tertiary); text-align: center;
  padding: 20px 8px; font-style: italic; border: 1px dashed var(--border);
  border-radius: var(--radius-m); margin: 4px 0;
}
/* PER My Requests */
.per-my-req-toolbar { } /* spacing comes from shared .filter-row padding (0 24px 8px) for parity with All Requests */
.per-my-req-empty { text-align: center; padding: 60px 24px; }
.per-my-req-empty-icon { color: var(--border-strong); margin-bottom: 12px; }
.per-my-req-empty-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
.per-my-req-empty-sub { font-size: 13px; color: var(--text-tertiary); margin: 0; }
.per-my-req-problem-cell { width: 26%; min-width: 0; white-space: normal !important; }
.per-my-req-problem {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
@media (max-width: 900px) {  .per-roadmap-col--collapsed {
    flex-basis: 118px;
  }
}

/* Gantt view needs overflow:hidden on outer container */
#view-per-roadmap { overflow: hidden; }
#perRoadmapContainer { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════
   Account Pulse
   ═══════════════════════════════════════════════ */
.pulse-page {
  display: flex; flex-direction: column;
  flex: 1; overflow-y: auto; overflow-x: hidden;
}
/* ── Zone 1: Portfolio ─────────────────────── */
.pulse-portfolio { padding: 28px 28px 24px; }
.pulse-kicker { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); margin-bottom: 4px; }
.pulse-page-title { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; margin-bottom: 4px; }
.pulse-portfolio-title { font-size: 16px; font-weight: 900; color: var(--text-primary); letter-spacing: -.02em; }
.pulse-portfolio-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pulse-filter-clear-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: rgba(124,70,241,.08); border: 1px solid rgba(124,70,241,.2);
  border-radius: var(--radius-pill); padding: 3px 10px 3px 8px;
  cursor: pointer; transition: background var(--t-xfast); white-space: nowrap; line-height: 1.4;
}
.pulse-filter-clear-btn:hover { background: rgba(124,70,241,.14); }
.pulse-portfolio-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 22px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pulse-legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; vertical-align: middle; flex-shrink: 0; }
.pulse-legend-dot--hot   { background: var(--red); }
.pulse-legend-dot--unaddr{ background: var(--orange); }

.pulse-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pulse-heat-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast);
}
.pulse-heat-section:hover { box-shadow: var(--shadow-m); }
.pulse-heat-section-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 16px 12px;
  background: linear-gradient(135deg, rgba(124,70,241,.04) 0%, var(--surface) 60%);
  border-bottom: 1px solid var(--border);
}
.pulse-heat-section-title {
  font-size: 13px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em;
}
.pulse-heat-section-tag {
  font-size: 10.5px; font-weight: 600; color: var(--primary);
  background: rgba(124,70,241,.08); border-radius: var(--radius-pill);
  padding: 3px 10px; border: 1px solid rgba(124,70,241,.18); white-space: nowrap; flex-shrink: 0;
  cursor: pointer; transition: background var(--t-xfast);
}
.pulse-heat-section-tag:hover { background: rgba(124,70,241,.14); }
.pulse-heat-section-bd {
  padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 0; flex: 1;
}
.pulse-heat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px; border-radius: 8px; transition: background var(--t-xfast); cursor: pointer;
}
.pulse-heat-row:hover { background: var(--surface-2); }
.pulse-heat-row--active { background: rgba(124,70,241,.08) !important; border-radius: var(--radius-l); box-shadow: inset 0 0 0 1.5px rgba(124,70,241,.28); }
.pulse-heat-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-heat-bar-track {
  flex: 2.5; height: 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); overflow: hidden; display: flex; min-width: 60px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.pulse-heat-fill { height: 100%; border-radius: inherit; transition: width .4s cubic-bezier(.4,0,.2,1); }
.pulse-heat-fill--hot   { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.pulse-heat-fill--unaddr{ background: linear-gradient(90deg, #C2410C, #FB923C); }
.pulse-heat-count {
  font-size: 11px; font-weight: 800; color: var(--text-primary); flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 2px 8px; min-width: 26px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.pulse-heat-empty { font-size: 12px; color: var(--text-secondary); font-style: italic; padding: 8px 8px; }
.pulse-zone-divider { height: 1px; background: var(--border); }

/* ── Zone 2: Customer workspace ────────────── */
.pulse-workspace { padding: 24px 28px 48px; }
.pulse-dropdown-wrap { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin-bottom: 24px; }
.pulse-dropdown-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.pulse-workspace-content { min-height: 100px; }

/* Customer header card */
.pulse-customer-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 20px 22px 18px;
  margin-bottom: 12px; border-top-width: 3px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pulse-customer-card:hover { box-shadow: var(--shadow-lg); }
.pulse-customer-card--red    { border-top-color: var(--red); }
.pulse-customer-card--amber  { border-top-color: var(--orange); }
.pulse-customer-card--yellow { border-top-color: var(--yellow); }
.pulse-customer-card--green  { border-top-color: var(--green); }
.pulse-customer-card--signal-eligible::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 4px;
  border-radius: var(--radius-l) var(--radius-l) var(--radius-pill) var(--radius-pill);
  background: linear-gradient(90deg, rgba(185,28,28,.78) 0%, rgba(239,68,68,.88) 26%, rgba(249,115,22,.76) 62%, rgba(248,113,113,.58) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.pulse-customer-card--signal-eligible::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -18%;
  width: 22%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,247,225,.62) 16%, rgba(255,252,242,.98) 42%, rgba(251,146,60,.9) 64%, rgba(255,255,255,0));
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.pulse-customer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pulse-tracker-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px 12px;
  cursor: pointer; transition: color var(--t-xfast), border-color var(--t-xfast), background var(--t-xfast); white-space: nowrap;
}
.pulse-tracker-btn:hover { color: var(--primary); border-color: rgba(124,70,241,.3); background: rgba(124,70,241,.06); }
.pulse-customer-name { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -.025em; line-height: 1.2; }
.pulse-tier-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; letter-spacing: .02em; }
.pulse-tier--red    { background: rgba(220,38,38,.1);  color: var(--red); }
.pulse-tier--amber  { background: rgba(234,88,12,.1);  color: var(--orange); }
/* Yellow text uses --amber in light (raw #EAB308 was ~1.9:1 on the wash); dark block below restores bright yellow */
.pulse-tier--yellow { background: rgba(234,179,8,.1);  color: var(--amber); }
.pulse-tier--green  { background: rgba(22,163,74,.1);  color: var(--green); }
.pulse-customer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 16px; }
.pulse-meta-sep { color: var(--border); padding: 0 1px; user-select: none; }
.pulse-meta-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .65; margin-right: 3px; }
.pulse-meta-val { font-weight: 600; color: var(--text-primary); }

/* Pipeline bar */
.pulse-pipeline-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); gap: 3px; margin-bottom: 8px; }
.pulse-pipeline-seg { height: 100%; min-width: 8px; border-radius: var(--radius-pill); transition: flex .4s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; }
.pulse-seg--hot       { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.pulse-seg--unaddr    { background: linear-gradient(90deg, #C2410C, #FB923C); }
.pulse-seg--committed { background: linear-gradient(90deg, #92400E, #FCD34D); }
.pulse-seg--resolved  { background: linear-gradient(90deg, #14532D, #4ADE80); }
.pulse-seg--terminal  { background: linear-gradient(90deg, #374151, #9CA3AF); opacity: .45; }
.pulse-pipeline-seg-ember {
  position: absolute;
  inset: -1px auto -1px -34%;
  width: 36%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,228,163,.16) 18%, rgba(255,208,120,.34) 42%, rgba(253,186,116,.56) 58%, rgba(248,113,113,.24) 74%, rgba(255,255,255,0));
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(251,146,60,.18);
}
.pulse-pipeline-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.pulse-pipeline-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-secondary); }
.pulse-pipeline-icon { line-height: 0; flex-shrink: 0; display: flex; align-items: center; }
.pulse-pipeline-legend-count { font-weight: 700; color: var(--text-primary); }
.pulse-pipeline-legend-label { color: var(--text-secondary); }

.pulse-customer-card--signal-ember {
  border-top-width: 1px;
  border-top-color: transparent !important;
}
.pulse-customer-card--signal-ember::before {
  opacity: .94;
}
.pulse-customer-card--signal-ember::after {
  opacity: 1;
  animation: pulse-hot-ember-ribbon 3.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
.pulse-customer-card--signal-ember .pulse-pipeline-seg--hot-signal {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 12px rgba(239,68,68,.14);
}
.pulse-customer-card--signal-ember .pulse-pipeline-seg-ember {
  opacity: 1;
  animation: pulse-hot-ember-seg 3.8s cubic-bezier(0.22,1,0.36,1) infinite;
}

@keyframes pulse-hot-ember-ribbon {
  0% { transform: translateX(0) scaleX(.86); opacity: 0; }
  10% { opacity: 1; }
  52% { transform: translateX(324%) scaleX(1.04); opacity: .86; }
  74% { opacity: .34; }
  100% { transform: translateX(470%) scaleX(.94); opacity: 0; }
}
@keyframes pulse-hot-ember-seg {
  0% { transform: translateX(0) scaleX(.9); opacity: 0; }
  10% { opacity: .84; }
  52% { transform: translateX(246%) scaleX(1.02); opacity: .62; }
  74% { opacity: .14; }
  100% { transform: translateX(296%) scaleX(.95); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-customer-card--signal-ember::before,
  .pulse-customer-card--signal-ember::after,
  .pulse-customer-card--signal-ember .pulse-pipeline-seg-ember {
    animation: none !important;
  }
}

/* Zero-count chip strip */
.pulse-zero-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pulse-zero-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px 4px 9px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-secondary); white-space: nowrap;
}
.pulse-chip-icon { line-height: 0; display: flex; align-items: center; }

/* Bucket groups — standalone cards */
.pulse-buckets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pulse-bucket-group {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pulse-bucket-group[data-bucket="hot"]         .pulse-bucket-header { background: rgba(220,38,38,.05); }
.pulse-bucket-group[data-bucket="unaddressed"] .pulse-bucket-header { background: rgba(249,115,22,.05); }
.pulse-bucket-group[data-bucket="committed"]   .pulse-bucket-header { background: rgba(234,179,8,.05); }
.pulse-bucket-group[data-bucket="resolved"]    .pulse-bucket-header { background: rgba(22,163,74,.05); }
.pulse-bucket-group[data-bucket="terminal"]    .pulse-bucket-header { background: rgba(100,116,139,.04); }
.pulse-bucket-group[data-bucket="hot"]         .pulse-bucket-emoji { color: var(--red); }
.pulse-bucket-group[data-bucket="unaddressed"] .pulse-bucket-emoji { color: var(--orange); }
.pulse-bucket-group[data-bucket="committed"]   .pulse-bucket-emoji { color: var(--yellow); }
.pulse-bucket-group[data-bucket="resolved"]    .pulse-bucket-emoji { color: var(--green); }
.pulse-bucket-group[data-bucket="terminal"]    .pulse-bucket-emoji { color: var(--text-secondary); }
.pulse-bucket-header {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; padding: 13px 16px;
  cursor: pointer; text-align: left; transition: background var(--t-xfast); color: var(--text-primary);
}
.pulse-bucket-header:hover { background: var(--surface-2) !important; }
.pulse-bucket-emoji { font-size: 14px; line-height: 1; flex-shrink: 0; }
.pulse-bucket-label { font-size: 13px; font-weight: 700; flex: 1; }
.pulse-bucket-count {
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-secondary); padding: 2px 9px; border-radius: var(--radius-pill);
}
.pulse-bucket-chevron { color: var(--text-secondary); transition: transform .2s; line-height: 0; }
.pulse-bucket-group--open .pulse-bucket-chevron { transform: rotate(180deg); }
.pulse-bucket-body { display: none; border-top: 1px solid var(--border); padding: 0 16px 12px; }
.pulse-bucket-group--open .pulse-bucket-body { display: block; }

/* Request rows */
.pulse-request-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
  cursor: pointer; border-radius: var(--radius-s);
  transition: background .1s; margin: 0 -4px;
}
.pulse-request-row:last-of-type { border-bottom: none; }
.pulse-request-row:hover { background: var(--surface-2); }
.pulse-request-row:hover .pulse-open-btn { opacity: 1; }
.pulse-request-main { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; min-width: 0; }
.pulse-request-module { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pulse-request-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.pulse-owner-tag { font-size: 11px; padding: 2px 8px; background: var(--surface-2); border-radius: var(--radius-pill); color: var(--text-secondary); white-space: nowrap; border: 1px solid var(--border); }
.pulse-owner-tag--pm { background: rgba(124,70,241,.07); color: var(--primary); border-color: rgba(124,70,241,.2); }
.pulse-open-btn { font-size: 11.5px; opacity: 0; transition: opacity var(--t-fast); flex-shrink: 0; white-space: nowrap; }
.pulse-also-affects { font-size: 11px; color: var(--text-secondary); font-style: italic; white-space: nowrap; }
.pulse-bucket-empty { font-size: 12.5px; color: var(--text-secondary); padding: 16px 4px; text-align: center; font-style: italic; }
.pulse-terminal-warn {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; color: var(--orange);
  background: rgba(234,88,12,.06); border-radius: var(--radius-s);
  padding: 8px 10px; margin-top: 8px; line-height: 1.5;
}

/* Path to Green — action card */
.pulse-path {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); border-top: 3px solid var(--yellow);
  box-shadow: var(--shadow);
  padding: 18px 20px; margin-top: 4px;
  transition: box-shadow var(--t-fast);
}
.pulse-path:hover { box-shadow: var(--shadow-lg); }
.pulse-path--green { border-top-color: var(--green); }
.pulse-path-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pulse-path-progress { display: flex; align-items: center; gap: 8px; }
.pulse-path-arrow-icon { color: var(--text-secondary); line-height: 0; display: flex; opacity: .7; }
.pulse-path-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.pulse-path-steps { display: flex; flex-direction: column; }
.pulse-path-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pulse-path-step:last-of-type { border-bottom: none; padding-bottom: 2px; }
.pulse-path-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pulse-path-step-body { flex: 1; min-width: 0; }
.pulse-path-step-text { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.pulse-path-open-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  background: rgba(124,70,241,.08); border: 1px solid rgba(124,70,241,.2);
  border-radius: var(--radius-pill); padding: 4px 10px;
  cursor: pointer; white-space: nowrap; transition: background var(--t-xfast); flex-shrink: 0; line-height: 1.4;
}
.pulse-path-open-btn:hover { background: rgba(124,70,241,.14); }
.pulse-path-tip {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  background: var(--surface-2); border-radius: var(--radius-s);
  padding: 8px 12px; margin-top: 14px;
}
.pulse-path-tip--success { color: var(--green); background: rgba(22,163,74,.06); }

/* Empty state */
.pulse-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 20px; color: var(--text-secondary); text-align: center; }
.pulse-empty-icon { opacity: .25; }
.pulse-empty-text { font-size: 13px; max-width: 260px; line-height: 1.6; }

/* Custom customer dropdown */
.pulse-cust-dd { position: relative; }
.pulse-cust-dd-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-l);
  padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--text-primary);
  font-family: inherit; cursor: pointer; text-align: left; outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pulse-cust-dd-btn:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.pulse-cust-dd-btn:focus-visible,
.pulse-cust-dd-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-a15); }
.pulse-cust-dd-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-cust-dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto;
}
.pulse-cust-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer; transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.pulse-cust-dd-item:last-of-type { border-bottom: none; }
.pulse-cust-dd-item:hover { background: var(--surface-2); }
.pulse-cust-dd-item--selected { background: rgba(124,70,241,.05); }
.pulse-cust-dd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pulse-cust-dd-dot--red    { background: var(--red); }
.pulse-cust-dd-dot--amber  { background: var(--orange); }
.pulse-cust-dd-dot--yellow { background: var(--yellow); }
.pulse-cust-dd-dot--green  { background: var(--green); }
.pulse-cust-dd-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-cust-dd-search-wrap {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.pulse-cust-dd-search-wrap:focus-within {
  /* Keyboard focus cue — .pulse-cust-dd-search has outline:none. Rollback: delete this rule. */
  box-shadow: inset 0 -2px 0 var(--primary);
}
.pulse-cust-dd-search-icon { color: var(--text-secondary); line-height: 0; flex-shrink: 0; opacity: .6; }
.pulse-cust-dd-search {
  flex: 1; border: none; background: transparent; padding: 2px 0;
  font-size: 13px; color: var(--text-primary); outline: none; font-family: inherit;
}
.pulse-cust-dd-search::placeholder { color: var(--text-secondary); opacity: .65; }
.pulse-cust-dd-empty { padding: 14px; font-size: 12.5px; color: var(--text-secondary); text-align: center; font-style: italic; }
.pulse-dd-tier-chips { display: flex; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pulse-dd-tier-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: color var(--t-xfast), border-color var(--t-xfast), background var(--t-xfast); background: none; white-space: nowrap; }
.pulse-dd-tier-chip-count { font-size: 10px; font-weight: 700; opacity: .85; }
.pulse-dd-tier-chip--red    { color: var(--red); border-color: rgba(220,38,38,.22);  background: rgba(220,38,38,.06);  }
.pulse-dd-tier-chip--amber  { color: var(--orange); border-color: rgba(234,88,12,.22);  background: rgba(234,88,12,.06);  }
.pulse-dd-tier-chip--yellow { color: #A16207; border-color: rgba(161,98,7,.22);   background: rgba(161,98,7,.06);   }
.pulse-dd-tier-chip--green  { color: var(--green); border-color: rgba(22,163,74,.22);  background: rgba(22,163,74,.06);  }
.pulse-dd-tier-chip--red.active    { background: rgba(220,38,38,.15);  border-color: rgba(220,38,38,.45);  }
.pulse-dd-tier-chip--amber.active  { background: rgba(234,88,12,.15);  border-color: rgba(234,88,12,.45);  }
.pulse-dd-tier-chip--yellow.active { background: rgba(161,98,7,.15);   border-color: rgba(161,98,7,.45);   }
.pulse-dd-tier-chip--green.active  { background: rgba(22,163,74,.15);  border-color: rgba(22,163,74,.45);  }
.pulse-s2-editable, .pulse-s1-editable { cursor: pointer; transition: outline .1s; border-radius: var(--radius-pill); }
.pulse-s2-editable:hover, .pulse-s1-editable:hover { outline: 2px solid var(--primary); outline-offset: 2px; opacity: 1; }
.pulse-s2-editable:active, .pulse-s1-editable:active { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Account Pulse — dark-mode parity. Mirrors the dark-brighten pattern used by
   .esc-* orange/yellow text (see the body.dark rules near the risk tiers).
   Rollback: delete this block to revert Pulse dark adjustments. */
body.dark .pulse-tier--yellow { color: var(--yellow); }
body.dark .pulse-dd-tier-chip--yellow { color: var(--yellow); border-color: rgba(234,179,8,.3); background: rgba(234,179,8,.08); }
body.dark .pulse-dd-tier-chip--yellow.active { background: rgba(234,179,8,.18); border-color: rgba(234,179,8,.5); }
body.dark .pulse-heat-bar-track { box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }

/* Responsive */
@media (max-width: 900px) { .pulse-portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .pulse-portfolio-grid { grid-template-columns: 1fr; }
  .pulse-portfolio, .pulse-workspace { padding: 16px; }
}

/* =============================================================
   Dark-mode parity — surfaces that mixed toward white in light mode
   lightened toward grey on dark backgrounds. Token-only overrides.
   Rollback: delete this block to revert.
   ============================================================= */
body.dark .esc-queue-shell,
body.dark .esc-table-shell,
body.dark .notif-center-shell { background: var(--surface); }
body.dark .esc-playbook-draft { background: var(--surface-2); }
body.dark .esc-empty,
body.dark .notif-empty { background: var(--surface-2); }
body.dark .an-loading--motion { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
body.dark .tl-group-strip { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
body.dark .tl-group-strip__toggle:hover { background: var(--surface-2); }
body.dark .tl-group-strip__metric { background: var(--surface); }

/* =============================================================
   make-interfaces-feel-better — UI polish pass (shared, additive)
   ============================================================= */

/* Edit-lease indicators v3 (DB_PLAN Ph 4 redesign — in-flow chip). Rows locked
   by ANOTHER user get an amber wash + 3px left accent; the "who" is a real
   .lock-chip node (Lucide lock SVG + owner name) injected IN-FLOW by
   _applyLockDom/_rehydrateLocks — into the customer-chips container (tables)
   or the card's flex top row (kanban/roadmap) — so it wraps with content and
   never overlaps values. Cards carry no ring/border tint (clashed with the
   roadmap card's --prc-color status stroke); the chip is the card cue.
   Visually distinct from .cell-locked (grey hover-only Status-L1 glyph); the
   detail modal keeps .dm-lock-chip.
   Rollback: delete this block + the Ph 4 section in app.js. */
.row-locked { position: relative; }
tr.row-locked td {
  box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--amber) 7%, transparent);
  transition: box-shadow var(--t) var(--ease);
}
tr.row-locked td:first-child {
  box-shadow: inset 3px 0 0 var(--amber),
              inset 0 0 0 9999px color-mix(in srgb, var(--amber) 7%, transparent);
}
.lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  max-width: 140px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--amber);
  /* opaque in both themes — --amber-soft is translucent on body.dark */
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius-pill);
  pointer-events: none;
  flex-shrink: 0;
  vertical-align: middle;
}
.lock-chip svg { flex-shrink: 0; }
.lock-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* One-shot entrance on first appearance only (rehydrates recreate the chip
   without the class). Global reduced-motion block snaps it to the final frame. */
@keyframes lock-pill-in {
  from { opacity: 0; scale: 0.25; filter: blur(4px); }
  to   { opacity: 1; scale: 1;    filter: blur(0); }
}
.lock-chip--enter {
  animation: lock-pill-in 300ms cubic-bezier(0.2, 0, 0, 1) backwards;
}
/* Continuous subtle pulse while the lock is held (sv-glow idiom, amber).
   Rows breathe the wash 7% ↔ 13%; cards breathe a faint tint from clear.
   Resting frames equal the static rules, so reduced-motion (snaps + reverts
   to the static declarations) and calm-idle (animation paused below) both
   degrade to the quiet static treatment. */
@keyframes lock-row-breathe {
  0%, 100% { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--amber) 7%, transparent); }
  50%      { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--amber) 13%, transparent); }
}
@keyframes lock-row-breathe-first {
  0%, 100% { box-shadow: inset 3px 0 0 var(--amber), inset 0 0 0 9999px color-mix(in srgb, var(--amber) 7%, transparent); }
  50%      { box-shadow: inset 3px 0 0 var(--amber), inset 0 0 0 9999px color-mix(in srgb, var(--amber) 13%, transparent); }
}
@keyframes lock-card-breathe {
  0%, 100% { box-shadow: inset 0 0 0 9999px transparent; }
  50%      { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--amber) 10%, transparent); }
}
/* Compositor-only breathe: the static 7% wash above stays painted once; a
   pseudo-element overlay carrying the extra +6% pulses OPACITY only (no
   per-frame repaint of a 9999px inset shadow on every cell). Frozen and
   select cells are skipped: their sticky position is inline and their !important
   backgrounds already hide the wash. isolation + z-index:-1 keeps the overlay
   above the cell background, under the text (same layer as the inset shadow).
   Rollback: delete this block down to the calm-idle rule and restore
   "tr.row-locked td { animation: lock-row-breathe 2.4s ease-in-out infinite; }
    tr.row-locked td:first-child { animation-name: lock-row-breathe-first; }
    .kanban-card.row-locked, .per-roadmap-card.row-locked { animation: lock-card-breathe 2.4s ease-in-out infinite; }"
   (keyframes above are kept for that rollback). */
@keyframes lock-overlay-breathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
tr.row-locked td:not(.col-frozen):not(.row-sel-cell) { position: relative; isolation: isolate; }
tr.row-locked td:not(.col-frozen):not(.row-sel-cell)::after { z-index: -1; }
tr.row-locked td:not(.col-frozen):not(.row-sel-cell)::after,
.kanban-card.row-locked::after,
.per-roadmap-card.row-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: color-mix(in srgb, var(--amber) 6%, transparent);
  opacity: 0;
  animation: lock-overlay-breathe 2.4s ease-in-out infinite;
}
.kanban-card.row-locked::after,
.per-roadmap-card.row-locked::after { background: color-mix(in srgb, var(--amber) 10%, transparent); }
.per-roadmap-card.row-locked { position: relative; }
body.calm-idle tr.row-locked td::after,
body.calm-idle .kanban-card.row-locked::after,
body.calm-idle .per-roadmap-card.row-locked::after { animation: none; }
.dm-lock-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius-m);
}
.dm-lock-chip .dm-lock-takeover { margin-left: auto; color: var(--primary); }
.dm-lock-chip .dm-lock-takeover:disabled { opacity: .5; cursor: not-allowed; }

/* Keyboard-only focus ring for every interactive element that lacks its own.
   :where() keeps specificity at zero, so all existing per-component focus
   styles still win. Fires only on keyboard focus (:focus-visible), never on
   mouse click. Rollback: delete this rule. */
:where(button, [role="button"], a, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Principle 12 — tactile scale-on-press (always 0.96). Reuses each button's
   existing transform transition (added to .icon-btn/.btn-outlined/.btn-text/
   .nav-item above; .prog-pill already transitions transform). btn-filled +
   kb-ask-btn set scale in their own :active rules. */
.icon-btn:active,
.btn-outlined:active,
.btn-text:active,
.nav-item:active,
.prog-pill:active { transform: scale(0.96); }
/* P12 extension — chips + small controls press at 0.96; large cards press at 0.98.
   Rollback: delete the two rules below. */
.chip:active,
.tl-group-chip:active,
.esc-runway-chip:active,
.esc-filter-pill:active,
.esc-sort-pill:active,
.kb-suggested-chip:active,
.kb-chip:active,
.kb-tm-detail-btn:active,
.tl-ctl-btn:active,
.vmt-btn:active,
.rq-tab:active,
.ac-nav-btn:active,
.rab-btn:active,
.pulse-filter-clear-btn:active,
.pulse-heat-section-tag:active,
.pulse-tracker-btn:active,
.pulse-path-open-btn:active { transform: scale(0.96); }
.kanban-card:active,
.per-roadmap-card:active,
.tl-kpi-card[data-filter-chip]:active { transform: translateY(-1px) scale(0.98); }

/* Micro icon button — minimum 24×24 hit target for JS-built inline remove/dismiss
   controls (chip ×, bracket removes, alert dismiss). Keeps text-button look.
   Rollback: delete this rule + the class usages in app.js. */
.icon-btn--xs {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: var(--radius-xs);
}
.icon-btn--xs:hover { background: var(--primary-a08); }

/* Success-tone filled button (approve actions). Replaces 3 inline
   "background:var(--green);box-shadow:none" copies. Rollback: delete +
   restore inline styles at the rq-approve/rqp-approve call sites. */
.btn-filled--success { background: var(--green); box-shadow: none; }
.btn-filled--success:hover { background: color-mix(in srgb, var(--green) 88%, #000 12%); box-shadow: none; }

/* Principle 16 — extend the most-used small icon button to a 40×40 hit target
   without changing its visible 36×36 size (.icon-btn is position:relative). */
.icon-btn::after {
  content: "";
  position: absolute;
  inset: -2px;            /* 36 + 2×2 = 40 */
}

/* Principle 9 — tabular numbers on dynamically-updating figures (no width shift) */
.row-count-badge,
.nav-count,
.fp-count,
.btn-badge,
.tl-kpi-value,
.tl-kpi-value--sm,
.kanban-card-arr,
.esc-card-arr,
.dm-arr-inline,
#perCtxCount,
.esc-score,
.pulse-heat-count,
.pulse-bucket-count,
.per-sr-rank,
.prc-rank,
.prc-arr,
.kanban-col-count,
.per-roadmap-col-count,
.per-roadmap-col-arr,
.rq-tab-count,
.export-sel-count,
.bulk-strip-count,
.cu-progress-text,
.col-id-value,
.an-delivery-pill-val { font-variant-numeric: tabular-nums; }

/* Principle 10 — text wrapping: balance short headings, pretty short body text */
.page-title,
.dialog-title,
.col-mgr-header h3,
.an-card-title,
.esc-title-row h2,
.notif-title-row h2,
.notif-header h3,
.sf-title,
.kb-hero-title,
.dm-title,
.esc-customer,
.ac-section-title,
.pulse-customer-name { text-wrap: balance; }

.tl-kpi-sub,
.form-label,
.sf-empty,
.esc-subtitle,
.tl-group-strip__caption,
.notif-empty-copy p,
.pulse-empty-text { text-wrap: pretty; }

/* Principle 11 — subtle neutral outline on content images (avatars only) */
img.cu-assignee-avatar { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; }
body.dark img.cu-assignee-avatar { outline-color: rgba(255, 255, 255, 0.1); }

/* Principle 7 — theme-toggle icon cross-fade (sun ↔ moon), driven by body.dark.
   Both icons live in #themeIcon; CSS swaps them. ROLLBACK: restore the single
   <i data-lucide> in index.html + the setAttribute lines in applyTheme. */
.theme-icon-swap { position: relative; display: inline-flex; width: 17px; height: 17px; }
.theme-icon-swap svg {
  position: absolute; inset: 0; width: 17px; height: 17px;
  transition: opacity .3s cubic-bezier(.2,0,0,1), transform .3s cubic-bezier(.2,0,0,1), filter .3s cubic-bezier(.2,0,0,1);
}
/* light mode → show moon, hide sun */
.theme-icon-swap .ti-sun  { opacity: 0; transform: scale(.25); filter: blur(4px); }
.theme-icon-swap .ti-moon { opacity: 1; transform: scale(1);   filter: blur(0); }
/* dark mode → show sun, hide moon */
body.dark .theme-icon-swap .ti-sun  { opacity: 1; transform: scale(1);   filter: blur(0); }
body.dark .theme-icon-swap .ti-moon { opacity: 0; transform: scale(.25); filter: blur(4px); }

/* Principle 5 — staggered view-enter (toolbar → KPIs → table cascade).
   OPT-IN + EASY ROLLBACK: remove the word "stagger-views" from <body> in
   index.html and behavior reverts EXACTLY to the single-block view-enter.
   Nothing else references this; the original .view-enter-anim rule is untouched. */
body.stagger-views .view.view-enter-anim { animation: none; }
/* Multi-section views (e.g. all-requests): stagger the direct children. */
body.stagger-views .view.view-enter-anim > * { animation: view-stagger-enter .42s var(--ease) both; }
body.stagger-views .view.view-enter-anim > *:nth-child(1)   { animation-delay: 0ms; }
body.stagger-views .view.view-enter-anim > *:nth-child(2)   { animation-delay: 80ms; }
body.stagger-views .view.view-enter-anim > *:nth-child(3)   { animation-delay: 160ms; }
body.stagger-views .view.view-enter-anim > *:nth-child(n+4) { animation-delay: 220ms; }
/* Single-wrapper views (escalations, analytics, pulse, PER pages): the view has
   one container child, so descend one level and stagger the wrapper's sections. */
body.stagger-views .view.view-enter-anim > *:only-child { animation: none; }
body.stagger-views .view.view-enter-anim > *:only-child > * { animation: view-stagger-enter .42s var(--ease) both; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(1)   { animation-delay: 0ms; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(2)   { animation-delay: 80ms; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(3)   { animation-delay: 160ms; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(n+4) { animation-delay: 220ms; }
@keyframes view-stagger-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility — honor "reduce motion": neutralize all animations + transitions.
   Keep a 0.01ms tick so transitionend/animationend listeners still fire. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;      /* stagger delays otherwise leave content blank in sequence */
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Opt-in "calm idle" mode — pauses the always-running decorative loops
   (Kekabot aurora label/icon, query-bar beam, saved-view glow) unless the
   surface is actually engaged. Enable by adding class "calm-idle" to <body>.
   Rollback: delete this block (and the body class if added). */
body.calm-idle .kb-label-ai,
body.calm-idle .kb-icon-ai,
body.calm-idle .kb-icon-ai::after,
body.calm-idle .kb-query-bar,
body.calm-idle .saved-view--active { animation-play-state: paused; }
body.calm-idle .kb-query-bar:focus-within,
body.calm-idle .kb-query-bar.kb-loading,
body.calm-idle .kb-nav-item:hover .kb-label-ai,
body.calm-idle .kb-nav-item:hover .kb-icon-ai { animation-play-state: running; }

/* ── Conic beam primitives — used by .kb-query-bar (Ask Kekabot search bar).
   @property enables smooth --bb-angle animation; browsers without support show
   a static gradient edge. Reduced-motion neutralized by the global block above. */
@property --bb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes bb-rotate {
  to { --bb-angle: 360deg; }
}
/* Ask Kekabot search-bar beam moved into the .kb-query-bar rules above (background-clip
   method). The old mask-composite ::after was removed — it rendered as a full fill in
   Safari/older WebKit. */

/* =============================================================================
   ===== MOBILE LAYER =====
   Bespoke mobile-first responsive layer. Single appended block so the cascade
   wins at equal specificity without !important (except vs inline styles).
   Breakpoints (literals — custom props cannot be used in @media):
     phone   : (max-width: 640px)
     tablet  : (min-width: 641px) and (max-width: 1024px)
     coarse  : (hover: none) and (pointer: coarse)
   JS mirrors these via _isPhone()/_isTablet()/_isCoarse() and stamps
   body[data-mobile="phone"|"tablet"] + body[data-coarse="1"] (initMobileLayer).
   Namespace for new classes: .mobile-*  — everything else reuses existing chrome.
   Rollback: delete this block + the initMobile*/initOverlayRouter/initQolPass
   functions and their call lines at the bottom of DOMContentLoaded.
   ============================================================================= */

/* ── Phase 0: foundation polish (no layout change) ─────────────────────────── */
/* Tabular numerals on the animated KPI values — per-digit pop-in re-renders these,
   so proportional digits shift neighbours. */
.tl-kpi-value { font-variant-numeric: tabular-nums; }
/* Overflow-menu rows press like every other small control (P12, 0.96 exactly). */
.tov-item { transition: background 100ms var(--ease), color 100ms var(--ease), transform var(--t-fast) var(--ease); }
.tov-item:active { transform: scale(0.96); }

/* ── Phase 1: shell — bottom tab bar, More sheet, compact top bar, FAB ─────── */
/* Hidden everywhere by default; the phone query turns the shell on. */
.mobile-tabbar { display: none; }

@keyframes mobile-sheet-in  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mobile-sheet-out { to { transform: translateY(24px); opacity: 0; } }

/* Sheet primitives (also used by later phases). Chrome = existing .dm header tokens. */
.mobile-sheet-overlay {
  position: fixed; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur)); -webkit-backdrop-filter: blur(var(--scrim-blur));
  z-index: var(--z-modal);
  animation: cmd-overlay-in var(--t-fast) ease;
}
.mobile-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: calc(100dvh - 24px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* 20px outer — inner rows use --radius-m (10) + 8-10px padding */
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-modal) + 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: mobile-sheet-in 320ms var(--ease);
  will-change: transform;
}
.mobile-sheet::before {                 /* drag handle */
  content: ""; display: block;
  width: 36px; height: 4px; margin: 8px auto 0;
  border-radius: var(--radius-pill); background: var(--border-strong);
}
.mobile-sheet--closing { animation: mobile-sheet-out 200ms ease-in forwards; }
.mobile-sheet-overlay--closing { animation: cmd-overlay-out 160ms ease-in forwards; }
.mobile-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 2px 20px; flex-shrink: 0;
}
.mobile-sheet-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; text-wrap: balance; }
.mobile-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 10px 12px; min-height: 0; }

/* More sheet content — reuses .nav-item / .nav-section-label / .prog-pill chrome, touch-sized. */
.mobile-more-sheet .nav-item { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 15px; gap: 12px; }
.mobile-more-sheet .nav-item-icon { width: 22px; }
.mobile-more-sheet .nav-item-icon svg { width: 20px; height: 20px; }
.mobile-more-sheet .nav-section-label { padding: 10px 12px 4px; }
.mobile-more-prog {                     /* cloned HCR/PER switch — grid, no slider */
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 6px 2px 10px; background: none;
}
.mobile-more-prog .prog-pill { min-height: 44px; font-size: 11.5px; border-radius: var(--radius-m); background: var(--surface-2); border-color: var(--border); }
.mobile-more-prog .prog-pill--active { background: var(--primary-soft); border-color: var(--primary-a30); color: var(--primary); }
.mobile-more-prog .prog-pill:hover { transform: none; }
.mobile-more-user { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border-radius: var(--radius-m); text-align: left; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.mobile-more-user:active { transform: scale(0.98); background: var(--surface-2); }
.mobile-more-user .avatar { width: 36px; height: 36px; font-size: 13px; }
.mobile-more-user .user-info { display: flex; flex-direction: column; min-width: 0; }
.mobile-more-user .user-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mobile-more-user .user-role { font-size: 12px; color: var(--text-tertiary); }
.mobile-more-user .mobile-more-user-chev { margin-left: auto; color: var(--text-tertiary); }

@media (max-width: 640px) {
  /* Rail is replaced by the tab bar; main content leaves room for it. */
  .nav-rail { display: none; }
  .main-content { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 100;                                   /* below .dm (101) so overlays cover it */
  }
  body.dark .mobile-tabbar { background: rgba(24,22,31,0.92); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); }
  .mobile-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 44px; padding: 4px 0 6px;
    color: var(--text-secondary);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
    border-radius: var(--radius-m);
    transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .mobile-tab:active { transform: scale(0.96); }
  .mobile-tab-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 28px; border-radius: var(--radius-pill);
    transition: background var(--t) var(--ease), color var(--t-fast) var(--ease);
  }
  .mobile-tab-icon svg { width: 22px; height: 22px; }
  .mobile-tab.active { color: var(--primary); font-weight: 700; }
  .mobile-tab.active .mobile-tab-icon { background: var(--primary-a12); color: var(--primary); }
  .mobile-tab .nav-count {
    position: absolute; top: 2px; left: calc(50% + 6px);
    margin: 0; height: 16px; min-width: 16px; padding: 0 4px;
    font-size: 10px; background: var(--primary); color: #fff;
  }
  .mobile-tab .nav-count:empty, .mobile-tab .nav-count[data-empty="1"] { display: none; }

  /* Compact top bar */
  .top-bar { padding: 10px 12px 10px 16px; gap: 8px; }
  .page-title { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #scopeSwitcher .vmt-btn { padding: 6px 10px; font-size: 12px; }
  .top-bar-actions { gap: 4px; }

  /* "Add Request" → floating action button above the tab bar (same node, same handler) */
  #addRequestBtn {
    position: fixed; right: 16px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px; padding: 0;
    justify-content: center;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-primary), var(--shadow-m);
    z-index: 99;
  }
  #addRequestBtn svg { width: 22px; height: 22px; }
  #addRequestLabel { display: none; }
  /* backdrop-filter turns the dark top bar into the containing block for its fixed FAB child
     (it landed at top:-50px). Nothing scrolls under the bar on phone, so drop the glass there. */
  body.dark .top-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  /* Snackbar clears tab bar + FAB row */
  .snackbar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Phase 2: sheet system — every overlay becomes a bottom / full-height sheet on phone ──
   Existing open/close classes are kept (JS unchanged); only geometry + motion change here.
   Drag handle is injected by initSheetGestures() as .mobile-sheet-handle inside each header. */
.mobile-sheet-handle { display: none; }
body.mobile-scroll-locked .main-content { touch-action: none; }   /* no scroll-through under a sheet */

@media (max-width: 640px) {
  .mobile-sheet-handle {
    display: block; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--border-strong);
  }
  .dm-header, .dialog-header, .col-mgr-header, .fp-header, .cu-modal-head, .kb-panel-header, .notif-header { position: relative; touch-action: none; }

  /* Shared sheet geometry */
  .dm, .dialog, .col-mgr, .cu-modal, .filter-panel, .kb-panel, .notif-panel,
  .user-menu, .toolbar-overflow-menu, .sf-panel, .per-cu-url-panel, .inline-edit-dropdown, .inline-edit-text, .ire {
    position: fixed !important;                 /* .ire is absolute + JS-positioned on desktop */
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    transform: none;
    margin: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    max-height: calc(100dvh - 24px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: var(--shadow-lg);
  }
  /* Full-height sheets: content-dense surfaces */
  .dm, .dialog, .cu-modal, .os-modal, .kb-panel { height: calc(100dvh - 12px) !important; max-height: calc(100dvh - 12px); }
  .dm.dm--compact { height: auto !important; }        /* Status L1 guard prompt stays a short sheet */
  .kb-panel { transform: translateY(100%); border-left: 0; }
  .kb-panel--open { transform: none; }
  .rq-detail-panel { width: 100% !important; }
  .filter-panel { top: auto; height: auto; }
  .cmd-palette {                                       /* top-anchored so the input stays above the keyboard */
    top: env(safe-area-inset-top, 0px); bottom: auto; left: 0; right: 0;
    width: 100%; max-width: 100%; transform: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    max-height: calc(100dvh - 12px);
  }

  /* Motion: slide up / settle down (exit softer + shorter than enter) */
  .dm:not(.hidden), .dialog:not(.hidden), .col-mgr:not(.hidden), .cu-modal--spotlight:not(.hidden),
  .filter-panel:not(.hidden), .kb-panel--open, .notif-panel:not(.hidden), .sf-panel:not(.hidden) {
    animation-name: mobile-sheet-in; animation-duration: 320ms; animation-timing-function: var(--ease); animation-fill-mode: both;
  }
  .dm--closing, .dialog--closing, .col-mgr--closing, .cu-modal--closing, .filter-panel--closing,
  .kb-panel--closing, .notif-panel--closing, .sf-panel--closing {
    animation: mobile-sheet-out 200ms ease-in forwards !important;
  }
  .user-menu, .toolbar-overflow-menu, .inline-edit-dropdown:not(.hidden), .inline-edit-text:not(.hidden), .ire:not(.hidden), .per-cu-url-panel {
    animation: mobile-sheet-in 260ms var(--ease) both;
  }
  .toolbar-overflow-menu.toolbar-overflow-menu--closing { animation: mobile-sheet-out 150ms ease-in forwards; }

  /* Detail modal */
  .dm-header { padding: 18px 16px 10px; }
  .dm-header-top { gap: 8px; }
  .dm-title { font-size: 17px; }
  .dm-tabs { padding: 0 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .dm-tabs::-webkit-scrollbar { display: none; }
  .dm-tab { padding: 12px 14px; min-height: 44px; white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; }
  .dm-panel { padding: 16px 16px 24px; }
  .dm-grid { grid-template-columns: 1fr; }
  .dm-cell:nth-child(even) { border-left: 0; }
  .dm-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; gap: 8px; }
  .dm-footer .btn-filled, .dm-footer .btn-outlined { min-height: 44px; }

  /* Add Request / PER add dialogs */
  .dialog-header { padding: 18px 16px 12px; }
  .dialog-body { padding: 16px; }
  .form-row { flex-wrap: wrap; gap: 12px; }
  .form-row > .form-field { flex: 1 1 100%; min-width: 0; }
  .form-input:not(textarea), .form-select, .fp-select { min-height: 44px; font-size: 15px; }   /* textareas excluded: .remark-ghost canvas-measures their 12.5/13.5px metrics */
  .dialog-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .dialog-actions .btn-filled, .dialog-actions .btn-outlined, .dialog-actions .btn-text { width: 100%; min-height: 44px; justify-content: center; }
  .elig-check-row { min-height: 44px; align-items: center; }
  .elig-check-row input[type="checkbox"] { width: 22px; height: 22px; }

  /* Column manager */
  .col-mgr-header { padding: 18px 16px 10px; }
  .col-mgr-body { padding: 8px 12px 12px; }
  .col-item { min-height: 48px; }
  .col-mgr-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .col-mgr-footer > :nth-child(2) { flex: 1 1 100%; order: 3; white-space: normal; text-align: center; }
  .col-mgr-footer > :nth-child(2):empty { display: none; }
  .col-mgr-footer .btn-filled { flex: 1; min-height: 44px; justify-content: center; }
  .col-mgr-footer .btn-text, .col-mgr-footer .btn-outlined { min-height: 44px; }

  /* Filter panel (was a 320px right drawer) */
  .fp-header { padding: 18px 16px 10px; }
  .fp-body { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: calc(88dvh - 60px); }

  /* ClickUp / OS viewer */
  .cu-modal-head { padding: 18px 12px 10px; flex-wrap: wrap; }
  .cu-crumb { max-width: 46vw; padding: 8px; }
  .cu-crumb--current { max-width: 70vw; }
  .cu-modal-body { padding: 14px 16px; }
  .os-modal { height: calc(100dvh - 12px) !important; }

  /* Notifications bell panel (existing @720 rule already widens it; make it a sheet) */
  .notif-panel { top: auto !important; }
  .notif-list { max-height: calc(70dvh - 60px); }

  /* Inline editors anchored by JS (top/left inline styles) → bottom sheets */
  .inline-edit-dropdown { max-height: 60dvh; overflow-y: auto; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .inline-edit-dropdown .ied-option, .inline-edit-dropdown [role="option"] { min-height: 48px; display: flex; align-items: center; }
  .inline-edit-text { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .inline-edit-text .iet-input { min-height: 44px; font-size: 15px; }
  .ire { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .toolbar-overflow-menu { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .tov-item { min-height: 48px; font-size: 15px; }
  .user-menu-item { min-height: 48px; font-size: 15px; }
}

/* ── Phase 3: tracker on phone — touch table (first column pinned), toolbar → ⋯ sheet, compact KPIs ── */
.tov-meta { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-tertiary); }

@media (hover: none) {
  .data-table tbody tr:hover { background: transparent; }   /* no sticky tap-highlight; selection/pinned states keep their own classes */
  .rab { display: none !important; }                        /* hover-only row action bar has no touch path; actions live in the detail sheet */
}

@media (max-width: 640px) {
  /* Toolbar: left cluster wraps; right cluster collapses to the ⋯ sheet (+ selection actions) */
  .filter-row { flex-wrap: wrap; padding: 0 12px 8px; gap: 8px; }
  .filter-left { gap: 6px; }
  .filter-right { flex-shrink: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  .filter-right > .row-count-badge,
  .filter-right > .density-btn,
  .filter-right > #exportCsvBtn,
  .filter-right > .export-sel-count,
  .filter-right > .requests-toolbar-mode-rail { display: none !important; }
  .vmt-btn, .filter-panel-btn, .search-bar, .filter-right .btn-outlined, .filter-right .btn-text { min-height: 40px; }
  .filter-right .icon-btn { width: 44px; height: 44px; }

  /* KPI cards: 2-up grid when expanded; compact strip scrolls horizontally when collapsed */
  .tl-kpi-row { flex-wrap: wrap; gap: 10px; padding: 12px 12px 6px; }
  .tl-kpi-card { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); padding: 14px 14px 16px; }
  .tl-kpi-value { font-size: 28px; }
  .tl-kpi-value--sm { font-size: 20px; }
  .hcr-summary-compact { padding-left: 12px; padding-right: 12px; }
  .hcr-summary-stack.is-collapsed .hcr-summary-compact { padding: 8px 12px 12px; max-height: 110px; gap: 8px; }
  .hcr-summary-compact__main { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .hcr-summary-compact__main::-webkit-scrollbar { display: none; }
  .hcr-summary-compact__main > * { flex: 0 0 auto; min-height: 40px; }
  .hcr-summary-compact__show { flex: 0 0 auto; min-height: 40px; }
  .col-pin-glyph { display: none !important; }              /* pinning is fixed on phone (Customer); no freeze UI */
  body[data-mobile="phone"] .data-table .customer-chip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

  /* Table: edge-to-edge, touch-height rows (also overrides body.density-compact on phone) */
  .table-section { padding: 0 0 8px; }
  .table-wrapper { border-radius: 0; border-left: 0; border-right: 0; }
  body[data-mobile="phone"] .data-table td,
  body[data-mobile="phone"] .data-table th { padding: 12px 10px; font-size: 13.5px; }
  body[data-mobile="phone"] .data-table th { font-size: 11px; }
  .view#view-all-requests::before, .view#view-all-requests::after { display: none; }   /* morph washes use desktop px insets */

  /* Board: one column per swipe */
  .kanban-board { padding: 12px 12px 16px; scroll-snap-type: x mandatory; gap: 12px; }
  .kanban-col { flex: 0 0 min(86vw, 300px); width: auto; max-width: none; scroll-snap-align: center; }

  /* Review queue rows */
  .rq-item-header { flex-wrap: wrap; row-gap: 6px; }
}

/* ── Phase 4: analytics / escalations / admin / PER / timeline on phone ───────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .an-row-2--5050 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esc-hero-top, .esc-hero-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Analytics: one card per row, charts a touch taller, legends handled by _mobileChartOpts */
  .analytics-container { padding: 12px 12px 24px; gap: 12px; }
  .an-card { padding: 16px 14px 14px; }
  .an-row-2, .an-row-2--5050, .an-row-2--6040, .an-row-2--4060 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body[data-mobile="phone"] .an-chart-wrap > [style*="height"] { height: 240px !important; }
  .an-table-wrap { max-height: none; }
  .an-tl-fb { min-height: 40px; }

  /* Escalations: every grid collapses (existing 900/1100 rules already fire; these pin the minmax(320px) tracks) */
  .esc-hero-top, .esc-hero-workspace, .esc-grid, .esc-charts-row, .notif-center-hero, .notif-center-grid { grid-template-columns: minmax(0, 1fr); }
  .esc-filter-pill, .esc-sort-pill { min-height: 40px; }

  /* Admin config: nested 220px sidebar → horizontal category strip */
  .ac-layout { flex-direction: column; }
  .ac-sidebar { width: 100%; flex-direction: row; gap: 6px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ac-sidebar::-webkit-scrollbar { display: none; }
  .ac-nav-btn { flex: 0 0 auto; width: auto; min-height: 40px; white-space: nowrap; }
  .ac-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ac-sidebar .nav-section-label { display: none; }
  .ac-nav-btn svg { display: none; }
  .ac-section-header { flex-direction: column; padding: 16px 16px 0; }
  .ac-section-actions { justify-content: flex-start; }
  .ac-editor { padding: 14px 16px 20px; }
  .ac-footer { padding: 10px 16px; }
  .ac-fw-card { padding: 16px; }
  .ac-risk-form, .ac-sla-ladder { grid-template-columns: minmax(0, 1fr); }

  /* PER: stack rank scrolls sideways (colgroup is ~1250px wide by design); roadmap one column per swipe */
  body[data-mobile="phone"] #perStackRankContainer { overflow-x: auto !important; padding: 12px 12px 24px !important; }
  .per-roadmap-board { padding-left: 12px; padding-right: 12px; scroll-snap-type: x mandatory; }
  .per-roadmap-col { flex: 0 0 min(86vw, 288px); scroll-snap-align: center; }

  /* Timeline (frappe-gantt) is intrinsically wide — let it pan */
  .tl-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }

  /* Customer Pulse rows / Settings / Profile */
  .pulse-heat-row { min-height: 44px; }
  .profile-container { padding: 16px 12px; }
}

/* ── Phase 5: touch affordances — hover reveals, hit areas, reorder controls ─────── */
/* Reorder controls exist only on coarse pointers (injected by _decorateTouch*). */
.mobile-col-move, .mobile-card-move, .mobile-row-move, .mobile-col-move-btn { display: none; }
.tov-item--active { color: var(--primary); background: var(--primary-a08); }
.tov-item[disabled] { opacity: 0.45; pointer-events: none; }
.tov-item .tov-label { flex: 1; min-width: 0; text-align: left; }
.mobile-action-sheet .mobile-sheet-body { padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }

@media (hover: none) {
  /* Hover-revealed controls have no touch path — keep them visible. */
  .table-row .cu-edit-btn,
  .row-sel-th .row-checkbox, .per-row-sel-th .per-row-checkbox,
  .col-remarks-editable .ire-hint-icon,
  .sf-item .sf-delete,
  .per-roadmap-col-header .kanban-col-grip, .kanban-col-header .kanban-col-grip,
  .per-sr-row .per-sr-note-btn,
  .pulse-request-row .pulse-open-btn,
  .pulse-s1-editable, .pulse-s2-editable,
  .ct-chip-x, .esc-tier-chip-clear, .snackbar-dismiss, .snackbar-undo { opacity: 1 !important; }
  .kanban-col-grip { display: none; }                /* grip only meant anything for mouse drag; ⋯ replaces it */
  .text-popover { display: none !important; }        /* hover popover; touch uses the peek sheet (initTouchPeek) */
  /* Touch browsers keep :hover after a tap — lifted cards stayed raised until the
     next tap elsewhere. Neutralize the lift/shadow hovers (pressed :active stays).
     Rollback: delete these rules. */
  .tl-kpi-card:hover, .tl-group-chip:hover, .esc-runway-chip:hover,
  .hcr-summary-compact__metric[data-filter-chip]:hover,
  .hcr-summary-compact__metric[data-per-chip]:hover,
  .per-roadmap-card:hover, .prog-pill:hover { transform: none; }
  .tl-kpi--active:hover { transform: translateY(-2px) !important; }
  .hcr-summary-compact__metric[data-filter-chip]:hover,
  .hcr-summary-compact__metric[data-per-chip]:hover { box-shadow: none; filter: none; }
  .kanban-card:hover, .per-roadmap-card:hover, .per-sr-row:hover,
  .pulse-customer-card:hover { box-shadow: none; }
}

@media (hover: none) and (pointer: coarse) {
  .mobile-col-move { display: inline-flex; gap: 2px; margin-left: auto; margin-right: 6px; }
  .mobile-card-move, .mobile-row-move, .mobile-col-move-btn { display: inline-flex; }
  .mobile-card-move { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; color: var(--text-tertiary); }
  .kanban-card { position: relative; padding-right: 44px; }
  .mobile-row-move { width: 40px; height: 40px; margin-left: 4px; vertical-align: middle; }
  .mobile-col-move-btn { width: 36px; height: 36px; margin-left: 4px; flex-shrink: 0; }
  .col-item .mobile-col-move .icon-btn { width: 40px; height: 40px; }
  .col-item .col-item-grip { display: none; }
  .col-mgr-hint { visibility: hidden; height: 0; margin: 0; padding: 0; }   /* "Drag to reorder" is false on touch */

  /* Minimum 44px hit areas (WCAG 2.5.8) for the smallest controls */
  .icon-btn { min-width: 44px; min-height: 44px; }
  .btn-outlined, .btn-text, .vmt-btn, .rq-tab, .ac-nav-btn, .esc-filter-pill, .esc-sort-pill, .an-tl-fb, .prog-pill, .user-menu-item { min-height: 44px; }
  .cu-crumb { padding: 10px 8px; min-height: 40px; }
  .an-filter-chip-x, .ct-chip-x, .snackbar-dismiss, .sf-delete, .col-toggle, .elig-check-row input[type="checkbox"] { position: relative; }
  .an-filter-chip-x::before, .ct-chip-x::before, .snackbar-dismiss::before, .sf-delete::before, .col-toggle::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .nav-tooltip { display: none !important; }        /* hover-only rail tooltips */
}

/* ── Phase 6: tablet tier polish + QoL ─────────────────────────────────────── */
#dmCopyLink svg { width: 16px; height: 16px; }
@media (max-width: 640px) { #dmCopyLink { width: 44px; height: 44px; } }

@media (min-width: 641px) and (max-width: 1024px) {
  .tl-kpi-row { flex-wrap: wrap; gap: 12px; padding: 16px 16px 8px; }
  .tl-kpi-card { flex: 1 1 calc(33.333% - 8px); min-width: calc(33.333% - 8px); }
  .filter-row { flex-wrap: wrap; padding: 0 16px 8px; }
  .filter-right { flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .table-section { padding: 0 16px 16px; }
  .top-bar { padding: 12px 16px; }
  .kb-panel, .rq-detail-panel { width: min(480px, 100vw); }
  .dm { width: min(880px, 94vw); }
  .analytics-container { padding: 16px 16px 24px; }
  .kanban-board { padding: 12px 16px 20px; }
}
/* Wrapped KPI rows (phone 2-up, tablet 3-up) outgrow the collapse rule's 280px max-height — lift it while expanded. */
@media (max-width: 1024px) {
  .hcr-summary-stack:not(.is-collapsed) .summary-collapse-row { max-height: none; }
}

/* ── Phone: the requests views scroll as a whole (KPI cards scroll away), the toolbar sticks,
   and the table stage keeps a viewport-sized box so its own sticky header / pinned columns work.
   Desktop keeps the locked shell (only .table-wrapper scrolls). ── */
@media (max-width: 640px) {
  .view#view-all-requests, .view#view-per-all-requests { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  .view#view-all-requests .hcr-summary-stack, .view#view-per-all-requests .hcr-summary-stack { flex-shrink: 0; }
  .view#view-all-requests .filter-row, .view#view-per-all-requests .filter-row {
    position: sticky; top: 0; z-index: 70;
    background: var(--bg); padding-top: 8px;
    box-shadow: 0 1px 0 var(--border);
  }
  .view#view-all-requests .requests-surface-stage, .view#view-per-all-requests .requests-surface-stage {
    flex: 0 0 auto;
    height: calc(100dvh - 176px - env(safe-area-inset-bottom, 0px));   /* top bar + sticky toolbar + tab bar */
    min-height: 360px;
  }
  /* "Hide summary" stays a visible toolbar control on phone (also in the ⋯ sheet) */
  .filter-right > .hcr-summary-toggle:not(.hidden) { display: inline-flex !important; min-height: 40px; padding: 0 12px; font-size: 12.5px; }   /* .hidden = collapsed → the strip's "Show" takes over */
}

/* ── Touch peek sheet (read-only view of hover-popover cells on coarse pointers) ─────── */
.mobile-peek-body { padding: 4px 20px 8px; max-height: 55dvh; }
.mobile-peek-body .text-popover-thread { max-height: none; }
.mobile-peek-text { font-size: 15px; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.mobile-peek-thread .remark-entry-text { font-size: 15px; line-height: 1.55; }
.mobile-peek-actions { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.mobile-peek-actions .tov-item { min-height: 48px; font-size: 15px; }